I have a map with a lot of Markers imported from GeoJSON via AJAX and I can’t get filtering to work.
There are 3 checkboxes and any combination of them can be checked. Each Marker has a property called “types” that may contain any combination of the 3 values (it is a map of shops that may have soft-serve, scoops and/or milkshake so ” soft scoop shake”, ” soft scoop”, ” soft shake”, ” scoop shake”, ” scoop”, ” shake”).
- So first I check which values are checked and add them into a string.
- Then I check if none are checked and if so all Markers should be shown.
- Then I check if the Marker has all 3 values in which case it should always be shown (as it fulfills all values).
- Finally I check if the specific selected values are on the Marker. It works fine if it is precisely the same, but if option 3 is the only selected value and a Marker has both options 2 and 3 it should still be shown.
First line with == works fine, but the moment I try something in the style of indexOf() or search(), everything breaks and nothing loads at all.
I have tried working with arrays as well, but the filter section of Leaflet is not exactly well described and JavaScript is not my “first language”.
var geojsonLayer = new L.GeoJSON.AJAX("data/map.geojson", {
pointToLayer: pointToLayer,
filter: icefilter
});
function icefilter(json) {
var icetypeFilter = "";
var cond1 = true;
$("input[name=icetype]").each(function () {
if (this.checked) {
icetypeFilter = icetypeFilter + " " + this.value;
}
});
var att = json.properties.types;
if (icetypeFilter.length == 0) {
cond1 = true;
} else if (att == " soft scoop shake") {
cond1 = true;
} else {
cond1 = att == icetypeFilter; //Works fine with this one
//cond1 = att.indexOf(icetypeFilter) >= 0; //The moment I activate this line and remove the one above everything is broken and no markers are shown - even with no filters selected.
}
return cond1;
}
$("input[name=icetype]").click(function () {
clusterLayer.clearLayers();
geojsonLayer.refresh();
locationList();
});
8
IIUC, you want to implement an AND filter with your 3 checkboxes. Your GeoJSON data contains Features with properties.types field as string of the form " soft scoop shake" (may contain fewer words).
cond1 = att.indexOf(icetypeFilter) >= 0;The moment I activate this line […] everything is broken and no markers are shown – even with no filters selected.
What probably happens is that some of your Features lack the properties.types field. So att is undefined, and att.indexOf() raises an error and stops your script (same with any other method call, like att.search().
An “immediate” solution could consist in making sure you always have att variable as string:
var att = json.properties.types;
if (typeof att !== "string") {
att = ""; // Ensure we always have a string
}
That being said, you will have troubles if properties.types does not always lists words in the same order, or if you do not loop over your checkboxes in that exact same order as well.
E.g. a Feature could have " shake scoop" types, but the checkboxes request " scoop shake".
You should not concatenate your checkboxes values in a string, as it forces some order which may not exactly match your Features, even if they have the correct words (but in a different order).
Filling an array, you could do something like:
var icetypeFilter = []; // Use an array
$("input[name=icetype]").each(function () {
if (this.checked) {
icetypeFilter.push(icetypeFilter + " " + this.value);
}
});
// ...
return icetypeFilter.every(checkValue => att?.contains(checkValue));
Here using .every() method:
everyacts like the “for all” quantifier in mathematics. In particular, for an empty array, it returnstrue.
So it could replace your 3 checks.
Then you can later improve by using Regular Expressions, etc.
1
Just if anyone wanted to see the code I ended up with…
It does not solve the problem with locations without the “types” value that was the primary cause but that was solved elsewhere where the geojson is generated.
Had I not done that already @ghybs solution with checking if it is there would have been even better.
function icefilter (json) {
var att = json.properties.types;
var cond = true;
$("input[name=icetype]").each(function(){
if (this.checked) {
cond = cond * att.includes(this.value);
}
});
return(cond);
}