×

Discussion Board

Results 1 to 4 of 4

Hybrid View

  1. #1
    Registered User
    Join Date
    Nov 2012
    Posts
    5

    Question Cluster onclick event

    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

  2. #2
    Regular Contributor
    Join Date
    Aug 2011
    Location
    Berlin
    Posts
    289

    Re: Cluster onclick event

    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:

    Code:
    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

  3. #3
    Nokia Developer Expert
    Join Date
    Apr 2013
    Posts
    1

    Re: Cluster onclick event

    What object do I call getClusterPresentation() on in order to install the listener? I've got the following so far:
    Code:
    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();

  4. #4
    Regular Contributor
    Join Date
    Aug 2011
    Location
    Berlin
    Posts
    289

    Re: Cluster onclick event

    Quote Originally Posted by jnmeehan View Post
    What object do I call getClusterPresentation() on in order to install the listener?
    Add a theme parameter to the ClusterProvider as shown below.

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

    Code:
    // Set up a theme.
    var myTheme ={
    	  getClusterPresentation :   getClusterPresentation ,
    	  getNoisePresentation :  getNoisePresentation
    };
    Where the getClusterPresentation() and getNoisePresentatio() - are functions that style the data from the cluster.

    Code:
    // 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'}            
    								}
    		);
    	}
    };
    Code:
     
    // 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.
    Last edited by jasfox; 2013-04-26 at 11:06.

Similar Threads

  1. Implementing MWS, FMWS in a Cluster Framework ?
    By SoulBlade in forum Mobile Web Server
    Replies: 2
    Last Post: 2010-04-19, 23:51
  2. How to change the onclick event for the embeded media player in nokia6700
    By jornel in forum Mobile Java Media (Graphics & Sounds)
    Replies: 0
    Last Post: 2009-12-08, 11:15
  3. onClick getting wrong event
    By awysocki in forum Symbian
    Replies: 0
    Last Post: 2009-09-01, 22:55
  4. ECMAScript/onclick event and nokia 6233
    By sleepwlkr in forum Browsing and Mark-ups
    Replies: 1
    Last Post: 2007-09-21, 22:45
  5. Disk Volume Cluster Size
    By mikeullrich in forum Symbian
    Replies: 0
    Last Post: 2005-02-14, 01:21

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
×