Skip to content Skip to sidebar Skip to footer

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 p

Solution 1:

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
        map.setZoom(map.getZoom()+2, true);
    }
}, false);

Post a Comment for "Here Maps Zoom On Cluster Click"