map is not removed completely on `map.remove()`: `Uncaught TypeError: Cannot read property '_leaflet_pos' of undefined`

How to reproduce

• Leaflet version I’m using: 1.2.0
• Browser (with version) I’m using: Chrome Version 60.0.3112.113
• It works fine in Firefox and Safari (havn’t tested in IE, Edge)
• OS/Platform (with version) I’m using: macOS Sierra
• add map in div element and add layer

this.leafletMap = new L.Map( <element> , {
            zoomControl: true, 
            dragging: this.isInDragMode, 
            touchZoom: false,
            scrollWheelZoom: false,
            doubleClickZoom: false,
            tap: false,
}
L.tileLayer( 'http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                } ).addTo( this.leafletMap );

• Remove the map on some user action

if (this.leafletMap ){
        this.leafletMap.eachLayer(function(layer){
            layer.remove();
        });
        this.leafletMap.remove();
        this.leafletMap = null;
    }

What behaviour I’m expecting and which behaviour I’m seeing

• Post removal of the map, it removes the map from the element, however, if I do double click on the div, it throws error - Uncaught TypeError: Cannot read property '_leaflet_pos' of undefined It seems like DOM element is still holding the event listeners even though the map and layers are removed.

Minimal example reproducing the issue

• this example is as simple as possible
• this example does not rely on any third party code

Using http://playground-leaflet.rhcloud.com/ or any other jsfiddle-like site.

[FLoibl]

@spydmobile here goes, this is what i did in a slightly modified form: I have no idea how to post code properly in this f*ing comment field, sorry bout that. I have edited my own comment about 10 times now lol

function removeMap()
{
    var leafletCtrl = get_your_own_leaflet_reference_from_somewhere(), 
    dom = leafletCtrl.getReferenceToContainerDomSomehow(); 

    //This removes most of the events
    leafletCtrl.off();

//After this, the dom element should be good to reuse, unfortunatly it is not
    leafletCtrl.remove(); 

    var removeDanglingEvents = function(inputObj, checkPrefix)
    {
        if(inputObj !== null)
        {
            //Taken from the leaflet sourcecode directly, you can search for these constants and see how those events are attached, why they are never fully removed i don't know
            var msPointer = L.Browser.msPointer,
            POINTER_DOWN =   msPointer ? 'MSPointerDown'   : 'pointerdown',
            POINTER_MOVE =   msPointer ? 'MSPointerMove'   : 'pointermove',
            POINTER_UP =     msPointer ? 'MSPointerUp'     : 'pointerup',
            POINTER_CANCEL = msPointer ? 'MSPointerCancel' : 'pointercancel';

            for(var prop in inputObj)
            {
                var prefixOk = checkPrefix ? prop.indexOf('_leaflet_') !== -1 : true, propVal; //if we are in the _leaflet_events state kill everything, else only stuff that contains the string '_leaflet_'
                if(inputObj.hasOwnProperty(prop) && prefixOk)
                {
                    //Map the names of the props to the events that were really attached => touchstart equals POINTER_DOWN etc
                    var evt = []; 
                    if(prop.indexOf('touchstart') !== -1) //indexOf because the prop names are really weird 'touchstarttouchstart36' etc
                    {
                        evt = [POINTER_DOWN];
                    }
                    else if(prop.indexOf('touchmove') !== -1)
                    {
                        evt = [POINTER_MOVE];
                    }
                    else if(prop.indexOf('touchend') !== -1)
                    {
                        evt = [POINTER_UP, POINTER_CANCEL];
                    }

                    propVal = inputObj[prop];
                    if(evt.length > 0 && typeof propVal === 'function')
                    {
                        evt.each(function(domEvent)
                        {
                            dom.removeEventListener(domEvent, propVal, false);
                        });                    
                    }

                    //Reference B-GONE, Garbage b collected.
                    inputObj[prop] = null;
                    delete inputObj[prop];
                }
            }
        }        
    };

    removeDanglingEvents(dom._leaflet_events, false);
    removeDanglingEvents(dom, true);
}

[egardner]

Hi there – I think I’m experiencing this issue as well. Here’s my basic use-case:

I’m building a viewer component (using the Leaflet-IIIF plugin, but I don’t think that impacts anything here) for objects with multiple pages / surfaces as opposed to displaying an actual map. When the viewer loads, there is a series of thumbnails which the user can click to update which view of an object is displayed in the central area of the UI.

When the user changes the view, I’m calling map.remove() before setting up a new map for the new view. The new map is created on the same DOM element as the old one (a div with an ID), and I’m not modifying the DOM in any way outside of Leaflet.

On the initial view everything works fine. But after calling map.remove() and showing a new view, the console complains: Cannot read property '_leaflet_pos' of undefined whenever the map is dragged or zoomed.

I can try to post a minimal example at some point, but this seems to be the same problem. This error comes up in Chrome but not in Firefox.