jQuery Vector Maps

JQVMap is a jQuery plugin that renders Vector Maps.  It uses resizable Scalable Vector Graphics (SVG) for modern browsers like Firefox, Safari, Chrome, Opera and Internet Explorer 9.  Legacy support for older versions of Internet Explorer 6-8 is provided via VML.

May the Source be with you

World Vector Map

  • ? View Source Code for this Example

    <script src="js/jquery.vmap.js"></script>
    <script src="js/jquery.vmap.world.js"></script>
    <script src="js/jquery.vmap.sampledata.js"></script>
    
    <script>
    jQuery('#vmap').vectorMap({
    	map: 'world_en',
    	backgroundColor: null,
    	color: '#ffffff',
    	hoverOpacity: 0.7,
    	selectedColor: '#666666',
    	enableZoom: true,
    	showTooltip: true,
    	values: sample_data,
    	scaleColors: ['#C8EEFF', '#006491'],
    	normalizeFunction: 'polynomial'
    });
    </script>
    
    <div id="vmap" style="width: 600px; height: 400px;"></div>
    

USA Vector Map

  • ? View Source Code for this Example

    <script src="js/jquery.vmap.js"></script>
    <script src="js/jquery.vmap.usa.js"></script>
    
    <script>
    jQuery('#vmap').vectorMap({
    	map: 'usa_en',
    	backgroundColor: null,
    	color: '#ffffff',
    	hoverColor: '#999999',
    	selectedColor: '#666666',
    	enableZoom: true,
    	showTooltip: true,
    	selectedRegion: 'MO'
    });
    </script>
    
    <div id="vmap" style="width: 600px; height: 400px;"></div>
    

Europe Vector Map

  • ? View Source Code for this Example

    <script src="js/jquery.vmap.js"></script>
    <script src="js/jquery.vmap.europe.js"></script>
    
    <script>
    jQuery('#vmap').vectorMap({
    	map: 'europe_en',
    	backgroundColor: null,
    	color: '#ffffff',
    	hoverColor: '#999999',
    	enableZoom: false,
    	showTooltip: false
    });
    </script>
    
    <div id="vmap" style="width: 600px; height: 400px;"></div>
    

Germany Vector Map

  • ? View Source Code for this Example

    <script src="js/jquery.vmap.js"></script>
    <script src="js/jquery.vmap.germany.js"></script>
    
    <script>
    jQuery('#vmap').vectorMap({
    	map: 'germany_en',
    	onRegionClick: function(element, code, region)
    	{
    		var message = 'You clicked "'
    			+ region 
    			+ '" which has the code: ' 
    			+ code.toUpperCase();
    			
    		alert(message);
    	}
    });
    </script>
    
    <div id="vmap" style="width: 600px; height: 400px;"></div>
    

Documentation

While initializing a map you can provide parameters to change its look and feel.

jQuery('#vmap').vectorMap(
{
    map: 'world_en',
	backgroundColor: '#a5bfdd',
	borderColor: '#818181',
	borderOpacity: 0.25,
	borderWidth: 1,
	color: '#f4f3f0',
	enableZoom: true,
	hoverColor: '#c9dfaf',
	hoverOpacity: null,
	normalizeFunction: 'linear',
	scaleColors: ['#b6d6ff', '#005ace'],
	selectedColor: '#c9dfaf',
	selectedRegion: null,
	showTooltip: true,
	onRegionClick: function(element, code, region)
	{
		var message = 'You clicked "'
			+ region 
			+ '" which has the code: ' 
			+ code.toUpperCase();
			
		alert(message);
	}
});
map world_en
Map you want to load. Must include the javascript file with the name of the map you want. Available maps with this library are world_en, usa_en, europe_en and germany_en
backgroundColor #a5bfdd
Background color of map container in any CSS compatible format.
borderColor #818181
Border Color to use to outline map objects
borderOpacity 0.5
Border Opacity to use to outline map objects ( use anything from 0-1, e.g. 0.5, defaults to 0.25 )
borderWidth 3
Border Width to use to outline map objects ( defaults to 1 )
color #f4f3f0
Color of map regions.
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 lower case.
enableZoom boolean
Whether to Enable Map Zoom ( true or false, defaults to true)
hoverColor #c9dfaf
Color of the region when mouse pointer is over it.
hoverOpacity 0.5
Opacity of the region when mouse pointer is over it.
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.
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.
selectedRegion mo
This is the Region that you are looking to have preselected (two letter ISO code, defaults to null )
  • ? Region Names & Codes

    WORLD
    ------------------------------
    AE = United Arab Emirates
    AF = Afghanistan
    AG = Antigua and Barbuda
    AL = Albania
    AM = Armenia
    AO = Angola
    AR = Argentina
    AT = Austria
    AU = Australia
    AZ = Azerbaijan
    BA = Bosnia and Herzegovina
    BB = Barbados
    BD = Bangladesh
    BE = Belgium
    BF = Burkina Faso
    BG = Bulgaria
    BI = Burundi
    BJ = Benin
    BN = Brunei Darussalam
    BO = Bolivia
    BR = Brazil
    BS = Bahamas
    BT = Bhutan
    BW = Botswana
    BY = Belarus
    BZ = Belize
    CA = Canada
    CD = Congo
    CF = Central African Republic
    CG = Congo
    CH = Switzerland
    CI = Cote d'Ivoire
    CL = Chile
    CM = Cameroon
    CN = China
    CO = Colombia
    CR = Costa Rica
    CU = Cuba
    CV = Cape Verde
    CY = Cyprus
    CZ = Czech Republic
    DE = Germany
    DJ = Djibouti
    DK = Denmark
    DM = Dominica
    DO = Dominican Republic
    DZ = Algeria
    EC = Ecuador
    EE = Estonia
    EG = Egypt
    ER = Eritrea
    ES = Spain
    ET = Ethiopia
    FI = Finland
    FJ = Fiji
    FK = Falkland Islands
    FR = France
    GA = Gabon
    GB = United Kingdom
    GD = Grenada
    GE = Georgia
    GF = French Guiana
    GH = Ghana
    GL = Greenland
    GM = Gambia
    GN = Guinea
    GQ = Equatorial Guinea
    GR = Greece
    GT = Guatemala
    GW = Guinea-Bissau
    GY = Guyana
    HN = Honduras
    HR = Croatia
    HT = Haiti
    HU = Hungary
    ID = Indonesia
    IE = Ireland
    IL = Israel
    IN = India
    IQ = Iraq
    IR = Iran
    IS = Iceland
    IT = Italy
    JM = Jamaica
    JO = Jordan
    JP = Japan
    KE = Kenya
    KG = Kyrgyz Republic
    KH = Cambodia
    KM = Comoros
    KN = Saint Kitts and Nevis
    KP = North Korea
    KR = South Korea
    KW = Kuwait
    KZ = Kazakhstan
    LA = Lao People's Democratic Republic
    LB = Lebanon
    LC = Saint Lucia
    LK = Sri Lanka
    LR = Liberia
    LS = Lesotho
    LT = Lithuania
    LV = Latvia
    LY = Libya
    MA = Morocco
    MD = Moldova
    MG = Madagascar
    MK = Macedonia
    ML = Mali
    MM = Myanmar
    MN = Mongolia
    MR = Mauritania
    MT = Malta
    MU = Mauritius
    MV = Maldives
    MW = Malawi
    MX = Mexico
    MY = Malaysia
    MZ = Mozambique
    NA = Namibia
    NC = New Caledonia
    NE = Niger
    NG = Nigeria
    NI = Nicaragua
    NL = Netherlands
    NO = Norway
    NP = Nepal
    NZ = New Zealand
    OM = Oman
    PA = Panama
    PE = Peru
    PF = French Polynesia
    PG = Papua New Guinea
    PH = Philippines
    PK = Pakistan
    PL = Poland
    PT = Portugal
    PY = Paraguay
    QA = Qatar
    RE = Reunion
    RO = Romania
    RS = Serbia
    RU = Russian Federationß
    RW = Rwanda
    SA = Saudi Arabia
    SB = Solomon Islands
    SC = Seychelles
    SD = Sudan
    SE = Sweden
    SI = Slovenia
    SK = Slovakia
    SL = Sierra Leone
    SN = Senegal
    SO = Somalia
    SR = Suriname
    ST = Sao Tome and Principe
    SV = El Salvador
    SY = Syrian Arab Republic
    SZ = Swaziland
    TD = Chad
    TG = Togo
    TH = Thailand
    TJ = Tajikistan
    TL = Timor-Leste
    TM = Turkmenistan
    TN = Tunisia
    TR = Turkey
    TT = Trinidad and Tobago
    TW = Taiwan
    TZ = Tanzania
    UA = Ukraine
    UG = Uganda
    US = United States of America
    UY = Uruguay
    UZ = Uzbekistan
    VE = Venezuela
    VN = Vietnam
    VU = Vanuatu
    YE = Yemen
    ZA = South Africa
    ZM = Zambia
    ZW = Zimbabwe
    
    USA
    ------------------------------
    AK = Alaska
    AL = Alabama
    AR = Arkansas
    AZ = Arizona
    CA = California
    CO = Colorado
    CT = Connecticut
    DC = District of Columbia
    DE = Delaware
    FL = Florida
    GA = Georgia
    HI = Hawaii
    IA = Iowa
    ID = Idaho
    IL = Illinois
    IN = Indiana
    KS = Kansas
    KY = Kentucky
    LA = Louisiana
    MA = Massachusetts
    MD = Maryland
    ME = Maine
    MI = Michigan
    MN = Minnesota
    MO = Missouri
    MS = Mississippi
    MT = Montana
    NC = North Carolina
    ND = North Dakota
    NE = Nebraska
    NH = New Hampshire
    NJ = New Jersey
    NM = New Mexico
    NV = Nevada
    NY = New York
    OH = Ohio
    OK = Oklahoma
    OR = Oregon
    PA = Pennsylvania
    RI = Rhode Island
    SC = South Carolina
    SD = South Dakota
    TN = Tennessee
    TX = Texas
    UT = Utah
    VA = Virginia
    VT = Vermont
    WA = Washington
    WI = Wisconsin
    WV = West Virginia
    WY = Wyoming
    
    EUROPE
    ------------------------------
    AD = Andorra
    AL = Albania
    AM = Armenia
    AT = Austria
    AZ = Azerbaijan
    BA = Bosnia and Herzegovina
    BE = Belgium
    BG = Bulgaria
    BY = Belarus
    CH = Switzerland
    CY = Cyprus
    CZ = Czech Republic
    DE = Germany
    DK = Denmark
    DZ = Algeria
    EE = Estonia
    ES = Spain
    FI = Finland
    FR = France
    GB = United Kingdom
    GE = Georgia
    GL = Greenland
    GR = Greece
    HR = Croatia
    HU = Hungary
    IE = Ireland
    IL = Israel
    IQ = Iraq
    IR = Iran
    IS = Iceland
    IT = Italy
    JO = Jordan
    KZ = Kazakhstan
    LB = Lebanon
    LI = Liechtenstein
    LT = Lithuania
    LU = Luxembourg
    LV = Latvia
    MA = Morocco
    MC = Monaco
    MD = Moldova
    ME = Montenegro
    MK = Macedonia
    MT = Malta
    NL = Netherlands
    NO = Norway
    PL = Poland
    PT = Portugal
    RO = Romania
    RU = Russian Federation
    SA = Saudi Arabia
    SE = Sweden
    SI = Slovenia
    SK = Slovakia
    SM = San Marino
    SR = Suriname
    SY = Syrian Arab Republic
    TM = Turkmenistan
    TN = Tunisia
    TR = Turkey
    UA = Ukraine
    
    GERMANY
    ------------------------------
    BB = Brandenburg
    BE = Berlin
    BW = Baden-WÃrttemberg
    BY = Bayern
    HB = Bremen
    HE = Hessen
    HH = Hamburg
    MV = Mecklenburg-Vorpommern
    NI = Niedersachsen
    NW = Nordrhein-Westfalen
    RP = Rheinland-Pfalz
    SH = Schleswig-Holstein
    SL = Saarland
    SN = Sachsen
    ST = Sachsen-Anhalt
    TH = ThÃri
    
showTooltip boolean
Whether to show Tooltips on Mouseover ( true or false, defaults to true)
onLabelShow function(element, label, code)
Callback function which will be called before label is shown. Label DOM object and country code will be passed to the callback as arguments.
onRegionOver function(element, code, region)
Callback function which will be called when the mouse cursor enters the region path. Country code will be passed to the callback as argument.
onRegionOut function(element, code, region)
Callback function which will be called when the mouse cursor leaves the region path. Country code will be passed to the callback as argument.
onRegionClick function(element, code, region)
Callback function which will be called when the user clicks the region path. Country code will be passed to the callback as argument.

Dynamic Updating

Most of the options can be changed after initialization using the following code:

jQuery('#vmap').vectorMap('set', 'colors', {us: '#0000ff'});

Instead of colors can be used any parameter except callbacks. Callbacks can be added and deleted using standard jQuery patterns of working with events.

You can define callback function when you initialize JQVMap:

jQuery('#vmap').vectorMap(
{
	onLabelShow: function(event, label, code)
	{
	
	},
	onRegionOver: function(event, code, region)
	{
	
	},
	onRegionOut: function(event, code, region)
	{
	
	},
	onRegionClick: function(event, code, region)
	{
	
	}
});

Or later using standard jQuery mechanism:

jQuery('#vmap').bind('labelShow.jqvmap', 
	function(event, label, code)
	{
	
	}
);
jQuery('#vmap').bind('regionMouseOver.jqvmap', 
	function(event, code, region)
	{
	
	}
);
jQuery('#vmap').bind('regionMouseOut.jqvmap',
	function(event, code, region)
	{
	
	}
);
jQuery('#vmap').bind('regionClick.jqvmap',
	function(event, code, region)
	{
	
	}
);

Consider that fact that you can use standard features of jQuery events like event.preventDefault() or returning false from the callback to prevent default behavior of JQVMap (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.

jQuery('#vmap').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();
        }
    },
});

Data Visualization

Here I want to demonstrate how visualization of some geographical-related data can be done using JQVMap. Let's visualize information about GDP in 2010 for every country. At first we need some data. Let it be site of International Monetary Fond. There we can get information in xsl format, which can be converted first to csv and then to json with any scripting language. Now we have file gdp-data.js with such content (globals are evil, I know, but just for the sake of simplification):

var sample_data = {"af":16.63,"al":11.58,"dz":158.97,...};

Then connect it to the page and add some code to make visualization:

var max = 0,
    min = Number.MAX_VALUE,
    cc,
    startColor = [200, 238, 255],
    endColor = [0, 100, 145],
    colors = {},
    hex;
	
//find maximum and minimum values
for (cc in gdpData)
{
    if (parseFloat(gdpData[cc]) > max)
	{
        max = parseFloat(gdpData[cc]);
    }
    if (parseFloat(gdpData[cc]) < min)
	{
        min = parseFloat(gdpData[cc]);
    }
}

//set colors according to values of GDP
for (cc in gdpData)
{
    if (gdpData[cc] > 0)
	{
        colors[cc] = '#';
        for (var i = 0; i<3; i++)
		{
            hex = Math.round(startColor[i] 
				+ (endColor[i] 
				- startColor[i])
				* (gdpData[cc] / (max - min))).toString(16);
            
			if (hex.length == 1)
			{
                hex = '0'+hex;
            }
			
            colors[cc] += (hex.length == 1 ? '0' : '') + hex;
        }
    }
}

//initialize JQVMap
jQuery('#vmap').vectorMap(
{
    colors: colors,
    hoverOpacity: 0.7,
    hoverColor: false
});

Custom Maps

For information on building your own custom maps to use with this library, check out our Github project at https://github.com/manifestinteractive/jqvmap

Updates

Version 1.0

Released on May 6th, 2012
  • New Initial Release