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

Question

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",

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

Rrhoea

Answer 1

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.

Louislouisa

In my case when using UrlTile camera zoom doesn't seem to work either but thank you for the solution, I didn't know about the camera feature and it has some very nice features! – Rrhoea

Answer 2

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

Woald