0

I managed to use Natural Earth data to generate vector tiles, and serve it to the MapBox. I also use geoJSON data to show labels with country names.

Now, as you can see on these 2 animations - when zooming in the OpenLayers, labels have the same size, and no fade-in animation as it is the case in the MapBox example (among other things - formatting is also not in one line but in multiple lines etc.).

enter image description here enter image description here

Is there any existing style for OL or some tutorial how to achieve this same effect?

Bojan Vukasovic
  • 2,054
  • 22
  • 43
  • Splitting lines can be done in the style function (`stringDivider` in https://openlayers.org/en/latest/examples/vector-labels.html) For smoother animation try the `updateWhileAnimating` and `updateWhileInteracting` options https://openlayers.org/en/latest/apidoc/module-ol_layer_Vector-VectorLayer.html – Mike Aug 19 '21 at 10:42
  • You might be able to make use of the `wrapText` function used in https://github.com/openlayers/ol-mapbox-style/blob/master/src/stylefunction.js – Mike Aug 19 '21 at 10:55
  • Example using ol-mapbox-style only to produce a style for wrapped text https://codesandbox.io/s/vector-layer-forked-ok65q?file=/main.js - but if you already have a full mapbox style you could use ol-mapbox-style to style the whole map. – Mike Aug 19 '21 at 16:50
  • Thanks. I will use that stringDivider. I guess even text size could be calculated based on country size. The only thing I'm missing now is that fade-in animation when text shows (since for me now it is either visible or hidden) – Bojan Vukasovic Aug 19 '21 at 18:19

0 Answers0