CODEWITHSUNDEEP
javascriptgisopenlayers
brokethebuildagain
brokethebuildagain

Reputation: 2201

OpenLayers Vector Layer z-ordering on feature labels

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.

OpenLayers incorrect z-ordering

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]);

Upvotes: 3

Views: 2779

Answers (2)

Dummas
Dummas

Reputation: 1

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;

Upvotes: 0

capdragon
capdragon

Reputation: 14899

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.

Upvotes: 0

Related Questions