Cluster onclick event

[Lundquist]

Can anybody tell me how to bind a click/tap event to a cluster?

I can bind it to the marker that my theme uses, but I can't tell how to go from there to get the cluster.

What I would like to do with this is to click on a cluster and get the map to zoom in on the points that belong to that cluster. I can do that, I just can't figure out how to attach the event listener to the cluster.

Cheers
David

[jasfox]

Just add add an EventListener for the click event and attach it to the MapObject returned from the getClusterPresentation() function:
Something like this should work:

var getClusterPresentation = function (dataPoints) {
	
	if (dataPoints.getSize() > 0){
		   var markerIcon = createIcon(dataPoints.getSize());
		   var clusterMark = new nokia.maps.map.Marker(dataPoints.getBounds().getCenter() , 
							{icon: markerIcon}
				);
				var onClick = function(evt) {
                                         // display is the name of my nokia.maps.map.Display.
					display.zoomTo((evt.target.$dataPoints.getBounds()));					
			  };
				
				clusterMark.addListener("click", onClick);
				clusterMark.$dataPoints = dataPoints;
		   
				return clusterMark;
	}
};

The trick is to ensure that the data is associated with the Cluster Marker object somehow

[jnmeehan]

What object do I call getClusterPresentation() on in order to install the listener? I've got the following so far:

var map = new nokia.maps.map.Display(mapContainer, {
            center : [26, -97],
            zoomLevel: 3,
            components: [
                new nokia.maps.map.component.ZoomBar(),
                new nokia.maps.map.component.Behavior(),
                new nokia.maps.map.component.TypeSelector()
            ]
        });

var points = [{"latitude": 39.441609999999997, "value": 109.33954425739749, "longitude": -84.340641000000005}, 
{"latitude": 33.466169000000001, "value": 215.34702619408367, "longitude": -117.69165100000001}, 
{"latitude": 28.330562, "value": 134.45855372915111, "longitude": -81.47369599999999}];
//much longer array but truncated here

var clusterProvider = new nokia.maps.clustering.ClusterProvider(map, {
    eps: 1,
    minPts: 1,
    dataPoints: points
});
clusterProvider.cluster();

[jasfox]

What object do I call getClusterPresentation() on in order to install the listener?

Add a theme parameter to the ClusterProvider as shown below.

var ClusterProvider = nokia.maps.clustering.ClusterProvider,
	clusterProvider = new ClusterProvider(display, {
		eps: 16,
		minPts: 1,
		dataPoints: [],
		theme : myTheme
	});

myTheme itself holds two functions:

// Set up a theme.
var myTheme ={
	  getClusterPresentation :   getClusterPresentation ,
	  getNoisePresentation :  getNoisePresentation
};

Where the getClusterPresentation() and getNoisePresentatio() - are functions that style the data from the cluster.

// This is called for a cluster of points...
var getClusterPresentation = function (dataPoints) {
 
	if (dataPoints.getSize() > 0){
               // Just add a Standard Marker for now.
		return new nokia.maps.map.StandardMarker (dataPoints.getBounds().getCenter(),
				{  
								text:  dataPoints.getSize(),  
								brush: {color: '#FF0000'}            
								}
		);
	}
};

 
// This is called for an individual point which is outside of a cluster.
var	getNoisePresentation = function (dataPoint) {
	return new nokia.maps.map.StandardMarker ([dataPoint.latitude, dataPoint.longitude]);
};

You'll find a full commentary on clustering on the wiki: http://www.developer.nokia.com/Commu...ode_Commentary
There is also the standard clustering example in the API Explorer: http://developer.here.com/apiexplore...uster-markers/

How to zoomTo elements in a cluster is described below.