H.map.DomIcon
Class Summary
This class provides a visual representation of a H.map.DomMarker.
[ For full details, see the Class Details ]
Class Description
This class provides a visual representation of a H.map.DomMarker.
An instance of DomIcon
needs to be created with a DOM element. The DOM element works as a template for the visual representation of the marker, which allows a single DomIcon
to be reused in multiple DomMarkers
. The provided DOM node is cloned and rendered every time the marker reaches (is visible within) the map view port, therefore any previously attached event listeners do not execute. If listeners for the DOM node are needed, please add them in the onAttach callback where the currently displayed clone reference is available. The cloned node listeners can be removed in the onDetach
callback.
The onAttach
and onDetach
callbacks can be provided to the icon by using H.map.DomIcon.Options
Example
var domElement = document.createElement('div');
domElement.style.width = '20px';
domElement.style.height = '20px';
domElement.style.backgroundColor = 'blue';
function changeOpacity(evt) {
evt.target.style.opacity = 0.8;
};
var domIcon = new H.map.DomIcon(domElement, {
onAttach: function(clonedElement, domIcon, domMarker) {
clonedElement.addEventListener('mouseover', changeOpacity);
},
onDetach: function(clonedElement, domIcon, domMarker) {
clonedElement.removeEventListener('mouseover', changeOpacity);
}
});
Constructor Details
H.map.DomIcon(element, opt_options)
- Parameters:
-
element
: -
{!(Element | string)}
- The element or markup to use for this icon
-
opt_options
: -
{H.map.DomIcon.Options=} [optional]
- An object containing configuration properties
- Throws:
-
{H.lang.InvalidArgumentError}
- if invalid
element
is specified.