jQuery vector map plugin documentation

MapSVG Map Builder

Since February 2016 MapSVG jQuery plugin turned into a standalone HTML/JS app MapSVG Builder which can be easily integrated into any project. In most cases you won't need to do any coding, so all you need is common MapSVG Builder documentation.

If you still want to dive into the code, continue reading.

Installation

Copy all files to your server. Include files into your page (your paths may be different):

<link href="/css/mapsvg.css" rel="stylesheet">
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="/js/mapsvg.min.js"></script>

Create a container for your map

<div id="mapsvg"></div>

Call MapSVG plugin

$('#mapsvg').mapSvg({source: '/maps/usa.svg'});

Options

When you call MapSVG plugin you can pass it an object with following options:

{
background: "#eee",
selected: 40,
hover: 20
}

{mode: "off"}

{mode: function(region){
    return '<b>' + region.id + '</b>' + region.title }
}

{mode: "off"}

{mode: function(region){
    return '<b>' + region.id + '</b>' + region.title }
}

{
  on: false,
  buttons: {position: "right"},
  limit: [0,10]
}

{on: false}

{on: false,
labels: {
  low: "low",
  high: "high"
},
colors: {
  low: "#550000",
  high: "#ee0000"}
}

{on: false,
  containerId: "",
  template: function(region){
  return '<li><a href="' + region.id + '">' + (region.title||region.id) + '</a></li>'
}}

<ul id="...">
  <li><a href="REGION-ID">ANYTHING</a></li>
  <li><a href="REGION-ID">ANYTHING</a></li>
  ...
</ul>

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});
}

Regions

SVG file may have many shapes but only those with color fill become clickable active Regions. Each Region must have a proper ID in SVG file:

<path id="DE" title="Germany" d="M 100,200 300,400 ... " />

IDs in SVG files have some restrictions - they can't contain spaces, they can't start with a number. Sometimes InkScape vector editor does't play well with non-latin characters in IDs either. So that's why it's a good idea to have title parameter as well.

So if you want to change settings for some of your Regions, you should pass a regions object into MapSVG in following format:

$('#mapsvg').mapSvg({
  source: 'world.svg',
  regions: {'Germany': { OPTIONS }, 'Sweden': { OPTIONS } }
})

Region options

Example

$('#mapsvg').mapSvg({regions:
  {
    'USA': {
             tooltip: 'USA: Click to go to Google.com',
             fill: '#ff0000',
             href: 'http://google.com'
            },
    'France': {tooltip: 'This is France!'}
  }
);

Markers

There are two ways to set markers:
1. By X/Y coordinates (works on any map). Keep in mind that X/Y coordinates are relative to SVG coordinate system;
2. By latitude / longitude coordinates (works only on geo-calibrated maps located in /maps/geo-calibrated folder ).

You can get latitude/longitude coordinates of any object from http://maps.google.com: Move the mouse to needed place, right-click and choose 'What's Here?'.

There are some built-in marker images in /markers folder, but you can add your own. Keep in mind that markers are positioned by a center point located at marker's bottom.

Marker options

Example

$('#mapsvg').mapSvg({markers: [
     {
       src:  '/markers/pin1_red.png'
       geoCoords: [57.162499, 65.54718],
       tooltip: 'Click to go to http://yahoo.com',
       href: 'http://yahoo.com'
     },
     {
       id: 'Washington_DC',
       geoCoords: [38.893438,-77.03167],
       tooltip: 'Washington, DC'
     }
]});

Final example

$('#mapsvg').mapSvg({
    source: '/maps/geo-calibrated/world-low-resolution.svg',
    colors: {
               base: "#E1F1F1",
               background: "#eeeeee",
               hover: 15,
               selected: 30,
               disabled: "#ffffff",
               stroke: "#7eadc0"
            },
    regions : {
                'USA':  {tooltip: 'USA: Click to go to Google.com', href: 'http://google.com'},
                'Brazil': {tooltip: ' Brazil is the largest country in South America.'}
               },
    markers: [
               { geoCoords: [38.893438,-77.03167],
                 tooltip: 'Washington, DC',
               },
               { geCoords: [51.49763,-0.148315],
                 tooltip: 'London',
               }
              ],
    tooltips: {mode: "title"},
    zoom: {on: true},
    scroll: true,
    responsive: true
});

Styling

Look into mapsvg.css file to find classes used by MapSVG. Don't edit that file or you will lose your changes with the next plugin update. Instead create a child css file like mapsvg-custom.css and insert it after the main mapsvg.css file. Most often use for custom CSS file is styling of popovers and tooltips.