Open henrikra opened 6 years ago
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.
Have you noticed same weird functionality on Android?
Have you noticed same weird functionality on Android?
Not yet tested.
I very recently:
I'll come back to this issue if/when I'm working on that app code again - probably won't be this month.
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.
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.
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.
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);
}
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.
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.
Should be fixed with https://github.com/nitaliano/react-native-mapbox-gl/pull/1547
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
this.map.zoomTo(11)
Mapbox
6.0.2
RN0.51.0