i found the plugin jVectorMap and i'm trying to mark the state that i selected with a diferente color

the same way that hover happens, but i what i want is, when clicked, the state keep "active" with some color.

the plugin have some actions like onRegionClick:

$('#map-teste').vectorMap({
    map: 'br_en',
    onRegionClick: function(event, code){
        alert(code); // return the state
    }
});

but i dont have any idea how to do this.

anyone achieve this ?

i found the plugin jVectorMap and i'm trying to mark the state that i selected with a diferente color

the same way that hover happens, but i what i want is, when clicked, the state keep "active" with some color.

the plugin have some actions like onRegionClick:

$('#map-teste').vectorMap({
    map: 'br_en',
    onRegionClick: function(event, code){
        alert(code); // return the state
    }
});

but i dont have any idea how to do this.

anyone achieve this ?

• javascript
• jquery
• jvectormap

Share Improve this question Follow edited Mar 29, 2012 at 14:33 fglez 8,55244 gold badges5050 silver badges7878 bronze badges asked Jan 23, 2012 at 18:04 Ricardo BinnsRicardo Binns 3,24666 gold badges4545 silver badges7171 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

You can set the color for selected regions by adding regionStyle config parameters to the instantiation of your map. You would also want to set the regionSelectable to true:

$('#map-teste').vectorMap({
    map: 'br_en',
    onRegionClick: function(event, code){
        alert(code); // return the state
    },
    regionsSelectable: true,
    regionStyle: {
        selected: {
            fill: 'orange'
        }
    }
});

You can do this:

$('#map-teste').vectorMap({
    map: 'br_en',
    onRegionClick: function(event, code){
        $('#map-teste').vectorMap('set', 'colors', code, '#000000');
        alert(code); // return the state
    }
});

Works fine for me. This would result in multiple selections with no toggling. If you need it 'toggled' for a 'single-selection' effect, you could do it like this:

currentSelected = '';
defaultColor = '#00FF00';
selectedColor = '#FF00FF'; 
maphandle = $('#map-teste'); 

maphandle.vectorMap({
    map: 'br_en',
    onRegionClick: function(event, code){
        if(currentSelected !== code) {
            if(currentSelected !== ''){
                // Deselect, then select new choice
                maphandle.vectorMap('set', 'colors', currentSelected, defaultColor);
                maphandle.vectorMap('set', 'colors', code, selectedColor);
                currentSelected = code;
            } else {
                // Nothing currently selected, go ahead and select
                maphandle.vectorMap('set', 'colors', code, selectedColor);
                currentSelected = code;
            }
        } else {
            // Deselect
            maphandle.vectorMap('set', 'colors', code, defaultColor);
            currentSelected = '';
        }
        alert(code); // return the state
    }
});

Hope that helps! :)