CODEWITHSUNDEEP
event-handlingzoomingmapbox-gl-js
Hiro Protagonist
Hiro Protagonist

Reputation: 483

Inconsistent event firing on mapbox zoomstart and zoomend

I'm working on mapbox js-gl, version 1.7.0. I have tied the showing and hiding of a crosshairs div on my page to the zoomstart and zoomend events. 

map.on('zoomstart', function (e)
{
    $("#crosshairs-container").show();
    console.log("Zooming started...");
});

map.on('zoomend', function (e)
{
    $("#crosshairs-container").hide();
    console.log("Zooming finished...");
    var zoomLevel = map.getZoom();
    renderMap();
});

The problem is: the referenced div doesn't appear and disappear reliably and consistently.

On desktop (Linux/Chrome): the mouse wheel's individual "incremental jumps" (most mice have them, if not all of the nowadays) are sometimes registered as the zoomend event, and sometimes not. This means, that sometimes zooming finishes after one "wobble" of the mouse wheel - even though I'm still zooming by continuing to turn the mouse wheel. Other times, the zooming continues as I continue to turn the mouse wheel - the behaviour I'd expect.

On mobile (Android/Chrome): Similar behaviour, though, here, the crosshairs overlay pretty much disappears completely while zooming (in or out).

I have observed that, when zooming in and out (trying to reproduce and observe this behaviour) several times over the same part of the map (which has already loaded and added layers), the desktop seems to "find its groove", so to speak.

My question is: since it's rather unlikely that I have used the wrong events - I don't think this is a coding issue - has anyone else seen this behaviour ? Is this a hardware issue, in the sense that the pinch zoom on mobile does things "intermittently", as does a "incremental wobbles" mouse wheel ? So what - to the user - looks and feels continuous, is actually, behind the scenes, many inidividually triggered events "stitched together" ?

Incidentally, the drag events work flawlessly on desktop & mobile.

Upvotes: 1

Views: 1695

Answers (1)

Hiro Protagonist
Hiro Protagonist

Reputation: 483

I solved this issue by switching from the dragstart end dragend events to the movestart and moveend events. This seems to avoid all problems, including having to debounce or throttle the event handlers. Thanks to @Steve Bennett for the tip.

Upvotes: 1

Related Questions