Skip to content

Instantly share code, notes, and snippets.

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 StevenPuttemans/9d0f721ccdaaea1913642f1fe04298dc to your computer and use it in GitHub Desktop.
Save StevenPuttemans/9d0f721ccdaaea1913642f1fe04298dc to your computer and use it in GitHub Desktop.
+++
# Travel locations
widget = "custom"
active = true
date = "2018-03-23T00:00:00"
+++
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<link href="http://stevenputtemans.github.io/jqvmap/dist/jqvmap.css" media="screen" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="http://stevenputtemans.github.io/jqvmap/dist/jquery.vmap.js"></script>
<script type="text/javascript" src="http://stevenputtemans.github.io/jqvmap/dist/maps/jquery.vmap.world.js" charset="utf-8"></script>
<link rel="stylesheet" href="http://stevenputtemans.github.io/css/travelmap.css">
<script type="text/javascript">
jQuery(document).ready(function () {
var enabledRegions = ['be', 'jp', 'fr', 'nl', 'se', 'il', 'gb', 'es'];
jQuery('#vmap').vectorMap({
map: 'world_en',
enableZoom: true,
showTooltip: true,
backgroundColor: '#333333',
selectedColor: '#96ff27',
hoverOpacity: 0.8,
selectedRegions: enabledRegions,
onRegionClick: function(event, code, region){
// Check if this is an Enabled Region, and not the current selected on
if(enabledRegions.indexOf(code) === -1){
// Not an Enabled Region
event.preventDefault();
} else {
// Enabled Region. Update Newly Selected Region.
event.preventDefault();
// alert('Clicked')
}
},
onRegionSelect: function(event, code, region){
console.log(map.selectedRegions);
}
});
});
</script>
</head>
<body style="background-color: #333">
<div id="vmap" style="width: 100%; height: 100%;"></div>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment