Store locator with self hosted map tiles using MapboxGL.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
PWAprojects
build
css
dist
en
fonts
ico
js
json
media
tileserver
vendor
.gitignore sdv Oct 3, 2018
.htaccess htaccess: force https if not localhost Jul 20, 2018
404.html
BingSiteAuth.xml
LICENSE
Marker_with_Shadow.png
ParseJson.py
README.md
favicon-32x32.png
googleb9c9ed8737295c93.html Corrs 404 and impressum Mar 15, 2018
gulpfile.js
impressum.html optimize images with gulp-image Jul 21, 2018
index.html Rename folder correctly Oct 3, 2018
location.json
location2.json Corrs 404 and impressum Mar 15, 2018
manifest.json
marker.svg
museen.json
package-lock.json
pwabuilder-sw-register.js
pwabuilder-sw.js
robots.txt
sitemap.xml

README.md

Vectortiles Marker mit Schatten

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

Codacy Badge Website shields.io Scrutinizer Code Quality

Features

  • 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

Map rendering and listing

Leipzig_Einkaufen_Map_ListThe 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/

Vectortiles in zxy format

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 \;

Acknowledgement

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.

License

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

Copyright (c) 2018 Sébastien Barré, Licensed under BSD 3-Clause License.