How to zoom in/out in react-native-map?

Question

I am using react-native to build a map application. The api I am using is from this link: https://github.com/lelandrichardson/react-native-maps. Below is the code I bring the map on my app. I wander how I can give a zoom value on that map. And how I can change the zoom value when user click a button on the map. What is the zoom API I should use to achieve this?

import React, {


AppRegistry,
  Component,
  StyleSheet,
  Text,
  View,
  Image,
  ListView,
  TextInput,
  TouchableHighlight,
  Dimensions,
 //MapView,
} from 'react-native';

import MapView from 'react-native-maps';

const styles = StyleSheet.create({
  map: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
  },
  container: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    padding: 30,
    flex: 1,
    alignItems: 'center'
  },
  inputText: {
    height: 36,
      padding: 4,
      marginRight: 5,
      flex: 4,
      fontSize: 18,
      borderWidth: 1,
      borderColor: '#48BBEC',
      borderRadius: 8,
      color: '#48BBEC'
  }
});

class MapPage extends Component{

    constructor(props){
        super(props);
        this.state = {
            region:{
                latitude: 4.21048,
                longitude: 101.97577,
            latitudeDelta: 10,
            longitudeDelta: 5
            }
        }
    }

    render() {
        return(
            <View style={styles.container}>
                <TextInput style={styles.inputText}></TextInput>
                <MapView 
                    style={ styles.map }
                    mapType={"standard"}
                    region={this.state.region}
                    zoomEnabled={true}
                    scrollEnabled={true}
                    showsScale={true}
                  ></MapView>
            </View>
            )
    }
}

module.exports = MapPage;

Solution 1

You should use the animateToRegion method (see here)

It takes a region object which has latitudeDelta and longitudeDelta. Use these to set the zoom level.

Updated:

in a Region object the latitude and longitude specify the center location and latitudeDelta and longitudeDelta specify the span of the viewable map area.

This image from this blog post illustrates it well (LatΔ and LngΔ).

Solution 2

New React Native Maps API gives you option to call animateCamera method with zoom parameter.

const MapComponent= (props: any) => {

const map: LegacyRef<MapView> = useRef(null);

const onZoomInPress = () => {
    map?.current?.getCamera().then((cam: Camera) => {
        cam.zoom += 1;
        map?.current?.animateCamera(cam);
    });
};

return (
        <View>
            <MapView
                ref={map}
                provider={PROVIDER_GOOGLE}
                region={region}>
            </MapView>
            <ButtonComponent
                style={{position: 'absolute', bottom: 400, left: 0}}
                onPress={onZoomInPress}>
                Zoom In
            </MainButtonBlue>
        </View>
    );
}

Solution 3

I was able to make this work using Dimensions.get('window');

            const window = Dimensions.get('window');
            const { width, height }  = window
            LONGITUDE_DELTA = LATITUD_DELTA + (width / height)

and by default set LATITUD_DELTA = 0.0922. Then just update this values with the prop onRegionChangeComplete in the <MapView>

Solution 4

This is what I did and it worked out for me very well:

function getRegion(origin, destination, zoom) {
  const oLat = Math.abs(origin.latitude);
  const oLng = Math.abs(origin.longitude);
  const dLat = Math.abs(destination.latitude);
  const dLng = Math.abs(destination.longitude);

  return {
      latitude: (origin.latitude + destination.latitude) / 2,
      longitude: (origin.longitude + destination.longitude) / 2,
      latitudeDelta: Math.abs(oLat - dLat) + zoom,
      longitudeDelta: Math.abs(oLng - dLng) + zoom,
  };                                                                                  
}

View more solutions

Comments

[Joey Yi Zhao]

what is the different between latitude and latitudeDelta? Is there a document to explain them?

[Joey Yi Zhao]

Thanks for response. Is there any example to illustrate how to use animateToRegion?

[David]

Yes, see this example: github.com/lelandrichardson/react-native-maps/blob/master/…

[Alexander Pravdin]

So, how to set deltas using custom zoom in and zoom out buttons?

[Shanaka]

How come it gives you different values? It refers to the screen size which is constant irrespective of the map zoom level

[Shanaka]

I think it should be LONGITUDE_DELTA = LATITUD_DELTA * (width / height)

[Cristian Canales]

@Shanaka why u say that?

[Anna Ira Hurnaus]

This approach is used in this example: github.com/react-native-community/react-native-maps/blob/mas‌​ter/…

[Madhusudhan]

How did we end up with LATITUD_DELTA = 0.0922? what does this mean? How do we calculate this?

[Jean Roux]

Thanks, this worked for me in conjunction with useRef on the MapView using react-native and expo. I use this function in a setTimeout of about 1000ms just so that the map loads and then animate to correct zoom level using your getRegion implementation