MapUiKit
Kit for working with Jibestream Map UI Components
Kind: global class
-
MapUiKit
- new MapUiKit(control, [options])
-
.renderCompass([options]) ⇒
DOMElement -
.renderFloorSelector([options]) ⇒
DOMElement -
.renderZoomButtons([options]) ⇒
DOMElement -
.renderSearch([options]) ⇒
DOMElement -
.renderPopup([options]) ⇒
DOMElement
new MapUiKit(control, [options])
Create a Map UI Kit
| Param | Type | Default | Description |
|---|---|---|---|
| control | jmap.JController |
The currently initialised control | |
| [options] | Object |
Options for how the Map UI Kit should be rendered | |
| [options.padding] | [ 'Array' ].<Number> |
[0, 0, 0, 0] |
Padding for the UI Kit given as pixels from the edge of the container [top, right, bottom, left] |
| [options.className] | String |
"map-ui-container" |
The class name for the DOM element that contains all of the UI Kit components |
mapUiKit.renderCompass([options]) ⇒ DOMElement
Render or update the compass components
Kind: instance method of MapUiKit
Access: public
| Param | Type | Default | Description |
|---|---|---|---|
| [options] | Object |
How to render the compass | |
| [options.svgIcon] | String |
What SVG to use for the SVG (given as a data URI) | |
| [options.rotatedSvgIcon] | String |
What SVG to use for when the compass is rotated (given as a data URI) | |
| [options.resetRotationOnTap] | Boolean |
true |
Whether the map should reset rotation on tap of the compass |
| [options.position] | [ 'Array' ].<Number> |
[1, 0] |
Where the compass should be placed, given as [x, y] with x and y being 0 <= x/y <= 1 |
| [options.padding] | Object |
[0, 0, 0, 0] |
How much padding the compass should have |
| [options.width] | Object |
||
| [options.height] | Object |
mapUiKit.renderFloorSelector([options]) ⇒ DOMElement
Render of update the floor selector
Kind: instance method of MapUiKit
Access: public
| Param | Type | Description |
|---|---|---|
| [options] | Object |
|
| [options.inactiveStyle] | jmap.core.Style |
How the inactive state should be styled |
| [options.inactiveFont] | jmap.core.Font |
How the inactive state's font should appear |
| [options.activeStyle] | jmap.core.Style |
How the active state should be styled |
| [options.activeFont] | jmap.core.Font |
How the active state's font should appear |
| [options.position] | [ 'Array' ].<Number> |
Where the floor selector should be placed, given as [x, y] with x and y being 0 <= x/y <= 1 |
| [options.padding] | [ 'Array' ].<Number> |
How much padding the floor selector should have |
| [options.vertical] | Boolean |
Whether the floor selector should appear vertically or horizontally |
mapUiKit.renderZoomButtons([options]) ⇒ DOMElement
Render or update the zoom buttons
Kind: instance method of MapUiKit
Access: public
| Param | Type | Description |
|---|---|---|
| [options] | Object |
|
| [options.inactiveStyle] | jmap.core.Style |
How the inactive state should be styled |
| [options.inactiveFont] | jmap.core.Font |
How the inactive state's font should appear |
| [options.activeStyle] | jmap.core.Style |
How the active state should be styled |
| [options.activeFont] | jmap.core.Font |
How the active state's font should appear |
| [options.position] | [ 'Array' ].<Number> |
Where the zoom buttons should be placed, given as [x, y] with x and y being 0 <= x/y <= 1 |
| [options.zoomInText] | String |
What text the zoom in button should have |
| [options.zoomOutText] | String |
What text the zoom out button should have |
| [options.padding] | [ 'Array' ].<Number> |
How much padding the zoom buttons should have |
mapUiKit.renderSearch([options]) ⇒ DOMElement
Render or update the search bar
Kind: instance method of MapUiKit
Access: public
| Param | Type | Description |
|---|---|---|
| [options] | Object |
|
| [options.inactiveStyle] | jmap.core.Style |
How the inactive state should be styled |
| [options.inactiveFont] | jmap.core.Font |
How the inactive state's font should appear |
| [options.activeStyle] | jmap.core.Style |
How the active state should be styled |
| [options.activeFont] | jmap.core.Font |
How the active state's font should appear |
| [options.position] | [ 'Array' ].<Number> |
Where the search bar should be placed, given as [x, y] with x and y being 0 <= x/y <= 1 |
| [options.placeholder] | String |
What text should appear in the search bar as placeholder |
| [options.searchArray] | [ 'Array' ].<Object> |
What objects to search through/display |
| [options.maxResults] | Number |
How many results should be displayed |
| [options.onSelect] | function |
A function that's run on click of a result (with the result as the first parameter passed to the function) |
| [options.padding] | [ 'Array' ].<Number> |
How much padding the search should have |
mapUiKit.renderPopup([options]) ⇒ DOMElement
Render a popup
Kind: instance method of MapUiKit
Access: public
| Param | Type | Description |
|---|---|---|
| [options] | Object |
|
| options.coordinates | [ 'Array' ].<Number> |
Where on the map should the popup be placed |
| [options.map] | Object |
On what map should the popup be placed |
| [options.titleText] | String |
The popup's title text |
| [options.titleTextStyle] | jmap.core.Font |
How the title text should be style |
| [options.subText] | String |
The popup's subtitle text |
| [options.subTextStyle] | jmap.core.Font |
How the subtitle text should be styled |
| [options.showActionButton] | Boolean |
Whether the action button should be shown |
| [options.actionButtonText] | String |
The action button's text |
| [options.actionButtonTextStyle] | jmap.core.Font |
How the action button's text should be styled |
| [options.actionButtonInactiveStyle] | jmap.core.Style |
The inactive style for the action button |
| [options.actionButtonStyle] | jmap.core.Style |
The active style for the action button |
| [options.actionButtonCallback] | function |
A function that's called when the action button is clicked |
| [options.popupStyle] | jmap.core.Style |
How the popup should be styled |