Creating an image map from SVG

The world map was very complicated to do — part of the reason I chose the USA map for the example was that it didn’t involve getting bogged down in painful meddling in the internals of an SVG file.

Firstly, the link on the world map demo page is going to the core map — I actually used this variant: http://en.wikipedia.org/wiki/I…

I edited the SVG file in Inkscape and removed a lot of the tiny islands. I also had to repeatedly change the scale of the image here, in order to make the output line up with the final image. This was very trial-and-error.

Then I had to use an extremely long command line, because there is no single group id that includes all countries. Instead, each country has its two-letter ISO code as an id. So it looked something like:

python svg2imagemap.py BlankMap-World6-Equirectangular.svg 1000 507 se id ye mg …[etc]… jp au th ve

In retrospect it might have been easier to edit the SVG file to just remove everything that wasn’t a country.

Finally, I hand-edited the output to include better titles than, say, “path5325”.

Complicated and painful. In all honesty, if you need a world map imagemap, it would probably be a lot easier to just rescale the one used on my demo. (It’s far simpler to take the already-rewritten map and just scale all the coordinates than it is to deal with the SVG again.)

Hello David,

I just found this post googling for a way to create an imagemap out of an SVG file. Unfortunately I have 0 programming skill. I have no clue how to run a python script (just downloaded python, but have found no way to run your script with the correct command line). Do you plan on creating an application (.exe) for this? Or could you explain to a dummy like me how to use your script?

I’m working on a map (currently a large .psd file) of a Fantasy world which I’d like to turn into several navigable client side imagemaps (.png’s of world, continents, regions, countries, counties). From the low scale world map you could navigate to a large scale county map and get more details etc.

Hi, I’m tryng your python script, but I’m experiencing some problems.
When I first run the script I got this error:
C:Python25>python.exe svg2imagemap.py Italia.svg 1000 1000 regioni
Traceback (most recent call last):
File “svg2imagemap.py“, line 49, in
raw_width = float(svg.getAttribute(‘width’))
ValueError: invalid literal for float(): 553.423px

I have a tryed editing line 49 e 50 from:

raw_width = float(svg.getAttribute(‘width’))

to

raw_width = float(svg.getAttribute(‘width’).replace(‘px’, ”))

But now no errors are displayed, but the result file is 0 byte.

If can be useful for debug the doctype of the file is:

Any help appreciated, thank you

David –

I noticed that your image map of the world contains many doubled coordinates, that is, consecutive coordinates that are the same x-y pair (probably due to float-to-integer roundoff).

Here (http://pyparsing.pastebin.com/… is a pyparsing script to post-process your generated image map – on your map of the world, it removes over 7700 duplicate coords. The maximum number of duplicates was 14 on line 108.

— Paul

Interestingly, I want to do the same thing for my django-worldmap application – http://lurkingideas.net/worldm….

Having spent the several hours looking for a solution, it seems the only way to do it is to parse the svg and draw the map again somehow – like you have done.

Thanks, at least I know there is probably no other way 🙂

One may also use the Batik framework [1] for that. There’s a patch which is directed towards creating an image map which, although with some limitations, can be a serious helper! 😉
Unfortunately, to use the patch, some development experience is needed (one needs to user the source version, not a binary release).

Hope this helps,
Helder Magalhães

[1] http://xmlgraphics.apache.org/…
[2] https://issues.apache.org/bugz…

Hello, David!
I tried to use your script for parsing this http://narod.ru/disk/135968960… file.
Output file:
http://narod.ru/disk/135969530…
But it does not work.
Please help me to solve this problem.

Hello, would it be possible to somehow add zoom and pan functionality to the image map? Something rather like this:
http://wayfarerweb.com/jquery/…
I’m afraid this is rather beyond me as I am a bit of a newbie still!

Also there are quite a few geographic imagemaps already constructed with polygons delineated for countries, states and provinces on Wikipedia here; http://en.wikipedia.org/wiki/C…

That is some pretty useful information for saving images. Thanks for your research. I shall put it to work immediately.

Open up your vector-based map in Adobe illustrator and Save for web & devices — select HTML & Images and it churns out the and coords.

Hi David,
I am trying to run the below script to generate a smaller size of th png without success.
svg2imagemap.py Map_of_USA_with_state_names.svg 800 553 States

Traceback (most recent call last):
File “svg2imagemap.py“, line 33, in ?
import parse_path
File “parse_path.py“, line 8
from pyparsing import (ParserElement, Literal, Word, CaselessLiteral,
^
SyntaxError: invalid syntax

Thank you David for your quick response.
I installed python 2.4.4 then ran. HTML file is created with 0 bytes.
C:map>svg2imagemap.py Map_of_USA_with_state_names.svg 960 593 States
States matrix(1.00433, 0, 0, 1.00906, -19.9329, -136.405)

To resize existing map, you can use this code, it will recalculate the coords by a new ratio – the one you used to resize the png image:
def resize_map_area():
output = []

def compute_new_size(old_size):<br>        old_size = old_size.groups()[0]<br>#        print old_size<br>        return str(int(round(int(old_size) * 0.9375)))

coords = []<br>    for l in f.readlines():<br>        match = re.search(re_coords,l)<br>        if match:<br>            coords_line = match.groups()<br>#            print coords_line<br>            finds = re.sub(re_coord,compute_new_size,coords_line[1])<br>#            print finds<br>            print l<br>            replaced_coords = re.sub(re_coords,finds,l)<br>            print coords_line[0] + replaced_coords + coords_line[2]<br>            output.append(coords_line[0] + replaced_coords + coords_line[2])<br>        else:<br>            output.append(l)

Thank you Vladimir,
Is there way a to show or hide a small grahics (for ex, a small plus sign)in each state? I have to show one of four different types of small graphics in each state.

for all those who are getting 0 byte html file, edit parse_path.py, change line 153 into:

    if command[0] == 'M' or command[0] == 'm':<br>line 157 into:

    elif command[0] == 'L' or command[0] == 'l':<br>and finally line 159 into:

    elif command[0] == 'C' or command[0] == 'c':

(making it case insensitive to these directives).

And after downgrading from Python 3.2.2 to 2.7.2, the error changes to:
File “F:htmlmsvg2imagemap.py”, line 49, in
raw_width = float(svg.getAttribute(‘width’))
ValueError: invalid literal for float(): 1000px

This is the only useful result for a google search on the matter, so I thought I might as well add a few tips here.

How to convert any sgv to image map:

this script works for sgv files created with gimp, and gimp in turn can read any sgv file. So you can effectively convert any sgv to an image map with this script. 

Gimp’s UI is godawful, but when opening an sgv you have a pop-up giving you the option to import paths. Do that, and afterwards, in the “layers window” there is a tab called paths. From there you can right-click on the imported path and export it as svg.
You need to edit the exported svg a bit:

• the width and height attributes of the svg need to be in pixels and without the unit of measure, so “100” is OK, but “100px” or “1.25in” are not;
  – you need to wrap the tags in a tag.

Then you can feed it to the script and you’ll get an image map.

Thanks so much for making this available, I used it to make an imagemap of Europe from an svg and it worked really well.