From 858f0fc0cc52f13641d7bf5f9cacc91eb753a878 Mon Sep 17 00:00:00 2001
From: Olivier Guyot <olivier.guyot@camptocamp.com>
Date: Thu, 26 Sep 2019 14:25:26 +0200
Subject: [PATCH] Update the webgl-points-layer example to reflect new
 possibilities

---
 examples/webgl-points-layer.html | 22 ++++++++++--
 examples/webgl-points-layer.js   | 58 +++++++++++++++++++++++++++-----
 2 files changed, 69 insertions(+), 11 deletions(-)

diff --git a/examples/webgl-points-layer.html b/examples/webgl-points-layer.html
index 673f0f454b..f6d692341e 100644
--- a/examples/webgl-points-layer.html
+++ b/examples/webgl-points-layer.html
@@ -3,13 +3,31 @@ layout: example.html
 title: WebGL points layer
 shortdesc: Using a WebGL-optimized layer to render a large quantities of points
 docs: >
-  <p>This example shows how to use a `WebGLPointsLayer` to show a large amount of points on the map.</p>
+  <p>This example shows how to use a <code>WebGLPointsLayer</code> to show a large amount of points on the map.</p>
+  <p>The layer is given a style in JSON format which allows a certain level of customization of the final reprensentation.</p>
+  <p>
+    The following operators can be used for numerical values:
+    <ul>
+      <li><code>["get", "attributeName"]</code> fetches a numeric attribute value for each feature</li>
+      <li><code>["+", value, value]</code> adds two values (which an either be numeric, or the result of another operator)</li>
+      <li><code>["*", value, value]</code> multiplies two values</li>
+      <li><code>["clamp", value, min, max]</code> outputs a value between <code>min</code> and <code>max</code></li>
+      <li><code>["stretch", value, low1, high1, low2, high2]</code> outputs a value which has been mapped from the
+        <code>low1..high1</code> range to the <code>low2..high2</code> range</li>
+    </ul>
+  </p>
 
 tags: "webgl, point, layer, feature"
 ---
 
 <div id="map" class="map"></div>
-<label>Current style used for the layer</label>
+<label>Choose a predefined style from the list below or edit it as JSON manually.</label><br>
+<select id="style-select">
+  <option>Predefined styles</option>
+  <option value="icons">Icons</option>
+  <option value="triangles">Triangles, color related to population</option>
+  <option value="circles">Circles, size related to population</option>
+</select>
 <textarea style="width: 100%; height: 20rem; font-family: monospace; font-size: small;" id="style-editor"></textarea>
 <small id="style-valid" style="display: none; color: forestgreen">
   ✓ style is valid
diff --git a/examples/webgl-points-layer.js b/examples/webgl-points-layer.js
index 203f826bfa..a625c1ba0a 100644
--- a/examples/webgl-points-layer.js
+++ b/examples/webgl-points-layer.js
@@ -11,15 +11,42 @@ const vectorSource = new Vector({
   format: new GeoJSON()
 });
 
-let literalStyle = {
-  symbol: {
-    size: 4,
-    color: '#3388FF',
-    rotateWithView: false,
-    offset: [0, 0],
-    opacity: 1
+const predefinedStyles = {
+  'icons': {
+    symbol: {
+      symbolType: 'image',
+      src: 'data/icon.png',
+      size: [18, 28],
+      color: 'lightyellow',
+      rotateWithView: false,
+      offset: [0, 9]
+    }
+  },
+  'triangles': {
+    symbol: {
+      symbolType: 'triangle',
+      size: 18,
+      color: [
+        ['stretch', ['get', 'population'], 20000, 300000, 0.1, 1.0],
+        ['stretch', ['get', 'population'], 20000, 300000, 0.6, 0.3],
+        0.6,
+        1.0
+      ],
+      rotateWithView: true
+    }
+  },
+  'circles': {
+    symbol: {
+      symbolType: 'circle',
+      size: ['stretch', ['get', 'population'], 40000, 2000000, 8, 28],
+      color: '#006688',
+      rotateWithView: false,
+      offset: [0, 0],
+      opacity: ['stretch', ['get', 'population'], 40000, 2000000, 0.6, 0.92]
+    }
   }
 };
+let literalStyle = predefinedStyles['circles'];
 let pointsLayer;
 
 const map = new Map({
@@ -36,6 +63,7 @@ const map = new Map({
 });
 
 const editor = document.getElementById('style-editor');
+editor.value = JSON.stringify(literalStyle, null, 2);
 
 function refreshLayer() {
   if (pointsLayer) {
@@ -46,7 +74,6 @@ function refreshLayer() {
     style: literalStyle
   });
   map.addLayer(pointsLayer);
-  editor.value = JSON.stringify(literalStyle, null, ' ');
 }
 
 function setStyleStatus(valid) {
@@ -55,8 +82,13 @@ function setStyleStatus(valid) {
 }
 
 editor.addEventListener('input', function() {
+  const textStyle = editor.value;
+  if (JSON.stringify(JSON.parse(textStyle)) === JSON.stringify(literalStyle)) {
+    return;
+  }
+
   try {
-    literalStyle = JSON.parse(editor.value);
+    literalStyle = JSON.parse(textStyle);
     refreshLayer();
     setStyleStatus(true);
   } catch (e) {
@@ -64,3 +96,11 @@ editor.addEventListener('input', function() {
   }
 });
 refreshLayer();
+
+const select = document.getElementById('style-select');
+select.addEventListener('change', function() {
+  const style = select.value;
+  literalStyle = predefinedStyles[style];
+  editor.value = JSON.stringify(literalStyle, null, 2);
+  refreshLayer();
+});