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.
