Leaflet - Интерактивная карта хороплет с течением времени

У меня есть данные, скажем, о плотности более 30 районов с 2000 по 2010 год. Я хотел бы сделать интерактивную картографическую карту для каждого года, а затем использовать ползунок (в идеале) или переключатель для выбора между годами.

Я могу получить интерактивность в первый год, но НЕ на слоях в другие годы. Здесь вы можете увидеть рабочий пример, но позвольте мне добавить некоторые детали. ниже:

Для простоты рассмотрим всего два года. blocks1995 имеет неперекрывающиеся многоугольники BlockA и BlockB (два района), а blocks1996 имеет одинаковые блоки. У них есть свойство под названием density, которое создает хороплет:

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

Я пробовал добавить их в OverlayLayer

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

Я помещаю шаблонный интерактивный код из этого интерактивного учебного пособия по раскадровке листов, а затем добавляю обратно на карту :

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

L.control.layers(null, overlayMaps).addTo(map);

Проблема в том, что я добавляю интерактивность только в blocks1995, но не могу добавить ее в overlayMaps.

Я в порядке, использую подключаемый модуль Leaflet (я пробовал TimeSlider, но также не мог понять).

Другая возможность - объединить две переменные block1995 и block1996 в одну с дополнительной функцией year или time, которая упрощает работу. Идея состоит в том, чтобы Leaflet запрашивал время (скажем, когда ползунок перемещается) и создавал интерактивную хороплету в год.

Спасибо!