Openlayers 3 Offset RegularShape

Question

For clustered features I would like to make the following style in OL3:

A square, and on top of it another smaller square at the right-top corner. The bigger square would hold the symbol, and the smaller square would hold the number of the clustered features.

Similar to this

Is it possible to achieve this? In the API I've seen that ol.style.Icon and ol.style.Text has anchor and offset properties, but not RegularShape...

Av

Answer 1

I have eventually overcome on this problem with using a single png image which included the square AND the smaller square, too, and overlayed the dynamic text on it, like this:

    var clusterStyle = [new ol.style.Style({
        image: new ol.style.Icon({
          src: clustericon.png
        }),
        text: new ol.style.Text({
          text: feature.get('features').length.size.toString(),
          offsetY: -18,
          offsetX: 18,
          font: '12px Arial',
          fill: new ol.style.Fill({
            color: '#fff'
          }),
          scale: 1
        }),
        zIndex: 20
      }), new ol.style.Style({
        image: new ol.style.Icon({
          src: 'overlayicon.png'
        }),
        zIndex: 21
      })];

You can also insert an overlay image on it. Hope it helps you anyways

Av