# protomaps-leaflet

> Vector tile rendering and labeling for [Leaflet](https://github.com/Leaflet/Leaflet).

Latest version **5.1.0** (published 2025-06-18) · BSD-3-Clause license · 0 weekly downloads

## Install

```sh
npm install protomaps-leaflet
pnpm add protomaps-leaflet
yarn add protomaps-leaflet
bun add protomaps-leaflet
```

## Health

**Score 50/100 (C)** — status: stable.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: stale.

## Facts

| | |
|---|---|
| Version | 5.1.0 |
| Published | 2025-06-18 |
| First published | 2023-08-07 |
| Weekly downloads | 0 |
| License | BSD-3-Clause |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 10 |
| Unpacked size | 1.1 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 852 |
| Maintainers | bdon |
| Keywords | gis, map |

## Links

- npm: https://www.npmjs.com/package/protomaps-leaflet
- Repository: https://github.com/protomaps/protomaps-leaflet
- Homepage: https://github.com/protomaps/protomaps-leaflet#readme
- Issues: https://github.com/protomaps/protomaps-leaflet/issues
- npm.io page: https://npm.io/package/protomaps-leaflet

## Dependencies (10)

- [pbf](https://npm.io/package/pbf.md) ^4.0.1
- [rbush](https://npm.io/package/rbush.md) ^3.0.1
- [color2k](https://npm.io/package/color2k.md) ^2.0.3
- [pmtiles](https://npm.io/package/pmtiles.md) ^3.1.0
- [potpack](https://npm.io/package/potpack.md) ^1.0.2
- [@types/rbush](https://npm.io/package/@types/rbush.md) ^3.0.0
- [@mapbox/vector-tile](https://npm.io/package/@mapbox/vector-tile.md) ^2.0.2
- [@protomaps/basemaps](https://npm.io/package/@protomaps/basemaps.md) ^5.0.0
- [@mapbox/point-geometry](https://npm.io/package/@mapbox/point-geometry.md) ^1.1.0
- [@types/css-font-loading-module](https://npm.io/package/@types/css-font-loading-module.md) ^0.0.7

## Recent versions

- 5.1.0 (latest) — 2025-06-18
- 4.0.0-alpha.1 (next) — 2024-07-28
- 5.0.1 — 2025-05-04
- 5.0.0 — 2025-04-04
- 4.1.1 — 2025-03-10
- 4.1.0 — 2025-01-05
- 4.0.1 — 2024-09-12
- 4.0.0 — 2024-07-28
- 4.0.0-alpha.0 — 2024-07-25
- 3.1.2 — 2024-05-09
- 3.1.1 — 2024-04-04
- 3.1.0 — 2024-03-11
- 3.0.1 — 2024-02-25
- 3.0.0 — 2024-02-25
- 2.0.1 — 2024-02-19
- … 5 more at https://npm.io/package/protomaps-leaflet/versions

## README

# protomaps-leaflet

Vector tile rendering and labeling for [Leaflet](https://github.com/Leaflet/Leaflet).

[![npm](https://img.shields.io/npm/v/protomaps-leaflet)](https://www.npmjs.com/package/protomaps-leaflet)
[![Test suite](https://github.com/protomaps/protomaps-leaflet/actions/workflows/node.js.yml/badge.svg)](https://github.com/protomaps/protomaps-leaflet/actions/workflows/node.js.yml)

<p float="left">
    <img src="benchmark/example_1.png" width="400">
    <img src="benchmark/example_2.png" width="400">
</p>

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](https://maplibre.org) 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](https://protomaps.com/dashboard) or PMTiles on your own storage.

### Features

* Render interactive slippy maps with [Leaflet](https://leafletjs.com) 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](https://github.com/protomaps/PMTiles)
* 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](https://protomaps.com/docs/protomaps-js#protomapsjs-is-not)

## Demos

* [Simple Leaflet demo](https://protomaps.github.io/protomaps-leaflet/examples/leaflet.html)
* [Satellite + labels demo](https://protomaps.github.io/protomaps-leaflet/examples/labels.html)
* [GeoJSON between basemap and labels demo](https://protomaps.github.io/protomaps-leaflet/examples/sandwich.html)
* [Map inset](https://protomaps.github.io/protomaps-leaflet/examples/inset.html)
* [Custom fonts](https://protomaps.github.io/protomaps-leaflet/examples/fonts.html)

## How to use

```html
<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 Also
* [Tangram](https://github.com/tangrams/tangram)
* [KothicJS](https://github.com/kothic/kothic-js)
* [Leaflet.VectorGrid](https://github.com/Leaflet/Leaflet.VectorGrid)

---
_Source: https://npm.io/package/protomaps-leaflet · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._