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
- 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
Functions
- addLeadingSlash
- addTrailingSlash
- compareVersions
- convertToText
- debounce
- deepMerge
- default
- default
- default
- fixColorHash
- geocode
- getBrowser
- getDevice
- getFileType
- getMouseCoords
- getNestedValue
- getUserAgent
- handleFailedRequest
- idGenerator
- isMac
- isNumber
- isPhone
- isTouchDevice
- isValidURL
- loadFile
- loadFiles
- migrate
- parseBoolean
- removeLeadingSlash
- safeURL
- splitObjectAndField
- throttle
- toSnakeCase
- ucfirst
- useId
Interfaces
- BaseController
- ChoroplethOptions
- ColorsOptions
- ControllerOptions
- ControlsOptions
- DatabaseOptions
- DetailsViewOptions
- DirectoryOptions
- FilterOptions
- FormElementInterface
- GalleryOptionsInterface
- GroupOptionsInterface
- LayersControlOptionsInterface
- LocationOptionsInterface
- MapOptions
- MapRepositoryOptions
- MapSVGProps
- MapsvgFrontendParams
- Middleware
- ObjectWithEvents
- PaginationOptions
- PopoversOptions
- PostInterface
- RegionOptionsCollection
- RegionStatusOptions
- 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
- RegionOptions
- RegionParams
- RegionStatusOptionsCollection
- RegionStylesByStatus
- RegionStylesByStatusOptions
- RegionToModel
- RenderMiddleware
- RequestMiddleware
- ResponseMiddleware
- SchemaFieldDbType
- SchemaFieldType
- SchemaType
Variables
Type Aliases
ApiEndpoint
Type declaration
method: HTTPMethod
name: ApiEndpointName
url: string
ApiEndpointName
ApiEndpoints
AuthorizationCredentials
Type declaration
token: string
type: Bearer | Basic
BaseEventHandler
Type parameters
- T: Record<string, unknown> = Record<string, unknown>
Type declaration
Parameters
event: EventWithData<T>
Returns void
EventData
Type parameters
- T: Record<string, unknown> = Record<string, unknown>
EventWithData
HTTPMethod
MapLoadMiddleware
Type declaration
Parameters
data: MapOptions
ctx: MiddlewareCtx<{ map: MapSVGMap }>
Returns MapOptions
MapsvgCtx
Type declaration
[key string]: any
request: MapsvgRequest
response: MapsvgResponse
MapsvgRequest
Type declaration
action: string
optionaldata?: Query | Record<string, any>
optionalheaders?: { Authorization: string }
Authorization: string
method: HTTPMethod
repository: RepositoryInterface<Model>
url: string
MapsvgResponse
Type declaration
data: string | Record<string, any>
MapsvgRoutes
Type declaration
optionalajaxurl?: string
api: string
home: string
maps: string
root: string
templates: Record<string, boolean>
uploads: string
MiddlewareCtx
Type parameters
- T
MiddlewareHandler
MiddlewareHandlers
Type declaration
mapLoad: MapLoadMiddleware
render: RenderMiddleware
request: RequestMiddleware
response: ResponseMiddleware
MiddlewareOptions
Type declaration
optionalunique?: boolean
RegionOptions
Type declaration
optionaldisabled?: boolean
optionalselected?: boolean
optionalstyle?: Partial<CSSStyleDeclaration>
RegionParams
Type declaration
element: SVGElement
mapsvg: MapSVGMap
options: RegionOptions
statusOptions: RegionStatusOptionsCollection
RegionStatusOptionsCollection
RegionStylesByStatus
RegionStylesByStatusOptions
RegionToModel
Type declaration
id: string
tableName: string
title: string
RenderMiddleware
Type declaration
Parameters
data: Record<string, unknown>
ctx: MiddlewareCtx<{ controller: BaseController }>
Returns Record<string, unknown>
RequestMiddleware
Type declaration
Parameters
data: unknown
ctx: MiddlewareCtx<{ map: MapSVGMap; repository: Repository; request: MapsvgRequest }>
Returns unknown
ResponseMiddleware
Type declaration
Parameters
data: unknown
ctx: MiddlewareCtx<{ map: MapSVGMap; repository: Repository; request: MapsvgRequest; response: MapsvgResponse }>
Returns MapsvgResponse
SchemaFieldDbType
SchemaFieldType
SchemaType
Variables
constSchemaModelSchema
constdefault
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 }
Returns { firefox: boolean; ie: boolean; safari: boolean }
firefox: boolean
ie: boolean
safari: boolean
getDevice: () => { android: boolean; ios: boolean }
Returns { android: boolean; ios: boolean }
android: boolean
ios: boolean
getMouseCoords: (e: any) => { x: number; y: number }
Parameters
e: any
Returns { x: number; y: number }
x: number
y: number
getUserAgent: () => string
Returns string
isMac: () => boolean
Returns boolean
isPhone: () => 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
Parameters
url: any
Returns JS | CSS | Unknown
loadFile: (file: any) => Promise<unknown>
Parameters
file: any
Returns Promise<unknown>
loadFiles: (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 }
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
Parameters
query: any
callback: any
Returns boolean
getNestedValue: (obj: any, path: any) => any
Parameters
obj: any
path: any
Returns any
splitObjectAndField: (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
Parameters
method: any
delay: any
scope: any
params: any
Returns void
http: { handleFailedRequest: (response: any) => void }
handleFailedRequest: (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
Parameters
v1: any
v2: any
Returns -1 | 0 | 1
isNumber: (n: any) => boolean
Parameters
n: any
Returns boolean
parseBoolean: (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
Parameters
obj: any
Returns any
fixColorHash: (color: string) => string
Parameters
color: string
Returns string
functionFromString: Object
removeLeadingSlash: (str: any) => any
Parameters
str: any
Returns any
safeURL: (url: any) => any
Parameters
url: any
Returns any
toSnakeCase: (str: string) => string
Parameters
str: string
Returns string
ucfirst: (string: any) => any
Parameters
string: any
Returns any
constenv
Type declaration
getBrowser: () => { firefox: boolean; ie: boolean; safari: boolean }
Returns { firefox: boolean; ie: boolean; safari: boolean }
firefox: boolean
ie: boolean
safari: boolean
getDevice: () => { android: boolean; ios: boolean }
Returns { android: boolean; ios: boolean }
android: boolean
ios: boolean
getMouseCoords: (e: any) => { x: number; y: number }
Parameters
e: any
Returns { x: number; y: number }
x: number
y: number
getUserAgent: () => string
Returns string
isMac: () => boolean
Returns boolean
isPhone: () => boolean
Returns boolean
constfiles
Type declaration
getFileType: (url: any) => JS | CSS | Unknown
Parameters
url: any
Returns JS | CSS | Unknown
loadFile: (file: any) => Promise<unknown>
Parameters
file: any
Returns Promise<unknown>
loadFiles: (files: any) => Promise<any[]>
Parameters
files: any
Returns Promise<any[]>
constfuncs
Type declaration
deepMerge: { <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
Parameters
query: any
callback: any
Returns boolean
getNestedValue: (obj: any, path: any) => any
Parameters
obj: any
path: any
Returns any
splitObjectAndField: (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
Parameters
method: any
delay: any
scope: any
params: any
Returns void
consthttp
Type declaration
handleFailedRequest: (response: any) => void
Parameters
response: any
Returns void
constmigrations
constnumbers
Type declaration
compareVersions: (v1: any, v2: any) => -1 | 0 | 1
Parameters
v1: any
v2: any
Returns -1 | 0 | 1
isNumber: (n: any) => boolean
Parameters
n: any
Returns boolean
parseBoolean: (string: any) => boolean
Parameters
string: any
Returns boolean
conststrings
Type declaration
convertToText: (obj: any) => any
Parameters
obj: any
Returns any
fixColorHash: (color: string) => string
Parameters
color: string
Returns string
functionFromString: Object
removeLeadingSlash: (str: any) => any
Parameters
str: any
Returns any
safeURL: (url: any) => any
Parameters
url: any
Returns any
toSnakeCase: (str: string) => string
Parameters
str: string
Returns string
ucfirst: (string: any) => any
Parameters
string: any
Returns any