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,
 };
 
 /**

cases/vector-tiles-rendering/main.js

@@ -115,6 +115,7 @@ function makeData(
     (width + height) / 4 / (Math.ceil(Math.sqrt(countPoints)) + 1);
 
   // Generate polygons on the left bottom corner
+  let number = 1;
   for (let lon = bbox[0] + gridSpacing; lon < centerLon; lon += gridSpacing) {
     for (let lat = bbox[1] + gridSpacing; lat < centerLat; lat += gridSpacing) {
       const buffer = (0.3 + Math.random() * 0.2) * gridSpacing;
@@ -129,11 +130,13 @@ function makeData(
         polygonCoordinates.push([x, y]);
       }
       polygonCoordinates.push(polygonCoordinates[0]);
+      const label = `polygon n°${number++}`;
 
       features.push({
         type: 'Feature',
         properties: {
           propValue: propValues[Math.floor(Math.random() * propValues.length)],
+          label,
         },
         geometry: {
           type: 'Polygon',
@@ -148,6 +151,7 @@ function makeData(
     type: 'Feature',
     properties: {
       propValue: propValues[Math.floor(Math.random() * propValues.length)],
+      label: '',
     },
     geometry: {
       type: 'LineString',
@@ -162,14 +166,17 @@ function makeData(
   });
 
   // Generate points on the right top corner
+  number = 1;
   for (let lon = centerLon + gridSpacing; lon < bbox[2]; lon += gridSpacing) {
     for (let lat = bbox[1] + gridSpacing; lat < centerLat; lat += gridSpacing) {
       const point = [lon, lat];
+      const label = `point n°${number++}`;
 
       features.push({
         type: 'Feature',
         properties: {
           propValue: propValues[Math.floor(Math.random() * propValues.length)],
+          label,
         },
         geometry: {
           type: 'Point',
@@ -190,6 +197,7 @@ function makeData(
    */
   let singleCurve = []; // Create a singleCurve array outside the loop
 
+  number = 1;
   for (let j = 0; j < countLines; j++) {
     const coordinates = [];
     for (let i = 0; i < periodCount; i++) {
@@ -207,11 +215,13 @@ function makeData(
       }
       coordinates.push(...singleCurve);
     }
+    const label = `line n°${number++}`;
 
     features.push({
       type: 'Feature',
       properties: {
         propValue: propValues[Math.floor(Math.random() * propValues.length)],
+        label,
       },
       geometry: {
         type: 'LineString',

package-lock.json

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