Leaflet - Interactive choropleth map over time
<p>I have data of, say, density over 30 districts from 2000 to 2010.
I'd like to make an interactive choropleth map for each year and then either use a slider (ideally) or a radio button to select between years.</p>

<p>I can get interactivity on the first year, but NOT on the layers for other years.
You can see a working <a href="https://playground-leaflet.rhcloud.com/gafa/edit?html,output" rel="nofollow noreferrer">example here</a>, but let me put some details below:</p>

<p>For simplicity, consider just two years. <code>blocks1995</code> has the non-overlapping polygons BlockA and BlockB (the two districts) and <code>blocks1996</code> has the same blocks. They have a property called <code>density</code> that produces the choropleth:</p>

<pre><code>var blocks1995 = {
    "type": "FeatureCollection",
    "crs": {
        "type": "name",
        "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" }
    },
    "features": [{
        "type": "Feature",
        "properties": { "time": 1995, "density": 3.1, "nameB": "BlockA" },
        "geometry": {
            "type": "Polygon",
            "coordinates": [[[50.0, 29.0],[50.0, 29.99],[50.51, 29.99],[50.0, 29.0]]]
        }
    }, {
        "type": "Feature",
        "properties": { "time": 1995, "density": 1.1, "nameB": "BlockB" },
        "geometry": {
            "type": "Polygon",
            "coordinates": [[[50.01, 30.0],[50.52, 30.0],[50.52, 30.5]]]
        }
    }]
};

var blocks1996 = {
    "type": "FeatureCollection",
    "crs": {
        "type": "name",
        "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" }
    },
    "features": [{
        "type": "Feature",
        "properties": {"year": 1996, "density": 2.2, "name": "BlockA" },
        "geometry": {
            "type": "Polygon",
            "coordinates": [[[50.0, 29.0],[50.0, 29.99],[50.51, 29.99]]]
        }
    }, {
        "type": "Feature",
        "properties": {"year": 1996,"density": 1.2,"name": "BlockB"},
        "geometry": {
            "type": "Polygon",
            "coordinates": [[[50.01, 30.0],[50.52, 30.0],[50.52, 30.5]]]
        }
    }]
};
</code></pre>

<p>I've tried adding them to an  <code>OverlayLayer</code></p>

<pre><code>var blocks1995Layer = L.layerGroup([ L.geoJson(blocks1995)]),
    blocks1996Layer = L.layerGroup([ L.geoJson(blocks1996)]);


var overlayMaps = {
    "Blocks 1995": blocks1995Layer,
    "Blocks 1996": blocks1996Layer
};

var map = new L.map('map', {layers:[blocks1995Layer]})
    .setView([29, 50], 7);
</code></pre>

<p>I put the boilerplate interactivity code found in this <a href="http://leafletjs.com/examples/choropleth/" rel="nofollow noreferrer">Leaflet interactive choropleth tutorial</a> and then I add back to the map:</p>

<pre><code>geojson = L.geoJson(blocks1995, {
    style: density_style,
    onEachFeature: addToFeature
}).addTo(map);

L.control.layers(null, overlayMaps).addTo(map);
</code></pre>

<p>The problem is I'm adding interactivity to <code>blocks1995</code> only, but I haven't been able to add it to <code>overlayMaps</code>.</p>

<p>I'm OK using a Leaflet plug-in (I tried TimeSlider but also couldn't figure it out).</p>

<p>Another possibility is to combine the two <code>block1995</code>and <code>block1996</code> variables into one with an extra feature <code>year</code> or <code>time</code> is that makes things easier. The idea would be for Leaflet to query by time (say, when a slider moves) and produce the interactive choropleth per year.</p>

<p>Thanks!</p>