Dynamic visibility layer markers in LeafletJS - leaflet

Question

I am trying to render 5 sets of data on a map, one at a time, selectable by the user.
I'm using layers to store each set and I can switch between them - works well.
I want to be able to filter each set based on user input. I was using L.layerGroup but tried reformatting my data at load time to GeoJSON so I could use the built in filter feature. That only seems to work if I remove the layers and re-add each marker.
Example here: http://jsfiddle.net/callum/5sunB/
For 1000 points, on my system it takes about 200ms which is too slow.
Is there a way to only show/hide the markers already in a layer based on a filter function?
Thanks.

Answer 1

Not really. You can save your markers and then it's faster to just add them to the map than it is to re-create them and then add them.
For example,
var markers = new Array();
...
// create a marker using some unique id and save it to the markers array
var i = feature.properties.id;
markers[i] = L.circleMarker(latlng, {
....
});
return markers[i];
Then when you filter (on click or other event), clear the marker layer and re-add the (saved) markers that match:
if (map.hasLayer(marker_layer)) {
map.removeLayer(marker_layer);
}
marker_layer = new L.featureGroup();
// filter criteria here
for (var i = 0; i < src_data.features.length; i++) {
var feature = src_data.features[i];
if (feature.properties.hits >= n1 && feature.properties.hits <= n2) {
marker_layer.addLayer(markers[i]);
}
}
marker_layer.addTo(map);
I updated your JSFiddle here: http://jsfiddle.net/5sunB/5/ so you can compare re-creating the filtered markers vs just re-adding them.