PMTiles for Browsers + NodeJS

See the JavaScript API docs

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

``html

`

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

As an ES6 module: npm add pmtiles

`js
import { PMTiles } from "pmtiles";
`

$3

Example of a raster PMTiles archive displayed in Leaflet:

`js
import { PMTiles, leafletRasterLayer } from "pmtiles";
const p = new PMTiles('example.pmtiles')
leafletRasterLayer(p,{attribution:'© OpenStreetMap'}).addTo(map)
``

Live example | Code

$3

See protomaps-leaflet

MapLibre GL JS

Example of a PMTiles archive displayed in MapLibre GL JS:

`js
import { Protocol } from "pmtiles";
let protocol = new Protocol();
maplibregl.addProtocol("pmtiles",protocol.tile);
var style = {
"version": 8,
"sources": {
"example_source": {
"type": "vector",
"url": "pmtiles://https://example.com/example.pmtiles",
"attribution": '© OpenStreetMap'
...
``

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.