WMS layer above select-controlled vector layer in OpenLayers 2?

Question

Is it possible to display an image layer (WMS or Image) above a vector layer with activated SelectFeature control in OpenLayers?

The image layer (radar returns) contains only sparse, semi-transparent regions and doesn't significantly obscure the underlying vector layer, whose features I would like to be able to select. It seems reasonable to expect this behaviour from the map.

However, as soon as the OpenLayers.Control.SelectFeature control for the vector layer is activated, the vector layer is moved to the top of the map, placing it above the image layer. Calls to map.setLayerIndex() have no effect.

Among many attempts to fix this, I was able to prevent it from occurring by omitting the moveLayerToTop() function in the OpenLayers code, as suggested here:

https://stackoverflow.com/questions/4728852/forcing-an-openlayers-markers-layer-to-draw-on-top-and-having-selectable-layers

Although the image layer now appears above the vector layer, the OpenLayers.Control.SelectFeature no longer functions whenever the image layer is set to visible.

The image layer appears to be blocking mouse events to the control, although the map itself responds normally. I tried setting the image layer's events.fallThrough to true but it had no effect. I also (in desperation) set the layer's pointer-events to none; again, to no effect.

I saw this thread:

OpenLayers how to maintain layer ordering while using SelectFeature control

and was led to the featureclick.js extension:

https://github.com/openlayers/openlayers/pull/174

I'll likely give that a try next, but am wondering if I've missed something obvious in standard OpenLayers. I haven't found any other solutions posted on the web.

Answer 1

I was able to get this working as intended (in browsers that support it) by

1) omitting the calls to moveLayerToTop() in the OpenLayers code; and

2) setting $(layer.div).css("pointer-events", "none").

I also tested an approach using the relatively recently added map events featureover, featureout, and featureclick i.e.

var mapOptions =
   {
   .
   .
   .
   eventListeners:
      {
      featureover: function(e)
         {
         e.feature.renderIntent = "temporary";
         e.feature.layer.drawFeature(e.feature);
         },
      featureout: function(e)
         {
         e.feature.renderIntent = "default";
         e.feature.layer.drawFeature(e.feature);
         },
      featureclick: function(e)
         {
         e.feature.renderIntent = "select";
         e.feature.layer.drawFeature(e.feature);
         }
      }
   };

map = new OpenLayers.Map(mapOptions);

It worked, but proved to be slower than the first approach to change feature states; probably because there's many hundreds of features on my map for the code to sift through. For my intended use, the response could be sped up quite a bit if it stopped firing events once the top-most feature was hit, rather than reporting for every feature under the cursor. I still had to set the image layer's pointer-events to none to get it to work.

For my work, it's common to have sparse or semi-transparent image layers above vector layers that still need to respond to mouse events. I'm surprised that OpenLayers doesn't include an option to turn off the layer re-ordering when the select control is added; or maybe it does and I just don't see it in the code.

Answer 2

From my understanding, I would say that what you are trying to do is not possible out of the box. The interaction with features, aka Select control, rely on browser interaction. If you put a WMS layer on top of the features it won't work. You see, from the browser point of view, you are clicking on the image, not on the feature below it. Even if the information in your image is scarce and the background is transparent, the image is still in the way (from the browser point of view).

Also, I think the vector feature z-level is always (hardcoded) to always be on top of image layers.

What I would do in that case would be:

• Migrate your current vector layer to a WMS layer without any interaction
• Put the radar on top of this nice WMS layer (that used to be vector)
• Have your Vector layer on top of all that and set the opacity of it to 0.01. This will give you the display you want and the interaction on an "invisible" vector layer.

Hope that helps!