@jibestream-dev/jmap-mapui-kit

Kit for the Jibestream SDK to create a Map UI

Usage no npm install needed!

<script type="module">
  import jibestreamDevJmapMapuiKit from 'https://cdn.skypack.dev/@jibestream-dev/jmap-mapui-kit';
</script>

README

MapUiKit

Kit for working with Jibestream Map UI Components

Kind: global class

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