Maplibre Pmtiles Patterns

MapLibre PMTiles Patterns

PMTiles is a single-file format for vector or raster map tiles. You host one (or a few) files on any static host; MapLibre requests byte ranges over HTTP. No tile server, no dynamic backend. This skill covers when to use PMTiles, how to generate and host them, and how to connect them to MapLibre GL JS.

When to Use This Skill

• Hosting map tiles without running a tile server (S3, Cloudflare R2, GitHub Pages, etc.)
• Building a fully static or serverless map stack
• Serving large tile sets from a CDN with range requests
• Generating PMTiles from OSM or other sources (Planetiler, tippecanoe)
• Using Overture Maps or other single-file tile datasets with MapLibre

What PMTiles Is and Why It Matters

• Vector and raster — PMTiles supports both. A file can contain vector layers (e.g. water, roads, POIs), raster imagery (PNG/JPEG), or raster-dem (elevation, e.g. Terrarium format for terrain). In the style you use type: 'vector', type: 'raster', or type: 'raster-dem' accordingly.
• Single file per map — One .pmtiles file typically contains the full tile pyramid (all zoom levels) and all layers (vector or raster) in one archive. The format stores tiles in a compact layout (e.g. Hilbert curve) so the client can request only the byte ranges it needs. For very large coverage you may split by region into multiple files.
• HTTP range requests — The client requests only the byte ranges it needs (e.g. one tile), so the server does not need to understand x/y/z. Any host that supports Range headers works.
• Serving — You can serve directly from static storage (S3, R2, GitHub Pages, Netlify): the client uses range requests, so no tile server is required. Alternatively, tileserver-gl or Martin can serve PMTiles (from local paths, HTTP URLs, or S3), useful if you want one server that also provides styles, glyphs, or other sources.
• Creating — You can get PMTiles by converting from MBTiles (PMTiles CLI) or by generating from source data (Planetiler, tippecanoe, GDAL, etc.). Alternatively, **Protomaps** is a provider where you can download pre-built PMTiles (e.g. global or regional basemaps) and serve them yourself, or create custom extracts via the PMTiles CLI—no need to generate from OSM yourself. Protomaps basemaps are built from OpenStreetMap data; OSM attribution is required in any map that uses them. See _The PMTiles CLI_ and _Generating PMTiles_ below.
• Good for CDNs — Range requests cache well; put the file behind a CDN for fast global access.

When to prefer PMTiles over a traditional tile server:

• You want zero server logic (static hosting only).
• You have a bounded dataset (country, region, theme) that fits in one or a few files.
• You want simple deployment and low ops (upload file, set cache headers, done).

When to prefer a tile server (e.g. tileserver-gl, Martin):

• You need dynamic tiles from a database (PostGIS) or frequently updated data.
• You have a very large global dataset and want to generate tiles on demand or by region only.

MapLibre Integration: The PMTiles Protocol

MapLibre does not speak PMTiles natively. You use the PMTiles library to add a protocol handler so that a pmtiles:// (or https:// to a .pmtiles file) source works.

Install:

npm install pmtiles

Register the protocol and use in a style:

import * as pmtiles from 'pmtiles';
import * as maplibregl from 'maplibre-gl';
import 'maplibre-gl/dist/maplibre-gl.css';

// Add PMTiles protocol so sources can reference .pmtiles URLs
const protocol = new pmtiles.Protocol();
maplibregl.addProtocol('pmtiles', protocol.tile);

const map = new maplibregl.Map({
  container: 'map',
  style: {
    version: 8,
    sources: {
      tiles: {
        type: 'vector',
        url: 'pmtiles://https://example.com/data.pmtiles'
      }
    },
    layers: [
      {
        id: 'background',
        type: 'background',
        paint: { 'background-color': '#f8f4f0' }
      },
      {
        id: 'water',
        type: 'fill',
        source: 'tiles',
        'source-layer': 'water',
        paint: { 'fill-color': '#a0c8f0' }
      }
      // add more layers as needed — each uses the same source, different 'source-layer'
    ]
  },
  center: [0, 0],
  zoom: 2
});

// Optional: remove protocol on map teardown
// map.on('remove', () => maplibregl.removeProtocol('pmtiles'));

`addProtocol` changed in MapLibre GL JS 4.0.0. The v3 (params, callback) signature is gone — the 4.0.0 changelog entry reads "Changes addProtocol to be promise-based without the usage of callbacks and cancelable". A handler is now async (params, abortController) and must resolve to an object with a `data` property: {data, cacheControl?, expires?}. Resolving to a bare ArrayBuffer, Blob, Response or Uint8Array is not the contract — MapLibre reads .data off whatever the handler resolves with, so a bare buffer reads as no data at all and an arrayBuffer request is filled with an empty ArrayBuffer(0): the tile comes back blank instead of erroring. Register the handler on the module — maplibregl.addProtocol(...), or the named addProtocol import — once, before the first map is constructed: the protocol registry is global, so one registration covers every map on the page.

// ❌ v3 — on v4+ the second argument is an AbortController, so callback(...) throws,
// and the returned {cancel} has no data: the tile comes back blank
maplibregl.addProtocol('custom', (params, callback) => {
  fetch(params.url)
    .then((r) => r.arrayBuffer())
    .then((buffer) => callback(null, buffer))
    .catch((error) => callback(error));
  return { cancel: () => {} };
});

// ✅ v4+ — async (params, abortController) resolving to {data}
maplibregl.addProtocol('custom', async (params, abortController) => {
  const response = await fetch(params.url, { signal: abortController.signal });
  if (!response.ok) throw new Error(`Tile fetch error: ${response.statusText}`);
  const buffer = await response.arrayBuffer();
  return { data: buffer }; // the {data} wrapper is required; a bare buffer is not
});

PMTiles users need no code change. new pmtiles.Protocol().tile is the library's v4 handler wrapped in its v3compat shim (pmtiles ≥ 3.0.0): it checks whether the second argument is an AbortController and adapts, so the single line maplibregl.addProtocol('pmtiles', protocol.tile) is correct on GL JS v3, v4, v5 and v6, and it already resolves to {data: Uint8Array, cacheControl, expires}. A project still on pmtiles 2.x has a callback-only tile and must upgrade the library along with MapLibre. The contract above is what you need when you write your own handler, or when a hand-rolled callback handler broke on the v4 upgrade.

Referencing layers: The style has one source (e.g. sources.tiles) pointing at the .pmtiles URL. Each layer in the layers array that draws from that file uses source: 'tiles' and "source-layer": "layerName", where layerName is the name of a vector layer inside the file (from whatever schema the tiles use). Add multiple style layers with different source-layer values to show roads, labels, etc. from the same file.

Important: The url can be pmtiles://https://... (protocol + HTTPS URL to the .pmtiles file). The library will fetch the file via range requests. Your style must still define glyphs and sprite if you use labels or icons (see maplibre-source-wiring).