CODEWITHSUNDEEP
gisopenlayers
sjvmari
sjvmari

Reputation: 23

OpenLayers text label overlap even with padding

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"
    })
  });};

Upvotes: 2

Views: 2176

Answers (2)

pavlos
pavlos

Reputation: 3081

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.

Upvotes: 5

gpproton
gpproton

Reputation: 21

Due to zoom level i really don't see a way it will not overlap, but to make it more visible you can try the example below.

https://codepen.io/gpproton/pen/gOOEjJj?editors=1010

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 11px sans-serif",
            stroke: new ol.style.Stroke({
              color: '#ffffff',
              width: 1
            }),
            fill: new ol.style.Fill({
              color: '#000'
            })
        })
      });
};

Upvotes: 0

Related Questions