Leaflet: Resizing the window can result in an error being thrown if the map element is removed in the meantime

[MarkFalconbridge]

This issue arises if the map element is removed just after the window is resized.

It results in a similar error as is thrown by the cases mentioned in this issue - https://github.com/Leaflet/Leaflet/issues/5774.

What you see is an error in the browser console:

DomUtil.js:247 Uncaught TypeError: Cannot read property '_leaflet_pos' of undefined
at getPosition (DomUtil.js:247)
at NewClass._getMapPanePos (Map.js:1475)
at NewClass.containerPointToLayerPoint (Map.js:1049)
at NewClass._getCenterLayerPoint (Map.js:1512)
at NewClass.getCenter (Map.js:837)
at NewClass.panInsideBounds (Map.js:503)
at NewClass._panInsideMaxBounds (Map.js:1280)
at NewClass.fire (Events.js:190)

See here for a repro case - https://plnkr.co/edit/XSHvj1jLmz6M81RT4zWu?p=preview. To reproduce, change the size of the window containing the map by moving the splitter between the code window and the preview window. You should see the error in the browser console.

The error is thrown because the Map.invalidateSize method uses setTimeout with a timeout of 200ms. Map.invalidateSize even stores the handle returned from the setTimeout call as this._sizeTimer. The fix would be to call clearTimeout(this._sizeTimer) from the Map.remove method.

[IvanSanchez]

@MarkFalconbridge Nice analysis! Sounds like you've got it covered - would you like to send a PR to fix this, please?

[MarkFalconbridge]

This has already been fixed by #6958. I was running against release 1.6.0 which doesn't have that fix.

[MarkFalconbridge]

On further investigation I don't think #6958 fixes this issue. Applying a patch that uses the code from #6958 still gives the same error.

[MarkFalconbridge]

Here (https://jsfiddle.net/dr7k9mp3/2/) is an updated example using jsfiddle that illustrates the problem. Once loaded resize the pane hosting the map and then check the browser console.

[MarkFalconbridge]

The issue is fixed by a combination of #6958 and #6867. Please make a release soon to address this issues and avoid duplicate issues being raised.

[stephent]

Seeing a similar issue, although the stack trace originates in some other code:

DomUtil.js:247 Uncaught TypeError: Cannot read property '_leaflet_pos' of undefined
    at getPosition (DomUtil.js:247)
    at NewClass._getMapPanePos (Map.js:1475)
    at NewClass._getNewPixelOrigin (Map.js:1492)
    at NewClass._move (Map.js:1234)
    at NewClass._onZoomTransitionEnd (Map.js:1707)

Haven't been able to reproduce it reliably yet - it occurs unpredictably soon after page load in a react app, which may also suggest a timing issue.

[t1a2l]

@stephent having the same issue, it is unpredictable - happens sometimes. can't reproduce. found any solution for that?

[stephent]

@t1a2l for me the issue occurred because my code was briefly loading a Leaflet map then switching to another map technology as soon as the user preferences were received.

I added logic to prevent anything loading until the user prefs were received and the problem has not recurred. It seems that it might have been related to Leaflet being loaded and then unloaded before a callback had completed (that sounds very vague, I know - that's because I can't pretend I actually understand what was going on entirely!)

[RZsam]

have the same issue.
any solution?

[studiobrain]

seeing a very similar error:

TypeError: Cannot read property '_leaflet_pos' of undefined
    at _t (DomUtil.js:247)
    at t._getMapPanePos (Map.js:1475)
    at t.containerPointToLayerPoint (Map.js:1049)
    at t._getCenterLayerPoint (Map.js:1512)
    at t.getCenter (Map.js:837)
    at t.flyTo (Map.js:367)

[alexsalajan]

Still having the same issue with version 1.7.1

[theseanco]

Having this issue also with 1.7.1

[lagst3r]

I am having the same issue but only after when I called map2.remove() and resize the window.

[ASBondarev]

Having same issue with react-leaflet, trying to getPixelBounds() out of map in useState

[yniz]

Same issue when the wrapping Angular component is removed from the page, not using map.remove or it creates a second error - another instance is trying to use the element.