Vector tiles you host as PMTiles

import { createMap, registerPmtilesProtocol } from "@mapmap/maps";
import * as maplibregl from "maplibre-gl";

// createMap already registers pmtiles:// on the maplibre-gl it imports.
// Call this yourself only for a maplibregl.Map you construct directly, or
// a second copy of maplibre-gl in your bundle. It is safe to repeat.
registerPmtilesProtocol(maplibregl);

const map = createMap({
  container: "map",
  apiKey: "snk_...",
  attributionPosition: "bottom-left",
  center: [-0.12, 51.51],
  zoom: 11,
});
await map.whenReady();

map.map.addSource("assets", {
  type: "vector",
  // pmtiles:// in front of the https URL of the file on your bucket.
  url: "pmtiles://https://your-bucket.example.com/assets.pmtiles",
  attribution: "(c) Example Council 2026",
});

// source-layer is the layer name inside the archive (--layer when you
// built it). Slots arrive in the SDK 0.17: map.slot("middle") replaces
// "road-labels".
map.map.addLayer({
  id: "assets-lines",
  type: "line",
  source: "assets",
  "source-layer": "assets",
  filter: ["==", ["geometry-type"], "LineString"],
  paint: { "line-color": "#e07b39", "line-width": 2.5 },
}, "road-labels");

map.map.addLayer({
  id: "assets-points",
  type: "circle",
  source: "assets",
  "source-layer": "assets",
  filter: ["==", ["geometry-type"], "Point"],
  paint: { "circle-radius": 4, "circle-color": "#e07b39" },
}, "road-labels");