Dealing with overlapping features in OpenLayers

Question

If users create a polygon feature that completely overlaps another one, like this …

… then there's no way you can select the inner feature, i.e. the one that's overlapped by the other. I'm currently using a simple SelectFeature like this:

var select = new OpenLayers.Control.SelectFeature(
  [this.annotationLayer, this.controlPointsLayer], { 
    hover: true,
    renderIntent: "temporary"
    }
);
this.map.addControl(select);
select.activate();

But obviously, I can only get it to select the outer feature. What is the typical way of dealing with this? How can I make it possible for the user to select the inner feature as well?

The simplest solution would probably be to make the outer feature only selectable within the area that's left when subtracting the inner feature – but I have no idea how to go about doing that.

Answer 1

Few options. Some crazier :-) than others. The basic strategies are

• Cluster features
• Hide/move the top feature
• Send the click through the top feature

==>

1. Turn on feature clustering strategy

2. Implement your own clustering algorithm, so when a new item is added or modified, your algorithm re-runs and does a nested for-loop check and n*n(-1) checks to see what overlaps with what - then modify the feature property to setup a list of overlapping features, and when the user Clicks on the feature, display a list of features that overlap and have user select what they really wanted to click on. Makes sense?

3. Instead of implementing feature on-click, just implement a whole map click handler. And when user clicks, check through your layer for any intersecting features - and if there is one - display that guy's pop-up, and if there are multiple, display a prompt list like in #2 above. If none intersect, just ignore.

4. Implement a right-click option to temporarily "hide" a feature to let you get access to the hidden feature. As soon as next one is clicked, re-display all the hidden features

5. Similar to #4, inside the top feature's pop-up, add a menu/link item to "hide" the feature. And proceed like in #4.

6. Similar-ish to #4/5 implement a right-click "temporary move" and click drag the feature out of the way [remember it's old spot]. Then user clicks lower feature and the top one springs back to it's original position.