Dépliant - Carte choroplèthe interactive dans le temps

Question

Je dispose de données concernant, par exemple, la densité de 30 districts entre 2000 et 2010. J'aimerais créer une carte choroplèthe interactive pour chaque année, puis utiliser un curseur (idéalement) ou un bouton radio pour passer d'une année à l'autre.

Je peux obtenir l'interactivité pour la première année, mais PAS pour les couches des autres années. Vous pouvez voir un exemple ici Mais permettez-moi d'apporter quelques précisions :

Pour simplifier, prenons seulement deux ans. blocks1995 a les polygones non superposés BlockA et BlockB (les deux districts) et blocks1996 a les mêmes blocs. Ils ont une propriété appelée density qui produit le choroplèthe :

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

J'ai essayé de les ajouter à un 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);

J'ai mis le code d'interactivité standard que l'on trouve dans le document suivant Dépliant didacticiel choroplèthe interactif puis je l'ajoute à la carte :

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

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

Le problème est que j'ajoute de l'interactivité à blocks1995 seulement, mais je n'ai pas réussi à l'ajouter à la rubrique overlayMaps .

J'utilise bien un plug-in Leaflet (j'ai essayé TimeSlider mais je n'ai pas réussi à le comprendre).

Une autre possibilité consiste à combiner les deux block1995 y block1996 en une seule avec une fonction supplémentaire year o time est de faciliter les choses. L'idée serait que Leaflet fasse des requêtes en fonction du temps (par exemple, lorsqu'un curseur est déplacé) et produise le choroplèthe interactif par année.

Merci de votre attention !

Answer 1

En fait, vous n'ajoutez pas de couches pour contrôler correctement. Actuellement, vous faites ceci

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

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

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

Essayez plutôt ceci

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

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

var overlayMaps =  {
    "Blocks 1995": geojson,
    "Blocks 1996": geojson1
};

Ici est un exemple de travail

Ici est un autre exemple où j'ai mis en place des boutons radio au lieu de cases à cocher en utilisant cette plugin

Édité

Conformément à votre commentaire, j'ai créé un exemple en utilisant cette plugin pour l'affichage des prospectus. Voici la partie du code.

//I've created 5 geojson layers, in order the slider to look appropriate.
geojson = L.geoJson(blocks1995, {
    style: density_style,
    onEachFeature: addToFeature,
    time: "1995" //this is for labeling, you may alter this value if required
});

geojson1 = L.geoJson(blocks1996, {
    style: density_style,
    onEachFeature: addToFeature,
    time: "1996"
});

geojson2 = L.geoJson(blocks1997, {
    style: density_style,
    onEachFeature: addToFeature,
    time: "1997"
});

geojson3 = L.geoJson(blocks1998, {
    style: density_style,
    onEachFeature: addToFeature,
    time: "1998"
});

geojson4 = L.geoJson(blocks1999, {
    style: density_style,
    onEachFeature: addToFeature,
    time: "1999"
});

//now add each geojson layer to a single layer group, as the slider take only one layer
var layerGroup = L.layerGroup([geojson, geojson1, geojson2, geojson3, geojson4 ]);

//initiate slider, follow = 1 means, show one feature at a time
var sliderControl = L.control.sliderControl({layer:layerGroup, follow: 1});
map.addControl(sliderControl);//add slider to map
sliderControl.startSlider();//starting slider

Ici est l'exemple de travail