Geek asks and answers

Style individual regions in jvectormap

SO

I have a custom jVectorMap and I managed to change the color of the areas 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 separately. Has anyone done this or got an idea on how to achieve it? I looked at the jVectorMap API, but to no avail.

Mark

+5
source share
2 answers

First you need to know the codes for the regions that you are changing. You get them from the map file that you are using. Example below for a map of the USA.

To change the fill, you can configure areas when creating a map:

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

Or you can configure them on the fly (and the "value" parameter above is not needed):

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

jquery-jvectormap-1.1.1.js

script http://pastebin.com/MSt94XuH

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

:

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

:

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

, :

map.clearSelectedRegions();
+1

More articles:


All Articles