I am trying to build a Leaflet map. I already built custom checkboxes, the map itself, and an empty div which display data from a GeoJSON file when clicking on markers.
I would like to know how to uncheck filter/remove markers from the map when clicking on a second filter. All examples I see with checkbox are for multiple selections. I know I can add or remove Layers, but I'm using layerGroup and can't manage to do it.
I'm also trying to insert a "reset" or "show all" checkbox that would show or hide all markers.
I'm on this a whole day now.
Here is my js code...
$(document).ready(function(){
const layers = {
active: [],
glucocerebrosidaseLayer: new L.LayerGroup(),
gbaLayer: new L.LayerGroup(),
gl1Layer: new L.LayerGroup(),
SphingomyelinaseacideLayer: new L.LayerGroup(),
};
var cartoDb = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors © <a href="https://carto.com/attributions">CARTO</a>',
subdomains: 'abcd',
maxZoom: 19});
var glucocerebrosidaseIcon = L.AwesomeMarkers.icon({
prefix: 'fa', //font awesome rather than bootstrap
markerColor: 'red', // see colors above
iconColor:'white',
icon: 'ambulance' //http://fortawesome.github.io/Font-Awesome/icons/
});
var gbaIcon = L.AwesomeMarkers.icon({
prefix: 'fa', //font awesome rather than bootstrap
iconColor:'white',
markerColor: 'green', // see colors above
icon: 'ambulance' //http://fortawesome.github.io/Font-Awesome/icons/
});
var gl1Icon = L.AwesomeMarkers.icon({
prefix: 'fa', //font awesome rather than bootstrap
iconColor:'white',
markerColor: 'blue', // see colors above
icon: 'ambulance' //http://fortawesome.github.io/Font-Awesome/icons/
});
var sphingomyelinaseIcon = L.AwesomeMarkers.icon({
prefix: 'fa', //font awesome rather than bootstrap
iconColor:'white',
markerColor: 'darkred', // see colors above
icon: 'ambulance' //http://fortawesome.github.io/Font-Awesome/icons/
});
var map = L.map('map')
.addLayer(cartoDb)
.setView([46.85, 2.3518], 6); // LIGNE 14
function onEachFeature(feature, layer) {
var html = '';
if (feature.properties.Description) {
html += '<p>' + feature.properties.Description + '</p>';
}
if (feature.properties.Envoi) {
html += '<p>' + feature.properties.Envoi + '</p>';
}
if (feature.properties.Mode) {
html += '<p>' + feature.properties.Mode + '</p>';
}
if (feature.properties.Laboratoire) {
html += '<p>' + feature.properties.Laboratoire + '</p>';
}
if (feature.properties.Chu) {
html += '<p>' + feature.properties.Chu + '</p>';
}
if (feature.properties.Adresse) {
html += '<p>' + feature.properties.Adresse + '</p>';
}
if (feature.properties.Cp) {
html += '<p>' + feature.properties.Cp + '</p>';
}
if (feature.properties.Professeur) {
html += '<p>' + feature.properties.Professeur + '</p>';
}
if (feature.properties.Tel) {
html += '<p>' + feature.properties.Tel + '</p>';
}
if (feature.properties.Fax) {
html += '<p>' + feature.properties.Fax + '</p>';
}
if (feature.properties.Mail) {
html += '<p>' + feature.properties.Mail + '</p>';
}
if (feature.properties.Renseignement) {
html += '<p>' + feature.properties.Renseignement + '</p>';
}
layer.on('click', function () {
$('#layer_infos .fill').html(html);
})
$('input[type="checkbox"]').on('click',function(){
$('#layer_infos .fill').html('<p>Cliquez sur une icône pour voir le détail</p>');
})
if ( L.Browser.mobile ) {
layer.on('click', function () {
$('#infos').addClass("slide");
})
$('.hamburger').click(function(){
$(this).toggleClass("is-active");
$('#filters').toggleClass("slide");
})
$('.close').click(function(){
$('#infos').removeClass("slide");
})
}
}
var promise = $.getJSON("maladie.json");
promise.then(function(data){
var allmaladies = L.geoJson(data);
// based on the category assign a marker to the layer
layers.glucocerebrosidaseLayer = L.geoJson(data, {
filter: function(feature, layer) {
return (feature.properties.Maladie === "glucocerebrosidase");
},
onEachFeature: onEachFeature,
pointToLayer: function(feature, latlng) {
return L.marker(latlng, {
icon: glucocerebrosidaseIcon
})
}
})
layers.gbaLayer = L.geoJson(data, {
filter: function(feature, layer) {
return (feature.properties.Maladie === "gba");
},
onEachFeature: onEachFeature,
pointToLayer: function(feature, latlng) {
return L.marker(latlng, {
icon: gbaIcon
})
}
})
layers.gl1Layer = L.geoJson(data, {
filter: function(feature, layer) {
return (feature.properties.Maladie === "gl1");
},
onEachFeature: onEachFeature,
pointToLayer: function(feature, latlng) {
return L.marker(latlng, {
icon: gl1Icon
})
}
})
layers.SphingomyelinaseacideLayer = L.geoJson(data, {
filter: function(feature, layer) {
return (feature.properties.Maladie === "Sphingomyelinase-acide");
},
onEachFeature: onEachFeature,
pointToLayer: function(feature, latlng) {
return L.marker(latlng, {
icon: sphingomyelinaseIcon
})
}
})
map.fitBounds(allmaladies.getBounds(), {
padding: [50, 50]
});
$('input[type="checkbox"]').on('change', function(e) {
const layerName = e.target.name;
// if a layer is already active, remove it from the map and the active array
if (layers.active.includes(layerName)) {
layers.active = layers.active.filter(layer => layer !== layerName);
map.removeLayer(layers[layerName]);
} else {
// add the layer to the map and to the active array
layers.active.push(layerName);
layers[layerName].addTo(map);
}
});
});
});
To check/uncheck checkbox I tried many snippets like
$('input[type="checkbox"]').on('change', function() {
$('input[type="checkbox"]').not(this).prop('checked', false);
});
It works, I can select only one Checkbox at a time, but the markers of course stay on the map. I don't know how to link both..
To add a "show all" checkbox, I tried in many way
$('#allmaladies').on('click',function(){
if (this.checked) {
layers[glucocerebrosidase].addTo(map);
layers[gl1].addTo(map);
layers[ gba].addTo(map);
layers[sphingomyelinaseacide].addTo(map);
}else{
map.removeLayer[glucocerebrosidase];
map.removeLayer[gl1];
map.removeLayer[gba];
map.removeLayer[sphingomyelinaseacide];
}
})
this gives me nothing but error message : "Uncaught TypeError: Cannot read property 'addTo' of undefined"....
EDIT Here is my HTML code:
<div>
<input type="checkbox" class="gaucher" id="1" name="gaucher[]" onchange="processCheck(this)">
<label for="1">Glucocérébrosidase</label>
</div>
<div>
<input type="checkbox" class="gaucher" id="2" name="gaucher[]" onchange="processCheck(this)">
<label for="2">Gêne GBA</label>
</div>
<div>
<input type="checkbox" class="gaucher" id="3" name="gaucher[]" onchange="processCheck(this)">
<label for="3">Lyso GL1</label>
</div>
<div>
<input type="checkbox" class="gaucher" id="4" name="gaucher[]" onchange="processCheck(this)">
<label for="4">Chito</label>
</div>
<div>
<input type="checkbox" class="gaucher" id="5" name="gaucher[]" onchange="processCheck(this)"
<label for="5">CCL 18</label>
</div>
I didn't understand if your code had to replace the input click function. I put it after to try, changed the html but the markers disappear from the map, with no error message. I guess it's a syntax error somewhere ?
