mirror of
https://github.com/protomaps/PMTiles.git
synced 2026-02-04 19:01:08 +00:00
6638d040a5
* Typing improvements [#287] * rename FileApiSource to FileSource * In a few cases we need to use any and biome-ignore. Deferring any restructuring here to js v4. * replace prettier with biome
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)
Leaflet: Vector tileset
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>'
...
CORS
See the Protomaps Docs on Cloud Storage for uploading and configuring CORS for Cloudflare R2, Amazon S3, Google Cloud Storage and more.