Discussion Board

Results 1 to 6 of 6
  1. #1
    Registered User
    Join Date
    May 2012
    Posts
    43

    Question clustering.ITheme and clustering.MarkerTheme for ClusterProvider

    hello i hava been trying and looking this examples:

    cluster markers
    http://api.maps.nokia.com/en/playgro...ermarkers_desc

    cluster provider
    http://api.maps.nokia.com/en/apirefe...rProvider.html

    options
    http://api.maps.nokia.com/en/apirefe...r.Options.html


    icordinate
    http://api.maps.nokia.com/en/apirefe...oordinate.html

    marker clustering
    http://api.maps.nokia.com/en/maps/do...ker_Clustering

    theme
    http://api.maps.nokia.com/en/apirefe...ng.ITheme.html

    marker theme
    http://api.maps.nokia.com/en/apirefe...rkerTheme.html

    custom standard marker
    http://api.maps.nokia.com/en/playgro...le_marker_desc

    and recently a link provided in last post by jasfox
    http://www.developer.nokia.com/Commu...Text-on-Marker

    and now i have a question, how i do a clustering.ITheme or a clustering.MarkerTheme for a ClusterProvider? how i implement the interface for the Cluster provider?

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

    Re: clustering.ITheme and clustering.MarkerTheme for ClusterProvider

    Here is a simple example of using a custom theme. Random markers are added around a series of North American Cities and a more diffusely over Europe.
    The key to the example is to add theme : myTheme to the instansiation of the ClusterProvider

    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 getClusterPresentation and getNoisePresentation - the functions style the data from the cluster.
    Clusters are displayed in RED, unclustered noise points are displayed with a standard marker.

    The full code can be found below:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html>
    <head>     
    	
    	<meta http-equiv="X-UA-Compatible" content="IE=7; IE=EmulateIE9"/>
    		<script type="text/javascript" charset="UTF-8" src="http://api.maps.nokia.com/2.2.3/jsl.js?with=all"></script>
    		<title>Clustering Example</title>
    </head> 
    <body onload="init()"> 
    	
     <div id="map" style="width:70%; height:70%; position: absolute;"></div> 
     <script type="text/javascript">
            	        	   	
            	
    /////////////////////////////////////////////////////////////////////////////////////
    // Don't forget to set your API credentials
    //
    // Replace with your appId and token which you can obtain when you 
    // register on http://api.developer.nokia.com/ 
    //
    			nokia.Settings.set( "appId", "YOUR APP ID GOES HERE"); 
    			nokia.Settings.set( "authenticationToken", "YOUR AUTHENTICATION TOKEN GOES HERE");
    						
    //			
    /////////////////////////////////////////////////////////////////////////////////////
    
    	
    //initialize a new map 
    
    
    var display = new nokia.maps.map.Display(document.getElementById("map"), 
                         {     "components": [	
                                         new nokia.maps.map.component.ZoomBar(),                 
                                         new nokia.maps.map.component.Behavior(),                 
                                         new nokia.maps.map.component.TypeSelector()], 
                                            
                                         "zoomLevel": 4 ,
                                         "center" : [29.762778, -95.383056] }); 
                                         
    
    // This is called for a cluster of points...
    var getClusterPresentation = function (dataPoints) {
    	
    	if (dataPoints.getSize() > 0){
    		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]);
    };
    
    // Set up a theme.
    var myTheme ={
    	  getClusterPresentation :   getClusterPresentation ,
    	  getNoisePresentation :  getNoisePresentation
    };
    	  
    
    // Initialize a Cluster Provider... (with my theme)
    var ClusterProvider = nokia.maps.clustering.ClusterProvider,
    	clusterProvider = new ClusterProvider(display, {
    		eps: 16,
    		minPts: 1,
    		dataPoints: [],
    		theme : myTheme
    	});
    	                                     
    
    // The following functions add a random series of points  ....
    function randomPointNear (lat, long, walk){
    
      for (j = 0; j  < 3; j++){
    			   lat = Math.max( lat  - (Math.random()*walk), -80);
    			    lat = Math.min( lat   + (Math.random()*walk), 80);
    			   long = Math.max( long  - (Math.random()*walk) , -175);
    			   long = Math.min( long  + (Math.random()*walk), 175);
    		}
    	return  new nokia.maps.geo.Coordinate ( lat, long);
    }
    
    function addMarkersNearCity(lat, long, size, spread){
    		for (var i = 0; i  < size; i++){
    						markers.push(randomPointNear (lat, long , spread));
    		}
    }
    
    
    var addCount;
    var markers = [];
    // Adds 70 Markers....
    function add70MarkersNearCities(){
    	
    		addCount--;
    		addMarkersNearCity (38.895111, -77.036667 , 10, 1);  // Washington
    		addMarkersNearCity (	43, -75 , 5,  1);  // New York
    		addMarkersNearCity(34.05, -118.25 , 10,  1) ;  // Los Angeles
    		addMarkersNearCity (32.782778, -96.803889 ,10,  1) ;  //  Houston
    		addMarkersNearCity (	19.433333, -99.133333, 10, 1) ; //  Dallas
    		addMarkersNearCity(29.762778, -95.383056 , 5, 1) ;   // Mexico City
    	  addMarkersNearCity (52.500556, 13.398889 , 20, 3) ;  // Diffuse Spread of markers over Europe 
    	  
    	  if (addCount == 0){	  	    
    					clusterProvider.addAll(markers);
    					clusterProvider.cluster();										 
    		}
    
    }
    
    //
    //  Initially add 7000 markers to the map.
    //	To add more markers, increase the value of AddCount.
    //
    function init(){
    		addCount = 100;
    	 	for (var i = 0; i  < 100; i++){
    	  		setTimeout( function() { add70MarkersNearCities(); }, 0);
    	  }			  
    }
            </script> 
        </body> 
    </html>
    By the way, this example is VERY SLOW under IE - should work in FF. Chrome etc.

    There is also a more complex Playground example on custom clustering themes:
    http://api.maps.nokia.com/en/playgro...stertheme.html

  3. #3
    Registered User
    Join Date
    May 2012
    Posts
    43

    Re: clustering.ITheme and clustering.MarkerTheme for ClusterProvider

    thank you very much! it works perfectly!

  4. #4
    Registered User
    Join Date
    May 2012
    Posts
    43

    Re: clustering.ITheme and clustering.MarkerTheme for ClusterProvider

    Quote Originally Posted by jasfox View Post
    Here is a simple example of using a custom theme. Random markers are added around a series of North American Cities and a more diffusely over Europe.
    The key to the example is to add theme : myTheme to the instansiation of the ClusterProvider

    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 getClusterPresentation and getNoisePresentation - the functions style the data from the cluster.
    Clusters are displayed in RED, unclustered noise points are displayed with a standard marker.

    The full code can be found below:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html>
    <head>     
    	
    	<meta http-equiv="X-UA-Compatible" content="IE=7; IE=EmulateIE9"/>
    		<script type="text/javascript" charset="UTF-8" src="http://api.maps.nokia.com/2.2.3/jsl.js?with=all"></script>
    		<title>Clustering Example</title>
    </head> 
    <body onload="init()"> 
    	
     <div id="map" style="width:70%; height:70%; position: absolute;"></div> 
     <script type="text/javascript">
            	        	   	
            	
    /////////////////////////////////////////////////////////////////////////////////////
    // Don't forget to set your API credentials
    //
    // Replace with your appId and token which you can obtain when you 
    // register on http://api.developer.nokia.com/ 
    //
    			nokia.Settings.set( "appId", "YOUR APP ID GOES HERE"); 
    			nokia.Settings.set( "authenticationToken", "YOUR AUTHENTICATION TOKEN GOES HERE");
    						
    //			
    /////////////////////////////////////////////////////////////////////////////////////
    
    	
    //initialize a new map 
    
    
    var display = new nokia.maps.map.Display(document.getElementById("map"), 
                         {     "components": [	
                                         new nokia.maps.map.component.ZoomBar(),                 
                                         new nokia.maps.map.component.Behavior(),                 
                                         new nokia.maps.map.component.TypeSelector()], 
                                            
                                         "zoomLevel": 4 ,
                                         "center" : [29.762778, -95.383056] }); 
                                         
    
    // This is called for a cluster of points...
    var getClusterPresentation = function (dataPoints) {
    	
    	if (dataPoints.getSize() > 0){
    		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]);
    };
    
    // Set up a theme.
    var myTheme ={
    	  getClusterPresentation :   getClusterPresentation ,
    	  getNoisePresentation :  getNoisePresentation
    };
    	  
    
    // Initialize a Cluster Provider... (with my theme)
    var ClusterProvider = nokia.maps.clustering.ClusterProvider,
    	clusterProvider = new ClusterProvider(display, {
    		eps: 16,
    		minPts: 1,
    		dataPoints: [],
    		theme : myTheme
    	});
    	                                     
    
    // The following functions add a random series of points  ....
    function randomPointNear (lat, long, walk){
    
      for (j = 0; j  < 3; j++){
    			   lat = Math.max( lat  - (Math.random()*walk), -80);
    			    lat = Math.min( lat   + (Math.random()*walk), 80);
    			   long = Math.max( long  - (Math.random()*walk) , -175);
    			   long = Math.min( long  + (Math.random()*walk), 175);
    		}
    	return  new nokia.maps.geo.Coordinate ( lat, long);
    }
    
    function addMarkersNearCity(lat, long, size, spread){
    		for (var i = 0; i  < size; i++){
    						markers.push(randomPointNear (lat, long , spread));
    		}
    }
    
    
    var addCount;
    var markers = [];
    // Adds 70 Markers....
    function add70MarkersNearCities(){
    	
    		addCount--;
    		addMarkersNearCity (38.895111, -77.036667 , 10, 1);  // Washington
    		addMarkersNearCity (	43, -75 , 5,  1);  // New York
    		addMarkersNearCity(34.05, -118.25 , 10,  1) ;  // Los Angeles
    		addMarkersNearCity (32.782778, -96.803889 ,10,  1) ;  //  Houston
    		addMarkersNearCity (	19.433333, -99.133333, 10, 1) ; //  Dallas
    		addMarkersNearCity(29.762778, -95.383056 , 5, 1) ;   // Mexico City
    	  addMarkersNearCity (52.500556, 13.398889 , 20, 3) ;  // Diffuse Spread of markers over Europe 
    	  
    	  if (addCount == 0){	  	    
    					clusterProvider.addAll(markers);
    					clusterProvider.cluster();										 
    		}
    
    }
    
    //
    //  Initially add 7000 markers to the map.
    //	To add more markers, increase the value of AddCount.
    //
    function init(){
    		addCount = 100;
    	 	for (var i = 0; i  < 100; i++){
    	  		setTimeout( function() { add70MarkersNearCities(); }, 0);
    	  }			  
    }
            </script> 
        </body> 
    </html>
    By the way, this example is VERY SLOW under IE - should work in FF. Chrome etc.

    There is also a more complex Playground example on custom clustering themes:
    http://api.maps.nokia.com/en/playgro...stertheme.html
    and if i only want to modify the NoisePresentation? how do you set the original ClusterPresentation?

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

    Re: clustering.ITheme and clustering.MarkerTheme for ClusterProvider

    Quote Originally Posted by upixsoul View Post
    and if i only want to modify the NoisePresentation? how do you set the original ClusterPresentation?
    You could call the prototype of the nokia.maps.clustering.MarkerTheme.getClusterPresentation()

    Code:
    var getClusterPresentation = function (dataPoints) {
    	if (dataPoints.getSize() > 0){
    		return nokia.maps.clustering.MarkerTheme.prototype.getClusterPresentation(dataPoints);
    	}
    };
    ,

    or you could extend the MarkerTheme if you wish and override the getNoisePresentation() method. It is up to you.

  6. #6
    Registered User
    Join Date
    May 2012
    Posts
    43

    Re: clustering.ITheme and clustering.MarkerTheme for ClusterProvider

    thanks! it works perfectly!

Similar Threads

  1. nokia.maps.clustering.ITheme theme - MarkerTheme
    By upixsoul in forum Foro en Español (Spanish Forum)
    Replies: 1
    Last Post: 2012-10-16, 16:03
  2. nokia.maps.clustering.MarkerTheme para ClusterProvider
    By upixsoul in forum Foro en Español (Spanish Forum)
    Replies: 1
    Last Post: 2012-10-16, 16:02
  3. nokia.maps.clustering.ClusterProvider y dataPoints? IClusterPoint?
    By upixsoul in forum Foro en Español (Spanish Forum)
    Replies: 3
    Last Post: 2012-10-12, 16:36
  4. nokia.maps.clustering.ClusterProvider and dataPoints? IClusterPoint?
    By upixsoul in forum [Archived] Maps API for Javascript
    Replies: 3
    Last Post: 2012-10-12, 16:28
  5. Clustering on data matrix
    By mrjayaram in forum Mobile Java General
    Replies: 0
    Last Post: 2010-07-14, 12:42

Posting Permissions

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