React-native-mapbox-gl: zoomTo acts weirdly on iOS

[henrikra]

https://github.com/mapbox/react-native-mapbox-gl/blob/master/docs/MapView.md#zoomtozoomlevel-duration

In my case I have a button which calls this.map.zoomTo(11). This sets the zoom level of the map. If I press that button rapidly the zoom sometimes zooms way out and then it goes back again. Have you guys noticed this?

To reproduce

1. render map
2. add button with this.map.zoomTo(11)
3. press that button rapidly

Mapbox 6.0.2
RN 0.51.0

[edwardgalligan]

Have noticed this in an app I maintain - zoom functionality in general just doesn't seem to work reliably at all.

I was planning on testing it in a reduced test-case before reporting it here, but haven't had time yet, so for now I've just disabled the on-map zoom buttons.

[henrikra]

Have you noticed same weird functionality on Android?

[edwardgalligan]

Have you noticed same weird functionality on Android?

Not yet tested.

I very recently:

• upgraded to v6
• tested iOS
• fixed issues & removed zoom buttons
• tested Android

I'll come back to this issue if/when I'm working on that app code again - probably won't be this month.

[nitaliano]

What's happening on iOS is we are converting zoomLevel to altitude since the camera on iOS is based off of altitude that could be why we're seeing weird behavior. Android is based off zoon level so I doubt it is happening there.

[JasonPan]

For me I wanted to use moveTo and zoomTo together, but they didn't seem to work well as separate calls. I ended up using setCamera which appears to allow the above to be achieved in a single function call.

this.map.setCamera({ centerCoordinate: coordinate, zoom: 17.5, duration: 2000, heading: 0 })

I noticed that if I leave out the centerCoordinate, the zoom behaviour immediately starts to behave weirdly, zooming out and in. I think it occurs more often when a zoom call is made but the zoom level remains the same. It does look like the altitude conversion could be the issue.

[olegwn]

seeing same issue here on iOS.

Running those commands in loop will produce different results in each loop:

this.map.zoomTo(12, 1000)
this.map.zoomTo(17, 1000)

and can confirm that I do not see same issue with this.map.setCamera

But setCamera has different issue, when centerCoordinate is set, the duration param is ignored. Map will just zoom in / out without any animation.

[necixy]

I had the same issue and to me the setCamera did work well but without providing the centerCoordinates, it behaves wierd as well. Also if I use the zoomTo function, after using it the getZoom function returns weird values.

For a work around I use the following code and so far it works nice for me:

const DEFAULT_ZOOM_DIFFERENCE = 1;

mapZoomIn() {
    this.mapZoom(true);
  }

  mapZoomOut() {
    this.mapZoom(false);
  }

  async mapZoom(isZoomIn) {
    const zoom = await this.refs["map"].getZoom();
    const center = await this.refs["map"].getCenter();
    let options = {
      centerCoordinate: center,
      zoom: zoom + DEFAULT_ZOOM_DIFFERENCE * (isZoomIn ? 1 : -1),
      duration: 300
    };
    this.refs["map"].setCamera(options);
  }

[danvass]

I've also ran into this, will try using #setCamera and see if that works any better.

Using v6.1.3 and #setCamera worked for me.

[Genesy91]

I also have the same problem.
Is it normal that when i press the button, the map receives the touch too?
I nested the button inside the MapView.

[mattijsf]

Should be fixed with https://github.com/nitaliano/react-native-mapbox-gl/pull/1547