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>

var flags = {"Senegal":"https://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/Flag_of_Senegal.svg/200px-Flag_of_Senegal.svg.png", 
            "Mali":"https://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Flag_of_Mali.svg/200px-Flag_of_Mali.svg.png", 
            "Gambia":"https://upload.wikimedia.org/wikipedia/commons/thumb/7/77/Flag_of_The_Gambia.svg/200px-Flag_of_The_Gambia.svg.png", 
            "Mauritania":"https://upload.wikimedia.org/wikipedia/commons/thumb/4/43/Flag_of_Mauritania.svg/200px-Flag_of_Mauritania.svg.png", 
            "Guinea-Bissau":"https://upload.wikimedia.org/wikipedia/commons/thumb/0/01/Flag_of_Guinea-Bissau.svg/200px-Flag_of_Guinea-Bissau.svg.png",
            "Guinea":"https://upload.wikimedia.org/wikipedia/commons/thumb/e/ed/Flag_of_Guinea.svg/200px-Flag_of_Guinea.svg.png",
            "Sierra Leone":"https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Flag_of_Sierra_Leone.svg/200px-Flag_of_Sierra_Leone.svg.png",
            "Liberia":"https://upload.wikimedia.org/wikipedia/commons/thumb/b/b8/Flag_of_Liberia.svg/200px-Flag_of_Liberia.svg.png",
            "Côte d'Ivoire":"https://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":"https://upload.wikimedia.org/wikipedia/commons/thumb/7/79/Flag_of_Nigeria.svg/200px-Flag_of_Nigeria.svg.png",
            "Burkina Faso":"https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Flag_of_Burkina_Faso.svg/200px-Flag_of_Burkina_Faso.svg.png",
            "Niger":"https://upload.wikimedia.org/wikipedia/commons/thumb/f/f4/Flag_of_Niger.svg/200px-Flag_of_Niger.svg.png",
            "Cameroon":"https://upload.wikimedia.org/wikipedia/commons/thumb/4/4f/Flag_of_Cameroon.svg/200px-Flag_of_Cameroon.svg.png",
            "Benin":"https://upload.wikimedia.org/wikipedia/commons/thumb/0/0a/Flag_of_Benin.svg/200px-Flag_of_Benin.svg.png",
            "Togo":"https://upload.wikimedia.org/wikipedia/commons/thumb/6/68/Flag_of_Togo.svg/200px-Flag_of_Togo.svg.png",
            "Ghana":"https://upload.wikimedia.org/wikipedia/commons/thumb/1/19/Flag_of_Ghana.svg/200px-Flag_of_Ghana.svg.png",
            "Chad": "https://upload.wikimedia.org/wikipedia/commons/thumb/4/4b/Flag_of_Chad.svg/200px-Flag_of_Chad.svg.png",
            "Gabon": "https://upload.wikimedia.org/wikipedia/commons/thumb/0/04/Flag_of_Gabon.svg/200px-Flag_of_Gabon.svg.png",
            "Equatorial Guinea": "https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Flag_of_Equatorial_Guinea.svg/200px-Flag_of_Equatorial_Guinea.svg.png",
            "Central African Republic": "https://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": "https://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": "https://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, "/../../data/world-110m.json")
  .defer(d3.tsv, "/../../data/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>

Modified http://d3js.org/d3.v3.min.js to a secure url

Modified http://d3js.org/topojson.v1.min.js to a secure url

Modified http://d3js.org/queue.v1.min.js to a secure url

Changed /mbostock/raw/4090846/world-110m.json to a local referenece

Changed /mbostock/raw/4090846/world-country-names.tsv to a local referenece

https://d3js.org/d3.v3.min.js

https://d3js.org/topojson.v1.min.js

https://d3js.org/queue.v1.min.js