Webmakers/Projects/aWorldOfLinks

A World Of Links

In this project you'll learn a little bit about vector graphics, links, and url routing to create a totally new and interesting way to navigate the world wide web. Are you ready?

Here's what you'll need:

• A suitable SVG (Scalable Vector Graphic) image of a map of the world
• A little bit of knowledge about XML
• About twenty minutes

Alright, our goal is to have a map of the world with each country linking to it's wikipedia page. For bonus points we'll create some kind of effect when you hover over the country. First let's go to the wikimedia commons and look for a suitable svg. This one will do: http://en.wikipedia.org/wiki/File:World_map_-_low_resolution.svg. When you get to the wikipedia page there are all kinds of interesting links and information, but you'll want to click on the image itself, and then right click and pick "View Source." You'll get something like this:

 <?xml version="1.0" encoding="utf-8"?>
 <svg version="1.2" baseProfile="tiny" id="svg2" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="950px" height="620px" viewBox="0 0 950 620" xml:space="preserve">
   <path id="papua new guinea" d="M852.76,348.29l-0.37,24.44l3.52-0.19l4.63-5.41l3.89,0.19l2.5,2.24l0.83,6.9l7.96,4.2l2.04-0.75v-2.52l-6.39-5.32l-3.15-7.28l2.5-1.21l-1.85-4.01l-3.7-0.09l-0.93-4.29l-9.81-6.62L852.76,348.29L852.76,348.29z"/>
   <path id="egypt" d="M521.93,243.06l2.67,0.07l5.2,1.44l2.47,0.07l3.06-2.56h1.43l2.6,1.44h3.29l0.59-0.04l2.08,5.98l0.59,1.93l0.55,2.89l-0.98,0.72l-1.69-0.85l-1.95-6.36l-1.76-0.13l-0.13,2.16l1.17,3.74l9.37,11.6l0.2,4.98l-2.73,3.15L522.32,273L521.93,243.06L521.93,243.06z"/>
   <path id="uganda" d="M538.3,339.09l3.03,2.84l1.9-1.21l5.14-0.84l0.88,0.09l0.33-1.95l2.9-6.1l-2.44-5.08l-<path id="greece" d="M506.71,217.6l-0.11,1.33l4.63,2.33l2.21,0.85l-1.16,1.22l-2.58,0.26l-0.37,1.17l0.89,2.01l2.89,1.54l1.26,0.11l0.16-3.45l1.89-2.28l-5.16-6.1l0.68-2.07l1.21-0.05l1.84,1.48l1.16-0.58l0.37-2.07l5.42,0.05l0.21-3.18l-2.26,1.59l-6.63-0.16l-4.31,2.23L506.71,217.6L506.71,217.6z"/>
 </svg>

If you've worked with HTML the tags (<path d="M0,0l1,1" />) will look familiar. The tags <svg> and <path> are paths specific to svg files. The code in those tags creates the shapes of the countries in the map. Conveniently this svg also has id's for each of the paths. We'll be utilizing those in a moment.

There are two features of svg images we'll be taking advantage of. Firstly, in modern browsers, you can just grab the code above and drop it in a div, or anywhere else in the middle of your html and it should work just fine. The second feature are that svg's can handle links just like html, well almost just link. You'll need to write your links like this:

 <a xlink:href="http://en.wikipedia.org/wiki/country-name">
   <path id="country-name" d="M0,0l10,10z" />
 </a>

Notice two things about our href. First "xlink:" is prepended to it, that's because technically it's xml not html. Secondly, the url: http://en.wikipedia.org/country-name. Wikipedia searches for whatever you put after the .org/ How convenient is that!?

So, all we need to do, is copy the svg, drop in an html doc, and wrap each of the paths with an <a> tag that has an xlink:href equal to wikipedia.org/ and then the country name with the id.

If you have all day, you can copy paste things around for a few hours, but there are some sophisticated text editors out there with multiple selection or search-replace tools that can save us a ton of time. (https://www.youtube.com/watch?v=i2SVJa2EGIw)

For bonus points add a css hover effect, with the a:hover pseudo class, so you can tell which country you're about to click on in the map.