I am building a map using leaflet.

My data source looks something like this:

var districts = 
{"type": "FeatureCollection", "features": 

{"type":"MultiPolygon","coordinates":[[[ [-75.228404,40.084708],[-75.2286,40.084875],[-75.230501,40.086024]//...
"properties":{"dist_num":"8", "gender":"M", "party":"democrat"}},

{"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 &copy; <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

var geojson;

function getColor(d) {
    return d == 'Democrat' ? 'blue' :
           d == 'Republican'  ? 'red':

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?


You can change your style function to accept another parameter, and use that to set your style. When the user wants to change the rendering, you just call .setStyle(feature, color). You will also need to create a function to define the colors for that dataset as well. For example, I'm using a function name of getGenderColor().


function style(feature, fillColor) {
    return {
        fillColor : fillColor,
var geojson = L.geoJson(districts, {style: function (f) {
    return style(f, getColor(f.properties.party));

$("#button-to-render").on('click', function () {
    geojson.setStyle(function (f) {
        return style(f, getGenderColor(f.properties.gender));

There are other ways to do this, but I think this example will work for what you need.

I created a simple example in jsfiddle: http://jsfiddle.net/TnX96/103/

| improve this answer | |
  • Thanks - this does almost what I want it to. In the end I'm going to have a few buttons on my map, to view by gender, party, age, race, etc. That part I've now got working. The problem is with the mouseout feature which calls resetStyle -- it resets to the original set style, not the button set style. I'm not that great with JS/Jquery so I'm not sure where to make that happen. (The mouseout question wasn't in my original sample b/c I wanted to keep that code simple but I do have it in my app.) – maneesha Jan 24 '15 at 20:12

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.