Toggling data source in Chloropeth map with Leaflet

Question

I'm starting with the Choropleth map example from Leaflet. (http://leafletjs.com/examples/choropleth/)

I have a very large geoJSON file (all US counties), containing data points over time. To match the example cited, let's say the data series is population density in 1980, 1990, etc. I would like to map all of this data. An easy solution would be to create a separate layer for each decade, but the file would take too long to load. I'm hoping for a solution with one geoJSON file.

var statesData = {"type":"FeatureCollection","features":[
{"type":"Feature","id":"01","properties": {"name":"Alabama","density2000":94.65, "density1990":90.00, "density1980":80.000},"geometry":    {"type":"Polygon","coordinates":[[[-87.359296,35.00118]

I plan to have radio buttons at the top of the map where the user can select which decade he wishes to see on the map, using an onclick event function.

The code to update the information text box on the upper right hand corner of the map is here:

info.onAdd = function (map) {
    this._div = L.DomUtil.create('div', 'info');
    this.update();
    return this._div;
};

info.update = function (props) {
    this._div.innerHTML = '<h4>US Population Density</h4>' +  (props ?
        '<b>' + props.name + '</b><br />' + props.density + ' people / mi<sup>2</sup>'
        : 'Hover over a state');
};

info.addTo(map);

This function is called when the user hovers over the state here:

function highlightFeature(e) {
    var layer = e.target;

    layer.setStyle({
        weight: 5,
        color: '#666',
        dashArray: '',
        fillOpacity: 0.7
    });

    if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
        layer.bringToFront();
    }

    info.update(layer.feature.properties);
}

And when the map is initially created...

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

Basically, I want the props.density to change to props.density1980 or props.density1990 based on what the user selects. This sounds simple conceptually - assign a variable based what the user selects, and use "if" statements accordingly. I'm having trouble coding this though - I think I'm getting mixed up with the onClick procedures.

Answer 1

Overall, I would need to see a more complete example be more specific, but something like this may help you get started (uses jQuery):

html

<fieldset class="checkbox">
    <input type="radio" name="density" value="1980" id="1980">
    <label for="1980">1980</label>

    <input type="radio" name="density" value="1990" id="1990">
    <label for="1990">1990</label>
</fieldset>

javascript

$( document ).ready(function() {
    $('fieldset.checkbox input[type="radio"]').on('change', function() {
        console.log('You selected: ' + $(this).val() );
        // do something with the value here - e.g. 
        geojson.eachLayer(function(layer) {
            // change the style of each layer in the geojson based on selected density
            layer.setStyle() // etc.
        })
    });
});