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

Remove 2-way binding from objects

Browse Source
This commit is contained in:
Tim Schaub
2015-04-02 15:37:53 +02:00
parent 600b76e9a2
commit f42c0cb0aa
6 changed files with 17 additions and 987 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
examples_src/bind-input.html
View File

@@ -1,51 +0,0 @@
---
template: example.html
title: Bind HTML input example
shortdesc: Demonstrates two-way binding of HTML input elements to OpenLayers objects.
docs: >
<p id="has-webgl" style="display: none">With the <a href="?renderer=webgl">WebGL renderer</a>, <strong>hue</strong>, <strong>saturation</strong>, <strong>contrast</strong> and <strong>brightness</strong> can also be controlled.</p>
<div id="no-webgl" class="alert alert-warning" style="display: none">
<h4>Warning!</h4>
A browser that supports <a href="http://get.webgl.org/">WebGL</a> is required to change the
<strong>hue</strong>, <strong>saturation</strong>, <strong>contrast</strong> and <strong>brightness</strong>.
</div>
tags: "custom, control"
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>
<div class="span4">
<form class="">
<fieldset>
<legend>Layer</legend>
<label class="checkbox" for="visible">
<input id="visible" type="checkbox"/>visibility
</label>
<label>opacity</label>
<input id="opacity" type="range" min="0" max="1" step="0.01"/>
</fieldset>
<fieldset id="webgl" style="display: none">
<label>hue</label>
<input id="hue" type="range" min="-3.141592653589793" max="3.141592653589793" step="0.01"/>
<label>saturation</label>
<input id="saturation" type="range" min="0" max="5" step="0.01"/>
<label>contrast</label>
<input id="contrast" type="range" min="0" max="2" step="0.01"/>
<label>brightness</label>
<input id="brightness" type="range" min="-1" max="1" step="0.01"/>
</fieldset>
</form>
</div>
<div class="span4">
<form class="">
<fieldset>
<legend>View</legend>
<label>rotation</label>
<input id="rotation" type="range" min="-3.141592653589793" max="3.141592653589793" step="0.01"/>
<label>resolution</label>
<input id="resolution" type="number" min="0" step="250"/>
</fieldset>
</form>
</div>

69
examples_src/bind-input.js
View File

@@ -1,69 +0,0 @@
goog.require('ol.Map');
goog.require('ol.View');
goog.require('ol.control');
goog.require('ol.dom.Input');
goog.require('ol.has');
goog.require('ol.layer.Tile');
goog.require('ol.source.OSM');
function checkWebGL(evt) {
document.getElementById('no-webgl').style.display =
ol.has.WEBGL ? 'none' : '';
document.getElementById('has-webgl').style.display =
ol.has.WEBGL && !evt.glContext ? '' : 'none';
document.getElementById('webgl').style.display =
evt.glContext ? '' : 'none';
}
var layer = new ol.layer.Tile({
source: new ol.source.OSM()
});
layer.once('precompose', checkWebGL);
var view = new ol.View({
center: [0, 0],
zoom: 2
});
var map = new ol.Map({
layers: [layer],
renderer: exampleNS.getRendererFromQueryString(),
target: 'map',
controls: ol.control.defaults({
attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
collapsible: false
})
}),
view: view
});
var visible = new ol.dom.Input(document.getElementById('visible'));
visible.bindTo('checked', layer, 'visible');
var opacity = new ol.dom.Input(document.getElementById('opacity'));
opacity.bindTo('value', layer, 'opacity')
.transform(parseFloat, String);
var hue = new ol.dom.Input(document.getElementById('hue'));
hue.bindTo('value', layer, 'hue')
.transform(parseFloat, String);
var saturation = new ol.dom.Input(document.getElementById('saturation'));
saturation.bindTo('value', layer, 'saturation')
.transform(parseFloat, String);
var contrast = new ol.dom.Input(document.getElementById('contrast'));
contrast.bindTo('value', layer, 'contrast')
.transform(parseFloat, String);
var brightness = new ol.dom.Input(document.getElementById('brightness'));
brightness.bindTo('value', layer, 'brightness')
.transform(parseFloat, String);
var rotation = new ol.dom.Input(document.getElementById('rotation'));
rotation.bindTo('value', view, 'rotation').transform(parseFloat, String);
var resolution = new ol.dom.Input(document.getElementById('resolution'));
resolution.bindTo('value', view, 'resolution').transform(parseFloat, String);