How to apply CSS to Here Maps API Markers

Question

Is there a way to apply CSS to custom markers on a Here JS Map? We are using version 3.0 of the JS API and I just want to know if there are any selectors I can use or anything along those lines to apply CSS to the markers. I haven't found anything so far.

We are using an SVG marker based on: https://developer.here.com/documentation/examples/maps-js/markers/map-with-svg-graphic-markers

Thanks

Answer 1

The example you shared uses H.map.Marker which is according to documentation, a visual representation of a location on a map in the form of a static bitmap icon.

For styleable marker you should use H.map.DomMarker:

// assuming DOMElement already exists
var domMarker = new H.map.DomMarker(map.getCenter(), {
  icon: new H.map.DomIcon(DOMElement)
})

Here is a simple jsfiddle page with DomMarker which changes opacity on hover using CSS rules.

See DomMarker documentation for more details.