Skip to main content

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

Index

Constructors

Properties

Methods

Constructors

constructor

  • new MapSVGMap(containerId: string, mapParams: { id?: number; options?: MapOptions; svgFileLastChanged?: number; version?: string }, params?: { inBackend?: boolean; prefetch?: boolean }): MapSVGMap

  • Parameters

    • containerId: string
    • mapParams: { id?: number; options?: MapOptions; svgFileLastChanged?: number; version?: string }
    • params: { inBackend?: boolean; prefetch?: boolean } = ...

    Returns MapSVGMap

Properties

$gauge

$gauge: any

_scale

_scale: number = 1

Relative map scale from initial zoom level

_viewBox

_viewBox: ViewBox = ...

Initial viewBox

afterLoadBlockers

afterLoadBlockers: number

AfterLoad event can be blocked by:

  1. Loading Google API JS files
  2. 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

clusters

clusters: Record<string, unknown>

Array of Marker clusters

clustersByZoom

clustersByZoom: any[]

Sets of pre-calculated clusters for every zoom level

containerId

containerId: string

containers

containers: { choroplethSourceSelect?: { container: HTMLElement; options: HTMLElement[]; select: HTMLElement }; clustersCss?: HTMLStyleElement; clustersHoverCss?: HTMLStyleElement; controls?: HTMLElement; detailsView?: HTMLElement; directory?: HTMLElement; filterTags?: HTMLElement; filters?: HTMLElement; filtersModal?: HTMLElement; footer?: HTMLElement; googleMaps?: HTMLElement; header?: HTMLElement; layers?: HTMLElement; layersControl?: HTMLElement; layersControlLabel?: HTMLElement; layersControlList?: HTMLElement; layersControlListNano?: HTMLElement; leftSidebar?: HTMLElement; legend?: { coloring: HTMLElement; container: HTMLElement; description: HTMLElement; text: HTMLElement; title: HTMLElement }; loading?: HTMLElement; map?: HTMLElement; mapContainer?: HTMLElement; markersCss?: HTMLStyleElement; pagerDir?: HTMLElement; pagerMap?: HTMLElement; popover?: HTMLElement; rightSidebar?: HTMLElement; scrollpane?: HTMLElement; scrollpaneWrap?: HTMLElement; svg?: SVGSVGElement; tooltipCluster?: HTMLElement; tooltipMarker?: HTMLElement; tooltipRegion?: HTMLElement; wrap?: HTMLElement; wrapAll?: HTMLElement; zoomButtons?: HTMLElement } = {}

Map containers

Type declaration

  • optionalchoroplethSourceSelect?: { container: HTMLElement; options: HTMLElement[]; select: HTMLElement }
    • container: HTMLElement
    • options: HTMLElement[]
    • select: HTMLElement
  • optionalclustersCss?: HTMLStyleElement
  • optionalclustersHoverCss?: HTMLStyleElement
  • optionalcontrols?: HTMLElement
  • optionaldetailsView?: HTMLElement

    Details view container

  • optionaldirectory?: HTMLElement

    Directory container

  • optionalfilterTags?: HTMLElement
  • optionalfilters?: HTMLElement

    Filters container

  • optionalfiltersModal?: HTMLElement
  • optionalfooter?: HTMLElement
  • optionalgoogleMaps?: HTMLElement

    Google Maps container

  • optionalheader?: HTMLElement
  • optionallayers?: HTMLElement

    Layers container

  • optionallayersControl?: HTMLElement

    Layers controls container

  • optionallayersControlLabel?: HTMLElement
  • optionallayersControlList?: HTMLElement
  • optionallayersControlListNano?: HTMLElement
  • optionalleftSidebar?: HTMLElement
  • optionallegend?: { coloring: HTMLElement; container: HTMLElement; description: HTMLElement; text: HTMLElement; title: HTMLElement }
    • coloring: HTMLElement
    • container: HTMLElement
    • description: HTMLElement
    • text: HTMLElement
    • title: HTMLElement
  • optionalloading?: HTMLElement

    Container for "Loading map..." message

  • optionalmap?: HTMLElement

    Map container

  • optionalmapContainer?: HTMLElement

    Parent map container

  • optionalmarkersCss?: HTMLStyleElement
  • optionalpagerDir?: HTMLElement
  • optionalpagerMap?: HTMLElement
  • optionalpopover?: HTMLElement

    Popover container

  • optionalrightSidebar?: HTMLElement
  • optionalscrollpane?: HTMLElement

    Scrolling container

  • optionalscrollpaneWrap?: HTMLElement

    Wrapper of scrolling container

  • optionalsvg?: SVGSVGElement

    SVG image container

  • optionaltooltipCluster?: HTMLElement

    Tooltip container

  • optionaltooltipMarker?: HTMLElement

    Tooltip container

  • optionaltooltipRegion?: HTMLElement

    Tooltip container

  • optionalwrap?: HTMLElement

    Wrapper of map container

  • optionalwrapAll?: HTMLElement

    Main wrapper for all containers

  • optionalzoomButtons?: HTMLElement

containersCreated

containersCreated: boolean = false

controllerMiddleWare

controllerMiddleWare: MiddlewareHandler

controllers

controllers: { detailsView?: DetailsController; directory?: DirectoryController; filters?: FiltersController; popover?: PopoverController; tooltips?: { cluster?: Tooltip; marker?: Tooltip; region?: Tooltip } } = {}

Map controllers

Example:

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

Type declaration

controls

controls: { previousMap: HTMLElement; userLocation: HTMLElement; zoom: HTMLElement; zoomReset: HTMLElement }

Type declaration

  • previousMap: HTMLElement
  • userLocation: HTMLElement
  • zoom: HTMLElement
  • zoomReset: HTMLElement

converter

converter: Converter

defaults

defaults: MapOptions

dirtyFields

dirtyFields: string[] = []

disableLinks

disableLinks: boolean

editData

editData: { on: boolean } = ...

Type declaration

  • on: boolean

editMarkers

editMarkers: { on: boolean } = ...

Type declaration

  • on: boolean

editRegions

editRegions: { on: boolean } = ...

Type declaration

  • on: boolean

editingMarker

editingMarker: Marker

Reference to a Marker currently edited (dragged)

events

events: Events

eventsBaseInitialized

eventsBaseInitialized: boolean = false

eventsPreventList

eventsPreventList: {} = {}

Type declaration

  • [key string]: boolean

extras

extras: { prefetch?: boolean }

Type declaration

  • [key string]: any
  • optionalprefetch?: boolean

filtersRepository

filtersRepository: Repository<Model>

filtersSchema

filtersSchema: Schema

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

firefoxScroll

firefoxScroll: { insideIframe: boolean; scrollX: number; scrollY: number }

Type declaration

  • insideIframe: boolean
  • scrollX: number
  • 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)

optionalgoogleMaps

googleMaps?: { currentMaxZoom?: number; initialized: boolean; loaded: boolean; map: Map; maxZoomService?: MaxZoomService; overlay?: any; zoomLimit?: boolean } = ...

Type declaration

  • optionalcurrentMaxZoom?: number
  • initialized: boolean
  • loaded: boolean
  • map: Map
  • optionalmaxZoomService?: MaxZoomService
  • optionaloverlay?: any
  • optionalzoomLimit?: boolean

googleMapsScript

googleMapsScript: HTMLScriptElement

groups

groups: ArrayIndexed<GroupOptionsInterface> = ...

highlightedRegions

highlightedRegions: Region[] = []

highlighted_marker

highlighted_marker: Marker

id

id: number

inBackend

inBackend: boolean

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: {} = {}

Type declaration

  • [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: Location) => void

Type declaration

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<Model>

options

options: MapOptions

optionsDelta

optionsDelta: {}

Type declaration

  • [key string]: any

popoverShowingFor

popoverShowingFor: MapObject

regionEditHandler

regionEditHandler: () => void

Type declaration

    • (): void

    • Returns void

regions

regions: ArrayIndexed<Region> = ...

regionsRepository

regionsRepository: Repository<Model>

resizeSensor

resizeSensor: ResizeSensor

scale

scale: number = 1

Current map scale relative to original size

scaleDistStart

scaleDistStart: number

schemaRepository

schemaRepository: SchemaRepository

scroll

scroll: { dx?: number; dy?: number; gx?: number; gy?: number; touchScrollStart: number; tx?: number; ty?: number; vx?: number; vxi?: number; vy?: number; vyi?: number; x?: number; y?: number } = ...

Scroll coordinates

Type declaration

  • optionaldx?: number
  • optionaldy?: number
  • optionalgx?: number
  • optionalgy?: number
  • touchScrollStart: number
  • optionaltx?: number
  • optionalty?: number
  • optionalvx?: number
  • optionalvxi?: number
  • optionalvy?: number
  • optionalvyi?: number
  • optionalx?: number
  • optionaly?: 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: { geoViewBox?: GeoViewBox; height?: number; viewBox?: ViewBox; width?: number } = {}

Type declaration

  • optionalgeoViewBox?: GeoViewBox
  • optionalheight?: number
  • optionalviewBox?: ViewBox
  • optionalwidth?: number

svgFileLastChanged

svgFileLastChanged: number

svgFileLoaded

svgFileLoaded: boolean = false

svgFileLoadedPromise

svgFileLoadedPromise: Promise<boolean>

svgFileLoadedResolve

svgFileLoadedResolve: (value: boolean | PromiseLike<boolean>) => void

Type declaration

    • (value: boolean | PromiseLike<boolean>): void

    • Parameters

      • value: boolean | PromiseLike<boolean>

      Returns void

svgFilePromise

svgFilePromise: Promise<void | Response>

templates

templates: {}

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

Type declaration

  • [key string]: any

tooltip

tooltip: { mirror: {}; posOriginal: {}; posShifted: {}; posShiftedPrev: {} }

Type declaration

  • mirror: {}
    • [key string]: number
  • posOriginal: {}
    • [key string]: string
  • posShifted: {}
    • [key string]: string
  • posShiftedPrev: {}
    • [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: { current: number; original: number }

Width/height ratio

Type declaration

  • current: number
  • original: number

zoomDelta

zoomDelta: number

zoomLevel

zoomLevel: number = 0

Current map zoom level

zoomLevels

zoomLevels: ArrayIndexed<{ _scale: number; viewBox: ViewBox; zoomLevel: number }>

The list of all zoom levels, with viewBoxes

Methods

_new_setChoropleth

  • _new_setChoropleth(options?: any): void

  • Sets choropleth map options

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

    Parameters

    • optionaloptions: any

    Returns void

addObject

  • addObject(object: Model): void

  • Parameters

    Returns void

attachDataToRegions

  • attachDataToRegions(object?: Model): void

  • Attaches DB Objects to Regions

    Parameters

    Returns void

bubblesRegionsMoveScreenPositionBy

  • bubblesRegionsMoveScreenPositionBy(deltaX: number, deltaY: number): void

  • Move position of Regions bubbles by given numbers

    Parameters

    • deltaX: number
    • deltaY: number

    Returns void

centerOn

  • Centers map on Region or Marker.

    Parameters

    • region: Marker | Region | SVGPoint

      Region or Marker

    • optionalyShift: number

      Vertical shift from center. Used by showPopover method to fit popover in the map container

    Returns void

clearDirtyFields

  • clearDirtyFields(): void

  • Returns void

convertMouseToSVG

  • convertMouseToSVG(e: TriggeredEvent): SVGPoint

  • Converts mouse pointer coordinates to SVG coordinates

    Parameters

    • e: TriggeredEvent

      Event object

    Returns SVGPoint

    • [x,y] SVG coordinates

createContainers

  • createContainers(): void

  • Returns void

createGoogleMapOverlay

  • createGoogleMapOverlay(bounds: any, map: any): GoogleMapsOverlay

  • Parameters

    • bounds: any
    • map: any

    Returns GoogleMapsOverlay

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: Marker): void

  • Deselects one Marker

    Parameters

    Returns void

deselectRegion

  • deselectRegion(region: Region): void

  • Deselects one Region

    Parameters

    Returns void

destroy

  • destroy(): void

  • Destroys the map and all related containers.

    Returns void

directoryFilterOut

  • directoryFilterOut(items: any): any

  • Filter out directory items

    Parameters

    • items: any

    Returns any

fitMarkers

  • fitMarkers(): void

  • Changes maps viewBox to fit loaded markers.

    Returns void

fitViewBox

  • fitViewBox(fitViewBox: ViewBox, forceZoomLevel: number): boolean

  • Parameters

    • fitViewBox: ViewBox
    • forceZoomLevel: number

    Returns boolean

getCenterGeoPoint

  • Returns lat,lng coordinates of center of the current view

    Returns GeoPoint

getCenterSvgPoint

  • Returns SVG coordinates of the center of current map position

    Returns SVGPoint

getContainer

  • getContainer(name: string): HTMLElement

  • Parameters

    • name: string

    Returns HTMLElement

getConverter

getData

  • getData(): { id: number; options: MapOptions; svgFileLastChanged: number; title: string; version: string }

  • Returns { id: number; options: MapOptions; svgFileLastChanged: number; title: string; version: string }

    • id: number
    • options: MapOptions
    • svgFileLastChanged: number
    • title: string
    • version: string

getDb

  • Returns Database

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

    Returns Repository<Model>

getDbRegions

getDirtyFields

  • getDirtyFields(): {}

  • Returns {}

    • [key string]: any

getEditingMarker

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

    Returns Marker

getGeoViewBox

  • getGeoViewBox(): number[]

  • Returns geo-bounds of the map.

    Returns number[]

    • [leftLon, topLat, rightLon, bottomLat]

getGroupBBox

getGroupSelectOptions

  • getGroupSelectOptions(): any[]

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

    Returns any[]

getLayer

  • getLayer(name: string): HTMLElement

  • Returns layer by provided name

    Parameters

    • name: string

    Returns HTMLElement

getMarker

  • Finds a Marker by ID

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

    Parameters

    • id: string

      Marker ID

    Returns Marker

getOptions

  • getOptions(forTemplate: boolean, forWeb: boolean): MapOptions

  • Returns map options.

    Parameters

    • 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?: () => void): HTMLElement

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

    Parameters

    • optionalcallback: () => void

      Callback function that should be called on click on a next/prev page button

    Returns HTMLElement

getRegion

  • Finds a Region by ID

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

    Parameters

    • id: string

      Region ID

    Returns Region

getRegions

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: (coordinates: GeoPoint) => void): boolean

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

    Parameters

    • callback: (coordinates: GeoPoint) => void

      Callback to be called when user location is received

    Returns boolean

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

getViewBox

  • Returns current viewBox

    Returns ViewBox

    ViewBox

getZoomForGoogle

  • getZoomForGoogle(): number

  • Returns zoom level adjusted for Google Maps

    Returns number

getZoomRange

  • getZoomRange(): { max: number; min: number }

  • Returns { max: number; min: number }

    • max: number
    • min: number

hidePopover

  • hidePopover(): void

  • Hides the popover

    Returns void

highlightMarker

  • highlightMarker(marker: Marker): void

  • Highlight marker

    Parameters

    Returns void

highlightRegions

  • highlightRegions(regions: Region[]): void

  • Highlights an array of Regions (used on mouseover)

    Parameters

    Returns void

initMap

  • initMap(_options: MapOptions, data?: any): Promise<void>

  • Parameters

    Returns Promise<void>

isGeo

  • isGeo(): boolean

  • Checks if the map is geo-calibrated

    Returns boolean

isRegionDisabled

  • isRegionDisabled(id: string, svgfill: string): boolean

  • Checks if Region should be disabled

    Parameters

    • id: string

      Region ID

    • svgfill: string

      Region color ("fill" attribute)

    Returns boolean

    • "true" if Region should be disabled.

labelsRegionsMoveScreenPositionBy

  • labelsRegionsMoveScreenPositionBy(deltaX: number, deltaY: number): void

  • Move position of Region Labels by given numbers

    Parameters

    • deltaX: number
    • deltaY: number

    Returns void

linkObjectToRegions

  • linkObjectToRegions(object: Model): void

  • Connect object to regions

    Parameters

    • object: Model

      Object to connect

    Returns void

loadDataObjects

  • loadDataObjects(params?: any): JQueryDeferred<any>

  • Parameters

    • optionalparams: any

    Returns JQueryDeferred<any>

loadDirectory

  • loadDirectory(): void

  • Returns void

loadFiltersController

  • loadFiltersController(container: HTMLElement, modal?: boolean): void

  • Loads filters controller into a provided container

    Parameters

    • container: HTMLElement

      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: string | number, container: HTMLElement): void

  • Gets map settings from the server

    Parameters

    • id: string | number
    • container: HTMLElement

    Returns void

loadPreviousMap

  • loadPreviousMap(): void

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

    Returns void

loadSvgFile

  • loadSvgFile(svgFileUrl: any, svgFileLastChanged?: number): Promise<void | Response>

  • Parameters

    • svgFileUrl: any
    • svgFileLastChanged: number = 1

    Returns Promise<void | Response>

markerAdd

  • markerAdd(marker: any): void

  • Adds a marker to the map.

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

    Parameters

    • marker: any

    Returns void

markerAddClickHandler

  • markerAddClickHandler(e: TriggeredEvent): void

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

    Parameters

    • e: TriggeredEvent

      Event object

    Returns void

markerClickHandler

  • markerClickHandler(e: TriggeredEvent, marker: Marker): void

  • Parameters

    • e: TriggeredEvent
    • marker: Marker

    Returns void

markerClusterClickHandler

  • markerClusterClickHandler(e: TriggeredEvent, markerCluster: MarkerCluster): void

  • Parameters

    Returns void

markerDelete

  • markerDelete(marker: Marker): void

  • Deletes a marker

    Parameters

    Returns void

markerRemove

  • markerRemove(marker: Marker): void

  • Removes marker from the map

    Parameters

    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

  • Adds a marker cluster

    Parameters

    Returns void

markersMoveScreenPositionBy

  • markersMoveScreenPositionBy(deltaX: number, deltaY: number): void

  • Move Markers and clusters by given numbers.

    Parameters

    • deltaX: number
    • deltaY: number

    Returns void

mouseWheelZoom

  • mouseWheelZoom(event: MouseEventBase<any, any, any, any>): void

  • Parameters

    • event: MouseEventBase<any, any, any, any>

    Returns void

objectsLoadedToMapHandler

  • objectsLoadedToMapHandler(): void

  • Returns void

panBy

  • panBy(x: number, y: number): { x: boolean; y: boolean }

  • Shift the map by x,y pixels

    Parameters

    • x: number
    • y: number

    Returns { x: boolean; y: boolean }

    • x: boolean
    • y: boolean

pickChoroplethColor

  • pickChoroplethColor(choroplethValue: number): { a: number; b: number; g: number; r: number }

  • For choropleth map: returns color for given number value

    Parameters

    • choroplethValue: number

      Number value

    Returns { a: number; b: number; g: number; r: number }

    • Color values, 0-255.
    • a: number
    • b: number
    • g: number
    • r: number

popoverAdjustScreenPosition

  • popoverAdjustScreenPosition(): void

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

    Returns void

popoverMoveScreenPositionBy

  • popoverMoveScreenPositionBy(deltaX: number, deltaY: number): void

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

    Parameters

    • deltaX: number
    • deltaY: number

    Returns void

popoverOffHandler

  • popoverOffHandler(e: TriggeredEvent): void

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

    Parameters

    • 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: TriggeredEvent, region: Region): void

  • Parameters

    • e: TriggeredEvent
    • region: Region

    Returns void

regionsRedrawColors

  • regionsRedrawColors(): 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

scrollStart

  • scrollStart(e: TouchEventBase, mapsvg: MapSVGMap): void

  • Event handler - called when map scroll starts

    Parameters

    Returns void

selectMarker

  • selectMarker(marker: Marker): void

  • Selects a Marker

    Parameters

    Returns void

selectRegion

  • selectRegion(id: string | Region, skipDirectorySelection?: boolean): void

  • Selects a Region

    Parameters

    • id: string | Region

      Region or ID

    • optionalskipDirectorySelection: boolean

    Returns void

setActions

  • setActions(options: any): void

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

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

    Parameters

    • options: any

    Returns void

setChoropleth

  • setChoropleth(options?: any): void

  • Sets choropleth map options

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

    Parameters

    • optionaloptions: any

    Returns void

setChoroplethSourceField

  • setChoroplethSourceField(field: any): void

  • Sets the field that is used for choropleth map

    Parameters

    • field: any

      field name

    Returns void

setColors

  • setColors(colors?: {}): void

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

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

    Parameters

    • optionalcolors: {}

    Returns void

setContainers

  • setContainers(options: any): void

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

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

    Parameters

    • options: any

    Returns void

setControls

  • setControls(options: any): void

  • Sets map control buttons.

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

    Parameters

    • options: any

      control button options

    Returns void

setCursor

  • setCursor(type: any): void

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

    Parameters

    • type: any

      "pointer" or "default"

    Returns void

setDatabase

  • setDatabase(options?: any): void

  • Sets database options.

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

    Parameters

    • optionaloptions: any

    Returns void

setDetailsView

  • setDetailsView(options?: {}): void

  • Sets Details View options

    Parameters

    • optionaloptions: {}

      Options

    Returns void

setDirectory

  • setDirectory(options: any): void

  • Sets directory options.

    @alias

    setMenu

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

    Parameters

    • options: any

    Returns void

setDisableAll

  • setDisableAll(on: boolean): void

  • Disables all Regions if "true" is passed.

    Parameters

    • on: boolean

    Returns void

setDisableLinks

  • setDisableLinks(on: boolean): 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

    • on: boolean

      true (enable redirection) of false (disable)

    Returns void

setEditingMarker

  • setEditingMarker(marker: Marker): void

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

    Parameters

    Returns void

setEvents

  • setEvents(functions: {}, unique?: boolean): void

  • Sets event handlers

    Parameters

    • functions: {}

      Object containing the event handlers: {eventName: callback, eventName2: callback}

    • optionalunique: boolean

    Returns void

setFilters

  • setFilters(options?: {}): void

  • Sets filter options

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

    Parameters

    • optionaloptions: {}

    Returns void

setFiltersSchema

  • setFiltersSchema(filtersSchema?: any[]): void

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

    Parameters

    • optionalfiltersSchema: 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: any): void

  • Parameters

    • zoom: any

    Returns void

setGoogleMaps

  • setGoogleMaps(options?: any): void

  • Sets Google Map options.

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

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

    Parameters

    • optionaloptions: any

    Returns void

setLabelsMarkers

  • setLabelsMarkers(options?: any): void

  • Sets Marker labels

    Parameters

    • optionaloptions: any

    Returns void

setLabelsRegions

  • setLabelsRegions(options?: any): void

  • Parameters

    • optionaloptions: any

    Returns void

setLoadingText

  • setLoadingText(message: string): void

  • Sets loading text message

    Parameters

    • message: string

    Returns void

setMiddleware

setMiddlewares

setMobileView

  • setMobileView(options: any): void

  • Sets mobile view options

    Parameters

    • options: any

    Returns void

setMultiSelect

  • setMultiSelect(on: boolean, deselect?: boolean): void

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

    Parameters

    • on: boolean
    • optionaldeselect: boolean

      If true, deselects currently selected Regions

    Returns void

setObjectClickedBeforeScroll

  • 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

    Returns void

setPagination

  • setPagination(): void

  • Adds pagination controls to the map and/or directory

    Returns void

setPopovers

  • setPopovers(options: any): void

  • Sets popover options.

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

    Parameters

    • options: any

    Returns void

setRegionEditHandler

  • setRegionEditHandler(handler: () => void): 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

    • handler: () => void

    Returns void

setRepositoryEvents

  • setRepositoryEvents(): void

  • Returns void

setResponsive

  • setResponsive(on: boolean): void

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

    Parameters

    • on: boolean

    Returns void

setScroll

  • setScroll(options: any, skipEvents: any): void

  • Sets map scroll options.

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

    Parameters

    • options: any

      scroll options

    • skipEvents: any

      used by Map Editor to prevent re-setting event handlers.

    Returns void

setSize

  • setSize(width: number, height: number, responsive?: boolean): void

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

    Parameters

    • width: number
    • height: number
    • optionalresponsive: boolean

    Returns void

    • [width, height]

setSvgFileLastChanged

  • setSvgFileLastChanged(val: number): void

  • Parameters

    • val: number

    Returns void

setTemplates

  • setTemplates(templates: any): void

  • Sets templates body

    Parameters

    • templates: any

      Key:value pairs of template names and HTML content

    Returns void

setTooltips

  • setTooltips(options: { on: boolean }): void

  • Sets tooltips options.

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

    Parameters

    • options: { on: boolean }

    Returns void

setViewBox

  • setViewBox(viewBox?: ViewBox, adjustGoogleMap?: boolean): boolean

  • Sets map viewbox

    Parameters

    • optionalviewBox: ViewBox
    • 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

setZoom

  • setZoom(options: any): void

  • Sets map zoom options.

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

    Parameters

    • options: any

      zoom options

    Returns void

showDetails

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

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

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

    Parameters

    Returns void

showPopover

  • Shows a popover for provided Region or DB Object.

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

    Parameters

    Returns void

publicshowTooltip

showUserLocation

  • showUserLocation(callback: (location: Location) => void): void

  • Shows user current location Works only under HTTPS connection

    Parameters

    • callback: (location: 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

  • Updates map settings.

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

    Parameters

    Returns void

updateGoogleMapsMaxZoom

  • updateGoogleMapsMaxZoom(geoPoint: GeoPoint): void

  • Parameters

    Returns void

viewBoxReset

  • viewBoxReset(toInitial: boolean): ViewBox

  • Resets map zoom and scroll to initial position.

    Parameters

    • toInitial: boolean

      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 ViewBox

    ViewBox

viewBoxSetBySize

  • viewBoxSetBySize(width: number, height: number): ViewBox

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

    Parameters

    • width: number

      Width of map container

    • height: number

      Height of map container

    Returns ViewBox

    ViewBox

zoom

  • zoom(delta: number, center?: SVGPoint): void

  • Zooms the map

    Parameters

    • delta: number

      1/-1

    • optionalcenter: SVGPoint

      [x,y] zoom center point

    Returns void

zoomIn

  • Zooms-in the map

    Parameters

    • optionalcenter: SVGPoint

      if provided, zoom will shift the center point

    Returns void

zoomOut

  • Zooms-out the map

    Parameters

    • optionalcenter: SVGPoint

      Center point (optional)

    Returns void

zoomTo

  • Zooms to Region, Marker or array of Markers.

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

    Parameters

    Returns boolean