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...