I have an OpenLayers map with a raster base layer, a vector layer and a markers layer in that order. They display fine, in the correct order with the markers on top of the vectors, great.
But when I add a SelectFeature Control and point it to the vector layer, it is suddenly drawn above the markers layer, despite all efforts to raise the marker layer or setting the Z index. It seems that the SelectFeature control overrides all drawing order settings. Is this by design, or can I overcome this somehow?
The layer definitions:
var baselayer = new OpenLayers.Layer.WMS('Norden',
'http://{myarcgisserver}/ArcGIS/services/mylayer/MapServer/WMSServer', {
layers :'1,2',
transparent :false,
width :'auto',
height :'auto',
filter :null
}, {
isBaseLayer: true,
singleTile :true,
ratio :1,
alpha :false,
transitionEffect :'resize'
});
var vectorLayer = new OpenLayers.Layer.Vector("Work orders", {
projection: new OpenLayers.Projection("EPSG:2400"),
strategies: [new OpenLayers.Strategy.Fixed(), refresh],
protocol: new OpenLayers.Protocol.HTTP({
url: "/WorkOrder/WorkOrders.ashx?output=geojson",
format: new OpenLayers.Format.GeoJSON()
})
});
var markerlayer = new OpenLayers.Layer.Markers("Markers", {
projection: new OpenLayers.Projection("EPSG:2400"),
displayInLayerSwitcher: false
}
);
The control definition:
var selectctrl = new OpenLayers.Control.SelectFeature(
vectorLayer,
{
clickout: true,
toggle: false,
multiple: false,
hover: false,
toggleKey: "ctrlKey", // ctrl key removes from selection
multipleKey: "shiftKey", // shift key adds to selection
box: false
}
);
Activation: (Without this, the layers draw in correct order)
map.addControl(selectctrl);
selectctrl.activate();
Edit:
Found this in OpenLayers.Handler.Feature, where the "moveLayerToTop" feels like the culprit... Will try to overcome it, but if someone knows it to be impossible, please let me know!
/**
* Method: activate
* Turn on the handler. Returns false if the handler was already active.
*
* Returns:
* {Boolean}
*/
activate: function() {
var activated = false;
if(OpenLayers.Handler.prototype.activate.apply(this, arguments)) {
this.moveLayerToTop();
this.map.events.on({
"removelayer": this.handleMapEvents,
"changelayer": this.handleMapEvents,
scope: this
});
activated = true;
}
return activated;
},
See Question&Answers more detail:
os