OpenLayers text label overlap even with padding

Question

Ol docs state that Padding can be used on text labels for decluttering. ol/style/Text,

However my labels are still overlapping even when I indicate Padding.

Live example on codepen: https://codepen.io/sjvmarigerr/pen/oNNVMXb?editors=1010

Style Function:

  function styleFunction (feature) {
   return new ol.style.Style({
      text: new ol.style.Text({
        text: feature.get('PORT_NAME'),
        padding: [3, 3, 3, 3],
        font: "bold 15px sans-serif"
    })
  });};

Answer 1

Have you tried the declutter option??? If not give it a try, it might solve your problem. To do so, replace your vector layer config from this:

var vectorLayer = new ol.layer.Vector({
        source: vectorSource,
        style: styleFunction
      });

To this:

var vectorLayer = new ol.layer.Vector({
        source: vectorSource,
        style: styleFunction,
        declutter: true
      });

Remember that declutter should hide label if overlapping and will show label when zoom level is enough for not overlapping.