Remove Dynamic Layer Esri Leaflet

350 Views Asked by At

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);
    });
};
1

There are 1 best solutions below

0
On BEST ANSWER

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