tombatossals / angular-leaflet-directive

AngularJS directive to embed an interact with maps managed by Leaflet library
http://tombatossals.github.io/angular-leaflet-directive
MIT License
1.5k stars 635 forks source link

Error: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node. #1003

Closed carrbrpoa closed 9 years ago

carrbrpoa commented 9 years ago

I'm toggling between my available baselayers (with or without overlays) and sometimes this error comes:

error_toggling_baselayers

And the line pointed in BasemapLayer.js is:

onRemove: function(map){
      // check to make sure the logo hasn't already been removed
      if(this._logo && this._logo._container){
        map.removeControl(this._logo); // Line 232
        map._hasEsriLogo = false;
      }
      (...)

Any ideas?

Thanks in advance

nmccready commented 9 years ago

511

carrbrpoa commented 9 years ago

I checked it out, but how could I be using the "wrong $scope"?

Here's my main controller:

app.controller("MainController", [ "$scope", "$rootScope", "leafletData", function($scope, $rootScope, leafletData) {
    var ctrl = this;

    // My custom stuff

    (...)

    $scope.$on('cdl-loading-on', function(event, args) {
        $scope.loadingCdl = true;
        $scope.cdlNaoEncontrou = false;
    });

    $scope.$on('cdl-loading-off', function(event, args) {
        $scope.loadingCdl = false;
    });

    // End of my custom stuff

    $rootScope.$on('leafletDirectiveMap.baselayerchange', function(ev, layer) {
        leafletData.getLayers().then(function(l) {
            angular.forEach(l.baselayers, function(bl) {
                bl.setZIndex(-1);
            });
        });
    });

    angular.extend($scope, {
        defaults : {},
        center : {
            lat : -30.1,
            lng : -51.18,
            zoom : 12
        },
        controls : {
            scale : {
                metric : true,
                imperial : false,
                position : 'bottomleft'
            },
            fullscreen : {
                position : 'topleft'
            }
        },
        layers : {
            baselayers : {
                xyz : {
                    name : 'Open Street Map',
                    url : 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
                    type : 'xyz'
                },
                topo : {
                    name : "Topográfico",
                    type : "agsBase",
                    layer : "Topographic",
                    visible : false
                },
                (...)
nmccready commented 9 years ago

Ok, well make an small concrete example. Via plnkr.

carrbrpoa commented 9 years ago

Here it goes: http://plnkr.co/edit/jyXgske9YXYRViqLamBc?p=preview

It's a simplified version of my app, without overlays. See that you just need to start switching the baselayers and in a while the error occurs.

Sometimes it just doesn't loads the selected baselayer due to the error (I guess).

nmccready commented 9 years ago

So looking at the stack and running your example this appears to be a leaflet / leaflet esri problem. This seems to not be our issue. Please take it up with either of them.

carrbrpoa commented 9 years ago

Thanks. FYI, opened issue 3961 in leaflet.