## MapUiKit Kit for working with Jibestream Map UI Components **Kind**: global class * [MapUiKit](#MapUiKit) * [new MapUiKit(control, [options])](#new_MapUiKit_new) * [.renderCompass([options])](#MapUiKit+renderCompass) ⇒ DOMElement * [.renderFloorSelector([options])](#MapUiKit+renderFloorSelector) ⇒ DOMElement * [.renderZoomButtons([options])](#MapUiKit+renderZoomButtons) ⇒ DOMElement * [.renderSearch([options])](#MapUiKit+renderSearch) ⇒ DOMElement * [.renderPopup([options])](#MapUiKit+renderPopup) ⇒ 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](#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](#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](#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](#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](#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 |