Fork from https://github.com/SpatialServer/Leaflet.MapboxVectorTile.
Why fork a 10-year old project for an outdated Leaflet release (0.77)? Read the answer here: SpatialServer#89
This fork just adds support for custom drawing functions for more complex geometric shapes like hearts, stars or custom polygons. You can also color specific parts of the shapes based on properties.
Only dist/Leaflet.MapboxVectorTile.js and the examples are modified.
For static icons use e.g.
style.draw = drawStar;
For dynamic ones where you need to add feature properties like a score, use this function
style.draw = function(ctx, x, y, size) {drawCircleWithGreyOutlineAndDotColor(ctx, x, y, size, feature.properties.score); };
You can use tippecanoe for converting geojson to mbtiles and mbtileserver to serve as pbf.
- Install go, then
go install github.com/consbio/mbtileserver@latest
export PATH=$PATH:$(go env GOPATH)/bin-
Install tippecanoe from https://github.com/felt/tippecanoe
-
Create test point geojson with geo.rocks/coordinates2, download geojson (or use the one in this repo)
-
Convert geojson to mbtiles in tilesets folder:
tippecanoe -o tilesets/coordinates.mbtiles coordinates.geojson -z24 --drop-rate=1 --force -
Run mbtiles go server with
mbtileserver coordinates.mbtiles -p 8000 -
Run a simple webserver for the static files in this repo, like
npx serve -
Modify the functions and observe the changes.
Examples:
