I am building a map using leaflet.
My data source looks something like this:
var districts =
{"type": "FeatureCollection", "features":
[
{"type":"Feature",
"geometry":
{"type":"MultiPolygon","coordinates":[[[ [-75.228404,40.084708],[-75.2286,40.084875],[-75.230501,40.086024]//...
]]]
},
"properties":{"dist_num":"8", "gender":"M", "party":"democrat"}},
{"type":"Feature",
"geometry":
{"type":"MultiPolygon","coordinates":[[[ [-75.227985,40.084356],[-75.2281,40.0843],[-75.228241,40.084198],//...
]]]
},
"properties":{"dist_num":"5", "gender":"F", "party":"republican"}}, //....
];
I've got a working map that shows districts by party (democrat/republican) using this javascript:
var map = L.map('map').setView([39.955, -75.1647], 11);
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
maxZoom: 18
}).addTo(map);
var geojson;
function getColor(d) {
return d == 'Democrat' ? 'blue' :
d == 'Republican' ? 'red':
'#FFEDA0';
}
function style(feature) {
return {
fillColor: getColor(feature.properties.party),
weight: 2,
opacity: 1,
color: 'white',
dashArray: '3',
fillOpacity: 0.3
};
}
L.geoJson(districts, {style: style}).addTo(map);
Now I want to add a control where the user can switch from the fillColor
in the function style
from political party to display by gender. Does Leaflet have a built in method to do this? Or do I need to build my own in HTML/Javascript/Jquery?