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

Share Improve this question Follow asked Oct 13, 2016 at 11:57 douglaswissettdouglaswissett 24111 gold badge44 silver badges1414 bronze badges 1

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

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

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