2

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

4

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: Fiddle

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

  • I does has a weird side effect: there are no unclustered features anymore. You just get clusters of size 1?? How to fix this? It's rather annoying for the rest I want to do. – Jeroen Oct 4 '12 at 8:47
  • just add the correct settings to the strategy: strategy = new OpenLayers.Strategy.Cluster({distance: 20, threshold: 2}); – Jeroen Oct 4 '12 at 13:51
0

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...

  • hi. I've allready made that functionality in "function zoomtocluster(event) {" It actualy zooms to an area containing all the features in the cluster. The problem is distinguishing between the click (zoom) and hover (show info) events. That's the part not working. Implementing your sollution doesn't change that – Jeroen Oct 4 '12 at 7:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.