using OpenLayers filters with Cluster strategy

OpenLayers filters allows you to apply complex styling to your layers. I wondered how I could use the Cluster strategy with a specific styling that should apply when the clusters contains only one point.

The Cluster strategy does hide the features of a layer inside clusters. When trying to apply some styling using feature attributes, this is problematic because you do not have access to them. OpenLayers 2.8 should solve the problem by adding a threshold attribute to the Cluster strategy so that you will be able to access features directly when clusters will contain less than a threshold number of features. See http://trac.openlayers.org/ticket/1815 for more info on this.

Then we have to create filters to apply the styling based on the feature attributes.

The two first filters allows to select if the feature are clustered or not :

var noClusterFilter = new OpenLayers.Filter.Comparison(
{
type: OpenLayers.Filter.Comparison.EQUAL_TO,
property: “count”,
value: 1,
});

var inClusterFilter = new OpenLayers.Filter.Comparison(
{
type: OpenLayers.Filter.Comparison.GREATER_THAN,
property: “count”,
value: 1,
});

When inCluster, the rule is simple : just show a circle with a radius based on the count attribute

var clusteredRule = new OpenLayers.Rule(
{
filter: inClusterFilter,
symbolizer: {pointRadius: “${radius}”,
fillColor: “#ffcc66”,
fillOpacity: 0.8,
strokeColor: “#cc6633”,
strokeWidth: 2,
strokeOpacity: 0.8
},
});

When there is no cluster, let’s use an externalGraphic based on a specific attribute of the feature :

var filterType1 = new OpenLayers.Filter.Comparison(
{
type: OpenLayers.Filter.Comparison.EQUAL_TO,
property: “type”,
value: 0,
});

and then combine it with the noClusterFilter :

var filterNoClusterType1 = new OpenLayers.Filter.Logical({filters: [noClusterFilter, filterType1], type: OpenLayers.Filter.Logical.AND});

Finally, let’s define the rule associated to this filter :

var type1Rule = new OpenLayers.Rule(
{
filter: filterNoClusterType1,
symbolizer: {externalGraphic: ‘type1.png’}
});

Then, we add the rules to the layer. Do not forget to set the context to the layer style  !

var context = {
radius: function(feature) {
return Math.min(feature.attributes.count, 7) + 3;
}
}

var lstyle = new OpenLayers.Style(clusterStyle, {context: context});
lstyle.addRules([type1Rule, clusteredRule]);

mylayer.style = lstyle;

Advertisements

One Response to using OpenLayers filters with Cluster strategy

  1. Darío Javier Cravero says:

    Dear Didrik,

    Thanks a lot for the example!!
    It was the onyy source I found on using the logical filter.. Just what I was looking for!!

    Thanks again 🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: