Create a map with clickable provinces/states using SVG, HTML/CSS, ImageMap [closed]

P

11

33

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:

archived: http://www.todospelaeducacao.org.br/
archived: 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.

Proletarian answered 27/6, 2012 at 23:17 Comment(0)

T

44

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

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

Disclosure: I wrote it.

Thill answered 29/6, 2012 at 19:49 Comment(0)

K

21

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:

Keeping answered 28/6, 2012 at 8:55 Comment(2)

Nice example, but the text get often garbled in FF (Chrome looks OK). Maybe the FF renderer it's a bit slow, what a pity... – Longwood 28/6, 2012 at 13:1

This is the best answer. jqvmap and jvectormap are exactly what I was looking for. @CapelliC, they work great in FF 26. Also This one is pretty good – Cataplasia 6/1, 2014 at 6:20

F

7

I think it's better to divide my answer to 2 parts:

A-Create everything from scratch (using SVG, JavaScript, and HTML5):

Create a new HTML5 page
Create a new SVG file, each clickable area (province) should be a separate SVG Polygon in your SVG file, (I'm using Adobe Illustrator for creating SVG files but you can find many alternative software products too, for example Inkscape)

Add mouseover and click events to your polygons one by one

<polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1" 
    onmouseover="mouseOverHandler(evt)"
    onclick="clickHandler(evt)" />

Add a handler for each event in your JavaScript code and add your desired code to the handler
```
function mouseOverHandler(evt) {};
function clickHandler(evt) {};
```
Add the SVG file to your HTML page (I prefer inline SVG but you can use linked SVG file too)
Upload the files to your server

B-Use a software like FLDraw Interactive Image Creator (only if you have a map image and want to make it interactive):

Create an empty project and choose your map image as your base image when creating the new project
Add a Polygon element (from the Shape menu) for each province
For each polygon double click it to open the Properties window where you can choose an event type for mouse-over and click, also change the shape opacity to 0 to make it invisible
Save your project and Publish it to HTML5, FLDraw will create a new folder that contains all of the required files for your project that you can upload to your server.

Option (A) is very good if you are programmer or you have someone to create the required code and SVG file for you, Option (B) is good if you don't want to hire someone or spend your own time for creating everything from scratch

You have some other options too, for example using HTML5 Canvas instead of SVG, but it's not very easy to create a Zoomable map using HTML5 Canvas, maybe there are some other ways too that I'm not aware of.

Fallen answered 2/12, 2016 at 10:40 Comment(0)

D

3

Just in case anyone will search for it - I used it on several sites, always the customization and RD possibilities were a perfect fit for what I needed. Simple and it is free to use:

Clickable CSS Maps

One note for more scripts on a site: I had some annoying problems with getting to work a map (that worked as a graphic menu) in Drupal 7. There where many other script used, and after handling them, I got stuck with the map - it still didn't work, although the jquery.cssmap.js, CSS (both local) and the script in the where in the right place. Firebug showed me an error and I suddenly eureka - a simple oversight, I left the script code as it was in the example and there was a conflict. Just change the front function "$" to "jQuery" (or other handler) and it works perfect. :]

Here's what I ment (of course you can put it before instead of the ):

<script type="text/javascript">
      jQuery(function($){
        $('#map-country').cssMap({'size' : 810});
       });
    </script>

Diagonal answered 15/7, 2014 at 17:50 Comment(0)

M

1

I had the same requirements and finally this Map converter worked for me. It is the best plugin for any map generation.

Mv answered 27/6, 2012 at 23:17 Comment(0)

R

1

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.

Railway answered 27/6, 2012 at 23:59 Comment(7)

I can't seem to get this to work... I can get the SVG to turn into code, and managed to obtain SVG code through Illustrator from the file, but I cannot manage to wrap the SVG paths with an anchor tag. – Proletarian 28/6, 2012 at 4:36

Hmm your extracting code from the SVG. This will have to be incorporated with what you generated. Can you let me know the name of the file and I will dig around and find it? – Railway 28/6, 2012 at 13:55

you can find the exact SVG I am trying to use at this URL: unidosporlaeducacion.com/images/panama.svg – Proletarian 28/6, 2012 at 16:3

Its a very complicated SVG file... Should I use a simpler one? I could create a simplified artwork in AI – Proletarian 28/6, 2012 at 16:7

I've been out this is what I found irunmywebsite.com/raphael/codeconvertedsvg.php?q=Panama This is scaled, let me know if I can be of anymore help... – Railway 28/6, 2012 at 22:59

thanks for the help.. I found a way around it using attributes in Illustrator and then using that program's save for web feature to save it as an html image map with a png file... then I am using the solution posted above – Proletarian 3/7, 2012 at 0:35

M

1

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

Microparasite answered 10/11, 2013 at 8:29 Comment(0)

S

1

Here is another image map plugin I wrote to enhance image maps: https://github.com/gestixi/pictarea

It makes it easy to highlight all the area and let you specify different styles depending on the state of the zone: normal, hover, active, disable.

You can also specify how many zones can be selected at the same time.

Sparkie answered 20/5, 2016 at 10:11 Comment(0)

M

0

The following code may help you:

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

Source

Matron answered 29/7, 2015 at 15:5 Comment(0)

A

-1

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 :)

Ade answered 6/10, 2015 at 16:10 Comment(0)

M

-2

<script type="text/javascript">
      jQuery(function($){
        $('#map-country').cssMap({'size' : 810});
       });
    </script>

strong text

Melgar answered 10/5, 2016 at 5:24 Comment(1)

Not strong enough to help us understand why this solution should be preferred over the ones which actually contain an explanation. – Leavenworth 1/12, 2023 at 12:46

Recommended topics

Hot tags