A-B Wayfinding

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().

Journey is a helper class to display single and multi-destination wayfinding easily on the map. Functionality of Journey could be replicated with drawing the paths and adding well designed tooltips at connection points.

Multi-floor wayfinding

Journey helper makes it straightforward to provide wayfinding between floors. Whenever a user needs to switch a floor, an interactive tooltip with an icon indicating the type of connection (such as elevator or escalator) will be drawn. By clicking or tapping the tooltip, the map view switches the destination floor.

Multi-destination wayfinding

With Mappedin SDK, it's possible to draw a path including multiple waypoints. To generate directions, create a DestinationSet from polygons, locations or nodes and request directions from a starting location just like with A-B navigation with startLocation.directionsTo(destinationSet).

Once the user has completed a segment of the journey, the active step can be changed with .setStep(). The following demo will move through the steps when user clicks outside of interactive polygons on the map in the NOTHING_CLICKED -event callback.

The active part of the path is styled with pathOptions to be wider than the inactive portions, which are style to be light blue in color. The arrows and the pulse on the path can also be styled or removed completely by using pathOptions.

Was this page helpful?