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
examples/layer-group.html
+32
View File
@@ -54,6 +54,14 @@
</label> </label>
<label>opacity</label> <label>opacity</label>
<input class="opacity" type="range" min="0" max="1" step="0.01"/> <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> </fieldset>
</li> </li>
<li><span>Layer group</span> <li><span>Layer group</span>
@@ -63,6 +71,14 @@
</label> </label>
<label>opacity</label> <label>opacity</label>
<input class="opacity" type="range" min="0" max="1" step="0.01"/> <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> </fieldset>
<ul> <ul>
<li><span>Food insecurity layer</span> <li><span>Food insecurity layer</span>
@@ -72,6 +88,14 @@
</label> </label>
<label>opacity</label> <label>opacity</label>
<input class="opacity" type="range" min="0" max="1" step="0.01"/> <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> </fieldset>
</li> </li>
<li><span>World borders layer</span> <li><span>World borders layer</span>
@@ -81,6 +105,14 @@
</label> </label>
<label>opacity</label> <label>opacity</label>
<input class="opacity" type="range" min="0" max="1" step="0.01"/> <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> </fieldset>
</li> </li>
</ul> </ul>
examples/layer-group.js
+5 -2
View File
@@ -42,8 +42,11 @@ var map = new ol.Map({
function bindInputs(layerid, layer) { function bindInputs(layerid, layer) {
new ol.dom.Input($(layerid + ' .visible')[0]) new ol.dom.Input($(layerid + ' .visible')[0])
.bindTo('checked', layer, 'visible'); .bindTo('checked', layer, 'visible');
new ol.dom.Input($(layerid + ' .opacity')[0]) $.each(['opacity', 'hue', 'saturation', 'contrast', 'brightness'],
.bindTo('value', layer, 'opacity'); function(i, v) {
new ol.dom.Input($(layerid + ' .' + v)[0]).bindTo('value', layer, v);
}
);
} }
map.getLayers().forEach(function(layer, i) { map.getLayers().forEach(function(layer, i) {
bindInputs('#layer' + i, layer); bindInputs('#layer' + i, layer);