⚠️ Maintenance Mode This library is now in maintenance mode. New features will not be added, and its use is recommended only for legacy Leaflet-based systems. For all other use cases, you should use MapLibre GL JS.
Vector tile rendering and labeling for Leaflet.
This project is a complete vector tile renderer - including quality label layout - in as simple as possible of an implementation. It's an alternative to renderers like MapLibre GL JS in a fraction of the size.
New projects starting from scratch should probably use MapLibre GL, but this library is useful as a drop-in replacement for raster basemaps in Leaflet, either using the Protomaps API or PMTiles on your own storage.
- Render interactive slippy maps with Leaflet integration
- Supports variable web fonts with multiple weights and italics in a single font file
- Can read normal Z/X/Y tile URLs or offline, static-hosted tile archives in PMTiles format
- Full out-of-the-box support for right-to-left and Indic/Brahmic writing systems
- Configurable via plain JavaScript
- (Advanced) Extensible API for defining your own symbolizers
See the docs on what protomaps-leaflet is, what protomaps-leaflet is not
- Simple Leaflet demo
- Satellite + labels demo
- GeoJSON between basemap and labels demo
- Map inset
- Custom fonts
<script src="https://unpkg.com/protomaps-leaflet@4.0.1/dist/protomaps-leaflet.js"></script>
<script>
const map = L.map('map')
var layer = protomapsL.leafletLayer({url:'FILE.pmtiles OR ENDPOINT/{z}/{x}/{y}.mvt',flavor:"light",lang:"en"})
layer.addTo(map)
</script>See GUIDE.md for how to visualize custom vector data.