Interactive Map of Europe

What the map is for

I made this map because I needed it. It's designed to allow you to show the European countries that a given activity applies to. The specific driver was the need to show which countries are covered in a proposal for an EC-funded project. At the time of writing, I'm working on a proposal for a Thematic Network that must cover a majority of the EEA which is the EU plus Norway, Lichtenstein et al..

How to use it

Click on a country on the map or select its name from the list. Either way the relevant shape on the map will toggle between being filled in and left in the neutral background colour.

The default 'fill in' colour is bright blue but you can change it to whatever you like. Click in the colour picker and make your choice. You can do this at any point and retain the colour you've already used so, for example, say you begin by clicking Norway using the default colour, then you change the colour to Yellow (FFFF00) you might then select Sweden which would show as yellow leaving Norway blue. And if you want to try and disprove the four colour theorem well, this might be the tool for you.

I tried to build a fancy export function but couldn't make it work reliably and anyway, so, sorry, this is a bit clunky but once you've created your map, just take a screenshot and paste that into your document (of course you'll want to crop it). You can resize the map at any time whilst retaining the map you've made so feel free to work at full size (or bigger) and then select one of the small sizes. You might need to do this if you need to mark Lichtenstein or Andorra on your map (Andorra is visible at A4 size, Lichtenstein is barely visible even at full size - it's lost in the width of the border between the extreme west of Austria and Switzerland).

The politics of cartography

Depending on your point of view, Kosovo should or shouldn't be marked as a separate country. It doesn't show up on this map simply because the original map I used didn't include it. Likewise, you may or may not be comfortable with the borders shown for Ukraine or Israel. I need make no further comment.

Some notes on the Web technologies used

The basic map is an SVG document that includes the scripting to detect the click events and toggle between the current 'filled' and 'vanilla' fill colour. I could have created the checkboxes as part of the SVG but it was just quicker and easier to do this in an HTML doc which is what I've done. I use HTML5 across this site and need to access the SVG with scripting so I've used <embed />.

Accessing the SVG doc's DOM from the HTML doc requires a bit of work that, mercifully, someone else has done and kindly posted. Thank you Jonathan Watt. The colour picker is a really easy to implement library (see credits) but the biggest pain was that different browsers report the colour of elements in different ways, some with RGB and some with hex values but the colour picker reports values in both so this isn't hard to handle.

The eventual simplicity of the scripting is pleasing - but I admit I went through a few rounds of frustration to get there. The page will work in tablets and mobile but it's really designed as a desktop tool.

I hope you find it useful.

Credits

First of all I must credit Madman2001/Wikimedia Commons for the original map that I have amended only to replace the id values of the polygons with one based on the ISO-3166-2 code for the relevant country (some countries, like UK, Spain and Portugal, have more than one polygon). The map is made available under the creative Commons Attribution-Share Alike 3.0 Unported licence which therefore applies to this page too.

The colour picker is from JSColor and, as noted, the crucial bit of JavaScript that allows access across the SVG and HTML DOMs was from Jonathan Watt.

I am grateful to Philip Duchesne for telling me about the need to include the preserveAspectRatio="xMinYMin" attribute in the SVG to make the map the right size in Chrome.

Thanks also to Lauri Kuusi for educating me about the Finnish Åland Islands. He has also ppinted out that the map erroneously shows Madeira as part of Spain. I will fix in due course that but it requires me to spend time getting deep into the SVG.