Add labels on geometries & show them in the various examples

Author: jahow

cases/common.js

@@ -6,6 +6,7 @@ import {
   trackPerformance,
   // @ts-ignore
 } from '@camptocamp/rendering-analyzer';
+import randomName from '@scaleway/random-name';
 import lilGui from 'lil-gui';
 import Map from 'ol/Map.js';
 import View from 'ol/View.js';
@@ -164,11 +165,13 @@ export function generatePolygons(count, numVertices) {
       // Close the polygon by adding the first vertex at the end
       polygonCoordinates.push(polygonCoordinates[0]);
 
+      const label = `This area covers ${randomName()}`;
       features.push({
         type: 'Feature',
         properties: {
           color: getRandomPaletteColor(),
           ratio: Math.round(Math.random() * 100),
+          label,
         },
         geometry: {
           type: 'Polygon',
@@ -197,11 +200,13 @@ export function generatePoints(count, radius) {
   for (let lon = -180; lon < 180 - size / 4; lon += size) {
     for (let lat = -90; lat < 90 - size / 4; lat += size) {
       const buffer = (0.3 + Math.random() * 0.2) * size * (radius / 5); // Increase the buffer for larger points
+      const label = randomName();
       features.push({
         type: 'Feature',
         properties: {
           color: getRandomPaletteColor(),
           radius,
+          label,
         },
         geometry: {
           type: 'Point',
@@ -254,11 +259,13 @@ export function generateLines(lineCount, curveComplexity, width) {
       }
       coordinates.push(...singleCurve);
     }
+    const label = `This leads to ${randomName()}`;
     features.push({
       type: 'Feature',
       properties: {
         color: getRandomPaletteColor(), // Use deterministic color selection
         width,
+        label,
       },
       geometry: {
         type: 'LineString',

cases/line-rendering/main.js

@@ -23,6 +23,13 @@ const style = {
   'stroke-width': ['get', 'width'],
   'stroke-color': ['get', 'color'],
   'stroke-line-dash': [15, 15],
+  'text-value': ['get', 'label'],
+  'text-font': 'bold 12px "Open Sans", "Arial Unicode MS", sans-serif',
+  'text-fill-color': '#333',
+  'text-stroke-color': 'rgba(255,255,255,0.8)',
+  'text-stroke-width': 2,
+  'text-placement': 'line',
+  'text-repeat': 2000,
 };
 
 /**

cases/point-rendering/main.js

@@ -19,11 +19,16 @@ const source = new VectorSource({
  */
 const style = {
   // This has to be fixed upstream
-  // @ts-ignore
   'circle-radius': ['get', 'radius'],
   'circle-fill-color': ['get', 'color'],
   'circle-stroke-color': 'gray',
   'circle-stroke-width': 0.5,
+  'text-value': ['get', 'label'],
+  'text-font': 'bold 12px "Open Sans", "Arial Unicode MS", sans-serif',
+  'text-fill-color': '#333',
+  'text-stroke-color': 'rgba(255,255,255,0.8)',
+  'text-stroke-width': 2,
+  'text-offset-y': -12,
 };
 
 /**

cases/polygon-rendering/main.js

@@ -20,6 +20,11 @@ const source = new VectorSource({
  */
 const style = {
   'fill-color': ['get', 'color'],
+  'text-value': ['get', 'label'],
+  'text-font': 'bold 12px "Open Sans", "Arial Unicode MS", sans-serif',
+  'text-fill-color': '#333',
+  'text-stroke-color': 'rgba(255,255,255,0.8)',
+  'text-stroke-width': 2,
 };
 
 /**

package-lock.json

@@ -27,6 +27,7 @@
   },
   "dependencies": {
     "@camptocamp/rendering-analyzer": "^0.2.0",
+    "@scaleway/random-name": "^5.1.2",
     "ol": "10.6.1"
   }
 }