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 a 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()
.
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( step.distance )} meters</div><div>${step.instruction}</div>`; stepElement.innerHTML = htmlTemplate; directionsElement.appendChild(stepElement);});