This example belongs to the GeoExamples blog entry Flag map with D3js.
Basically, gets the flag images from the Wikipedia by using Mike Bostock's queue.js library and adds them to the map.
The region represented in the map is marked in red.
In this case, everything is drawn using the Canvas element.
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <body> | |
| <div id="map"></div> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script src="http://d3js.org/topojson.v1.min.js"></script> | |
| <script src="http://d3js.org/queue.v1.min.js"></script> | |
| <script> | |
| var flags = {"Senegal":"http://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/Flag_of_Senegal.svg/200px-Flag_of_Senegal.svg.png", | |
| "Mali":"http://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Flag_of_Mali.svg/200px-Flag_of_Mali.svg.png", | |
| "Gambia":"http://upload.wikimedia.org/wikipedia/commons/thumb/7/77/Flag_of_The_Gambia.svg/200px-Flag_of_The_Gambia.svg.png", | |
| "Mauritania":"http://upload.wikimedia.org/wikipedia/commons/thumb/4/43/Flag_of_Mauritania.svg/200px-Flag_of_Mauritania.svg.png", | |
| "Guinea-Bissau":"http://upload.wikimedia.org/wikipedia/commons/thumb/0/01/Flag_of_Guinea-Bissau.svg/200px-Flag_of_Guinea-Bissau.svg.png", | |
| "Guinea":"http://upload.wikimedia.org/wikipedia/commons/thumb/e/ed/Flag_of_Guinea.svg/200px-Flag_of_Guinea.svg.png", | |
| "Sierra Leone":"http://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Flag_of_Sierra_Leone.svg/200px-Flag_of_Sierra_Leone.svg.png", | |
| "Liberia":"http://upload.wikimedia.org/wikipedia/commons/thumb/b/b8/Flag_of_Liberia.svg/200px-Flag_of_Liberia.svg.png", | |
| "Côte d'Ivoire":"http://upload.wikimedia.org/wikipedia/commons/thumb/f/fe/Flag_of_C%C3%B4te_d%27Ivoire.svg/200px-Flag_of_C%C3%B4te_d%27Ivoire.svg.png", | |
| "Nigeria":"http://upload.wikimedia.org/wikipedia/commons/thumb/7/79/Flag_of_Nigeria.svg/200px-Flag_of_Nigeria.svg.png", | |
| "Burkina Faso":"http://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Flag_of_Burkina_Faso.svg/200px-Flag_of_Burkina_Faso.svg.png", | |
| "Niger":"http://upload.wikimedia.org/wikipedia/commons/thumb/f/f4/Flag_of_Niger.svg/200px-Flag_of_Niger.svg.png", | |
| "Cameroon":"http://upload.wikimedia.org/wikipedia/commons/thumb/4/4f/Flag_of_Cameroon.svg/200px-Flag_of_Cameroon.svg.png", | |
| "Benin":"http://upload.wikimedia.org/wikipedia/commons/thumb/0/0a/Flag_of_Benin.svg/200px-Flag_of_Benin.svg.png", | |
| "Togo":"http://upload.wikimedia.org/wikipedia/commons/thumb/6/68/Flag_of_Togo.svg/200px-Flag_of_Togo.svg.png", | |
| "Ghana":"http://upload.wikimedia.org/wikipedia/commons/thumb/1/19/Flag_of_Ghana.svg/200px-Flag_of_Ghana.svg.png", | |
| "Chad": "http://upload.wikimedia.org/wikipedia/commons/thumb/4/4b/Flag_of_Chad.svg/200px-Flag_of_Chad.svg.png", | |
| "Gabon": "http://upload.wikimedia.org/wikipedia/commons/thumb/0/04/Flag_of_Gabon.svg/200px-Flag_of_Gabon.svg.png", | |
| "Equatorial Guinea": "http://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Flag_of_Equatorial_Guinea.svg/200px-Flag_of_Equatorial_Guinea.svg.png", | |
| "Central African Republic": "http://upload.wikimedia.org/wikipedia/commons/thumb/6/6f/Flag_of_the_Central_African_Republic.svg/200px-Flag_of_the_Central_African_Republic.svg.png", | |
| "Congo": "http://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Flag_of_the_Republic_of_the_Congo.svg/200px-Flag_of_the_Republic_of_the_Congo.svg.png", | |
| "Algeria": "http://upload.wikimedia.org/wikipedia/commons/thumb/7/77/Flag_of_Algeria.svg/200px-Flag_of_Algeria.svg.png"}; | |
| var width = 960, height = 500; | |
| var projection = d3.geo.mercator() | |
| .scale(1400) | |
| .rotate([3,-10,0]); | |
| var canvas = d3.select("#map").append("canvas") | |
| .attr("width", width) | |
| .attr("height", height); | |
| var path = d3.geo.path() | |
| .projection(projection); | |
| var keys = []; | |
| for(var k in flags) keys.push(k); | |
| var loadImage = function(src, cb) { | |
| var img = new Image(); | |
| img.src = src; | |
| var error = null; | |
| img.onload = function() { | |
| cb(null, img); | |
| }; | |
| img.onerror = function() { | |
| cb('ERROR LOADING IMAGE ' + src, null); | |
| }; | |
| }; | |
| var q = queue() | |
| .defer(d3.json, "/mbostock/raw/4090846/world-110m.json") | |
| .defer(d3.tsv, "/mbostock/raw/4090846/world-country-names.tsv"); | |
| for(var k in flags) { | |
| q.defer(loadImage, flags[k]); | |
| } | |
| q.await(ready); | |
| function ready(error, world, names) { | |
| if (error) { | |
| alert('error: ' + error); | |
| return ; | |
| } | |
| var countries = topojson.feature(world, world.objects.countries), | |
| land = topojson.feature(world, world.objects.land), | |
| globe = {type: "Sphere"}; | |
| context = canvas.node().getContext("2d"); | |
| context.strokeStyle = '#766951'; | |
| context.fillStyle = '#d8ffff'; | |
| context.beginPath(), path.context(context)(globe), context.fill(), context.stroke(); | |
| context.fillStyle = '#d7c7ad'; | |
| context.beginPath(), path.context(context)(land), context.fill(); | |
| flag_countries = countries.features.filter(function(d) { | |
| return names.some(function(n) { | |
| if (d.id == n.id && keys.indexOf(n.name) > -1) { | |
| d.name = n.name | |
| d.flag_src = flags[n.name]; | |
| d.flag_img = new Image(); | |
| d.flag_img.src = d.flag_src; | |
| return true;} | |
| }); | |
| }); | |
| for (i=0; i<flag_countries.length; i++) { | |
| var bounds = path.bounds(flag_countries[i]); | |
| if (bounds[0][0] < 0) bounds[0][0] = 0; | |
| if (bounds[1][0] > width) bounds[1][0] = width; | |
| if (bounds[0][1] < 0) bounds[0][1] = 0; | |
| if (bounds[1][1] < 0) bounds[1][1] = height; | |
| context.save(); | |
| context.beginPath(), path(flag_countries[i]); | |
| context.clip(); | |
| context.drawImage(flag_countries[i].flag_img,0,0,flag_countries[i].flag_img.width,flag_countries[i].flag_img.height, | |
| bounds[0][0], bounds[0][1], | |
| bounds[1][0] - bounds[0][0], bounds[1][1] - bounds[0][1]); | |
| context.restore(); | |
| } | |
| //Drawing the borders | |
| context.strokeStyle = '#444444'; | |
| context.beginPath(), path(countries), context.stroke(); | |
| } | |
| </script> | |
| </body> | |
| </html> |
