13

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

Thmsct
  • 463
  • 1
  • 4
  • 9

2 Answers2

31

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.

Thmsct
  • 463
  • 1
  • 4
  • 9
4

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>
devashish desai
  • 75
  • 10