Skip to main content

Map package

A thin, opinionated wrapper around maplibre-gl for Wemap livemaps. It reads your livemap configuration (style, bounds, zoom range, indoor settings, …) from @wemap/core and adds first-class helpers for camera control, event subscription, POI interaction, and multi-level / indoor display.

@wemap/map is not a generic maplibre helper — always call core.init() before constructing a WemapMap. The raw maplibre instance stays available as map.maplibre for anything the wrapper doesn't cover.

Installation​

maplibre-gl (v6 or later) is a peer dependency — install it alongside this package:

npm install @wemap/core @wemap/map maplibre-gl

Worker setup (bundlers)​

MapLibre v6 ships its worker as a separate ES module that in turn imports a shared chunk (maplibre-gl-shared.mjs), resolved internally via import.meta.url. Bundlers (Vite, webpack, esbuild, Rollup) can't follow that, so the map fails at runtime with a 404 (maplibre-gl-worker.mjs, or maplibre-gl-shared.mjs once the worker loads). Hand MapLibre a URL to a bundled worker explicitly, once, before creating any map. With Vite, use ?worker&url so Vite bundles the worker and inlines the shared chunk:

import * as maplibregl from 'maplibre-gl';
import maplibreWorkerUrl from 'maplibre-gl/dist/maplibre-gl-worker.mjs?worker&url';

maplibregl.setWorkerUrl(maplibreWorkerUrl);

Plain ?url is not enough — it emits the worker verbatim, leaving its maplibre-gl-shared.mjs import to 404 in a production build. Other bundlers expose an equivalent "bundle this worker, give me its URL" import. Loading MapLibre directly from a CDN as an ES module needs no setup.

Quick start​

import { core } from '@wemap/core';
import { Coordinates } from '@wemap/geo';
import { WemapMap } from '@wemap/map';
import 'maplibre-gl/dist/maplibre-gl.css';
import '@wemap/map/style.css'; // SDK marker / cluster / user-location styles

await core.init({ emmid: '31668', token: 'YOUR_TOKEN' });

// Snippet defaults (style, bounds, zoom range, pitch, indoor, …) apply automatically.
const map = new WemapMap({ container: 'map' });
await map.whenReady();

map.setCenter(new Coordinates(48.8566, 2.3522));
map.setLevel(1);
map.onPoiClick(({ pinpoint, coordinates }) => console.log(pinpoint.name, coordinates));

Position inputs (setCenter, flyTo/easeTo centers, marker / itinerary / user-location positions) accept any LatLngLike — a Coordinates, a { lat, lng, level? } / { latitude, longitude } object, or a [lat, lng, level?] tuple. These are all latitude-first; position outputs (getCenter, the onPoiClick payload) are Coordinates from @wemap/geo, and bounds use BoundingBox. The raw map.maplibre instance uses maplibre's [lng, lat] convention.

Documentation​

Full guides live in the SDK documentation:

  • Getting started — install, create a map, camera, events, cleanup
  • Indoor & levels — multi-level display, building selection, LevelControl
  • POIs & content search — click / highlight / select / filter pinpoints
  • Markers & clustering — DomMarkerLayer and supercluster
  • Itineraries — multilevel routes with ItineraryLayer
  • Shapes — GeoJSON lines/polygons with simplestyle-spec styling
  • User location — UserLocationLayer from a positioning stream
  • Theming — theme tokens and CSS variables

See the Map guide and the generated API reference for WemapMap, DomMarkerLayer, ItineraryLayer, ShapeLayer, UserLocationLayer, and LevelControl.

wemap-sdk-js

map

Classes​

Interfaces​

Type Aliases​

Functions​