Im trying to display a France map based on the Datamaps plugin. with all the attempts i tried i couldn't succeed.
This is my HTML :
<div id="container"></div>
This is my js :
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/topojson/1.6.9/topojson.min.js"></script>
<script src="../../../node_modules/datamaps/dist/datamaps.fra.min.js"></script>
<script>
var map = new Datamap({
element: document.getElementById('container'),
geographyConfig: {
dataUrl: null,
//dataUrl: "../../assets/script/fra.topo.json",
popupOnHover: true,
highlightOnHover: true,
borderColor: '#444',
borderWidth: 0.5,
},
scope: 'fra',
fills: {
'MAJOR': '#306596',
'MEDIUM': '#0fa0fa',
'MINOR': '#bada55',
defaultFill: '#dddddd'
},
setProjection: function (element) {
var projection = d3.geo.mercator()
.center([78.9629, 23.5937]) // always in [East Latitude, North Longitude]
.scale(1000);
var path = d3.geo.path().projection(projection);
return {
path: path,
projection: projection
};
}
});
</script>
When i checked the page and inspected it i saw an svg wut the page is empty (Image below) enter image description here
You appear to be setting the center of the map in the wrong place as you are only using FRA (France) data. The centre should be about 2, 46 not 78.9629, 23.5937. The first value is longitude then latitude.
var projection = d3.geo.mercator()
.center([2.0, 46.0])
.scale(1000);