jVectormap the basics

Posted on Updated on

I needed to make a map with some text labels, and it was not an easy feat, as the documentation (while there) is not very clear, and the examples floating around the internet are sketchy at best as well.

Here’s my little map of Australia.

The labels are permanent, and ready to have the JS changed, to display counts, or values if required.

It’s not entirely finished, but it works.

This needs the Australia map downloaded in the same path as this code.
http://jvectormap.com/maps/countries/australia/
Here is my gist: https://gist.github.com/vrdriver/692c794ac904fa2709d5fdd827735da2

 

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Country Map Example</title> 
</head>
<body>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jvectormap@2.0.4/jquery-jvectormap.min.css" type="text/css">
<style>
.jvectormap-region.jvectormap-element {
text-shadow: -1px -1px 3px #fff, 1px -1px 3px #fff, -1px 1px 3px #fff, 1px 1px 3px #fff;
}
</style>
https://code.jquery.com/jquery-1.11.2.min.js
https://cdn.jsdelivr.net/npm/jvectormap@2.0.4/jquery-jvectormap.min.js
http://jquery-jvectormap-au-mill.js
</head>
<body>
div id="map1" style="width: 800px; height: 600px"> 
</div

 
var locations = [
{ latLng: [-35.27603, 149.13435], name: "ACT", text: "This is a text of one.", style: {r: 0}},
{ latLng: [-32, 147], name: "NSW", text: "This is a text of one.", style: {r: 0} },
{ latLng: [-22, 144.25], name: "QLD", text: "This is a text of one.", style: {r: 0} },
{ latLng: [-41.5, 146.030], name: "TAS", text: "This is a text of one.", style: {r: 0} },
{ latLng: [ -36.760, 144.280], name: "VIC", text: "This is a text of one.", style: {r: 0} },
{ latLng: [-26.230, 120.380], name: "WA", text: "This is a text of one.", style: {r: 0} },
{ latLng: [-22.000, 133.380], name: "NT", text: "This is a text of one.", style: {r: 0} },
{ latLng: [-29.000, 135.380], name: "SA", text: "This is a text of one.", style: {r: 0} }, 

];

$(document).ready(function () {
var map = "au_mill";
$("#map1").vectorMap({
map: 'au_mill', // map
zoomOnScroll: false, 
zoomButtons : false,
regionStyle: { // color of the map
initial: {
fill: '#B8E186' // standard colour
},
selected: {
fill: '#F4A582' // on hover
}
}, 
backgroundColor: '#383f47', // page color 
markers: locations, // the values
markerLabelStyle: { // the value formatting
initial: {
'font-family': 'Verdana',
'font-size': '40px',
'font-weight': 'bold',
cursor: 'default',
fill: 'red'
},
hover: {
cursor: 'pointer'
}
},

labels: { // this paints the labels on the map
markers: {
render: function(index){
return locations[index].name;
},
offsets: function(index){
var offset = locations[index]['offsets'] || [0, 0];
return [offset[0] - 7, offset[1] + 3];
}
}
}
});
});

</html>

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s