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.

For this case probably not, because you have to know d3 and topojson. Here we just need to know basic svg, jquery and css. It’s nice to do things the simple way sometimes. We don’t have to depend on heavier libs all the time and THAT is refreshing.

https://www.behance.net/massimocassandro Massimo Cassandro

The ease of use is really the reason I wrote this thing. Thank you

Setudio

Nice Article, thanks for share :)

http://jumanja.net/ Ju Manja

Dear Massimo, Great Article. I was looking into a way to replace old image html map, that doesn’t allow well the mouseover and transparency. Your solution is clean and simple, but very powerful. So thanks a ton for share it.

https://www.behance.net/massimocassandro Massimo Cassandro

Thanks

http://drmsite.com Dominic Myers

Cracking article! Thank you – replicated the results using Inkscape and plain Javascript rather than jQuery.

Ina Kancheva

That was super easy and exactly what I needed.
Thank you! Thank you! Thank you! :)

https://www.behance.net/massimocassandro Massimo Cassandro

I’m glad it has been helpful. Thanks

Camilo Saavedra

Oh my god Man, very very thakns for this helpful

Chears !

Fernando Saavedra

Amazing tutorial, thanks a lot for this very useful guidelines. I was avoiding learning SVG but after this article (and the results i got from it) I´ll try to dedicate some more time on the subject. Thanks again!