SVG with RaphaelJS - Creating Interactive Maps Part 1

Welcome to this section of the weekly series SVG with RaphaelJS. This week we will be going into the creation of interactive maps.

My country of focus for this will be Liberia. Liberia has suffered from the scourge of the Ebola virus and has been in the news. To this end, I have decided to do this tutorial with a focus on Liberia. The principles here can be extended to any country of your choice.

First Things First

You must understand the process of creating an interactive map of a country is classed under Data Visualization. As a result, I will use the process of creating Data Visualization to explain what I am doing.

The process of Data Visualization is listed below:

1. Acquire
2. Parse
3. Filter
4. Mine
5. Represent
6. Refine
7. Interact

Acquire

We start the process of Data Visualization by obtaining the data we want to visualize. In our case, we what to visualize Counties in Liberia. This is a lot like saying State in Nigeria or Regions in Ghana. To do this, we must do a Google search for SVG map of the Counties in Liberia.

Fortunately, the first result is what I am looking for. You click on the link and you should see this page.

It contains a link to all the SVG files for the 15 Counties in Liberia. So what you need to do is open each of the maps in a new tab. I prefer to do this because the SVG maps are coloured and their counties are named. I prefer to do this because the SVG maps are coloured and as a result you could quickly look at the markup and find which county fits which by looking at the SVG file.

Please remember that SVG is an image file represented by text. So by studying the styling of the maps, you can guess which one belongs to a particular county.

When you open any of the tabs for the maps, you should see the following:

So click on the download link and select full resolution from the popup displayed.

Once you have all 15 county maps on your machine, the hardwork starts. Do remember that your files must be in the SVG format. Please read up on the SVG format if you don't understand it.

Parse

Here the goal is to provide some structure into the data's meaning and order it into categories. For our purposes, parsing will be done manually. Open all the 15 SVG files using your text editor and view the source code that generates the images.

Personally this is the hard part. You want to look at all the 15 files and try to isolate their commonalities. What you really want to watch out for is the style attribute. In each of the maps, one county is red. The goal is to understand the structure of the SVG file.

In order to extract a path, we need to get the values of each path for the county. To do this, use the browser window to extract the source of the SVG image by clicking on the map.

Of particular interest in unraveling the secret of this map is to look for the attribute for a path. This is shown below:

Copy your d value for the county in question and save it in a file called path.js. Use the following format.

pathNumber:{

name: "",

path: ""

}

Filter

The goal is to remove all but the data of interest. For our map, we intend to isolate only the paths that will give us the counties. This is where the data is unique to this project. Find the path value for the red outlined SVG shape and select it. Note that each path belongs to a County in Liberia. So note the County name and associate it with the path it belongs to.

Follow the format given above for all the 15 counties in Liberia. In the end, we have a path file which has the paths for all the Counties in Liberia. With this file, we will create the map of Liberia. Next time, we will look at making the map interactive.

The complete path file for Liberia is available at the GitHub repository for this course. You can download it from there.

Next week, we will use this file to create an interactive map of Liberia.

Conclusion

So we have come to the end of this week's section of the SVG with RaphaelJS series. We have learned how to extract the paths the administrative divisions of a country.

My challenge to you is to use this knowledge and create the path file for your country. 

Have a great week.