[GIS] toggle clustering with map controls

clusteringmapcontrolopenlayers-2

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.

Best Answer

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!

Related Question