Getting directions

Last updated:

Now we have a simple map with a floor selector where can search for locations. When finishing this step you'll be able to create a directions between two points and change the transportation mode.

Get directions between two locations

To get Directions between two MapsIndoors Locations, or Places outside of your MapsIndoors Solution, we need two things:

  1. The Directions Service instance
  2. The Directions Render instance

We need the Directions Service to calculate the fastest route between two points, and use the Directions Render to actually draw the route on the map.

Set up Directions Service and Render

First, initialize the MapsIndoors Directions Service, and add an external directions provider (in this case Google Maps):

// main.js

const externalDirectionsProvider = new mapsindoors.directions.GoogleMapsProvider();
const miDirectionsServiceInstance = new mapsindoors.services.DirectionsService(externalDirectionsProvider);

Then, we need to initialize the MapsIndoors Directions Render with the MapsIndoors instance:

// main.js

const directionsRendererOptions = { mapsIndoors: mapsIndoorsInstance }
const miDirectionsRendererInstance = new mapsindoors.directions.DirectionsRenderer(directionsRendererOptions);

Get Directions Service and Render instances

First, add two new let statements all the way at the top, after the miMapElement constant, for storing our Directions Service and Directions Renderer instances:

// main.js

let miDirectionsServiceInstance;
let miDirectionsRendererInstance;

Then, we populate them with the instances within the mapsIndoorsReady event:

miMapElement.addEventListener('mapsIndoorsReady', () => {
...
miMapElement.getDirectionsServiceInstance()
.then((directionsServiceInstance) => miDirectionsServiceInstance = directionsServiceInstance);

miMapElement.getDirectionsRendererInstance()
.then((directionsRendererInstance) => miDirectionsRendererInstance = directionsRendererInstance);
})

See all available directions render options and methods in the reference documentation.

Now our example app is ready to provide Directions. Next up is how to give it an Origin and Destination and draw the route between.

Draw a route on the map

To display a route on the map, we use the coordinates of an Origin and Destination and draw a line between them. For this, we use MapsIndoors' directionsRender.

The Destination coordinate is retrieved dynamically, using the coordinate of the selected Location in the search results list. In this tutorial, the Origin is a hardcoded coordinate.

In the following example, this is what happens:

  1. Create a new getRoute method in main.js which accepts a location

  2. Create two new constants, one for the Origin's coordinate, and another for the Destination's coordinate

  3. Add another constant defining the routeParameters

  4. Using the MapsIndoors Directions Service call the getRoute method to get the fastest route between the two coordinates

    See all available route parameters in the reference documentation.

  5. Using the MapsIndoors Directions Renderer call the setRoute method to display the route on the map

// main.js

function getRoute(location) {
const originLocationCoordinate = { lat: 38.897389429704695, lng: -77.03740973527613, floor: 0 }; // Oval Office, The White House (Hardcoded coordinate and floor index)
const destinationCoordinate = { lat: location.properties.anchor.coordinates[1], lng: location.properties.anchor.coordinates[0], floor: location.properties.floor };

// Route parameters
const routeParameters = {
origin: originLocationCoordinate,
destination: destinationCoordinate,
travelMode: 'WALKING'
};

// Get route from directions service
miDirectionsServiceInstance.getRoute(routeParameters).then((directionsResult) => {
// Use directions render to display route
miDirectionsRendererInstance.setRoute(directionsResult);
});
}

Now, to make it more dynamic, we attach a click event listener with the getRoute method as callback function, in the onSearch method for each location appended to the search results list element.

// main.js

locations.forEach(location => {
...
// Add click event listener
listElement.addEventListener("click", () => getRoute(location), false);

searchResultsElement.appendChild(listElement);
});
// main.js

event.detail.forEach(location => {
...
// Add click event listener
miListItemElement.addEventListener("click", () => getRoute(location), false);

miListElement.appendChild(miListItemElement);
});

Now you can click on each item in the search results list to get directions from The Oval Office to any Location in The White House.

Change transportation mode

In MapsIndoors, the transportation mode is referred to as travel mode. There are four travel modes, walking, bicycling, driving and transit (public transportation). The travel modes generally applies for outdoor navigation. Indoor navigation calculations are based on walking travel mode.

To change between travel modes we first need to add a <select> element with all four transportation options above the search field:

<!-- index.html -->

<body>
...
<!-- Travel mode selector -->
<label for="travel-modes">Choose a travel mode:</label>
<select name="travelModeSelector" id="travel-modes">
<option value="walking" selected>Walking</option>
<option value="bicycling">Bicycling</option>
<option value="driving">Driving</option>
<option value="transit">Transit</option>
</select>
...
</body>

To use the chosen transportation when getting a route, we need to replace the hardcoded value for travelMode parameter inside the getRoute method with the <select> elements value:

// main.js

function getRoute(location) {
...
// Route parameters
const routeParameters = {
origin: originLocationCoordinate,
destination: destinationCoordinate,
travelMode: document.getElementById('travel-modes').value.toUpperCase()
};
...
}