0

I'm using react native with expo managed worflow and react-native-maps. I have a set of gps points in the form of array of objects, collected during walk/running activity.

EG:

[{latitude:45.xxx,longitude:9.xxx},{latitude:45.xxx,longitude:9.xxx},...]

At the end of the walking/running activity I show the user the route he made.

I'd like to know how to fit the MapView component as soos as it renders to show the entire route made. I've seen that there is a method "fitToElements" that i think it's designed fot that but i can't get how to use it.

I've tried this but it doesnt work:

<MapView
      
      provider={"google"}
      mapType="standard"
      
      style={{ height: hp("15%"), width: wp("90%") }}
      
      loadingEnabled={true}
      showsMyLocationButton={false}
      initialRegion={{
        latitude: parseFloat(avgLat),
        longitude: avgLong,
        latitudeDelta: 0.001,
        longitudeDelta: 0.001,
      }}
      scrollEnabled={false}
      rotateEnabled={false}
      zoomEnabled={false}
      fitToCoordinates={{
        coordinates: coordsZoom,
        options: {
          edgePadding: {
            top: 10,
            right: 10,
            bottom: 10,
            left: 10,
          },
        },
      }}
     
    >

where coordsZoom is the previous array of json with lat long data.

I really need a working example because i don't understant how to make it work. I searched for online documentation but i found nothing except this other answer that was not useful (React Native Map : How to fit Polyline coordinates to screen?)

Thanks you all :)

Steve
  • 37
  • 7

0 Answers0