[GIS] WMS layer above select-controlled vector layer in OpenLayers 2

layersopenlayers-2orderselectvector

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.

Best Answer

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.

Related Question