0

I'm trying to add more components in the interactivity in this example Leaflet choropleth map. I want to show the name of the state, a total value (which is the value used for the colors choropleth) + the total value divided into two values (e.g. Population total, Male population, Female population).

The example: https://leafletjs.com/examples/choropleth/example.html

I can't seem to get other values than "name" and "density" in the .js file to display on the map, it only appears as "undefined" when I try to add a new value:

info.update = function (props) {
        this._div.innerHTML = '<h4>Population US</h4>' +  (props ?
            '<b>' + props.name + '</b><br />' + 'Total population: ' props.density + '</b><br />' + 'Male population: ' + props.pop_male
            : 'Hover over a state');
    };

Any suggestions?

LoCaTo
  • 25
  • 7

1 Answers1

0

If you're using the same data as used in the example, then statesData is being loaded from here: statesData.js

In which case, the only properties available are 'name' and 'density'. If you want to display other information then you'll need to provide your own statesData featureCollection with the extra properties in it.

katsho
  • 303
  • 1
  • 4
  • Thanks. I'm using a similar data set as in the example, only with European countries (otherwise it's the same properties). I've tried to add extra properties in my statesData featureCollection without any luck. How would I do that? – LoCaTo Jul 07 '18 at 10:55
  • Can you give an example of the json you're using, and the code you're loading it with? – katsho Jul 10 '18 at 09:16