Documentation menu
Example
Add a map
A branded vector map in five lines: MapMap tiles, the MapLibre renderer and the pmtiles protocol already wired up. The container needs a real height or MapLibre draws into a zero-pixel canvas.
ts
import { createMap } from "@mapmap/maps";
import "maplibre-gl/dist/maplibre-gl.css";
// The container must carry an explicit height, e.g.
// <div id="map" style="height: 100vh"></div>
// A container that resolves to 0px renders a blank map with no error.
const map = createMap({
container: "map",
apiKey: "snk_...",
style: "light", // "light" | "dark" | a Studio theme | a style URL
center: [-1.5, 52.6], // lon, lat
zoom: 6,
attributionPosition: "bottom-left",
});
await map.whenReady();