Example of brightness/contrast control on the client (WebGL only).
This example shows how to control brightness/contrast on the client, the example is limited to WebGL.
<!DOCTYPE html> <html> <head> <title>Brightness/contrast 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-brightness { min-width: 138px; } #reset-contrast { min-width: 120px; } </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-brightness"><i class="icon-plus"></i></button> <button id="reset-brightness">Brightness</button> <button id="decrease-brightness"><i class="icon-minus"></i></button> </div> <div class="btn-group"> <button id="increase-contrast"><i class="icon-plus"></i></button> <button id="reset-contrast">Contrast</button> <button id="decrease-contrast"><i class="icon-minus"></i></button> </div> </div> </div> </div> <script> function setResetBrightnessButtonHTML() { resetBrightness.innerHTML = 'Brightness (' + layer.getBrightness().toFixed(3) + ')'; } function setResetContrastButtonHTML() { resetContrast.innerHTML = 'Contrast (' + layer.getContrast().toFixed(3) + ')'; } 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.MapQuest({layer: 'sat'}) }); var map = new ol.Map({ layers: [layer], renderer: 'webgl', target: 'map', view: new ol.View({ 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(); 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); } </script> </body> </html>