CODEWITHSUNDEEP
javascriptjvectormap
Nalini Wanjale
Nalini Wanjale

Reputation: 1757

Select only one region at a time

I am using jVectorMap to display an interactive map. Currently I can select multiple regions at the same time, but my requirement is to only allow the selection of one at a time. How can this be done? 

$('#world-map').vectorMap({
    backgroundColor: '#0099FF',
    /* Hover color for each state */
    hoverColor: '#FCEF06',
    hover: {
        stroke: 'black',
        "stroke-width": 2,
        fill:'#FCEF06'
    },
    onRegionClick: function(event, code)
    {
        alert(code);
    },
    regionsSelectable: true,
    regionStyle: {
        fill:'black',
        selected: {
            fill: 'red'
        }
    },
});

<div id="world-map" style="width:750px; height:380px; float:left;"></div>

Upvotes: 2

Views: 821

Answers (2)

j.f.
j.f.

Reputation: 3939

Along with the regionsSelectable property, there is also a regionsSelectableOne property to go with it.

Setting regionsSelectable to true lets you select the regions and setting regionsSelectableOne to true only allows one to be selected at a time.

jVectorMap Documentation 

$('#world-map').vectorMap({
    backgroundColor: '#0099FF',
    /* Hover color for each state */
    hoverColor: '#FCEF06',
    hover: {
        stroke: 'black',
        "stroke-width": 2,
        fill:'#FCEF06'
    },
    onRegionClick: function(event, code)
    {
        alert(code);
    },
    regionsSelectable: true,
    regionsSelectableOne: true, //add this line here
    regionStyle: {
        fill:'black',
        selected: {
            fill: 'red'
        }
    } 
});

Upvotes: 3

Alex Filatov
Alex Filatov

Reputation: 2321

See this tutorial example

http://jvectormap.com/examples/regions-selection/

You should see on 

regionStyle: {
      initial: {
        fill: '#B8E186'
      },
      selected: {   // here
        fill: '#F4A582'
      }
    },

onRegionSelected: function(){
      if (window.localStorage) {
        window.localStorage.setItem(
          'jvectormap-selected-regions',
          JSON.stringify(map.getSelectedRegions())
        );
      }
    },

Hope it helps you

Upvotes: 1

Related Questions