51 lines
2.0 KiB
HTML
51 lines
2.0 KiB
HTML
---
|
|
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> |