Openlayers Feature Style zIndex

I have a circle, which has an animation running on it, here is a quick hacked jsFiddle to demonstrate.

http://jsfiddle.net/qpLza4a0/

I can not seem to get the zIndex property working on the circle (not the circle animation), it appears that the animation is on top of the circle.

Where should I put the zIndex property to get the circle on top?

Answer

The animation always runs after the placement of the marker regardless of the zIndex. So you will need to draw the marker after the animation. I stored the marker style so the event-handler can use it.

var mstyle=new ol.style.Style({
  image: new ol.style.Circle({
    radius: 5,
    fill: new ol.style.Fill({
      color: "#fff"
    }),
    stroke: new ol.style.Stroke({
      color: "blue",
      width: 2
    }),
  }),
  zIndex: 100
});
marker.setStyle(mstyle);

And changed the postcompose event-handler to draw the marker over/after the animation.

function pulsate(map, color, feature, duration) {
        var start = new Date().getTime();

        var key = map.on('postcompose', function(event) {
            var vectorContext = event.vectorContext;
            var frameState = event.frameState;
            var flashGeom = feature.getGeometry().clone();
            var elapsed = frameState.time - start;
            var elapsedRatio = elapsed / duration;
            var radius = ol.easing.easeOut(elapsedRatio) * 35 + 5;
            var opacity = ol.easing.easeOut(1 - elapsedRatio);
            var fillOpacity = ol.easing.easeOut(0.5 - elapsedRatio)

            vectorContext.setStyle(new ol.style.Style({
                image: new ol.style.Circle({
                    radius: radius,
                    snapToPixel: false,
                    fill: new ol.style.Fill({
                          color: 'rgba(119, 170, 203, ' + fillOpacity + ')',
                    }),
                    stroke: new ol.style.Stroke({
                        color: 'rgba(119, 170, 203, ' + opacity + ')',
                        width: 2 + opacity
                    })
                })
            }));

            vectorContext.drawGeometry(flashGeom);

            // Draw the marker (again)
            vectorContext.setStyle(mstyle);
            vectorContext.drawGeometry(feature.getGeometry());

            if (elapsed > duration) {
                ol.Observable.unByKey(key);
                pulsate(map, color, feature, duration); // recursive function
            }

            map.render();
        });
    }

Two new lines:

    vectorContext.setStyle(mstyle);
    vectorContext.drawGeometry(feature.getGeometry());

set the undisturbed marker-style and redraw the feature geometry.

See this jsFiddle…