Search code examples
javascriptopenlayers

Forcing an OpenLayers Markers layer to draw on top, and having selectable layers beneath


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;
},

Solution

  • The answer - if it's ok to call it that lies in the activate function that I mention above. I tried to override that and removed the call to moveLayerToTop, and it works like a charm.

    EDIT: I ended up adding this code to a js file outside the OL code library, overriding the handlers activate function. This is because I would otherwise lose the change on an update of the OpenLayers code base.

    OpenLayers.Handler.Feature.prototype.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;
    };