Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

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

share|improve this question

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

share|improve this answer
    
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
up vote 2 down vote accepted

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?

share|improve this answer
    
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

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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