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

score 14 · Answer 1 · answered Apr 05 '13 at 12:37

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'
    });
});

Its important to note that if you are using 'scale' that you need to setValues using the scale values. So if this is my series, series: { regions: [{ scale: { Red: '#ff0000', Blue: '#0000ff', Swing: '#00ff00' }, attribute: 'fill', values: { }, legend: { horizontal: true, title: 'Political Alignment' } }] }, then you say, var myCustomColors = { 'US-CA': 'Swing', 'US-TX': 'Swing', 'US-FL': 'Swing' };, and then... map.series.regions[0].setValues(myCustomColors); — Joseph Astrahan, Jun 29 '16 at 02:28

score 1 · Answer 2 · answered Apr 12 '13 at 18:19

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();

Style Individual Regions in jvectormap

2 Answers2