Turn-by-Turn Directions

Text-based turn-by-turn directions can be a helpful aid to the map view and Blue Dot. Mappedin Web SDK offers the text directions automatically to developers whenever they request a route to a destination.

const directions = departure.directionsTo(destination);

Directions and Instructions

A call to .getDirections() returns a MappedinDirections -object, which provides the path as an array of MappedinNodes, the total walking distance in meters and a list of text-based instructions for navigation. As shown in the A-B Wayfinding -guide this is the same object given to mapView.Journey to draw the directions on the map

{
distance: 95.028419,
path: [],
instructions: []
}

Instructions array is used for turn-by-turn directions. The most used components are instruction, the text used to guide the user and distance meters how far from the previous this instruction is.

{
"node": {
"id": "62051d92e325474a30001390",
"x": 2584.883130073171,
"y": 2166.8079445617177,
"accessible": true
},
"instruction": "Turn left at Nike Factory Store",
"action": {
"bearing": "Left",
"referencePosition": "At",
"type": "Turn"
},
"type": "Left",
"distance": 29.498191596865208
}

Sometimes the instruction includes a store or a location name. That happens when the SDK is able to determine a relevant location nearby the instruction that could be helpful in navigating the venue. action object can be used to localize instructions.

Display Turn-by-Turn Directions

In addition to the map view of a drawn path, we can display written turn-by-turn directions with just a few lines of code. The following snippet uses directions derived from start location to the end location and renders the text instructions to the <div id="directions">-element in the DOM.

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

Next Topic

Camera Controls