Boostrap Vector Map
Bootstrap vector map plugin
Note: We are transitioning MDB4 to a legacy version and focusing on developing MDB5.
While we'll continue to support for the transition period, we encourage you to migrate to
MDB5. We're offering a huge discount on MDB5 PRO to help with your transition,
enabling you to leverage the full potential of the latest version. You can find more information here.
upgrade with discount
Bootstrap Vector Map plugin helps you to show beautiful, scalable maps of the world, continents and countries. Easy to use, setup and customize. No API key needed - no hussle.
Basic example
By default, the vector map plugin will be load up Miller cylindrical projection of the world with plain, greyscale palette.
<div id="world-map" style="height: 300px;"></div>
$('#world-map').vectorMap();
API
Here you will find some more details about how to set up a vector map. Its basic form is as simple as as using a .vectorMap() method on a jQuery element object. In more advanced use cases you might want to learn some more about the jvm constructor object and its features.
Options
Let's start off with parametes, that that can be passed in as an initialization option object. By default, this object looks like this, which should give you some idea about what is customizable out-of-the box:
jvm.WorldMap.defaultParams = {
map: 'world_mill',
backgroundColor: '#505050',
zoomButtons: true,
zoomOnScroll: true,
zoomMax: 8,
zoomMin: 1,
zoomStep: 1.6,
regionsSelectable: false,
markersSelectable: false,
bindTouchEvents: true,
regionStyle: {
initial: {
fill: 'white',
"fill-opacity": 1,
stroke: 'none',
"stroke-width": 0,
"stroke-opacity": 1
},
hover: {
"fill-opacity": 0.8
},
selected: {
fill: 'yellow'
},
selectedHover: {
}
},
markerStyle: {
initial: {
fill: 'grey',
stroke: '#505050',
"fill-opacity": 1,
"stroke-width": 1,
"stroke-opacity": 1,
r: 5
},
hover: {
stroke: 'black',
"stroke-width": 2
},
selected: {
fill: 'blue'
},
selectedHover: {
}
}
};
Colors
Naturally, there are at least two ways to color things up. Firstly, to decide on all the regions color, through regionStyle.initial.fill property of the option object. Secondly, series.regions.values object helps to define colors and shades on region-to-region basis. The regions codes are easy to look up in the map file, while the string is a hex color code.
<div id="color-map" style="height: 300px;"></div>
$('#color-map').vectorMap({
backgroundColor: '#573E8A',
regionStyle: {
initial: {
fill: '#cbced4'
}
},
series: {
regions: [{
values: {
IN:'#5478ab',
DK:'#88b7d6',
PL:'#5478ab',
IQ:'#98c6e5',
PK:'#88b7d6',
RU:'#95c9ed',
CN:'#b6d4e9',
AU:'#5478ab',
AR:'#b6d4e9',
FR:'#9ccbeb',
NG:'#98c6e5',
CA:'#5478ab',
US:'#9ccbeb'
}
}]
}
});
Events
Vector map API offers aid in interactive maps creation and data visualization through colors, markers, labels, legends, custom mouse events and more. See "Getting Started" section for details.
Click to pinpoint your favorite US spots!
<div id="event-map" style="height: 300px;"></div>
var map,
markerIndex = 0,
markersCoords = {};
map = new jvm.WorldMap({
map: 'us_lcc',
markerStyle: {
initial: {
fill: 'red'
}
},
container: $('#event-map'),
onMarkerLabelShow: function(e, label, code){
label.text(markersCoords[code].lat.toFixed(2)+', '+markersCoords[code].lng.toFixed(2));
},
onMarkerClick: function(e, code){
map.removeMarkers([code]);
},
regionLabelStyle: {
initial: {
fill: '#B90E32'
},
hover: {
fill: 'black'
}
}
})
map.container.click(function(e){
var latLng = map.pointToLatLng(
e.pageX - map.container.offset().left,
e.pageY - map.container.offset().top
),
targetCls = $(e.target).attr('class');
if (latLng && (!targetCls || (targetCls && $(e.target).attr('class').indexOf('jvectormap-marker') === -1))) {
markersCoords[markerIndex] = latLng;
console.log(`${markersCoords[markerIndex].lat}`)
map.addMarker(markerIndex, {latLng: [latLng.lat, latLng.lng]});
markerIndex += 1;
}
});
Naturally, to make our maps interactive, it is not enough to just make it fancy on initial render - we want to respond to our users actions. This is why mouse events are such an important part of the API.
| Event Name | Description |
|---|---|
onRegionOver |
First event getting fired once a cursors crosses regional border. Passport, please! |
onRegionLabelShow |
Event taking place just before a regional label gets shown |
onRegionOut |
Happens once the cursor leaves the region |
onRegionClick |
Fires once a region gets clicked |
onRegionSelected |
Takes place when a region gets selected. Requires regionsSelectable option object property to be set to true |
onMarkerOver |
First thing to happen once cursor breaches markers' aerial space |
onMarkerLabelShow |
Fires just moments before a marker label is shown |
onMarkerOut |
Event listening for the cursor to leave a marker alone |
onMarkerClick |
Click on a marker, get an event free |
onMarkerSelected |
You can click on a marker and this is what happens |
onViewportChange |
Once a viewport changes, events get fired |
Maps
Showing world on a map is great, but sometimes - just too great! Happens, we are in need of something a bit lesser. Pick and choose - there are over 70 different maps in total!
<div id="cn-map" style="height: 300px;"></div>
$('#cn-map').vectorMap({
map: 'cn_mill',
backgroundColor: 'white',
regionStyle: {
initial: {
fill: 'red'
}
},
series: {
regions: [{
values: {
'CN-41': '#B68842',
'CN-44': '#482901',
'CN-53': '#E7B23C'
}
}]
}
});
Available maps
There is a ton of different maps to choose from, each with its own designated regions! They usually come in two flavors: _mill, standing for all times favorite Miller cylindrical projection, and _merc, its arch-nemesis, the Mercator projection. It is worth to mention, that there are some places for which extra feels are offered: a colonial-times themed _lcc and the "bitten donut" _aea. The maps are grouped into the "world" and "countries" packs.
World
- africa_merc.js
- africa_mill.js
- asia_merc.js
- asia_mill.js
- continents_merc.js
- continents_mill.js
- europe_merc.js
- europe_mill.js
- north_america_merc.js
- north_america_mill.js
- oceania_merc.js
- oceania_mill.js
- south_america_merc.js
- south_america_mill.js
- world_merc.js
- world_mill.js
Countries
- ar_merc.js
- ar_mill.js
- at_merc.js
- at_mill.js
- au_merc.js
- au_mill.js
- be_merc.js
- be_mill.js
- ca_lcc.js
- ca_merc.js
- ca_mill.js
- ch_merc.js
- ch_mill.js
- cn_merc.js
- cn_mill.js
- co_merc.js
- co_mill.js
- de_merc.js
- de_mill.js
- dk_merc.js
- dk_mill.js
- es_merc.js
- es_mill.js
- fr_merc.js
- fr_mill.js
- in_merc.js
- in_mill.js
- it_merc.js
- it_mill.js
- kr_merc.js
- kr_mill.js
- nl_merc.js
- nl_mill.js
- no_merc.js
- no_mill.js
- nz_merc.js
- nz_mill.js
- pl_merc.js
- pl_mill.js
- pt_merc.js
- pt_mill.js
- ru_merc.js
- ru_mill.js
- se_merc.js
- se_mill.js
- th_merc.js
- th_mill.js
- uk_merc.js
- uk_mill.js
- us_aea.js
- us_lcc.js
- us_merc.js
- us_mill.js
- ve_merc.js
- ve_mill.js
- za_merc.js
- za_mill.js
Vector Map - getting started : download & setup
Download
This plugin requires a purchase.
Buy vector map plugin
Installation tutorial
Note: The video below shows a different plugin, but it does not matter. The installation process is the same for all plugins.