Changing Region Colors in JVectorMap with a Button - jvectormap

Question

I'm new to jvectormap, but have found it to be awesome.
I have created a map with the following characteristics. When the map loads, about 30 countries have colors applied, either Red, Yellow or Green, based on some score associated with that country (like the percentage of the population that are Duran Duran fans). The rest of the countries are just grey. (There is some interactivity on the colored regions, like tooltips and clicks.) When the map is first created, there is a line at the end:
map.series.regions[0].setValues(getColors(currentColor);
and currentColor had previously been defined:
var currentColor = "[ALL]";
so that all of the colors (red, yellow and green) are shown on the map, and that works.
Beneath the map I want to provide buttons to show just the countries of a given color, like just the red ones. When the Red button is clicked, just the red countries will be shown in red and the others shown in grey. Each color would get its own button.
This seems like it would be easy to do. I have seen the technique used here: http://jvectormap.com/examples/random-colors/, where you could click to randomly change the colors and everything else about the map (panning, zooming, etc.) remains intact. The key part is:
map.series.regions[0].setValues(generateColors());
when you have a map constructor like:
map = new jvm.Map({
(If your map constructor is like this:
$('#map').vectorMap({
then you would need to do something like this:
var mapObject = $('#map').vectorMap('get', 'mapObject');
mapObject.series.regions[0].setValues(generateColors());
)
I have tried to do exactly that, but with my own getColors(color) method:
map.series.regions[0].setValues(getColors(currentColor));
where I regenerate the array of map colors that is passed to setValues(), but there is no change to the map. I know that the array of map colors is correct, because my workaround has been to do the following when the button is pressed:
(1) change the currentColor variable
(2) empty out the map div container: $("#map").empty()
(3) redraw the map from scratch using the constructor and the call to map.series.regions[0].setValues(getColors(currentColor));
The downside of this approach is that any panning or zooming is lost when the map is redrawn from scratch. Is there any step I am missing to get the map to update when I call: map.series.regions[0].setValues()
Here is a jsfiddle showing how it does not work, unless you redraw the map from scratch: http://jsfiddle.net/msalamon/euqyfs7v/10/
In the jsfiddle, if you call "High Redraw" it shows just the Red countries, but only by redrawing.

Answer 1

I figured it out. See: http://jsfiddle.net/msalamon/euqyfs7v/11/.
I assumed that setValues() fully replaced the prior values, so any missing values were set to a default value. But instead setValues() only replaces the values that were included there. So when a particular color/level is selected with the button, I have changed it so that the returned array includes a default value for any region that is not included:
else
{
colors[code] = "#999999";
}

Answer 2

this code work for me, you just have to change values, :)
<button id="update-colors-button2">change </button>
<button id="update-colors-button">change </button>
<div id="world-map" style="width: 600px; height: 400px"></div>
<script type="text/javascript">
map = new jvm.WorldMap({
map: 'chile',
container: $('#world-map'),
series: {
regions: [{
attribute: 'fill'
}]
}
});
$(function(){
$('#update-colors-button').click(function(e){
e.preventDefault();
map.series.regions[0].clear();
map.series.regions[0].setValues({'ari' : '#328942'});
});
$('#update-colors-button2').click(function(e){
e.preventDefault();
map.series.regions[0].clear();
map.series.regions[0].setValues({'ata' : '#328942'});
});
})
</script>