Documentation menu
Example
Custom markers
Your own pins on the map: 21 built-in glyphs, three size presets, any colour, optional labels, or a data URI image of your own. The same schema Studio's markers panel writes and the gateway validates.
ts
import { MarkersLayer, markersFromThemeUrl } from "@mapmap/maps";
// Markers designed in Studio ride on the theme document.
const designed = await markersFromThemeUrl(
"https://api.mapmap.ai/styles/midnight-fleet-a1b2c3/theme",
);
if (designed) new MarkersLayer(map, designed);
// Or hand the layer a block of your own (schema v1, at most 200 items).
const layer = new MarkersLayer(map, {
version: 1,
items: [
{
id: "depot-london",
lng: -0.1278,
lat: 51.5074,
icon: "work", // one of the 21 MARKER_GLYPH_IDS
colour: "#1a6bff",
size: "l", // "s" | "m" | "l" = 24 / 32 / 40 px
label: "London depot",
},
{
id: "yard-birmingham",
lng: -1.8904,
lat: 52.4862,
icon: "parking",
colour: "#e07b39",
size: "m",
label: "Birmingham yard",
},
],
});
layer.ids; // { source: "mm-user-markers", layer: "mm-user-markers" }