zooming map using latitudeDelta and longitudeDelta - react-native

Question

I'm using react-native-maps. I'm showing direction from source to destination using polyline. But it's not aligned to centre of screen. Zooming is also not proper.
How can I zoom map properly to show direction in the centre of screen properly.
This is my code:
const ASPECT_RATIO = width / height;
const LATITUDE = 40.7128;
const LONGITUDE = 74.0060;
const LATITUDE_DELTA = 0.0012;
const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO;
this.state = {
region: {
latitude: LATITUDE,
longitude: LONGITUDE,
latitudeDelta: LATITUDE_DELTA,
longitudeDelta: LONGITUDE_DELTA,
}
}
<MapView
provider={PROVIDER_GOOGLE}
style={StyleSheet.absoluteFillObject}
region={this.state.region}>
<MapView.Polyline
coordinates={direction}
strokeWidth={4}
strokeColor="#000"/>
</MapView>
Thanks in advance

Answer 1

I'm able to zoom the map to fit the coordinates into the screen.
This is the code:
const { width, height } = Dimensions.get('window');
const ASPECT_RATIO = width / height;
const LATITUDE = 37.78825;
const LONGITUDE = -122.4324;
const LATITUDE_DELTA = 0.0922;
const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO;
const SPACE = 0.01;
function createMarker(modifier = 1) {
return {
latitude: LATITUDE - (SPACE * modifier),
longitude: LONGITUDE - (SPACE * modifier),
};
}
const MARKERS = [
createMarker(),
createMarker(2),
createMarker(3),
createMarker(4),
];
const DEFAULT_PADDING = { top: 40, right: 40, bottom: 40, left: 40 };
class FitToCoordinates extends Component {
fitPadding() {
this.map.fitToCoordinates([MARKERS[2], MARKERS[3]], {
edgePadding: { top: 100, right: 100, bottom: 100, left: 100 },
animated: true,
});
}
fitBottomTwoMarkers() {
this.map.fitToCoordinates([MARKERS[2], MARKERS[3]], {
edgePadding: DEFAULT_PADDING,
animated: true,
});
}
fitAllMarkers() {
this.map.fitToCoordinates(MARKERS, {
edgePadding: DEFAULT_PADDING,
animated: true,
});
}
render() {
return (
<View style={styles.container}>
<MapView
ref={ref => { this.map = ref; }}
style={styles.map}
initialRegion={{
latitude: LATITUDE,
longitude: LONGITUDE,
latitudeDelta: LATITUDE_DELTA,
longitudeDelta: LONGITUDE_DELTA,
}}
>
{MARKERS.map((marker, i) => (
<MapView.Marker
key={i}
coordinate={marker}
/>
))}
</MapView>
<View style={styles.buttonContainer}>
<TouchableOpacity
onPress={() => this.fitPadding()}
style={[styles.bubble, styles.button]}
>
<Text>Fit Bottom Two Markers with Padding</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={() => this.fitBottomTwoMarkers()}
style={[styles.bubble, styles.button]}
>
<Text>Fit Bottom Two Markers</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={() => this.fitAllMarkers()}
style={[styles.bubble, styles.button]}
>
<Text>Fit All Markers</Text>
</TouchableOpacity>
</View>
</View>
);
}
}