December 17, 2024

Woosmap for React Native - Driving Directions

Get distance, duration and path polyline for a pair of origin and destination, based on the recommended transit route between those two points.

You can calculate directions and plot by using the WoosmapView.route method. This method is an interface to the Route endpoint of Woosmap Distance API. This service compute travel distance, time and path for a pair of origin and destination.

You may either display these directions results using custom overlays or use the WoosmapView.setRoute method to render these results.

src/plugin_snippet.tsx

snippet

        import {
  WoosmapView,
  MapController,
  LatLngBounds,
  WoosPadding,
  LatLng,
  DirectionRequest
} from '@woosmap/react-native-woosmap';
// ...
<WoosmapView
        ref={mapRef}
        mapOptions={mapOptions}
        wooskey={'Your Woosmap key'}
        routeIndex_changed={(routeInfo) => {
          console.log(`route Index changed ${JSON.stringify(routeInfo)}`);
        }}}
      />


    

To display route on map.

src/plugin_snippet.tsx

snippet

            mapRef.current?.route(
        {
          origin: { lat: 48.86288, lng: 2.34946 },
          destination: { lat: 52.52457, lng: 13.42347 },
          provideRouteAlternatives: true,
          travelMode: 'driving',
          unitSystem: 'metric',
        }
      )
      .then((result) => {
          console.log(JSON.stringify(result));
          mapRef.current?.setRoute(result);
       });

    

To clear displayed route on map.

src/plugin_snippet.tsx

snippet

        mapRef.current?.setRoute(undefined);

    

Please check the javascript guide for more implementation. javascript guide

Was this article helpful?

Have more questions? Submit a request