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) {
           d > 900000  ? '#762A83' :
           d > 750000  ? '#af8dc3' :
           d > 600000  ? '#e7d4e8' :
           d > 450000  ? '#f7f7f7' :
           d > 300000  ? '#d9f0d3' :
           d > 150000  ? '#7fbf7b' :

function style(feature) {
    return {
        fillColor: getColor(feature.properties.greenhousegaz_1990),
        weight: 2,
        opacity: 1,
        color: 'white',
        dashArray: '3',
        fillOpacity: 0.7

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

enter image description here

| improve this answer | |
  • Thanks, I updated my question. now I have a problem with my data column. – Ayogo Sep 28 '17 at 15:16
  • Can you add a screen shot of your data column? I'm interested in the values and column property. Also, make sure the data column you are interested in displaying is being input as a parameter. e.g.us-states.js – whyzar Sep 28 '17 at 15:25
  • imgur.com/a/dYY8p the data was in an csv file, and I did a joint with the continent shapefile based on countries codes. I'm guessing the spacing is causing the problem. – Ayogo Sep 28 '17 at 15:27
  • That might be the issue, keep in mind, the tutorial has place the data in GeoJSON data format. – whyzar Sep 28 '17 at 15:38
  • I removed the spaces from the column title, the data is in GeoJSON, the input parameters are correct as I tested with the ID column to make sure. any idea where is the problem ? – Ayogo Sep 28 '17 at 15:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.