How to create a vector feature drop target?

Question

I would like to create, inside an openLayers map, a drop target for my features.

The user should be able to drag a vector feature, drop on the target so that some further action can be triggered (in the specific it would be moving the feature to a new map object.)

I have tried to do this by adding a OpenLayers.Control.Buttonto the map, my problem now is that I cannot sort out the z-index issue: when dragged on the target, the feature disappears behind the button.

Is there any way i can set up properly the CSS of the button so that it stays above the map tiles but below the features?

I have noticed that the map is on z-index 749, the vector features in a nested div with z-index 330 - I have tried to set the button to z-index 749 too but the feature still moves below.

Ideas?

Answer 1

With OpenLayers you have the option to set one layer as the BaseLayer, then the other ones are overlays.

The order of definition is used as "overlay Z order". Example:

map = new OpenLayers.Map(...);
    map.addLayer( ... below, low Z position ... );
    map.addLayer( ... above, high Z position ... );
    // now you have (map.layers.length==2)

For any other "external object" that need to go "above", I use CSS with "z-index:99999999". Example: the z-index of the automplete-text or a select (combo-box) at the top of the map.

I do not recommend, for reasons of user-interface, the inclusion of HTML fragments inside the map (!), except total ones, like a modal dialog, or when the HTMLfrag himself is part of a layer. Typical example of this last one is a the contentHTML parameter of the a OpenLayers.Popup constructor. There you can interact with things like <button> tags.

Z-Index access

If you set the layers with map.addLayer, the pointer is at the map.layers array, that is, you need know a priori the index i of your layer map.layers[i]. Or you can set a var,

var mayLayer = new OpenLayers.Layer... ;
...  map.addLayer(mayLayer); ...

For any layer you can use the getZIndex method, to check the exact z-index, and associate this z-index to the HTML fragment.

   var myZval = mayLayer.getZIndex(); // or map.layers[x].getZIndex();

Another way to check OpenLayers zindex managing is the Z_INDEX_BASE variable: it is a (not documented) object containing the following propperties:

{ BaseLayer: 100
,Overlay: 325
,Feature: 725
,Popup: 750
,Control: 1000 
}

So, you can use a relative z-index. For example,

myMakerLayer0.setZIndex(map.Z_INDEX_BASE['Popup'] - 2);

Of course, the best way to positionate your HTML fragment is with DOM — I prefer jQuery to access DOM with OpenLayers.

 HTMLObject.style.zIndex=myZval;

PS: I not use it, but see also OpenLayers.ElementsIndexer.

Interface control

See Styling, etc.

In this example the on-mouse-over changes the z-index of each vector feature in the same layer.