How can i set the H.map.Marker object to show cursor as pointer? This can be done with H.map.DomMarker but not H.map.Marker

var svgMarkup = '<svg style="cursor:pointer" xmlns="" width="28px" height="36px">' +
  '<path d="M 19 31 C 19 32.7 16.3 34 13 34 C 9.7 34 7 32.7 7 31 C 7 29.3 9.7 28 13 28 C 16.3 28 19 29.3 19 31 Z" ' +
  'fill="#000" fill-opacity=".2"/><path d="M 13 0 C 9.5 0 6.3 1.3 3.8 3.8 C 1.4 7.8 0 9.4 0 12.8 C 0 16.3 1.4 19.5 ' +
  '3.8 21.9 L 13 31 L 22.2 21.9 C 24.6 19.5 25.9 16.3 25.9 12.8 C 25.9 9.4 24.6 6.1 22.1 3.8 C 19.7 1.3 16.5 0 13 0 Z"' +
  ' fill="#fff"/><path d="M 13 2.2 C 6 2.2 2.3 7.2 2.1 12.8 C 2.1 16.1 3.1 18.4 5.2 20.5 L 13 28.2 L 20.8 20.5 C 22.9 ' +
  '18.4 23.8 16.2 23.8 12.8 C 23.6 7.07 20 2.2 13 2.2 Z" fill="${COLOR}"/><text x="13" y="19" font-size="8pt" ' +
  'font-weight="bold" text-anchor="middle" fill="#fff">${TEXT}</text></svg>';

var icon = new H.map.Icon(svgMarkup.replace('${COLOR}', colour != null ? colour : 'red').replace('${TEXT}', text != null ? text : 'P')),
  marker = new H.map.Marker(coords, { icon: icon });

If you hover to the marker, the cursor will still be the default. But if I use H.map.DomIcon with H.map.DomMarker, the cursor will bee pointer

How can i set the H.map.Marker object to show cursor as pointer? This can be done with H.map.DomMarker but not H.map.Marker

var svgMarkup = '<svg style="cursor:pointer" xmlns="http://www.w3/2000/svg" width="28px" height="36px">' +
  '<path d="M 19 31 C 19 32.7 16.3 34 13 34 C 9.7 34 7 32.7 7 31 C 7 29.3 9.7 28 13 28 C 16.3 28 19 29.3 19 31 Z" ' +
  'fill="#000" fill-opacity=".2"/><path d="M 13 0 C 9.5 0 6.3 1.3 3.8 3.8 C 1.4 7.8 0 9.4 0 12.8 C 0 16.3 1.4 19.5 ' +
  '3.8 21.9 L 13 31 L 22.2 21.9 C 24.6 19.5 25.9 16.3 25.9 12.8 C 25.9 9.4 24.6 6.1 22.1 3.8 C 19.7 1.3 16.5 0 13 0 Z"' +
  ' fill="#fff"/><path d="M 13 2.2 C 6 2.2 2.3 7.2 2.1 12.8 C 2.1 16.1 3.1 18.4 5.2 20.5 L 13 28.2 L 20.8 20.5 C 22.9 ' +
  '18.4 23.8 16.2 23.8 12.8 C 23.6 7.07 20 2.2 13 2.2 Z" fill="${COLOR}"/><text x="13" y="19" font-size="8pt" ' +
  'font-weight="bold" text-anchor="middle" fill="#fff">${TEXT}</text></svg>';

var icon = new H.map.Icon(svgMarkup.replace('${COLOR}', colour != null ? colour : 'red').replace('${TEXT}', text != null ? text : 'P')),
  marker = new H.map.Marker(coords, { icon: icon });

If you hover to the marker, the cursor will still be the default. But if I use H.map.DomIcon with H.map.DomMarker, the cursor will bee pointer

• javascript
• here-api

• add some code so other can understand easily – Night Programmer Commented Mar 21, 2018 at 6:51

1 Answer 1

Why does it happen ?

In the case of an H.map.DomMarker, the marker is part of the DOM tree and can be styled like any other SVG element in the DOM.

However, in the case of an H.map.Marker, the SVG markup you defined is drawn in the canvas. This is why the style="cursor: pointer" rule has no effect.

Can we style a marker in the canvas ?

Yes we can.

You could add an event listener to each marker, to change the canvas cursor on 'pointerenter / pointerleave', however, to avoid adding too many listeners, we can add just one on the map object, and check the instance of the target element:

map.addEventListener('pointermove', function (event) {
  if (event.target instanceof H.map.Marker) {
    map.getViewPort().element.style.cursor = 'pointer';
  } else {
    map.getViewPort().element.style.cursor = 'auto';
  }
}, false);