title: Leaflet - Interactive choropleth map over time
body: <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>