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 |