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:
Any idea where could the problem be?
