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.
This version uses SVG.
| <!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 svg = d3.select("#map").append("svg") | |
| .attr("width", width) | |
| .attr("height", height); | |
| var path = d3.geo.path() | |
| .projection(projection); | |
| var keys = []; | |
| for(var k in flags) keys.push(k); | |
| var q = queue() | |
| .defer(d3.json, "/mbostock/raw/4090846/world-110m.json") | |
| .defer(d3.tsv, "/mbostock/raw/4090846/world-country-names.tsv"); | |
| 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"}; | |
| svg.append("path") | |
| .datum(globe) | |
| .style("fill", "#d8ffff") | |
| .attr("d", path); | |
| svg.append("path") | |
| .datum(land) | |
| .style("fill", "#d7c7ad") | |
| .attr("d", path); | |
| 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]; | |
| 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; | |
| svg.append("clipPath") | |
| .attr("class","mask") | |
| .attr("id",function(d){return flag_countries[i].id;}) | |
| .append("path") | |
| .attr("d",path(flag_countries[i])); | |
| svg.append("image") | |
| .attr("xlink:href",flag_countries[i].flag_src) | |
| .attr("x", bounds[0][0]) | |
| .attr("y", bounds[0][1]) | |
| .attr("width", bounds[1][0] - bounds[0][0]) | |
| .attr("height", bounds[1][1] - bounds[0][1]) | |
| .attr("preserveAspectRatio","none") | |
| .attr("clip-path", function(d){return "url(#"+flag_countries[i].id+")";}); | |
| } | |
| //Drawing the borders | |
| svg.append("path") | |
| .datum(land) | |
| .style("stroke", "#444444") | |
| .style("fill", "None") | |
| .attr("d", path(countries)); | |
| } | |
| </script> | |
| </body> | |
| </html> |
