Jsvectormap
Jsvectormap is a lightweight JavaScript library for creating interactive maps and pretty data visualization, supports all modern browsers including IE9+. Read Full Documentation
Examples
<div class="mapcontainer">
<div id="world-map" class="w-100" style="height: 450px; background-color: transparent;"></div>
</div>
var world_map = new jsVectorMap({
selector: "#world-map",
map: "world",
zoomOnScroll: false,
regionStyle: {
hover: {
fill: '#435ebe'
}
},
markers: [
{
name: 'Indonesia',
coords: [-6.229728, 106.6894311],
style: {
fill: '#435ebe'
}
},
{
name: 'United States',
coords: [38.8936708, -77.1546604],
style: {
fill: '#28ab55'
}
},
{
name: 'Russia',
coords: [55.5807481, 36.825129],
style: {
fill: '#f3616d'
}
},
{
name: 'China',
coords: [39.9385466, 116.1172735]
},
{
name: 'United Kingdom',
coords: [51.5285582, -0.2416812]
},
{
name: 'India',
coords: [26.8851417, 75.6504721]
},
{
name: 'Australia',
coords: [-35.2813046, 149.124822]
},
{
name: 'Brazil',
coords: [-22.9140693, -43.5860681]
},
{
name: 'Egypt',
coords: [26.834955, 26.3823725]
},
],
onRegionTooltipShow(event, tooltip) {
tooltip.css({ backgroundColor: '#435ebe' })
}
});