12

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

2 Answers 2

7

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;
};
3
  • After adding this code, my SelectFeature stopped working somehow. Didn't you experience this? Commented Apr 23, 2012 at 8:41
  • 1
    @delawen : What browser do you use? I haven't seen that, can you debug your application, to see where it fails? Commented Apr 24, 2012 at 12:50
  • One possible side-effect: If you have a layer with image icons which you do NOT want to interact with, when you apply this solution the SelectFeature stops working when directly above the image icons. To fix, use something like: $(map.layers[X].div).css({"pointer-events":"none"}); where X is the layer index you wish to pass-through.
    – pkExec
    Commented May 15, 2013 at 10:02
2

I found this when I had the same issue, trying to get multiple layers to react to mouse events.

The solution, just in case anyone else finds this thread is much simpler.

The SelectFeature control takes an array of Vector layers and if all the laters you need to react to mouse events (hover and click) are in that array, they ALL work, not just the one that was moved to the top.

The documentation suggests against using markers layers at all. While my solution revolves around PostGIS geometry fields and lends itself to rendering POINT data in a vector layer, anything that uses Markers can be done this way, and according to OpenLayers, should.

So, the approved solution to this thread can be much simplified using Vector Layers for the markers and doing something like this:

this.carSelect = new OpenLayers.Control.SelectFeature(
    [vectorsLayer, markersLayer],
    {
        'hover':true,
        'callbacks': {
            blah blah blah
    }
});

This will register the appropriate events on both layers and make them both live.

I hope this helps anyone else stumbling on this issue.

As said elsewhere, using OpenLayers is not hard, finding the correct way to do things with it is.

1
  • I ran into this exact same problem, thank you for the tips. Now I have to find out how to put markers inside a Vector layer. If you care to make your answer more complete you could describe how to do that.
    – Hoffmann
    Commented Apr 4, 2014 at 14:05

Your Answer

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

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