mapsvg

Quick start

MapSVG exposes a global variable 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.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

• ArrayIndexed
• CheckboxFormElement
• CheckboxesFormElement
• ColorPickerFormElement
• Controller
• Converter
• DateFormElement
• DetailsController
• DirectoryController
• DistanceFormElement
• EmptyFormElement
• Events
• Filters
• FiltersController
• Form
• FormBuilder
• FormElement
• FormElementFactory
• GeoPoint
• GeoViewBox
• IdFormElement
• ImagesFormElement
• Location
• LocationAddress
• LocationFormElement
• Map
• MapObject
• MapSVGMap
• MapsRepository
• MapsV2Repository
• Mapsvg
• MapsvgClient
• Marker
• MarkerCluster
• MiddlewareList
• ModalFormElement
• Model
• PopoverController
• PostFormElement
• Query
• RadioFormElement
• Region
• RegionsFormElement
• Repository
• ResizeSensor
• SVGPoint
• SaveFormElement
• Schema
• SchemaField
• SchemaModel
• SchemaRepository
• ScreenPoint
• SearchFormElement
• SelectFormElement
• Server
• StatusFormElement
• TextFormElement
• TextareaFormElement
• TitleFormElement
• Tooltip
• ViewBox
• default

Enumerations

• ControllerEvent
• DirectoryEvent
• FiltersEvent
• FormBuilderEvents
• MiddlewareType
• RepositoryEvent
• SchemaEventType
• SchemaFieldType

Functions

• addLeadingSlash
• addTrailingSlash
• compareVersions
• convertToText
• default
• default
• default
• fixColorHash
• geocode
• getBrowser
• getDevice
• getFileType
• getMouseCoords
• getUserAgent
• handleFailedRequest
• isMac
• isNumber
• isPhone
• isTouchDevice
• isValidURL
• loadFile
• loadFiles
• migrate
• parseBoolean
• removeLeadingSlash
• safeURL
• throttle
• toSnakeCase
• ucfirst

Interfaces

• BaseController
• ChoroplethOptions
• ColorsOptions
• ControllerOptions
• ControlsOptions
• DatabaseOptions
• DetailsViewOptions
• DirectoryOptions
• FilterOptions
• FormElementInterface
• GalleryOptionsInterface
• GroupOptionsInterface
• LayersControlOptionsInterface
• LocationOptionsInterface
• MapOptions
• MapRepositoryOptions
• MapSVGProps
• MapsvgFrontendParams
• Middleware
• ObjectWithEvents
• PaginationOptions
• PopoversOptions
• PostInterface
• RepositoryInterface
• SchemaFieldProps
• SchemaOptions
• ScrollOptions
• TooltipsOptions
• ZoomOptions

Type Aliases

• ApiEndpoint
• ApiEndpointName
• ApiEndpoints
• AuthorizationCredentials
• BaseEventHandler
• EventData
• EventWithData
• HTTPMethod
• MapLoadMiddleware
• MapsvgCtx
• MapsvgRequest
• MapsvgResponse
• MapsvgRoutes
• MiddlewareCtx
• MiddlewareHandler
• MiddlewareHandlers
• MiddlewareOptions
• RegionToModel
• RenderMiddleware
• RequestMiddleware
• ResponseMiddleware
• SchemaType

Variables

• SchemaModelSchema
• default
• env
• files
• funcs
• http
• migrations
• numbers
• strings

Type Aliases

ApiEndpoint

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

Type declaration

• method: HTTPMethod

• name: ApiEndpointName

• url: string

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

• • (event: EventWithData<T>): void

  • Parameters

    • event: EventWithData<T>

    Returns void

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

• data: EventData<T>

• optionaldomEvent?: MouseEvent

• map: MapSVGMap

• name: string

HTTPMethod

HTTPMethod: POST | GET | DELETE | PUT

MapLoadMiddleware

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

Type declaration

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

  • Parameters

    • data: MapOptions

    • ctx: MiddlewareCtx<{ map: MapSVGMap }>

    Returns MapOptions

MapsvgCtx

MapsvgCtx: { request: MapsvgRequest; response: MapsvgResponse }

Type declaration

• [key string]: any

• request: MapsvgRequest

• response: MapsvgResponse

MapsvgRequest

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

Type declaration

• action: string

• optionaldata?: Query | Record<string, any>

• optionalheaders?: { Authorization: string }

  • Authorization: string

• method: HTTPMethod

• repository: RepositoryInterface<Model>

• url: string

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

MiddlewareHandler: RequestMiddleware | ResponseMiddleware | RenderMiddleware | MapLoadMiddleware

MiddlewareHandlers

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

Type declaration

• mapLoad: MapLoadMiddleware

• render: RenderMiddleware

• request: RequestMiddleware

• response: ResponseMiddleware

MiddlewareOptions

MiddlewareOptions: { unique?: boolean }

Type declaration

• optionalunique?: boolean

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

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

  • Parameters

    • data: Record<string, unknown>

    • ctx: MiddlewareCtx<{ controller: BaseController }>

    Returns Record<string, unknown>

RequestMiddleware

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

Type declaration

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

  • Parameters

    • data: unknown

    • ctx: MiddlewareCtx<{ map: MapSVGMap; repository: Repository; request: MapsvgRequest }>

    Returns unknown

ResponseMiddleware

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

Type declaration

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

  • Parameters

    • data: unknown

    • ctx: MiddlewareCtx<{ map: MapSVGMap; repository: Repository; request: MapsvgRequest; response: MapsvgResponse }>

    Returns MapsvgResponse

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: { geocode: (query: any, callback: any) => boolean; 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: { geocode: (query: any, callback: any) => boolean; throttle: (method: any, delay: any, scope: any, params: any) => void }

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

    • • (query: any, callback: any): boolean

      • Parameters

        • query: any

        • callback: any

        Returns boolean

  • 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: { geocode: (query: any, callback: any) => boolean; throttle: (method: any, delay: any, scope: any, params: any) => void } = ...

Type declaration

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

  • • (query: any, callback: any): boolean

    • Parameters

      • query: any

      • callback: any

      Returns boolean

• 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