I am using leaflet to display a list of country names in a side panel. I am also showing them highlighted on a world map.
When I click on a name in the side panel, I want to change the color of the associated country on the map.
Here is a snippet of my code:
DISPLAY LIST OF COUNTRY NAMES IN SIDE PANEL
$('#sidecol').empty();
$('#sidecol').html(COUNTRIES)
for (i=0; i < featureCollection.features.length; i++){
//console.log(featureCollection.features[i].properties.NAME);
$('#sidecol').append("div class = cntrys id = cntry_" + i + 'center><p class="title"><a href = #>' + featureCollection.features[i].properties.NAME + '/a>/center>br>')
cntryIds.push(featureCollection.features[i].id) //country id
}
COLOR FILL FOR COUNTRY CHOSEN
function getColor(d) {
cntryIds.forEach(function(value){
//alert('index: ' + index);
alert('D is ' + d);
alert(value);
return d == value ? 'green' :
'orange';
});
}
STYLE FUNCTION CALLED WHEN COUNTRY NAME IS CLICKED ON IN SIDE PANEL
function newstyle(value) {
//alert('1 ' + value);
return {
fillColor: getColor(value),
weight: 2,
opacity: 1,
color: 'white',
dashArray: '3',
fillOpacity: 0.7
};
}
CLICK EVENT OF COUNTRY NAME IN SIDE PANEL
$(".cntrys").each(function(index, value) {
//console.log('cntrys' + index + ': ' + $(this).attr('id') + ' xxx: ' + cntryIds[index]);
$(this).click(function(){
//alert($(this).attr('id') + " country id: " + cntryIds[index]);
countries = L.geoJson(featureCollection,
{
style: newstyle(cntryIds[index]),
onEachFeature: onEachFeature
}).addTo(map);
//console.log(getData());
map.fitBounds(countries.getBounds().pad(0.5));
});
});
I am trying to change the fillColor option in the newstyle function via the getColor function. Any assistance or suggestion is greatly associated…
Best Answer
The way you implement the "click" event, as well as the
newstyle
andgetColor
functions look much more complicated than necessary.It seems to me that your
getColor
function does not return any value: it executes an anonymous function for each item incntryIds
array. That anonymous function does return a value, but it is not used withingetColor
, which does not return anything in the end. Therefore thefillColor
property isundefined
in the style object returned by yournewstyle
function.Furthermore, you add your entire
featureCollection
as a new GeoJSON layer on each country name click.Demo of the country layer highlighting functionality when its name is clicked in a list: http://plnkr.co/edit/PNsZc9JxXuzhxTAn6LgC?p=preview
The main part of that code (using jQuery like you seem to do):
Of course you could change the styling and even have a specific colour per country.