Here Maps - route overlaps clusters

23 Views Asked by At

In Here Maps the route always overlaps clusters no matter what zIndex I set or in what order I add these entities to the map.

Clustering code:

export const markers = (
  map: H.Map,
  nodes: Node[],
) => {
  const theme = {
    getClusterPresentation: function (cluster: H.clustering.ICluster) {
      return new H.map.Marker(cluster.getPosition(), {
        icon: new H.map.Icon(clusterSVG, {
          size: { w: 100, h: 50 },
          anchor: { x: 10, y: 10 },
        }),
        min: cluster.getMinZoom(),
        max: cluster.getMaxZoom(),
        zIndex: 100,
      } as Options);
    },
    getNoisePresentation: function (noisePoint: H.clustering.INoisePoint) {
      return new H.map.Marker(noisePoint.getPosition(), {
        icon: new H.map.Icon(leafSVG, {
          size: { w: 100, h: 50 },
          anchor: { x: 10, y: 10 },
        }),,
        min: noisePoint.getMinZoom(),
        zIndex: 100,
      } as Options);
    },
  };

  const dataPoints = nodes.map((node) => new H.clustering.DataPoint(
    node.latitude,
    node.longitude,
    1,
  ));

  const clusteredDataProvider = new H.clustering.Provider(dataPoints, {
    theme,
    clusteringOptions: {
      eps: 70,
    },
    min: 9,
  });

  const layer = new H.map.layer.ObjectLayer(clusteredDataProvider);
  map.addLayer(layer);
};

Route code:

const route = (
  map: H.Map, 
  platform: H.service.Platform,
  origin: string,
  destination: string,
  via: string[],
) => {

  const routingParameters = {
    'routingMode': 'fast',
    'transportMode': 'car',
    'origin': origin,
    'destination': destination,
    'via': new H.service.Url.MultiValueQueryParameter(via),
    'return': 'polyline',
  };

  const onResult = (result) => {
    if (result.routes.length) {
      const lineStrings: H.geo.LineString[] = [];
      result.routes[0].sections.forEach((section) => {
        const lineString = H.geo.LineString.fromFlexiblePolyline(section.polyline);
        lineStrings.push(lineString);
      });

      const multiLineString = new H.geo.MultiLineString(lineStrings);

      const routeLine = new H.map.Polyline(multiLineString, {
        style: {
          strokeColor: 'blue',
          lineWidth: 3,
        },
        zIndex: 1,
        data: undefined,
      });
      
      const group = new H.map.Group({
        zIndex: 1,
        data: undefined,
      });
      group.addObjects([routeLine]);
      map.addObject(group);
    }
  };

  const router = platform.getRoutingService(undefined, 8);
  router.calculateRoute(
    routingParameters,
    onResult,
    function (error) { // onError
      alert(error);
    },
  );
}

I've tried both versions where the route's zIndex was higher than the clusters' zIndex and vice versa (as mentioned here: How to set the rendering order of here maps groups with z-index) but with the same result. The route's polyline is always rendered over the clusters:

example

Any idea where could the problem be?

0

There are 0 best solutions below