GuidesKB Articles
Guides
  1. Getting Started

Managing the Display Order of Spatial Objects, Markers on the Map (Similar to zIndex)

HERE Maps API for JavaScript 3.x: Marker zIndex does not place markers above polygons, circles, or polylines

Problem

In HERE Maps API for JavaScript, setting the zIndex property on a Marker or another map object may not be enough to control the rendering order when different object types are displayed together. For example, a Marker may still appear below a polygon or circle, or a polyline may not render above a Marker, even when a higher zIndex value is used.

Symptoms / Triggers

You may need this article if you experience any of the following:

A Marker is hidden behind a polygon, circle, or other spatial object.
 A Marker does not appear on top of a polygon even after setting a higher zIndex.
A polyline is rendered below a Marker, although it should visually appear above it.
 The rendering order of Markers, polylines, polygons, circles, or clustered objects is inconsistent or not controlled as expected.
You need to control which group of map objects is displayed above or below another group of map objects.

Quick Answer

Do not rely only on the zIndex property when you need to control the rendering order between different map object types. Instead, group objects into separate H.map.layer.ObjectLayer instances and then control the visual order by adding those layers to the map layer collection in the required sequence.

A layer added later, or added at a higher index in map.getLayers(), can be placed above other layers depending on the layer ordering used in the map.

Step-by-step Solution

1. Create a LocalObjectProvider and an ObjectLayer

<br />let objectProvider = new H.map.provider.LocalObjectProvider();let objectLayer = new H.map.layer.ObjectLayer(objectProvider);<br />

Use a separate ObjectLayer for the objects whose rendering order must be controlled independently. For example, you can keep polygons in one layer and markers or polylines in another layer.

If some objects are already managed by a layer, for example markers in a clustering layer, you may not need to create a new ObjectLayer for those objects. Instead, adjust the ordering of the existing layer and the additional object layers.

2. Add map objects to the ObjectLayer

<br />// Example: adding a polyline to the ObjectLayerobjectProvider.getRootGroup().addObject(new H.map.Polyline( lineString, { style: { lineWidth: 4, strokeColor: 'red' } }));<br />

Add all objects that should share the same rendering priority to the same provider or layer. For example, if polylines must always appear above polygons, place the polylines in a separate ObjectLayer that is ordered above the polygon layer.

3. Retrieve the current map layer collection

<br />map.getLayers()<br />

The map.getLayers() method returns the map's current layer collection. You can use this collection to add a new layer or insert it at a specific index.

4. Add the ObjectLayer above other layers

<br />map.getLayers().add(objectLayer); // Adds the layer to the layer collection// Or add the layer at a specific index:map.getLayers().add(objectLayer, 1);<br />

Add the ObjectLayer to the map layer collection in the order needed for your use case. If the object layer should appear above existing map objects, add it after the lower-priority layers or insert it at the appropriate index.

Example Use Cases

 Display Markers above polygons or circles when zIndex alone does not work.
Render a route polyline above custom Markers.
 Keep clustered Markers in one layer and custom spatial objects in another layer.
Control visual priority between multiple object groups such as polygons, circles, polylines, and Markers.

Applies To

 HERE Maps API for JavaScript 3.x
HERE Maps API for JavaScript 3.2 API Reference
 H.map.layer.ObjectLayer
H.map.provider.LocalObjectProvider
 H.map.Marker, H.map.Polyline, H.map.Polygon, H.map.Circle

Documentation

https://docs.here.com/maps-api-for-js/page/maps-api-for-javascript-api-reference-3-2-h-map#getLayers

https://docs.here.com/maps-api-for-js/page/maps-api-for-javascript-api-reference-3-2-h-map-datamodel#add

Examples

https://jsfiddle.net/cuv04zm3/1

https://jsfiddle.net/09et1hLd

Searchable Tags / Keywords

marker behind polygon, marker below polygon, marker not on top, zIndex not working, zIndex ignored, polyline behind marker, polyline below marker, polygon covers marker, circle covers marker, rendering order, layer order, ObjectLayer, LocalObjectProvider, map.getLayers, H.map.layer.ObjectLayer, H.map.provider.LocalObjectProvider, HERE Maps API for JavaScript 3.x, Maps JS 3.2, marker layering, map object order, control object visibility