React-Native-Maps how to draw polylines

douglaswissett picture douglaswissett · Oct 13, 2016 · Viewed 12.6k times · Source

I've started using https://github.com/airbnb/react-native-maps and having no luck drawing polylines from an array of array coordinates on the map.

I am not sure if I'm passing in the array of coordinates correctly.

this is how I am rendering the polyline:

      {this.state.polylines.map(polyline => (
        <MapView.Polyline
          key={polyline.id}
          coordinates={polyline.coordinates}
          strokeColor="#000"
          fillColor="rgba(255,0,0,0.5)"
          strokeWidth={1}/>
      ))}

polyline.coordinates looks like:

      [[lat,lng],[lat,lng],[lat,lng]]

Thank you for any help/advice :D

Answer

mrunde picture mrunde · Oct 13, 2016

I think the coordinates must be an array of type LatLng as it is documented in the API.

How LatLng objects are created can be found in the component MapMarker for example. Here you can find the source code (linked to the relevant line) and the component API.

Hope this will help you,
Marius