Style Individual Regions in jvectormap

Question

SO,

I've got a custom jVectorMap and I've succeeded in changing the color of the regions using this code from the jVectorMap API:

regionStyle: {
      initial: {
      fill: '#5e7073',
      "fill-opacity": 1,
      stroke: 'none',
      "stroke-width": 0,
      "stroke-opacity": 1
      },
      hover: {
      fill: 'black'
      }, 

But I'm trying to control the fill/hover properties for each region of the map individually. Has anyone done this or got an idea of how to achieve it? I've looked through the jVectorMap API but to no avail.

Marca

Answer 1

First, you need to know the codes for the regions you're changing. You get these from the map file you're using. The example below is for the USA map.

For changing the fill, you could customize the regions when you create the map:

regionStyle: {
    //...
},
series: {
    regions: [{
        values: {
            'US-CA': '#3e9d01',
            'US-WA': '#4b93c1',
            'US-TX': '#c1a14b'
        },
        attribute: 'fill'
    }]
}

Or you could customize them on the fly (and the "values" parameter above would not be necessary):

$(function(){
    var map = $('#map').vectorMap('get', 'mapObject');
    map.series.regions[0].setValues({
        'US-CA': '#3e9d01'
    });
});

Answer 2

i put a custom method in the jquery-jvectormap-1.1.1.js

check all script in http://pastebin.com/MSt94XuH

setSelectedRegionStyle : function (r,c) {
return this.regions[r].element.style.selected.fill = c;
},

You need get reference to the map:

map = $("#world-map-gdp").vectorMap('get', 'mapObject');

And Set a custom style for each country:

map.setSelectedRegionStyle('IT', '#b2c9cb');
map.setSelectedRegionStyle('AT', '#b2c9cb');
map.setSelectedRegionStyle('BE', '#b2c9cb');

If you need clear all styles use:

map.clearSelectedRegions();