Dynamic Geo Maps with SVG and jQuery

When I need to create charts, my first choice is Google Charts or another dedicated library. Sometimes, though, I need some specific features that I can’t find there. In these cases, SVG images prove to be very valuable.

Recently, I had to build a report page that was able to show a map of Italy in which each region had a different color tone according to some values retrieved from a database. Thanks to SVG, this task was very easy.

Creating the SVG Map in Illustrator

First, I drew a map of Italy with Illustrator:

Every region is drawn as a single object, and each of them has its own level, with a name matching the code used in the database to identify its relative data (for example: “tos” for Tuscany).

Finally the map must be saved as an SVG file. You have to pay attention to set the “CSS property” option to “Style Elements” in Illustrator, as shown below:

Opening the file just created, you will see it contains a set of g tags whose IDs match the names of Illustrator levels.

Building our HTML File

Each item contained in g tags has a st0 class so that the stroke and fill CSS properties can be assigned to them:

If you try to change those values, the map will change immediately:

Now, we can use that code to build our html file with inline SVG as shown below (code has been shortened for convenience):

After that, a color is chosen (in this case, #0b68aa), and we assign it to the region with the highest population value. The other regions will be colored with tones of the main color in proportion to their percentage of the population.

Next we can add some JavaScript.

First of all, we have to determine the region with the maximum population value. This can be done with a few rows of code.

Once a temporary array containing the population values has been built, we can use the Math.max method on it:

First, with mouseover, we build a div containing the information to display (region name and population). The div is built every time the mouse hovers over a g element and is appended to the document body;

mouseleave removes that div when the cursor is outside the hovered region;

The last method, mousemove, retrieves mouse coordinates and assigns them to the generated divs.