Tutorials

Hands-on, runnable walkthroughs. Each tutorial assumes no prior knowledge of the Mapsted Maps JavaScript API beyond the previous tutorials in the sequence.

▶ Try it live

Prefer to experiment first? Open the full Sandbox playground ↗ (also in the top nav): a Monaco-backed editor with a live map where you can edit code, switch properties, wire events, and copy a shareable URL. The map API calls you'll learn here run there unchanged (the framework-integration tutorials add build tooling around those same calls).

Getting started

Start here if you have not embedded a Mapsted map before.

• Embed your first map (CDN) — drop a map into a single HTML file via the CDN script tag, no build tooling required.
• Embed with npm + Vite — same map, but installed from npm and bundled with Vite for production apps.

Features

Once you have a map rendering, work through these to add functionality.

• Markers and popups — add custom markers and HTML popups.
• Map events — subscribe to selection, navigation, idle, and theme events.
• Floor navigation — switch floors and react to floor changes.
• Indoor routing — request and render wayfinding routes between two entities.
• Distance calculation — compute walking distances and ETAs.
• Feature flags — toggle the built-in popup, default markers, and other feature gates.

Next steps

• Guide — task-oriented how-to recipes and conceptual explanations.
• API Reference — full curated and generated reference for every public symbol.
• Migrating from V2 or V3 — upgrade an existing integration.