Change the colors of polygons on a choropleth map with leaflet

I have data from different countries (=polygons) from 1990 to 2012 and depending on the data value I want to map the changes with a timeline enabling the user to visualize the changes (with colors) from 1990 all the way to 2012.

I am using leaflet for the first time, so a little more detailed answer would be great.

---

I got the shapefile to show on the map, but when I try to the style function it doesn't work (no colors). the column "greenhousegaz_1990" contains the data I want to show.

I tried with the ID column just to test and it worked fine, colors did show correctly and in range.

function getColor(d) {
    return
           d > 900000  ? '#762A83' :
           d > 750000  ? '#af8dc3' :
           d > 600000  ? '#e7d4e8' :
           d > 450000  ? '#f7f7f7' :
           d > 300000  ? '#d9f0d3' :
           d > 150000  ? '#7fbf7b' :

                         '#1B7837';
}



function style(feature) {
    return {
        fillColor: getColor(feature.properties.greenhousegaz_1990),
        weight: 2,
        opacity: 1,

        color: 'white',
        dashArray: '3',
        fillOpacity: 0.7
    };
}

Answer

I would recommend using the tutorial setup by leaflet Interactive Choropleth Map. It is very detailed and provides a step-by-step instructions.

You could follow along and would need to have a countries features in GeoJSON data which would allow for easy interaction with this tutorial.

Here is the example map interactively