Stick Dom Marker In Here Maps On Zooming

I'm trying to add a truck Marker in the HERE Map. This marker is basically a truck icon. Here is my code. addDomMarker(posObj): void { const map = this.mapComponent.getMap(

Solution 1:

You're almost there! You only need to center your truck icon. By default, the icon top-left corner is positioned at geocoordinates. If you shift the icon so that its center is at the geocoordinates, the "moving effect" you are mentioning will disappear.

Since it is a DomIcon, therefore in the DOM tree, we'll center it using CSS by offsetting half of the icon width to the left, and half of the height towards the top. We do this on the outermost DOM element of the icon.

So assuming your truck icon is 16px width, 40px height, this would do the trick:

exportconst truckIcon = 
`<div class="truck-container" style="left: -10px; top: -20px;">
   <svg class="truck-marker" id="truck"
      ... // svg code 
   </svg>
</div>`

Solution 2:

Try to specify the icon width, height, and anchor according to your SVG.

const svg = `<svgxmlns="http://www.w3.org/2000/svg"style="width: 28px; height: 28px; margin: -14px 0 0 -14px;"viewBox="0 0 100 100"><circlecx="50"cy="50"r="50"fill="red"opacity=".5"/><circlecx="50"cy="50"r="4"fill="black"/></svg>`;

map.addObject(new H.map.DomMarker({lat: 52.51632137414747, lng: 13.378170368203042}, {
  icon: new H.map.DomIcon(svg)
}));

Full example: http://jsfiddle.net/54dkpajg/1/

Setting anchor point in H.map.DomIcon is not possible and needs to be done in the specified DOM element itself.