Salutations, I need help removing markers added to a layer. I have a list of layers on the right controlled by control layers, and a search list of markers on the left controlled by leaflet-list-markers. When I deselect the layer that interests me on the right I would like it to be updated on the left by deleting the list of markers referring to that layer (the dots of the markers on the map are already removed correctly). The addOnMapAtm() method adds the GeoJson object to the layerAtmosfera, so I would need an inverse function that removes it when I deselect the layer. Here is a piece of code with only the references to the layerAtmosfera:
var markersLayer = new L.LayerGroup(); //layer contain searched elements
////// LAYER ATMOSFERA ////////////////////////////////////////////////////////////////
var layerAtmosfera = L.geoJson({features: []}, {
onEachFeature: function popUp(feature, layer) {
var out = [];
if (feature.properties) {
for (var key in feature.properties) {
out.push(key + ": " + feature.properties[key]);
}
var myMarker = L.marker([feature.properties['Y_COORD'], feature.properties['X_COORD']], {
title: feature.properties['STAZIONE']
}).addTo(markersLayer);
myMarker.setIcon(L.icon({iconUrl: 'images/transparent-icon.png'}));
//layer.bindPopup(out.join("<br />"));
layer.bindPopup(out.join("<br/>") +
'<br/><button id="open-div" onclick="esploraSito(\'' + feature.properties['STAZIONE'] + '\')">ESPLORA</button>');
}
},
pointToLayer: function (feature, latlng) {
return L.circleMarker(latlng, getStyleAtmosfera(feature.properties['STAZIONE'])).bindTooltip(feature.properties['STAZIONE']);
}
});
//////// CREAZIONE DELLA MAPPA CREATA SUL DIV, CHE CONTERRA' POI LA MAPPA DI SFONDO E GLI SHAPE FILE //////////////
var myMap = L.map('divMapID', {
center: L.latLng(39.15097955985934, 9.019421210403138),//Valori prec: [39, 9],
zoom: 10,
minZoom: 3,
layers: [satelliteLayer, layerLimComunali, layerFiumi, layerAtmosfera]
});
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
myMap.addLayer(markersLayer);
function addOnMapAtm() {
shp(fileAtmosfera).then(function (data) { //data è un oggetto geoJson
layerAtmosfera.addData(data);
});
}
var baseMaps = {
"Satellite": satelliteLayer,
"Mappa": mapLayer
};
var overlays = {
"Atmosfera": layerAtmosfera,
"Idrico Sotterraneo": layerIdricoSott,
"Idrico Superficiale": layerIdricoSup,
"Luoghi": layerLuoghi,
"Rumore": layerRumore,
"Suolo": layerSuolo,
"Traffico Veicolare": layerTrafficoVeic,
"Vegetazione": layerVegetaz,
"Vibrazione": layerVibraz
};
var myLayerControl = L.control.layers(baseMaps, overlays).addTo(myMap);
addOnMapAtm();
var list = new L.Control.ListMarkers({layer: markersLayer, itemIcon: null, maxZoom: 25});
list.on('item-mouseover', function (e) {
e.layer.setIcon(L.icon({
iconUrl: 'images/select-marker.png'
}))
}).on('item-mouseout', function (e) {
e.layer.setIcon(L.icon({
iconUrl: 'images/transparent-icon.png'
}))
});
myMap.addControl(list);