JSPM

  • Created
  • Published
  • Downloads 100522
  • Score
    100M100P100Q192745F
  • License BSD-3-Clause

PMTiles archive decoder for browsers

Package Exports

  • pmtiles
  • pmtiles/dist/index.cjs
  • pmtiles/dist/index.mjs

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (pmtiles) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

PMTiles for Browsers + NodeJS

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

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

As an ES6 module: npm add pmtiles

import * as pmtiles from "pmtiles";

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

Leaflet: 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

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