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 = '© <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);
});
};
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