Example of hue/saturation control on the client (WebGL only).
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/v3.9.0/css/ol.css" type="text/css">
<script src="http://openlayers.org/en/v3.9.0/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-danger" 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="fa fa-plus"></i></button>
<button id="reset-hue">Hue</button>
<button id="decrease-hue"><i class="fa fa-minus"></i></button>
</div>
<div class="btn-group">
<button id="increase-saturation"><i class="fa fa-plus"></i></button>
<button id="reset-saturation">Saturation</button>
<button id="decrease-saturation"><i class="fa fa-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>