Jvectormap выделить несколько стран
Я сейчас пользуюсьJvectorMap и пытаясь выделить несколько стран при наведении курсора на текст, я дошел до того, что если я наведу курсор на слово «Африка», он выделит всю карту, как бы я отфильтровал его, чтобы выделить только Африку, если навести курсор на контент Название Африки.
В настоящее время я создаю список континентов, используяjQuery.each
и я возвращаюсьcontinentCodes
, который содержит все коды стран (ZA, US) с назначенным им цветом ... Я попытался сделать следующее:
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);
}
});
});
но потом я повторяю каждое утверждение и не могу получить динамические континенты.
ВотJSFIDDLE
Итак, вот 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 += '<a id="+i+" class="countryLink">'+val.name+'</a>';
continentList += '<a id="+val.continent+" class="continentLink">'+val.continent+'</a>';
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();
});
и HTML: