protomaps.js
A vector map renderer for the web.
This project is a complete web map renderer - including quality label layout, pattern fills, and icons - in as simple as possible of an implementation. It's an alternative to renderers like Mapbox GL JS in a fraction of the size.
Features
- Render static maps to Canvas elements or interactive 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, S3-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
- Extensible API for defining your own symbolizers
See the docs on what protomaps.js is, what protomaps.js is not
Demos
- Simple Leaflet demo
- Multi-language customization
- Satellite + labels demo
- GeoJSON between basemap and labels demo
- JSON style
- Map inset
- PostGIS
- Custom fonts
How to use
<script src="https://unpkg.com/protomaps@latest/dist/protomaps.min.js"></script>
<script>
const map = L.map('map')
var layer = protomaps.leafletLayer({url:'FILE.pmtiles OR ENDPOINT/{z}/{x}/{y}.pbf'})
layer.addTo(map)
</script>Exports of OpenStreetMap data in PMTiles format can be obtained from https://protomaps.com/bundles.
Project Status
The design is still evolving rapidly, so do not expect any kind of stable internal or external-facing API between minor versions. But please do report bugs and discuss requirements in the Issues.