I've started using 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

I've started using https://github./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

• javascript
• reactjs
• react-native
• apple-maps

• How did you get the Array of Lat and Lng ??? [ [lat,lng ],[lat,lng ] ] . .??\ – Beckham_Vinoth Commented Oct 3, 2017 at 9:34

1 Answer 1

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 ponent MapMarker for example. Here you can find the source code (linked to the relevant line) and the ponent API.

Hope this will help you,
Marius