diff --git a/examples/bind-input.html b/examples/bind-input.html index 33f6a66ea7..13242c3503 100644 --- a/examples/bind-input.html +++ b/examples/bind-input.html @@ -41,7 +41,11 @@

Demonstrates two-way binding of HTML input elements to OpenLayers objects.

See the bind-input.js source to see how this is done.

-

Note: hue, saturation, contrast and brightness effects only work with WebGL (in WebGL-capable browsers).

+
input, bind, openstreetmap
@@ -56,13 +60,13 @@ - + - + - + - + diff --git a/examples/bind-input.js b/examples/bind-input.js index 416acbda66..cd64cb94f5 100644 --- a/examples/bind-input.js +++ b/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() diff --git a/examples/brightness-contrast.html b/examples/brightness-contrast.html index ceb5e21287..0fec55d57b 100644 --- a/examples/brightness-contrast.html +++ b/examples/brightness-contrast.html @@ -39,6 +39,11 @@
+ + +
diff --git a/examples/brightness-contrast.js b/examples/brightness-contrast.js index c7304bca50..69dec11a95 100644 --- a/examples/brightness-contrast.js +++ b/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); +} diff --git a/examples/hue-saturation.html b/examples/hue-saturation.html index 5f9470f028..c63319b891 100644 --- a/examples/hue-saturation.html +++ b/examples/hue-saturation.html @@ -39,6 +39,11 @@
+ + +
diff --git a/examples/hue-saturation.js b/examples/hue-saturation.js index d73afa88a6..5994978786 100644 --- a/examples/hue-saturation.js +++ b/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); +} diff --git a/examples/side-by-side.html b/examples/side-by-side.html index 5f72786bb4..e3ed360755 100644 --- a/examples/side-by-side.html +++ b/examples/side-by-side.html @@ -36,6 +36,9 @@

WebGL

+

DOM

diff --git a/examples/side-by-side.js b/examples/side-by-side.js index 763ac307e8..8c9adb9cae 100644 --- a/examples/side-by-side.js +++ b/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, diff --git a/examples/ten-thousand-points.html b/examples/ten-thousand-points.html index b0cbb8184f..923bddcb19 100644 --- a/examples/ten-thousand-points.html +++ b/examples/ten-thousand-points.html @@ -31,6 +31,10 @@
+ +
diff --git a/examples/ten-thousand-points.js b/examples/ten-thousand-points.js index e2f1813fcd..a3cd6527d6 100644 --- a/examples/ten-thousand-points.js +++ b/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: ' ' - }) - ]), - 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: ' ' }) + ]), + 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 - }) -}); + }); +}