I recently needed to present a map on a website so that visitors could choose their region (i.e. a group of countries, which could be arbitrary) before going into the site. After a little playing around, I settled on a solution that uses an SVG map of the world, and used CSS and Javascript to highlight the region and make it clickable.

The first challenge was how to create an interactive area that wasn’t a box. HTML is great, but it’s fundamentally boxy, even when you round the corners off. With some countries being really small, a box-based approach simply wasn’t going to work. That’s where SVG comes in – it’s a vector image in the browser. I managed to find an open-source SVG of the entire world which suited my purposes. I mean, it’s not a perfect map, but that’s the curse of the Mercator projection.

The important thing about this particular SVG is that it’s marked up with country codes. Since SVG is basically just XML, it can include more than just visual data, and in this case the author has included two-letter country codes in the image code. That’s awesome, because it means we can hook into it with other code! For example, here’s an extract showing the SVG markup for Greece, with the two-letter identifier gr .

However, note that you need the SVG source in your HTML document for this to work. If it’s not in the DOM, the browser will treat it like an embedded object or an iframe, and you won’t be able to do anything with it. For the project I was working on, I used PHP to include the file contents into my page. An alternative approach, which I used for this demonstration, is to use Javascript to load the image into the page. You can use either approach. Or something entirely different. Whatever floats your boat. Just make sure the SVG markup ends up in your DOM.

Once it’s there we can start manipulating it. The first thing I did was play around with the styles to make it look a little nicer for my context. A little CSS targeting the path elements is all you need, but note that unlike regular HTML elements you’re going to want to set the fill  and stroke  rather than background  and border . You can use mouse cursor styles too, and transitions, and undoubtedly a whole lot more besides.

Now comes the Javascript. We start off with a list of country codes we want to group together. I started with a few countries in Europe, but you could use anything you like, using the two-letter country codes. Essentially, when we detect that the mouse has entered an SVG path (or group of paths) we check to see if that path (or group) has a country identifier in our region array. If it is, we apply an .active  class to it, and use CSS to change its colour.

I then took that a little further with my demo and catered for multiple regions, just for laughs. We’re using the region index to apply a further class, for example .group1 . Then in the styles we want to give each group a different colour, so we’re defining an array of colours and using a SASS mixin to generate as many variations as we have colours in our list.

Finally, when we click on a country/region we want to do something with it. For the purpose of this demo, I’m just using the index in the class name to look up a name in another array and showing it as a message, but you could just as easily route that to another action depending on your use-case.

Here’s the final demo showing it all at work.

I hope you find that useful. Let me know if you think there are any improvements I could make to the demo, or if you would have approached the problem a different way!

Categories: Internet

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.