Leaflet foreach feature auto trigger mouseover function

Question

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();
  }
}

iH8 · Accepted Answer · 2015-10-06T12:12:39.050

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);
});

Example: http://plnkr.co/edit/QD2uHv?p=preview

hey thanks for your reply, but there is a slight thing that I want to highlight one state at a time similar to the example in leaflet site where you hover and relevant data comes in info tab. I just want to emulate all states but one a time. — jawadxiv, Oct 06 '15 at 11:10
Ok, understood, sorry for the misunderstanding, i'll edit my answer. — iH8, Oct 06 '15 at 12:12

Leaflet foreach feature auto trigger mouseover function

1 Answers1