Skip to content

Latest commit

 

History

History
73 lines (56 loc) · 8.12 KB

README.md

File metadata and controls

73 lines (56 loc) · 8.12 KB
Raw

react-native-maps-routes

npm Version License GitHub Last Commit

Component for the react-native-maps library that lets you draw a route between two coordinates. This library uses the Google Maps Routes API to compute the route.

If you still want to use the Google Maps Directions API, please use the following library: react-native-maps-directions.

Installation

yarn add react-native-maps-routes
or
npm install react-native-maps-routes

Basic Usage

Import MapViewRoute and render it as a child of a MapView component. The mandatory MapViewRoute props are:

  • origin: The origin location to start routing from
  • destination: The destination location to start routing to
  • apiKey: Your Google Maps Routes API Key (request one here; if you're using an existing Google Maps API Key make sure you've enabled the Google Maps Routes API for that key using the Google API Console).
import MapViewRoute from 'react-native-maps-routes';

const origin = { latitude: 37.332280, longitude: -122.010980 };
const destination = { latitude: 37.423199, longitude: -122.084068 };
const GOOGLE_MAPS_APIKEY = '…';

<MapView initialRegion={…}>
  <MapViewRoute
    origin={origin}
    destination={destination}
    apiKey={GOOGLE_MAPS_APIKEY}
  />
</MapView>

Component API

Props

Prop Type Default Note
origin LatLng (Required) The origin location to start routing from.
destination LatLng (Required) The destination location to start routing to.
apikey String (Required) Your Google Maps API Key (request one here; if you're using an existing Google Maps API Key make sure you've enabled the Google Maps Routes API for that key using the Google API Console).
strokeColor String #000 The stroke colors to use for the path (iOS only). Must be the same length as coordinates.
strokeWidth Number 6 The limiting value that helps avoid spikes at junctions between connected line segments. The miter limit helps you avoid spikes in paths that use the miter lineJoin style. If the ratio of the miter length—that is, the diagonal length of the miter join—to the line thickness exceeds the miter limit, the joint is converted to a bevel join. The default miter limit is 10, which results in the conversion of miters whose angle at the joint is less than 11 degrees.
lineCap String round The line cap style to apply to the open ends of the path. Possible values are butt, round or square. Note: lineCap is not yet supported for GoogleMaps provider on iOS.
lineJoin String round The line join style to apply to corners of the path. Possible values are miter, round or bevel.
mode String WALK Which transportation mode to use when calculating route. Allowed values are "DRIVE", "BICYCLE", "TWO_WHEELER", "WALK".

Types

type LatLng {
  latitude: Number,
  longitude: Number,
}

Events/Callbacks

Event Name Returns Notes
onStart { origin: string; destination: string } Callback that is called when the routing has started.
onReady LatLng[] Callback that is called when the routing has succesfully finished.
onError any Callback that is called in case the routing has failed.