H.ui.DistanceMeasurement
Class Summary
Extends: H.ui.Control
This class represents a distance measurement control. The control helps in calculate distances between geographical locations, which the user selects by clicking on the map.
[ For full details, see the Class Details ]
Property Summary
Properties |
---|
This property holds the container element for the given control object once it is rendered into a UI. |
Method Summary
Methods |
---|
This abstract method can be overridden by deriving classes to be invoked when the UI object distance measurement system changes. |
This abstract method can be overridden by deriving classes to be invoked when the underlying map engine changes. |
This method retrieves the map object to which the given control is attached. |
This method retrieves the localization object which corresponds to the current locale of the UI. |
This method retrieves a value indicating layout alignment for the given control. |
This method sets the layout alignment for the given control. |
This method adds a child element to be rendered within the given container element. |
This method retrieves the child element collection of the given container. |
This method removes a child element from the given container's child element collection. |
This method sets a listener for a specific event triggered by the given element. |
This method removes a previously added listener from the event target. |
This method is the concrete implementation of the UI element. It receives the pre-rendered HTML element which may be modified by deriving classes. |
This method retrieves a value indicating if the given UI element is disabled. |
This method sets a value indicating if the given UI element is disabled. |
This method retrieves previously stored arbitrary data from the given element. |
This method stores arbitrary data with the given UI element. |
This method retrieves the HTML element the given UI element renders. |
This method sets a value indicating if the given element is visible. |
This method retrieves a value indicating if the given element is visibile. |
This method adds a CSS class to the given UI element (if it is not already present). |
This method removes a CSS class from the given UI element (if it is present). |
Events Summary
Events |
---|
This event is fired when control is realigned. |
Class Description
This class represents a distance measurement control. The control helps in calculate distances between geographical locations, which the user selects by clicking on the map.
This control adds direct user-interaction to the map. The user can click on the map to specify the locations and build a path whose length is measured. The locations are indicated by markers and the path by lines connecting the markers.
The user can remove a marker added to the map in this by by holding down the ALT/CMD key and clicking on the marker. The user can also split the line connecting two markers by clicking on the line between the markers. Pass H.ui.DistanceMeasurement.Options to the constructor to customize the icons of the markers and the connecting lines.
When specifying custom icons for the markers, note that you may need to specify the H.map.Icon.Options#anchor option in order to position the icon exactly on the location on which the user clicked.
Example
var distanceMeasurementTool = new H.ui.DistanceMeasurement({
'startIcon': new H.map.Icon('[START ICON URL]'),
'stopoverIcon': new H.map.Icon('[STOPOVER ICON URL]'),
'endIcon': new H.map.Icon('[END ICON URL]'),
'splitIcon': new H.map.Icon('[SPLIT ICON URL]'),
'lineStyle': {
'strokeColor': 'rgba(18, 65, 145, .8)',
'lineWidth': 6
}
});
ui.addControl('distancemeasurement', distanceMeasurementTool);
Constructor Details
H.ui.DistanceMeasurement(opt_options)
- Parameters:
-
opt_options
: -
{H.ui.DistanceMeasurement.Options=} [optional]
- Optional parameters to be passed to this control
Property Details
el: {}
This property holds the container element for the given control object once it is rendered into a UI.
Method Details
onUnitSystemChange (unitSystem)
This abstract method can be overridden by deriving classes to be invoked when the UI object distance measurement system changes.
- Parameters:
-
unitSystem
: -
{H.ui.UnitSystem}
- An identifier indicating the distance measurement system the UI currently uses
onMapEngineTypeChange (engineType)
This abstract method can be overridden by deriving classes to be invoked when the underlying map engine changes.
- Parameters:
-
engineType
: -
{H.Map.EngineType}
- An identifier of the engine type the map currently uses
This method retrieves the map object to which the given control is attached.
Note: This method returns null
if called before any controls have been added to a UI object.
- Returns:
-
{?H.Map}
- An object representing the map to which the given control is attached
getLocalization () : {H.ui.i18n.Localization}
This method retrieves the localization object which corresponds to the current locale of the UI.
- Returns:
-
{H.ui.i18n.Localization}
- An object representing the location settings
getAlignment () : {H.ui.LayoutAlignment}
This method retrieves a value indicating layout alignment for the given control.
- Returns:
-
{H.ui.LayoutAlignment}
- A value indicating layout alignment for the given control
setAlignment (alignment) : {H.ui.Control}
This method sets the layout alignment for the given control.
The alignment within the map view port can be:
+--------------------------------------------------------------------------------+
| "top-left" > > < < "top-center" > > < < "top-right" |
| "lef-ttop" "right-top" |
| v v |
| v v |
| |
| |
| ^ ^ |
| ^ ^ |
| "left-middle" "right-middle" |
| v v |
| v v |
| |
| |
| ^ ^ |
| ^ ^ |
| "left-bottom" "right-bottom" |
| "bottom-left" > > < < "bottom-center" > > < < "bottom-right" |
+--------------------------------------------------------------------------------+
Elements with the same layout alignments are lined up in the directions of the arrows in the illustration.
- Parameters:
-
alignment
: -
{H.ui.LayoutAlignment}
- A value indicating the new alignment of the control
- Returns:
-
{H.ui.Control}
- An object representing the given control instance
addChild (child) : {H.ui.base.Container}
This method adds a child element to be rendered within the given container element.
- Parameters:
-
child
: -
{H.ui.base.Element}
- The child element to be added
- Returns:
-
{H.ui.base.Container}
- This container instance
getChildren () : {Array<H.ui.base.Element>}
This method retrieves the child element collection of the given container.
- Returns:
-
{Array<H.ui.base.Element>}
- The child elements of the given container
removeChild (child)
This method removes a child element from the given container's child element collection.
- Parameters:
-
child
: -
{H.ui.base.Element}
- The child element to be removed
addEventListener (type, handler, opt_capture, opt_scope)
This method sets a listener for a specific event triggered by the given element.
- Parameters:
-
type
: -
{string}
- The name of the event type
-
handler
: -
{!Function}
- An event handler function to be invoked when the event is fired
-
opt_capture
: -
{boolean=} [optional]
- If
true
, listening is active in the capture phase (bubble otherwise) -
opt_scope
: -
{Object=} [optional]
- The scope for the handler function
removeEventListener (type, handler, opt_capture, opt_scope)
This method removes a previously added listener from the event target.
- Parameters:
-
type
: -
{string}
- The name of the event type
-
handler
: -
{!Function}
- The previously added event handler
-
opt_capture
: -
{boolean=} [optional]
- If
true
, listening is active in the capture phase (bubble otherwise) -
opt_scope
: -
{Object=} [optional]
- The scope for the handler function
renderInternal (element, doc)
This method is the concrete implementation of the UI element. It receives the pre-rendered HTML element which may be modified by deriving classes.
- Parameters:
-
element
: -
{Element}
- The HTML representation of the given UI element
-
doc
: -
{Document}
- The HTML document into which the give UI element is rendered
isDisabled () : {boolean}
This method retrieves a value indicating if the given UI element is disabled.
- Returns:
-
{boolean}
-
true
if the element is disabled,false
otherwise
setDisabled (disabled, opt_force) : {H.ui.base.Element}
This method sets a value indicating if the given UI element is disabled.
- Parameters:
-
disabled
: -
{boolean}
-
true
to disable the element,false
to enable it -
opt_force
: -
{boolean=} [optional]
- An optional Boolean flag indicating that the value should be set and propagated even if it is the same as the current state
- Returns:
-
{H.ui.base.Element}
- An object representing the given element instance
getData () : {*}
This method retrieves previously stored arbitrary data from the given element.
- Returns:
-
{*}
- The previously stored data object or
null
if no data was stored.
setData (data)
This method stores arbitrary data with the given UI element.
- Parameters:
-
data
: -
{*}
- The data to be stored
getElement () : {?HTMLElement}
This method retrieves the HTML element the given UI element renders.
Note: If the UI element has not been rendered, the method retrieves null
.
- Returns:
-
{?HTMLElement}
- An object representing the given element instance or
null
setVisibility (visibility)
This method sets a value indicating if the given element is visible.
- Parameters:
-
visibility
: -
{boolean}
-
true
if the given element is visible, otherwisefalse
getVisibility () : {boolean}
This method retrieves a value indicating if the given element is visibile.
- Returns:
-
{boolean}
-
true
if the given element is visible, otherwisefalse
addClass (className) : {H.ui.base.Element}
This method adds a CSS class to the given UI element (if it is not already present).
- Parameters:
-
className
: -
{string}
- The name of the CSS class to add
- Returns:
-
{H.ui.base.Element}
- The given UI element instance
removeClass (className) : {H.ui.base.Element}
This method removes a CSS class from the given UI element (if it is present).
- Parameters:
-
className
: -
{string}
- The CSS class name to add
- Returns:
-
{H.ui.base.Element}
- The given UI element instance
Event Details
alignmentchange: {H.util.Event}
This event is fired when control is realigned.