HERE Maps API for JavaScript - API Reference: Class: UI

This function creates the default UI including the zoom control, map settings control and scalebar. The default controls are assigned the following values:

Zoom control:
- id: 'zoom'
- alignment: 'right-middle'
Map settings control:
- id: 'mapsettings'
- alignment: 'bottom-right'
Scalebar:
- id: 'scalebar'
- alignment: 'bottom-right'

Search:

Name	Type	Description
`map`	H.Map	The map instance to which to append the UI
`defaultLayers`	Object	The default layers obtained via `H.service.Platform#createDefaultLayers`.
`opt_locale`	H.ui.i18n.Localization \| string	The language to use (or a full localization object).

Returns:

Type	Description
H.ui.UI	The UI instance configured with the default controls

addBubble (bubble)

This method adds an info bubble to the UI.

Name	Type	Description
`bubble`	H.ui.InfoBubble	The info bubble to be added

addControl (name, control)

This method appends a control to the UI.

Name	Type	Description
`name`	string	The name under which to register the control
`control`	H.ui.Control	The control to add to the UI

addEventListener (type, handler, opt_capture, opt_scope) inherited

This method adds a listener for a specific event.

Note that to prevent potential memory leaks, you must either call removeEventListener or dispose on the given object when you no longer need it.

Search:

Name	Type	Description
`type`	string	The name of the event
`handler`	function	An event handler function
`opt_capture`	boolean	optional `true` indicates that the method should listen in the capture phase (bubble otherwise)
`opt_scope`	Object	optional An object defining the scope for the handler function

addOnDisposeCallback (callback, opt_scope) inherited

This method adds a callback which is triggered when the EventTarget object is being disposed.

Name	Type	Description
`callback`	function	The callback function.
`opt_scope`	Object	optional An optional scope for the callback function

capture (canvas, pixelRatio, callback, opt_errback)

This method is used to capture the element view.

Search:

Name	Type	Description
`canvas`	HTMLCanvasElement	The HTML Canvas element to draw the view of the capturable element.
`pixelRatio`	number	The pixel ratio to use for over-sampling for high-resolution displays, the default is `window.devicePixelRatio`.
`callback`	function(HTMLCanvasElement)	A callback function to call once the result of capture is ready.
`opt_errback`	function(string)	optional A callback function to call if error occurred during capture.

dispatchEvent (evt) inherited

This method dispatches an event on the EventTarget object.

Name	Type	Description
`evt`	H.util.Event \| string	An object representing the event or a string with the event name

dispose () overrides

This method disposes of the given UI object, including currently open info bubbles and controls attached to the UI.

getBubbles ()Array.<!H.ui.InfoBubble>

This method retrieves a list of info bubble objects which are currently attached to the UI.

Returns:

Type	Description
Array.<!H.ui.InfoBubble>	A list object containing the retrieved info bubbles

getControl (name)H.ui.Control | undefined

This method retrieves a UI control which was previously registered with the provided name.

Name	Type	Description
`name`	string	The name under which the control was registered

Returns:

Type	Description
H.ui.Control \| undefined	The retrieved control object or `undefined` if the control does not exist.

getElement ()Element | undefined

This method retrieves the root element of the user interface.

Returns:

Type	Description
Element \| undefined	The root element of the user interface or undefined after the UI was disposed.

getMap ()H.Map

This method retrieves the map instance to which the UI was added.

Returns:

Type	Description
H.Map	An object representing the map instance

getUnitSystem ()H.ui.UnitSystem

This method retrieves the current distance measurement system for the given UI instance.

Returns:

Type	Description
H.ui.UnitSystem	The identifier of the distance measurement system currently in use

removeBubble (bubble)

This method removes a previously added info bubble from the UI.

Name	Type	Description
`bubble`	H.ui.InfoBubble	The info bubble to be removed

removeControl (name)H.ui.Control | undefined

This method removes a previously registered control from the UI object.

Name	Type	Description
`name`	string	The name under which the control was previously registered

Returns:

Type	Description
H.ui.Control \| undefined	An object representing the removed control or undefined if not found

removeEventListener (type, handler, opt_capture, opt_scope) inherited

This method removes a previously added listener from the EventTarget instance.

Search:

Name	Type	Description
`type`	string	The name of the event
`handler`	function	A previously added event handler
`opt_capture`	boolean	optional `true` indicates that the method should listen in the capture phase (bubble otherwise)
`opt_scope`	Object	optional An object defining the scope for the handler function

setDirection (opt_direction)

Sets the "direction" CSS property on UI DOM element for the correct rendering of the languages written from right to left (like Hebrew or Arabic).

Name	Type	Description
`opt_direction`	string	optional The "direction" to use. When value is not specified, we detect it automatically from the inherited CSS property of the map container.

See:

https://developer.mozilla.org/en-US/docs/Web/CSS/direction

setUnitSystem (unitSystem)

This method sets the distance measurement system for the given UI object.

Name	Type	Description
`unitSystem`	H.ui.UnitSystem	The distance measurement system to use

toggleUnitSystem ()

This method toggles distance measurement system between H.ui.UnitSystem.METRIC and H.ui.UnitSystem.IMPERIAL.

Type Definitions

H.ui.UI.Options Object

Optional parameters to be passed to the UI constructor.

Properties:

Search:

Name	Type	Argument	Description
`unitSystem`	H.ui.UnitSystem	<optional>	An optional value indicating the distance measurement system for the UI, the default is `H.ui.UnitSystem.METRIC`
`zoom`	H.ui.ZoomControl.Options \| boolean	<optional>	A value indicating the zoom level
`zoomrectangle`	H.ui.ZoomRectangle.Options \| boolean	<optional>	An object containing `ZoomRectangle` initialization options
`mapsettings`	H.ui.MapSettingsControl.Options \| boolean	<optional>	An object containing `MapSettingControl` initialization options
`scalebar`	H.ui.ScaleBar.Options \| boolean	<optional>	An object containing `ScaleBar` initialization options
`distancemeasurement`	H.ui.DistanceMeasurement.Options \| boolean	<optional>	An object containing `DistanceMeasurement` initialization options
`locale`	H.ui.i18n.Localization \| string	<optional>	Defines the language in which UI is to be rendered. It can be a predefined `H.ui.i18n.Localization` object with a custom translation map, or one of following strings, 'en-US', 'de-DE', 'es-ES', 'fi-FI', 'fr-FR', 'it-IT', 'nl-NL', 'pl-PL', 'pt-BR', 'pt-PT', 'ru-RU', 'tr-TR', 'zh-CN'. If the property is not specified, the UI uses 'en-US' by default

Was this article helpful?

Yes No