# IT:AD:DataMaps #

<callout type="Navigation" class="small">

* [[../|(UP)]]
{{indexmenu>.#2|nsort tsort}}
* See: 
  * [[IT/AD/MAPS/]]
  * [[IT/AD/TOPOJSON/]]
  * [[IT/AD/D3.JS/HowTo/Maps/]]


</callout>


<panel title="Summary">

At present (Q2/2017) getting a bit long in the tooth and needing a refresher -- but it remains an *awesome* way to embed maps in your JS/TS apps.


</panel>


## Notes ##

* Has Dependencies on D3.js and Topojson
* At present, reliant on a Q3/2016 version of D3.JS (v3, not v4)
* Have been unable to get it to work with custom maps (eg: NZ). 
* Demos:
  * http://datamaps.github.io/old.html


## SOurce ##

* Repo:
  * https://github.com/markmarkoh/datamaps/
* Muck around:
  * http://jsbin.com/nutawiboci/1/edit




## NZ Maps ##

One map is:
* https://cdnjs.cloudflare.com/ajax/libs/datamaps/0.5.8/datamaps.nzl.js
But this shows -- when zoomed in -- that it's a bit rough:
But to make a map for traffic, etc. remember that you don't zoom in, so it's fine.
* https://github.com/markmarkoh/datamaps/blob/master/src/js/data/nzl.topo.json
The world hires is even worse (and also has some glitches), again, think it's ok for the purpose of showing nz.
* https://github.com/markmarkoh/datamaps/blob/master/src/js/data/world.hires.topo.json