2
\$\begingroup\$

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 any way to shorten this so that I don't have to have multiple each statements? I'm really trying to learn to write efficient code.

Here's the full code if it helps: JSFIDDLE

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
});
Jamal
35.2k13 gold badges134 silver badges238 bronze badges
asked Apr 25, 2013 at 14:15
\$\endgroup\$

1 Answer 1

1
\$\begingroup\$

You are looking to remove the copy pasted code, to make it more DRY.

Beyond that, it seems that really whether you getID or removeGetID, you set a number of ID's and then update mapObject. Furthermore, it seems that you do not need to update mapObject within the loop, which is slow.

I would counter-propose

var helpfullyNamedConstant1 = '#3e9d01';
var helpfullyNamedConstant2 = '#128da7';
function setContinentCodes(continentId, continentCodesValue ){
 jQuery.each(mapObject.mapData.paths, function(i, val) {
 if (val.continent == continentId){
 continentCodes[i] = continentCodesValue ;
 }
 });
 mapObject.series.regions[0].setValues(continentCodes);
}
jQuery('.continentLink').hover(function(e) {
 setContinentCodes(this.id, helpfullyNamedConstant1);
}, function(){
 setContinentCodes(this.id, helpfullyNamedConstant2);
});
answered Jan 14, 2014 at 16:21
\$\endgroup\$

Your Answer

Draft saved
Draft discarded

Sign up or log in

Sign up using Google
Sign up using Email and Password

Post as a guest

Required, but never shown

Post as a guest

Required, but never shown

By clicking "Post Your Answer", you agree to our terms of service and acknowledge you have read our privacy policy.