Create clickable Map use jQuery and SVG

Create clickable Map use – jQuery and SVG Maps Create clickable Map use jQuery and SVG - US States Map SVG zip-code boundary shapes

Find the right SVG – Map

Maps4Office helps you to find the right SVG Map – by Administration Level (Counties, States, Region, Rural Districts,.. ) or by Postcode Areas (Postcode boundary Map – Level 1 till 6). It’s also possible to choose the right projection type – e.g. Mercator (classic for Europe), Lambert (classic Projection for North America) …

Use SVG Map for …

The SVG Vector Maps are excellent for interactive web applications (e.g. Apps, Web-Applications, BI systems as QlikView, Navision or Evidanza). In this quick tutorial we describe you, how to work with the SVG-Maps with the free jQuery library (framework).

 

The SVG Map is integrated as follows:

:

<svg version="1.1" id="svgEuropa" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="420px" height="594px" viewBox="0 0 210 297" enable-background="new 0 0 210 297" xml:space="preserve">

<polygon id="stallwanger.it.dev_shape_ALB" .../>
<polygon id="stallwanger.it.dev_shape_DEU" points="84.502,85.722 86.898,86.056 88.602,86.358... />
<polygon id="stallwanger.it.dev_shape_AND"...

jQuery plugin for decorating image maps (highlights, select areas, tooltips): Europe, color states, items hover

 

Use the SVG-ID (Shape Area) to set your items – it’s not possible to get the polygon id.

$("#svgEuropa [id='stallwanger.it.dev_shape_DEU']")

Use the CSS-Style to color the shape items:

$("#svgEuropa [id='stallwanger.it.dev_shape_DEU']").css("fill","#ff0000");

SVG Click on("click",function(, interaction, iso name europe map, onclick event, Hover, Canvas

 

You can do with the objects whatever you need. You can set events to the object by jQuery – in this example the click event – e.g.

:

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