Im having hard time trying to understand the z-indexing of the vector features.

When i was searching the web for info i found these links: .html .html and .html

What i did, was setting up styles like they are shown on first link:

 this.vectorsLayer = new OpenLayers.Layer.Vector("Vectors", {
                styleMap: new OpenLayers.StyleMap({
                    "default": {
                    'strokeColor': "#ff9933",
                    'strokeWidth': 5
                    },
                    "select": {
                        'strokeColor': "#3399ff"
                    }
                })
            }
        );
    this.carsLayer = new OpenLayers.Layer.Vector("Cars", {'rendererOptions': {yOrdering: false, zIndexing: true}});

     this.startIconStyle = {'externalGraphic':this.startIconUrl};

     this.parkIconStyle = {'externalGraphic':this.parkIconUrl};

     this.endIconStyle = {'externalGraphic':this.endIconUrl};

     this.defaultStyles = {
             //'label':getLabel(),
             'graphicZIndex':745,
            'graphicXOffset':-13,
            'graphicYOffset':-41,
            'graphicWidth':26,
            'graphicHeight':41,
            'strokeLinecap':'round',
            'strokeColor':"#000000",
            'strokeWidth':2,
            'strokeOpacity':1,
            'fillOpacity':1}
        //style of path that car has used 
    this.drivedStyle = {
            'strokeWidth': 3,
            'strokeOpacity': 1,
            'strokeColor': "#3399ff",
            'strokeDashstyle': "dash"
        }

And when i create markers, i do it like that:

var routePoint = this.points[this.routePos].clone();
var newstyleSite = OpenLayers.Util.extend(this.startIconStyle, this.defaultStyles ,OpenLayers.Feature.Vector.style['default']);
this.routePointFeature = new OpenLayers.Feature.Vector(routePoint, {}, newstyleSite);
this.vectorsLayer.addFeatures(this.routePointFeature);

And when i look at the z-index of that marker - z-index is set to auto not 745, which is in this.defaultStyles.

This brings us to 3rd link... which i cant understand at all, cause setting styles anywhere else gives exactly as much, as im getting right now.

Neither does

this.routePointFeature.attributes.zIndex = 745; 

change anything at all. Even though it apparently works on that first link/example.

How is this z-indexing supposed to work? And why doesnt it work in my case? What am i doing wrong? Or is something bugged there?

Edit: Alot of people have viewed this question and upvoted the answer. Yet i have had to deal with other stuff and have not worked with opelayers for a while now. Can some people who have seen this answer confirm that the answer works so i can accept it?

Alan

Im having hard time trying to understand the z-indexing of the vector features.

When i was searching the web for info i found these links: http://openlayers/dev/examples/ordering.html http://osgeo-org.1803224.n2.nabble./Bug-in-using-graphicZIndex-td2648665.html and http://osgeo-org.1803224.n2.nabble./graphicZIndex-of-vector-features-td3919627.html

What i did, was setting up styles like they are shown on first link:

 this.vectorsLayer = new OpenLayers.Layer.Vector("Vectors", {
                styleMap: new OpenLayers.StyleMap({
                    "default": {
                    'strokeColor': "#ff9933",
                    'strokeWidth': 5
                    },
                    "select": {
                        'strokeColor': "#3399ff"
                    }
                })
            }
        );
    this.carsLayer = new OpenLayers.Layer.Vector("Cars", {'rendererOptions': {yOrdering: false, zIndexing: true}});

     this.startIconStyle = {'externalGraphic':this.startIconUrl};

     this.parkIconStyle = {'externalGraphic':this.parkIconUrl};

     this.endIconStyle = {'externalGraphic':this.endIconUrl};

     this.defaultStyles = {
             //'label':getLabel(),
             'graphicZIndex':745,
            'graphicXOffset':-13,
            'graphicYOffset':-41,
            'graphicWidth':26,
            'graphicHeight':41,
            'strokeLinecap':'round',
            'strokeColor':"#000000",
            'strokeWidth':2,
            'strokeOpacity':1,
            'fillOpacity':1}
        //style of path that car has used 
    this.drivedStyle = {
            'strokeWidth': 3,
            'strokeOpacity': 1,
            'strokeColor': "#3399ff",
            'strokeDashstyle': "dash"
        }

And when i create markers, i do it like that:

var routePoint = this.points[this.routePos].clone();
var newstyleSite = OpenLayers.Util.extend(this.startIconStyle, this.defaultStyles ,OpenLayers.Feature.Vector.style['default']);
this.routePointFeature = new OpenLayers.Feature.Vector(routePoint, {}, newstyleSite);
this.vectorsLayer.addFeatures(this.routePointFeature);

And when i look at the z-index of that marker - z-index is set to auto not 745, which is in this.defaultStyles.

This brings us to 3rd link... which i cant understand at all, cause setting styles anywhere else gives exactly as much, as im getting right now.

Neither does

this.routePointFeature.attributes.zIndex = 745; 

change anything at all. Even though it apparently works on that first link/example.

How is this z-indexing supposed to work? And why doesnt it work in my case? What am i doing wrong? Or is something bugged there?

Edit: Alot of people have viewed this question and upvoted the answer. Yet i have had to deal with other stuff and have not worked with opelayers for a while now. Can some people who have seen this answer confirm that the answer works so i can accept it?

Alan

• javascript
• openlayers

1 Answer 1

You have to enable z-indexing for the vector layer.

this.vectorsLayer = new OpenLayers.Layer.Vector("Vectors", {
  styleMap: <your style map>,
  rendererOptions: { zIndexing: true }
});

Additionally, OpenLayers.Util.extend only takes two parameters, and the first parameter is the destination (i.e., the second parameter, source, will be bined into it). If you want to bine multiple objects, you can use jQuery.extend or multiple calls to OpenLayers.Util.extend:

OpenLayers.Util.extend(this.startIconStyle, OpenLayers.Feature.Vector.style['default'] );
OpenLayers.Util.extend( this.startIconStyle, this.defaultStyles );

or

jQuery.extend( this.startIconStyle, OpenLayers.Feature.Vector.style['default'], this.defaultStyles );

Both of these will result in this.startIconStyle containing the union of this.startIconStyle, OpenLayers.Feature.Vector.style['default'], and this.defaultStyles.

What you may really want is:

var newstyleSite = {};
jQuery.extend( newstyleSite,  OpenLayers.Feature.Vector.style['default'], this.defaultStyles, this.startIconStyle );