I am stuck with a situation where I have to create a dashboard application similar to ChoroplethExample. But the only problem is I have to iterate between all states(Features in geoJSON) and pause for like 3 seconds in every iteration.
I found this topic where mouseover trigger example is given. But how can we use it for this case.
Below is the function that needs to be fired in every iteration: LeafletExample
function highlightFeature(e) {
var layer = e.target;
layer.setStyle({
weight: 5,
color: '#666',
dashArray: '',
fillOpacity: 0.7
});
if (!L.Browser.ie && !L.Browser.opera) {
layer.bringToFront();
}
}
You can use L.GeoJSON's eachLayer method to iterate over the layers and then use highlightFeature method on the current layer and resetHighlight method on the previous layer (if any).
Remove current interaction:
function onEachFeature(feature, layer) {
layer.on({
//mouseover: highlightFeature,
//mouseout: resetHighlight,
//click: zoomToFeature
});
}
Add iterator:
// Variables for storing currently highlighted feature and delay amount
var highlight, delay = 0;
// Iterate over each layer in the geojsonlayer
geojson.eachLayer(function (layer) {
// Mimick event object because highlightFeature and resetHighlight
// expect an object with the layer as target property
layer = {'target': layer};
// Up the delay amount
delay = delay + 3000;
setTimeout(function() {
// Check if there is a highlight, if so reset
if (highlight) {
resetHighlight(highlight);
}
// Highlight current and store
highlightFeature(layer);
highlight = layer;
}, delay);
});