add text toggle for some cases

Author: jahow

cases/line-rendering/main.js

@@ -16,13 +16,18 @@ const source = new VectorSource({
 });
 
 /**
- *
  * @type {import('ol/style/flat.js').FlatStyle}
  */
-const style = {
+const baseStyle = {
   'stroke-width': ['get', 'width'],
   'stroke-color': ['get', 'color'],
   'stroke-line-dash': [15, 15],
+};
+
+/**
+ * @type {import('ol/style/flat.js').FlatStyle}
+ */
+const textStyle = {
   'text-value': ['get', 'label'],
   'text-font': 'bold 12px "Open Sans", "Arial Unicode MS", sans-serif',
   'text-fill-color': '#333',
@@ -44,18 +49,24 @@ function resetData(lineCount, curveComplexity, width) {
 function main() {
   createMap(
     (map) => {
+      const style = getGuiParameterValue('text')
+        ? {...baseStyle, ...textStyle}
+        : baseStyle;
       map.addLayer(new WebGLVectorLayer({source, properties: {style}}));
     },
     (map) => {
+      const style = getGuiParameterValue('text')
+        ? {...baseStyle, ...textStyle}
+        : baseStyle;
       map.addLayer(new VectorLayer({source, style}));
     },
   );
   initializeGui();
   registerGuiParameter(
     'count',
     'Line count',
-    [2, 100, 10],
-    2,
+    [2, 10000, 10],
+    10,
     (value, initial) => {
       if (initial) {
         return;
@@ -100,9 +111,21 @@ function main() {
     false,
     (value, initial) => {
       if (value) {
-        style['stroke-line-dash'] = [15, 15];
+        baseStyle['stroke-line-dash'] = [15, 15];
       } else {
-        delete style['stroke-line-dash'];
+        delete baseStyle['stroke-line-dash'];
+      }
+      regenerateLayer();
+    },
+  );
+  registerGuiParameter(
+    'text',
+    'Show labels',
+    ['yes', 'no'],
+    false,
+    (value, initial) => {
+      if (initial) {
+        return;
       }
       regenerateLayer();
     },

cases/point-rendering/main.js

@@ -7,6 +7,7 @@ import {
   generatePoints,
   getGuiParameterValue,
   initializeGui,
+  regenerateLayer,
   registerGuiParameter,
 } from '../common.js';
 
@@ -17,12 +18,18 @@ const source = new VectorSource({
 /**
  * @type {import('ol/style/flat.js').FlatStyle}
  */
-const style = {
+const baseStyle = {
   // This has to be fixed upstream
   'circle-radius': ['get', 'radius'],
   'circle-fill-color': ['get', 'color'],
   'circle-stroke-color': 'gray',
   'circle-stroke-width': 0.5,
+};
+
+/**
+ * @type {import('ol/style/flat.js').FlatStyle}
+ */
+const textStyle = {
   'text-value': ['get', 'label'],
   'text-font': 'bold 12px "Open Sans", "Arial Unicode MS", sans-serif',
   'text-fill-color': '#333',
@@ -43,9 +50,15 @@ function resetData(count, radius) {
 function main() {
   createMap(
     (map) => {
+      const style = getGuiParameterValue('text')
+        ? {...baseStyle, ...textStyle}
+        : baseStyle;
       map.addLayer(new WebGLVectorLayer({source, properties: {style}}));
     },
     (map) => {
+      const style = getGuiParameterValue('text')
+        ? {...baseStyle, ...textStyle}
+        : baseStyle;
       map.addLayer(new VectorLayer({source, style}));
     },
   );
@@ -74,6 +87,18 @@ function main() {
       /** @type {number} */ (value),
     );
   });
+  registerGuiParameter(
+    'text',
+    'Show labels',
+    ['yes', 'no'],
+    false,
+    (value, initial) => {
+      if (initial) {
+        return;
+      }
+      regenerateLayer();
+    },
+  );
 
   resetData(
     /** @type {number} */ (getGuiParameterValue('count')),

cases/polygon-rendering/main.js

@@ -18,7 +18,7 @@ const source = new VectorSource({
 /**
  * @type {import('ol/style/flat.js').FlatStyle}
  */
-const style = {
+const baseStyle = {
   'fill-color': ['get', 'color'],
   'text-value': ['get', 'label'],
   'text-font': 'bold 12px "Open Sans", "Arial Unicode MS", sans-serif',
@@ -27,6 +27,18 @@ const style = {
   'text-stroke-width': 2,
 };
 
+/**
+ * @type {import('ol/style/flat.js').FlatStyle}
+ */
+const textStyle = {
+  '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,
+};
+
 /**
  * @param {number} count The number of features to create.
  * @param {number} numVertices Number of vertices for polygons
@@ -38,9 +50,15 @@ function resetData(count, numVertices) {
 function main() {
   createMap(
     (map) => {
+      const style = getGuiParameterValue('text')
+        ? {...baseStyle, ...textStyle}
+        : baseStyle;
       map.addLayer(new WebGLVectorLayer({source, properties: {style}}));
     },
     (map) => {
+      const style = getGuiParameterValue('text')
+        ? {...baseStyle, ...textStyle}
+        : baseStyle;
       map.addLayer(new VectorLayer({source, style}));
     },
   );
@@ -82,11 +100,23 @@ function main() {
     true,
     (value, initial) => {
       if (value) {
-        style['stroke-width'] = 2;
-        style['stroke-color'] = 'gray';
+        baseStyle['stroke-width'] = 2;
+        baseStyle['stroke-color'] = 'gray';
       } else {
-        delete style['stroke-width'];
-        delete style['stroke-color'];
+        delete baseStyle['stroke-width'];
+        delete baseStyle['stroke-color'];
+      }
+      regenerateLayer();
+    },
+  );
+  registerGuiParameter(
+    'text',
+    'Show labels',
+    ['yes', 'no'],
+    false,
+    (value, initial) => {
+      if (initial) {
+        return;
       }
       regenerateLayer();
     },

cases/vector-tiles-rendering/main.js

@@ -26,6 +26,21 @@ const format = new GeoJSON({featureProjection: 'EPSG:3857'});
 
 const defaultStylesCount = 10;
 
+/**
+ * @type {Array<import('ol/style/flat.js').Rule>}
+ */
+const textStyles = [
+  {
+    style: {
+      '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,
+    },
+  },
+];
+
 /**
  * @type {function(): Array<import('ol/style/flat.js').Rule>|import('ol/style/flat.js').FlatStyle}
  */
@@ -62,7 +77,7 @@ function generateStyle() {
       'circle-stroke-width': 2,
     };
   }
-  return new Array(totalStylesCount).fill(0).map((_, i) => {
+  const colorStyles = new Array(totalStylesCount).fill(0).map((_, i) => {
     const color = getRandomColor();
     return {
       style: {
@@ -83,6 +98,9 @@ function generateStyle() {
       filter: ['==', ['get', 'propValue'], i],
     };
   });
+  return getGuiParameterValue('text')
+    ? [...colorStyles, ...textStyles]
+    : colorStyles;
 }
 
 /**
@@ -322,6 +340,18 @@ function main() {
       source.setKey(Date.now().toString());
     },
   );
+  registerGuiParameter(
+    'text',
+    'Show labels',
+    ['yes', 'no'],
+    false,
+    (value, initial) => {
+      if (initial) {
+        return;
+      }
+      regenerateLayer();
+    },
+  );
 }
 
 main();