toggle clustering with map controls

Question

I've made a map with openlayers and have the vector features clustered with a clustering strategy.

Now I want my users to be able to toggle this behaviour with a control similar to the layerswitcher.

I know the cluster strategy has activate() and deactivate() methods. But how can I combine those with a custom control? here's a jsFiddle with a working clustering example http://jsfiddle.net/BzcAD/5/

many thanks

EDIT: I tried the sollution proposed below, but somehow adding more strategies to the vector layer forces OL to look for a protocol. I've got no idea how to fix that or to work around. Still looking for a better suggestion. Take a look at: http://jsfiddle.net/BzcAD/6/

If you look at http://www.openlayers.org/dev/examples/strategy-cluster-extended.html there they just throw away everthing and build the complete layer again. I don't like that.

The only work around I can think of is setting the clustering threshold one above the number of features on the layer. I'de like to have a layerswitcher style folding menu calles 'options' with a selectbox toggling this clustering behaviour.

Answer 1

You can make a custom OpenLayers class that calls the cluster stratergy activate() and deactivate() methods.

A simple example would be:

cluster_strat = new OpenLayers.Strategy.Cluster({
 "autoActivate": false,
 "autoDestroy": false});
data = new OpenLayers.Layer.Vector("Name", {
 strategies: [new OpenLayers.Strategy.Fixed(),
 cluster_strat],
 //whatever elese to set up your layer as well
 });
map.addLayers([data]);
ToggleClusterControl = OpenLayers.Class(
 OpenLayers.Control.Button,
 {trigger: function(){
 if (cluster_strat.active){
 cluster_strat.deactivate();
 data.refresh({forces:true}); //Force the layer to redraw
 }else{
 cluster_strat.deactivate();
 data.refresh({forces:true}); //Force the layer to redraw
 }
 },
 CLASS_NAME:"OpenLayers.ToggleClusterControl"
});
panel = new OpenLayers.Control.Panel();
panel.addControls([new ToggleClusterControl({title:"Toggle Cluster Control}]);
map.addControl(panel);

Note: the easiest way to do this is to make both the data layer and the cluster strategy exists at the global (window) level.

Alternitevly you could build a div with a basic checkbox items yourself and then add javascript event listeners to them that would have the same functionality.

Hope this helps!

• Jeroen: Hi, I tried your suggestion in jsfiddle.net/BzcAD/6 it sounds logical to me, but I get an OpenLayers error. "TypeError: layer.protocol is null". I've added the debug library so it is easier to debug. If I need to set a protocol for the clusters layer, I don't know what to choose or what the impact will be.
• om_henners: No worries. The protocol tells OpenLayers what type of vector the datasource is. For example, take a look at the KML example to see how to include a KML data source.
• Jeroen: I noticed some of those examples. I just don't see how I can use them. I have extensive code around the whole map that controls what goes on the map and what is visible. There's no need to (try to) put all that in a protocol. I'm actually solving this now by creating a new Control Class based on the layerSwitcher.