Rich text labels

examples/rich-text-labels.html

@@ -0,0 +1,9 @@
+---
+layout: example.html
+title: Rich Text Labels
+shortdesc: Rich text labels.
+docs: >
+  The labels in this map use different fonts to create clear context - an alphabetic sort key prefixing the state name in bold, and the population density in an extra line with a smaller font and italic.
+tags: "vector, rich-text, labels"
+---
+<div id="map" class="map"></div>

examples/rich-text-labels.js

@@ -0,0 +1,64 @@
+import GeoJSON from '../src/ol/format/GeoJSON.js';
+import Map from '../src/ol/Map.js';
+import VectorLayer from '../src/ol/layer/Vector.js';
+import VectorSource from '../src/ol/source/Vector.js';
+import View from '../src/ol/View.js';
+import {Fill, Stroke, Style, Text} from '../src/ol/style.js';
+
+const map = new Map({
+  target: 'map',
+  view: new View({
+    center: [0, 0],
+    zoom: 2,
+    extent: [-13882269, 2890586, -7456136, 6340207],
+    showFullExtent: true,
+  }),
+});
+
+const labelStyle = new Style({
+  text: new Text({
+    font: '13px Calibri,sans-serif',
+    fill: new Fill({
+      color: '#000',
+    }),
+    stroke: new Stroke({
+      color: '#fff',
+      width: 4,
+    }),
+  }),
+});
+const countryStyle = new Style({
+  fill: new Fill({
+    color: 'rgba(255, 255, 255, 0.6)',
+  }),
+  stroke: new Stroke({
+    color: '#319FD3',
+    width: 1,
+  }),
+});
+const style = [countryStyle, labelStyle];
+
+const vectorLayer = new VectorLayer({
+  background: 'white',
+  source: new VectorSource({
+    url: 'https://openlayers.org/data/vector/us-states.json',
+    format: new GeoJSON(),
+  }),
+  style: function (feature) {
+    labelStyle
+      .getText()
+      .setText([
+        feature.getId(),
+        'bold 13px Calibri,sans-serif',
+        ` ${feature.get('name')}`,
+        '',
+        '\n',
+        '',
+        `${feature.get('density')} people/mi²`,
+        'italic 11px Calibri,sans-serif',
+      ]);
+    return style;
+  },
+});
+
+map.addLayer(vectorLayer);

examples/vector-label-decluttering.html

@@ -2,8 +2,6 @@
 layout: example.html
 title: Vector Label Decluttering
 shortdesc: Label decluttering on polygons.
-resources:
-  - https://cdn.polyfill.io/v2/polyfill.min.js?features=Set"
 docs: >
   Decluttering is used to avoid overlapping labels. The `overflow: true` setting on the text style makes it so labels that do not fit within the bounds of a polygon are also considered for decluttering.
 tags: "vector, decluttering, labels"