[](https://www.npmjs.com/package/mapbox-pmtiles) [](https://github.com/am2222/mapbox-pmtiles/actions/workflows/node.js.yml) [](https://github.com/am2222/mapbox-pmtiles/actions/workflows/pages/pages-build-deployment) [](https://www.jsdelivr.com/package/npm/mapbox-pmtiles)
## Mapbox-PMTiles
Add [PMTiles](https://docs.protomaps.com/pmtiles/) support to Mapbox.
This library requires Mapbox GL JS v3 to work.
## Usage
## ESM Module
```js
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
```html
```
Or you can use the following
```html
```
### 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](https://docs.protomaps.com/pmtiles/) repository for more information