JavaScript

In this tab you can define custom event handlers and add any custom functionality.

Main

beforeLoad

This code executes before the map loads. Use it to:

  • add changes to the map options before it loads
  • add any custom functions that will be used later
  • add custom Handlebars helpers that will format your variables

Example - change map options before the map loads:

function(){
    var mapsvg = this;
    mapsvg.getData().options.zoom.on = true;
    mapsvg.getData().options.colors.background = '#FFFFFF';
}

afterLoad

This code executes right after the map finishes loading.

Example - select "Texas" state and show a popover for it when the map loads:

function(){
    var mapsvg = this;
    var region = mapsvg.getRegion('US-TX');
    region.select();
    mapsvg.showPopover(region);
}

Set different Google Maps position a mobile device when the map is loaded:

function(){
    var mapsvg = this;
    if(MapSVG.isPhone){
        mapsvg.getData().googleMaps.map.setZoom(5);
        mapsvg.getData().googleMaps.map.setCenter({lat: 55.123, lng: 66.123});        
    }
}

Database

databaseLoaded

This code executes each time when DB Objects are loaded from the remote server. It means that the event fires when a filter is changed, text search is entered or next page of the results is requested.

function (){
  var mapsvg = this;
  var dbObjects = mapsvg.database.getLoaded();
  console.log(dbObjects);
}

Regions

click.region

This event fires when a Region is clicked (or touched on touch-devices).

function (e, mapsvg){
  var clickedRegion = this;
  console.log(clickedRegion);
}

mouseover.region

This event fires when the mouse pointer enters a Region.

function (e, mapsvg){
  var region = this;
  console.log(region);
}

mouseout.region

This event fires when the mouse pointer leaves a Region.

function (e, mapsvg){
  var region = this;
  console.log(region);
}

Markers

click.marker

This event fires when a Marker is clicked (or touched on touch-devices).

function (e, mapsvg){
  var clickedMarker = this;
  console.log(clickedMarker);
}

mouseover.marker

This event fires when the mouse pointer enters a Marker.

function (e, mapsvg){
  var marker = this;
  console.log(marker);
}

mouseout.marker

This event fires when the mouse pointer leaves a Marker.

function (e, mapsvg){
  var marker = this;
  console.log(marker);
}

Directory item

click.directoryItem

This event fires when a Directory Item is clicked (or touched on touch-devices).

function (e, regionOrObject, mapsvg){
  var directoryItem = this; // jQuery Object
}

mouseover.directoryItem

This event fires when the mouse pointer enters a Directory Item.

function (e, regionOrObject, mapsvg){
  var directoryItem = this; // jQuery Object
}

mouseout.directoryItem

This event fires when the mouse pointer leaves a Directory Item.

function (e, regionOrObject, mapsvg){
  var directoryItem = this; // jQuery Object
}

Details view

shown.details

This event fires right after a Details View is shown.

function (mapsvg){
  var detailsView = this; // jQuery Object
}

closed.details

This event fires right after a Details View is closed.

function (mapsvg){
  var detailsView = this; // jQuery Object
}

Popover

shown.popover

This event fires right after a Popover is closed.

function (mapsvg){
  var popover = this; // jQuery Object
}

closed.popover

This event fires right after a Popover is closed.

function (mapsvg){
  var popover = this; // jQuery Object
}