I've got a layer with nodes features on which I may want to display two images, a main one and a background one. This page : http://openlayers.org/dev/examples/marker-shadow.html shows what I want: the shadow is under the golden item (it's more obvious when we move the png with a dev tool). For this, they use:
// Set the external graphic and background graphic images. externalGraphic: "../img/marker-gold.png", backgroundGraphic: "./img/marker_shadow.png", // Makes sure the background graphic is placed correctly relative // to the external graphic. backgroundXOffset: 0, backgroundYOffset: -7, // Set the z-indexes of both graphics to make sure the background // graphics stay in the background (shadows on top of markers looks // odd; let's not do that). graphicZIndex: MARKER_Z_INDEX, //11 backgroundGraphicZIndex: SHADOW_Z_INDEX, //10
Obviously it's not about real CSS z-index since the DOM element both have a
z-index: auto in the end. But whatever, I wanna try this myself (not at the layer construction but afterwards):
style["backgroundGraphic"] = './img/marker-shadow.png'; style["externalGraphic"] ='./img/marker-gold.png'; style['graphicZIndex'] = 1; style['backgroundGraphicZIndex'] = style['graphicZIndex']-1;
The images are displayed. But while one could think the backgroundGraphic would automatically go under the externalGraphic, the contrary actually happens. Fine, I'll just add the z-index thing:
style['graphicZIndex'] = 1; style['backgroundGraphicZIndex'] = style['graphicZIndex']-1;
But it changes absolutely nothing. How do I get my background underneath?