How do I modify features during runtime, in a GeoJSON feature group on Leaflet?

Question

I have added some GeoJSON to my Leaflet powered map as below. (Altered version)

var array_of_layers = L.layerGroup([]);
var styleholder = [];

var belgium_style = {color: "#d3e46f"};
var bosnia_style = {color: "#f3c1d3"};
var (...)

function styling(name, geoname, color){
    this.numid = count;
    styleholder[count] = this;

    this.name = name;
    this.geoname = geoname; //the geojson filename, just in case.
    this.label = name;
    this.color = color;
    this.opacity = 1;
    this.stroke = false;
    this.fillOpacity = 1;
    this.fillColor = color;

    count++;
}

var belgium_style = new styling("Belgium", "belgium", "#52EB8D");
var bosnia_style = new styling("Bosnia", "bosnia", "#EB9752");
(...)

var everything = L.geoJson(myfile, {
    onEachFeature: function(feature){
        array_of_layers.addLayer(feature);
    },
    style: function(feature){
            switch(feature.properties.name){
            case "belgium": return belgium_style; break;
            case "bosnia": return bosnia_style; break;
            case "denmark": return denmark_style; break;
            case "great_britain": return britain_style; break;
            case "greece": return greece_style; break;
            case "italy": return italy_style; break;
            case "serbia": return serbia_style; break;
            case "spain": return spain_style; break;
            }
    }

});

So the next thing I need to do is, for instance, make a country become blue and all the others gray, when I mouse over it. And, make that possible as well by a function, that I can call whenever I want, regardless of mouse position.

Therefore, during runtime, how do I change the color of any country as I wish? In other words, what is the correct syntax for re-defining the style function for a particular feature?

I have tried to iterate over the styleholder array with a for(var x in styleholder) loop until I get to find the style with the name I want to make blue. By looking at the debugging console, I can tell that I get to find the country, but there's no use changing the color value of a country once it's been created on the map. So the color doesn't change.

The code below sums up what I'm talking about:

var change_color_to_blue = function(country){

for(var a in styleholder){
   if (a.geoname === country){
       a.color = "#0000FF";
       a.fillColor = "#0000FF";
   }
}

change_color_to_blue("belgium");

You see, although it runs without an error, the color remains the same.

The same thing for a mousing-over feature, could be possibly something like this:

everything.on('mouseover', function(e){

var moused_over_country = e.layer;
moused_over_country.color = "#0000FF"; //this is not how it's done

MagicallyMakeAllOtherLayersGray();

refreshgeoJson(); //that does not exist.
refreshMap();     //this neither, most probably.

});

Even this works, and the target country gets blue, how do I make the rest gray? Is there a way to iterate over every feature in geoJson and reset every style function respectively?

You should be able to change the colour using the setStyle method on the feature. See here: http://stackoverflow.com/questions/15606027/dynamically-change-the-color-of-a-polygon-in-leaflet — Snorfalorpagus, Oct 26 '13 at 16:47
Thanks, the 'setStyle' function will be a lot useful. But in the example you provided, L.circle is already a single object. So how do I refer to a single feature out of a whole group of GeoJSON objects? — Doruk Karınca, Oct 26 '13 at 17:07
Can you provide a bit more background on this? There's a highlight function that you can use for each feature. Does this sound like something that you're trying to show? Meaning that if you hover over a feature it will be highlighted to that color scheme. — Geoffrey West, Oct 25 '13 at 20:43
If you want something to happen on mouseover or mouse out (whatever it's called) you can follow these instructions: http://gis.stackexchange.com/questions/31951/how-to-show-a-popup-on-mouse-over-not-on-click
See here for more: http://leafletjs.com/reference.html#map-mouseover — Alex Leith, Jan 07 '14 at 03:46

score 1 · Answer 1 · edited Dec 01 '13 at 14:46

I have written down a small code to modify geojson feature style on runtime using leaflet. you can try it on jsFiddle or use the following code test locally.

I hope it will help.

Here is the code:

<!DOCTYPE html>
<html>
<head>
<title>Leaflet Coloring Geojson Features</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://leafletjs.com/dist/leaflet.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="../dist/leaflet.ie.css" /><![endif]-->
<style>
#map {
    width: 800px;
    height: 500px;
}
.info {
    padding: 6px 8px;
    font: 14px/16px Arial, Helvetica, sans-serif;
    background: white;
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
}
.info h4 {
    margin: 0 0 5px;
    color: #777;
}
.legend {
    text-align: left;
    line-height: 18px;
    color: #555;
}
.legend i {
    width: 18px;
    height: 18px;
    float: left;
    margin-right: 8px;
    opacity: 0.7;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
<script src="http://leafletjs.com/dist/leaflet.js"></script> 
<script type="text/javascript" src="http://leafletjs.com/examples/us-states.js"></script> 
<script type="text/javascript">
    $(document).ready(function () {
        init_map();
        init_geojson();
        $("#btn").on('click', function () {
            var stateName = $('#statename').val();
            console.log(stateName);
            init_geojson(stateName);
        });
    });
    var map, geojson, sn;

    function init_map() {
        map = L.map('map').setView([37.8, -96], 4);
        L.tileLayer('http://{s}.tile.cloudmade.com/{key}/22677/256/{z}/{x}/{y}.png', {
            attribution: 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2012 CloudMade',
            key: 'BC9A493B41014CAABB98F0471D759707'
        }).addTo(map);
        geojson = L.geoJson(statesData, {
            style: style
            //onEachFeature: onEachFeature,
        }).addTo(map);
    }

    function init_geojson(n) {
        console.log(geojson.options);
        map.removeLayer(geojson);
        if (n != "") {
            sn = n;
            console.log(sn);
            geojson = L.geoJson(statesData, {
                style: style
            }).addTo(map);
        }
    }

    function style(feature) {
        console.log(sn);
        if (sn == feature.properties.name) {
            return {
                weight: 2,
                opacity: 1,
                color: 'white',
                dashArray: '3',
                fillOpacity: 0.3,
                fillColor: '#ff0000'
            };
        } else {
            return {
                weight: 2,
                opacity: 1,
                color: 'white',
                dashArray: '3',
                fillOpacity: 0.3,
                fillColor: '#666666'
            };
        }
    }
</script>
<input type="text" id="statename" value="Alaska">
<input type="button" id="btn" value="Set Color"/>
</body>
</html>

score 0 · Answer 2 · answered Oct 27 '13 at 18:30

0

The getColor function should work. See the example below. Good Luck!

enter image description here

answered Oct 27 '13 at 18:30

Geoffrey West

2,548
6
28
49

4

It might be helpful to post the actual code, instead of posting a screenshot of the code. – Devdatta Tengshe Oct 28 '13 at 03:00

How do I modify features during runtime, in a GeoJSON feature group on Leaflet?

2 Answers2