In OpenLayers, Getting 1 Layer to stay over the other. (Z-Axis)

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.

Answer 2

So you want highlight a marker with different color whenever a point is selected? Managing it with 2 layers is really an overkill. You should be able to define a vector layer with style like this:

var currentPointLayer = new OpenLayers.Layer.Vector("Selected Point Layer", {
    styleMap: new OpenLayers.StyleMap({
        externalGraphic : '${markerUrl}',
        pointRadius: 20
})});
map.addLayer(currentPointLayer);

Then you have to set attribute 'markerUrl' of every feature(ie feature.attributes.markerUrl) to 'marker-red.png' - that would be initial state of all features.

Then whenever feature is selected you change markerUrl attribute of selected feature to 'marker-blue.png' and(important) call

currentPointLayer.redraw();

Obviously you'll also have to set previously selected feature to 'marker-red.png' when new feature is selected.

Answer 3

in your init_map() function you're adding the red marker layer before the blue ones. Try switching them.

preparePointsOnMap(map, points); //red marker

if (!map.getCenter()) {
    map_set_center(lon, lat, mZoom); //blue marker
}