CODEWITHSUNDEEP
textlabelopenlayersopenlayers-6
minisaurus
minisaurus

Reputation: 1196

OpenLayers text label fuzzy

I have an issue with OpenLayers (v 6.14.1 from npm) where the text on the text label is rather fuzzy.

See the attached image. Compare the text labels with the text in the dialog to the right.

map showing text labels

I create the map with pixelRatio: 1, but that shouldn't affect this (?)

  const map = new Map({
    target: div,
    view: new View({
      center: fromLonLat ([startLocation.lon, startLocation.lat]),
      zoom: startLocation.zoom,
      constrainResolution: true,
    }),
    pixelRatio: 1, //Important, otherwise tiles (WMS) with strange size will be requested
  });

I create the text label thus:

export default function (feature, resolution, options) {
  return new Text ({
          font: 'Normal 14px serif', // Normal 14px Arial
          text: getText (feature, resolution, options),
          fill: new Fill ({ color: 'black' }),
          stroke: new Stroke ({ color: 'white', width: 2 }),
          offsetX: -12,
          offsetY: -8,
          textAlign: 'right',
          textBaseline: 'bottom',
          placement: 'point',
  });
}

I've already tried other fonts (e.g. a sans-serif).

Upvotes: 0

Views: 356

Answers (1)

minisaurus
minisaurus

Reputation: 1196

I did as @Mike suggested - see their comment under the question - here's the result: enter image description here

I think the labels are now a fair bit sharper. Picture doesn't show this too well tho'.

Upvotes: 1

Related Questions