Search code examples
csshere-api

dynamic change style of an element (DomIcon)

I am stuck and need some advise. I just want to modify my DomIcon which is assigned to a DomMarker in a here map. It's been developed in Angular / Ionic and I simply want to rotate an PNG around the anchor. I simply created new elements within my component. However, independently how I set the transform it is immediately overwritten with an updated tranform matrix. 

    var theFather = document.createElement('div');
    var domElement = document.createElement('img')
    domElement.setAttribute('class', 'theThing')
    domElement.src ='./assets/icons/aThing.png'

    domElement.style.width = '40px';
    domElement.style.height = '40px';

    theFather.appendChild(domElement);

I tried various alternatives discussed in the forum to rotate the thing but I always fail. Apparently, I completey miss something in my trials.

So, 1) Tried to simply transform:rotate by setting cssText or the style.transform of a cloned png img (DomIcon) within the attach callback. It rotates correctly and on the same pt but it only rotates if the clonedElement is rotated within the onAttach callback. Bad thing, I cannot update the clonedElement by an external event that is not a DOM or here API Event. Right? 

  var domIcon = new H.map.DomIcon(domElement, {
    onAttach: function(clonedElement, domIcon, domMarker) {
      clonedElement.addEventListener('mouseover', rotateThisThing);
}

2) Tried to simply rotate the original PNG but this is not transformed at all. I can see that the cssText is updated and correct but it is not rendered on the map.

domIcon.c.style.cssText += 'transform: rotate(90deg)';

3) Tried to set the elements style properties by calculating the rotation in a transform:matrix which correctly rotates the icon and set in the document itself but unfortunately this is very volatile.

document.getElementsByTagName("img")[i].style.cssText += 'transform: ' + newval;

4) Tried to set the elements style properties as to 3) but using renderer2 

this.render2.setStyle(document.getElementsByClassName("theThing")[i],"transform",newval)

5) Tried to export a new CSS variable and rotate in CSS directly. 

 this.mapElement.nativeElement.style.setProperty('--the-rotator', value);

What am I missing here? Your advice is very mich appreciated?

Many thanks in advance, O.

Solution

  • The API manipulates Marker's position by changing the transform style property of the cloned Dom element. In your case clonedElement inside onAttach callback is a clone of theFather. Your onAttach callback should therefore look e.g. like this:

    var domIcon = new H.map.DomIcon(domElement, {
    onAttach: function(clonedElement, domIcon, domMarker) {
      clonedElement.getElementsByTagName("img")[i].style.transform = 'rotate(90deg)'
}

    You can check below sample code which rotates arrow DomMarker every 1 second. See how reference to the cloned element is assigned to clonedElement variable which is then used in setInterval function.

    var domIconElement = document.createElement('div'),
    domIconContent = document.createElement('div'),
    marker,
    clonedContent,
    counter = 0;

domIconContent.classList.add('dom-icon-content')
domIconContent.innerHTML = `<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="40" height="40">
    <path d="m0.812665,23.806608l37.937001,-22.931615l-21.749812,38.749665l1.374988,-17.749847l-17.562177,1.931797z" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" stroke="#000" fill="#fff"/>
  </svg>`;
domIconElement.appendChild(domIconContent);

marker = map.addObject(new H.map.DomMarker(map.getCenter(), {
  icon: new H.map.DomIcon(domIconElement, {
    onAttach: function(clonedElement, domIcon, domMarker) {
      clonedContent = clonedElement.getElementsByClassName('dom-icon-content')[0];
    }
  })
}));

setInterval(function() {
    if (clonedContent) {
        clonedContent.style.transform = 'rotate(' + (counter += 45) + 'deg)';
    }
}, 1000)