Class: DomIcon

H.map.DomIcon

new H.map.DomIcon (element, opt_options)

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

Name Type Description
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:

if invalid element is specified.

Type
H.lang.InvalidArgumentError
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);
  }
});

Type Definitions

H.map.DomIcon.Options Object

This object encapsulates options used to initialize a DomIcon.

Properties:
Name Type Argument Description
onAttach function <optional>

A callback to be invoked before a clone of the icon's element is appended and displayed on the map. This callback can be used to set up the clone.
onDetach function <optional>

A callback to be invoked after a clone of the icon's element is removed from the map. This callback can be used to clean up the clone.