clustering.ITheme and clustering.MarkerTheme for ClusterProvider

**upixsoul** · 2012-10-12, 16:36

**jasfox** · 2012-10-15, 11:04

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

**upixsoul** · 2012-10-15, 15:48

thank you very much! it works perfectly!

**upixsoul** · 2012-10-15, 18:34

Originally Posted by jasfox

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?

**jasfox** · 2012-10-16, 11:06

Originally Posted by upixsoul

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.

**upixsoul** · 2012-10-16, 16:07

thanks! it works perfectly!

Discussion Board

Thread: clustering.ITheme and clustering.MarkerTheme for ClusterProvider

Thread Tools

Search Thread

Rate This Thread

Display

Similar Threads

nokia.maps.clustering.ITheme theme - MarkerTheme

nokia.maps.clustering.MarkerTheme para ClusterProvider

nokia.maps.clustering.ClusterProvider y dataPoints? IClusterPoint?

nokia.maps.clustering.ClusterProvider and dataPoints? IClusterPoint?

Clustering on data matrix

Posting Permissions