Skip to content

Instantly share code, notes, and snippets.

@rveciana
Last active December 20, 2015 20:48
Show Gist options
  • Save rveciana/6192418 to your computer and use it in GitHub Desktop.
Save rveciana/6192418 to your computer and use it in GitHub Desktop.
Flag map with D3js

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 zone represented in 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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment