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