@jibestream-dev/jmap-mapui-kit

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