Podkreślenie Jvectormap Wiele krajów

Question

Obecnie używam JvectorMap i próbuję podświetlić wiele krajów, gdy unosimy się nad tekstem, dotarłem do punktu, w którym, gdy ustawię kursor nad słowem Afryka, podświetli całą mapę, w jaki sposób mogę filtrować aby podkreślić tylko Afrykę, gdy poruszam się nad nazwą treści w Afryce.

obecnie tworzę listę kontynentach stosując jQuery.each i wracam continentCodes, który zawiera wszystkie kody kraju (ZA, US) kolorem przypisanym do nich ... Próbowałem w następujący sposób:

jQuery('.continentLink').hover(function() { 
jQuery.each(mapObject.mapData.paths, function(i, val) { 
    if (val.continent == "africa"){ 
    continentCodes[i] = "#3e9d01"; 
    mapObject.series.regions[0].setValues(continentCodes); 
    } 
}); 
}); 

ale potem powtarzam każde stwierdzenie i nie mogę uzyskać dynamicznych kontynentów.

Oto JSFIDDLE

Więc Herezje JS:

jQuery(function(){ 
//JSON MARKERS 
var markers = [{latLng: [-34.033333300000000000, 23.066666700000040000], name: 'Knysna', info:'its got a lake...'}, 
    {latLng: [-33.924868500000000000, 18.424055299999963000], name: 'Cape Town', info:'its nice...'}]; 
//JSON MARKERS 

//JSON STYLING 
var markerStyle = {initial: {fill: '#F8E23B',stroke: '#383f47'}}; 
var regionStyling = {initial: {fill: '#128da7'},hover: {fill: "#A0D1DC"}}; 
//JSON STYLING 

//GLOBAL VARIABLES 
var countryList = "", continentList = ""; 
var continentCodes = {}; 
//GLOBAL VARIABLES 

//INIT MAP PLUGIN 
jQuery('#world-map').vectorMap({ 
    map: 'world_mill_en', 
    normalizeFunction: 'polynomial', 
    markerStyle:markerStyle, 
    regionStyle:regionStyling, 
    backgroundColor: '#383f47', 
    series: {regions: [{values: {},attribute: 'fill'}]}, 
    markers: markers, 
    onRegionClick:function (event, code){ 
     jQuery('#world-map').vectorMap('set', 'focus', code); 
    }, 
    onMarkerClick: function(events, index){ 
     jQuery('#infobox').html(markers[index].name); 
    } 
}); 
//INIT MAP PLUGIN 

var mapObject = jQuery('#world-map').vectorMap('get', 'mapObject'); 

//LIST COUNTRIES & CONTINENTS 
function createList() { 

    //Get list 
    jQuery.each(mapObject.mapData.paths, function(i, val) { 
     countryList += '<li><a id='+i+' class="countryLink">'+val.name+'</a></li>'; 
     continentList += '<li><a id='+val.continent+' class="continentLink">'+val.continent+'</a></li>'; 

     continentCodes[i] = "#3e9d01"; 
     return continentCodes; 
    }); 
    //display continents 
    jQuery('#continentList').html(continentList); 

    //display countries 
    jQuery('#countryList').html(countryList); 

    //Create Hover Function 
    jQuery('.continentLink').hover(function() { 
     mapObject.series.regions[0].setValues(continentCodes); 
     console.log(continentCodes); 
    }); 

    //Create ZOOM Function 
    jQuery('.countryLink').click(function(e) { 
     jQuery('#world-map').vectorMap('set', 'focus', this.id); 
    }); 
} 

createList(); 
}); 

i HTML:

<div id="world-map" style="width: 960px; height: 400px"></div> 
    <div id="infobox"></div> 
     <ul id="continentList"></ul> 
     <ul id="countryList"></ul> 

Answer 1

I przekształcają swój kod, proszę zobaczyć JSFIDDLE i tutaj jest skorygowany javascript :

jQuery(function(){ 
//JSON MARKERS 
var markers = [{latLng: [-34.033333300000000000, 23.066666700000040000], name: 'Knysna', info:'its got a lake...'}, 
    {latLng: [-33.924868500000000000, 18.424055299999963000], name: 'Cape Town', info:'its nice...'}]; 
//JSON MARKERS 

//JSON STYLING 
var markerStyle = {initial: {fill: '#F8E23B',stroke: '#383f47'}}; 
var regionStyling = {initial: {fill: '#128da7'},hover: {fill: "#A0D1DC"}}; 
//JSON STYLING 

//GLOBAL VARIABLES 
var countryList = "", continentList = ""; 
var resultsDup = {}; 
var continentCodes = {}; 
//GLOBAL VARIABLES 

//INIT MAP PLUGIN 
jQuery('#world-map').vectorMap({ 
    map: 'world_mill_en', 
    normalizeFunction: 'polynomial', 
    markerStyle:markerStyle, 
    regionStyle:regionStyling, 
    backgroundColor: '#383f47', 
    series: {regions: [{values: {},attribute: 'fill'}]}, 
    markers: markers, 
    onRegionClick:function (event, code){ 
     jQuery('#world-map').vectorMap('set', 'focus', code); 
    }, 
    onMarkerClick: function(events, index){ 
     jQuery('#infobox').html(markers[index].name); 
    } 
}); 
//INIT MAP PLUGIN 

var mapObject = jQuery('#world-map').vectorMap('get', 'mapObject'); 

//LIST COUNTRIES & CONTINENTS 
jQuery.each(mapObject.mapData.paths, function(i, val) { 

    countryList += '<li><a id='+i+' class="countryLink">'+val.name+'</a></li>'; 

    //remove duplicate continents 
    var resultsList = val.continent; 
    if (resultsDup[resultsList]) { 
     jQuery(this).remove(); 
    }else{ 
     resultsDup[resultsList] = true; 
     continentList += '<li><a id='+val.continent+' class="continentLink">'+val.continent+'</a></li>'; 
    } 
    //remove duplicate continents 


}); 
//display countries 
jQuery('#countryList').html(countryList); 

//display continents 
jQuery('#continentList').html(continentList); 

var continentId ="" 
function getID(continentId){ 
    jQuery.each(mapObject.mapData.paths, function(i, val) { 
      if (val.continent == continentId){ 
       continentCodes[i] = "#3e9d01"; 
       mapObject.series.regions[0].setValues(continentCodes); 
      } 
    }); 
} 

function removeGetID(continentId){ 
    jQuery.each(mapObject.mapData.paths, function(i, val) { 
      if (val.continent == continentId){ 
       continentCodes[i] = "#128da7"; 
       mapObject.series.regions[0].setValues(continentCodes); 
      } 
    }); 
} 

//LIST COUNTRIES & CONTINENTS TEMP 
jQuery('.continentLink').hover(function(e) { 
    continentId = this.id; 
    getID(continentId); 
}, function(){ 
    removeGetID(continentId); 
}); 

//Zoom to Country Function 
jQuery('.countryLink').click(function(e) { 
    jQuery('#world-map').vectorMap('set', 'focus', this.id); 
}); 

//Continent Hover function 

}); 

Ciesz się: D