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.

Copy
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

Copy
{
  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.

Copy
{
  "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.

Copy
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);
});