I am achieving a hover state per continent through:
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);
});
Is there anyway to shorten this? so that i don't have to have multiple each statements? really trying to learn to write efficient code.
Here's the full code if it helps:
JSFIDDLE http://jsfiddle.net/dawidvdh/EpGep/10/
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
});
Any Help Greatly Appreciated.