Maps API for JavaScript Developer's Guide

H.map.DomIcon

Class Summary

A visual representation of the H.map.DomMarker.

[ For full details, see the Class Details ]

Class Description

A visual representation of the H.map.DomMarker.

DomIcon needs to be created with a dom element. Dom element works as a template for visual representation of the marker therefore single DomIcon can be reused across multiple DomMarkers. Provided dom node gets cloned and rendered every time when marker reaches (is visible within) the map view port therefore all previously attached event listeners will not execute. To handle cases where listeners for the dom node are in needed, user needs to add them within onAttach callback were currently displayed clone reference is available. Within onDetach callback, cloned node listener can be removed.

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]
 

You cannot use this account to purchase a commercial plan on Developer Portal, as it is already associated to plans with different payment methods.

To purchase a commercial plan on Developer Portal, please register for or sign in with a different HERE Account.

Something took longer than expected.

The project should be available soon under your projects page.

Sorry, our services are not available in this region.

Something seems to have gone wrong. Please try again later.

We've detected that your account is set to Australian Dollars (AUD).
Unfortunately, we do not offer checkouts in AUD anymore.
You can continue using your current plan as normal, but to subscribe to one of our new plans,
please register for a new HERE account or contact us for billing questions on selfservesupport@here.com.