Create a map with clickable provinces/states using

Question

I am trying to create an interactive map where users can click on different provinces in the map to get info specific to that province.

Example: http://www.todospelaeducacao.org.br/ http://code.google.com/p/svg2imap/

So far I've only found solutions that have limited functionality. I've only really searched for this using an SVG file, but I would be open to other file types if it is possible.

If anyone knows of a fully functioning way to do this (jQuery plug-in, PHP script, vector images) or a tutorial on how to do it manually please do share.

Answer 1

The following code may help you:

$("#svgEuropa [id='stallwanger.it.dev_shape_DEU']").on("click",function(){
    alert($(this).attr("id"));
});

Source

Answer 2

I have been using makeaclickablemap for my province maps for some time now and it turned out to be a really good fit.

Answer 3

Sounds like you want a simple imagemap, I'd recommend to not make it more complex than it needs to be. Here's an article on how to improve imagemaps with svg. It's very easy to do clickable regions in svg itself, just add some <a> elements around the shapes you want to have clickable.

A couple of options if you need something more advanced:

• http://jqvmap.com/
• http://jvectormap.com/
• http://polymaps.org/

Answer 4

Go to SVG to Script with your SVG the default output is the map in SVG Code which adds events is also added but is easily identified and can be altered as required.

Answer 5

jQuery plugin for decorating image maps (highlights, select areas, tooltips):

http://www.outsharked.com/imagemapster/

Disclosure: I wrote it.

Answer 6

You have quite a few options for this:

1 - If you can find an SVG file for the map you want, you can use something like RaphaelJS or SnapSVG to add click listeners for your states/regions, this solution is the most customizable...

2 - You can use dedicated tools such as clickablemapbuilder (free) or makeaclickablemap (i think free also).

[disclaimer] Im the author of clickablemapbuilder.com :)