A toolset to visualise PMTiles more easily in Leaflet.js (based on https://github.com/protomaps/protomaps-leaflet).
Demos:
To build distribution files locally run:
npm run dist
See 📂 demo folder for examples.
To run the demos locally:
- launch
npm run devto build and copy distribution files into the dist/demo folder on any change, - launch
npm run demoin another terminal to serve and update the demo files on any change, - serve your PMTiles with
http-server -p 8081 --corsand adjust the URL as required in demo files, - open eg http://127.0.0.1:8080/openmaptiles.html in your browser
The module exposes a mapbox_style function generating paint and labels rules from a Mapbox style is a JSON document. This is typically useful to render PMTiles created from the OpenMapTiles profile.
Note
Have a look to the related demo if you'd like to customize default fonts.
This feature is based on inital work done by protomaps-leaflet contributors (please refer to protomaps/protomaps-leaflet#121 for more details).
The module exposes a leaflet_style function generating paint rules from Leafet path style options as used to visualize GeoJson features in Leaflet. This is typically useful to render similarly PMTiles created from GeoJson datasets. As a PMTiles file might contain multiple layers, you need to specify the target layer as the second argument of the style function.
Note
Have a look to the related demo for more details.
To convert the demonstration GeoJson file to PMTiles file we used tippecanoe library with the following command line: tippecanoe -z15 -Z2 -rg --projection=EPSG:4326 -o output-file.pmtiles -l layer input-file.geojson -f. You can manage minimum zoom of the feature display with -Z parameter, maximum zoom of the feature display with -z and rate of the feature display with -r. For further information, please check the tippecanoe documentation.
Coming soon