I have a requirement to zoom out/in Apple maps based on radius change by the user in react-native-maps.
I have used a react-native-slider to change the radius on the map.based on slider value change radius drawn on the map will be changed. Now with this, Map also should be zoomed out/in based on radius. How can I achieve this in the best possible way?
Below is my code:
<MapView
minZoomLevel={this.state.minZoomLevel}
maxZoomLevel={this.state.maxZoomLevel}
moveOnMarkerPress={true}
//provider={PROVIDER_GOOGLE}
style={styles.mapView}
showsUserLocation={true}
followsUserLocation={false}
region={this.state.region}
loadingEnabled={true}
>
<Marker coordinate={this.state.markers.latlng} />
<Circle
center={this.state.markers.latlng}
radius={userRadius}
strokeColor={colors.black}
/>
</MapView>
calculateMapZoomLevel = () => {
const { userRadius } = this.state;
var zoomLevel = 11;
var compRadius = userRadius + userRadius / 2;
var scale = compRadius / 500;
zoomLevel = Math.round(16 - Math.log(scale) / Math.log(2));
return zoomLevel;
};
handleSliderValueChange = (value) => {
const rondedRadius = Math.round(value * 1609);
const sliderValue = Math.round(value);
const radiusInMiles = sliderValue;
this.setState({
userRadius: rondedRadius,
sliderValue,
radiusInMiles,
});
const zoomLevel = this.calculateMapZoomLevel();
this.setState({
maxZoomLevel: zoomLevel,
});
};
You can actually have latitudeData and longitudeData properties under region for the MapView:
const [delta, setDelta] = useState(some_initial_value);
region={{
latitude: xx,
longitude: xx,
latitudeDelta: delta,
longitudeDelta: delta
}}
What I'd do is create a function that calculates the delta given the userRadius. As you update the delta, the map will zoom in/out.
Another option might be using animateToRegion() for a smoother transition, but personally I've never used it.