Search code examples
z-indexhere-api

No effect when setting z-index of marker


My browser application tracks vehicles moving on a map. These vehicles are represented as DomMarkers.

Clustered markers are grouped in one layer that we have added to the map via H.Map.addLayer().

Other vehicles that are not clustered (ex. a specific vehicle that user selected and wants to follow around the map) are added into the map via H.Map.addObject() so that they do not get merged into the cluster layer.

We want the non-clustered markers to always be at the front of the clustered ones when rendered. Because of this, we are explicitly setting the z-indexes of every marker we create and the non-clustered markers are set with a higher value. We set it using DomMarker.setZIndex().

However, when the HTML is rendered, the z-indexes of the rendered SVG elements do not reflect the values that we have explicitly set. It's like the Here Maps library ignores the z-indexes that we set in code and just sets the z-indexes by itself.

Are we doing this correctly by having one layer with the clustered markers and then adding the non-clustered ones in H.Map.addObjects()?

Thanks


Solution

  • I did some experimentation instead so I will share my workaround for this.

    Basically, I was not able to make setting the z-index work when using DomMarkers. It just doesn't do anything.

    However, the Nokia Developer pages does show how to modify the z-indexes but they were using Marker objects instead of DomMarker objects:

    https://developer.here.com/api-explorer/maps-js/v3.0/markers/ordering-overlapping-markers

    I tried it and it worked so we just replaced the DomMarker objects in our code with Marker objects instead.