How do I change the anchor for a map marker in the HERE JS 3.1 API?

Question

When creating a map marker using the HERE JavaScript 3.1 API, the marker anchors itself on its location by using the bottom center of the image. This reflects the downward pointing default marker.

However, I'm using a custom marker image and I want to change the anchor point (e.g. to be in the middle center of the image). I cannot find any option to change the anchor in H.map.Marker. How do I change the anchor?

Answer 1

The anchor isn't set in H.map.Marker, but in H.map.Icon instead. Icon is the class that wraps the image used in the marker. You can set the anchor in the options you pass during construction. The anchor is given in pixel coordinates of the image and is set using an H.math.Point object. See the example below to create a map marker with a custom image and an anchor set at pixel coordinates 10,10.

let markerIcon = new H.map.Icon('./marker.png', { anchor: new H.math.Point(10, 10) });
let marker = new H.map.Marker(coordinates, { icon: markerIcon });