Resaltar un país específico en un mapa del mundo

Question

Estoy utilizando leaflet para mostrar una lista de nombres de países en un panel lateral. También los estoy mostrando resaltados en un mapa del mundo.

Cuando hago clic en un nombre en el panel lateral, quiero cambiar el color del país asociado en el mapa.

Aquí hay un fragmento de mi código:

MOSTRAR LA LISTA DE NOMBRES DE PAÍSES EN EL PANEL LATERAL

$('#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  
}

RELLENO DE COLOR PARA EL PAÍS ELEGIDO

function getColor(d) {  
cntryIds.forEach(function(value){  
    //alert('index: ' + index);  
    alert('D is ' + d);  
    alert(value);  
    return d == value ? 'green' :  
                        'orange';  
    });  
}

FUNCIÓN DE ESTILO LLAMADA CUANDO SE HACE CLIC EN EL NOMBRE DEL PAÍS EN EL PANEL LATERAL

function newstyle(value) {
    //alert('1 ' + value);
    return {
        fillColor: getColor(value),
        weight: 2,
        opacity: 1,
        color: 'white',
        dashArray: '3',
        fillOpacity: 0.7
    };
}

EVENTO DE CLIC DEL NOMBRE DEL PAÍS EN EL PANEL LATERAL

$(".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));
    });
});

Estoy intentando cambiar la opción fillColor en la función newstyle a través de la función getColor. Cualquier ayuda o sugerencia es muy asociada...

Answer 1

La forma de implementar el evento "click", así como el newstyle y getColor las funciones parecen mucho más complicadas de lo necesario.

Me parece que su getColor no devuelve ningún valor: ejecuta una función anónima para cada elemento de cntryIds matriz. Esa función anónima devuelve un valor, pero no se utiliza dentro de getColor que al final no devuelve nada. Por lo tanto, el fillColor la propiedad es undefined en el objeto de estilo devuelto por su newstyle función.

Además, añade todo su featureCollection como una nueva capa GeoJSON en cada clic del nombre del país.

Demostración de la funcionalidad de resaltar la capa del país cuando se hace clic en su nombre en una lista: http://plnkr.co/edit/PNsZc9JxXuzhxTAn6LgC?p=preview

La parte principal de ese código (usando jQuery como parece que haces):

$('#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);
}

Por supuesto, se podría cambiar el estilo e incluso tener un color específico por país.