diff --git a/examples/hue-saturation.html b/examples/hue-saturation.html new file mode 100644 index 0000000000..daf15a3013 --- /dev/null +++ b/examples/hue-saturation.html @@ -0,0 +1,62 @@ + + + + + + + + + + Hue/saturation example + + + +
+
+
+ OpenLayers 3 Examples +
    +
    • +
    • +
+
+
+
+ +
+ +
+
+
+
+ + + +
+
+ + + +
+
+
+ +
+ +
+

Hue/saturation example

+

Example of hue/saturation control on the client (WebGL only).

+
+

See the hue-saturation.js source to see how this is done.

+
+
hue, saturation, webgl
+
+ +
+ +
+ + + + + diff --git a/examples/hue-saturation.js b/examples/hue-saturation.js new file mode 100644 index 0000000000..1ece743371 --- /dev/null +++ b/examples/hue-saturation.js @@ -0,0 +1,47 @@ +goog.require('ol.Coordinate'); +goog.require('ol.Map'); +goog.require('ol.RendererHint'); +goog.require('ol.View2D'); +goog.require('ol.layer.TileLayer'); +goog.require('ol.source.MapQuestOpenAerial'); + + +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: new ol.Coordinate(0, 0), + zoom: 2 + }) +}); + +var increaseHue = document.getElementById('increase-hue'); +increaseHue.addEventListener('click', function() { + layer.setHue(layer.getHue() + 0.25); +}, false); +var resetHue = document.getElementById('reset-hue'); +resetHue.addEventListener('click', function() { + layer.setHue(0); +}, false); +var decreaseHue = document.getElementById('decrease-hue'); +decreaseHue.addEventListener('click', function() { + layer.setHue(layer.getHue() - 0.25); +}, false); + +var increaseSaturation = document.getElementById('increase-saturation'); +increaseSaturation.addEventListener('click', function() { + layer.setSaturation(layer.getSaturation() + 0.25); +}, false); +var resetSaturation = document.getElementById('reset-saturation'); +resetSaturation.addEventListener('click', function() { + layer.setSaturation(1); +}, false); +var decreaseSaturation = document.getElementById('decrease-saturation'); +decreaseSaturation.addEventListener('click', function() { + layer.setSaturation(layer.getSaturation() - 0.25); +}, false);