Display a map

Initialize a map in an HTML element. This is the whole Hello World: a key, a container, and a centre.

import { Unmap } from "@unmap/sdk";

const unmap = new Unmap({
  key: "um_live_...",
  container: "map",
  center: [-114.0719, 51.0447],
  zoom: 11,
});

center is [longitude, latitude], in that order. Leave style, mode, and lang off and you get base in light mode, with labels in the reader's language. The container needs a height; without one the map is zero pixels tall and MapLibre reports no error.

The map is a MapLibre GL map on unmap.map, so anything the MapLibre API can do, you can do to this one. To move the camera after load, call flyTo:

unmap.map!.on("load", () => {
  unmap.map!.flyTo({ center: [-73.5673, 45.5017], zoom: 12 });
});

See the Quickstart for install, and Maps API for every style.