使用动态值的小叶脉络图

Question

I am doing a choropleth map using leaflet and JSON data. I got a clean tutorial in leaflet site. In that tutorial the used us-states.js JSON file where the choropleth was based on the feature.properties.density feature of the JSON if I am not wrong. If we see the JS file we can found there is a field called "ID" which is state id. I have a database where I have 5 different categories of data based on state ID. Categories are population, density, male_population, female_population, literacy_rate. I am calling those data through ajax and get a GeoJSON data state-wise as follows (Its a dummy data).

[{"state_id":"01","population":"123456","density":"1234","male_pop":"65432","female_pop":"57421","literacy_rate":"98"}]
...
[{"state_id":"50","population":"123456","density":"1234","male_pop":"65432","female_pop":"57421","literacy_rate":"98"}]

I want to integrate this data as choropleth value. when I call on literacy function the variation of color will be based on literacy_rate data. I can make the changes in getcolor function category wise.

Thanks

Answer 1

I would recommend using Leaflet Data Visualization Framework (DVF) plugin, located here . This plugin contains a set of Layers, (such as a Choropleth layer) and a set of functions to help color-code your data.

The example located here will demonstrate the DVF Choropleth Data layer.

Using DVF, you can create a color function to create your scaling color values. For example, this function will generate a function from yellow to red. The point values contain the range of values, and the HSL Hue.

var yellowToRed = new L.HSLHueFunction(new L.Point(50, 60), new L.Point(100, 0));

DVF contains a L.ChoroplethDataLayer layer that will accept your GeoJSON, and your color function, and will generate the layer for you.

var layer = new L.ChoroplethDataLayer(geoJSON, {
    // For the full options, see the documentation
    displayOptions: {
        // The display will be colored by your 'density' property in your GeoJSON. This accesses the feature object directory, so the 'properties' prefix is required if you're going to access a GeoJSON property on your data.
        'properties.density': {
            // A legend will automatically be generated for you. You can add this as a control. This displayName property will be the title for this layer's legend.
            displayName: 'Density',
            color: yellowToRed
        }
    };
});

This is just a simple example. For your data, it might look slightly different. Go through the DVF documentation and samples and you'll find what's right for you.