Mappedin Logo


Mappedin Documentation

Web SDK v4: A-B Wayfinding

Web SDK v4: A-B Wayfinding

The map setup is exactly what we did in the earlier tutorials, where we load the venue data and then render the map with showVenue. We then label all the polygons with Flat labels, to keep the visual stress of the map to minimum, while still providing the viewer hints on what's around them.

In this example, we take the start and end locations of our navigation by selecting by name from the venue.locations. A typical UI would normally have a click/tap option for selecting locations as well as a search option.

MappedinLocation object has a directionsTo() -method, which takes the destination as a parameter. That's how we get back the directions, which we then feed to Journey.draw().

import {
} from ""
async function init() {
const venue = await getVenue({
venue: "mappedin-demo-mall",
const mapView = await showVenue(document.getElementById("mappedin-map"), venue)
mapView.labelAllLocations({ flatLabels: true })
const startLocation = venue.locations.find(
location => === "Cleo"
const endLocation = venue.locations.find(
location => === "American Eagle"
const directions = startLocation.directionsTo(endLocation)
document.addEventListener("DOMContentLoaded", init)


Turn-by-turn directions

In addition to the map view, we could offer the option for written turn-by-turn directions with just a few lines of code. The following snippet uses the start and end locations and renders the directions to the #directions div-element on the DOM.

const directionsElement = document.getElementById("directions");
directions.instructions.forEach((step, i) => {
const stepElement = document.createElement("li");
const htmlTemplate = `<div class="distance">${Math.round(
)} meters</div><div>${step.instruction}</div>`;
stepElement.innerHTML = htmlTemplate;

The Codesandbox example below shows a standalone minimal example of listing directions even without rendering the map view.

Search Our Docs

Sign Up

© 2020 Copyright Mappedin, All Rights Reserved. View our Privacy Policy