Example of hue/saturation control on the client (WebGL only).
<!DOCTYPE html> <html> <head> <title>Hue/saturation example</title> <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link rel="stylesheet" href="http://openlayers.org/en/3.8.1/css/ol.css" type="text/css"> <script src="http://openlayers.org/en/3.8.1/build/ol.js"></script> <style> #reset-hue { min-width: 90px; } #reset-saturation { min-width: 124px; } </style> </head> <body> <div class="container-fluid"> <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> <button id="decrease-hue"><i class="icon-minus"></i></button> </div> <div class="btn-group"> <button id="increase-saturation"><i class="icon-plus"></i></button> <button id="reset-saturation">Saturation</button> <button id="decrease-saturation"><i class="icon-minus"></i></button> </div> </div> </div> </div> <script> function setResetHueButtonHTML() { resetHue.innerHTML = 'Hue (' + layer.getHue().toFixed(2) + ')'; } function setResetSaturationButtonHTML() { resetSaturation.innerHTML = 'Saturation (' + layer.getSaturation().toFixed(2) + ')'; } if (!ol.has.WEBGL) { var info = document.getElementById('no-webgl'); /** * display error message */ info.style.display = ''; } else { var layer = new ol.layer.Tile({ source: new ol.source.BingMaps({ key: 'Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3', imagerySet: 'Aerial' }) }); var map = new ol.Map({ layers: [layer], renderer: 'webgl', target: 'map', view: new ol.View({ center: ol.proj.fromLonLat([-9.375, 51.483333]), 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(); 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); } </script> </body> </html>