Better user notification if WebGL is not supported

examples/bind-input.html

@@ -41,7 +41,11 @@
           <p id="shortdesc">Demonstrates two-way binding of HTML input elements to OpenLayers objects.</p>
           <div id="docs">
             <p>See the <a href="bind-input.js" target="_blank">bind-input.js source</a> to see how this is done.</p>
-            <p>Note: hue, saturation, contrast and brightness effects only work with WebGL (in WebGL-capable browsers).</p>
+            <div id="no-webgl" class="alert alert-warning" style="display: none">
+              <h4>Warning!</h4>
+              A browser that supports <a href="http://get.webgl.org/">WebGL</a> is required to change the
+              <strong>hue</strong>, <strong>saturation</strong>, <strong>contrast</strong> and <strong>brightness</strong>.
+            </div>
           </div>
           <div id="tags">input, bind, openstreetmap</div>
         </div>
@@ -56,13 +60,13 @@
               <label>opacity</label>
               <input id="opacity" type="range" min="0" max="1" step="0.01"/>
               <label>hue</label>
-              <input id="hue" type="range" min="-3.141592653589793" max="3.141592653589793" step="0.01"/>
+              <input id="hue" class="webgl" type="range" min="-3.141592653589793" max="3.141592653589793" step="0.01"/>
               <label>saturation</label>
-              <input id="saturation" type="range" min="0" max="5" step="0.01"/>
+              <input id="saturation" class="webgl" type="range" min="0" max="5" step="0.01"/>
               <label>contrast</label>
-              <input id="contrast" type="range" min="0" max="2" step="0.01"/>
+              <input id="contrast" class="webgl" type="range" min="0" max="2" step="0.01"/>
               <label>brightness</label>
-              <input id="brightness" type="range" min="-1" max="1" step="0.01"/>
+              <input id="brightness" class="webgl" type="range" min="-1" max="1" step="0.01"/>
             </fieldset>
           </form>
         </div>

examples/bind-input.js

@@ -4,6 +4,20 @@ goog.require('ol.View2D');
 goog.require('ol.dom.Input');
 goog.require('ol.layer.TileLayer');
 goog.require('ol.source.OSM');
+goog.require('ol.webgl.SUPPORTED');
+
+
+if (!ol.webgl.SUPPORTED) {
+  var inputs = document.getElementsByClassName('webgl');
+  for (var i = 0, len = inputs.length; i < len; i++) {
+    inputs[i].disabled = true;
+  }
+  var info = document.getElementById('no-webgl');
+  /**
+   * display warning message
+   */
+  info.style.display = '';
+}
 
 var layer = new ol.layer.TileLayer({
   source: new ol.source.OSM()

examples/brightness-contrast.html

@@ -39,6 +39,11 @@
       <div class="row-fluid">
         <div class="span12">
           <div id="map" class="map"></div>
+
+          <div id="no-webgl" class="alert alert-error" style="display: none">
+            This example requires a browser that supports <a href="http://get.webgl.org/">WebGL</a>.
+          </div>
+
           <div class="btn-group">
             <button id="increase-brightness"><i class="icon-plus"></i></button>
             <button id="reset-brightness">Brightness</button>

examples/brightness-contrast.js

@@ -3,63 +3,74 @@ goog.require('ol.RendererHint');
 goog.require('ol.View2D');
 goog.require('ol.layer.TileLayer');
 goog.require('ol.source.MapQuestOpenAerial');
+goog.require('ol.webgl.SUPPORTED');
 
 
-var layer = new ol.layer.TileLayer({
-  source: new ol.source.MapQuestOpenAerial()
-});
-
-var map = new ol.Map({
-  layers: [layer],
-  renderer: ol.RendererHint.WEBGL,
-  target: 'map',
-  view: new ol.View2D({
-    center: [0, 0],
-    zoom: 2
-  })
-});
-
-var increaseBrightness = document.getElementById('increase-brightness');
-var resetBrightness = document.getElementById('reset-brightness');
-var decreaseBrightness = document.getElementById('decrease-brightness');
-
 function setResetBrightnessButtonHTML() {
   resetBrightness.innerHTML = 'Brightness (' +
       layer.getBrightness().toFixed(3) + ')';
 }
-setResetBrightnessButtonHTML();
-
-increaseBrightness.addEventListener('click', function() {
-  layer.setBrightness(Math.min(layer.getBrightness() + 0.125, 1));
-  setResetBrightnessButtonHTML();
-}, false);
-resetBrightness.addEventListener('click', function() {
-  layer.setBrightness(0);
-  setResetBrightnessButtonHTML();
-}, false);
-decreaseBrightness.addEventListener('click', function() {
-  layer.setBrightness(Math.max(layer.getBrightness() - 0.125, -1));
-  setResetBrightnessButtonHTML();
-}, false);
-
-var increaseContrast = document.getElementById('increase-contrast');
-var resetContrast = document.getElementById('reset-contrast');
-var decreaseContrast = document.getElementById('decrease-contrast');
 
 function setResetContrastButtonHTML() {
   resetContrast.innerHTML = 'Contrast (' + layer.getContrast().toFixed(3) + ')';
 }
-setResetContrastButtonHTML();
 
-increaseContrast.addEventListener('click', function() {
-  layer.setContrast(layer.getContrast() + 0.125);
+if (!ol.webgl.SUPPORTED) {
+  var info = document.getElementById('no-webgl');
+  /**
+   * display error message
+   */
+  info.style.display = '';
+} else {
+  var layer = new ol.layer.TileLayer({
+    source: new ol.source.MapQuestOpenAerial()
+  });
+
+  var map = new ol.Map({
+    layers: [layer],
+    renderer: ol.RendererHint.WEBGL,
+    target: 'map',
+    view: new ol.View2D({
+      center: [0, 0],
+      zoom: 2
+    })
+  });
+
+  var increaseBrightness = document.getElementById('increase-brightness');
+  var resetBrightness = document.getElementById('reset-brightness');
+  var decreaseBrightness = document.getElementById('decrease-brightness');
+
+  setResetBrightnessButtonHTML();
+
+  increaseBrightness.addEventListener('click', function() {
+    layer.setBrightness(Math.min(layer.getBrightness() + 0.125, 1));
+    setResetBrightnessButtonHTML();
+  }, false);
+  resetBrightness.addEventListener('click', function() {
+    layer.setBrightness(0);
+    setResetBrightnessButtonHTML();
+  }, false);
+  decreaseBrightness.addEventListener('click', function() {
+    layer.setBrightness(Math.max(layer.getBrightness() - 0.125, -1));
+    setResetBrightnessButtonHTML();
+  }, false);
+
+  var increaseContrast = document.getElementById('increase-contrast');
+  var resetContrast = document.getElementById('reset-contrast');
+  var decreaseContrast = document.getElementById('decrease-contrast');
+
   setResetContrastButtonHTML();
-}, false);
-resetContrast.addEventListener('click', function() {
-  layer.setContrast(1);
-  setResetContrastButtonHTML();
-}, false);
-decreaseContrast.addEventListener('click', function() {
-  layer.setContrast(Math.max(layer.getContrast() - 0.125, 0));
-  setResetContrastButtonHTML();
-}, false);
+
+  increaseContrast.addEventListener('click', function() {
+    layer.setContrast(layer.getContrast() + 0.125);
+    setResetContrastButtonHTML();
+  }, false);
+  resetContrast.addEventListener('click', function() {
+    layer.setContrast(1);
+    setResetContrastButtonHTML();
+  }, false);
+  decreaseContrast.addEventListener('click', function() {
+    layer.setContrast(Math.max(layer.getContrast() - 0.125, 0));
+    setResetContrastButtonHTML();
+  }, false);
+}

examples/hue-saturation.html

@@ -39,6 +39,11 @@
       <div class="row-fluid">
         <div class="span12">
           <div id="map" class="map"></div>
+
+          <div id="no-webgl" class="alert alert-error" style="display: none">
+            This example requires a browser that supports <a href="http://get.webgl.org/">WebGL</a>.
+          </div>
+
           <div class="btn-group">
             <button id="increase-hue"><i class="icon-plus"></i></button>
             <button id="reset-hue">Hue</button>

examples/hue-saturation.js

@@ -4,66 +4,77 @@ goog.require('ol.View2D');
 goog.require('ol.layer.TileLayer');
 goog.require('ol.proj');
 goog.require('ol.source.BingMaps');
+goog.require('ol.webgl.SUPPORTED');
 
 
-var layer = new ol.layer.TileLayer({
-  source: new ol.source.BingMaps({
-    key: 'Ar33pRUvQOdESG8m_T15MUmNz__E1twPo42bFx9jvdDePhX0PNgAcEm44OVTS7tt',
-    style: 'Aerial'
-  })
-});
-
-var map = new ol.Map({
-  layers: [layer],
-  renderer: ol.RendererHint.WEBGL,
-  target: 'map',
-  view: new ol.View2D({
-    center: ol.proj.transform([-9.375, 51.483333], 'EPSG:4326', 'EPSG:3857'),
-    zoom: 15
-  })
-});
-
-var increaseHue = document.getElementById('increase-hue');
-var resetHue = document.getElementById('reset-hue');
-var decreaseHue = document.getElementById('decrease-hue');
-
 function setResetHueButtonHTML() {
   resetHue.innerHTML = 'Hue (' + layer.getHue().toFixed(2) + ')';
 }
-setResetHueButtonHTML();
-
-increaseHue.addEventListener('click', function() {
-  layer.setHue(layer.getHue() + 0.25);
-  setResetHueButtonHTML();
-}, false);
-resetHue.addEventListener('click', function() {
-  layer.setHue(0);
-  setResetHueButtonHTML();
-}, false);
-decreaseHue.addEventListener('click', function() {
-  layer.setHue(layer.getHue() - 0.25);
-  setResetHueButtonHTML();
-}, false);
-
-var increaseSaturation = document.getElementById('increase-saturation');
-var resetSaturation = document.getElementById('reset-saturation');
-var decreaseSaturation = document.getElementById('decrease-saturation');
 
 function setResetSaturationButtonHTML() {
   resetSaturation.innerHTML = 'Saturation (' +
       layer.getSaturation().toFixed(2) + ')';
 }
-setResetSaturationButtonHTML();
 
-increaseSaturation.addEventListener('click', function() {
-  layer.setSaturation(layer.getSaturation() + 0.25);
+if (!ol.webgl.SUPPORTED) {
+  var info = document.getElementById('no-webgl');
+  /**
+   * display error message
+   */
+  info.style.display = '';
+} else {
+  var layer = new ol.layer.TileLayer({
+    source: new ol.source.BingMaps({
+      key: 'Ar33pRUvQOdESG8m_T15MUmNz__E1twPo42bFx9jvdDePhX0PNgAcEm44OVTS7tt',
+      style: 'Aerial'
+    })
+  });
+
+  var map = new ol.Map({
+    layers: [layer],
+    renderer: ol.RendererHint.WEBGL,
+    target: 'map',
+    view: new ol.View2D({
+      center: ol.proj.transform([-9.375, 51.483333], 'EPSG:4326', 'EPSG:3857'),
+      zoom: 15
+    })
+  });
+
+  var increaseHue = document.getElementById('increase-hue');
+  var resetHue = document.getElementById('reset-hue');
+  var decreaseHue = document.getElementById('decrease-hue');
+
+  setResetHueButtonHTML();
+
+  increaseHue.addEventListener('click', function() {
+    layer.setHue(layer.getHue() + 0.25);
+    setResetHueButtonHTML();
+  }, false);
+  resetHue.addEventListener('click', function() {
+    layer.setHue(0);
+    setResetHueButtonHTML();
+  }, false);
+  decreaseHue.addEventListener('click', function() {
+    layer.setHue(layer.getHue() - 0.25);
+    setResetHueButtonHTML();
+  }, false);
+
+  var increaseSaturation = document.getElementById('increase-saturation');
+  var resetSaturation = document.getElementById('reset-saturation');
+  var decreaseSaturation = document.getElementById('decrease-saturation');
+
   setResetSaturationButtonHTML();
-}, false);
-resetSaturation.addEventListener('click', function() {
-  layer.setSaturation(1);
-  setResetSaturationButtonHTML();
-}, false);
-decreaseSaturation.addEventListener('click', function() {
-  layer.setSaturation(Math.max(layer.getSaturation() - 0.25, 0));
-  setResetSaturationButtonHTML();
-}, false);
+
+  increaseSaturation.addEventListener('click', function() {
+    layer.setSaturation(layer.getSaturation() + 0.25);
+    setResetSaturationButtonHTML();
+  }, false);
+  resetSaturation.addEventListener('click', function() {
+    layer.setSaturation(1);
+    setResetSaturationButtonHTML();
+  }, false);
+  decreaseSaturation.addEventListener('click', function() {
+    layer.setSaturation(Math.max(layer.getSaturation() - 0.25, 0));
+    setResetSaturationButtonHTML();
+  }, false);
+}

examples/side-by-side.html

@@ -36,6 +36,9 @@
         <div class="span4">
           <h4>WebGL</h4>
           <div id="webglMap" class="map"></div>
+          <div id="no-webgl" class="alert alert-error" style="display: none">
+            This map requires a browser that supports <a href="http://get.webgl.org/">WebGL</a>.
+          </div>
         </div>
         <div class="span4">
           <h4>DOM</h4>

examples/side-by-side.js

@@ -3,6 +3,7 @@ goog.require('ol.RendererHint');
 goog.require('ol.View2D');
 goog.require('ol.layer.TileLayer');
 goog.require('ol.source.MapQuestOpenAerial');
+goog.require('ol.webgl.SUPPORTED');
 
 
 var domMap = new ol.Map({
@@ -19,14 +20,20 @@ var domMap = new ol.Map({
   })
 });
 
-
-var webglMap = new ol.Map({
-  renderer: ol.RendererHint.WEBGL,
-  target: 'webglMap'
-});
-webglMap.bindTo('layergroup', domMap);
-webglMap.bindTo('view', domMap);
-
+if (ol.webgl.SUPPORTED) {
+  var webglMap = new ol.Map({
+    renderer: ol.RendererHint.WEBGL,
+    target: 'webglMap'
+  });
+  webglMap.bindTo('layergroup', domMap);
+  webglMap.bindTo('view', domMap);
+} else {
+  var info = document.getElementById('no-webgl');
+  /**
+   * display error message
+   */
+  info.style.display = '';
+}
 
 var canvasMap = new ol.Map({
   renderer: ol.RendererHint.CANVAS,

examples/ten-thousand-points.html

@@ -31,6 +31,10 @@
       <div class="row-fluid">
         <div class="span12">
           <div id="map" class="map"></div>
+          <div id="no-webgl" class="alert alert-error" style="display: none">
+            This example requires a browser that supports <a href="http://get.webgl.org/">WebGL</a>.
+          </div>
+
         </div>
       </div>
 

examples/ten-thousand-points.js

@@ -9,6 +9,7 @@ goog.require('ol.layer.TileLayer');
 goog.require('ol.layer.VectorLayer2');
 goog.require('ol.source.OSM');
 goog.require('ol.source.VectorSource2');
+goog.require('ol.webgl.SUPPORTED');
 
 
 // WARNING
@@ -16,53 +17,61 @@ goog.require('ol.source.VectorSource2');
 // calls used here are internal and low-level and are not representative of the
 // final API.
 
+if (!ol.webgl.SUPPORTED) {
+  var info = document.getElementById('no-webgl');
+  /**
+   * display error message
+   */
+  info.style.display = '';
+} else {
 
-var pointCollection = ol.geom2.PointCollection.createEmpty(101 * 101);
-var i, j, x, y;
-for (i = 0; i < 101; ++i) {
-  for (j = 0; j < 101; ++j) {
-    x = 20000000 * (i - 50) / 50;
-    y = 20000000 * (j - 50) / 50;
-    pointCollection.add([x, y]);
+  var pointCollection = ol.geom2.PointCollection.createEmpty(101 * 101);
+  var i, j, x, y;
+  for (i = 0; i < 101; ++i) {
+    for (j = 0; j < 101; ++j) {
+      x = 20000000 * (i - 50) / 50;
+      y = 20000000 * (j - 50) / 50;
+      pointCollection.add([x, y]);
+    }
   }
-}
 
-var k = 1000000;
-var lineStringCollection = ol.geom2.LineStringCollection.pack([
-  [[-20 * k, -20 * k], [20 * k, 20 * k]],
-  [[-20 * k, 20 * k], [20 * k, -20 * k]],
-  [[0 * k, 15 * k],
-   [10 * k, 5 * k],
-   [5 * k, 5 * k],
-   [5 * k, -15 * k],
-   [-5 * k, -15 * k],
-   [-5 * k, 5 * k],
-   [-10 * k, 5 * k],
-   [0 * k, 15 * k]]
-]);
+  var k = 1000000;
+  var lineStringCollection = ol.geom2.LineStringCollection.pack([
+    [[-20 * k, -20 * k], [20 * k, 20 * k]],
+    [[-20 * k, 20 * k], [20 * k, -20 * k]],
+    [[0 * k, 15 * k],
+     [10 * k, 5 * k],
+     [5 * k, 5 * k],
+     [5 * k, -15 * k],
+     [-5 * k, -15 * k],
+     [-5 * k, 5 * k],
+     [-10 * k, 5 * k],
+     [0 * k, 15 * k]]
+  ]);
 
-var map = new ol.Map({
-  controls: ol.control.defaults().extend([
-    new ol.control.MousePosition({
-      undefinedHTML: '&nbsp;'
-    })
-  ]),
-  layers: [
-    new ol.layer.TileLayer({
-      source: new ol.source.OSM()
-    }),
-    new ol.layer.VectorLayer2({
-      source: new ol.source.VectorSource2({
-        lineStringCollections: [lineStringCollection],
-        projection: 'EPSG:3857',
-        pointCollections: [pointCollection]
+  var map = new ol.Map({
+    controls: ol.control.defaults().extend([
+      new ol.control.MousePosition({
+        undefinedHTML: '&nbsp;'
       })
+    ]),
+    layers: [
+      new ol.layer.TileLayer({
+        source: new ol.source.OSM()
+      }),
+      new ol.layer.VectorLayer2({
+        source: new ol.source.VectorSource2({
+          lineStringCollections: [lineStringCollection],
+          projection: 'EPSG:3857',
+          pointCollections: [pointCollection]
+        })
+      })
+    ],
+    renderer: ol.RendererHint.WEBGL,
+    target: 'map',
+    view: new ol.View2D({
+      center: [0, 0],
+      zoom: 0
     })
-  ],
-  renderer: ol.RendererHint.WEBGL,
-  target: 'map',
-  view: new ol.View2D({
-    center: [0, 0],
-    zoom: 0
-  })
-});
+  });
+}