Flag map with D3js

 In this example I'll show how to draw a map filling the polygons with images. In this case, Western Africa contries filled with their flags:

The zone represented is this one:

As usual, you can get all the code at GitHub:

• Canvas version
• SVG version

Canvas

The code basically uses Mike Bostock's queue.js to download all the flag images from the wikipedia, the world borders and the contries names. Once everyting is donwloaded, a function is triggered, that draws the flags, clipping them by the country shape. The first version is written using Canvas instead of SVG, just to see how the clipping and loading of external images is done.

The code:

• I make an array with all the image locations, indexing by name to make it easier to understand, even though the map file doesn't contain names but indexes.
• Lines 37 to 47 configure the map projection and the Canvas element.
• Lines 54 to 77 load all the elements. Since loading an image is not a function in D3js, a custom function has to be created, returning the error or the success value. If images are not preloaded, the code will try to paste them anyway, so the country flag won't be drawn
• Function ready is triggered when everything is loaded, and it actually draws the map.
• The error is handled at the first lines (very poorly, I know, a nodata image could be loaded, or something like that)
• Until line 97, the base map is loaded (the land gets hidden later by the flags).
• Lines 100 to 109 get the countries from the list, looks for them in the countries file by using a filter function and creates the images we are going to use later.
• At line 111, all the flags are pasted on the map.
• context.save();  Saves what has been drawn until the moment, so new things can happen
• Then, the country border is drawn in a path, without using any color or fill, because then, context.clip(); is called to use this path as the clip path.
• The image is pasted, using the drawImage method. The bounds are recalculated before for the countries that appera cut at the map.
• context.restore(); frees the clipping.
• Finally, at line 130, the borders are drawn to make the map prettier.

SVG

The SVG version is simplier, because no image preloading is needed, since the svg contains only the image source, and the browser will draw it when the image loads.

• The code is almost the same, just that it doesn't preload the images with queue.js
• Obviously, the canvas tag is replaced by SVG, and to draw, the usual SVG mode is used.
• To clip, a clipPath is defined with the country shape and an id, so it can be assigned to an image. 
• The image is added using an image tag
• xlink:href sets the image link
• clip-path sets the path used to clip the image
• preserveAspectRatio has to be set as none, so the image ratio can be changed to make the flag fit the bounding box.

Notes:

To preload images using queue.js I asked this question at StackOverflow, kindly
answered by explunit.