Convert a Region latitudeDelta / longitudeDelta into an approximate zoomLevel

Question

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

Selector

Answer 1

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.

Selector

This is also how I get the zoom level. – Radiolucent

you can use this to calculate the region for a given zoom const distanceDelta = Math.exp(Math.log(360) - (zoom * Math.LN2)); – Lepidolite

Where do we use this zoom variable – Piranha

Answer 2

you can get the zoom level from getCamera() using onRegionChange in MapView

const [zoom, setZoom] = useState(''); //initiates variable zoom

const getZoom = async () => {
  const coords = await mapRef.getCamera();
  setZoom(coords.center.zoom); // sets variable zoom the value under coords.center.zoom
}

<MapView>
ref = {(ref) => mapRef = ref}
 onRegionChange = {() => {getZoom();}}
</MapView>

Flag