In the hopes that it might prove useful...
Define Style
Make the most important feature (icon) represent the cluster.
var siteStyle = new OpenLayers.Style(
{
graphicWidth: ICON_SIZE_WIDTH,
graphicHeight: ICON_SIZE_HEIGHT,
graphicXOffset: -(ICON_SIZE_WIDTH / 2),
graphicYOffset: -(ICON_SIZE_HEIGHT),
externalGraphic: '${icon}',
},
{ context: {
icon: function( feature ) {
if( feature.cluster ) {
var maxImportance = 0;
var mainFeature = 0;
for( var c = 0; c < feature.cluster.length; c++ ) {
var i = feature.cluster[c].attributes.importance;
if( i > maxImportance ) {
maxImportance = i;
mainFeature = c;
}
}
feature.attributes = feature.cluster[mainFeature].attributes;
}
return feature.attributes.icon;
}
}
});
Define Icon Overlap
Determine the threshold, in pixels, that quantifies two icons overlapping.
// At least 35% of the icon must be visible.
var overlapDistance = Math.round( Math.sqrt(
Math.pow( ICON_SIZE_WIDTH, 2) +
Math.pow( ICON_SIZE_HEIGHT, 2) ) * 0.35 );
Define Strategy
Hide sites that are behind other sites using the Cluster strategy.
var strategy = new OpenLayers.Strategy.Cluster(
{ distance: overlapDistance, threshold: 2 }
);
Apply Strategy
Create a layer to show the site icons.
var siteLayer = new OpenLayers.Layer.Vector( 'Sites', {
strategies: [strategy],
styleMap: new OpenLayers.StyleMap( siteStyle )
});
Describe Feature Priority
Create a feature.
var feature = new OpenLayers.Feature.Vector(
getPoint( lon, lat ),
{
uuid: uuid,
icon: getIconPath( classification, MAP_ICON_SUFFIX ),
siteType: classification,
title: label,
importance: priority
}
);