Routing
Route display on the map is provided by @trimblemaps/plugins-react-native. Install it with the maps and account packages. See Getting started — Packages for pinned package versions.
This plugin draws a route on your map. It does not provide turn-by-turn guidance, voice instructions, or the navigation UI. For guided navigation, use the React Native Navigation SDK.
The account must be initialized before generating routes.
Display a route
Create a route plugin bound to a Map ref, then add and frame the route:
import { createRoutePlugin } from "@trimblemaps/plugins-react-native";
import { Camera, Map, TrimbleMaps } from "@trimblemaps/maps-react-native";
import { useCallback, useRef } from "react";
const ROUTE = {
id: "simple-route",
color: "#0063A3",
routeOptions: {
origin: { latitude: 40.361202, longitude: -74.599773 },
destination: { latitude: 40.232968, longitude: -74.773348 },
},
};
function SimpleRouting() {
const mapRef = useRef<React.ComponentRef<typeof Map>>(null);
const addRoute = useCallback(async () => {
if (!mapRef.current) return;
const plugin = createRoutePlugin(mapRef.current);
await plugin.addRoute(ROUTE);
await plugin.frameRoute(ROUTE.id);
}, []);
return (
<Map
ref={mapRef}
mapStyle={TrimbleMaps.StyleURL.MobileDay}
style={{ flex: 1 }}
onDidFinishLoadingMap={addRoute}
>
<Camera initialViewState={{ center: [-74.68, 40.3], zoom: 10 }} />
</Map>
);
}
routeOptions.origin and routeOptions.destination use { latitude, longitude } objects (not GeoJSON [lon, lat] arrays).
RoutePlugin API
| Method | Description |
|---|---|
addRoute(route)
| Generate and draw a route on the map |
frameRoute(routeId)
| Animate the camera to fit the route |
removeRoute(routeId)
| Remove a route from the map |
removeAllRoutes()
| Remove all routes |
The plugin also emits events for route selection and request completion via the native module. See the @trimblemaps/plugins-react-native package for full type definitions.