Show route overview in Mapview component

[nexttrack07]

Is there a way to draw a route overview in the MapView component? Please let me know if you have any suggestions. Looks there is a package called react-native-maps-directions that's used for this but it's not compatible with the MapView component. I am also wondering if we can leverage the directions API for this and use polylines?

[akilakumarasamy]

The solution provided to resolve the issue to support stand along map (#254) is not helping us because we have to display a static route between markers. The MapView is not supporting to do a route. Any guidance on this? We still think supporting a stand alone map would be the best option.

[jokerttu]

@nexttrack07

The MapView is a classic map view and is not affected by or aware of the navigation state. To display a route on the MapView, you can retrieve the current route using the NavigationController.getRouteSegments method and draw the route segments with the MapViewController.addPolyline method.

If you want to use the NavigationView to show only the route, you can do the following:

Navigation must be initialized before the NavigationView is created. This is because, when navigation is initialized, the views are automatically synced with the navigation state on Android by the Navigation SDK. When navigation is initialized before drawing the view, the view is automatically set to the desired naigationUI state.

In the onMapViewControllerCreated callback for the NavigationView, hide the location marker if you don't want to display it:

mapViewController.setMyLocationEnabled(false);
mapViewController.setMyLocationButtonEnabled(false);

In the onNavigationViewControllerCreated callback:

navigationViewController.setNavigationUIEnabled(true); // Ensure navigation UI is enabled to show the route on iOS as well.
navigationViewController.showRouteOverview(); // Show the route overview.
navigationViewController.setNightMode(1); // Force day mode (if desired).

// Disable all view overlays in the NavigationView:
navigationViewController.setHeaderEnabled(false);
navigationViewController.setFooterEnabled(false);
navigationViewController.setRecenterButtonEnabled(false);
navigationViewController.setTrafficIncidentCardsEnabled(false);
navigationViewController.setSpeedometerEnabled(false);
navigationViewController.setTripProgressBarEnabled(false);

If this doesn't give you the expected result, would you mind uploading an image of the layout / mapview you're aiming for?