Know when the dommarkers appear - here-api

Question

How to intercept when dommarker appears on the map?
I noticed that if the marker is not visible on the screen, there is not even its html code, I have to change a couple of styles, I need to know when they reappear
I use JavaScript API 3.0

Answer 1

This is a well-hidden feature which is documented here: http://developer.here.com/javascript-apis/documentation/v3/maps/topics_api_nlp/h-map-domicon.html#h-map-domicon
The idea is to add onAttach (and/or onDetach) callbacks to the DOM icon to be notified when a marker comes into the viewport using that icon. Watch out though because the DOM icon you create is always cloned before being put into a marker (because you can use the same DOM icon on multiple markers). The link should already show how it is done, but I'm adding a snippet below.
//Initialization business
var platform = new H.service.Platform({
app_id: 'DemoAppId01082013GAL',
app_code: 'AJKnXv84fjrb0KIHawS0Tg',
useCIT: true
});
var defaultLayers = platform.createDefaultLayers();
var map = new H.Map(document.getElementById('mapp'), defaultLayers.normal.map, {
center: {
lat: 52.3,
lng: 13.8
},
zoom: 10
});
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
//The onAttach function receives the DomElement, the icon object and the
//marker. The element can now be styled...
var onAttach = function(element, icon, marker) {
console.log("marker entering", element, icon, marker);
};
//Create a DomElement to use as marker icon...
var domIconEl = document.createElement("div");
domIconEl.style.width = "32px";
domIconEl.style.height = "32px";
domIconEl.style.marginLeft = "-16px";
domIconEl.style.marginTop = "-16px";
domIconEl.style.borderRadius = "20px";
domIconEl.style.background = "#006";
//Create icon with icon element adding onAttach to the options
var domIcon = new H.map.DomIcon(domIconEl, {
onAttach: onAttach
});
//Creare marker and add to map
var domMarker = new H.map.DomMarker({
lat: 52.3,
lng: 13.8
}, {
icon: domIcon
});
map.addObject(domMarker);