Routing plugin
Contents
The routing plugin allows you to generate safe and legal routes for commercial vehicles and display those routes on the map. The plugin must be included in the dependencies of your project.
The code samples below depict how to build a route with multiple stops.
Android
Create driving directions using DirectionsBuilder after RouteView is initialized.
useEffect(() => {
const androidMapViewTag = String(findNodeHandle(ref.current));
if (Platform.OS === "android") {
const eventEmitter = new NativeEventEmitter();
let eventListener = eventEmitter.addListener(
"RouteViewInitialized",
(event) => {
RouteViewModule.getMapAsync(async () => {
await RouteViewModule.setRouteView();
await DirectionsModule.createDirectionsBuilder();
await DirectionsModule.origin(40.361202627269634, -74.59977385874882);
await DirectionsModule.destination(40.23296852563686, -74.77334837439244);
await DirectionsModule.destination(41.898500, -87.810020);
await DirectionsModule.build();
await RouteViewModule.createRouteBuilder();
await RouteViewModule.id("testRoute");
await RouteViewModule.routeOptions();
await RouteViewModule.requestCallback(routeCallback);
await RouteViewModule.color(StyleConstants.MAGENTA);
await RouteViewModule.build();
await RouteViewModule.addRoute(viewId);
await RouteViewModule.frameRoute();
});
}
);
}
}, []);
const routeCallback = async (result) => {
// route callback
}
iOS
Create route options after the map has loaded.
const RoutePluginModule = NativeModules.RoutePluginModule;
const RoutingModule = NativeModules.RoutingModule;
import {NativeEventEmitter} from 'react-native';
// ios mapLoaded callback
const onMapLoaded = () => {
// initialize route options with a list of coordinates for each stop
await RoutingModule.initializeRouteOptions([
[40.361202627269634, -74.59977385874882],
[40.23296852563686, -74.77334837439244],
[40.231830,-74.777480]
]);
// provide a valid iosMapViewTag for a MapView that currently exists on screen
// when properly initialized, a "RoutePluginInit" event is emitted
await RoutePluginModule.initializeRoutePlugin(iosMapViewTag);
await RoutePluginModule.setColor("#FF00FF");
}
You can add the route after the route plugin is initialized. You can listen for the RoutePluginInit event.
const eventEmitter = new NativeEventEmitter(RoutePluginModule);
let eventListener = eventEmitter.addListener(
"RoutePluginInit",
async (e) => {
if (e.status === "success") {
// add route with id "route"
await RoutePluginModule.addRoute("route");
await MapViewModule.setMapView(iosMapViewTag);
// zoom to route
await CameraPositionModule.latLng(
40.361202627269634,
-74.59977385874882
);
await CameraPositionModule.target();
await CameraPositionModule.altitude(1e5);
await CameraPositionModule.build();
await MapViewModule.zoomPosition();
} else {
console.log("failed");
}
}
);