leafletesri-leafletesri-oss

Remove Dynamic Layer Esri Leaflet


I add DynamicLayers Leaflet Esri as you zoom in on the map. However I want to remove them and it is not working, it does not give any errors but it does not work. I try mapConsultaView.removeLayer(layer2);

// ====================================== Styles de icones coloridos para markers ========================================= //

var blueIcon = new L.Icon({
    iconUrl: document.location.origin +'/sin/img/marker-icon-blue.png', 
    iconSize: [25, 41],
    iconAnchor: [12, 41],
    popupAnchor: [1, -34],
    shadowSize: [41, 41]
});

var redIcon = new L.Icon({
    iconUrl: document.location.origin +'/sin/img/marker-icon-red.png',
    iconSize: [25, 41],
    iconAnchor: [12, 41],
    popupAnchor: [1, -34],
    shadowSize: [41, 41]
});

var greenIcon = new L.Icon({
    iconUrl: document.location.origin +'/sin/img/marker-icon-green.png',
    iconSize: [25, 41],
    iconAnchor: [12, 41],
    popupAnchor: [1, -34],
    shadowSize: [41, 41]
});

var orangeIcon = new L.Icon({
    iconUrl: document.location.origin +'/sin/img/marker-icon-orange.png',
    iconSize: [25, 41],
    iconAnchor: [12, 41],
    popupAnchor: [1, -34],
    shadowSize: [41, 41]
});

var yellowIcon = new L.Icon({
    iconUrl: document.location.origin +'/sin/img/marker-icon-yellow.png',
    iconSize: [25, 41],
    iconAnchor: [12, 41],
    popupAnchor: [1, -34],
    shadowSize: [41, 41]
});

var violetIcon = new L.Icon({
    iconUrl: document.location.origin +'/sin/img/marker-icon-violet.png',
    iconSize: [25, 41],
    iconAnchor: [12, 41],
    popupAnchor: [1, -34],
    shadowSize: [41, 41]
});

var greyIcon = new L.Icon({
    iconUrl: document.location.origin +'/sin/img/marker-icon-grey.png',
    iconSize: [25, 41],
    iconAnchor: [12, 41],
    popupAnchor: [1, -34],
    shadowSize: [41, 41]
});

var blackIcon = new L.Icon({
    iconUrl: document.location.origin +'/sin/img/marker-icon-black.png',
    iconSize: [25, 41],
    iconAnchor: [12, 41],
    popupAnchor: [1, -34],
    shadowSize: [41, 41]
});

var markersOverlay = []; // Array que armazena todos os markers plotados

var mapConsultaView;

window.onload = function(data){
    doGeoJSon();

    var mbAttr = '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetmap</a>';   
    var osm   = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {attribution: mbAttr}),
        tm_poa_eixos  = L.esri.dynamicMapLayer({
               url: 'myurl'
        }); 

    var mapConsultaView = L.map('mapConsultaView', {
        center: [-30.038037, -51.199163],
        zoom: 14,
        layer:[osm]
    });

    var baseLayers = {
        "Open Street Map": osm
    };

    L.esri.basemapLayer('Streets').addTo(mapConsultaView);
    L.esri.dynamicMapLayer({
           url: ' myUrl',
           useCors: false
        }).addTo(mapConsultaView);

    L.esri.dynamicMapLayer({
           url: ' myUrl'           
        }).addTo(mapConsultaView);

    var layer1 = L.esri.dynamicMapLayer({
           url: ' myUrl',
           useCors: false
        });

    var layer2 = L.esri.dynamicMapLayer({
           url: ' myUrl',
           useCors: false
        });

    var layer3 = L.esri.dynamicMapLayer({
           url: ' myUrl',
           useCors: false
        });




    L.control.layers(baseLayers,{collapsed:false}).addTo(mapConsultaView);
    baseLayers["Open Street Map"].addTo(mapConsultaView);

    //Listener zoom 
    mapConsultaView.on('zoomend', function (e) {        
        if (mapConsultaView.getZoom() == 14) {
            layer1.addTo(mapConsultaView);
        }
        if (mapConsultaView.getZoom() == 16) {
            layer2.addTo(mapConsultaView);
            layer3.addTo(mapConsultaView);
        }

        //HERE test
        mapConsultaView.removeLayer(layer2);
    });
};

Solution

  • there's no need to add and remove L.esri.dynamicMapLayer from the map manually. maxZoom and minZoom are available as constructor options to give you control over when the layer appears.

    http://esri.github.io/esri-leaflet/api-reference/layers/dynamic-map-layer.html#options