Mapbox-gl-js: Map resize fires "movestart", "move", and "moveend" events.

[hughlomas]

Mapboxgl, current version.

https://github.com/mapbox/mapbox-gl-js/blob/6997943681e50b6563f98f20887cf83c6e0ddfbf/src/ui/map.js#L428-L442

The resize function fires movestart, move, and moveend. This is nonsensical, during a resize the map has not moved. This is causing those event handlers to fire unnecessarily, and I don't see any way to distinguish the "source" of the event.

[mlms13]

Indeed, if you have the map set to listen for window resizes (which I think is the default behavior), this causes many moveend events to fire repeatedly when the browser window is resized. Since I'm trying to load updated data when the user repositions the map, this is hitting my server with lots of garbage requests.

Is there an easy way to tell which move* events were triggered by the user vs which ones were programmatic?

[jovanjay]

@mlms13 I have a hacky solution but not sure if it works for you, but there is actually a public variable called "_moving" which will be true if the map is being dragged around. If map resize is being called this variable remains false.

mapobj.on('move', function(){ if(mapobject._moving){ console.log('has moved'); } })

[mlms13]

Thanks @jovanjay, I'll have to play around with this.

A closely related problem I'm running into:

• User scrolls down on a mobile browser (hiding the URL bar)
• Browser fires a resize event
• Mapbox redraws on window resize and claims a moveend occurred

[johnfrancisgit]

Having the same issue.... :(

[nathanredblur]

no solution fo this then?

[ctaylor4874]

Any solutions for this? I'm having the same issue

[gzurbach]

I've been banging my head on this issue for hours, at least now I know what's causing it. Did anyone found an elegant solution to this? Any way to know what triggered the moveend event?

EDIT: I was able to solve my issue by checking the originalEvent.type property. It does not say if the resize originates from a user interaction specifically but in my case it was good enough. Hope this helps!

this.map.on('moveend', (eventData)=> {
  let sendAction = true;
  if (eventData && eventData.originalEvent && eventData.originalEvent.type === 'resize') {
    sendAction = false;
  }

  if (sendAction) {
    // do the thing
  }
}

[mlms13]

Not sure if my solution counts as elegant... :)

When you set up the map, you can configure a trackResize property. It's true by default, but I set it to false. Then, I added my own resize handler to redraw the map, passing along extra metadata that I can check for elsewhere:

window.addEventListener('resize', () => myMap.resize({ programmatic: true }));

That {programmatic: true} flag gets passed into all of the other events triggered by resize, so in my handlers for e.g. map.on("moveend", evt => ...), I can check for evt.programmatic and handle the event differently. This is very similar to your check for originalEvent.type, but it offers me a little extra control (e.g. I can pass a programmatic flag from other non-user-triggered move events, which allows me to only re-fetch data when the user would expect it).

So again... elegant? Hardly. But it works well enough for me to only do "moveend" things when the map has actually been moved.

[olso]

You can use dragstart

[kolnogorov]

Still no working solution out of the box for this?
Oh, my.