I am toying with migrating a web-based application to react-native. The web based application is well developed using leaflet (and react-leaflet). To show different marker images at different zoom levels, we use the current zoom level of the map:

const getIcon = zoom => {
    if (zoom >= 14) {
        return {
            icon: bigicon,
            anchor: [44, 88],
    if (zoom >= 12) {
        return {
            icon: mediumicon,
            anchor: [22, 44],
    // ...etc.

Where the zoom >= X refers to the zoom level of the map, as is commonly used in most web-based slippymap tile names.

The best platform I've found so far for maps in react-native is react-native-maps. Its management of the map bounds / zoom is very different. While the API docs do seem to allow for things like minZoomLevel and maxZoomLevel, with those values being the same slippytile zoom levels, I don't see any way to get the current "zoom" of the map. In leaflet, we can do map.getZoom(). I don't see anything similar in react-native-maps. Am I missing it?

Rather, we have easy access to what they call the Region, which is essentially the latitude and longitude of the center of the map, as well as the latitudeDelta and longitudeDelta (the height and width of the bounds, in latlng degrees). So setting up a map looks like this:

        latitude: 51,
        longitude: 0,
        latitudeDelta: 1,
        longitudeDelta: 1,
      onRegionChangeComplete={region => {
        // save region to state to be read elsewhere

As you can see, the Region datatype has these 4 values in it. Not quite so friendly as far as measuring overall zoom, and then picking the correct icon type for the markers.

Is there a way to get the slippymap tile analog of zoom in react-native-maps?

If not, what might be a reasonable formula for transforming a native maps Region into a zoom level?



Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.