Using PMTiles in Maplibre GL JS

In this article, I will use PMTiles in maplibre-gl-js. My vector tiles are generated by felt/tippecanoe and saved in PMTiles format. The input data is OpenStreetMap highway in taipei city. I created different road layers from the highway values, and use tile-join to merge multiple layers.

The highway.pmtiles and style.json is hosted on the github page.

Related articles
Import OSM data through osm2pgsql flex output
Create vector tiles with tippecanoe

Using PMTiles with addProtocol

Follow the example of PMTiles, I changed the url of style.json and PMTiles to my source url and set the style for different road levels through mapbox style specification.

The following is an example.

Here is the javascript code of my example. The complete code can be found here.

// add the PMTiles plugin to the maplibregl global.
let protocol = new pmtiles.Protocol()
maplibregl.addProtocol('pmtiles', protocol.tile)

let PMTILES_URL =
  'https://yuchuntsao.github.io/custom-vector-tiles/taipei-osm-highways/data/highways.pmtiles'

const p = new pmtiles.PMTiles(PMTILES_URL)

// this is so we share one instance across the JS code and the map renderer
protocol.add(p)

// we first fetch the header so we can get the center lon, lat of the map.
var map
p.getHeader().then((h) => {
  map = new maplibregl.Map({
    container: 'map',
    style: 'https://yuchuntsao.github.io/custom-vector-tiles/taipei-osm-highways/style.json',
  })
})

Using PMTiles with addProtocol

References