react-nativereact-native-maps

Convert a Region latitudeDelta / longitudeDelta into an approximate zoomLevel


I use the great react-native-maps from Airbnb on a react-native app.

I got a list of markers on a JSON file where each of these markers have a property zoom which is a integer of an approximate zoom level where the marker should display / hide on the map.

Is there a way based on the latitudeDelta and longitudeDelta of a Region to get an approximate double/integer of the current zoom level as we have on Google Maps (1 to 20) ?

Thanks


Solution

  • Ok I come with an handy solution, I don't know if we can do better.

    I added the onRegionChange event to retrieve the region, then I use some math :

        <MapView
            style={styles.map}
            initialRegion={this.state.region}
            onRegionChange={region => {
                clearTimeout(this.timerForMap)
                this.timerForMap = setTimeout(() => {
                    this.showMarkers(region)
                }, 100)
            }}>
            ...
    

    Then :

        showMarkers(region) {
            let zoom = Math.round(Math.log(360 / region.longitudeDelta) / Math.LN2)
            ...
        }
    

    If someone have a better way to do it, feel free to comment !

    Thanks.