ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Bind more layer properties in layer-group example

Browse Source 
This allows to update hue, saturation, brightness, contrast values.
This commit is contained in:
Bruno Binet
2013-06-13 14:17:29 +02:00
parent 1100cc67da
commit d84477c1c0
2 changed files with 37 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
examples/layer-group.html
View File

@@ -54,6 +54,14 @@
</label>
<label>opacity</label>
<input class="opacity" type="range" min="0" max="1" step="0.01"/>
<label>hue</label>
<input class="hue" type="range" min="-3.141592653589793" max="3.141592653589793" step="0.01"/>
<label>saturation</label>
<input class="saturation" type="range" min="0" max="5" step="0.01"/>
<label>contrast</label>
<input class="contrast" type="range" min="0" max="2" step="0.01"/>
<label>brightness</label>
<input class="brightness" type="range" min="-1" max="1" step="0.01"/>
</fieldset>
</li>
<li><span>Layer group</span>
@@ -63,6 +71,14 @@
</label>
<label>opacity</label>
<input class="opacity" type="range" min="0" max="1" step="0.01"/>
<label>hue</label>
<input class="hue" type="range" min="-3.141592653589793" max="3.141592653589793" step="0.01"/>
<label>saturation</label>
<input class="saturation" type="range" min="0" max="5" step="0.01"/>
<label>contrast</label>
<input class="contrast" type="range" min="0" max="2" step="0.01"/>
<label>brightness</label>
<input class="brightness" type="range" min="-1" max="1" step="0.01"/>
</fieldset>
<ul>
<li><span>Food insecurity layer</span>
@@ -72,6 +88,14 @@
</label>
<label>opacity</label>
<input class="opacity" type="range" min="0" max="1" step="0.01"/>
<label>hue</label>
<input class="hue" type="range" min="-3.141592653589793" max="3.141592653589793" step="0.01"/>
<label>saturation</label>
<input class="saturation" type="range" min="0" max="5" step="0.01"/>
<label>contrast</label>
<input class="contrast" type="range" min="0" max="2" step="0.01"/>
<label>brightness</label>
<input class="brightness" type="range" min="-1" max="1" step="0.01"/>
</fieldset>
</li>
<li><span>World borders layer</span>
@@ -81,6 +105,14 @@
</label>
<label>opacity</label>
<input class="opacity" type="range" min="0" max="1" step="0.01"/>
<label>hue</label>
<input class="hue" type="range" min="-3.141592653589793" max="3.141592653589793" step="0.01"/>
<label>saturation</label>
<input class="saturation" type="range" min="0" max="5" step="0.01"/>
<label>contrast</label>
<input class="contrast" type="range" min="0" max="2" step="0.01"/>
<label>brightness</label>
<input class="brightness" type="range" min="-1" max="1" step="0.01"/>
</fieldset>
</li>
</ul>

7
examples/layer-group.js
View File

@@ -42,8 +42,11 @@ var map = new ol.Map({
function bindInputs(layerid, layer) {
new ol.dom.Input($(layerid + ' .visible')[0])
.bindTo('checked', layer, 'visible');
new ol.dom.Input($(layerid + ' .opacity')[0])
.bindTo('value', layer, 'opacity');
$.each(['opacity', 'hue', 'saturation', 'contrast', 'brightness'],
function(i, v) {
new ol.dom.Input($(layerid + ' .' + v)[0]).bindTo('value', layer, v);
}
);
}
map.getLayers().forEach(function(layer, i) {
bindInputs('#layer' + i, layer);