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.
127 lines
6.0 KiB
HTML
127 lines
6.0 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">
|
|
<style>
|
|
#layertree li > span {
|
|
cursor: pointer;
|
|
}
|
|
</style>
|
|
<title>Layer group 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="span6">
|
|
<div id="map" class="map"></div>
|
|
|
|
<h4 id="title">Layer group example</h4>
|
|
<p id="shortdesc">Example of a map with layer group.</p>
|
|
<div id="docs">
|
|
<p>See the <a href="layer-group.js" target="_blank">layer-group.js source</a> to see how this is done.</p>
|
|
</div>
|
|
<div id="tags">tilejson, input, bind, group, layergroup</div>
|
|
</div>
|
|
|
|
<div id="layertree" class="span6">
|
|
<h5>Click on layer nodes below to change their properties.</h5>
|
|
<ul>
|
|
<li><span>OpenAerial layer</span>
|
|
<fieldset id="layer0">
|
|
<label class="checkbox" for="visible0">
|
|
<input id="visible0" class="visible" type="checkbox"/>visibility
|
|
</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>
|
|
<fieldset id="layer1">
|
|
<label class="checkbox" for="visible1">
|
|
<input id="visible1" class="visible" type="checkbox"/>visibility
|
|
</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>
|
|
<fieldset id="layer10">
|
|
<label class="checkbox" for="visible10">
|
|
<input id="visible10" class="visible" type="checkbox"/>visibility
|
|
</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>
|
|
<fieldset id="layer11">
|
|
<label class="checkbox" for="visible11">
|
|
<input id="visible11" class="visible" type="checkbox"/>visibility
|
|
</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>
|
|
</li>
|
|
</ul>
|
|
|
|
</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=layer-group" type="text/javascript"></script>
|
|
|
|
</body>
|
|
</html>
|