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

Port over the bind-input and bing-maps examples

Browse Source
This commit is contained in:
Bart van den Eijnden
2015-04-02 11:58:56 +02:00
committed by Andreas Hocevar
parent 943cac755b
commit 7d453bc69e
2 changed files with 71 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files

143
examples_src/bind-input.html
View File

@@ -1,92 +1,51 @@
<!doctype html> ---
<html lang="en"> template: "example.html"
<head> title: "Bind HTML input example"
<meta charset="utf-8"> shortdesc: "Demonstrates two-way binding of HTML input elements to OpenLayers objects."
<meta http-equiv="X-UA-Compatible" content="chrome=1"> docs: >
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"> <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>
<link rel="stylesheet" href="../css/ol.css" type="text/css"> <div id="no-webgl" class="alert alert-warning" style="display: none">
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css"> <h4>Warning!</h4>
<link rel="stylesheet" href="../resources/layout.css" type="text/css"> A browser that supports <a href="http://get.webgl.org/">WebGL</a> is required to change the
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css"> <strong>hue</strong>, <strong>saturation</strong>, <strong>contrast</strong> and <strong>brightness</strong>.
<title>Bind HTML input example</title> </div>
</head> tags: "custom, control"
<body> ---
<div class="row-fluid">
<div class="navbar navbar-inverse navbar-fixed-top"> <div class="span12">
<div class="navbar-inner"> <div id="map" class="map"></div>
<div class="container"> </div>
<a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a> </div>
</div> <div class="span4">
</div> <form class="">
</div> <fieldset>
<legend>Layer</legend>
<div class="container-fluid"> <label class="checkbox" for="visible">
<input id="visible" type="checkbox"/>visibility
<div class="row-fluid"> </label>
<div class="span12"> <label>opacity</label>
<div id="map" class="map"></div> <input id="opacity" type="range" min="0" max="1" step="0.01"/>
</div> </fieldset>
</div> <fieldset id="webgl" style="display: none">
<label>hue</label>
<div class="row-fluid"> <input id="hue" type="range" min="-3.141592653589793" max="3.141592653589793" step="0.01"/>
<label>saturation</label>
<div class="span4"> <input id="saturation" type="range" min="0" max="5" step="0.01"/>
<h4 id="title">Bind HTML input example</h4> <label>contrast</label>
<p id="shortdesc">Demonstrates two-way binding of HTML input elements to OpenLayers objects.</p> <input id="contrast" type="range" min="0" max="2" step="0.01"/>
<div id="docs"> <label>brightness</label>
<p>See the <a href="bind-input.js" target="_blank">bind-input.js source</a> to see how this is done.</p> <input id="brightness" type="range" min="-1" max="1" step="0.01"/>
<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> </fieldset>
<div id="no-webgl" class="alert alert-warning" style="display: none"> </form>
<h4>Warning!</h4> </div>
A browser that supports <a href="http://get.webgl.org/">WebGL</a> is required to change the <div class="span4">
<strong>hue</strong>, <strong>saturation</strong>, <strong>contrast</strong> and <strong>brightness</strong>. <form class="">
</div> <fieldset>
</div> <legend>View</legend>
<div id="tags">input, bind, openstreetmap</div> <label>rotation</label>
</div> <input id="rotation" type="range" min="-3.141592653589793" max="3.141592653589793" step="0.01"/>
<label>resolution</label>
<div class="span4"> <input id="resolution" type="number" min="0" step="250"/>
<form class=""> </fieldset>
<fieldset> </form>
<legend>Layer</legend> </div>
<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>
</div>
</div>
<script src="../resources/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>

80
examples_src/bing-maps.html
View File

@@ -1,60 +1,20 @@
<!doctype html> ---
<html lang="en"> template: "example.html"
<head> title: "Bing Maps example"
<meta charset="utf-8"> shortdesc: "Example of a Bing Maps layer."
<meta http-equiv="X-UA-Compatible" content="chrome=1"> docs: >
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"> <p>When the Bing Maps tile service doesn't have tiles for a given resolution and region it returns "placeholder" tiles indicating that. Zoom the map beyond level 19 to see the "placeholder" tiles. If you want OpenLayers to display stretched tiles in place of "placeholder" tiles beyond zoom level 19 then set <code>maxZoom</code> to <code>19</code> in the options passed to <code>ol.source.BingMaps</code>.</p>
<link rel="stylesheet" href="../css/ol.css" type="text/css"> tags: "bing, bing-maps"
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css"> ---
<link rel="stylesheet" href="../resources/layout.css" type="text/css"> <div class="row-fluid">
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css"> <div class="span12">
<title>Bing Maps example</title> <div id="map" class="map"></div>
</head> <select id="layer-select">
<body> <option value="Aerial">Aerial</option>
<option value="AerialWithLabels" selected>Aerial with labels</option>
<div class="navbar navbar-inverse navbar-fixed-top"> <option value="Road">Road</option>
<div class="navbar-inner"> <option value="collinsBart">Collins Bart</option>
<div class="container"> <option value="ordnanceSurvey">Ordnance Survey</option>
<a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a> </select>
</div> </div>
</div> </div>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
<select id="layer-select">
<option value="Aerial">Aerial</option>
<option value="AerialWithLabels" selected>Aerial with labels</option>
<option value="Road">Road</option>
<option value="collinsBart">Collins Bart</option>
<option value="ordnanceSurvey">Ordnance Survey</option>
</select>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<h4 id="title">Bing Maps example</h4>
<p id="shortdesc">Example of a Bing Maps layer.</p>
<div id="docs">
<p>When the Bing Maps tile service doesn't have tiles for a given resolution and region it returns "placeholder" tiles indicating that. Zoom the map beyond level 19 to see the "placeholder" tiles. If you want OpenLayers to display stretched tiles in place of "placeholder" tiles beyond zoom level 19 then set <code>maxZoom</code> to <code>19</code> in the options passed to <code>ol.source.BingMaps</code>.</p>
<p>See the <a href="bing-maps.js" target="_blank">bing-maps.js source</a> to see how this is done.</p>
</div>
<div id="tags">bing, bing-maps</div>
</div>
</div>
</div>
<script src="../resources/jquery.min.js" type="text/javascript"></script>
<script src="../resources/example-behaviour.js" type="text/javascript"></script>
<script src="loader.js?id=bing-maps" type="text/javascript"></script>
</body>
</html>