CODEWITHSUNDEEP
labelopenlayers
Stephen
Stephen

Reputation: 1183

OpenLayers - Vector Labels not showing on small features

I have a project where I use Openlayers in order to display features. On top of each of my features I show a label consisting of the description of that specific feature.

I have noticed that on thin features the vector label does not show. I do not know why this is happening because I have never set a value where the text should of should not be shown.

This is the function that I use in order to set the style and vector label of each feature:

style: (feature) => {
      return new Style({
        fill: new Fill({ color: 'rgba(43, 146, 190, 0.4)' }),
        stroke: new Stroke({
          width: 3,
          color: 'rgba(43, 146, 190, 1)',
        }),
        text: new Text({
          font: '13px Calibri,sans-serif',
          fill: new Fill({ color: '#fff' }),
          stroke: new Stroke({
            color: '#000',
            width: 2,
          }),
          text: feature.get('description'),
        }),
      });
    },

Here you can see that the label is set for most features except those that are small of very thin.

enter image description here

Upvotes: 0

Views: 551

Answers (1)

Stephen
Stephen

Reputation: 1183

I have already found the solution. In order to show the labels on small or thin features you need to set the overflow value of the text object to true.

So the function to generate a label based on a feature should be as follows:

    style: (feature) => {
      return new Style({
        fill: new Fill({ color: 'rgba(43, 146, 190, 0.4)' }),
        stroke: new Stroke({
          width: 3,
          color: 'rgba(43, 146, 190, 1)',
        }),
        text: new Text({
          font: '13px Calibri,sans-serif',
          fill: new Fill({ color: '#fff' }),
          stroke: new Stroke({
            color: '#000',
            width: 2,
          }),
          text: feature.get('description'),
          overflow: true,
        }),
      });
    },

Upvotes: 3

Related Questions