PMTiles for OpenLayers

Live Examples

Vector example | Code

Raster example | Code

Usage

Based on the OpenLayers Quick Start

npm install ol-pmtiles

Raster tiles

1import "./style.css";
2import { Map, View } from "ol";
3import WebGLTile from "ol/layer/WebGLTile";
4import { PMTilesRasterSource } from "ol-pmtiles";
5import { useGeographic } from 'ol/proj';
6
7const rasterLayer = new WebGLTile({
8  source: new PMTilesRasterSource({
9    url:"https://r2-public.protomaps.com/protomaps-sample-datasets/terrarium_z9.pmtiles",
10    attributions:["https://github.com/tilezen/joerd/blob/master/docs/attribution.md"],
11    tileSize: [512,512]
12  })
13});
14
15useGeographic();
16
17const map = new Map({
18  target: "map",
19  layers: [rasterLayer],
20  view: new View({
21    center: [0,0],
22    zoom: 1,
23  }),
24});

Vector tiles

1import "./style.css";
2import { Map, View } from "ol";
3import VectorTile from "ol/layer/VectorTile";
4import { PMTilesVectorSource } from "ol-pmtiles";
5import { Style, Stroke, Fill } from 'ol/style';
6import { useGeographic } from 'ol/proj';
7
8const vectorLayer = new VectorTile({
9  declutter: true,
10  source: new PMTilesVectorSource({
11    url: "https://r2-public.protomaps.com/protomaps-sample-datasets/nz-buildings-v3.pmtiles",
12    attributions: ["© Land Information New Zealand"],
13  }),
14  style: new Style({
15    stroke: new Stroke({
16      color: "gray",
17      width: 1,
18    }),
19    fill: new Fill({
20      color: "rgba(20,20,20,0.9)",
21    }),
22  }),
23});
24
25useGeographic();
26
27const map = new Map({
28  target: "map",
29  layers: [vectorLayer],
30  view: new View({
31    center: [172.606201,-43.556510],
32    zoom: 7,
33  }),
34});