OpenLayers 3 point text zIndex

Question

Text does not seem to respect the zIndex of the image. If there are more than one point in the same coordinate (stacked points) then the text for each point is renderer on top of each other and breaks the design.

Is there a way that the image and text respect their same zIndex position?

I found this OpenLayers 3 Image and Text style zindex but it doesn't provide a solution

This is my code:

new ol.style.Style({
            image: new ol.style.Circle({
                radius: 3,
                scale: 0.5,
                fill: new ol.style.Fill({
                    color: 'green'
                })
            }),
            text: new ol.style.Text({
                font: 'helvetica,sans-serif',
                text: 'here is the text',
                fill: new ol.style.Fill({
                    color: 'white'
                })
            }),
            zIndex: 10
        })

Answer 1

When stacking point symbols with text, you need to give every point its own (increasing) zIndex if you want the text to stick to the symbol. See http://jsfiddle.net/8g1vayvc/ . You can also do that in a style function:

var myStyle = new ol.style.Style({/*...*/});
var zIndex = 0;
function styleFunction(feature, resolution) {
  myStyle.setZIndex(zIndex++);
  return myStyle;
}