diff --git a/examples/webgl-points-layer.html b/examples/webgl-points-layer.html
index e411f88116..940a295d49 100644
--- a/examples/webgl-points-layer.html
+++ b/examples/webgl-points-layer.html
@@ -26,7 +26,9 @@ experimental: true
 <select id="style-select">
   <option value="icons">Icons</option>
   <option value="triangles">Triangles, color related to population</option>
+  <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>
 </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 d7ae46836a..73b023f469 100644
--- a/examples/webgl-points-layer.js
+++ b/examples/webgl-points-layer.js
@@ -36,6 +36,29 @@ const predefinedStyles = {
       rotateWithView: true
     }
   },
+  'triangles-latitude': {
+    symbol: {
+      symbolType: 'triangle',
+      size: [
+        'interpolate',
+        ['linear'],
+        ['get', 'population'],
+        40000, 12,
+        2000000, 24
+      ],
+      color: [
+        'interpolate',
+        ['linear'],
+        ['get', 'latitude'],
+        -60, '#ff14c3',
+        -20, '#ff621d',
+        20, '#ffed02',
+        60, '#00ff67'
+      ],
+      offset: [0, 0],
+      opacity: 0.95
+    }
+  },
   'circles': {
     symbol: {
       symbolType: 'circle',
@@ -57,6 +80,21 @@ const predefinedStyles = {
         2000000, 0.92
       ]
     }
+  },
+  'circles-zoom': {
+    symbol: {
+      symbolType: 'circle',
+      size: [
+        'interpolate',
+        ['exponential', 2.5],
+        ['zoom'],
+        2, 1,
+        14, 32
+      ],
+      color: '#240572',
+      offset: [0, 0],
+      opacity: 0.95
+    }
   }
 };