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
Can you post the queries you made with ogr2ogr and topojson in order to make the map that you show http://bl.ocks.org/markmarkoh/8856417. Using the queries:
ogr2ogr \
-f GeoJSON
-where "ADM0_A3 IN ('AFG')"
subunits.json
ne_10m_admin_0_map_subunits.shp
and
topojson \
--id-property adm1_code
-p name=NAME
-p name
-o customAfghanMap.topo.json
subunits.json
does not get me the same output in the customAfghanMap.topo.json.
Here is what I get: https://gist.github.com/Peege151/fc8249c5f61fffc17829