OpenLayers Vector Layer z-ordering on feature labels

Question

EDIT: I have filed a bug ticket for this on GitHub: https://github.com/openlayers/ol2/issues/1167

I'm working on a project with OpenLayers and have found the experience quite painful due to the lack of good documentation. I've followed the example here http://dev.openlayers.org/releases/OpenLayers-2.13.1/examples/ordering.html to create icons on the map with z-ordering. However, I am also using a variation of the technique here http://openlayers.org/dev/examples/vector-features-with-text.html to create labels for the vectors. Unfortunaely, it seems like OpenLayers does not respect z-ordering properties when it draws labels.

Notice how the green icon is on top of the grey icon (correct), but the green label is below the grey label (incorrect.) Is there a workaround for this?

Here's my code for the layer:

    this.vehicleLayer = new OpenLayers.Layer.Vector("vehicles", {
        // The zIndex is taken from the zIndex attribute of the features
        styleMap: new OpenLayers.StyleMap({ 'default': {
            graphicZIndex: "${zIndex}"
        }}),
        // enable the indexer by setting zIndexing to true
        rendererOptions: {zIndexing: true}
    });

Here's my code for the icons:

    iconPrefix = mapView.iconProvider.prefixMapping(vehicle.get('icon'));
    imgUrl = mapView.iconProvider.getIconURL(iconPrefix, trackingStatus, position.get('track'));

    //Vehicle icon
    this.marker = new OpenLayers.Feature.Vector(point, null, {
        'graphicZIndex': this.zIndexState[trackingStatus],
        'externalGraphic': imgUrl,
        'pointRadius': 8,
        'cursor': 'pointer',
        'clickable': true,
        'title': label_text
    });

    this.marker.attributes = {
        'vehicleMapView': this
    };

    //tail label
    if (App.Settings.get('labels')) {
        this.marker.style = _.extend(this.marker.style, {
            pointerEvents: "visiblePainted",
            label: label_text,
            fontColor: trackingStatus !== 'inactive' ? "#222222" : "white",
            fontSize: "12px",
            fontFamily: "Courier New, monospace",
            fontWeight: "bold",
            labelAlign: "lm",
            labelXOffset:12,
            labelOutlineColor: this.statusToColor[trackingStatus],
            labelOutlineWidth: 2.5
        });
        this.marker.attributes = _.extend(this.marker.attributes, {label: label_text});

    }
    layer.addFeatures([this.marker]);

Answer 1

A few things you can try if you haven't already:

I noticed you enabled rendererOptions on your first vector but not your second. You could try adding that to your second layer too.

Also try removing the quotes from "${zIndex}" to simply ${zIndex} since it probably expects an integer.

Answer 2

The possible workaround is to change the text container to graphic container and it will obey the z-index on rendering text:

layer.renderer.textRoot = layer.renderer.vectorRoot;