MapSVG ()

Global MapSVG class. It contains all other MapSVG classes and some static methods.

Examples

var mapsvg = MapSVG.get(0); // get first map instance
var mapsvg2 = MapSVG.get(1); // get second map instance
var mapsvg3 = MapSVG.getById(123); // get map by ID

var mapsvg = new MapSVG.Map("my-container",{
  source: "/path/to/map.svg"
});

var marker = new MapSVG.Marker({
  location: location,
  mapsvg: mapsvg
});

if(MapSVG.isPhone){
 // do something special for mobile devices
}

Static Members

Controller (options)

Abstract class. Creates a scrollable controller. Extended by MapSVG.PopoverController / MapSVG.DetailsController / MapSVG.DirectoryController

parameter type description
options object List of options

Instance Members

adjustHeight ()

Adjusts height of the container to fit content.

destroy ()

Destroys the controller.

getMainTemplate ()

This method must be overriden by a child class and to return an HTML code for the main content

getToolbarTemplate ()

This method must be overriden by a child class and return an HTML code for the toolbar.

init ()

Initialization actions. Empty method. Can be overriden by child classes.

redraw ()

Redraws the container.

render ()

Renders the content.

setEventHandlers ()

Set event handlers. Can be overriden by a child class.

setEventHandlersCommon ()

Set common event handlers for all child classes

updateScroll ()

Updates the size of the scrollable container. Automatically fires when window size or content size changes.

updateTopShift ()

Updates top shift of the main container depending on toolbar height

viewDidAppear ()

Fires when the view appears after being hidden. Should be overriden by a child class.

viewDidDisappear ()

This method fires when the view disappears. Should be overriden by a child class.

viewDidLoad ()

This method fires when the view is fully loaded. Can be used to do any final actions.

viewReadyToFill ()

Fires right before rendering starts.

DatabaseService (options, mapsvg)

Database class that gets and stores data from MySQL tables (Regions, DB Objects) connected to the current map. two instances of this class are available in MapSVG.Map instance via .getDatabase() and .getDatabaseRegions().

parameter type description
options object
mapsvg MapSVG.Map

Examples

var database = mapsvg.getDatabase();
var objects = database.getLoaded();

var regionsDatabase = mapsvg.getDatabaseRegions();
var regionsData = regionsDatabase.getLoaded();

Instance Members

fill (data)

Fill local database storage with preloaded data

parameter type description
data Object

getAll (params)

Loads objects from remote server, from the table connected to current MapSVG map. This method triggers reloading markers on the map and reloading items in the directory. You can add a custom event handler using MapSVG "dataLoaded" event.

parameter type description
params any

Returns

Deferred :

Examples

mapsvg.getDatabase().getAll({
  page: 1,
  perpage: 30,
  sortBy: 'id',
  sortDir: 'DESC',
  filters: {regions: "US-TX"}
}).done(function(objects){
  // do something
});

getLoaded ()

Returns all loaded objects

Returns

Array :

getLoadedObject (id)

Returns one of the loaded objects by ID. Objects are usually loaded with pagination and this method doesn't return an object if it's outside of the currently loaded page.

parameter type description
id string

Returns

object :

Examples

var obejct = mapsvg.getDatabase().getLoadedObject(2);

getSchema (options)

Returns table schema

parameter type description
options any

Returns

object :

DetailsController (options)

Details View controller. Large scrollable window with content and "X" close button that can be placed in the map container, header/footer/sidebar or in a custom DIV container outside of the map.

parameter type description
options object

DirectoryController (options)

Creates a container with a list of objects near the map

parameter type description
options any List of options

Instance Members

addFilter (field)

Deprecated: This is deprecated.

parameter type description
field any

addPagination (pager)

Adds pagination buttons to the directory.

parameter type description
pager string HTML string with the buttons

deselectItems ()

Deselects directory items

getToolbarTemplate ()

Returns a HTML content for the Directory toolbar

Returns

string : HTML content

highlightItems (ids)

Highlights directory items

parameter type description
ids array A list of object IDs

loadItemsToDirectory ()

Loads items from a source defined in settings to the directory. The source can be "Regions" or "Database".

selectItems (ids)

Highlights directory items

parameter type description
ids array A list of object IDs

setFilters ()

Deprecated: This is deprecated.

toggle (on)

Toggles view between map and directory on mobile devices

parameter type description
on bool If "true", directory is shown and map is hidden, and vice-versa.

unhighlightItems ()

Unhighlights directory items

FiltersController (options)

FiltersController class adds filters for the database.

parameter type description
options any

Location (options, mapsvg)

Location class. Contains lat/lon, x/y coordinates, image, address and marker.

parameter type description
options object
mapsvg MapSVG.Map

Examples

var location = new MapSVG.Location({
  lat: 55.22,
  lng: 64.12,
  img: "/path/to/image.png"
 });

var marker = new MapSVG.Marker({
  location: location,
  mapsvg: mapsvgInstance
});

Instance Members

setLatLng (latlng)

Sets geo-coordinates of the location

parameter type description
latlng Array [lat,lon]

toJSON ()

Returns JSON of the Location

Returns

{img: any, lat: any, lng: any, x: any, y: any, address: any} :

LocationAddress (fields)

LocationAddress class stores address field from Google Geocoding service

parameter type description
fields object

Map (id, options)

MapSVG.Map class.. Creates a new map inside of the given HTML container, which is typically a DIV element.

parameter type description
id string ID of the map container
options MapSVG.MapOptions map settings

Examples

// Create the map in <div id="my-container-id"></div>:
var mapsvg = new MapSVG.Map("my-container-id", {
  source: "/path/to/map.svg",
  zoom: {on: true},
  scroll: {on: true}
});

// Get map instance by container ID
var mapsvg = MapSVG.getById("my-container-id");

// Get map instance by index number
var mapsvg_1 = MapSVG.get(0); // first map on the page
var mapsvg_2 = MapSVG.get(1); // second map.

Instance Members

attachDataToRegions (object)

Attaches DB Objects to Regions

parameter type description
object any

centerOn (region, yShift)

Centers map on Region or Marker.

parameter type description
region (MapSVG.Region | MapSVG.Marker) Region or Marker
yShift number Vertical shift from center. Used by showPopover method to fit popover in the map container

convertGeoToSVG (coords)

Converts geo-coordinates (latitude/lognitude) to SVG coordinates

parameter type description
coords Array [lat,lon] Geo-coodinates

Returns

Array<number> : [x,y] SVG coordinates

convertMouseToSVG (e)

Converts mouse pointer coordinates to SVG coordinates

parameter type description
e object Event object

Returns

Array : [x,y] SVG coordinates

convertPixelToSVG (xy)

Converts pixel coordinates (relative to map container) to SVG coordinates

parameter type description
xy Array [x,y] Pixel coordinates

Returns

Array<number> : [x,y] SVG coordinates

convertSVGToGeo (tx, ty)

Converts SVG coordinates to geo-coordinates (latitude/lognitude).

parameter type description
tx number SVG x coordinate
ty number SVG y coordinate

Returns

Array<number> : [lat,lon] Geo-coordinates

convertSVGToPixel (xy)

Converts SVG coordinates to pixel coodinates relative to map container

parameter type description
xy Array [x,y] SVG coordinates

Returns

Array<number> : [x,y] Pixel coordinates

deleteLabelsMarkers ()

Deletes Marker lables

deleteMarkers ()

Deletes all markers from the map

deselectAllRegions ()

Deselects all Regions

deselectRegion (region)

Deselects one Region

parameter type description
region MapSVG.Region

destroy ()

Destroys the map and all related containers.

Returns

MapSVG.Map :

fitMarkers ()

Changes maps viewBox to fit loaded markers.

getData ()

Was used previously to return _data that cotained all map properties. Now properties are stored in the map instance itself.

Deprecated: This is deprecated.

Returns

MapSVG.Map :

getDb ()

Returns Database

Returns

MapSVG.DatabaseService :

Examples

var objects = mapsvg.getDatabase().getLoaded();
var object  = mapsvg.getDatabase().getLoadedObject(12);

// Filter DB by region "US-TX". This automatically triggers markers and directory reloading
mapsvg.getDatabase().getAll({filters: {regions: "US-TX"}});

getDbRegions ()

Returns Regions database

Returns

MapSVG.DatabaseService :

getGeoViewBox ()

Returns geo-bounds of the map.

Returns

Array<number> : [leftLon, topLat, rightLon, bottomLat]

getMarker (id)

Finds a Marker by ID

parameter type description
id string Marker ID

Returns

Marker :

Examples

var marker = mapsvg.getMarker("marker_12");

getOptions (forTemplate, forWeb, optionsDelta)

Returns map options.

parameter type description
forTemplate bool If options should be formatted for use in a template
forWeb bool If options should be formatted for use in the web
optionsDelta object used by backend WP admin only, part of options from the previous view mode

Returns

object :

getPagination (callback)

Generates HTML with pagination buttons and attaches callback event on button click

parameter type description
callback function Callback function that should be called on click on a next/prev page button

getRegion (id)

Finds a Region by ID

parameter type description
id string Region ID

Returns

Region :

Examples

var region = mapsvg.getRegion("US-TX");

getRegions (id)

Returns all Regions

parameter type description
id any

Returns

Array<MapSVG.Region> :

getScale ()

Returns current SVG scale related to screen - map screen pixels to SVG points ratio. Example: if SVG current viewBox width is 600 and the map is shown in a 300px container, the map scale is 0.5 (300/600 = 0.5)

Returns

number :

getSelected ()

Returns array of IDs of selected Regions

Returns

Array<String> :

getUserLocation ()

Gets user's current location by using browser's HTML5 geolocation feature. Works only under HTTPS connection!

Returns

(boolean | object) : "false" if geolocation is unavailable, or {lat: float, lng: float} if it's available

getViewBox ()

Returns current viewBox

Returns

array : [x,y,width,height]

hidePopover ()

Hides the popover

hideTip ()

Hides the tooltip

highlightRegions (regions)

Highlights an array of Regions (used on mouseover)

parameter type description
regions Array<MapSVG.Region>

isGeo ()

Checks if the map is geo-calibrated

Returns

boolean :

isRegionDisabled (id, svgfill)

Checks if Region should be disabled

parameter type description
id string Region ID
svgfill string Region color ("fill" attribute)

Returns

boolean : "true" if Region should be disabled.

labelsRegionsAdjustPosition ()

Adjusts position of Region Labels

loadDetailsView (obj)

Loads Details View for an object (Region or DB Object)

parameter type description
obj (Region | object)

Examples

var region = mapsvg.getRegion("US-TX");
mapsvg.loadDetailsView(region);

var object = mapsvg.database.getLoadedObject(12);
mapsvg.loadDetailsView(object);

loadFiltersController ($container, modal)

Loads filters controller into a provided container

parameter type description
$container object Container, jQuery object
modal bool If filter should be in a modal window

mapAdjustStrokes ()

Adjusts stroke widths on zoom change to keeps their widths the same on all zoom levels.

markerDelete (marker)

Deletes a marker

parameter type description
marker MapSVG.Marker

markerRemove (marker)

Removes marker from the map

parameter type description
marker any

markersAdjustPosition ()

Adjusts position of Markers and MarkerClusters. This method is called on zoom or when map container is resized.

markersClusterAdd (markersCluster)

Adds a marker cluster

parameter type description
markersCluster MapSVG.MarkerCluster

off (event)

Removes an event handler

parameter type description
event string Event name

Examples

mapsvg.off("zoom");

on (event, callback)

Adds an event handler

parameter type description
event string Event name
callback any Callback function

Examples

mapsvg.on("zoom", function(){
  console.log("The map was zoomed!");
})

panBy (x, y)

Shift the map by x,y pixels

parameter type description
x number
y number

pickGaugeColor (gaugeValue)

For choropleth map: returns color for given number value

parameter type description
gaugeValue number Number value

Returns

Array<number> : [r,g,b,a] Color values, 0-255.

popoverAdjustPosition ()

Adjusts popover position. User on zoom and when map container is resized.

popoverOffHandler (e)

Event handler that catches clicks outside of the popover and closes the popover.

parameter type description
e object Event object

redraw ()

Redraws the map. Must be called when the map is shown after being hidden.

regionClickHandler (e, region)

Event handler that is fired on click on a Region / Marker / MarkerCluster

parameter type description
e object Event object
region (MapSVG.Region | MapSVG.Marker | MapSVG.MarkerCluster)

Returns

boolean :

regionsRedrawColors ()

Redraws colors of regions. Used when Region statuses are loaded from the database or when choropleth map is enabled.

reloadRegions ()

Reloads Regions from SVG file

reloadRegionsFull ()

Reloads Regions data

selectRegion (id, skipDirectorySelection)

Selects a Region

parameter type description
id (MapSVG.Region | string) Region or ID
skipDirectorySelection bool

Returns

boolean :

setActions (options)

Sets map actions that should be performed on Region click. Marker click, etc.

parameter type description
options any

Examples

mapsvg.setActions({
  "click.region": {
    showPopover: true,
    showDetails: false
  }
})

setColors (colors)

Sets color settings (background, regions, containers, etc.)

parameter type description
colors object

Examples

mapsvg.setColors({
  background: "#EEEEEE",
  hover: "10",
  selected: "20",
  leftSidebar: "#FF2233",
  detailsView: "#FFFFFF"
});

setContainers (options)

Sets container options: leftSidebar, rightSidebar, header, footer.

parameter type description
options obejct

Examples

mapsvg.setContainers({
  leftSidebar: {
    on: true,
    width: "300px"
  }
});

setCursor (type)

Sets mouse pointer cursor style on hover on regions / markers.

parameter type description
type string "pointer" or "default"

setDatabase (options)

Sets database options.

parameter type description
options object

Examples

mapsvg.setDatabase({
  pagination: {on: true, perpage: 30}
});

setDetailsView (options)

Sets Details View options

parameter type description
options object Options

setDisableAll (on)

Disables all Regions if "true" is passed.

parameter type description
on bool

setEvents (functions)

Sets even handlers

parameter type description
functions object Callbacks {eventName: function, eventName: function, ...}

setFilters (options)

Sets filter options

parameter type description
options object

Examples

mapsvg.setFilters{{
  on: true,
  location: "leftSidebar"
}};

setGauge (options)

Sets choropleth map options

parameter type description
options object

Examples

mapsvg.setGauge({
  on: true,
  colors: {
    high: "#FF0000",
    low: "#00FF00"
  }
  labels: {
    high: "high",
    low: "low"
  }
});

setGoogleMaps (options)

Sets Google Map options.

parameter type description
options object

Examples

mapsvg.setGoogleMaps({
  on: true,
  type: "terrain"
});

// Get Google Maps instance:
var gm = mapsvg.googleMaps.map;

setLabelsMarkers (options)

Sets Marker labels

parameter type description
options object

setLoadingText (val)

Sets loading text message

parameter type description
val string "Loading map..." text

setMenu (options)

Sets directory options.

parameter type description
options object

Returns

(any | void) :

Examples

mapsvg.setDirectory({
  on: true,
  container: "leftSidebar"
});

setMobileView (options)

Sets mobile view options

parameter type description
options any

setMultiSelect (on, deselect)

Enables/disables "multiselect" option that allows to select multiple regions.

parameter type description
on bool
deselect bool If true, deselects currently selected Regions

setPadding (options)

Sets map padding.

parameter type description
options number Padding in pixels

setPagination ()

Adds pagination controls to the map and/or directory

setPopovers (options)

Sets popover options.

parameter type description
options object

Examples

mapsvg.setPopovers({
  on: true,
  width: 300, // pixels
  maxWidth: 70, // percents of map container
  maxHeight: 70, // percents of map container
  mobileFullscreen: true
});

setRegionChoroplethField (field)

Sets the Region field that is used for choropleth map

parameter type description
field string Region's field name

setRegionEditHandler (handler)

Sets callback function that is called on click on a Region. Used in the Map Editor on click on a Region in the "Edit regions" map mode.

parameter type description
handler function

setRegionStatus (region, status)

Sets status of a Region

parameter type description
region Region
status number

setResponsive (on)

Sets map responsiveness on/off. When map is responsive, it takes the full width of the parent container.

parameter type description
on bool

setScroll (options, skipEvents)

Sets map scroll options.

parameter type description
options object scroll options
skipEvents bool used by Map Editor to prevent re-setting event handlers.

Examples

mapsvg.setScroll({
  on: true,
  limit: false // limit scroll to map bounds
});

setSize (width, height, responsive)

Sets map size. Can accept both or just 1 parameter - width or height. The missing parameter will be calcualted.

parameter type description
width number
height number
responsive bool

Returns

Array<number> : [width, height]

setTemplates (templates)

Sets templates body

parameter type description
templates object Key:value pairs of template names and HTML content

setTooltips (options)

Sets tooltips options.

parameter type description
options object

Examples

mapsvg.setTooltips({
  on: true,
  position: "bottom-left",
  maxWidth: "300"
})

setViewBox (v, skipAdjustments)

Sets map viewbox

parameter type description
v array [x,y,width,height]
skipAdjustments bool if false is passed, map doesn't get redrawn

setViewBoxByGoogleMapBounds ()

Sets SVG viewBox by Google Maps bounds. Used to overlay SVG map on Google Map.

setZoom (options)

Sets map zoom options.

parameter type description
options object zoom options

Examples

mapsvg.setZoom({
  on: true,
  mousewheel: true,
  limit: [-5,10], // allow -5 zoom steps back and +20 zoom steps up from initial position.
});

showPopover (object)

Shows a popover for provided Region or DB Object.

parameter type description
object (MapSVG.Region | object) Region or DB Object

Examples

var region = mapsvg.getRegion("US-TX");
mapsvg.showPopover(region);

showTooltip (html)

Shows the tooltip with provided HTML content.

parameter type description
html string HTML content

trigger (event)

Triggers an event

parameter type description
event string Event name

unhighlightRegions ()

Unhighlights all Regions (used on mouseout)

update (options)

Updates map settings.

parameter type description
options object Map options

Examples

mapsvg.update({
  popovers: {on: true},
  colors: {
    background: "red"
  }
});

viewBoxReset (toInitial)

Resets map zoom and scroll to initial position.

parameter type description
toInitial bool Set to "true" if you want to reset to initial viewBox that was set by user; set to "false" to reset to original SVG viewBox as defined in the SVG file

Returns

Array : viewBox, [x,y,width,height]

viewBoxSetBySize (width, height)

Sets map container size and viewBox size. This method should be used when you need to change both map container size and viewBox size.

parameter type description
width number
height number

Returns

Array : viewBox, [x,y,width,height]

zoom (delta, center, exact)

Zooms the map

parameter type description
delta number 1/-1
center Array<number> [x,y] zoom center point
exact number (optional) Exact scale value

Returns

boolean :

zoomIn (center)

Zooms-in the map

parameter type description
center Array [x,y] center point (optional)

zoomOut (center)

Zooms-out the map

parameter type description
center Array [x,y] center point (optional)

zoomTo (region, zoomToLevel)

Zooms to Region, Marker or array of Markers.

parameter type description
region (MapSVG.Region | MapSVG.Marker | Array<MapSVG.Marker>) Region, Marker or array of Markers
zoomToLevel number Zoom level

Examples

var region = mapsvg.getRegion("US-TX");
mapsvg.zoomTo(region);

MapObject (jQueryObject, mapsvg)

Abstract MapObject class. Extended by MapSVG.Region & MapSVG.Marker

parameter type description
jQueryObject object
mapsvg MapSVG.Map

Instance Members

attr (v1, v2)

Sets attribute of an SVG object

parameter type description
v1 (string | object) attribute name or object: {name: value, name: value}
v2 (string | number) value

Returns

any :

getBBox ()

Returns bounding box of an object in SVG coordinates

Returns

Array<any> : [x,y,width,height]

getCenter ()

Returns center of an object in pixel coordinates

Returns

Array<number> : [x,y]

getCenterLatLng (yShift)

Returns center of an object in geo-coordinates

parameter type description
yShift any

Returns

{lat: number, lng: number} :

getCenterSVG ()

Returns center of an object in SVG coordinates

Returns

{x: number, y: number} :

getComputedStyle (prop, node)

Returns style of a given property of an SVG object

parameter type description
prop string property name
node object SVG object

Returns

string : style

getGeoBounds ()

Returns geo-bounds of an object - South-West & North-East points.

Returns

{sw: (Array<number>), ne: (Array<number>)} :

getStyle (prop)

Returns style of a property of the SVG object

parameter type description
prop string property name

Returns

string :

isMarker ()

Checks whether the object is Marker

Returns

boolean :

isRegion ()

Checks whether the object is Region

Returns

boolean :

off (event)

Removes event hanlder

parameter type description
event string Event name

on (event, callback)

Attaches event handler to the object

parameter type description
event string Event name
callback function

setData (data)

Adds custom data to object

parameter type description
data object Any set of {key:value} pairs

setId (id)

Set ID of an object

parameter type description
id string

trigger (event)

Fires an event

parameter type description
event string Event name

Marker (params)

Marker class.

parameter type description
params any

Returns

boolean :

Examples

var location = new MapSVG.Location({
  lat: 55.22,
  lng: 64.12,
  img: "/path/to/image.png"
 });

var marker = new MapSVG.Marker({
  location: location,
  mapsvg: mapsvgInstance
});

// The marker is created but still not added to the map. Let's add it:
mapsvg.markerAdd(marker);

Instance Members

adjustPosition ()

Adjusts position of the Marker. Called on map zoom and on map container resize.

delete ()

Deletes the Marker

getBBox ()

Get SVG bounding box of the Marker

Returns

Array<any> : [x,y,width,height]

getOptions ()

Get Marker options

Returns

{id: string, src: string, x: number, y: number, geoCoords: []} :

hide ()

Hides the Marker

setGeoCoords (coords)

Sets geo-coordinates of the Marker and calculates its x/y coordinates.

parameter type description
coords Array [lat,lon] Latitude and Longitude coordinates

setId (id)

Set ID of the Marker

parameter type description
id string

setImage (src, mapScale)

Set image of the Marker

parameter type description
src string
mapScale number

setObject (obj)

Sets parent DB object of the Marker

parameter type description
obj object

setXy (xy)

Set x/y coordinates of the Marker

parameter type description
xy Array [x,y]

show ()

Shows the Marker

update (data, mapScale)

Update marker settings

parameter type description
data object Options
mapScale float scale of the map

MarkersCluster (options)

Cluster class. Groups markers into a clickable circle with a number indicating how many markers it contains.

parameter type description
options any

Instance Members

addMarker (marker)

Adds marker to the cluster.

parameter type description
marker MapSVG.Marker

adjustPosition ()

Adjusts position of the cluster. Called on zoom and map container resize.

canTakeMarker (marker)

Checks if provided marker should be added into this cluster.

parameter type description
marker MapSVG.Marker

Returns

boolean :

destroy ()

Destroys the cluster

PopoverController (options)

Creates a scrollable popover in a map container.

parameter type description
options any

Instance Members

adjustHeight ()

Adjusts height of the popover

adjustPosition ()

Adjsuts position of the popver. Gets called on zoom and map container resize.

close ()

Closes the popover

destroy ()

Destroys the popover

getToolbarTemplate ()

Returns HTML template for the popover toolbar

Returns

string :

setEventHandlers ()

Sets event handlers for the popover

setPoint (point)

Sets a point where the popover should be shown

parameter type description
point Array [x,y]

show ()

Shows the popover

Region (jQueryObject, globalOptions, regionID, mapsvg)

Region class. Contains a reference to an SVG element.

parameter type description
jQueryObject object jQuery Object containing SVG element
globalOptions MapSVG.MapOptions MapSVG options
regionID string Region ID
mapsvg MapSVG.Map MapSVG instance

Instance Members

deselect ()

Deselect the Region.

forTemplate ()

Returns an object with properties of the Region formatted for a template

Returns

object :

getBBox ()

Returns SVG bounding box of the Region

Returns

[number, number, number, number] : [x,y,width,height]

getChoroplethColor ()

Returns color of the Region for choropleth map

Returns

{r: number, g: number, b: number, a: number} :

getDisabledState (asDefault)

Checks if Region should be disabled

parameter type description
asDefault bool

Returns

any :

getOptions (forTemplate)

Returns Region properties

parameter type description
forTemplate bool adds special properties for use in a template

Returns

object :

highlight ()

Highlight the Region. Used on mouseover.

select ()

Select the Region.

setDisabled (on, skipSetFill)

Disables the Region.

parameter type description
on bool true/false = disable/enable
skipSetFill bool If false, color of the Region will not be changed

setFill (fill)

Sets fill color of the Region

parameter type description
fill string color in a CSS format

Examples

region.setFill("#FF2233");
region.setFill("rgba(255,255,100,0.5");

setGaugeValue (val, null)

Set Region choropleth value. Used to calculate color of the Region.

parameter type description
val any
null any (number} val

setId (id)

Sets ID of the Region

parameter type description
id string

setSelected ()

Selects the Region.

setStatus (status)

Sets status of the Region. Takes the list of statuses from global MapSVG options.

parameter type description
status number

setTitle (title, id)

Sets ID of the Region

parameter type description
title any
id string

unhighlight ()

Unhighlight the Region. Used on mouseout.

update (options)

Updates the Region

parameter type description
options object

Examples

var region = mapsvg.getRegion("US-TX");
region.update({
  fill: "#FF3322"
});

addInstance (mapsvg)

Adds new instance of the map

parameter type description
mapsvg MapSVG.Map

android ()

Determines if current device is Android-device

Type: boolean

browser ()

Keeps browser information

Type: object

ios ()

Determines if current device is iOS-device

Type: boolean

isPhone ()

Determines if current device is mobile-device

Type: boolean

mouseCoords (e)

Converts mouse event object to x/y coordinates

parameter type description
e any

Returns

{x: any, y: any} :

touchDevice ()

Determines if current device is touch-device

Type: boolean

MapSVG.MapOptions ()

MapOptions object used to define the properties that can be set on a Map.

Type: Object

property type description
source string : SVG file URL
disableAll boolean : Disables all regions
responsive boolean : Map responsiveness. Default: true
loadingText string : Loading text message. Default is "Loading map..."
width number : Width of the map
height number : Height of the map
lockAspectRatio boolean : Keep aspect ratio when changing width or height
padding object : Map padding, default: {top: 0, left: 0, right: 0, bottom: 0}
cursor string : Mouse pointer style: "default' or "pointer"
multiSelect boolean : Allows to select multiple Regions. Default: false
colors object : Color settings. Example: {base: "#E1F1F1", background: "#eeeeee", hover: "#548eac", selected: "#065A85", stroke: "#7eadc0"},
clustering object : Clustering settings. Default: {on: false},
zoom object : Zoom options. Default: {on: false, limit: [0,10] , delta: 2, buttons: {on: true, location: 'right'}, mousewheel: true, fingers: true},
scroll object : Scroll options. Default: {on: false, limit: false, background: false, spacebar: false},
tooltips object : Tooltip options. Default: {on: false, position: 'bottom-right', template: '', maxWidth: '', minWidth: 100},
popovers object : Popover options. Default: {on: false, position: 'top', template: '', centerOn: true, width: 300, maxWidth: 50, maxHeight: 50},
regionStatuses object : List of Region statuses
events object : List of callbacks
gauge object : Choropleth map settings. Default: {on: false, labels: {low: "low", high: "high"}, colors: {lowRGB: null, highRGB: null, low: "#550000", high: "#ee0000"}, min: 0, max: 0},
labelsMarkers object : Marker labels settings. Default: {on:false}
labelsMarkers object : Region labels settings. Default: {on:false}