Discussion on MapSVG jQuery - Responsive Vector Maps, Floorplans, Interactive SVG Images


RomanCode supports this item


This author's response time can be up to 5 business days.

438 comments found.

What is the file size of the currently displayed village plan in the live preview?

The size of SVG file 2.5Mb. That SVG file contains very large JPEG background (2400×1300px).

how will that affect the loading time? Is there anything I could do which could quicken it up, or will it load fine?

If you don’t need to zoom-in the map so much you could use lower resolution file with lower size. If you don’t need photo-realistic 3D rendered image you could use vector image instead which would have much smaller size (example: http://previews.123rf.com/images/Tawng/Tawng1009/Tawng100900036/7794733-Editable-map-of-a-generic-residential-area-Stock-Vector-neighborhood-map-roadmap.jpg )


bbevier Purchased

Hi, First of all, thank you for this. I only have a couple of questions right now. Do i need to have it inserted into my website first to make changes to MapSVG builder? Is there anyway i can do it offline first before i update my website?

Hi! yep you can do it offline on your local machine (it should have web server installed) and then insert the code into your online website. Or you can create a test page protected with password and then transfer the code to public page. Let me know if you need more help.

Hi, how can I achieve zoom using ONLY the buttons? I have scroll set to false but this does nothing. Using version 6.2.4

Don’t worry; found it in code. Line 625 of mapsvg.js. zoom : {on :false, limit: [0,10], delta: 1.2, buttons: {on: true, location: ‘right’}, mousewheel: true},

Oh, I just realized that I forgot to add that option into jQuery version of MapSVG Builder (it is added in WordPress version) so it is available only via javascript code yet. I’ll add it into the Builder in the next version.

I see – I kind of just use the Builder as a template before editing the Javascript code by hand. Many thanks for the plugin, though.

hello there. i am using your plugin and it is great, but i have a little problem. the zooming buttons don’t work on mobile version. when i click on + or – buttons, that gives me an error:

Uncaught TypeError: Cannot read property ‘getData’ of undefined.

and when i scroll the map it gives me this error:

Error: <svg> attribute viewBox: Expected number, “NaN NaN 560 380”.

the website that i’m using the plugin is: http://eurewelcome.com/ i hope you can tell me what to do to fix these errors. thnx.

Hi, please update the plugin (just overwrite previous installation) and see if problem is solved. There were issues with zooming on mobile devices which were fixed in one of updates in May.

this looks great, nice work. does it have the counties of each state in the U.S. already defined, or is state as specific as the map goes? thanks.

Hi, there are separate maps of each state with all its counties.Try to open front page http://mapsvg.com – scroll down to “let us guess” section, there’s an input field “Try out other maps” which lets you to enter any map name. Start typing “usa-tx” for example to see the map “usa-tx.svg” of Texas with its counties. Maps of counties start with “usa-” prefix, then you type the abbreviation of a state. Please note that maps of states with counties are not geo-calibrated which means you can’t use geo-markers on those maps (markers with latitude-longitude coordinates). But you still can add markers manually with the mouse pointer.

MAPSVG documentatoin fuctions.

I need the documentation of the functions of mapsvg that i can use. where i can get it?


amik Purchased

I have a table that show id for layout region, so when i click one row.. and it wil show on map floor. Can you show me the code ?


how could I pre select single region e.g.with afterLoad or directly in the regions area like this
regions: { DE: {id: “DE”,’id_no_spaces’: “DE”,title: “Germany”,selected: true} },

or how can I call the selectRegion fnction directly in the index.php?

Thank you very much for any help


Hi Patrick, please check your mail.

I tried: afterLoad: function(){ this.selectRegion("RU"); this.selectRegion("US"); } Indeed it selects the country, but the selected countries aren’t highlighted as when I click on it. I guess I have to call another function as well?

Kind regards


I just replied to your mail before I found this comment. Let talk via email to prevent confusion. I’ll send more info now in a new mail.

Hi. This is a nice plugin, but I’m facing a problem that wasn’t evident in any of the demos (because they don’t use redirect links). Even though it’s responsive, the maps are problematic on touchscreen devices (e.g., mobiles, tablets) when links are used for the map slices.

It’s not possible to drag/swipe across the map without it resulting in an underlying “click” that redirects the user to the link that just happens to be where the finger was initially positioned on the screen. When the map is stretched 100% across the screen it’s a frustrating experience. When the map takes up a large portion of the touch screen can be difficult and nearly impossible to move past it.

This also makes it impossible to use magnification gestures, such as zoom and pinch.

Basically, there’s no swipe, tap, zoom, and pinch support. For touchscreens, the plugin should take into account user intent. If it’s a swipe or drag gesture, don’t execute a tap. It’s written as though the only device that will interact with the map is a desktop user with mouse. Before posting this comment I did a search through the source code for swipe and tap (to confirm if I was missing something) but I didn’t see any reference to them.

There are libraries, including jQuery, that have tap, swipe, and magnification events. Here are some links covering it: http://stackoverflow.com/questions/27796227/how-to-distinguish-touchpad-touchscreen-or-mouse-which-was-touching-by-user-u http://stackoverflow.com/questions/4755505/how-to-recognize-touch-events-using-jquery-in-safari-for-ipad-is-it-possible http://labs.rampinteractive.co.uk/touchSwipe/demos/Tap_vs_swipe.html

I know this is a solvable problem as there are other responsive, jQuery SVG map plugins that have accommodated both mouse and touchscreen events. I was intending to purchase one that dealt with this issue, but opted for your plugin because I assumed this was supported due to its advertising its responsive capabilities.

The flexibility and customizability of this plugin is impressive, but the “mouse-only” support isn’t practical for mobile/tablet visitors.

Would you be able to implement a fix to this?


That is strange that you haven’t found touch-events in the source code, what files your searched in and what is your version of MapSVG?

Hi RomanCode. Sounds great that you’ll be updating the code to support these events.

You’re correct, there are touch events. I was searching for the wrong thing. I apologize for making this false claim. I’m using MapSVG 6.3.1.

By the way, for what it’s worth I came across a jQuery plugin that implements many of these sort of events:

http://labs.rampinteractive.co.uk/touchSwipe/demos/index.html https://github.com/mattbryson/TouchSwipe-Jquery-Plugin Although there was an issue posted about having to work around a swipes over a link: https://github.com/mattbryson/TouchSwipe-Jquery-Plugin/issues/178


Hi RomanCode. Commenting to get a status update. As you had suggested, I contacted you to get the fix, but haven’t heard back.


antremo Purchased

Can I Use it on AngularJS?

Hi, yes you can.


antremo Purchased

Hi good afternoon I already buy but I have problems to run from a directive in AngularJS. It does not work.

mapApp.directive('mapVector', ['$http', '$timeout', function($http, $timeout) { return { restrict:'A', link: function(scope, element, attrs){ $timeout(function() { $(element).mapSvg({width: 600,height: 600,lockAspectRatio: false,loadingText: "Cargando Mapa...",colors: {baseDefault: "#000000",background: "#eeeeee",selected: "#5b6494",hover: "#f96868"},regions: {'path_70': {id: "path_70",'id_no_spaces': "path_70",tooltip: '<h3 class="popover-title">CENTRAL</h3><div class="popover-content"><p>Sed posuere consectetur est at lobortis. Aenean eu leo quam.</p></div>'}},viewBox: [3,-10,633,600],zoom: {on: true,limit: [0,10],delta: 1.2,buttons: {on: true,location: "right"},mousewheel: true},scroll: {on: true,limit: false,background: false},tooltips: {mode: "off",on: true,priority: "local",position: "bottom-right"},gauge: {on: false,labels: {low: "low",high: "high"},colors: {lowRGB: {r: 85,g: 0,b: 0,a: 1},highRGB: {r: 238,g: 0,b: 0,a: 1},low: "#550000",high: "#ee0000",diffRGB: {r: 153,g: 0,b: 0,a: 0}},min: 0,max: false},source: "/maps/user-uploads/Areas.svg",title: "Areas",responsive: true}); }, 1); } } }]);

Hi, please provide a link to an example.

How can I add a static permanent text on the map e.g.for a legend. Can I use the marker function and is it possible to change/config the slope of an icon as well?

I tried to give the marker the rotate degree with the data parameter like this:

{id: “marker_2”,tooltip: “Georgia”,src: “img/dark/appbar.foot.png”,geoCoords: [42.315407,43.35689199999 999], data: {rotate:45}}

and than to use it in this way:

onClick: function(){
         if (this.data.rotate) {
               $(this).css({transform: 'rotate(45deg)'});

But this doesn’t work. Do you have any other ideas?

Hi, rotation of SVG elements works slightly differently, you need to set a center point of rotation. Try to read this: http://stackoverflow.com/questions/6711610/how-to-set-transform-origin-in-svg

I am using this code:

function rotateImage(degree) { $(’#marker_2’).animate({ transform: degree }, { step: function(now,fx) { $(this).css({ ‘-webkit-transform’:’rotate(‘now‘deg)’, ‘-moz-transform’:’rotate(‘now‘deg)’, ‘transform’:’rotate(‘now‘deg)’ }); } }); }

but with FireFox it doesn’t rotate it just jumps from on side to the other side. e.g. http://wechselstube.host4free.de/flights4/index2.php where you can use the button above the map.

Can you kindly create an example?

Thank you very much

Please i need help on MapSVg and Jquery. Can someone please help me on this.

I am trying to implement a mapSvg and jquery logic so that depending on the link that a user clicks, jquery will update the “region” data of the mapsvg code,

How will i be able to change the region data (with the region data specific to the link) when i click on the three links.

<ul id="map-views">
<li><a id="firstpref-2012" href="javascript:void(0);">2012 Election</a></li>
<li><a id="firstpref-2008" href="javascript:void(0);">2008 Election</a></li>
<li><a id="firstpref-2004" href="javascript:void(0);">2004 Election</a></li>

<script type="text/javascript">
var m = $("#mapsvg").mapSvg(
"1":{"attr":{"fill":"#333399"},"tooltip":"A"} ,
"2":{"attr":{"fill":"#333399"},"tooltip":"B"} ,
"3":{"attr":{"fill":"#FFCC00"},"tooltip":"C"} ,
"4":{"attr":{"fill":"#333399"},"tooltip":"D"} ,
"5":{"attr":{"fill":"#333399"},"tooltip":"E"} ,
"6":{"attr":{"fill":"#333399"},"tooltip":"F"} ,
"7":{"attr":{"fill":"#333399"},"tooltip":"G"} ,
"8":{"attr":{"fill":"#990000"},"tooltip":"H"} ,
"9":{"attr":{"fill":"#333399"},"tooltip":"I"} ,

width: 300,


2008 Election
"1":{"attr":{"fill":"#333399"},"tooltip":"A1"} ,
"2":{"attr":{"fill":"#333399"},"tooltip":"B2"} ,
"3":{"attr":{"fill":"#FFCC00"},"tooltip":"C3"} ,
"4":{"attr":{"fill":"#333399"},"tooltip":"D4"} ,
"5":{"attr":{"fill":"#333399"},"tooltip":"E5"} ,
"6":{"attr":{"fill":"#333399"},"tooltip":"F6"} ,
"7":{"attr":{"fill":"#333399"},"tooltip":"G7"} ,
"8":{"attr":{"fill":"#990000"},"tooltip":"H8"} ,
"9":{"attr":{"fill":"#333399"},"tooltip":"I9"} ,

2004 Election
"1":{"attr":{"fill":"#333399"},"tooltip":"A11"} ,
"2":{"attr":{"fill":"#333399"},"tooltip":"B22"} ,
"3":{"attr":{"fill":"#FFCC00"},"tooltip":"C33"} ,
"4":{"attr":{"fill":"#333399"},"tooltip":"D44"} ,
"5":{"attr":{"fill":"#333399"},"tooltip":"E55"} ,
"6":{"attr":{"fill":"#333399"},"tooltip":"F66"} ,
"7":{"attr":{"fill":"#333399"},"tooltip":"G77"} ,
"8":{"attr":{"fill":"#990000"},"tooltip":"H88"} ,
"9":{"attr":{"fill":"#333399"},"tooltip":"I99"} ,


how if i just want to get the jquery with html only? is it should be online to get the jquery with simple html?

Yes you need a server to run the plugin. Server could be installed on your local machine or remote. You can’t run the plugin just by clicking on HTML file in a folder.

unfortunately,, this is not i want,, i need somthing that just easy click the html in a folder. can i refund it?

I think I can do some changes in the code to make the plugin work without a server. Contact me by email if you need that.

the client wants a update but im trying to avoid starting over, is there a way to add new image maps to my pre-exisiting map?

Hi, I received your email, currently I’m writing the reply.

thank you!

Hi Roman, I received your reply to my issue. I am posting this from the purchased account.

This error was occurring in our office. Now, when I tried the same at home, it is working fine.

I will test it in office again on Monday and will advise you. Thanks for your time.

Also, please advise why Melbourne marker is not appearing in the correct place?

Regarding the marker – I found an error in calibration of the map of Australia, please contact me via email, I’ll send you the fixed version of SVG file. Issue with map loading on local host – do you know how to open developer console in the browser? Could you check for any errors there? Could you check if the file (svg) was properly loaded from the server? Sometimes server settings doesn’t let to load SVG files via ajax requests you have to change those settings.

I contacted you via email.

Hi, I have a view questions about your jQuery plugin before start the order: - Can I add my own created SVG MAP? I have several essembles in several layers. - Is it possible to add and style tooltip fields? - Can I export the final map for Wordpress? (Import in custom post types ).

Many thanks, regards, Bouke


- Can I add my own created SVG MAP?” - Yes you can and that’s one of the main advantages of MapSVG plugin!

- Is it possible to add and style tooltip fields? - You can add tooltips. You can change default tooltips styles by setting CSS rules for .mapsvg-tooltips class.

- Can I export the final map for Wordpress? (Import in custom post types ) - I’m afraid wordpress cuts out <script> and <style> tags from post body considering them unsafe. I’ll check though. It is better to use WordPress version of MapSVG instead: https://codecanyon.net/item/mapsvg-responsive-vector-maps-floorplans-interactive-svg-images-plugin/2547255

Hi, i’m interested with your mapsvg, can it integrated to CI? is it on your documentation include example how to install it on CI? thanks

Hi, sorry, I don’t know how to help you on this question. MapSVG jQuery is simply a jQuery plugin with standalone jQuery map builder which you can put into any folder of your website. Map Builder generates JavaScript code which you insert into any page of your website. Does the plugin need to meet some requirements?

what i mean is, can it read dynamic data from the database?

Do you mean that you need to constantly check (each minute for example) for changes in the database and update the map with that data – without reloading the page? There’s no such built-in functionality but you could do that with jQuery – set a timer, ajax query, update the map each minute.


I have to load jquery.min before the mapsvg to get it displayed. Any chance I can do it vice versa (for load optimization) ?

Hi, for optimization move all .js files to bottom of HTML and move MapSVG initialization code also to the most bottom after all .js files.