Question

I have this map, which I show some red markers over and whenever a location is chosen from a list the current marker is painted blue and the map centers around it.

I achieve this by having 2 layers – one for the red markers which is drawn at the beginning and one which is redrawn whenever a point is chosen from the list.

I would like to define that the red marker layer will always appear above the blue marker layer. Effectively hiding the “current marker” indication. (The reason for this is complicated)

This link is to a page that works the way I don’t want. The blue layer is on top of the red layer.
I tried to reverse the order by defining the graphicZIndex property for both the vector and in the layers.addFeature function.

I’m obviously doing something wrong and maybe someone can point me to what it is.
The way I define the z-axis:

        currentPointLayer = new OpenLayers.Layer.Vector("Selected Point Layer", {
            style : {
                externalGraphic : 'marker-blue.png',
                graphicHeight : 15,
                graphicWidth : 15,
                graphicZIndex : 1
            },
            rendererOptions: { zIndexing: true }
        });

Again, I want to hide the blue marker behind the red markers layer.

Answer 1

You can either change the order of your layers as ilia choly stated.

Or, if you want to use zIndexing, you have to put all features into one layer, because zIndexing is only done within a single layer.

Have a look at this simple example about styling, that also uses zIndexing. It randomly creates some points in the map. If you zoom out, chances are good that two circles overlap and if you hoover over one, it will be highlighted and put on top.