https://github.com/do-me/leaflet_maplibre_hack
Displaying vector tile basemaps on Leaflet 0.7.7 with maplibre and protomaps basemaps
https://github.com/do-me/leaflet_maplibre_hack
leaflet maplibre protomaps vector-tiles
Last synced: 4 months ago
JSON representation
Displaying vector tile basemaps on Leaflet 0.7.7 with maplibre and protomaps basemaps
- Host: GitHub
- URL: https://github.com/do-me/leaflet_maplibre_hack
- Owner: do-me
- License: mit
- Created: 2025-06-23T06:11:50.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2025-06-23T07:09:27.000Z (12 months ago)
- Last Synced: 2025-06-23T07:27:22.307Z (12 months ago)
- Topics: leaflet, maplibre, protomaps, vector-tiles
- Language: HTML
- Homepage: https://do-me.github.io/leaflet_maplibre_hack/
- Size: 17.6 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Leaflet-Maplibre-Hack
**This repo is only for you if you are bound to some legacy Leaflet version below v1.0 where vector tiles could not yet be displayed.**
The example here uses maplibre as base layer displaying vector-tile-based basemaps. This layer is not supposed to be interactive, so it can stay in the background. The markers, lines and geometries are drawn on top of this basemap with Leaflet so you do not need to rewrite your application but can still use:
- super performant and cheap protomaps-based basemaps. See https://maps.protomaps.com/#flavorName=light&lang=en&map=1.22/0/0 for reference. This repo includes a style.json but you need to enter a valid URL for your own protomaps instance like `"url": "pmtiles://https://fsn1.your-objectstorage.com/your-bucket/world.pmtiles"`
- official OSM vector tiles
- BKG basemaps for Germany with: style: `https://gdz.bkg.bund.de/index.php/default/gdz-basemapde-vektor-gdz-basemapde-vektor.html`
- OpenFreeMaps with: style: `https://tiles.openfreemap.org/styles/liberty`
## Issues
Everything works, however, note that animations (for a "smooth" zooming experience) are currently turned off. I did not manage yet to get smooth zooming for both leaflet & maplibre at the same time without delay.
For Leaflet, you can turn it on again with: `zoomAnimation: false,`, then the markers etc. will be animated. However, it creates an annoying offset for the animation duration between the actual coordinates of the markers vs. the basemap (that is not animated).