JavaScript
var dataC = {
"countries": ["VE","CO","CL"]
},
colors = ["#b8f8f8", "#6fe8e8", "#12baba", "#288f8f", "#0eb894",
"#62d1ba", "#56d5f3", "#76b9c8", "#0c9cbd", "#27869d",
"#054c5d", "#4a7d89", "#0082ff", "#96c3ee", "#6c97c2",
"#0a5dad", "#355d85", "#04315c", "#0a1e31", "#0a0e31",
"#848dd8", "#2238f5", "#767dba", "#212e9c", "#030e63",
"#323a7d", "#a481f7", "#581ce7", "#6248a0", "#311a67",
"#c885ef", "#9901f0", "#895aa5", "#451462", "#28043d",
"#acf7dd", "#51f3ba", "#00ffa5", "#63a58e", "#19ac79"];
var countryData = []; //por cada país se setea el color y valor
$.each(dataC.countries, function() {
countryData[this] = colors[Math.floor(Math.random()*colors.length)];
});
function create_map(){
$('#south-america-map').empty();
map = new jvm.Map({
container: $('#south-america-map'),
map: 'south_america_mill',
backgroundColor: "",
series: {
regions: [{
values: countryData, //se carga la data
attribute: 'fill',
normalizeFunction: 'polynomial'
}]
},
regionsSelectable : true,
regionStyle : {
initial: {
fill: 'white',
"fill-opacity": 1,
stroke: 'black',
"stroke-width": 0.25,
"stroke-opacity": 1
},
hover: {
"fill-opacity": 0.8,
cursor: 'pointer'
},
selected: {
},
selectedHover: {
}
},
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();
}
});
}
create_map();
/* */