JavaScript API (v 0.2.3)

Parameters

While initializing map you can provide parameters to change its initial look and feel:

color #ffffff
Default color of map regions.
hoverColor black
Color of the region when mouse pointer is over it.
hoverOpacity1
Opacity of the region when mouse pointer is over it.
backgroundColor #505050
Background color of map container in any CSS compatible format.
colors
Colors of individual map regions. Keys of the colors objects are country codes according to ISO 3166-1 alpha-2 standard. Keys of colors must be in upper case.
scaleColors ['#b6d6ff', '#005ace']
This option defines colors, with which regions will be painted when you set option values. Array scaleColors can have more then two elements. Elements should be strings representing colors in RGB hex format.
normalizeFunction 'linear'
This function can be used to improve results of visualizations for data with non-linear nature. Function gets raw value as the first parameter and should return value which will be used in calculations of color, with which particular region will be painted.
markers []
This parameters defines circular markers which will be plotted in the certain place of the map. Every marker is an object with the following attributes:
latLng [0, 0]
Array consisting of two elements: latitude and longitude of the marker.
r 5
Radius of the marker in pixels.
fill 'white'
Fill color of the marker.
stroke '#505050'
Stroke color of the marker.
markerDefaults {}
This is an object defining default parameters for all markers. Any of the attributes described for the markers parameter could be used here.
onLabelShow
Callback function which will be called before label is shown. Label's DOM object and region code will be passed to the callback as arguments.
onRegionOver
Callback function which will be called when the mouse cursor enters the region path. Region code will be passed to the callback as argument.
onRegionOut
Callback function which will be called when the mouse cursor leaves the region path. Region code will be passed to the callback as argument.
onRegionClick
Callback function which will be called when the user clicks the region path. Region code will be passed to the callback as argument.
onMarkerLabelShow
Callback function which will be called before label for the marker is shown. Label's DOM object and marker index will be passed to the callback as arguments.
onMarkerOver
Callback function which will be called when the mouse cursor enters the marker circle. Marker index will be passed to the callback as argument.
onMarkerOut
Callback function which will be called when the mouse cursor leaves the marker circle. Marker index will be passed to the callback as argument.
onMarkerClick
Callback function which will be called when the user clicks the marker circle. Marker index will be passed to the callback as argument.

Methods

set option, value
This method could be to used to change any option except the callbacks after map initialization.
$('#map').vectorMap('set', 'colors', {us: '#0000ff'});
addMap name, data
This method is used to register new maps loaded.

Events

You can define callback function when you initialize jVectorMap:

$('#map-events').vectorMap({
  onLabelShow: function(event, label, code){},
  onRegionOver: function(event, code){},
  onRegionOut: function(event, code){},
  onRegionClick: function(event, code){},

  onMarkerLabelShow: function(event, label, index){},
  onMarkerOver: function(event, index){},
  onMarkerOut: function(event, index){},
  onMarkerClick: function(event, index){}
});

Or later using standard jQuery mechanism:

$('#map-events').bind('labelShow.jvectormap', function(event, label, code){});
$('#map-events').bind('regionOver.jvectormap', function(event, code){});
$('#map-events').bind('regionOut.jvectormap', function(event, code){});
$('#map-events').bind('regionClick.jvectormap', function(event, code){});

$('#map-events').bind('markerLabelShow.jvectormap', function(event, label, index){});
$('#map-events').bind('markerOver.jvectormap', function(event, index){});
$('#map-events').bind('markerOut.jvectormap', function(event, index){});
$('#map-events').bind('markerClick.jvectormap', function(event, index){});

Consider that fact that you can use standart features of jQuery events like event.preventDefault() or returning false from the callback to prevent default behavior of jVectorMap (showing label or changing country color on hover). In the following example, when user moves mouse cursor over Canada label won't be shown and color of country won't be changed. At the same label for Russia will have custom text.

$('#map-events').vectorMap({
  onLabelShow: function(event, label, code){
    if (code == 'CA') {
      event.preventDefault();
    } else if (code == 'RU') {
      label.text('Bears, vodka, balalaika');
    }
  },
  onRegionOver: function(event, code){
    if (code == 'CA') {
      event.preventDefault();
    }
  }
});