Get element as object when mouseover jqvmap

Question

I know that the basic event for mouseover in jqvmap is :

onRegionOver: function(event, code, region){

}

The aim is to have different cursors when mouseover different coutries.

I tried this :

onRegionOver: function(event, code, region){
     $(this).css('cursor', 'pointer');
}

But, this is in fact the whole world map.

Thank you in advance for your help.

Answer 1

There are two questions: how to get the reference to the map object, and how to set the style of a SVG shape.

The cursor style is defined in the JQVMap CSS file, you should override that.

.jqvmap-region
{
  cursor: pointer;
}

Store the reference to the map object, and use this reference to do what You need.

var mapObject;
//...
mapObject = $('#vmap').vectorMap({
    map: 'world_en',
    backgroundColor: '#a5bfdd',
    borderColor: '#818181',
    borderWidth: 1,
    color: '#f4f3f0',
    enableZoom: true,
    hoverColor: '#c9dfaf',
    showTooltip: true,
    //...
    onRegionOver: function(e, code, name){
      var path = mapObject.countries[code];
      path.setAttribute("style", "cursor: grab; cursor:-moz-grab; cursor:-webkit-grab;");
    }
});