Search code examples
javascriptreactjsreact-nativeapple-maps

React-Native-Maps how to draw polylines

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

Solution

  • 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