Highlighting a specific country on a world map

Question

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

Answer 1

The way you implement the "click" event, as well as the newstyle and getColor 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 in cntryIds array. That anonymous function does return a value, but it is not used within getColor, which does not return anything in the end. Therefore the fillColor property is undefined in the style object returned by your newstyle 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):

$('#sidecol').empty();
var myGeojSonLayerGroup = L.geoJson(world, {
  onEachFeature: myOnEachFeature,
  style: myStyle
}).addTo(map);

$(".cntrys").click(function() {
  var item = $(this);
  console.log("clicked on item " + item.data("countryName"));
  myGeojSonLayerGroup.resetStyle(myGeojSonLayerGroup);
  item.data("countryLayer").setStyle({
    fillColor: "red",
    weight: 2,
    opacity: 1,
    color: 'white',
    dashArray: '3',
    fillOpacity: 0.7
  });
});

function myOnEachFeature(feature, layer) {
  var name = feature.properties.NAME;
  var item = $('<div class="cntrys"><p class="title">' + name + '</p></div>');
  item.data("countryLayer", layer);
  item.data("countryName", name);
  $('#sidecol').append(item);
}

Of course you could change the styling and even have a specific colour per country.