Create a map with clickable provinces states using SVG HTML CSS ImageMap

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

User · Answer

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.

User · Answer

The following code may help you       svgEuropa  id  stallwanger it dev shape DEU     on  click  function        alert   this  attr  id           Source

User · Answer

x000D   x000D   lt script type  text javascript  gt  x000D        jQuery function     x000D              map-country   cssMap   size    810    x000D             x000D       lt  script gt  x000D   x000D   x000D    strong text

User · Answer

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

User · Answer

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

User · Answer

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  lt 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

User · Answer

jQuery plugin for decorating image maps  highlights  select areas  tooltips    http   www outsharked com imagemapster   Disclosure  I wrote it

User · Answer

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      x000D   x000D   lt script type  text javascript  gt  x000D        jQuery function     x000D              map-country   cssMap   size    810    x000D             x000D       lt  script gt  x000D   x000D   x000D

User · Answer

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   lt polygon points  200 10 250 190 160 210  style  fill lime stroke purple stroke-width 1       onmouseover  mouseOverHandler evt       onclick  clickHandler evt     gt   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

User · Answer

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

User · Answer

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

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

Examples related to svg

Examples related to mapping

Examples related to imagemap

Examples related to jquery-svg