Turn-by-Turn Directions

Text-based turn-by-turn directions can be a helpful aid to the map view and Blue Dot. The Mappedin React Native SDK offers the text directions automatically to developers whenever they request a route to a destination.

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 MapViewStore Journey to draw the directions on the map.

{
"distance": 95.028419,
"path": [],
"instructions": []
}

Instructions array is a TMappedinDirective array used for turn-by-turn directions. Two helpful properties are instruction, the text used to guide the user; and distance, the meters distance from the previous instruction.

{
"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
}

Sometimes the instruction includes 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. action object can be used to localize instructions.

Display Turn-by-Turn Directions

In addition to the map view of a drawn path, we can display written turn-by-turn directions using a React Native FlatList. Create a new component which takes the MappedinDirections and pass the instructions array to the FlatList. Render each item.instruction to display the readable text.

const DirectionsFlatList = ({
directions,
}: {
directions: MappedinDirections;
}) => {
const renderItem: ListRenderItem<TMappedinDirective> = ({ item }) => (
<Text>{item.instruction}</Text>
);
return (
directions && (
<FlatList data={directions.instructions} renderItem={renderItem} />
)
);
};

In the onFirstMapLoaded callback, create the directions and store them in a state variable. Pass the directions to your new component to render the list once the map has finished loading.

const mapView = useRef<MapViewStore>(null);
const [activeDirections, setActiveDirections] =
useState<MappedinDirections>(null);
return (
<SafeAreaView>
<MiMapView
key="mappedin"
ref={mapView}
options={venueOptions}
onFirstMapLoaded={() => {
const departure = mapView.current?.venueData?.locations.find(
(l) => l.name === "Pet World"
);
const destination = mapView.current?.venueData?.locations.find(
(l) => l.name === "Microsoft"
);
if (!departure || !destination) {
return;
}
const directions = departure.directionsTo(destination);
if (directions) {
mapView.current?.Journey.draw(directions);
setActiveDirections(directions);
}
}}
/>
<View>
<DirectionsFlatList directions={activeDirections} />
</View>
</SafeAreaView>
);

You should see both the map and the written turn-by-turn directions below it.

The complete code sample demonstrating turn-by-turn directions and more is available in Mappedin's example repository on GitHub.

Turn By Turn Directions

Was this page helpful?

Next Topic

Blue Dot