Leaflet: add extra argument to L.geoJson options
I am working on choropleth maps using Leaflet framework. I would like to have several separate layers over the course of several years, so I wrote this code (note that only the names "style2002" and "style2010" should be passed without any arguments):
population2002 = L.geoJson(regionData, {
style: style2002
});
population2010 = L.geoJson(regionData, {
style: style2010
});
there are "style" functions that color my vector polygons based on their attributes (whose names are prefixed with "Pop_" plus year):
function style2002(feature)
{
return {
fillColor: getColor(feature.properties.Pop_2002),
weight: 2,
opacity: 1,
color: 'white',
dashArray: '',
fillOpacity: 0.7
};
}
function style2010(feature)
{
return {
fillColor: getColor(feature.properties.Pop_2010),
weight: 2,
opacity: 1,
color: 'white',
dashArray: '',
fillOpacity: 0.7
};
};
As you can guess, I want to use one "stylish" function instead of separate functions for each year that I need. Something like:
function styleByYear(feature, year)
{
var property = 'feature.properties.Pop_';
property += year;
return {
fillColor: getColor(property),
weight: 2,
opacity: 1,
color: 'white',
dashArray: '',
fillOpacity: 0.7
};
}
But how do you pass the second argument to the style function? In the L.geoJson constructor, I only write the function name without any arguments, as you can see from the first code snippet! What should I do? And one more question: how is the first argument ('feature') passed to the layer constructor ??
source to share
What if you create a global variable:
var property = 'Pop_' + year
and edit your function like this (you should use brackets instead of dot notation):
function styleByYear(feature)
{
return {
fillColor: getColor(feature['properties'][property]),
weight: 2,
opacity: 1,
color: 'white',
dashArray: '',
fillOpacity: 0.7
};
}
I did something similar to what you are asking based on a choropleth tutorial similar to you. I have several buttons that change the style of the card for different dates.
source to share
You can try what is in the treatment tutorial in GeoJSON . Find the second section of code in the Options section. At first you would just add the usual style (i.e. the same stuff for both years). Example taken from this site with your specific code added:
geojsonlayer = L.geoJson(regionData, {
style: function(feature) {
var finalStyleObject = normalStyling(feature); //return the normal style object
switch (feature.properties) { //switch through the various years
case 'Pop_2002': {finalStyleObject.fillColor: "#ff0000"};
case 'Pop_2010': {finalStyleObject.fillColor: "#0000ff"};
}
return finalStyleObject;
}
});
function normalStyling(feature){
return {
weight: 2,
opacity: 1,
color: 'white',
dashArray: '',
fillOpacity: 0.7
};
}
source to share