PMTiles/js/README.md

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

Leaflet

Raster tileset

Example of a raster PMTiles archive displayed in Leaflet:

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

Live example | Code

Vector tileset

See protomaps.js

MapLibre GL JS

Example of a PMTiles archive displayed in MapLibre GL JS:

let protocol = new pmtiles.Protocol();
maplibregl.addProtocol("pmtiles",protocol.tile);
var style = {
"version": 8,
"sources": {
    "example_source": {
        "type": "vector",
        "url": "pmtiles://https://example.com/example.pmtiles",
        "attribution": '© <a href="https://openstreetmap.org">OpenStreetMap</a>'
    ...

Live example | Code

CORS

Reading a PMTiles archive from cloud storage requires CORS configuration if your web page is hosted on a different domain than your storage bucket.

Amazon S3 and S3-Compatible Storage

[
    {
        "AllowedHeaders": ["Range"],
        "AllowedMethods": ["GET","HEAD"],
        "AllowedOrigins": ["*","example.com"],
        "ExposeHeaders": ["ETag"],
        "MaxAgeSeconds": 3000
    }
]

Google Cloud Storage

[
    {
      "origin": ["*","example.com"],
      "method": ["GET","HEAD"],
      "responseHeader": ["range","etag"],
      "maxAgeSeconds": 3000
    }
]