React-native-maps initial zoom: 0 not working for iOS

user_1979861 0
Viewed 1836

I cannot find a way to make the iOS RN map to start with zoom level 0 or to zoom out to 0.

const allowScaling = false;

const region = {
  latitude: 0,
  longitude: 0,
  latitudeDelta: 170,
  longitudeDelta: 180,
};

return (
  <View
    style={{
      position: 'relative',
      width: '100%',
      height: '100%',
      overflow: 'hidden',
    }}
  >
    <MapView
      ref={this.setRef}
      onPress={this.onPress}
      onLongPress={this.onLongPress}
      style={{ width: '100%', height: '100%' }}
      zoomControlEnabled
      provider={Platform.OS === 'ios' ? 'google' : 'osmdroid'}
      moveOnMarkerPress={false}
      customMapStyle={[
        {
          stylers: [
            {
              visibility: 'off',
            },
          ],
        },
      ]}
      rotateEnabled={false}
      scrollEnabled={allowScaling}
      pitchEnabled={allowScaling}
      zoomTapEnabled={allowScaling}
      zoomEnabled={allowScaling}
      cacheEnabled={false}
      initialRegion={region}
      onRegionChangeComplete={this.onRegionChange}
      maxZoomLevel={Platform.OS === 'ios' ? maxZoom : Math.max(maxZoom, 10)}
      minZoomLevel={0}
    >
      <UrlTile
        urlTemplate={`${url}/{z}/{x}/{y}/`}
        maximumZ={maxZoom}
        tileSize={256}
      />
      {this.renderMarker()}
    </MapView>
  </View>

Exactly same code starts with zoom: 0 in Android (as in attached picture)

I tried adjusting delta setting maximumZ={0} setting minZoomLevel and maxZoomLevel to 0 etc.

Nothing seem to work to make initialZoom to 0 for iOS and not even to try to zoom out to 0 as below:

minZoomLevel={this.state.minZoomLevel}
onMapReady={()=>{
  this.setState({
    minZoomLevel: 8
  })
}}

Dependencies:

"react-native-maps-osmdroid": "^0.26.1-rc1",
"react-native": "0.62.2",

enter image description here

Note: Before trying the google map type I tried Apple map and the issue was there too.

react-native-maps react-native-ios react-native
2 Answers

The camera settings controls the zoom level. As mentioned here https://github.com/react-native-community/react-native-maps/blob/dbf746d66ca1b42f2beb790bfbf4c0e3a74f3279/docs/mapview.md

type Camera = {
    center: {
       latitude: number,
       longitude: number,
   },
   pitch: number,
   heading: number

   // Only on iOS MapKit, in meters. The property is ignored by Google Maps.
   altitude: number.

   // Only when using Google Maps.
   zoom: number
}

Note that when using the Camera, MapKit on iOS and Google Maps differ in how the height is specified. For a cross-platform app, it is necessary to specify both the zoom level and the altitude separately.

An example of how to specify the zoom level can be found here (https://github.com/react-native-community/react-native-maps/blob/master/example/examples/CameraControl.js). See below some code from the same example:

<MapView
          provider={this.props.provider}
          ref={ref => {
            this.map = ref;
          }}
          style={styles.map}
          initialCamera={{
            center: {
              latitude: LATITUDE,
              longitude: LONGITUDE,
            },
            pitch: 45,
            heading: 90,
            altitude: 1000,
            zoom: 10,
          }}
        />

As mentioned above, for google maps, please use zoom prop to define the zoom level. The minZoomLevel and maxZoomLevel controls the min and max.

user_40323920

Just noticed that initialCamera is ignored if you provide region also. Make sure to provide either one or the other.

user_54363780
Related