Skip to content

Instantly share code, notes, and snippets.

@vrdriver

vrdriver/gist:692c794ac904fa2709d5fdd827735da2

Created October 21, 2019 06:45
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save vrdriver/692c794ac904fa2709d5fdd827735da2 to your computer and use it in GitHub Desktop.
Save vrdriver/692c794ac904fa2709d5fdd827735da2 to your computer and use it in GitHub Desktop.
Download ZIP
jVectorMap custom map.
Raw
gistfile1.txt
<!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>
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jvectormap@2.0.4/jquery-jvectormap.min.js"></script>
<script src="jquery-jvectormap-au-mill.js"></script>
</head>
<body>
<div id="map1" style="width: 800px; height: 600px"></div>
<script>
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];
}
}
}
});
});
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment