React Native Map : How to fit Polyline coordinates to screen?

Question

I am working with react native map and i used polyline and Marker but when i display polyline to map it not fit to screen its just shows some part of line in screen other i have to scroll then i see, so how to fit polyline coordinatin inside current screen .

But i want to make polyline look it like this. so how can i do it

here is my code look likes.

 <MapView
                  

style={styles.mapStyle}
                 provider={PROVIDER_GOOGLE}
                 minZoomLevel={0}
                 paddingAdjustmentBehavior="automatic"
                 ref={(ref) => {
                   this.mapRef = ref;
                 }}
                 onLayout={() =>
                   this.mapRef.fitToCoordinates(this.state.cord, {
                     edgePadding: {top: 50, right: 10, bottom: 10, left: 10},
                     animated: false,
                   })
                 }
                 onMapReady={this.onMapReadyHandler.bind(this)}
                 
                 showsUserLocation={true}
                 fitToElements={true}
                 region={{
                   latitude: this.state.start[0],
                   longitude: this.state.start[1],
                   latitudeDelta: 0.0922,
                   longitudeDelta: 0.0421,
                 }}
                 initialRegion={{
                   latitude: this.state.start[0],
                   longitude: this.state.start[1],
                   latitudeDelta: 0.0922,
                   longitudeDelta: 0.0421,
                 }}>
                 <Circle
                   center={{
                     latitude: this.state.start[0],
                     longitude: this.state.start[1],
                   }}
                   radius={40}
                   strokeColor={'blue'}
                   strokeWidth={6}
                   fillColor={'#fff'}
                   zIndex={1}
                 />

                
                  {speed.map((d) =>
                    d.segments.map((c, i) => (
                      <Polyline
                        key={i}
                        coordinates={c.coordinates.map((c) => ({
                          latitude: c[0],
                          longitude: c[1],
                        }))}
                        strokeColor={c.color}
                        strokeWidth={6}></Polyline>
                    )),
                  )}
                </MapView>

Thanks in advance

Answer 1

There is a solution to your problem. You have to average the sets of location data.

Here is the sample code.

let coords=[{latitude:28.97979,longitude:73.386429864}, {latitude:28.32243,longitude:73.329437204}, {latitude:28.244234,longitude:73.32482894}, {latitude:28.686976,longitude:73.2342056}, {latitude:28.23325235,longitude:73.83562325}];

let sumLat = coords.reduce((a, c) => { return parseFloat(a) + parseFloat(c.latitude)}, 0);
let sumLong = coords.reduce((a, c) => { return parseFloat(a) + parseFloat(c.longitude)}, 0);
   
let avgLat = (sumLat / coords.length) || 0;
let avgLong = (sumLong / coords.length) || 0; 

setRegion({
        latitude: parseFloat(avgLat),
        longitude: avgLong,
        latitudeDelta: 0.20,
        longitudeDelta: 0.20,
      });