Set feature before selected element in OpenLayers

Question

I have a some features that must be always in front of any other feature, the problem is that when I draw new feature or select current one it overlaps all other features. Is there a way I can set some features or a layer to be always on top of everything ?

Answer 1

I suspect you are not specifying zIndex in the selected style for the interaction. In this code sample for hover on features in certain layers I set the selected style to be the same as the normal unselected style for the layer and only change the cursor

var interStyle;

function interFilter(feature, layer) {
    for (var i = 0; i < layerTypes.length; i++) {
        if (layer && layer.get("jsonName") && layer.get("jsonName").slice(-7) == layerTypes[i] + ".json") {
            interStyle = layer.getStyle();
            return true;
        }
    }
    return false;
}

var interHover = new ol.interaction.Select({ condition: ol.events.condition.pointerMove,
                                             style: function(feature) { return interStyle; },
                                             filter: interFilter });

interHover.on( "select",
               function(event) { rowMap.getViewport().style.cursor = event.selected.length > 0 ? "pointer" : "";
                                 // optional callback to inform the calling page the mouse is over/off a feature
                                 if (options.setMouseOver) { options.setMouseOver(event.selected.length > 0); } }
);

The purple line remains below the green line at all times:

However if I comment out the style setting

var interHover = new ol.interaction.Select({ condition: ol.events.condition.pointerMove,
                                             // style: function(feature) { return interStyle; },
                                             filter: interFilter });

When hovering over the purple line it takes OpenLayers default blue selected style and appears above the green line