Display error message instead of 'style not valid yet...'

examples/webgl-points-layer.html

@@ -29,10 +29,8 @@ experimental: true
   <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
+<small>
+  <span id="style-valid" style="display: none; color: forestgreen">✓ style is valid</span>
+  <span id="style-invalid" style="display: none; color: grey">✗ <span>style not yet valid...</span></span>
+  &nbsp;
 </small>
-<small id="style-invalid" style="display: none; color: grey">
-  ✗ style not yet valid...
-</small>
-<small>&nbsp;</small>

examples/webgl-points-layer.js

@@ -63,27 +63,26 @@ const map = new Map({
 let literalStyle;
 let pointsLayer;
 function refreshLayer(newStyle) {
-  try {
-    const previousLayer = pointsLayer;
-    pointsLayer = new WebGLPointsLayer({
-      source: vectorSource,
-      style: newStyle
-    });
-    map.addLayer(pointsLayer);
+  const previousLayer = pointsLayer;
+  pointsLayer = new WebGLPointsLayer({
+    source: vectorSource,
+    style: newStyle
+  });
+  map.addLayer(pointsLayer);
 
-    if (previousLayer) {
-      map.removeLayer(previousLayer);
-    }
-    literalStyle = newStyle;
-    return true;
-  } catch (e) {
-    return false;
+  if (previousLayer) {
+    map.removeLayer(previousLayer);
   }
+  literalStyle = newStyle;
 }
 
-function setStyleStatus(valid) {
-  document.getElementById('style-valid').style.display = valid === true ? 'initial' : 'none';
-  document.getElementById('style-invalid').style.display = valid === false ? 'initial' : 'none';
+const spanValid = document.getElementById('style-valid');
+const spanInvalid = document.getElementById('style-invalid');
+function setStyleStatus(errorMsg) {
+  const isError = typeof errorMsg === 'string';
+  spanValid.style.display = errorMsg === null ? 'initial' : 'none';
+  spanInvalid.firstElementChild.innerText = isError ? errorMsg : '';
+  spanInvalid.style.display = isError ? 'initial' : 'none';
 }
 
 const editor = document.getElementById('style-editor');
@@ -91,10 +90,12 @@ editor.addEventListener('input', function() {
   const textStyle = editor.value;
   try {
     const newLiteralStyle = JSON.parse(textStyle);
-    const same = JSON.stringify(newLiteralStyle) === JSON.stringify(literalStyle);
-    setStyleStatus(same || refreshLayer(newLiteralStyle));
+    if (JSON.stringify(newLiteralStyle) !== JSON.stringify(literalStyle)) {
+      refreshLayer(newLiteralStyle);
+    }
+    setStyleStatus(null);
   } catch (e) {
-    setStyleStatus(false);
+    setStyleStatus(e.message);
   }
 });
 
@@ -103,8 +104,13 @@ select.value = 'circles';
 function onSelectChange() {
   const style = select.value;
   const newLiteralStyle = predefinedStyles[style];
-  setStyleStatus(refreshLayer(newLiteralStyle) ? undefined : false);
   editor.value = JSON.stringify(newLiteralStyle, null, 2);
+  try {
+    refreshLayer(newLiteralStyle);
+    setStyleStatus();
+  } catch (e) {
+    setStyleStatus(e.message);
+  }
 }
 onSelectChange();
 select.addEventListener('change', onSelectChange);