From 33e24e9ce97cab9c34de3d4aec654c965d3216a3 Mon Sep 17 00:00:00 2001
From: Olivier Guyot <olivier.guyot@camptocamp.com>
Date: Fri, 20 Dec 2019 17:15:51 +0100
Subject: [PATCH] Updated webgl-points-layer example to add a style with
 rotation

Also made it so that the map re-renders continously, to be able to
use the ["time"] operator.
---
 examples/webgl-points-layer.html |  4 +++-
 examples/webgl-points-layer.js   | 36 ++++++++++++++++++++++++++++++++
 2 files changed, 39 insertions(+), 1 deletion(-)

diff --git a/examples/webgl-points-layer.html b/examples/webgl-points-layer.html
index edf8dd120e..0a9af85142 100644
--- a/examples/webgl-points-layer.html
+++ b/examples/webgl-points-layer.html
@@ -13,6 +13,8 @@ docs: >
        Note: those will be taken from the attributes provided to the renderer
      * `['var', 'varName']` fetches a value from the style variables, or 0 if undefined
      * `['time']` returns the time in seconds since the creation of the layer
+     * `['zoom']` returns the current zoom level
+     * `['resolution']` returns the current resolution
 
    * Math operators:
      * `['*', value1, value2]` multiplies `value1` by `value2`
@@ -57,7 +59,6 @@ docs: >
      * `['color', red, green, blue, alpha]` creates a `color` value from `number` values; the `alpha` parameter is
        optional; if not specified, it will be set to 1.
        Note: `red`, `green` and `blue` components must be values between 0 and 255; `alpha` between 0 and 1.
-
    Values can either be literals or another operator, as they will be evaluated recursively.
    Literal values can be of the following types:
     * `boolean`
@@ -76,6 +77,7 @@ experimental: true
   <option value="triangles-latitude">Triangles, color related to latitude</option>
   <option value="circles">Circles, size related to population</option>
   <option value="circles-zoom">Circles, size related to zoom</option>
+  <option value="rotating-bars">Rotating bars</option>
 </select>
 <textarea style="width: 100%; height: 20rem; font-family: monospace; font-size: small;" id="style-editor"></textarea>
 <small>
diff --git a/examples/webgl-points-layer.js b/examples/webgl-points-layer.js
index 3d3c980a41..1db76814c4 100644
--- a/examples/webgl-points-layer.js
+++ b/examples/webgl-points-layer.js
@@ -95,6 +95,35 @@ const predefinedStyles = {
       offset: [0, 0],
       opacity: 0.95
     }
+  },
+  'rotating-bars': {
+    symbol: {
+      symbolType: 'square',
+      rotation: ['*', [
+        'time'
+      ], 0.1],
+      size: ['array', 4, [
+        'interpolate',
+        ['linear'],
+        ['get', 'population'],
+        20000, 4,
+        300000, 28]
+      ],
+      color: [
+        'interpolate',
+        ['linear'],
+        ['get', 'population'],
+        20000, '#ffdc00',
+        300000, '#ff5b19'
+      ],
+      offset: ['array', 0, [
+        'interpolate',
+        ['linear'],
+        ['get', 'population'],
+        20000, 2,
+        300000, 14]
+      ]
+    }
   }
 };
 
@@ -167,3 +196,10 @@ function onSelectChange() {
 }
 onSelectChange();
 select.addEventListener('change', onSelectChange);
+
+// animate the map
+function animate() {
+  map.render();
+  window.requestAnimationFrame(animate);
+}
+animate();