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?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.