React-native-maps limit panning area
Asked Answered
U

0

8

Is there a way to limit the map to a specific area so that panning and zooming is contained inside that area and everything outside is locked away? I would like to limit what area the user can see on the map. I am using Google Maps via react-native-maps https://github.com/react-community/react-native-maps

and this is my code and currently there is no limit on how far out you can zoom or how much you can pan to either side

    <View style={styles.container}>
        <MapView style={styles.map}
          provider= { PROVIDER_GOOGLE }
          customMapStyle={mapStyle}
          initialRegion={{
            latitude: 59.2937025,
            longitude: 18.0813377,
            latitudeDelta: 0.012,
            longitudeDelta: 0.012,

          }}
        />
    </View> 
Unboned answered 19/4, 2018 at 14:12 Comment(1)
A bit more of a complicated anwser, you can use the maxZoomLevel prop to limit the zoom. Then you will need to use the event onPanDrag and need to check if the { coordinate: LatLng, position: Point } is within the bounds and if it is not within the bounds reset it to the previous valid location.Musk

© 2022 - 2024 — McMap. All rights reserved.