Example of store locator using Mapbox-GL and tileserver-php from klokantech. It can be hosted on a standard Apache+PHP web hosting.

• Filter listing within the map view
• Filter listing along calculated route
• Self-hosted map tiles
• Filter locations categories with dropdown box
• Interactive location listing
• Custom Markers
• Route calculation with MapboxDirections

The rendering is done using mapboxgl.js library. The pluggin MapboxDirections is used for the navigation. The filtering allong the Route is done with Turf.js:

  // buffer the route with an area of radius 'radius'
  var bufferedLinestring = turf.buffer(mapDirectionsSource._data.features[2].geometry, radius, {
    units: unit
  });

  // update bufferedTraceSource
  map.getSource('bufferedTraceSource').setData(bufferedLinestring);

  // Get locations rendered on the map
  var features = map.queryRenderedFeatures({
    layers: ["locations"]
  });

  // use featureCollection to convert features (array of features) into a collection of 
  // features (Object type FeatureCollection);
  var collection = turf.featureCollection(features);

  // Filter the points to the area around the direction
  ptsWithin = turf.pointsWithinPolygon(collection, bufferedLinestring);

The category and within-map-view filters for the listing have been implemented using the excellent examples from mapbox:

Filter the store locations with dropdown box:

https://www.mapbox.com/mapbox-gl-js/example/filter-markers/

Filter the store list within the map view:

https://www.mapbox.com/mapbox-gl-js/example/filter-features-within-map-view/

The custom marker have been added using the Add Custom Marker example.

https://www.mapbox.com/mapbox-gl-js/example/add-image/

For higher performance the .mbtile file has been extracted to .pbf files format. This can be done using the python utility mb-util from mapbox, then the files must be gzip decompressed. The following commands lines will do the tricks.

./mb-util --image_format=pbf countries.mbtiles countries
mbutil.mbtiles_to_disk('countries.mbtiles', 'countries', image_format='pbf')
gzip -d -r -S .pbf *
find . -type f -exec mv '{}' '{}'.pbf \;

This project has been created to ease the localisation of local retail stores in the city of Leipzig-Germany. Please feel free to send us your comments or any suggestions you may have to improve it functionality.

The original tiles of Leipzig-Germany have been purchased at https://openmaptiles.org/ . They are subject to license restriction (see license).

Copyright (c) 2018-2020 Zoestha-UG, Licensed under BSD 3-Clause License.