MapSVG

Turn any SVG file into interactive map or floorplan

Support

If you're reporting a bug, please provide a link to demo and tell what browser / OS you use.

Contents

First things you must know before asking any questions

When reporting an error, please remember to provide a link to your test page when possible.

First in case you get any problem with mapSVG - please open your page in Chrome or Safari, and open javaScript Console (Windows/Chrome: F12, Mac/Safari: Cmd+Alt+C).
If there are any errors, you'll see them marked with red color (please note that there might be some other errors not related to mapSVG):

Next, make sure that you're using jQuery 1.7.0 or later (1.7.1, 1.7.2 etc.)! Plugin will not work with previous jQuery versions.
To check which jQuery your site is using, go to Console, click on input field and type in: jQuery().jquery, press Enter.

JavaScript errors explanation

1. Uncaught TypeError: Object [object Object] has no method 'mapSvg'
This means mapSVG plugin wasn't loaded properly. First check that file "mapsvg.js" or "mapsvg.min.js" is insluded in page's body. Next check that jQuery library was included not more that 1 time. Example:
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript" src="js/raphael.js"></script>
<script type="text/javascript" src="js/mapsvg.min.js"></script>
<script type="text/javascript" src="js/jquery-1.8.0.js"></script>

Example above won't work because: first jquery-1.7.2 was loaded, then mapsvg.min.js was attached to jquery-1.7.2, and then jquery-1.8.0 was loaded so previous mapSvg attachement to jQuery was lost.
2. Object [object Object] has no method 'on'
You're using old jQuery. Upgrade jQuery to 1.7.x (it is uncluded in plugin's package).
3. Cannot read property 'x' of undefined
You haven't created DIV container for your map or you have placed it after $('#mapsvg').mapSvg(). When you try to attach mapSVG plugin to some div container which isn't loaded yet - this error occurs. Move <div id="mapsvg"></div> to a place before $('#mapsvg').mapSvg().
4. XMLHttpRequest cannot load http://domain.com/maps/usa.svg. Origin http://domain.com is not allowed by Access-Control-Allow-Origin.
There is a rule in all browsers that doesn't allow JavaScript to access files on other domains. This means that your script and your map must be on same domain. Please note that even www.domain.com and domain.com counts as different domains and if I open your page in browser by entering address domain.com/mapsvg and you have set map's source by {source: 'http://www.domain.com'} - it will fail to load. Same thing with http:// and https://. To avoid problems with www - add this rule to .htaccess file in site's root folder:
RewriteEngine On
RewriteBase /

RewriteCond %{HTTP_HOST} ^www\.domain.com [NC]
RewriteRule ^(.*) http://domain.com$1 [R=301,L]

This rule will redirect all requests from www.domain.com to domain.com so they become one whole thing.

Questions

1. I want to create my own map. How do I do that?

I recommend using InkScape - a Free Open Source vector graphics editor. It's great for web-oriented SVG maps. Draw any shapes you need and give them some IDs (right-click, "Object properties"). I do not recommend Adobe Illustrator as it's less compatible with web. If you use it, open ready SVG file in any text editor and remove DOCTYPE tag (this tag stops map from loading in IE7-8).

2. I use my own .SVG map and it doesn't work as expected

Some time ago here was a tutorial on modifying SVG file - to make it compatible with mapSVG. It was required because only one SVG object was supported - <path />.
But starting from version 5.5.2 (jQuery plugin) and 1.4.1 (WordPress plugin) mapSVG supports all of main SVG objects - path, group, polygon, polyline, circle, ellipse, rectangle, text/tspan.
So that tutorial was removed. But if your map still shows with errors - mail me from my profile page on CodeCanyon (message form is on bottom right corner).

3. How to stretch a map to 100% width of screen?

Set map's container width to 100% <div style="width: 100%"></div> and set {responsive: true} in mapSVG options.

4. How can I fill a region with gradient?

Linear gradient format: "<angle>-<colour>[-<colour>[:<offset>]]*-<colour>",
Example: "90-#fff-#000" - 90º gradient from white to black or "0-#fff-#f00:20-#000" - 0º gradient from white via red (at 20%) to black.

5. How can I set image as background for a region?

Instead of hex color #FF1122 just set path to image url(/path/to/image.jpg).

6. Map doesn't show up on Android

The default Android browser did not support SVG until Android 3.0 (Honeycomb) added SVG support in the default browser. Other workaround is to use Opera Mobile (free from the Android Market) which will work whatever the Android version.