Drop-in web maps, on your own tiles.
Three packages over one engine: a MapLibre map with MapMap tiles and routing wired in, LiDAR point clouds in the same WebGL context, and the routing logic itself in WASM.
50,000 free calls a month, card-free.
Pick the surface you need. They share one engine.
Every package installs from npm today and runs against the hosted gateway at api.mapmap.ai, or your own self-hosted deployment.
MapLibre, wired up
A thin TypeScript wrapper over MapLibre GL JS: your MapMap tiles, styles and routing, ready to render. Draw routes with alternatives and ferry legs, guide with a chase camera and banners, or bring your own points, polygons and heatmaps.
LiDAR, inside the map
LiDAR and photogrammetry point clouds rendered inside the map's own WebGL context, one draw call compositing with the basemap and terrain rather than a separate canvas floating on top. Your class table, your colours.
Offline routing logic
The navigation core compiled to WebAssembly for offline or worker-side use without a map: ADR tunnel compliance, offline route-request building, route parsing and polyline codecs, no network call required.
Install it, then draw a route.
@mapmap/maps needs an snk_ API key, issued card-free in the quickstart, and a container with a real height. The example below routes a hazmat truck: ADR tunnel restrictions are a first-class routing parameter, not an afterthought.
npm install @mapmap/maps maplibre-gl pmtiles<div id="map" style="height: 480px"></div>import "maplibre-gl/dist/maplibre-gl.css";
import { createMap, RouteLayer } from "@mapmap/maps";
const map = createMap({
container: "map",
apiKey: "snk_...", // from the quickstart
});
await map.whenReady();
const routes = new RouteLayer(map);
const route = await routes.route(
{ lon: -0.1278, lat: 51.5074 }, // London
{ lon: -1.8904, lat: 52.4862 }, // Birmingham
{ profile: "truck", truck: { heightM: 4.0, weightT: 40, hazmat: true, tunnelCode: "C" } },
);
route.distanceM; // total distance, metres
route.durationS; // total duration, seconds
route.geometry; // GeoJSON LineString, already drawn on the mapAlternatives, ferry legs, turn-by-turn guidance, a chase camera and day/night styling are all in the same package. See the full SDK reference.
Restyle it in Studio. The SDK just renders the result.
A theme designed in Studio is a hosted style document: palette, building tones and light presets. Pass it to createMap and the map renders your brand without touching client code.
One street, two brands
Recolour the palette slots in Studio and every map that loads the style changes with it. No client-side patching required.
Day and night, from the same style
Switch light and dark automatically with ThemeScheduler, dependency-free and offline-capable.
3D buildings and the globe projection
Toggle 3D buildings at runtime with map.setBuildings3d(true), no restyle or reload needed. See maps & styling for the full options.
Your points, clustered. Your reach, coloured in.
PlacesLayer takes a GeoJSON FeatureCollection of points and gives you clustered pins with count badges, popups and nearest-place answers, entirely client-side. IsochroneLayer renders reachability rings from the gateway in one call.
Thousands of pins, clustered natively
Nearby-place search answers by name, brand or category, nearest first with distances in metres. This locator app is built on exactly this stack.
See the showcase →
What’s reachable, drawn in one call
Reachability zones computed on the real road network, not a circle drawn on a postcode. This is a real eight-minute scooter zone from a Soho kitchen.
Read the custom-data guide →Issue a key and put a map on the page.
Card-free, with 50,000 free calls a month. Bring your own data or start from the quickstart and add routing, styling and clustering as you need them.