Since the custom map data requires a AJAX request, all of the map plugins need to be instantiated in the done callback provided by 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', | |
| someBubbleFill: '#f0a0a0' | |
| }, | |
| 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}; | |
| }, | |
| done: function() { | |
| map.bubbles([ | |
| {centered: 'AFG-1741', fillKey: 'someKey', radius: 25}, | |
| {centered: 'AFG-1747', fillKey: 'someBubbleFill', radius: 45}, | |
| ]); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |