Working with clustering
When rendering a large number of points in a map, symbolizing each point individually is often unhelpful since symbols will frequently overlap one another making it difficult to distinguish between points. Symbolizing multiple points with a single symbol is often used to resolve this issue by providing a more aesthetic, efficient, and usable rendering solution. This process is termed clustering. Clustering identifies groups of points in a layer that are within a given cluster distance. The cluster distance is dependent on the scale at which the map is displayed; so as you zoom in fewer points are clustered and as you zoom out, more points are clustered.
Note:Clustering can be applied to a GraphicsLayer or FeatureLayer.
There are two techniques for clustering graphics:
- Using the SimpleClusterer.
- Extending the GraphicsClusterer to create a custom clustering solution.
Both techniques can be used with a GraphicsLayer or a FeatureLayer.
Using the SimpleClusterer
The SimpleClusterer can be added to a GraphicsLayer or FeatureLayer using the following XAML:
<esri:GraphicsLayer ID="MyGraphicsLayer">
<esri:GraphicsLayer.Clusterer>
<esri:SimpleClusterer />
</esri:GraphicsLayer.Clusterer>
</esri:GraphicsLayer ID="MyGraphicsLayer">
Groups of points that form a cluster are symbolized using a large cluster symbol. The default large cluster symbol is rendered using a gradient color between red and yellow and the feature count the cluster represents is drawn on top of the symbol. The large cluster symbol is not interactive by default.
You can modify the SimpleClusterer in XAML using the following properties; default values are listed:
SimpleClusterer properties | Description |
|---|---|
Radius | The radius within which features will be clustered. Defined in pixels. Default = 40. |
Gradient | The LinearGradientBrush used to render large clusters. Default = LinearGradientBrush; MappingMode = RelativeToBoundingBox; GradientStop1: Offset = 0, Argb=127,255,255,0, GradientStop2: Offset = 1, Argb=127,255,0,0. |
The following steps illustrates how to modify SimpleClusterer properties in XAML. The result will generate a blue gradient symbol for the large clusters. A green diamond symbol has been applied to single graphic features. To see a functional example, view the Simple Clusterer sample in the Graphics section of the Interactive SDK.
 |
- Add a reference to the System.Runtime.Serialization assembly in your project.
- Add a LinearGradientBrush as a static resource. The declaration will be inside the LayoutRoot grid element.
<Grid.Resources> <LinearGradientBrush x:Key="BlueGradient" MappingMode="RelativeToBoundingBox" > <GradientStop Color="#990011FF" Offset="0"/> <GradientStop Color="#990055FF" Offset="0.25"/> <GradientStop Color="#990099FF" Offset="0.5"/> <GradientStop Color="#9900CCFF" Offset="0.75"/> <GradientStop Color="#9900FFFF" Offset="1"/> </LinearGradientBrush> </Grid.Resources>
- Add the SimpleClusterer to your GraphicsLayer.
<esri:GraphicsLayer ID="MyGraphicsLayer"> <esri:GraphicsLayer.Clusterer> <esri:SimpleClusterer Gradient="{StaticResource BlueGradient}" /> </esri:GraphicsLayer.Clusterer> </esri:GraphicsLayer>
Displaying SimpleClusterer details
A user working with the map may want to get additional information about the features grouped within a large cluster. The ArcGIS API for Windows Phone 7 Toolkit assembly (ESRI.ArcGIS.Client.Toolkit) includes an InfoWindow and a ChildPage that work well together for this purpose. See Using the InfoWindow to create map tips for details.
Extending the GraphicsClusterer
To customize the look, feel, and behavior of clustering, you need to create a custom class that derives from ESRI.ArcGIS.Client.GraphicsClusterer and overrides the OnCreateGraphic() method to return a cluster graphic. The clustered features are passed to the OnCreateGraphic method in a graphic collection. Interrogate the collection and graphic features to determine how to create a clustered graphic with a symbol. The SimpleClusterer returns a large cluster symbol. The example code below generates a single symbol for any graphic collection that has more than 1 feature. The cluster symbol size and color are calculated, and values in an attribute column in the GraphicsLayer or FeatureLayer on which the custom clusterer is applied will be aggregated. The sum total of the values will be displayed on the cluster symbol. For brevity only the custom cluster class source code is provided below.
public class SumClusterer : GraphicsClusterer
{
public SumClusterer()
{
MinimumColor = Colors.Red;
MaximumColor = Colors.Yellow;
SymbolScale = 1;
base.Radius = 50;
}
public string AggregateColumn { get; set; }
public double SymbolScale { get; set; }
public Color MinimumColor { get; set; }
public Color MaximumColor { get; set; }
protected override Graphic OnCreateGraphic(GraphicCollection cluster,
MapPoint point, int maxClusterCount)
{
if (cluster.Count == 1) return cluster[0];
Graphic graphic = null;
double sum = 0;
foreach (Graphic g in cluster)
{
if (g.Attributes.ContainsKey(AggregateColumn))
{
try
{
sum += Convert.ToDouble(g.Attributes[AggregateColumn]);
}
catch { }
}
}
double size = (sum + 450) / 30;
size = (Math.Log(sum * SymbolScale / 10) * 10 + 20);
if (size < 12) size = 12;
graphic = new Graphic() { Symbol = new ClusterSymbol() { Size = size },
Geometry = point };
graphic.Attributes.Add("Count", sum);
graphic.Attributes.Add("Size", size);
graphic.Attributes.Add("Color", InterpolateColor(size - 12, 100));
return graphic;
}
private static Brush InterpolateColor(double value, double max)
{
value = (int)Math.Round(value * 255.0 / max);
if (value > 255) value = 255;
else if (value < 0) value = 0;
return new SolidColorBrush(Color.FromArgb(127, 255, (byte)value, 0));
}
}