mapbox-pmtiles
v1.0.54
Published
A custom source to add PmTiles support to mapbox gl js
Downloads
1,792
Readme
Mapbox-PmTiles
Add PmTiles support to mapbox
Usage
ESM Module
import mapboxgl from "mapbox-gl";
import { PmTilesSource } from "mapbox-pmtiles";
//Define custom source
mapboxgl.Style.setSourceType(PmTilesSource.SOURCE_TYPE, PmTilesSource);
map.on("load", () => {
const PMTILES_URL =
"https://r2-public.protomaps.com/protomaps-sample-datasets/protomaps-basemap-opensource-20230408.pmtiles";
const header = await mapboxPmTiles.PmTilesSource.getHeader(PMTILES_URL);
const bounds = [
header.minLon,
header.minLat,
header.maxLon,
header.maxLat,
];
map.addSource('pmTileSourceName', {
type: mapboxPmTiles.PmTilesSource.SOURCE_TYPE,
url: PMTILES_URL,
minzoom: header.minZoom,
maxzoom: header.maxZoom,
bounds: bounds,
});
map.current.showTileBoundaries = true;
map.current.addLayer({
id: "places",
source: "pmTileSourceName",
"source-layer": "places",
type: "circle",
paint: {
"circle-color": "steelblue",
},
maxzoom: 14,
});
});
JSDeliver
Here you can use it in the webpages
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/mapbox-pmtiles@1/dist/mapbox-pmtiles.umd.min.js"></script>
<script>
const map = new mapboxgl.Map({
container: 'map', // container ID
center: [-74.5, 40], // starting position [lng, lat]
zoom: 9 ,// starting zoom,
});
mapboxgl.Style.setSourceType(mapboxPmTiles.SOURCE_TYPE, mapboxPmTiles.PmTilesSource);
map.on("load", () => {
const PMTILES_URL =
"https://r2-public.protomaps.com/protomaps-sample-datasets/protomaps-basemap-opensource-20230408.pmtiles";
const header = await mapboxPmTiles.PmTilesSource.getHeader(PMTILES_URL);
const bounds = [
header.minLon,
header.minLat,
header.maxLon,
header.maxLat,
];
map.addSource('pmTileSourceName', {
type: mapboxPmTiles.PmTilesSource.SOURCE_TYPE,
url: PMTILES_URL,
minzoom: header.minZoom,
maxzoom: header.maxZoom,
bounds: bounds,
});
map.showTileBoundaries = true;
map.addLayer({
id: "places",
source: "pmTileSourceName",
"source-layer": "places",
type: "circle",
paint: {
"circle-color": "steelblue",
},
maxzoom: 14,
});
});
</script>
Or you can use the following
<script type="module">
import mapboxPmtiles from 'https://cdn.jsdelivr.net/npm/[email protected]/+esm'
</script>
Supports both Vector and Raster TileSets
Just pass your pmtile
url and this plugin will detect tileset's type and format from header automatically. ;)
What is PmTiles
See the PmTiles repository for more information