2

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.

2 Answers 2

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.

0

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!

3
  • Thank you for your prompt reply! Although the image layer is above the vector layer, it should pass mouse events through to lower layers if its pointer-events is none (not that this helped). My point in stating that the image is sparse is only that the user is likely to want to query features in layers below. Oct 8, 2013 at 17:42
  • The set of layers you suggested might work but it would likely require some work to mimic the behaviour of the features changing their (temporary) style on hover events (unless the WMS fake features are obscured by the vector layer's highlight features). It would now require two layers to manage for each vector underlay (I have five in the actual project). Oct 8, 2013 at 17:49
  • Hi! Yes I agree that managing 2 layers is a pain. What I ended up doing is use a select state that is not transparent for the the invisible vector layer. This gave me the interaction look that I wanted. You can see an example of it in action here. Simply click on a row in the grid. Oct 10, 2013 at 19:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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