Demo app to go along with blog post about creating custom TopoJSON data here
http://datamaps.markmarkoh.com/using-custom-map-data-w-datamaps/
http://datamaps.markmarkoh.com/using-custom-map-data-w-datamaps/
<!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> | |
<script src="http://rawgithub.com/markmarkoh/datamaps/master/dist/datamaps.none.min.js"></script> | |
<div id="afghan" style="height: 500px; width: 900px;"></div> | |
<script> | |
var map = new Datamap({ | |
element: document.getElementById('afghan'), | |
geographyConfig: { | |
dataUrl: 'customAfghanMap.topo.json' | |
}, | |
scope: 'afghan', | |
fills: { | |
defaultFill: '#bada55', | |
someKey: '#fa0fa0' | |
}, | |
data: { | |
'AFG-1758': {fillKey: 'someKey'}, | |
'AFG-1747': {fillKey: 'someKey'} | |
}, | |
setProjection: function(element) { | |
var projection = d3.geo.mercator() | |
.center([66.166667, 34.4444]) | |
.scale(2200) | |
.translate([element.offsetWidth / 2, element.offsetHeight / 2]); | |
var path = d3.geo.path().projection(projection); | |
return {path: path, projection: projection}; | |
} | |
}); | |
</script> | |
</body> | |
</html> |
Dear Sir,
i want to display label on each label on the map of afghanistan, i tried many ways but could not display label,
will you help me please