datamaps
datamaps copied to clipboard
Published
20 hours ago •
markmarkoh
markmarkoh
How to use scope for specific country?
I have search all the issues here, but it doesn't appear. Like brazil, cameroon, etc. And i have opened the author's code in JS Bin, but still the same didn't appear. Can you help me please? thanks
As far as I understand from README, you should download specific file from https://github.com/markmarkoh/datamaps/tree/master/dist (e.g. datamaps.bra.min.js), then insert it on a page using script tag (as usual) and then set scope: 'bra' (in case of datamaps.bra.min.js).
After that you should set proper projection to move your country to the center to the viewport :-)
For example, it works for me:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Map</title>
<script src="d3.min.js"></script>
<script src="topojson.min.js"></script>
<script src="datamaps.bra.min.js"></script>
<style>
body {
margin: 0;
padding: 16px;
}
</style>
</head>
<body>
<div id="container" style="position: relative; width: 500px; height: 500px;"></div>
<script>
var map = new Datamap({
element: document.getElementById('container'),
scope: 'bra',
setProjection: function(element) {
var projection = d3.geo.mercator()
.center([-50, -10])
.rotate([0, 0])
.scale(400)
.translate([element.offsetWidth / 2, element.offsetHeight / 2]);
var path = d3.geo.path()
.projection(projection);
return {path: path, projection: projection};
},
});
</script>
</body>
</html>
