Catch errors in style definition

Do not replace the layer if the style is invalid.
Thrown errors are caught and the layer will not be changed.

examples/webgl-points-layer.js

@@ -62,15 +62,23 @@ const map = new Map({
 
 let literalStyle;
 let pointsLayer;
-function refreshLayer() {
+function refreshLayer(newStyle) {
-  if (pointsLayer) {
+  try {
-    map.removeLayer(pointsLayer);
+    const previousLayer = pointsLayer;
-  }
     pointsLayer = new WebGLPointsLayer({
       source: vectorSource,
-    style: literalStyle
+      style: newStyle
     });
     map.addLayer(pointsLayer);
+
+    if (previousLayer) {
+      map.removeLayer(previousLayer);
+    }
+    literalStyle = newStyle;
+    return true;
+  } catch (e) {
+    return false;
+  }
 }
 
 function setStyleStatus(valid) {
@@ -83,11 +91,8 @@ editor.addEventListener('input', function() {
   const textStyle = editor.value;
   try {
     const newLiteralStyle = JSON.parse(textStyle);
-    if (JSON.stringify(newLiteralStyle) !== JSON.stringify(literalStyle)) {
+    const same = JSON.stringify(newLiteralStyle) === JSON.stringify(literalStyle);
-      literalStyle = newLiteralStyle;
+    setStyleStatus(same || refreshLayer(newLiteralStyle));
-      refreshLayer();
-    }
-    setStyleStatus(true);
   } catch (e) {
     setStyleStatus(false);
   }
@@ -97,9 +102,10 @@ const select = document.getElementById('style-select');
 select.value = 'circles';
 function onSelectChange() {
   const style = select.value;
-  literalStyle = predefinedStyles[style];
+  const newLiteralStyle = predefinedStyles[style];
-  editor.value = JSON.stringify(literalStyle, null, 2);
+  if (refreshLayer(newLiteralStyle)) {
-  refreshLayer();
+    editor.value = JSON.stringify(newLiteralStyle, null, 2);
+  }
   setStyleStatus();
 }
 onSelectChange();