[OpenLayers-Dev] Bug in using graphicZIndex ?

Vivien Deparday vivien.deparday at gmail.com
Thu Apr 16 14:49:58 EDT 2009

Hi all,

I'm trying to set different graphicZIndex for my polygons, lines, and 
points so that my points are on top of my lines which are on top of my 
polygons. All the features are within the same vector layer (code 
below). This layer has a stylemap with a context property to return 
different values of the graphicZIndex property according to the geometry 
When, I inspect the dom with firebug, I can see that each feature has 
the right graphicZIndex. However, in the display, the z order is still 
the same as the drawing order (some features with bigger graphicZIndex 
are under some with a lower).
If I set "rendererOptions: {yOrdering: true}", then it works.
The same thing can be reproduced in the ordering example 
(http://openlayers.org/dev/examples/ordering.html). If you comment  the 
yOrdering: true, the red features are not ordered according to their 
z-index but only according the drawing order.

However, if I correctly understand the documentation and with a quick 
look at the code in /renderer/elements.js, the z ordering is supposed to 
be activated by default ( to use the Z_ORDER_DRAWING_ORDER  comparing 
method) and the yOrdering property is supposed to be necessary only for 
y ordering (to use the Z_ORDER_Y_ORDER  comparing method).
Am I misunderstanding something in the way it should work? or is there a 
bug? and yOrdering: true should not be necessary for zOrdering?

Here is the stylemap and the layer creation code:
        var styleMap = new OpenLayers.StyleMap({
            'default': new OpenLayers.Style({
                fillColor: '${fillColor}',
                fillOpacity: 0.8,
                 strokeColor: '${strokeColor}',
                 strokeWidth: 2,
                 strokeOpacity: 0.8,
                externalGraphic: "${getChartURL}",
                graphicZIndex: "${getZIndex}"
                    fillColor: function(feature){
                        return feature.cluster ? '#00c600' : '#fde500';
                    strokeColor: function(feature){
                        return feature.cluster ? '#096d09' : '#e76e1b';
                    getChartURL: function(feature){
                        return '';
                    getZIndex: function(feature){
                        var zIndex=map.Z_INDEX_BASE['Overlay'];
                        if(feature.geometry.CLASS_NAME === 
                            var zIndex = map.Z_INDEX_BASE['Overlay']+1;
                        else if (feature.geometry.CLASS_NAME === 
                            var zIndex = map.Z_INDEX_BASE['Overlay']+2;
                        else if (feature.geometry.CLASS_NAME === 
                            var zIndex = map.Z_INDEX_BASE['Overlay'];
                        return zIndex;
    vectors = new OpenLayers.Layer.Vector("Assets", {
            styleMap: styleMap,
            strategies: [
                    new OpenLayers.Strategy.Cluster({distance:40, 
threshold:2, autoActivate:false, clusterOnActivate: true}),
                    new OpenLayers.Strategy.Fixed()
                protocol: new OpenLayers.Protocol.HTTP({
                    url: "http://localhost:8080/geoserver/wfs",
                    params: {
                        request: "GetFeature",
                        typename: "mcviz:assets_json",
                        outputformat: "json"
                    } ,
                    format: new OpenLayers.Format.GeoJSON({
                        externalProjection: new 
                        internalProjection: map.getProjectionObject()    
            eventListeners: {
                'loadend': onLoadEnd
             // Works with it, does not work without
            rendererOptions: {yOrdering: true}



More information about the Dev mailing list