MapSVG 2.x WordPress and jQuery plugin interactive vector map documentation

Installation

WordPress version

Download ZIP file from CodeCanyon and unpack it. You will get a mapsvg folder containing all plugin files. Upload it to your plugins folder (default path is /wp-content/plugins). Then go to your WP Admin Panel, choose Plugins > Installed plugins > MapSVG > click "Activate". MapSVG menu item will appear in menu on the left.

Also you need to change access rules for /wp-content/plugins/mapsvg/maps/user-uploads to 777.

jQuery version

Just put mapsvg folder with all its contents anywhere on your server. Then enter http://yoursite.com/path-to/mapsvg/ to get started.

Plugin is able to work in 2 modes:

• HTML + JS: in this mode you can't upload files from a browser and you need to edit /mapsvg/js/settings.js file if you want to add custom markers. Also you don't have map selection function because plugin can't read contents of /mapsvg/maps folder with javaScript;
• PHP + HTML + JS: you can upload files from your browser. Uploads are being handled by a PHP script. And you have a map quick-search field: /mapsvg/maps folder is being scanned on start by PHP script to get full list of all available maps.

If you have PHP mode turned ON - you need to change access rules for .../mapsvg/maps/user-uploads to 777.

Creating a new map

WordPress version

SVG maps are located in /wp-content/plugins/mapsvg/maps folder. Plugin scans that folder each time you open MapSVG Control Panel to get the full list of available maps. Click on the search box on the start screen of MapSVG Builder and start typing the name of map you need.

jQuery version

If you have PHP mode ON - just start typing the name of map you need in the search box on the start screen of MapSVG builder, or upload a custom SVG file from your browser.

If you have PHP mode OFF - enter URL of a SVG file and click "Go". If you want to upload custom SVG file - put it into /mapsvg/maps/user-uploads folder.

Also you're able to edit the map you have previously created in MapSVG and inserted into your website. To do that, just enter URL of that page on the start screen of MapSVG Builder and it will get map settings from that page automatically.

Map modes

• Preview - everything looks and works in the same way as a final version of your map after you insert it to your wesbite. With only one exception that Responsive mode is always ON in MapSVG Builder (required for proper resizing of a map in the Builder);
• Edit regions - markers are hidden, all custom event handlers are disabled. Zoom & Scroll are turned ON. Region tooltips are changed to show region's ID:title. When you click on a region - Builder switches to "Regions" tab and scrolls to the region to start editing.
• Edit markers - regions are disabled, all custom event handlers are disabled. Zoom & Scroll are turned ON. Marker tooltips are changed to show marker's ID. When you click on a marker - builder switches to "Markers" tab and scrolls to the marker to start editing. If you click on a map - new marker is being added.

Settings

function(jQueryPopoverObj, mapObject, mapsvgInstance){
    // "this" = clicked mapObject
    if(this.mapsvg_type == "region"){
        return 'Region - <b>'+this.id+'</b>, contact: '+this.data.email;
    }else if (this.mapsvg_type == "marker"){
        return 'Marker - <b>'+this.id+'</b>, contact: '+this.data.email;
    }
}

function(jQueryTooltipObj, mapObject, mapsvgInstance){
    // You can also use "this" word which refers to clicked mapObject
    if(this.mapsvg_type == "region")
    return 'Region - <b>'+this.id+'</b>: '+this.title;
    else if (this.mapsvg_type == "marker")
    return 'Marker - <b>'+this.id+'</b>';
}

function (region) {
    return '<li><a href="'+region.id+'">'+(region.title||region.id) + '</a></li>';
}

Colors

Regions

{myParameter: "Hello Wordl!"}

function(){
    if (this.data.myParameter)
    alert(this.data.myParameter);
}

Markers

If a map is geo-calibrated, you will see New Marker input field in Markers tab. Just enter an address and marker will be added to the map.

Also you can add a Marker if you switch the map to Edit Markers mode: click on the map to add a marker.

Click on a Marker in Edit Markers mode to edit it.

{myParameter: "Hello Wordl!"}

function(){
    if (this.data.myParameter)
    alert(this.data.myParameter);
}

JavaScript

function(e,mapsvg){
    var region = this;
    alert(this.id);
}

function(e,mapsvg){
    var region = this;
    alert(this.id);
}

function(e,mapsvg){
    var region = this;
    alert(this.id);
}

function(){
    var mapsvg = this;
    mapsvg.setZoom({on: true});
}

function(){
    var mapsvg = this;
    mapsvg.setZoom({on: true});
}

Custom SVG files

One of the most important features of MapSVG is that you can always draw your own map or floorplan in any vector editor which is able to export images in SVG format - Adobe Illustrator, InkScape, Corel Draw, etc. Remember that you are not limited to maps - you can add interactivity to any vector image.

Most of the time custom SVG files are working "out of the box" - just upload an image to MapSVG and you're ready to go. However there are few things you need to keep in mind:

• Regions with fill="none" are being disabled by MapSVG. If you want to have an active Region without color - give that Region some transparent fill like rgba(0,0,0,0)
• It's always good to optimize your SVG files - remove unnecessary groups, join multiple paths with the same color into one - it improves map loading speed and overall performance (remember that every object in SVG file becomes a DOM node in HTML and too many DOM nodes slow down everything);
• If you export SVG file from Adobe Illustrator - use the following settings:
  File > Export > SVG
  Styling = Internal CSS
  ObjectIDs = Layer Names
  Responsive = No (you will be able add responsiveness later in MapSVG)
  Don't forget to set ID for each object you want to be active. You can do that in Layers palette in Adobe Illustrator - give each object a name and it will be used as objectID in SVG file;
• If you edit your SVG file in InkScape you can set ID for an object in the next way: right-click on an object, choose "Object properties" from pop-up menu, set ID;
• If you have an image with lots of objects which don't need to be clickable, use "Disable all regions" button in "Settings" tab of MapSVG Builder. It disables all regions and then you go to "Regions" tab to enable back only those you need to be active.