PMTiles for Browsers + NodeJS

See the JavaScript API docs

the PMTiles package can be included via script tag or ES6 module:

1 <script src="https://unpkg.com/pmtiles@<VERSION>/dist/pmtiles.js"></script>

All the PMTiles exports are available under the global pmtiles variable e.g. pmtiles.PMTiles.

As an ES6 module: npm add pmtiles

1import { PMTiles } from "pmtiles";

Leaflet: Raster tileset

Example of a raster PMTiles archive displayed in Leaflet:

1import { PMTiles, leafletRasterLayer } from "pmtiles";
2const p = new PMTiles('example.pmtiles')
3leafletRasterLayer(p,{attribution:'© <a href="https://openstreetmap.org">OpenStreetMap</a>'}).addTo(map)

Live example | Code

Leaflet: Vector tileset

See protomaps-leaflet

MapLibre GL JS

Example of a PMTiles archive displayed in MapLibre GL JS:

1import { Protocol } from "pmtiles";
2let protocol = new Protocol();
3maplibregl.addProtocol("pmtiles",protocol.tile);
4var style = {
5"version": 8,
6"sources": {
7    "example_source": {
8        "type": "vector",
9        "url": "pmtiles://https://example.com/example.pmtiles",
10        "attribution": '© <a href="https://openstreetmap.org">OpenStreetMap</a>'
11    ...

Live example | Code

CORS

See the Protomaps Docs on Cloud Storage for uploading and configuring CORS for Cloudflare R2, Amazon S3, Google Cloud Storage and more.