control map with a check mark button

Question

I am still trying to make this happen :

http://jsfiddle.net/Vh79z/10/

As you can see- there is a map and a checkmark box. I want the check mark box to control the color of the countries.

For example: when checked (checked on load) I want it to highlight certain countries on the map. And when unchecked to display them in a different color.

            new jvm.WorldMap({
        map: 'world_mill_en',
        container: $('#mymap'),
        backgroundColor: '#314F73',
        zoomMax: 40,
        markers: markers,
        markerStyle: {
            initial: {
                fill: '#ffffff'
            }
        },
        series: {
            regions: [{
                scale: {
                    '1': '#B1C9C0',
                        '2': '#41a62a'
                },
                attribute: 'fill',
                values: data1['countriesvisited']
            }]
        }
    });
});
$(document).ready(function () {
    $('#myForm').fancyfields();
    var mapObject = $('#mymap').jvm.WorldMap('get', 'mapObject');
    $("#Checkbox1").fancyfields("bind", "onCheckboxChange", function (input, isChecked) {
        if (isChecked) {
            console.log(mapObject.series.regions[0]);
            mapObject.series.regions[0].setScale({
                '1': '#ffffff',
                    '2': '#000000'
            });
        } else {
            mapObject.series.regions[0].setScale({
                '1': '#000000',
                    '2': '#ffffff'
            });
        }
    });
});

So using the above code:

On load it would load WITH all the: '1' parameter countries with COLOR #B1C9C0 '2' parameter countries with COLOR #41A62A

on checkmark: '1' parameter countries with COLOR #ffffff '2' parameter countries with COLOR #000000

on uncheck: '1' parameter countries with COLOR #000000 '2' parameter countries with COLOR #ffffff

Well that's what I want it to do. I am not sure I am getting the info from the map correctly though.

please help !

Answer 1

EDIT 2

Ok I fixed the problem. Here is an update jsFiddle: http://jsfiddle.net/Vh79z/16/

The issue was that the setScale method was not added to the OrdinalScale object. This caused an error to be thrown when we tried to set the scale in the region object.

This is a bug, so I just added the setScale method myself. It looks like this:

jvm.OrdinalScale.prototype.setScale = function(scale) {   
    this.scale = scale;
};

EDIT 1

Here is an updated fiddle based on your updated code: http://jsfiddle.net/Vh79z/13/

If you uncheck code box, then countries turn black and white. If you check it back the colors are reversed. At least that's what I think you're looking for.

This is basically the same solution as for your previous question. See the fiddle: http://jsfiddle.net/YBGm4/9/

I changed this:

scale: {
    '1': '#B1C9C0',
    '2': '#41a62a'
},

To this:

scale: ['#B1C9C0', '#41a62a'],

The reason I made this change is because these create different scale types. The one with the array is the jvm.ColorScale object, which is what I think you're looking for. The object syntax creates an jvm.OrdinalScale object.

Also there was a syntax bug here:

$('#mymap').jvm.WorldMap('get', 'mapObject');

Should be:

$('#mymap').vectorMap('get', 'mapObject');

Also I changed the following (for some reason it didn't like the ordinal scale syntax):

   if (isChecked) {
        console.log(mapObject.series.regions[0]);
        mapObject.series.regions[0].setScale({
            '1': '#ffffff',
                '2': '#000000'
        });
    } else {
        mapObject.series.regions[0].setScale({
            '1': '#000000',
                '2': '#ffffff'
        });
    }

To this:

if (isChecked) {
    mapObject.series.regions[0].setScale(['#ffffff', '#000000']);                         
} else {        
   mapObject.series.regions[0].setScale(['#00000', '#ffffff']);               
}