3

I have several point features displayed in OpenLayers that, when a background fill is applied and small to no padding is set, don't center their text values in the center of the block fill:

enter image description here

This same text centers a lot better when the padding values are much larger (10)

enter image description here

The documentation states that for point features align, placement and baseline should have the text in the center of the block, but I'm forcing it just in case (this still doesn't work)

textStyle.setFont(`${style.FontWeight} ${style.FontSize}px ${style.FontFamily}`);
textStyle.setFill(new Fill({ color: `rgba(${ style.Colour.R }, ${ style.Colour.G },${ style.Colour.B },${style.Colour.A / 255})` }));
textStyle.setTextAlign("center");
textStyle.setTextBaseline("middle");
textStyle.setPlacement("point");
textStyle.setPadding([2, 2, 2, 2]) //[10, 10, 10, 10] centers the text way better

The font string value I'm sending in evaluates to: 300 9px Roboto

Is there anything I should be doing to improve the centering of these text labels?

Improve this question
3
  • 1
    It looks better with more padding but the difference in pixels will be the same. The top to bottom effect is probably to allow for all characters in a font, some of which will go to the descent line which is below the baseline qph.fs.quoracdn.net/main-qimg-2029179af884f4271f62b4236c30833b If you know you have no such characters you can reduce the bottom padding. I'm not sure about the left to right issue but it might depend on the font (perhaps numeric characters are offset so decimal points align better).
    – Mike
    Commented Apr 18, 2020 at 12:27
  • So its the internal font dimensions not being used correctly by OpenLayers? I've never had an issue with centering Roboto text before. Should I just tweak the different padding values to get this to work?
    – Walter
    Commented Apr 18, 2020 at 19:03
  • Here is another approach using the canvas
    – JGH
    Commented Apr 20, 2020 at 12:59

1 Answer 1

Reset to default
2

Since I'm also very particular about display being exactly as I want it, I did a bit of testing.

With ol.Style.Text it's total mess. Where text is going to be displayed inside the text background box is dependent on font, browser and even position on the map. Below are examples from IE11, Forefox, Chrome and Chrome Edge. Centering is all over the place:

enter image description here

Obviously OpenLayers is no expert in these things, but it's not even intended to be.

Here comes to the rescue ol.Overlay, which can use HTML div element to dispay text. Since text rendering is in this case done by browser, results are as they should be in all browsers. They still depend on font, but at least they are the same across all browsers.

If overlay is defined like this:

<div id="myDiv" style="color:white; background-color: blue; padding: 0px 2px 0px 2px; font-family: Roboto; font-size: 12px;">F2</div>
.
.
.
var myOverlay = new ol.Overlay({
  element: document.getElementById('myDiv'),
});

then this is the result:

enter image description here

Improve this answer
4
  • Thanks for the suggestion, but I'm currently using vector tiles to retrieve and display the features. I don't think vector tiles support HTML elements, and it doesn't look like overlays function like tiles (sending x/y/z coords to a server on map pan/zoom)? Unless theres a specific tile source that supports HTML elements?
    – Walter
    Commented Apr 19, 2020 at 3:43
  • I don't see much difference between styling a point on a map with text style or displaying text overlay at that point, it' all happening on the client side. Try it and if then you have a question about it, post it as a new question.
    – TomazicM
    Commented Apr 19, 2020 at 7:54
  • I'm not just styling though, I'm using a vector tile source that populates a tile with geometry features through the tileLoadFunction. That takes care of loading/unloading and caching of data, as well as decluttering of the map when features collide. Switching to an overlay means I'll lose this built in functionality no?
    – Walter
    Commented Apr 19, 2020 at 10:41
  • I'm no OpenLayers expert, so I can't answer this without seeing your code. As I wrote, post a new question, include your existing code and ask if it's possible to replace text style with text overlay.
    – TomazicM
    Commented Apr 19, 2020 at 17:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.