javascripthere-api

Here Maps zoom on cluster click


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);

Solution

  • 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);