Edit

Vector Labels - Justify Text

vector82 openstreetmap23 label4

Example of text justification within a label.

This example showcases how the text can be justified within the label box. By default, the text is justified according to the textAlign option. However, this option justifies also the label itself according to textAlign setting. To decouple the label placement from text placement (within the label box) use justify.

main.js
import Collection from 'ol/Collection.js';
import Feature from 'ol/Feature.js';
import Map from 'ol/Map.js';
import View from 'ol/View.js';
import GeoJSON from 'ol/format/GeoJSON.js';
import Point from 'ol/geom/Point.js';
import TileLayer from 'ol/layer/Tile.js';
import VectorLayer from 'ol/layer/Vector.js';
import OSM from 'ol/source/OSM.js';
import VectorSource from 'ol/source/Vector.js';
import CircleStyle from 'ol/style/Circle.js';
import Fill from 'ol/style/Fill.js';
import Stroke from 'ol/style/Stroke.js';
import Style from 'ol/style/Style.js';
import Text from 'ol/style/Text.js';

const features = [
  {
    geometry: new Point([-8300000, 6095000]),
    textAlign: 'left',
  },
  {
    geometry: new Point([-8150000, 6095000]),
    textAlign: 'center',
  },
  {
    geometry: new Point([-8000000, 6095000]),
    textAlign: 'right',
  },
  {
    geometry: new Point([-8300000, 6025000]),
    textAlign: 'left',
    justify: 'center',
  },
  {
    geometry: new Point([-8150000, 6025000]),
    textAlign: 'center',
    justify: 'center',
  },
  {
    geometry: new Point([-8000000, 6025000]),
    textAlign: 'right',
    justify: 'center',
  },
  {
    geometry: new Point([-8300000, 5955000]),
    textAlign: 'left',
    justify: 'left',
  },
  {
    geometry: new Point([-8150000, 5955000]),
    textAlign: 'center',
    justify: 'left',
  },
  {
    geometry: new Point([-8000000, 5955000]),
    textAlign: 'right',
    justify: 'left',
  },
];

function createStyle({textAlign, justify = undefined}) {
  return new Style({
    image: new CircleStyle({
      radius: 10,
      fill: new Fill({color: 'rgba(255, 0, 0, 0.1)'}),
      stroke: new Stroke({color: 'red', width: 1}),
    }),
    text: new Text({
      font: '16px sans-serif',
      textAlign,
      justify,
      text:
        `Justify text inside box\ntextAlign: ${textAlign}` +
        (justify ? `\njustify: ${justify}` : ''),
      fill: new Fill({
        color: [255, 255, 255, 1],
      }),
      backgroundFill: new Fill({
        color: [168, 50, 153, 0.6],
      }),
      padding: [2, 2, 2, 2],
    }),
  });
}

const vectorPoints = new VectorLayer({
  source: new VectorSource({
    features: new Collection(
      features.map((featureOptions) => {
        const feature = new Feature({
          geometry: featureOptions.geometry,
        });
        feature.setStyle(createStyle(featureOptions));
        return feature;
      }),
    ),
    format: new GeoJSON(),
  }),
});

const map = new Map({
  layers: [
    new TileLayer({
      source: new OSM(),
    }),
    vectorPoints,
  ],
  target: 'map',
  view: new View({
    center: [-8150000, 6025000],
    zoom: 8,
  }),
});
index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Vector Labels - Justify Text</title>
    <link rel="stylesheet" href="node_modules/ol/ol.css">
    <style>
      .map {
        width: 100%;
        height: 400px;
      }
    </style>
  </head>
  <body>
    <div id="map" class="map"></div>

    <script type="module" src="main.js"></script>
  </body>
</html>
package.json
{
  "name": "vector-labels-justify-text",
  "dependencies": {
    "ol": "10.5.0"
  },
  "devDependencies": {
    "vite": "^3.2.3"
  },
  "scripts": {
    "start": "vite",
    "build": "vite build"
  }
}