1

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

  • For such programming questions, you may have quicker support on Stack Overflow. – ghybs Jan 9 '16 at 5:29
  • @ghybs Can I move the question to SO or do I re-ask it? – ChrisJ Jan 10 '16 at 20:13
  • If the below answer does not work for you, feel free to move it to SO. If you cannot, simply re-ask on SO. – ghybs Jan 11 '16 at 3:21
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.

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.