in jvectorMap, fixed labels when selected a region

Question

I'm having an issue with js vector map, the labels of the names of the countries, don't disappear of the screen after selecting a country.

I'm not sure this is the best way to do it, perhaps there is a better way?

You can find the code here : http://jsfiddle.net/RumbosN/bdsywqh7/#&togetherjs=oICF1kJmLP 1234

Answer 1

You should change:

 onRegionSelected : function(e,code,isSelected,selectedRegions){
  var object = $('#paises');
  var color;

  if(countryData[code]){
    //quitamos el elemento de los span
    $('#'+code).remove();
    delete countryData[code];
  }
  else{
    object.append('<span id="'+code+'"> '+code+'</span>');
    color = colors[Math.floor(Math.random()*colors.length)]
    countryData[code] = color;
  };
  create_map();  

to:

onRegionSelected : function(e,code,isSelected,selectedRegions){
  var object = $('#paises');
  var color;

  if(countryData[code]){
    //quitamos el elemento de los span
    $('#'+code).remove();
    delete countryData[code];
  }
  else{
    object.append('<span id="'+code+'"> '+code+'</span>');
    color = colors[Math.floor(Math.random()*colors.length)]
    countryData[code] = color;
  };

  current_tips = $('.jvectormap-tip:visible')
  current_tips.remove()

  create_map();  
} 

}); }