Mapbox-PmTiles

Add PmTiles support to mapbox

Usage

ESM Module

1import mapboxgl from "mapbox-gl";
2
3import { PmTilesSource } from "mapbox-pmtiles";
4//Define custom source
5mapboxgl.Style.setSourceType(PmTilesSource.SOURCE_TYPE, PmTilesSource);
6
7map.on("load", () => {
8
9    const PMTILES_URL =
10    "https://r2-public.protomaps.com/protomaps-sample-datasets/protomaps-basemap-opensource-20230408.pmtiles";
11
12    const header = await mapboxPmTiles.PmTilesSource.getHeader(PMTILES_URL);
13    const bounds = [
14          header.minLon,
15          header.minLat,
16          header.maxLon,
17          header.maxLat,
18        ];
19
20    map.addSource('pmTileSourceName', {
21          type: mapboxPmTiles.PmTilesSource.SOURCE_TYPE,
22          url: PMTILES_URL,
23          minzoom: header.minZoom,
24          maxzoom: header.maxZoom,
25          bounds: bounds,
26        });
27
28    map.current.showTileBoundaries = true;
29    map.current.addLayer({
30        id: "places",
31        source: "pmTileSourceName",
32        "source-layer": "places",
33        type: "circle",
34        paint: {
35            "circle-color": "steelblue",
36        },
37        maxzoom: 14,
38    });
39});
40

JSDeliver

Here you can use it in the webpages

1
2<script type="text/javascript"  src="https://cdn.jsdelivr.net/npm/mapbox-pmtiles@1/dist/mapbox-pmtiles.umd.min.js"></script>
3
4<script>
5    const map = new mapboxgl.Map({
6        container: 'map', // container ID
7        center: [-74.5, 40], // starting position [lng, lat]
8        zoom: 9 ,// starting zoom,
9    });
10    mapboxgl.Style.setSourceType(mapboxPmTiles.SOURCE_TYPE, mapboxPmTiles.PmTilesSource);
11
12    map.on("load", () => {
13
14        const PMTILES_URL =
15        "https://r2-public.protomaps.com/protomaps-sample-datasets/protomaps-basemap-opensource-20230408.pmtiles";
16
17        const header = await mapboxPmTiles.PmTilesSource.getHeader(PMTILES_URL);
18        const bounds = [
19              header.minLon,
20              header.minLat,
21              header.maxLon,
22              header.maxLat,
23            ];
24    
25        map.addSource('pmTileSourceName', {
26              type: mapboxPmTiles.PmTilesSource.SOURCE_TYPE,
27              url: PMTILES_URL,
28              minzoom: header.minZoom,
29              maxzoom: header.maxZoom,
30              bounds: bounds,
31            });
32
33        map.showTileBoundaries = true;
34        map.addLayer({
35            id: "places",
36            source: "pmTileSourceName",
37            "source-layer": "places",
38            type: "circle",
39            paint: {
40                "circle-color": "steelblue",
41            },
42            maxzoom: 14,
43        });
44    });
45</script>
46

Or you can use the following

1
2<script type="module">
3import mapboxPmtiles from 'https://cdn.jsdelivr.net/npm/mapbox-pmtiles@1.0.29/+esm'
4</script>
5

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