Loading...

Version 1 has been deprecated. View the latest version of this guide.

Getting Directions Between Locations

The Mappedin Web SDK makes it easy to get and display directions between nodes in a venue, and has built in classes to display directions between different maps in an elegant manner. These examples will use hardcoded location IDs, for an example of how to create a location list UI element refer to the following article:

Creating a list of locations sorted by category

Single-Floor Wayfinding:

Here's a simple example of how to get and show directions between two locations on a map.

<div id="mapView" />
<script src="https://d1p5cqqchvbqmy.cloudfront.net/websdk/v1.71.12/mappedin.js"></script>
const div = document.getElementById("mapView");
let mapview, venue;
const options = {
mapview: {
antialias: "AUTO",
mode: Mappedin.modes.TEST,
onFirstMapLoaded: () => {
getDirections();
},
},
venue: {
clientId: "<MAPPEDIN_CLIENT_ID>",
clientSecret: "<MAPPEDIN_CLIENT_SECRET>",
perspective: "Website", //pick the perspective you would like to load
things: {
//fetch some data
venue: ["slug", "name"],
maps: ["name", "elevation", "shortName"],
},
venue: "mappedin-demo-mall",
},
};
function getDirections() {
const locationIDs = ["591224bf9aa41c10fd048a7f", "591224bf9aa41c10fd048a88"];
const locations = locationIDs.map((id) =>
venue.locations.find((item) => item.id === id)
);
locations[0].directionsTo(
locations[1],
{
accessible: false,
directionsProvider: "offline",
},
(error, directions) => {
if (error) {
return console.error("DirectionsError: ", error);
}
mapview.navigator.showOverview(directions);
}
);
}
Mappedin.initialize(options, div).then((data) => {
mapview = data.mapview;
venue = data.venue;
});

Multi-Floor Wayfinding:

The Mappedin Web SDK automatically handles directions between different floors with Overview mode. Simply provide a different location object / ID and the Navigator will automatically display multi-floor wayfinding examples:

Showing Step-by-Step Instructions:

The data returned in the location.directionsTo() callback includes the list of nodes in the route, the total distance of the route, and text instructions to assist the user's understanding of the route. You can use this to provide additional information in our navigation overview. This example uses a different HTML/CSS starter from the previous examples:

<div class="container">
<div id="sidebar">
<h3>Directions</h3>
<ol id="instructions"></ol>
</div>
<div id="mapView"></div>
</div>
<script src="https://d1p5cqqchvbqmy.cloudfront.net/websdk/v1.71.12/mappedin.js"></script>
body {
margin: 0;
padding: 0;
}
.container {
display: grid;
grid-template-columns: minmax(200px, 25%) 1fr;
height: 100vh;
}
#sidebar {
max-height: 100%;
margin: 0;
padding: 0 12px;
overflow-y: scroll;
border-right: 1px dashed grey;
}
#mapView {
position: relative;
}
const div = document.getElementById("mapView");
let mapview, venue;
const options = {
mapview: {
antialias: "AUTO",
mode: Mappedin.modes.TEST,
onFirstMapLoaded: () => {
getDirections();
},
},
venue: {
clientId: "<MAPPEDIN_CLIENT_ID>",
clientSecret: "<MAPPEDIN_CLIENT_SECRET>",
perspective: "Website", //pick the perspective you would like to load
things: {
//fetch some data
venue: ["slug", "name"],
maps: ["name", "elevation", "shortName"],
},
venue: "mappedin-demo-mall",
},
};
function getDirections() {
const locationIDs = ["591224bf9aa41c10fd048a7f", "591224bdca1ecc26fe8bdf27"];
const locations = locationIDs.map((id) =>
venue.locations.find((item) => item.id === id)
);
locations[0].directionsTo(
locations[1],
{
accessible: false,
directionsProvider: "offline",
},
(error, directions) => {
if (error) {
return console.error("DirectionsError: ", error);
}
mapview.navigator.showOverview(directions);
const instructionsContainer = document.getElementById("sidebar");
const heading = document.createElement("h4");
heading.appendChild(
document.createTextNode(
`Total Distance: ${Math.floor(directions.distance)}m`
)
);
instructionsContainer.appendChild(heading);
directions.instructions.forEach((directive) => {
const instructionList = document.getElementById("instructions");
const newItem = document.createElement("li");
newItem.appendChild(document.createTextNode(directive.instruction));
instructionList.appendChild(newItem);
});
}
);
}
Mappedin.initialize(options, div).then((data) => {
mapview = data.mapview;
venue = data.venue;
});
Was this page helpful?