JSPM

  • Created
  • Published
  • Downloads 105789
  • Score
    100M100P100Q193606F
  • License BSD-3-Clause

PMTiles archive decoder for browsers

Package Exports

  • pmtiles

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

See the JavaScript API docs

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

 <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

import { PMTiles } from "pmtiles";

Leaflet: Raster tileset

Example of a raster PMTiles archive displayed in Leaflet:

import { PMTiles, leafletRasterLayer } from "pmtiles";
const p = new PMTiles('example.pmtiles')
leafletRasterLayer(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:

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": '© <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.