@jibestream-dev/jmap-mapui-kit

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