I'm using clustering on a Here Maps instance and it works, the clusters are shown, but I can't find a way to zoom when I click on one of them to show the markers contained. Is it possible or the only way is to manually zoom with the mouse wheel or the zoom buttons?
This is how I create the clusters and show them on the map
let map = new H.Map(document.getElementById('map'),
defaultLayers.normal.map,{
center: {lat:{{ $map_center['lat'] }}, lng:{{ $map_center['lng'] }}},
zoom: 4
});
let sCluster = [];
// the coordinates come from an AJAX call
$.each(data,function(i, v) {
let coord = {lat:parseFloat(v["lat"]),lng:parseFloat(v["lng"])};
sCluster.push(new H.clustering.DataPoint(parseFloat(v["lat"]),parseFloat(v["lng"])));
});
let clusteredSugProvider = new H.clustering.Provider(sCluster,{
clusteringOptions: {
strategy: H.clustering.Provider.Strategy.GRID,
eps: 64,
minWeight: 2
}
});
let layer = new H.map.layer.ObjectLayer(clusteredSugProvider);
map.addLayer(layer);
I've found out how to zoom when you click on a cluster icon, here is my solution:
// add a listener to the cluster which triggers on a tap event
clusteredSugProvider.addEventListener('tap', function (evt) {
// get the data of the object clicked
let cnt = evt.target.getData();
// if those data contain a data object it was a marker to be clicked
// mine has a string (not yet set in the code above) which I show inside an InfoBubble
if (typeof cnt.a.data !== 'undefined') {
let bubble = new H.ui.InfoBubble(evt.target.getPosition(), {
content: cnt.a.data.content
});
ui.addBubble(bubble);
} else {
// otherwise it was a cluster icon which doesn't contain a data object
// set the map center to the coordinates where the user clicked
// "true" is to have a smooth transition
map.setCenter(
map.screenToGeo(
evt.currentPointer.viewportX,
evt.currentPointer.viewportY
),
true
);
// increase the zoom level by an amount which fits your needs
// again "true" is to have a smooth transition
const zoomIn = () => {
map.setZoom(map.getZoom() + 2, true);
map.removeEventListener('mapviewchangeend', zoomIn);
};
map.addEventListener('mapviewchangeend', zoomIn);
}
}, false);