Skip to content

Instantly share code, notes, and snippets.

/index.html

Created October 17, 2016 13:38
Show Gist options
  • Save anonymous/67c2c2b48e72891ffdb3c42880f32c0e to your computer and use it in GitHub Desktop.
Save anonymous/67c2c2b48e72891ffdb3c42880f32c0e to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<!-- I recommend you host this file on your own, since this will change without warning -->
<script src="http://datamaps.github.io/scripts/datamaps.world.min.js?v=1"></script>
<div id="datamap" style="position: relative; width: 80%; max-height: 600px; border:1px solid black;"></div>
<script>
//basic map config with custom fills, mercator projection
var map = new Datamap({
scope: 'world',
element: document.getElementById('datamap'),
projection: 'mercator',
height: 500,
fills: {
defaultFill: 'white'
},
done: function(datamap) {
datamap.svg.selectAll('.datamaps-subunit').on('click', function(geography) {
alert(geography.properties.name);
});
},
geographyConfig: {
dataUrl: null, // If not null, datamaps will fetch the map JSON (currently only supports topojson)
hideAntarctica: true,
hideHawaiiAndAlaska : false,
borderWidth: 1,
borderOpacity: 1,
borderColor: 'orange',
popupOnHover: true, // True to show the popup while hovering
highlightOnHover: true,
highlightFillColor: 'orange',
highlightBorderColor: 'orange',
highlightBorderWidth: 1,
highlightBorderOpacity: 1
}
})
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment