Is there a way to filter map features based on their properties?
For example, if I have the following property in the geojson:
...
"properties": {
"Start": 10
}
...
How can I make it so that only features with Start > 10 are visible, while features with Start < 10 are hidden?
I've tried changing the style of the features to make them transparent, but they still remain clickable. Is there a way to completely hide features that don't meet the criteria?
let invisibleStyle = new ol.style.Fill({
color: [0,0, 0, 0],
});
const NewLayer= new ol.layer.VectorImage ({
source: new ol.source.Vector({
url: *url*,
format: new ol.format.GeoJSON(),
}),
visible: true,
style: function (feature) {
if (feature.get('Start')>10) {
let style = new ol.style.Style({
fill: fillStyle,
stroke: strokeStyle
})
return style;
} else {
let style = new ol.style.Style({
fill: invisibleStyle,
})
return style;
}
});
map.addLayer(NewLayer);
I also attempted using the visible property like this, but it didn't work as expected:
const NewLayer= new ol.layer.VectorImage ({
source: new ol.source.Vector({
url: *url*,
format: new ol.format.GeoJSON(),
}),
visible: function(feature) {
if (feature.get('Start')<10) {
return true;
} else {
return false;
}
},
style: new ol.style.Style({
fill: fillStyle,
stroke: strokeStyle,
})
});
map.addLayer(NewLayer);