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> |
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
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
Thanks for this very useful example. I have been able to copy what you have, but when I try to use a different topojson file, I get the error: "Uncaught TypeError: Cannot read property 'offsetWidth' of null."
Have you come across this before? There doesn't seem to be anything fundamentally different between my topojson (https://github.com/amupfill/TopoJSON/blob/master/nigeria_lgas_new_topo.json) and yours, so I'm really not sure what's going on.
Code for my example is here: https://github.com/amupfill/TopoJSON/blob/master/afg.html.
All the best,
Alex