0

I am trying to set z-index for markers and draggable multipoint polygon, but polygon is always created under markers. When on map is lot of markers it is impossible to grab corner of polygon. ZIndex is working only form markers or for polygons but i can't set common ZIndex placing markers under polygon.

enter image description here

Nimantha
  • 6,405
  • 6
  • 28
  • 69
maciek codelabs
  • 1

1 Answers1

0

The rendering order in the HERE Maps API for JavaScript evaluates map objects and then renders spatial objects, markers and DOM markers in separate passes. This means that spatials, markers and DOM markers cannot be intermixed. Spatial objects are rendered in the main scene geo space and are painted like any other map layers. After rendering all map layers, the Maps API renders all Markers (normal markers) and finally all DomMarkers. This is why the markers are on top of the Spatial objects.

However, Spatial objects (polylines, polygons) and H.map.Marker objects - all map objects that are are based on canvas opportunity are possible to show on top or bottom order on the map.   You can create a LocalObjectProvider and add hierarchical objects. For example create one layer for Spatial objects (e.g. a circle, polygon etc.), H.map.Marker and another layer with the same type of objects and add it to the map using statement "map.getLayers().add(layer);". The last added layer will be always on top - it doesn't matter if it is a circle, polyline or polygon etc.  or H.map.Marker type.

Link Explaining LocalObjectProvider https://developer.here.com/documentation/maps/3.1.22.1/api_reference/H.map.provider.LocalObjectProvider.html

Here is an example:

function addPolylineToMap(map) {
  var lineString = new H.geo.LineString();
  lineString.pushPoint({lat:53.3477, lng:-6.2597});
  lineString.pushPoint({lat:51.5008, lng:-0.1224});
  lineString.pushPoint({lat:48.8567, lng:2.3508});
  lineString.pushPoint({lat:52.5166, lng:13.3833});
  
  //create a provider and a layer that are placed above the marker object layer
      objectProvider = new H.map.provider.LocalObjectProvider();
      objectLayer = new H.map.layer.ObjectLayer(objectProvider);
      // add a polygon to this provider and the polygon will appear above the marker
      objectProvider.getRootGroup().addObject(new H.map.Polygon(
    lineString, { style: { lineWidth: 4, strokeColor: 'red' }, zIndex: 999}
  ));
      // add the layer to the map
      map.getLayers().add(objectLayer);

Please check working example in the below link: https://jsfiddle.net/raj0665/s1dpq9fv/19/

Additionally, you can check clustering example when you have large set of data to display on map. A clustering algorithm groups data points by collapsing two or more points positioned close to one another on the screen into a single cluster point. https://developer.here.com/documentation/examples/maps-js/clustering/marker-clustering

  • Thank you for the fast reply to my question. The solution works fine, but polygon is added and removed from the map dynamically on button click action. Now when the polygon is shown the whole map is reloading / rendering again, the same situation is when the polygon hides. Such behaviour causes performance problems because there are a lot of markers. Is there any solution to avoid this behavior of the map? – maciek codelabs Jun 02 '21 at 08:55
  • Please try using map.getLayers().add() just once; and when some additional polygon is added then make use of this method objectProvider.getRootGroup().addObject(new H.map.Polygon only –  Jun 22 '21 at 10:23