1.1.1 • Published 1 year ago
@jibestream-dev/jmap-mapui-kit v1.1.1
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 |