https://github.com/am2222/mapbox-pmtiles
A custom source to add PmTiles support to mapbox gl js. Supports both raster and vector pmtiles
https://github.com/am2222/mapbox-pmtiles
geospatial gis mapbox-gl-js pmtiles
Last synced: 4 months ago
JSON representation
A custom source to add PmTiles support to mapbox gl js. Supports both raster and vector pmtiles
- Host: GitHub
- URL: https://github.com/am2222/mapbox-pmtiles
- Owner: am2222
- Created: 2024-02-20T22:03:59.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2026-02-04T14:40:42.000Z (6 months ago)
- Last Synced: 2026-02-05T01:34:36.155Z (6 months ago)
- Topics: geospatial, gis, mapbox-gl-js, pmtiles
- Language: TypeScript
- Homepage: https://am2222.github.io/mapbox-pmtiles/
- Size: 2.05 MB
- Stars: 21
- Watchers: 1
- Forks: 6
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
[](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
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,
});
});
```
Or you can use the following
```html
import mapboxPmtiles from 'https://cdn.jsdelivr.net/npm/mapbox-pmtiles@1.0.29/+esm'
```
### 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