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 text directions whenever a route is requested.

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
}

The instruction may include 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.

The action includes an ACTION_TYPE and BEARING_TYPE. These types represent what the user should do and the direction to do it.

The action object can be used to localize instructions. The Mappedin SDK provides the following action and bearing text in English only. The text could be substituted for another language before being displayed to a user.

ACTION_TYPE

• ACTION_TYPE.ARRIVAL = Arrival
• ACTION_TYPE.DEPARTURE = Departure
• ACTION_TYPE.EXITVORTEX = ExitVortex
• ACTION_TYPE.TAKEVORTEX = TakeVortex
• ACTION_TYPE.TURN = Turn

BEARING_TYPE

• BEARING_TYPE.LEFT = Left
• BEARING_TYPE.RIGHT = Right
• BEARING_TYPE.SLIGHTLEFT = SlightLeft
• BEARING_TYPE.SLIGHTRIGHT = SlightRight
• BEARING_TYPE.STRAIGHT = Straight

Display Turn-by-Turn Directions

In addition to the map view of a drawn path, an app 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);
});