Class: MapSVGMap

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

The class constructor is available in the global varialbe, as mapsvg.map.

Example usage:

const map = new mapsvg.map("my-container-id", {
  id: "my-map",
  options: {
    source: "/path/to/map.svg",
    zoom: {on: true},
    scroll: {on: true}
  }
});

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

// Get map instance by index (in the order of creation)
const map_1 = mapsvg.get(0) // first map
const map_2 = mapsvg.get(1) // second map

Accessors

_scale

Get Signature

get _scale(): number;

Get relative map scale from initial zoom level

Returns

number

zoomLevel

Get Signature

get zoomLevel(): number;

Current map zoom level

Returns

number

Constructors

Constructor

new MapSVGMap(
   containerId, 
   mapParams, 
   params): MapSVGMap;

Initializes a new instance of the Map class.

Parameters

Parameter	Type	Description
`containerId`	`string`	The ID of the HTML element that will contain the map.
`mapParams`	{ `id?`: `number`; `options?`: `MapOptions`; `svgFileLastChanged?`: `string` \| `number`; `version?`: `string`; }	An object containing map parameters such as ID, options, SVG file last changed timestamp, and version.
`mapParams.id?`	`number`	-
`mapParams.options?`	`MapOptions`	-
`mapParams.svgFileLastChanged?`	`string` \| `number`	-
`mapParams.version?`	`string`	-
`params`	{ [`key`: `string`]: `any`; `inBackend?`: `boolean`; `prefetch?`: `boolean`; }	Additional parameters for the map, including options for prefetching and backend mode.
`params.inBackend?`	`boolean`	-
`params.prefetch?`	`boolean`	-

Returns

MapSVGMap

Methods

_new_setChoropleth()

_new_setChoropleth(options?): void;

Sets choropleth map options

Parameters

Parameter	Type	Description
`options?`	`any`

Returns

void

Example

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

addObject()

addObject(object): void;

Parameters

Parameter	Type
`object`	`Model`

Returns

void

attachDataToRegions()

attachDataToRegions(object?): void;

Attaches DB Objects to Regions

Parameters

Parameter	Type	Description
`object?`	`Model`

Returns

void

bubblesRegionsMoveScreenPositionBy()

bubblesRegionsMoveScreenPositionBy(deltaX, deltaY): void;

Move position of Regions bubbles by given numbers

Parameters

Parameter	Type	Description
`deltaX`	`number`
`deltaY`	`number`

Returns

void

centerOn()

centerOn(centerOnObject?, yShift?): ViewBox;

Centers map on Region or Marker.

Parameters

Parameter	Type	Description
`centerOnObject?`	\| `GeoPoint` \| `Marker` \| `Region` \| `SVGPoint` \| `SVGPointLiteral` \| `GeoPointLiteral`	Region or Marker
`yShift?`	`number`	Vertical shift from center. Used by showPopover method to fit popover in the map container

Returns

ViewBox

checkIfZoomIsNeeded()

checkIfZoomIsNeeded(viewBox): boolean;

Parameters

Parameter	Type
`viewBox`	`ViewBox`

Returns

boolean

clearDirtyFields()

clearDirtyFields(): void;

Returns

void

convertMouseToSVG()

convertMouseToSVG(e): SVGPoint;

Converts mouse pointer coordinates to SVG coordinates

Parameters

Parameter	Type	Description
`e`	`TriggeredEvent`	Event object

Returns

SVGPoint

[x,y] SVG coordinates

createContainers()

createContainers(): void;

Returns

void

createGoogleMapOverlay()

createGoogleMapOverlay(bounds, map): GoogleMapsOverlay;

Parameters

Parameter	Type
`bounds`	`any`
`map`	`any`

Returns

GoogleMapsOverlay

createToolbar()

createToolbar(): void;

Returns

void

deleteClusters()

deleteClusters(): void;

Delete all clusters from the map

Returns

void

deleteMarkers()

deleteMarkers(): void;

Delete all markers

Returns

void

deselectAllMarkers()

deselectAllMarkers(): void;

Deselects all Markers

Returns

void

deselectAllRegions()

deselectAllRegions(): void;

Deselects all Regions

Returns

void

deselectMarker()

deselectMarker(marker): void;

Deselects one Marker

Parameters

Parameter	Type	Description
`marker`	`Marker`

Returns

void

deselectRegion()

deselectRegion(region): void;

Deselects one Region

Parameters

Parameter	Type	Description
`region`	`Region`

Returns

void

destroy()

destroy(): void;

Destroys the map and all related containers.

Returns

void

directoryFilterOut()

directoryFilterOut(items): any;

Filter out directory items

Parameters

Parameter	Type
`items`	`any`

Returns

any

extractField()

extractField(
   region, 
   object, 
   path, 
   callback): void;

Parameters

Parameter	Type
`region`	`Region`
`object`	\| `Model` \| `Region`
`path`	`string`
`callback`	(`value`) => `void`

Returns

void

fitMarkers()

fitMarkers(): void;

Changes maps viewBox to fit loaded markers.

Returns

void

fitViewBox()

fitViewBox(viewBox, forceZoomLevel?): boolean;

Parameters

Parameter	Type
`viewBox`	`ViewBox`
`forceZoomLevel?`	`number`

Returns

boolean

getAdjustedSvgDefaultViewBox()

getAdjustedSvgDefaultViewBox(): ViewBox;

Returns

ViewBox

getBubbleSize()

getBubbleSize(region): any;

Returns size of the choropleth bubble

Parameters

Parameter	Type
`region`	`Region`

Returns

any

getCenterGeoPoint()

getCenterGeoPoint(fromZeroLevel, viewBox?): GeoPoint;

Returns lat,lng coordinates of center of the current view

Parameters

Parameter	Type	Default value
`fromZeroLevel`	`boolean`	`false`
`viewBox?`	`ViewBox`	`undefined`

Returns

GeoPoint

getCenterSvgPoint()

getCenterSvgPoint(fromZeroLevel, viewBox?): SVGPoint;

Returns SVG coordinates of the center of current map position

Parameters

Parameter	Type	Default value
`fromZeroLevel`	`boolean`	`false`
`viewBox?`	`ViewBox`	`undefined`

Returns

SVGPoint

getChoroplethColor()

getChoroplethColor(region): string;

Returns color of the Region for choropleth map

Parameters

Parameter	Type
`region`	`Region`

Returns

string

color

getContainer()

getContainer(name): HTMLElement;

Parameters

Parameter	Type
`name`	`string`

Returns

HTMLElement

getConverter()

getConverter(): Converter;

Returns

Converter

getData()

getData(): object;

Returns

object

id

id: number;

options

options: MapOptions;

svgFileLastChanged

svgFileLastChanged: number;

title

title: string;

version

version: string;

getDb()

getDb(): Repository;

Returns Database

Returns

Repository

Example

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

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

getDbRegions()

getDbRegions(): Repository;

Returns Regions database

Returns

Repository

getDirtyFields()

getDirtyFields(): object;

Returns

object

getEditingMarker()

getEditingMarker(): Marker;

Returns marker that is currently in the "edit mode" Used in Map Editor.

Returns

Marker

getGeoBounds()

getGeoBounds(viewBox?): object;

Retrieves the geographical boundaries of the map.

Parameters

Parameter	Type
`viewBox?`	`ViewBox`

Returns

object

Returns an object with south-west and north-east geographical points.

ne

ne: GeoPoint;

sw

sw: GeoPoint;

getGeoViewBox()

getGeoViewBox(): number[];

Returns geo-bounds of the map.

Returns

number[]

[leftLon, topLat, rightLon, bottomLat]

getGroupBBox()

getGroupBBox(mapObjects): ViewBox;

Parameters

Parameter	Type
`mapObjects`	( \| `Marker` \| `Region` \| `MarkerCluster`)[]

Returns

ViewBox

getGroupBounds()

getGroupBounds(objects): object;

Parameters

Parameter	Type
`objects`	( \| `Marker` \| `Region` \| `MarkerCluster`)[]

Returns

object

ne

ne: GeoPoint;

sw

sw: GeoPoint;

getGroupSelectOptions()

getGroupSelectOptions(): any[];

Returns the list of options for visibility settings in admin.js

Returns

any[]

getLayer()

getLayer(name): HTMLElement;

Returns layer by provided name

Parameters

Parameter	Type	Description
`name`	`string`

Returns

HTMLElement

getMarker()

getMarker(id): Marker;

Finds a Marker by ID

Parameters

Parameter	Type	Description
`id`	`string`	Marker ID

Returns

Marker

Example

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

getOptions()

getOptions(forTemplate, forWeb): MapOptions;

Returns map options.

Parameters

Parameter	Type	Description
`forTemplate`	`boolean`	If options should be formatted for use in a template
`forWeb`	`boolean`	If options should be formatted for use in the web

Returns

MapOptions

getPagination()

getPagination(callback?): HTMLElement;

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

Parameters

Parameter	Type	Description
`callback?`	() => `void`	Callback function that should be called on click on a next/prev page button

Returns

HTMLElement

getRegion()

getRegion(id): Region;

Finds a Region by ID

Parameters

Parameter	Type	Description
`id`	`string`	Region ID

Returns

Region

Example

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

getRegions()

getRegions(): ArrayIndexed<Region>;

Returns all Regions

Returns

ArrayIndexed<Region>

getRegionStylesByState()

getRegionStylesByState(region): RegionStylesByStatus;

Parameters

Parameter	Type
`region`	`Region`

Returns

RegionStylesByStatus

getRelativeScale()

getRelativeScale(): number;

Calculates the relative scale of the map. The relative scale is the ratio of the width of the adjusted SVG default viewBox to the width of the current viewBox.

Returns

number

The relative scale of the map.

getScale()

getScale(): number;

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

Map scale related to screen

getSelected()

getSelected(): string[];

Returns array of IDs of selected Regions

Returns

string[]

getUserLocation()

getUserLocation(callback): boolean;

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

Parameters

Parameter	Type	Description
`callback`	(`coordinates`) => `void`	Callback to be called when user location is received

Returns

boolean

false if geolocation is unavailable, or true if it's available

getViewBox()

getViewBox(): ViewBox;

Returns current viewBox

Returns

ViewBox

ViewBox

getViewBoxByState()

getViewBoxByState(type): ViewBox;

Parameters

Parameter	Type
`type`	`"custom"` \| `"initial"` \| `"svg"`

Returns

ViewBox

getZoomLevelByViewBox()

getZoomLevelByViewBox(viewBox, forceZoomLevel?): ViewBox;

Parameters

Parameter	Type
`viewBox`	`ViewBox`
`forceZoomLevel?`	`number`

Returns

ViewBox

getZoomLevelViewBox()

getZoomLevelViewBox(level): ViewBox;

Calculates ViewBox for a specific zoom level on demand

Parameters

Parameter	Type	Description
`level`	`number`	Target zoom level

Returns

ViewBox

ViewBox for the specified zoom level

getZoomRange()

getZoomRange(): object;

Returns

object

max

max: number;

min

min: number;

googleFitCurrentGeoBounds()

googleFitCurrentGeoBounds(): void;

Returns

void

handleLinkClick()

handleLinkClick(e): void;

Parameters

Parameter	Type
`e`	`TriggeredEvent`

Returns

void

hidePopover()

hidePopover(): void;

Hides the popover

Returns

void

highlightMarker()

highlightMarker(marker): void;

Highlight marker

Parameters

Parameter	Type	Description
`marker`	`Marker`

Returns

void

highlightRegions()

highlightRegions(regions): void;

Highlights an array of Regions (used on mouseover)

Parameters

Parameter	Type	Description
`regions`	`Region`[]

Returns

void

initMap()

initMap(_options, data?): Promise<void>;

Parameters

Parameter	Type
`_options`	`MapOptions`
`data?`	`any`

Returns

Promise<void>

isGeo()

isGeo(): boolean;

Checks if the map is geo-calibrated

Returns

boolean

isLinkClicked()

isLinkClicked(e): boolean;

Parameters

Parameter	Type
`e`	`any`

Returns

boolean

isRegionDisabled()

isRegionDisabled(id, svgfill): boolean;

Checks if Region should be disabled

Parameters

Parameter	Type	Description
`id`	`string`	Region ID
`svgfill`	`string`	Region color ("fill" attribute)

Returns

boolean

"true" if Region should be disabled.

labelsRegionsMoveScreenPositionBy()

labelsRegionsMoveScreenPositionBy(deltaX, deltaY): void;

Move position of Region Labels by given numbers

Parameters

Parameter	Type	Description
`deltaX`	`number`
`deltaY`	`number`

Returns

void

linkObjectToRegions()

linkObjectToRegions(object): void;

Connect object to regions

Parameters

Parameter	Type	Description
`object`	`Model`	Object to connect

Returns

void

loadDataObjects()

loadDataObjects(params?): JQueryDeferred<any>;

Parameters

Parameter	Type
`params?`	`any`

Returns

JQueryDeferred<any>

loadDirectory()

loadDirectory(): void;

Returns

void

loadFiltersController()

loadFiltersController(container, modal): void;

Loads filters controller into a provided container

Parameters

Parameter	Type	Default value	Description
`container`	`HTMLElement`	`undefined`	Container, jQuery object
`modal`	`boolean`	`false`	If filter should be in a modal window

Returns

void

loadItemsToDirectory()

loadItemsToDirectory(): boolean;

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

Returns

boolean

loadMap()

loadMap(id, container): void;

Gets map settings from the server

Parameters

Parameter	Type
`id`	`string` \| `number`
`container`	`HTMLElement`

Returns

void

loadMockRegions()

loadMockRegions(): void;

Returns

void

loadPreviousMap()

loadPreviousMap(): void;

Load previous map from the history (MapSVGMap.options.previousMapsIds)

Returns

void

loadSvgFile()

loadSvgFile(svgFileUrl, svgFileLastChanged): Promise<void | Response>;

Parameters

Parameter	Type	Default value
`svgFileUrl`	`any`	`undefined`
`svgFileLastChanged`	`number`	`1`

Returns

Promise<void | Response>

markerAdd()

markerAdd(marker): void;

Adds a marker to the map.

Parameters

Parameter	Type	Description
`marker`	`any`

Returns

void

Example

let location = new mapsvg.location({
  geoPoint: new mapsvg.geoPoint({lat: 55.12, lng: 46.19}),
  img: "/path/to/image.png"
 });

let marker = new mapsvg.marker({
  location: location,
  mapsvg: mapInstance
});

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

markerAddClickHandler()

markerAddClickHandler(e): void;

Event handler that creates marker on click on the map. Used in the Map Editor.

Parameters

Parameter	Type	Description
`e`	`TriggeredEvent`	Event object

Returns

void

markerClickHandler()

markerClickHandler(e, marker): void;

Parameters

Parameter	Type
`e`	`TriggeredEvent`
`marker`	`Marker`

Returns

void

markerClusterClickHandler()

markerClusterClickHandler(e, markerCluster): void;

Parameters

Parameter	Type
`e`	`TriggeredEvent`
`markerCluster`	`MarkerCluster`

Returns

void

markerDelete()

markerDelete(marker): void;

Deletes a marker

Parameters

Parameter	Type	Description
`marker`	`Marker`

Returns

void

markerRemove()

markerRemove(marker): void;

Removes marker from the map

Parameters

Parameter	Type	Description
`marker`	`Marker`

Returns

void

markersAdjustScreenPosition()

markersAdjustScreenPosition(): void;

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

Returns

void

markersClusterAdd()

markersClusterAdd(markersCluster): void;

Adds a marker cluster

Parameters

Parameter	Type	Description
`markersCluster`	`MarkerCluster`

Returns

void

markersMoveScreenPositionBy()

markersMoveScreenPositionBy(deltaX, deltaY): void;

Move Markers and clusters by given numbers.

Parameters

Parameter	Type	Description
`deltaX`	`number`
`deltaY`	`number`

Returns

void

mouseWheelZoom()

mouseWheelZoom(event): void;

Parameters

Parameter	Type
`event`	`MouseEventBase`<`any`, `any`, `any`, `any`>

Returns

void

objectsLoadedToMapHandler()

objectsLoadedToMapHandler(): void;

Returns

void

panBy()

panBy(x, y): object;

Shift the map by x,y pixels

Parameters

Parameter	Type	Description
`x`	`number`
`y`	`number`

Returns

object

x

x: boolean;

y

y: boolean;

pickChoroplethColor()

pickChoroplethColor(choroplethValue): object;

For choropleth map: returns color for given number value

Parameters

Parameter	Type	Description
`choroplethValue`	`number`	Number value

Returns

object

Color values, 0-255.

a

a: number;

b

b: number;

g

g: number;

r

r: number;

popoverAdjustScreenPosition()

popoverAdjustScreenPosition(): void;

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

Returns

void

popoverMoveScreenPositionBy()

popoverMoveScreenPositionBy(deltaX, deltaY): void;

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

Parameters

Parameter	Type	Description
`deltaX`	`number`
`deltaY`	`number`

Returns

void

popoverOffHandler()

popoverOffHandler(e): void;

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

Parameters

Parameter	Type	Description
`e`	`TriggeredEvent`	Event object

Returns

void

redraw()

redraw(): void;

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

Returns

void

redrawBubbles()

redrawBubbles(): void;

Redraws choropleth bubbles.

Returns

void

regionClickHandler()

regionClickHandler(e, region): void;

Parameters

Parameter	Type
`e`	`TriggeredEvent`
`region`	`Region`

Returns

void

reloadAllRegionStyles()

reloadAllRegionStyles(): void;

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

Returns

void

reloadRegions()

reloadRegions(): void;

Reloads Regions from SVG file

Returns

void

reloadRegionsFull()

reloadRegionsFull(): void;

Reloads Regions data

Returns

void

reloadRegionStyles()

reloadRegionStyles(region): void;

Parameters

Parameter	Type
`region`	`Region`

Returns

void

requestZoom()

requestZoom(): boolean;

Returns

boolean

scrollStart()

scrollStart(e, mapsvg): void;

Event handler - called when map scroll starts

Parameters

Parameter	Type	Description
`e`	`TouchEventBase`
`mapsvg`	`MapSVGMap`

Returns

void

seFilterTags()

seFilterTags(): void;

Returns

void

selectMarker()

selectMarker(marker): void;

Selects a Marker

Parameters

Parameter	Type	Description
`marker`	`Marker`

Returns

void

selectRegion()

selectRegion(id, skipDirectorySelection?): void;

Selects a Region

Parameters

Parameter	Type	Description
`id`	`string` \| `Region`	Region or ID
`skipDirectorySelection?`	`boolean`

Returns

void

setActions()

setActions(options): void;

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

Parameters

Parameter	Type	Description
`options`	`any`

Returns

void

Example

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

setCenter()

Call Signature

setCenter(point): SVGPoint;

Parameters

Parameter	Type
`point`	`SVGPoint`

Returns

SVGPoint

Call Signature

setCenter(point): GeoPoint;

Parameters

Parameter	Type
`point`	`GeoPoint`

Returns

GeoPoint

setChoropleth()

setChoropleth(options?): void;

Sets choropleth map options

Parameters

Parameter	Type	Description
`options?`	`any`

Returns

void

Example

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

setChoroplethSourceField()

setChoroplethSourceField(field): void;

Sets the field that is used for choropleth map

Parameters

Parameter	Type	Description
`field`	`any`	field name

Returns

void

setColors()

setColors(colors?): void;

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

Parameters

Parameter	Type	Description
`colors?`	{ [`key`: `string`]: `string` \| `number` \| `Record`<`string`, `unknown`>; }

Returns

void

Example

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

setContainers()

setContainers(options): void;

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

Parameters

Parameter	Type	Description
`options`	`any`

Returns

void

Example

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

setControls()

setControls(options): void;

Sets map control buttons.

Parameters

Parameter	Type	Description
`options`	`any`	control button options

Returns

void

Example

mapsvg.setControls({
  location: 'right',
  zoom: true,
  zoomReset: true,
  userLocation: true,
  previousMap: true
});

setCursor()

setCursor(type): void;

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

Parameters

Parameter	Type	Description
`type`	`any`	"pointer" or "default"

Returns

void

setDatabase()

setDatabase(options?): void;

Sets database options.

Parameters

Parameter	Type	Description
`options?`	`any`

Returns

void

Example

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

setDetailsView()

setDetailsView(options?): void;

Sets Details View options

Parameters

Parameter	Type	Description
`options?`	{ [`key`: `string`]: `any`; }	Options

Returns

void

setDirectory()

setDirectory(options): void;

Sets directory options.

Parameters

Parameter	Type	Description
`options`	`any`

Returns

void

Alias

setMenu

Example

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

setDisableAll()

setDisableAll(on): void;

Disables all Regions if "true" is passed.

Parameters

Parameter	Type	Description
`on`	`boolean`

Returns

void

setDisableLinks()

setDisableLinks(on): void;

Disables/enables redirection by link on click on a region or marker when "Go to link..." feature is enabled Used to prevent redirection in the map editor.

Parameters

Parameter	Type	Description
`on`	`boolean`	true (enable redirection) of false (disable)

Returns

void

setEditingMarker()

setEditingMarker(marker): void;

Sets marker into "edit mode". Used in Map Editor.

Parameters

Parameter	Type	Description
`marker`	`Marker`

Returns

void

setEvents()

setEvents(functions, unique?): void;

Sets event handlers

Parameters

Parameter	Type	Description
`functions`	{ [`key`: `string`]: `string`; }	Object containing the event handlers: `{eventName: callback, eventName2: callback}`
`unique?`	`boolean`	-

Returns

void

setFilters()

setFilters(options?): void;

Sets filter options

Parameters

Parameter	Type	Description
`options?`	{ [`key`: `string`]: `any`; }

Returns

void

Example

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

setFiltersSchema()

setFiltersSchema(filtersSchema?): void;

Sets the filters schema for the map. The filters schema defines the available filters for the map.

Parameters

Parameter	Type	Description
`filtersSchema?`	`any`[]	An array of filter fields. Each field is an object with the following properties: - `id` (string): The unique identifier of the filter field. - `title` (string): The title of the filter field. - `type` (string): The type of the filter field. Supported types are: "text", "select", "checkbox", "radio", "range". - `options` (object): Additional options for the filter field. The options depend on the filter type.

Returns

void

setFitSingleMarkerZoom()

setFitSingleMarkerZoom(zoom): void;

Parameters

Parameter	Type
`zoom`	`any`

Returns

void

setGoogleMaps()

setGoogleMaps(options?): void;

Sets Google Map options.

Parameters

Parameter	Type	Description
`options?`	`any`

Returns

void

Example

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

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

setLabelsMarkers()

setLabelsMarkers(options?): void;

Sets Marker labels

Parameters

Parameter	Type	Description
`options?`	`any`

Returns

void

setLabelsRegions()

setLabelsRegions(options?): void;

Parameters

Parameter	Type
`options?`	`any`

Returns

void

setLoadingText()

setLoadingText(message): void;

Updates the loading text message displayed on the map

Parameters

Parameter	Type	Description
`message`	`string`	The text to display while the map is loading

Returns

void

setMiddleware()

setMiddleware<T>(
   name, 
   handler, 
   unique): void;

Type Parameters

Type Parameter
`T` extends `MiddlewareType`

Parameters

Parameter	Type	Default value
`name`	`T`	`undefined`
`handler`	`MiddlewareHandlers`[`T`]	`undefined`
`unique`	`boolean`	`false`

Returns

void

setMiddlewares()

setMiddlewares(functions, unique): void;

Parameters

Parameter	Type	Default value
`functions`	{ `mapLoad`: \| `string` \| `MapLoadMiddleware`; `render`: \| `string` \| `RenderMiddleware`; `request`: \| `string` \| `RequestMiddleware`; `response`: \| `string` \| `ResponseMiddleware`; }	`undefined`
`functions.mapLoad`	\| `string` \| `MapLoadMiddleware`	`undefined`
`functions.render`	\| `string` \| `RenderMiddleware`	`undefined`
`functions.request`	\| `string` \| `RequestMiddleware`	`undefined`
`functions.response`	\| `string` \| `ResponseMiddleware`	`undefined`
`unique`	`boolean`	`false`

Returns

void

setMobileView()

setMobileView(options): void;

Sets mobile view options

Parameters

Parameter	Type	Description
`options`	`any`

Returns

void

setMultiSelect()

setMultiSelect(on, deselect?): void;

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

Parameters

Parameter	Type	Description
`on`	`boolean`
`deselect?`	`boolean`	If true, deselects currently selected Regions

Returns

void

setObjectClickedBeforeScroll()

setObjectClickedBeforeScroll(object): void;

Save the Region ID that was clicked before starting map scroll. It is used to trigger .regionClickHandler() later if scroll was less than 5px

Parameters

Parameter	Type
`object`	\| `Marker` \| `Region` \| `MarkerCluster`

Returns

void

setPagination()

setPagination(): void;

Adds pagination controls to the map and/or directory

Returns

void

setPopovers()

setPopovers(options): void;

Sets popover options.

Parameters

Parameter	Type	Description
`options`	`any`

Returns

void

Example

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

setRatio()

setRatio(ratio): void;

Parameters

Parameter	Type
`ratio`	`number`

Returns

void

setRegionEditHandler()

setRegionEditHandler(handler): void;

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.

Parameters

Parameter	Type	Description
`handler`	() => `void`

Returns

void

setRegions()

setRegions(options): void;

Parameters

Parameter	Type
`options`	`RegionOptionsCollection`

Returns

void

setRepositoryEvents()

setRepositoryEvents(): void;

Returns

void

setResponsive()

setResponsive(on): void;

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

Parameters

Parameter	Type	Description
`on`	`boolean`

Returns

void

setScroll()

setScroll(options, skipEvents): void;

Sets map scroll options.

Parameters

Parameter	Type	Description
`options`	`any`	scroll options
`skipEvents`	`any`	used by Map Editor to prevent re-setting event handlers.

Returns

void

Example

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

setSize()

setSize(
   width, 
   height, 
   responsive?): void;

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

Parameters

Parameter	Type	Description
`width`	`number`
`height`	`number`
`responsive?`	`boolean`

Returns

void

[width, height]

setSvgFileLastChanged()

setSvgFileLastChanged(val): void;

Parameters

Parameter	Type
`val`	`number`

Returns

void

setTemplates()

setTemplates(templates): void;

Sets templates body

Parameters

Parameter	Type	Description
`templates`	`any`	Key:value pairs of template names and HTML content

Returns

void

setTooltips()

setTooltips(options): void;

Sets tooltips options.

Parameters

Parameter	Type	Description
`options`	{ `on`: `boolean`; }
`options.on`	`boolean`	-

Returns

void

Example

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

setViewBox()

setViewBox(viewBox?, adjustGoogleMap?): boolean;

Sets map viewbox

Parameters

Parameter	Type	Default value	Description
`viewBox?`	`ViewBox`	`undefined`
`adjustGoogleMap?`	`boolean`	`true`

Returns

boolean

setViewBoxByGoogleMapBounds()

setViewBoxByGoogleMapBounds(): void;

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

Returns

void

setViewBoxByGoogleMapsOverlay()

setViewBoxByGoogleMapsOverlay(): void;

Returns

void

setWhRatio()

setWhRatio(ratio): void;

Parameters

Parameter	Type
`ratio`	`number`

Returns

void

setZoom()

setZoom(options): void;

Sets map zoom options.

Parameters

Parameter	Type	Description
`options`	`any`	zoom options

Returns

void

Example

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

setZoomLevel()

setZoomLevel(zoomLevel): void;

Parameters

Parameter	Type
`zoomLevel`	`number`

Returns

void

showDetails()

showDetails(obj, templateName?): void;

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

Parameters

Parameter	Type	Description
`obj`	\| `Model` \| `Region`
`templateName?`	`string`

Returns

void

Example

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

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

showPopover()

showPopover(object, templateName?): void;

Shows a popover for provided Region or DB Object.

Parameters

Parameter	Type	Description
`object`	\| `Model` \| `Region`	Region or DB Object
`templateName?`	`string`	-

Returns

void

Example

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

showTooltip()

showTooltip(object, templateName?): void;

Parameters

Parameter	Type
`object`	\| `Marker` \| `Region` \| `MarkerCluster`
`templateName?`	`string`

Returns

void

showUserLocation()

showUserLocation(callback): void;

Shows user current location Works only under HTTPS connection

Parameters

Parameter	Type	Description
`callback`	(`location`) => `void`	Callback to be called when user location is received

Returns

void

unhighlightMarker()

unhighlightMarker(): void;

Unhighlights all Regions (used on mouseout)

Returns

void

unhighlightRegions()

unhighlightRegions(): void;

Unhighlights all Regions (used on mouseout)

Returns

void

update()

update(options): void;

Updates map settings.

Parameters

Parameter	Type	Description
`options`	`Omit`<`MapOptions`, `"id"`>	Map options

Returns

void

Example

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

updateGoogleMapsMaxZoom()

updateGoogleMapsMaxZoom(geoPoint): void;

Parameters

Parameter	Type
`geoPoint`	`GeoPoint`

Returns

void

viewBoxReset()

viewBoxReset(type): ViewBox;

Resets the map zoom and scroll to the initial position.

Parameters

Parameter	Type	Default value
`type`	`"custom"` \| `"initial"` \| `"svg"`	`"custom"`

Returns

ViewBox

The new ViewBox after the reset.

viewBoxSetBySize()

viewBoxSetBySize(width, height): ViewBox;

Adjusts the size of the map container and viewBox simultaneously. This method is ideal for scenarios where both the map container and viewBox sizes need to be modified.

Parameters

Parameter	Type	Description
`width`	`number`	The desired width for the map container
`height`	`number`	The desired height for the map container

Returns

ViewBox

The updated viewBox object

zoom()

zoom(zoomLevel, center?): void;

Adjusts the map's zoom level

Parameters

Parameter	Type	Description
`zoomLevel`	`number`	The target zoom level
`center?`	`SVGPoint`	Optional: The center point for zooming

Returns

void

zoomIn()

zoomIn(center?): void;

Zooms-in the map

Parameters

Parameter	Type	Description
`center?`	`SVGPoint`	if provided, zoom will shift the center point

Returns

void

zoomOut()

zoomOut(center?): void;

Zooms-out the map

Parameters

Parameter	Type	Description
`center?`	`SVGPoint`	Center point (optional)

Returns

void

zoomTo()

zoomTo(mapObjects, zoomToLevel?): boolean;

Zooms to Region, Marker or array of Markers.

Parameters

Parameter	Type	Description
`mapObjects`	\| `Marker` \| `Region` \| `Region`[] \| `MarkerCluster` \| `Marker`[] \| `MarkerCluster`[]	Region ID, Region, Marker, array of Markers, array of MarkerClusters
`zoomToLevel?`	`number`	Zoom level

Returns

boolean

Example

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

Properties

_viewBox

_viewBox: ViewBox;

Initial viewBox

$gauge

$gauge: any;

afterLoadBlockers

afterLoadBlockers: number;

AfterLoad event can be blocked by:

Loading Google API JS files
Loading filters controller When a blocker is introduced, it increases the number of afterLoadBlockers when mapsvg.finalizeMapLoading is called, it checks if afterLoadBlockers = 0

canZoom

canZoom: boolean;

changedFields

changedFields: any;

changedSearch

changedSearch: any;

clickAddsMarker

clickAddsMarker: boolean;

clusterizerWorker

clusterizerWorker: Worker;

Clusterizer worker

clustersFromWorker

clustersFromWorker: MarkerCluster[];

Sets of pre-calculated clusters for every zoom level

containerId

containerId: string;

containers

containers: object = {};

Map containers

choroplethSourceSelect?

optional choroplethSourceSelect: object;

choroplethSourceSelect.container

container: HTMLElement;

choroplethSourceSelect.options

options: HTMLElement[];

choroplethSourceSelect.select

select: HTMLElement;

clustersCss?

optional clustersCss: HTMLStyleElement;

clustersHoverCss?

optional clustersHoverCss: HTMLStyleElement;

controls?

optional controls: HTMLElement;

detailsView?

optional detailsView: HTMLElement;

Details view container

directory?

optional directory: HTMLElement;

Directory container

filters?

optional filters: HTMLElement;

Filters container

filtersModal?

optional filtersModal: HTMLElement;

filterTags?

optional filterTags: HTMLElement;

optional footer: HTMLElement;

googleMaps?

optional googleMaps: HTMLElement;

Google Maps container

optional header: HTMLElement;

layers?

optional layers: HTMLElement;

Layers container

layersControl?

optional layersControl: HTMLElement;

Layers controls container

layersControlLabel?

optional layersControlLabel: HTMLElement;

layersControlList?

optional layersControlList: HTMLElement;

layersControlListNano?

optional layersControlListNano: HTMLElement;

leftSidebar?

optional leftSidebar: HTMLElement;

legend?

optional legend: object;

legend.coloring

coloring: HTMLElement;

legend.container

container: HTMLElement;

legend.description

description: HTMLElement;

legend.text

text: HTMLElement;

legend.title

title: HTMLElement;

loading?

optional loading: HTMLElement;

Container for "Loading map..." message

map?

optional map: HTMLElement;

Map container

mapContainer?

optional mapContainer: HTMLElement;

Parent map container

markersCss?

optional markersCss: HTMLStyleElement;

pagerDir?

optional pagerDir: HTMLElement;

pagerMap?

optional pagerMap: HTMLElement;

optional popover: HTMLElement;

Popover container

rightSidebar?

optional rightSidebar: HTMLElement;

scrollpane?

optional scrollpane: HTMLElement;

Scrolling container

scrollpaneWrap?

optional scrollpaneWrap: HTMLElement;

Wrapper of scrolling container

svg?

optional svg: SVGSVGElement;

SVG image container

optional toolbar: HTMLElement;

tooltipCluster?

optional tooltipCluster: HTMLElement;

Tooltip container

tooltipMarker?

optional tooltipMarker: HTMLElement;

Tooltip container

tooltipRegion?

optional tooltipRegion: HTMLElement;

Tooltip container

wrap?

optional wrap: HTMLElement;

Wrapper of map container

wrapAll?

optional wrapAll: HTMLElement;

Main wrapper for all containers

zoomButtons?

optional zoomButtons: HTMLElement;

containersCreated

containersCreated: boolean = false;

controllerMiddleWare

controllerMiddleWare: MiddlewareHandler;

controllers

controllers: object = {};

Map controllers

Example:

const { popover } = map.controllers
popover.show()

detailsView?

optional detailsView: DetailsController;

directory?

optional directory: DirectoryController;

filters?

optional filters: FiltersController;

optional popover: PopoverController;

optional toolbar: ToolbarController;

tooltips?

optional tooltips: object;

tooltips.cluster?

optional cluster: Tooltip;

tooltips.marker?

optional marker: Tooltip;

tooltips.region?

optional region: Tooltip;

controls

controls: object;

previousMap

previousMap: HTMLElement;

userLocation

userLocation: HTMLElement;

zoom

zoom: HTMLElement;

zoomReset

zoomReset: HTMLElement;

converter

converter: Converter;

defaults

defaults: MapOptions;

dirtyFields

dirtyFields: string[] = [];

disableLinks

disableLinks: boolean;

editData

editData: object;

on

on: boolean;

editingMarker

editingMarker: Marker;

Reference to a Marker currently edited (dragged)

editMarkers

editMarkers: object;

on

on: boolean;

editRegions

editRegions: object;

on

on: boolean;

events

events: Events;

eventsBaseInitialized

eventsBaseInitialized: boolean = false;

eventsPreventList

eventsPreventList: object = {};

Index Signature

[key: string]: boolean

extras

extras: object;

Index Signature

[key: string]: any

prefetch?

optional prefetch: boolean;

filtersRepository

filtersRepository: Repository;

filtersSchema

filtersSchema: Schema;

Schema for the map filters (set of fields and their parameters)

firefoxScroll

firefoxScroll: object;

insideIframe

insideIframe: boolean;

scrollX

scrollX: number;

scrollY

scrollY: number;

firstDataLoad

firstDataLoad: boolean;

Flag indicating first data load

fitDelta

fitDelta: number;

fitOnDataLoadDone

fitOnDataLoadDone: boolean;

formBuilder

formBuilder: any;

galleries

galleries: ArrayIndexed<GalleryOptionsInterface>;

geoCoordinates

geoCoordinates: boolean = false;

geoViewBox

geoViewBox: GeoViewBox;

Geo ViewBiox, containing to geo-points: SW(lat,lng) and NE(lat,lng)

googleMaps?

optional googleMaps: object;

currentMaxZoom?

optional currentMaxZoom: number;

initialized

initialized: boolean;

loaded

loaded: boolean;

map

map: Map;

maxZoomService?

optional maxZoomService: MaxZoomService;

overlay?

optional overlay: any;

zoomLimit?

optional zoomLimit: boolean;

googleMapsScript

googleMapsScript: HTMLScriptElement;

groups

groups: ArrayIndexed<GroupOptionsInterface>;

highlighted_marker

highlighted_marker: Marker;

highlightedRegions

highlightedRegions: Region[] = [];

id

id: number;

inBackend

inBackend: boolean;

initialZoomLevel

initialZoomLevel: number;

Initial zoom level

iosDownscaleFactor

iosDownscaleFactor: number;

Flag defining whether map needs to be downscaled or upscaled to prevent blurring on iOS devices

isScrolling

isScrolling: boolean = false;

isZooming

isZooming: boolean;

Flag defining whether the map is zooming at the moment

lastTimeFitWas

lastTimeFitWas: number;

layers

layers: object = {};

Index Signature

[key: string]: HTMLElement

liveCss

liveCss: HTMLStyleElement;

loaded

loaded: boolean;

locationField

locationField: SchemaField;

mapDataLoaded

mapDataLoaded: boolean = false;

mapDataPromise

mapDataPromise: Promise<void | Response>;

mapIsGeo

mapIsGeo: boolean;

mapLatBottomDegree

mapLatBottomDegree: number;

mapLonDelta

mapLonDelta: number;

markerEditHandler()

markerEditHandler: (location) => void;

Parameters

Parameter	Type
`location`	`Location`

Returns

void

markerOptions

markerOptions: Record<string, unknown>;

markers

markers: ArrayIndexed<Marker>;

Array of Markers

Example:

map.markers.forEach(marker => marker.hide())

markersClusters

markersClusters: ArrayIndexed<MarkerCluster>;

Array of Marker clusters

middlewares

middlewares: MiddlewareList;

objectClickedBeforeScroll

objectClickedBeforeScroll: 
  | Marker
  | Region
  | MarkerCluster;

objects

objects: ArrayIndexed<Model>;

objectsRepository

objectsRepository: Repository;

options

options: MapOptions;

optionsDelta

optionsDelta: object;

Index Signature

[key: string]: any

popoverShowingFor

popoverShowingFor: MapObject;

regionEditHandler()

regionEditHandler: () => void;

Returns

void

regions

regions: ArrayIndexed<Region>;

regionsRepository

regionsRepository: Repository;

resizeSensor

resizeSensor: ResizeSensor;

scale

scale: number = 1;

Current map scale relative to original size

scaleDistStart

scaleDistStart: number;

schemaRepository

schemaRepository: SchemaRepository;

scroll

scroll: object;

Scroll coordinates

dx?

optional dx: number;

dy?

optional dy: number;

gx?

optional gx: number;

gy?

optional gy: number;

touchScrollStart

touchScrollStart: number;

tx?

optional tx: number;

ty?

optional ty: number;

vx?

optional vx: number;

vxi?

optional vxi: number;

vy?

optional vy: number;

vyi?

optional vyi: number;

x?

optional x: number;

y?

optional y: number;

scrollStarted

scrollStarted: boolean;

selected_id

selected_id: string[] = [];

An array of selected reion IDs

selected_marker

selected_marker: Marker;

A reference ot currently selected marker

setMarkersByField

setMarkersByField: boolean;

superScale

superScale: number;

svgDefault

svgDefault: object = {};

geoViewBox?

optional geoViewBox: GeoViewBox;

height?

optional height: number;

viewBox?

optional viewBox: ViewBox;

width?

optional width: number;

svgFileLastChanged

svgFileLastChanged: number;

svgFileLoaded

svgFileLoaded: boolean = false;

svgFileLoadedPromise

svgFileLoadedPromise: Promise<boolean>;

svgFileLoadedResolve()

svgFileLoadedResolve: (value) => void;

Parameters

Parameter	Type
`value`	`boolean` \| `PromiseLike`<`boolean`>

Returns

void

svgFilePromise

svgFilePromise: Promise<void | Response>;

templates

templates: object;

Handlebars templates (for Details View, Popover, etc.)

Index Signature

[key: string]: any

tooltip: object;

mirror

mirror: object;

Index Signature

[key: string]: number

posOriginal

posOriginal: object;

Index Signature

[key: string]: string

posShifted

posShifted: object;

Index Signature

[key: string]: string

posShiftedPrev

posShiftedPrev: object;

Index Signature

[key: string]: string

touchZoomStart

touchZoomStart: boolean;

userLocation

userLocation: Location;

userLocationMarker

userLocationMarker: Marker;

vbStart

vbStart: boolean;

version

version: string;

viewBox

viewBox: ViewBox;

Current viewBox

whRatio

whRatio: object;

Width/height ratio

current

current: number;

original

original: number;

zoomDelta

zoomDelta: number = 0;

zoomLevels

zoomLevels: ArrayIndexed<ZoomLevel>;

The list of all zoom levels, with viewBoxes

Accessors​

_scale​

Get Signature​

Returns​

zoomLevel​

Get Signature​

Returns​

Constructors​

Constructor​

Parameters​

Returns​

Methods​

_new_setChoropleth()​

Parameters​

Returns​

Example​

addObject()​

Parameters​

Returns​

attachDataToRegions()​

Parameters​

Returns​

bubblesRegionsMoveScreenPositionBy()​

Parameters​

Returns​

centerOn()​

Parameters​

Returns​

checkIfZoomIsNeeded()​

Parameters​

Returns​

clearDirtyFields()​

Returns​

convertMouseToSVG()​

Parameters​

Returns​

createContainers()​

Returns​

createGoogleMapOverlay()​

Parameters​

Returns​

createToolbar()​

Returns​

deleteClusters()​

Returns​

deleteMarkers()​

Returns​

deselectAllMarkers()​

Returns​

deselectAllRegions()​

Returns​

deselectMarker()​

Parameters​

Returns​

deselectRegion()​

Parameters​

Returns​

destroy()​

Returns​

directoryFilterOut()​

Parameters​

Returns​

extractField()​

Parameters​

Returns​

fitMarkers()​

Returns​

fitViewBox()​

Parameters​

Returns​

getAdjustedSvgDefaultViewBox()​

Returns​

getBubbleSize()​

Parameters​

Returns​

getCenterGeoPoint()​

Parameters​

Returns​

getCenterSvgPoint()​

Parameters​

Accessors

_scale

Get Signature

Returns

zoomLevel

Get Signature

Returns

Constructors

Constructor

Parameters

Returns

Methods

_new_setChoropleth()

Parameters

Returns

Example

addObject()

Parameters

Returns

attachDataToRegions()

Parameters

Returns

bubblesRegionsMoveScreenPositionBy()

Parameters

Returns

centerOn()

Parameters

Returns

checkIfZoomIsNeeded()

Parameters

Returns

clearDirtyFields()

Returns

convertMouseToSVG()

Parameters

Returns

createContainers()

Returns

createGoogleMapOverlay()

Parameters

Returns

createToolbar()

Returns

deleteClusters()

Returns

deleteMarkers()

Returns

deselectAllMarkers()

Returns

deselectAllRegions()

Returns

deselectMarker()

Parameters

Returns

deselectRegion()

Parameters

Returns

destroy()

Returns

directoryFilterOut()

Parameters

Returns

extractField()

Parameters

Returns

fitMarkers()

Returns

fitViewBox()

Parameters

Returns

getAdjustedSvgDefaultViewBox()

Returns

getBubbleSize()

Parameters

Returns

getCenterGeoPoint()

Parameters

Returns

getCenterSvgPoint()

Parameters