kkpan11 / protomaps.js

Lightweight vector map rendering, labeling and symbology for the web

protomaps-leaflet

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.

Features

• 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

Demos

• Simple Leaflet demo
• Satellite + labels demo
• GeoJSON between basemap and labels demo
• Map inset
• Custom fonts

How to use

<script src="https://unpkg.com/protomaps-leaflet@latest/dist/protomaps-leaflet.min.js"></script>
<script>
    const map = L.map('map')
    var layer = protomapsL.leafletLayer({url:'FILE.pmtiles OR ENDPOINT/{z}/{x}/{y}.mvt',theme:"light"})
    layer.addTo(map)
</script>

See Also

• Tangram
• KothicJS
• Leaflet.VectorGrid