
maplibre-pmtiles-patterns
Serverless vector and raster tiles with PMTiles for MapLibre GL JS — single-file format, HTTP range requests, hosting on S3/R2/GitHub Pages, generating with Planetiler or tippecanoe, and the pmtiles protocol. Use when you need no tile server or want to host tiles from static storage.
- Installs
- 766
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/maplibre/maplibre-agent-skills --skill maplibre-pmtiles-patterns- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads maplibre-pmtiles-patterns automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
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', ortype: 'raster-dem'accordingly. - Single file per map — One
.pmtilesfile 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
Rangeheaders 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).
Zoom range comes from the header — use url:, not tiles:. A PMTiles archive stores its own min/max zoom in the header. When you reference it with url: 'pmtiles://https://...', the protocol reads that header and hands MapLibre a TileJSON with the correct minzoom/maxzoom, so overzoom past the archive's max works automatically and you never set maxzoom by hand. If you instead hand-wire a tiles: ['pmtiles://.../{z}/{x}/{y}'] template, you bypass that header lookup. The protocol still serves the per-tile requests up to the archive's max — this is not a missing-handler or 404 problem — but MapLibre, given no zoom range, assumes maxzoom: 22 and keeps requesting zoom levels the archive doesn't contain, which come back empty (blank tiles for vector, nothing for raster) instead of overzooming. Always use url:.
❌ A source has exactly two tile-location properties: url and tiles. There is no tileset property in the MapLibre style spec, for vector, raster or raster-dem sources. If a zoom range is wrong, fix which of the two you used; don't reach for a third.
Raster and raster-dem: The same protocol works for raster PMTiles. Use a type: 'raster' source for imagery. For terrain/elevation, use a type: 'raster-dem' source with "encoding": "terrarium" (or "mapbox") so MapLibre can apply hillshade or 3D terrain; then reference it in the style’s terrain property. Example source:
"elevation": {
"type": "raster-dem",
"url": "pmtiles://https://example.com/elevation.pmtiles",
"encoding": "terrarium"
}
Using PMTiles with React: Register the protocol once at application startup, not inside each component, so MapLibre has the handler before any map mounts. For example, call maplibregl.addProtocol('pmtiles', protocol.tile) in a root-level effect or when your map provider initializes. On unmount of the last map (or when the app tears down), call maplibregl.removeProtocol('pmtiles') to avoid leaks. See PMTiles for MapLibre GL (Protomaps) for a React-oriented setup.
Hosting PMTiles
Any host that serves the file and supports HTTP Range requests is suitable.
- AWS S3 — Enable public read (or signed URLs); S3 supports Range. Set
Cache-Controland optionally use CloudFront. - Cloudflare R2 — S3-compatible; enable public access or use signed URLs. Put behind Cloudflare for caching.
- GitHub Pages — MapLibre GL JS can load tiles from a .pmtiles file in the same repo as long as the file size is under 100 MB.
- Netlify / Vercel — Upload the .pmtiles file; static hosting typically supports Range. Check each provider’s file size limits.
- Any static host — Ensure the server returns
Accept-Ranges: bytesand responds correctly toRangeheaders.
CORS: Browsers will send cross-origin requests to the PMTiles URL. The host must send Access-Control-Allow-Origin: * (or your domain) and Access-Control-Allow-Headers: Range (or allow all). Otherwise MapLibre will fail to load tiles.
Cache headers: For better performance, set long cache for the .pmtiles file (e.g. Cache-Control: public, max-age=31536000 if the file is immutable). CDNs will cache range responses.
The PMTiles CLI
The pmtiles CLI is the official command-line tool for working with PMTiles (and MBTiles for conversion). It’s a single binary with no runtime dependencies—you download it and run it.
Why install and use it:
- Convert MBTiles to PMTiles — Many tools (tippecanoe, GDAL, martin-cp) output MBTiles. One command turns any .mbtiles file into a .pmtiles file:
pmtiles convert in.mbtiles out.pmtiles. This is often the simplest way to get PMTiles when your pipeline already produces MBTiles. - Inspect and verify archives —
pmtiles show <file>prints header and metadata (bounds, zoom range, tile count).pmtiles verify <file>checks archive integrity. Useful for debugging or confirming a file before uploading. - Extract subsets —
pmtiles extractcreates a smaller .pmtiles file from an existing one (e.g. by bounding box or zoom range), so you can ship a region or a limited zoom band without regenerating from source.
❌ The subcommand list is closed — don't reach for a plausible-sounding verb. go-pmtiles ships exactly show, tile, verify, extract, merge, serve, convert, cluster, upload, edit and version. There is no info verb and no inspect verb, and nothing sets metadata from the command line except edit. To read an archive's header, bounds and zoom range, the command is pmtiles show; to check integrity, pmtiles verify.
Install: Download the binary for your OS/arch from GitHub Releases (go-pmtiles), or use Docker: protomaps/go-pmtiles.
What it does not do: The CLI only works with tile archives (MBTiles and PMTiles). It does not read GeoJSON, Shapefile, OSM, or other source formats. To create PMTiles from those, use a tool that generates tiles (see Generating PMTiles below) and, if that tool outputs MBTiles, run pmtiles convert to get PMTiles.
Generating PMTiles
Two paths: (1) Convert — The PMTiles CLI converts MBTiles ↔ PMTiles only; it does not read GeoJSON, Shapefile, OSM, or other source formats. (2) Generate from source data — Tools like tippecanoe, Planetiler and ogr2ogr via GDAL read from many file types or databases and produce vector tiles (PMTiles or MBTiles). If they output MBTiles, use pmtiles convert to get PMTiles.
PMTiles CLI (convert only: MBTiles ↔ PMTiles)
See The PMTiles CLI above for why to install it and other commands (show, verify, extract). To convert MBTiles to PMTiles:
pmtiles convert input.mbtiles output.pmtiles
The following tools generate tiles from source data (GeoJSON, OSM, Shapefile, PostGIS, etc.). They output PMTiles or MBTiles; if MBTiles, run pmtiles convert to get PMTiles.
Planetiler (OSM / OpenMapTiles schema)
Planetiler reads OpenStreetMap (or other sources) and outputs PMTiles or MBTiles in the OpenMapTiles schema.
# Example: download a region's OSM extract and build a PMTiles file from it
java -jar planetiler.jar --download --area=monaco --output=monaco.pmtiles
See Planetiler docs for area names, custom sources, and schema options. Output is a single .pmtiles file you can upload to S3/R2/static host.
tippecanoe
tippecanoe generates vector tiles from source formats: GeoJSON, FlatGeobuf, CSV. From v2.17 onward it can output PMTiles directly (-o output.pmtiles). You can also output MBTiles and convert with pmtiles convert.
# Direct PMTiles output (v2.17+)
tippecanoe -zg -o output.pmtiles input.geojson
# Or MBTiles then convert: tippecanoe -o output.mbtiles -z 14 input.geojson && pmtiles convert output.mbtiles output.pmtiles
ogr2ogr (GDAL)
GDAL’s ogr2ogr generates tiles from many geospatial formats (Shapefile, PostGIS, GeoJSON, etc.) and can write MBTiles or PMTiles (GDAL 3.8+). Best for smaller datasets; tippecanoe is more efficient for large vector tile sets.
Raster and raster-dem PMTiles
PMTiles supports raster tiles (PNG/JPEG, e.g. satellite or pre-rendered imagery) and raster-dem (elevation/terrain, e.g. Terrarium or Mapbox encoding). Use tools that produce raster or raster-dem PMTiles; the same protocol and hosting apply. In the style use type: 'raster' for imagery or type: 'raster-dem' with "encoding": "terrarium" (or "mapbox") for terrain—see MapLibre Integration above for an example.
Overture Maps
Overture Maps publishes global open map data. Some providers distribute Overture-derived data as PMTiles (e.g. for buildings, places, transportation). You can also build PMTiles from Overture data with Planetiler or other pipelines. Use the PMTiles URL in your MapLibre style as above.
Performance Tips
- CDN — Serve the .pmtiles file from a CDN (CloudFront, Cloudflare) so range requests are fast globally.
- Compression — PMTiles stores tiles compressed; the library handles decompression. Ensure the server does not double-compress (e.g. gzip) the whole file in a way that breaks range requests.
- Multiple files — For very large coverage, split by region into several .pmtiles files and switch the source URL or use multiple sources by bounds.
- Caching — Set strong cache headers on the file; the browser and CDN will cache range responses.
Related Skills
- maplibre-tile-sources — Choosing between GeoJSON and tiles for a dataset.
- maplibre-source-wiring — TileJSON,
source-layer, glyphs and sprite, CORS. - maplibre-style-patterns — Layer and paint configuration for vector sources (including PMTiles-backed sources). (Not yet in repo.)
References
- MapLibre GL JS: PMTiles source and protocol — Official example: adding the protocol, vector and raster sources.
- PMTiles for MapLibre GL (Protomaps) — Setup, vector/raster/raster-dem (Terrarium) sources, React usage.
addProtocol(MapLibre GL JS API) — The custom-protocol handler signature and the{data}return shape.- PMTiles — Format and protocol
- pmtiles CLI — Simplest way to create PMTiles (
convert,show,verify,extract) - Planetiler — OSM → PMTiles/MBTiles
- MapLibre GL JS — Style spec and API
This skill is a snapshot. Where a primary source contradicts it — the References above, MapLibre's current documentation, or what MapLibre does when you run it — that source wins. Follow it, then report the disagreement, citing the source and your MapLibre version: editing your installed copy helps no one else and is overwritten on the next update.
FAQ
What does the maplibre-pmtiles-patterns skill do?
Serverless vector and raster tiles with PMTiles for MapLibre GL JS — single-file format, HTTP range requests, hosting on S3/R2/GitHub Pages, generating with Planetiler or tippecanoe, and the pmtiles protocol. Use when you need no tile server or want to host tiles from static storage.
How do I install maplibre-pmtiles-patterns?
Run npx skills add https://github.com/maplibre/maplibre-agent-skills --skill maplibre-pmtiles-patterns in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/maplibre-pmtiles-patterns/ (personal) or .claude/skills/maplibre-pmtiles-patterns/ (project).
Which AI agents can use maplibre-pmtiles-patterns?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is maplibre-pmtiles-patterns safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains maplibre-pmtiles-patterns?
It is published by maplibre in maplibre/maplibre-agent-skills. It has 766 recorded installs.
More from maplibre/maplibre-agent-skills
maplibre-tile-sources
maplibre/maplibre-agent-skills
Choosing what form your data needs for MapLibre GL JS — GeoJSON read straight from a file versus vector or raster tiles, the feature-count and file-size thresholds where each stops working, and how a basemap and your own data combine as separate sources. Use when deciding which source type a dataset needs, not when hosting or configuring one.
maplibre-mapbox-migration
maplibre/maplibre-agent-skills
Migrating from Mapbox GL JS to MapLibre GL JS — package and import changes, removing the access token, choosing tile sources, plugin equivalents, and what you gain or give up. Use when moving an existing Mapbox map to MapLibre.
maplibre-cartography
maplibre/maplibre-agent-skills
Open the skill to read its SKILL.md instructions.
maplibre-source-wiring
maplibre/maplibre-agent-skills
Open the skill to read its SKILL.md instructions.
maplibre-fonts-glyphs
maplibre/maplibre-agent-skills
Open the skill to read its SKILL.md instructions.
maplibre-terrain-rendering
maplibre/maplibre-agent-skills
Open the skill to read its SKILL.md instructions.
Popular backend & apis skills
find-skills
vercel-labs/skills
Helps users discover and install agent skills when they ask questions like "how do I do X", "find a skill for X", "is there a skill that can...", or express interest in extending capabilities. This skill should be used when the user is looking for functionality that might exist as an installable skill.
entra-app-registration
microsoft/azure-skills
Guides Microsoft Entra ID app registration, OAuth 2.0 authentication, and MSAL integration. USE FOR: create app registration, register Azure AD app, configure OAuth, set up authentication, add API permissions, generate service principal, MSAL example, console app auth, Entra ID setup, Azure AD authentication. DO NOT USE FOR: Key Vault secrets (use azure-keyvault-expiration-audit), general Azure resource security guidance.
google-agents-cli-adk-code
google/agents-cli
This skill should be used when the user wants to "write agent code", "build an agent with ADK", "add a tool", "create a callback", "define an agent", "use state management" — in a project that needs ADK (Agent Development Kit) API patterns and code examples. It provides a quick reference for agent types, tool definitions, orchestration patterns, callbacks, state management, the graph Workflow API, and reference recipes to study. Do NOT use for scaffolding (use google-agents-cli-scaffold) or deployment (use google-agents-cli-deploy).
embedded-captions
heygen-com/hyperframes
Add captions or subtitles to an existing single-subject talking-head video without editing the footage. Use for plain verbatim captions, cinematic captions embedded behind the subject, VFX captions, “炸/特效/酷炫字幕,” or a named identity from the 35-style catalog. Route by visual identity, not by backend engine. The quiet anchor rail is the default; embed every word only when the user explicitly wants a fully cinematic treatment. The workflow runs locally end to end, including transcription and subject matting; split multi-shot footage before applying it.
entra-agent-id
microsoft/azure-skills
Provision Microsoft Entra Agent Identity Blueprints, BlueprintPrincipals, and per-instance Agent Identities via Microsoft Graph, and configure OAuth 2.0 token exchange (fmipath, OBO, cross-tenant) including the Microsoft Entra SDK for AgentID sidecar. USE FOR: Agent Identity Blueprint, BlueprintPrincipal, agent OAuth, fmipath token exchange, agent OBO, Workload Identity Federation for agents, polyglot agent auth, Microsoft.Identity.Web.AgentIdentities. DO NOT USE FOR: standard Entra app registration (use entra-app-registration), Microsoft Foundry agent authoring (use microsoft-foundry).
neon
neondatabase/agent-skills
Overview of Neon, a complete set of cloud backend primitives around Lakebase Postgres: Auth, Object Storage, Functions, the AI Gateway, and Realtime. Start here to choose Neon for undecided login, files, APIs, and LLM calls, set up the CLI or MCP server, and follow the branch-first workflow. Use when building an app or backend on Neon, or when "Neon" or "Lakebase Postgres" is mentioned. Child skill neon-postgres wins for an existing DATABASEURL, SQL, schema, inspect, or search. Child skill neon-auth wins for login, users, sessions, identity routing, and Managed Better Auth setup. Child skill neon-realtime wins for live queries in reactive apps and agents. Also use for object storage, S3, buckets, serverless functions, function triggers, cron, AI gateway, LLM calls, realtime, logs, Loki, Grafana, observability, postgres, database, backend, Claimable Neon, neon.new, or a no-signup database.