e633f7f8c1
This reverts4d619d71b1(see #1527), going back to what we had aftere13075f6ff(see #881). To avoid the 404 in the hosted examples, the css is copied to the same relative path when hosted as during development.
90 lines
3.5 KiB
HTML
90 lines
3.5 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="chrome=1">
|
|
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
|
|
<link rel="stylesheet" href="../css/ol.css" type="text/css">
|
|
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
|
|
<link rel="stylesheet" href="../resources/layout.css" type="text/css">
|
|
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
|
|
<title>Bind HTML input example</title>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="navbar navbar-inverse navbar-fixed-top">
|
|
<div class="navbar-inner">
|
|
<div class="container">
|
|
<a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container-fluid">
|
|
|
|
<div class="row-fluid">
|
|
<div class="span12">
|
|
<div id="map" class="map"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row-fluid">
|
|
|
|
<div class="span4">
|
|
<h4 id="title">Bind HTML input example</h4>
|
|
<p id="shortdesc">Demonstrates two-way binding of HTML input elements to OpenLayers objects.</p>
|
|
<div id="docs">
|
|
<p>See the <a href="bind-input.js" target="_blank">bind-input.js source</a> to see how this is done.</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>
|
|
</div>
|
|
<div id="tags">input, bind, openstreetmap</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"/>
|
|
<label>hue</label>
|
|
<input id="hue" class="webgl" type="range" min="-3.141592653589793" max="3.141592653589793" step="0.01"/>
|
|
<label>saturation</label>
|
|
<input id="saturation" class="webgl" type="range" min="0" max="5" step="0.01"/>
|
|
<label>contrast</label>
|
|
<input id="contrast" class="webgl" type="range" min="0" max="2" step="0.01"/>
|
|
<label>brightness</label>
|
|
<input id="brightness" class="webgl" 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>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script src="jquery.min.js" type="text/javascript"></script>
|
|
<script src="../resources/example-behaviour.js" type="text/javascript"></script>
|
|
<script src="loader.js?id=bind-input" type="text/javascript"></script>
|
|
|
|
</body>
|
|
</html>
|