Cluster noise theme - Marker with text

[Lundquist]

Good morning everyone.

I wondered if somebody could help me out. I have a situation where I want to use the clusterer to group my markers together. I've created a theme for my clusters and noise points, I can see them working. My problem is that my individual marker icons actually consist of 2 markers, an image and seperate SVG label (with background and text on).

My problem is I cannot figure out how to return these icons from the cluster theme, as far as I can tell the getNoisePresentation function is expected to return a single marker icon and can't handle 2.

I've tried to group them together in a container but I haven't had any luck with that (I just get an error), is there something else I can do or something I've missed from the API that would allow me to do this?

Many thanks
Lund

[jasfox]

The idea you had was correct, the getNoisePresentation() should return a map object of some sort - it doesn't just have to be a StandardMarker or Marker, it can be a Container


If your cluster theme is defined as below:

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
	});

Then the following getNoisePresentation() function successfully places both a Marker and an SVG graphic (actually just the number 1) on the noise point.

// This is called for an individual point which is outside of a cluster.
var	getNoisePresentation = function (dataPoint) {
	
	var contain = new nokia.maps.map.Container();
	
	// Add the first map object - this is a Standard Marker
	contain.objects.add( new nokia.maps.map.StandardMarker ([dataPoint.latitude, dataPoint.longitude]));
  
  var iconSVG = 	'<svg width="39" height="39" xmlns="http://www.w3.org/2000/svg">' +
	'<text x="0" y="0" font-size="10pt" font-family="arial" font-weight="bold" text-anchor="middle" fill="#FFF" textContent="__TEXTCONTENT__">__TEXT__</text>' +
	'</svg>';
	
		var svg = iconSVG
			.replace(/__TEXTCONTENT__/g, "1")
			.replace(/__TEXT__/g, "1")
			.replace(/__MAINCOLOR__/g, "#FF00FF");
			
		var	svgParsr = new nokia.maps.gfx.SvgParser();
		var markerIcon =  new nokia.maps.gfx.GraphicsImage(svgParsr.parseSvg(svg));
		
		
		
		// Add the second map object - this is an SVG Graphic
				contain.objects.add(new nokia.maps.map.Marker([dataPoint.latitude, dataPoint.longitude], 
							{icon: markerIcon,
								anchor: new nokia.maps.util.Point(0, 10)}
				));
				
				// return  the container
				return contain;
	};

[Lundquist]

Thank for the help. That sorted me out.
I swear that I already tried that, but I must have had a bug somewhere else which I've since fixed :(

Top notch :)