Skip to main content

mapsvg

Quick start

MapSVG exposes a global object mapsvg on the window. It contains various classes and methods.

For example, you can check if the map is viewed on mobile device (but not on tablet):

mapsvg.utils.env.isPhone()

Other mapsvg uses will be shown below.

Map

Get

Get map by index (in the order of creation):

const map_1 = mapsvg.get(0)
const map_2 = mapsvg.get(1)
const map_3 = mapsvg.get(3)

Get map by ID:

const map = mapsvg.getById(254)

Get all of created maps:

const maps = mapsvg.instances

Create (by ID)

Create a new map from the settings previously created in MapSVG control panel, by providing the MAP_ID of the created map:

const map = new mapsvg.map("html-conainer-id", {
id: MAP_ID,
options: {
loadingText: "Loading map...",
},
})

When you use the code above, mapsvg will make a request to the server and get the SVG file and map options. It is essential to provide the loading message, to show it to the user while mapsvg loads data from the server.

Create (standalone)

Create a new standalone map, without connection to the server:

const map = new mapsvg.map(
"html-conainer-id",
{
options: {
source: "path/to/file.svg"
loadingText: "Loading map...",
},
}
)

Update

When the map is created, you can update any options using the update method:

map.update({
zoom: {
on: true,
},
})

It is equivalent to calling the corresponding setter method:

map.setZoom({ on: true })

Destroy

map.destroy()

Events

You can listen to the map events by using the mapsvg.events.on() method:

map.events.on("zoom", () => {
console.log("map zoomed to " + mapsvg.zoomLevel)
})

Turn off all or one event handlers:

map.events.off("zoom")

// or, remove event handler created previously:
map.events.on("zoom", eventHandler)
map.events.off("zoom", eventHandler)

Marker

Get

Get all or one marker from mapsvg instance:

const markers = map.markers
const markerById = map.getMarker(MARKER_ID)

Create

After you have created the map, you can add a Marker. Creating a marker requires providing a Location, and Object (if you want to show some data on click on the marker):

const map = new mapsvg.map(CONTAINER_ID, { source: "path/to/file.svg })

const location = new mapsvg.location({
geoPoint: new mapsvg.geoPoint({lat: 55.12, lng: 12.87}),
img: "/path/to/markers/user-location.svg",
})

const marker = new mapsvg.marker({
location,
object: {
field_1: "Hello world!",
field_2: "Apples and oranges",
},
map,
})

Update

Show/hide the marker

marker.show()
marker.hide()

Update marker coordinates:

marker.update({
geoPoint: new mapsvg.geoPoint({ lat: 55.12, lng: 12.87 }),
})

Delete

marker.delete()

Repositories

MapSVG has 2 data sets (called repositories): map.objectsRepository and map.regionsRepository.

map.objectsRepository contains what you create in the "Databas" tab in MapSVG control panel. map.regionsRepository contains what you create in the "Regions" tab in MapSVG control panel.

Both of the repositories have the same structure and the same methods.

Get

When you need to get on or more of the created maps instances, you can do so via MapSVG global variable.

Get map by index (in the order of creation):

const allObjects = map.objectsRepository.getLoaded()
const allRegions = map.regionsRepository.getLoaded()

const object = map.objectsRepository.findById(OBJECT_ID)
const region = map.regionsRepository.findById(OBJECT_ID)

Search:

const filteredObjects = map.objectsRepository.find({ filters: { category: 1 } })
const filteredRegions = map.regionsRepository.find({ filters: { category: 1 } })

You can call the method above outside of the map. When you call it, MapSVG makes a request to the server, gets the results and reloads markers on the map and directory items, and changes selected filters fields.

Create / Update / Delete

You can't modify objects using JavaScript API - you can do that only in MapSVG cotrol panel.

Index

Classes

Enumerations

Functions

Interfaces

Type Aliases

Variables

Type Aliases

ApiEndpoint

ApiEndpoint: { method: HTTPMethod; name: ApiEndpointName; url: string }

Type declaration

ApiEndpointName

ApiEndpointName: index | show | get | update | create | delete | clear | string

ApiEndpoints

ApiEndpoints: ArrayIndexed<ApiEndpoint>

AuthorizationCredentials

AuthorizationCredentials: { token: string; type: Bearer | Basic }

Type declaration

  • token: string
  • type: Bearer | Basic

BaseEventHandler

BaseEventHandler<T>: (event: EventWithData<T>) => void

Type parameters

  • T: Record<string, unknown> = Record<string, unknown>

Type declaration

EventData

EventData<T>: T

Type parameters

  • T: Record<string, unknown> = Record<string, unknown>

EventWithData

EventWithData<T>: { data: EventData<T>; domEvent?: MouseEvent; map: MapSVGMap; name: string }

Type parameters

  • T: Record<string, unknown> = Record<string, unknown>

Type declaration

HTTPMethod

HTTPMethod: POST | GET | DELETE | PUT

MapLoadMiddleware

MapLoadMiddleware: (data: MapOptions, ctx: MiddlewareCtx<{ map: MapSVGMap }>) => MapOptions

Type declaration

MapsvgCtx

MapsvgCtx: { request: MapsvgRequest; response: MapsvgResponse }

Type declaration

MapsvgRequest

MapsvgRequest: { action: string; data?: Query | Record<string, any>; headers?: { Authorization: string }; method: HTTPMethod; repository: RepositoryInterface<Model>; url: string }

Type declaration

MapsvgResponse

MapsvgResponse: { data: string | Record<string, any> }

Type declaration

  • data: string | Record<string, any>

MapsvgRoutes

MapsvgRoutes: { ajaxurl?: string; api: string; home: string; maps: string; root: string; templates: Record<string, boolean>; uploads: string }

Type declaration

  • optionalajaxurl?: string
  • api: string
  • home: string
  • maps: string
  • root: string
  • templates: Record<string, boolean>
  • uploads: string

MiddlewareCtx

MiddlewareCtx<T>: T

Type parameters

  • T

MiddlewareHandler

MiddlewareHandlers

MiddlewareHandlers: { mapLoad: MapLoadMiddleware; render: RenderMiddleware; request: RequestMiddleware; response: ResponseMiddleware }

Type declaration

MiddlewareOptions

MiddlewareOptions: { unique?: boolean }

Type declaration

  • optionalunique?: boolean

RegionOptions

RegionOptions: { disabled?: boolean; selected?: boolean; style?: Partial<CSSStyleDeclaration> }

Type declaration

  • optionaldisabled?: boolean
  • optionalselected?: boolean
  • optionalstyle?: Partial<CSSStyleDeclaration>

RegionParams

RegionParams: { element: SVGElement; mapsvg: MapSVGMap; options: RegionOptions; statusOptions: RegionStatusOptionsCollection }

Type declaration

RegionStatusOptionsCollection

RegionStatusOptionsCollection: Record<string, RegionStatusOptions>

RegionStylesByStatus

RegionStylesByStatus: {}

Type declaration

RegionStylesByStatusOptions

RegionStylesByStatusOptions: {}

Type declaration

  • [key string]: { default?: Region[style]; hover?: Region[style]; selected?: Region[style] }

RegionToModel

RegionToModel: { id: string; tableName: string; title: string }

Type declaration

  • id: string
  • tableName: string
  • title: string

RenderMiddleware

RenderMiddleware: (data: Record<string, unknown>, ctx: MiddlewareCtx<{ controller: BaseController }>) => Record<string, unknown>

Type declaration

RequestMiddleware

RequestMiddleware: (data: unknown, ctx: MiddlewareCtx<{ map: MapSVGMap; repository: Repository; request: MapsvgRequest }>) => unknown

Type declaration

ResponseMiddleware

ResponseMiddleware: (data: unknown, ctx: MiddlewareCtx<{ map: MapSVGMap; repository: Repository; request: MapsvgRequest; response: MapsvgResponse }>) => MapsvgResponse

Type declaration

SchemaFieldDbType

SchemaFieldDbType: int(11) | varchar(255) | datetime | text | boolean | float | double | json

SchemaFieldType

SchemaFieldType: id | text | textarea | radio | post | select | region | checkbox | checkboxes | image | marker | location | datetime | date | status | json | boolean | modal | save | empty | search | distance

SchemaType

SchemaType: object | post | api | schema | region | map

Variables

constSchemaModelSchema

SchemaModelSchema: Schema = ...

constdefault

default: { env: { getBrowser: () => { firefox: boolean; ie: boolean; safari: boolean }; getDevice: () => { android: boolean; ios: boolean }; getMouseCoords: (e: any) => { x: number; y: number }; getUserAgent: () => string; isMac: () => boolean; isPhone: () => boolean }; files: { getFileType: (url: any) => JS | CSS | Unknown; loadFile: (file: any) => Promise<unknown>; loadFiles: (files: any) => Promise<any[]> }; funcs: { deepMerge: { <T, U>(target: T, source: U): T & U; <T, U, V>(target: T, middle: U, source: V): T & U & V }; geocode: (query: any, callback: any) => boolean; getNestedValue: (obj: any, path: any) => any; splitObjectAndField: (fields: string) => { field: string; object: string }; throttle: (method: any, delay: any, scope: any, params: any) => void }; http: { handleFailedRequest: (response: any) => void }; numbers: { compareVersions: (v1: any, v2: any) => -1 | 0 | 1; isNumber: (n: any) => boolean; parseBoolean: (string: any) => boolean }; strings: { convertToText: (obj: any) => any; fixColorHash: (color: string) => string; functionFromString: Object; removeLeadingSlash: (str: any) => any; safeURL: (url: any) => any; toSnakeCase: (str: string) => string; ucfirst: (string: any) => any } } = ...

Type declaration

  • env: { getBrowser: () => { firefox: boolean; ie: boolean; safari: boolean }; getDevice: () => { android: boolean; ios: boolean }; getMouseCoords: (e: any) => { x: number; y: number }; getUserAgent: () => string; isMac: () => boolean; isPhone: () => boolean }
    • getBrowser: () => { firefox: boolean; ie: boolean; safari: boolean }
        • (): { firefox: boolean; ie: boolean; safari: boolean }
        • Returns { firefox: boolean; ie: boolean; safari: boolean }

          • firefox: boolean
          • ie: boolean
          • safari: boolean
    • getDevice: () => { android: boolean; ios: boolean }
        • (): { android: boolean; ios: boolean }
        • Returns { android: boolean; ios: boolean }

          • android: boolean
          • ios: boolean
    • getMouseCoords: (e: any) => { x: number; y: number }
        • (e: any): { x: number; y: number }
        • Parameters

          • e: any

          Returns { x: number; y: number }

          • x: number
          • y: number
    • getUserAgent: () => string
        • (): string
        • Returns string

    • isMac: () => boolean
        • (): boolean
        • Returns boolean

    • isPhone: () => boolean
        • (): boolean
        • Returns boolean

  • files: { getFileType: (url: any) => JS | CSS | Unknown; loadFile: (file: any) => Promise<unknown>; loadFiles: (files: any) => Promise<any[]> }
    • getFileType: (url: any) => JS | CSS | Unknown
        • (url: any): JS | CSS | Unknown
        • Parameters

          • url: any

          Returns JS | CSS | Unknown

    • loadFile: (file: any) => Promise<unknown>
        • (file: any): Promise<unknown>
        • Parameters

          • file: any

          Returns Promise<unknown>

    • loadFiles: (files: any) => Promise<any[]>
        • (files: any): Promise<any[]>
        • Parameters

          • files: any

          Returns Promise<any[]>

  • funcs: { deepMerge: { <T, U>(target: T, source: U): T & U; <T, U, V>(target: T, middle: U, source: V): T & U & V }; geocode: (query: any, callback: any) => boolean; getNestedValue: (obj: any, path: any) => any; splitObjectAndField: (fields: string) => { field: string; object: string }; throttle: (method: any, delay: any, scope: any, params: any) => void }
    • deepMerge: { <T, U>(target: T, source: U): T & U; <T, U, V>(target: T, middle: U, source: V): T & U & V }
        • <T, U>(target: T, source: U): T & U
        • <T, U, V>(target: T, middle: U, source: V): T & U & V
        • Type parameters

          • T
          • U

          Parameters

          • target: T
          • source: U

          Returns T & U

        • Type parameters

          • T
          • U
          • V

          Parameters

          • target: T
          • middle: U
          • source: V

          Returns T & U & V

    • geocode: (query: any, callback: any) => boolean
        • (query: any, callback: any): boolean
        • Parameters

          • query: any
          • callback: any

          Returns boolean

    • getNestedValue: (obj: any, path: any) => any
        • (obj: any, path: any): any
        • Parameters

          • obj: any
          • path: any

          Returns any

    • splitObjectAndField: (fields: string) => { field: string; object: string }
        • (fields: string): { field: string; object: string }
        • Parameters

          • fields: string

          Returns { field: string; object: string }

          • field: string
          • object: string
    • throttle: (method: any, delay: any, scope: any, params: any) => void
        • (method: any, delay: any, scope: any, params: any): void
        • Parameters

          • method: any
          • delay: any
          • scope: any
          • params: any

          Returns void

  • http: { handleFailedRequest: (response: any) => void }
    • handleFailedRequest: (response: any) => void
        • (response: any): void
        • Parameters

          • response: any

          Returns void

  • numbers: { compareVersions: (v1: any, v2: any) => -1 | 0 | 1; isNumber: (n: any) => boolean; parseBoolean: (string: any) => boolean }
    • compareVersions: (v1: any, v2: any) => -1 | 0 | 1
        • (v1: any, v2: any): -1 | 0 | 1
        • Parameters

          • v1: any
          • v2: any

          Returns -1 | 0 | 1

    • isNumber: (n: any) => boolean
        • (n: any): boolean
        • Parameters

          • n: any

          Returns boolean

    • parseBoolean: (string: any) => boolean
        • (string: any): boolean
        • Parameters

          • string: any

          Returns boolean

  • strings: { convertToText: (obj: any) => any; fixColorHash: (color: string) => string; functionFromString: Object; removeLeadingSlash: (str: any) => any; safeURL: (url: any) => any; toSnakeCase: (str: string) => string; ucfirst: (string: any) => any }
    • convertToText: (obj: any) => any
        • (obj: any): any
        • Parameters

          • obj: any

          Returns any

    • fixColorHash: (color: string) => string
        • (color: string): string
        • Parameters

          • color: string

          Returns string

    • functionFromString: Object
    • removeLeadingSlash: (str: any) => any
        • (str: any): any
        • Parameters

          • str: any

          Returns any

    • safeURL: (url: any) => any
        • (url: any): any
        • Parameters

          • url: any

          Returns any

    • toSnakeCase: (str: string) => string
        • (str: string): string
        • Parameters

          • str: string

          Returns string

    • ucfirst: (string: any) => any
        • (string: any): any
        • Parameters

          • string: any

          Returns any

constenv

env: { getBrowser: () => { firefox: boolean; ie: boolean; safari: boolean }; getDevice: () => { android: boolean; ios: boolean }; getMouseCoords: (e: any) => { x: number; y: number }; getUserAgent: () => string; isMac: () => boolean; isPhone: () => boolean } = ...

Type declaration

  • getBrowser: () => { firefox: boolean; ie: boolean; safari: boolean }
      • (): { firefox: boolean; ie: boolean; safari: boolean }
      • Returns { firefox: boolean; ie: boolean; safari: boolean }

        • firefox: boolean
        • ie: boolean
        • safari: boolean
  • getDevice: () => { android: boolean; ios: boolean }
      • (): { android: boolean; ios: boolean }
      • Returns { android: boolean; ios: boolean }

        • android: boolean
        • ios: boolean
  • getMouseCoords: (e: any) => { x: number; y: number }
      • (e: any): { x: number; y: number }
      • Parameters

        • e: any

        Returns { x: number; y: number }

        • x: number
        • y: number
  • getUserAgent: () => string
      • (): string
      • Returns string

  • isMac: () => boolean
      • (): boolean
      • Returns boolean

  • isPhone: () => boolean
      • (): boolean
      • Returns boolean

constfiles

files: { getFileType: (url: any) => JS | CSS | Unknown; loadFile: (file: any) => Promise<unknown>; loadFiles: (files: any) => Promise<any[]> } = ...

Type declaration

  • getFileType: (url: any) => JS | CSS | Unknown
      • (url: any): JS | CSS | Unknown
      • Parameters

        • url: any

        Returns JS | CSS | Unknown

  • loadFile: (file: any) => Promise<unknown>
      • (file: any): Promise<unknown>
      • Parameters

        • file: any

        Returns Promise<unknown>

  • loadFiles: (files: any) => Promise<any[]>
      • (files: any): Promise<any[]>
      • Parameters

        • files: any

        Returns Promise<any[]>

constfuncs

funcs: { deepMerge: { <T, U>(target: T, source: U): T & U; <T, U, V>(target: T, middle: U, source: V): T & U & V }; geocode: (query: any, callback: any) => boolean; getNestedValue: (obj: any, path: any) => any; splitObjectAndField: (fields: string) => { field: string; object: string }; throttle: (method: any, delay: any, scope: any, params: any) => void } = ...

Type declaration

  • deepMerge: { <T, U>(target: T, source: U): T & U; <T, U, V>(target: T, middle: U, source: V): T & U & V }
      • <T, U>(target: T, source: U): T & U
      • <T, U, V>(target: T, middle: U, source: V): T & U & V
      • Type parameters

        • T
        • U

        Parameters

        • target: T
        • source: U

        Returns T & U

      • Type parameters

        • T
        • U
        • V

        Parameters

        • target: T
        • middle: U
        • source: V

        Returns T & U & V

  • geocode: (query: any, callback: any) => boolean
      • (query: any, callback: any): boolean
      • Parameters

        • query: any
        • callback: any

        Returns boolean

  • getNestedValue: (obj: any, path: any) => any
      • (obj: any, path: any): any
      • Parameters

        • obj: any
        • path: any

        Returns any

  • splitObjectAndField: (fields: string) => { field: string; object: string }
      • (fields: string): { field: string; object: string }
      • Parameters

        • fields: string

        Returns { field: string; object: string }

        • field: string
        • object: string
  • throttle: (method: any, delay: any, scope: any, params: any) => void
      • (method: any, delay: any, scope: any, params: any): void
      • Parameters

        • method: any
        • delay: any
        • scope: any
        • params: any

        Returns void

consthttp

http: { handleFailedRequest: (response: any) => void } = ...

Type declaration

  • handleFailedRequest: (response: any) => void
      • (response: any): void
      • Parameters

        • response: any

        Returns void

constmigrations

migrations: { handler: (options: MapOptions) => MapOptions; version: string }[] = []

constnumbers

numbers: { compareVersions: (v1: any, v2: any) => -1 | 0 | 1; isNumber: (n: any) => boolean; parseBoolean: (string: any) => boolean } = ...

Type declaration

  • compareVersions: (v1: any, v2: any) => -1 | 0 | 1
      • (v1: any, v2: any): -1 | 0 | 1
      • Parameters

        • v1: any
        • v2: any

        Returns -1 | 0 | 1

  • isNumber: (n: any) => boolean
      • (n: any): boolean
      • Parameters

        • n: any

        Returns boolean

  • parseBoolean: (string: any) => boolean
      • (string: any): boolean
      • Parameters

        • string: any

        Returns boolean

conststrings

strings: { convertToText: (obj: any) => any; fixColorHash: (color: string) => string; functionFromString: Object; removeLeadingSlash: (str: any) => any; safeURL: (url: any) => any; toSnakeCase: (str: string) => string; ucfirst: (string: any) => any } = ...

Type declaration

  • convertToText: (obj: any) => any
      • (obj: any): any
      • Parameters

        • obj: any

        Returns any

  • fixColorHash: (color: string) => string
      • (color: string): string
      • Parameters

        • color: string

        Returns string

  • functionFromString: Object
  • removeLeadingSlash: (str: any) => any
      • (str: any): any
      • Parameters

        • str: any

        Returns any

  • safeURL: (url: any) => any
      • (url: any): any
      • Parameters

        • url: any

        Returns any

  • toSnakeCase: (str: string) => string
      • (str: string): string
      • Parameters

        • str: string

        Returns string

  • ucfirst: (string: any) => any
      • (string: any): any
      • Parameters

        • string: any

        Returns any