zoom to cluster onClick & have hover event

Question

I've made a simple mock-up trying to combine two openlayers examples. I want to have clusters on which I can hover (so I can display an infowindow about it's content) and I want users to be able to click on them to zoom to these clusters.

The last part I've allready made. Take a look at this jsFiddle http://jsfiddle.net/BzcAD/2/

You might recognize the following two examples: http://www.openlayers.org/dev/examples/highlight-feature.html http://www.openlayers.org/dev/examples/strategy-cluster-threshold.html

Now the jsFiddle halts on the error : "TypeError: this.layer.getZIndex is not a function"

You can stop this error by uncommenting the lines regarding the selectCtrl. Like so:

// var selectCtrl = new OpenLayers.Control.SelectFeature(
//     {clickout: true}
// );
   map.addControl(highlightCtrl);
// map.addControl(selectCtrl);
   highlightCtrl.activate();
// selectCtrl.activate();

then you get a working example, except that it does zoom to the cluster on hover.

I realy don't know how to fix this. Any ideas? Many thanks in advance

Answer 1

Ah, solved it. The mentioned error was the result of my mistake. I didn't specify a layer name with the selectCtrl. Also moving the actual select (thus the click and zoom) function to this selectCtrl gives the desired behaviour:

var highlightCtrl= new OpenLayers.Control.SelectFeature(
             clusters, {
                    hover: true,
                    highlightOnly: true,
                    renderIntent: "temporary",
                    eventListeners: {
                        beforefeaturehighlighted: display,
                        //featurehighlighted: zoomtocluster,
                        featureunhighlighted: display
                    }
                }
            );
var selectCtrl = new OpenLayers.Control.SelectFeature(
            clusters, {
                    clickout: true,
                    eventListeners: {
                        featurehighlighted: zoomtocluster
                    }
                }
            );

You can see it in action on: http://jsfiddle.net/BzcAD/4/

How would I implement a three-way action, thus hover (change appearence), click (display info) & double-click (zoom). How do I do that?

Answer 2

that is not so hard to apply zooming to cluster.

   var zoomToCluster = function(e) {
            //Write cluster objects total count
            OpenLayers.Console.log(e.type, e.feature.attributes.count);
            var xy = e.feature.geometry;
            map.setCenter(new OpenLayers.LonLat(xy.x, xy.y), 10);
        };

  var highlightCtrl = new OpenLayers.Control.SelectFeature(vectors, {
            hover: true,
            highlightOnly: true,
            renderIntent: "temporary",
            eventListeners: {                    
                featurehighlighted: zoomToCluster                    
            }
        });

  map.addControl(highlightCtrl);
  highlightCtrl.activate();

i hope it helps you...