FAQ / jQuery interactive SVG Map plugin

Support - Free or Paid?

Hello, Thank you for purchasing mapSVG plugin! I get tons of questions about mapSVG every day - so let me make some important notes:
  1. Free support: all messages with bugs / problems.
    Example:
    • "Popups aren't showing, could you help?"
  2. Paid support $$$: any messages regarding fine-tuning of the plugin for your needs.
    Examples:
    • "Popups are showing on click, but I want them to show on mouse hover. How do I do that?".
    • "Could you help me to find SVG map of country XXX?"
In second case ("Paid support") there's no problem with the plugin but you ask me to spend some time to solve your question and show you how to do that, which should be paid. My hourly payrate is $30 p/hour (which is also a minimum payment even if solution has taken 10 minutes). I'm sorry but there's no other way to provide good and fast support for hundreds of mails.

Contents

First things you must know before asking any questions

At first, in case you get any problem with mapSVG, open your page in Google Chrome, press F12 and click last tab named "Console".
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" tab in Chrome (see above), click on input field and type in: console.log(jQuery().jquery), press Enter.

Frequent JavaScript errors from Console

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. I do not recommend Adobe Illustrator as it's less compatible with web.

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

SVG "groups" aren't supported by Raphael.js library, so you have to remove them (convert everything to "path" objects).

1) Download InkScape ( http://inkscape.org ) - it's free vector editor, good for SVG images.

2) Open your SVG map.

3) Click on any group (you'll see info about object's type - "group/path/polygon" etc. - in bottom status bar).

4) Double-click same group to enter into the group.

5) Press Ctrl+A or "Menu → Edit → Select All" to select all objects inside of the group.

6) Select "Menu → Path → Union" to merge selected paths inside of the group.

7) Click outside of the group to leave the group.

8. Click on the same group again, select "Menu → Object → Ungroup". No you have one merged "path" without group.

9) Repeat for all other groups.

10) If you want to set region names, right-click a region, choose "Object Properties" and set object's ID. (ID is used as a region name in the plugin)

3. Map isn't "responsive" in IE7-8

It is known issue and it is mentioned in description of the plugin on CodeCayon. This bug belongs to Raphael.js library (not to mapSVG) which is used for map rendering. I'm looking for fix, if you have one - please mail me.

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

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

6. 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).

That's all!

Hope this helps. If not, mail me from my profile page @CodeCanyon (message form is on bottom right corner): codecanyon.net/user/Yatek/profile/

best wishes,
Roman


↑ Scroll to Top