Merge pull request #3475 from openlayers/template-examples
Template examples
This commit is contained in:
Andreas Hocevar
4
.gitignore
vendored
4
.gitignore
vendored
@@ -1,8 +1,6 @@
|
||||
*.pyc
|
||||
/build/
|
||||
/examples/*.html.png
|
||||
/examples/example-list.js
|
||||
/examples/example-list.xml
|
||||
/examples/
|
||||
/node_modules/
|
||||
/dist/
|
||||
/coverage/
|
||||
|
||||
1
config/examples/example-verbatim.html
Normal file
1
config/examples/example-verbatim.html
Normal file
@@ -0,0 +1 @@
|
||||
{{{ contents }}}
|
||||
91
config/examples/example.html
Normal file
91
config/examples/example.html
Normal file
@@ -0,0 +1,91 @@
|
||||
<!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">
|
||||
{{{ resources }}}
|
||||
{{{ css_resource }}}
|
||||
<link rel="stylesheet" href="../resources/prism/prism.css" type="text/css">
|
||||
<script src="../resources/zeroclipboard/ZeroClipboard.min.js"></script>
|
||||
<title>{{ title }}</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">
|
||||
|
||||
{{{ contents }}}
|
||||
|
||||
<div class="row-fluid">
|
||||
|
||||
<div class="span12">
|
||||
<h4 id="title">{{ title }}</h4>
|
||||
<p id="shortdesc">{{ shortdesc }}</p>
|
||||
<div id="docs">
|
||||
{{{ docs }}}
|
||||
</div>
|
||||
<div id="tags">{{ tags }}</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="row-fluid">
|
||||
<hr>
|
||||
<form method="POST" target="_blank" action="http://jsfiddle.net/api/post/jquery/1.11.0/">
|
||||
<input type="button" class="btn btn-info" id="copy-button" value="Copy example code">
|
||||
<input type="submit" class="btn btn-primary" id="jsfiddle-button" value="Create JSFiddle">
|
||||
<textarea class="hidden" name="js">{{ js_inline }}</textarea>
|
||||
<textarea class="hidden" name="css">{{ css_inline }}</textarea>
|
||||
<textarea class="hidden" name="html">{{ contents }}</textarea>
|
||||
<input type="hidden" name="wrap" value="l">
|
||||
<input type="hidden" name="resources" value="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css,https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js,https://cdnjs.cloudflare.com/ajax/libs/ol3/{{ ol_version }}/ol.css,https://cdnjs.cloudflare.com/ajax/libs/ol3/{{ ol_version }}/ol.js">
|
||||
<pre><code id="example-source" class="language-markup"><!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>{{ title }}</title>
|
||||
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
|
||||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/{{ ol_version }}/ol.css" type="text/css">
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/{{ ol_version }}/ol.js"></script>
|
||||
{{ resources }}
|
||||
{{#if css_inline}}
|
||||
<style>
|
||||
{{ css_inline }}
|
||||
</style>
|
||||
{{/if}}
|
||||
</head>
|
||||
<body>
|
||||
<div class="container-fluid">
|
||||
|
||||
{{ contents }}
|
||||
</div>
|
||||
<script>
|
||||
{{ js_inline }}
|
||||
</script>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../resources/jquery.min.js"></script>
|
||||
<script src="../resources/bootstrap/js/bootstrap.min.js"></script>
|
||||
<script src="../resources/example-behaviour.js"></script>
|
||||
<script src="../resources/prism/prism.min.js"></script>
|
||||
{{{ js_resource }}}
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,4 +1,4 @@
|
||||
# Code examples
|
||||
This folder contains example templates. These templates are used to build the examples in `examples_src/` folder. The resulting examples are written to the `examples/` folder.
|
||||
|
||||
Although the main purpose of these examples is to demonstrate how to use the API, they also serve other purposes in the development cycle, and so are not exactly as they would be in normal application code:
|
||||
|
||||
@@ -13,4 +13,4 @@ To enable this, examples have the following, not needed in application code:
|
||||
* html files load `example-behaviour.js` and some js files define the Map renderer option as `exampleNS.getRendererFromQueryString()`; application code would not need these
|
||||
* in addition, examples use Twitter Bootstrap and jQuery; this is of course not a requirement - you may use whichever presentation/helper libraries you wish
|
||||
|
||||
See [Quick Start tutorial](http://openlayers.org/en/master/doc/quickstart.html) for a simple example of how application code would use the library.
|
||||
At the bottom of each example generated in the `examples/` folder, a modified version of its source code is shown. That modified version can be run standalone and is usually used as starting point for users to extend examples into their own application.
|
||||
@@ -1,72 +0,0 @@
|
||||
<!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>Accessibility example</title>
|
||||
<style>
|
||||
a.skiplink {
|
||||
position: absolute;
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
padding: 0;
|
||||
border: 0;
|
||||
height: 1px;
|
||||
width: 1px;
|
||||
overflow: hidden;
|
||||
}
|
||||
a.skiplink:focus {
|
||||
clip: auto;
|
||||
height: auto;
|
||||
width: auto;
|
||||
background-color: #fff;
|
||||
padding: 0.3em;
|
||||
}
|
||||
</style>
|
||||
</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" alt=""> OpenLayers 3 Examples</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container-fluid">
|
||||
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<a class="skiplink" href="#map">Go to map</a>
|
||||
<div id="map" class="map" tabindex="0"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row-fluid">
|
||||
|
||||
<div class="span12">
|
||||
<h4 id="title">Accessibility example</h4>
|
||||
<p id="shortdesc">Example of an accessible map.</p>
|
||||
<div id="docs">
|
||||
<p>This page's <code>map</code> element has its <code>tabindex</code> attribute set to <code>"0"</code>, that makes it focusable. To focus the map element you can either navigate to it using the "tab" key or use the skip link. When the <code>map</code> element is focused the + and - keys can be used to zoom in and out and the arrow keys can be used to pan.</p>
|
||||
<p>When clicked the "Zoom in" and "Zoom out" buttons below the map zoom the map in and out, respectively. You can navigate to the buttons using the "tab" key, and press the "enter" key to trigger the zooming action.</p>
|
||||
<p>See the <a href="accessible.js" target="_blank">accessible.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">accessibility, tabindex</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=accessible" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,65 +0,0 @@
|
||||
<!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>Animation 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="span12">
|
||||
<button id="rotate-left"><i class="icon-arrow-left"></i></button>
|
||||
<button id="rotate-right"><i class="icon-arrow-right"></i></button>
|
||||
<button id="rotate-around-rome">Rotate around Rome</button>
|
||||
<button id="pan-to-london">Pan to London</button>
|
||||
<button id="elastic-to-moscow">Elastic to Moscow</button>
|
||||
<button id="bounce-to-istanbul">Bounce to Istanbul</button>
|
||||
<button id="spin-to-rome">Spin to Rome</button>
|
||||
<button id="fly-to-bern">Fly to Bern</button>
|
||||
<button id="spiral-to-madrid">Spiral to Madrid</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row-fluid">
|
||||
|
||||
<div class="span12">
|
||||
<h4 id="title">Animation example</h4>
|
||||
<p id="shortdesc">Demonstrates animated pan, zoom, and rotation.</p>
|
||||
<div id="docs">
|
||||
<p>See the <a href="animation.js" target="_blank">animation.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">animation</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=animation" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,51 +0,0 @@
|
||||
<!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>Tiled ArcGIS MapServer 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="span12">
|
||||
<h4 id="title">Tiled ArcGIS MapServer example</h4>
|
||||
<p id="shortdesc">Example of a tiled ArcGIS layer.</p>
|
||||
<div id="docs">
|
||||
<p>See the <a href="arcgis-tiled.js" target="_blank">arcgis-tiled.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">arcgis, tile, tilelayer</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=arcgis-tiled" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,51 +0,0 @@
|
||||
<!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>Attributions 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="span12">
|
||||
<h4 id="title">Attributions example</h4>
|
||||
<p id="shortdesc">Example of a attributions visibily change on map resize, to collapse them on small maps.</p>
|
||||
<div id="docs">
|
||||
<p>See the <a href="attributions.js" target="_blank">attributions.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">attributions, openstreetmap</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=attributions" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,92 +0,0 @@
|
||||
<!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>
|
||||
<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>
|
||||
</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"/>
|
||||
</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>
|
||||
@@ -1,60 +0,0 @@
|
||||
<!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>Bing Maps 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>
|
||||
|
||||
<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>
|
||||
@@ -1,59 +0,0 @@
|
||||
<!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>Box selection 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">Box selection example</h4>
|
||||
<p id="shortdesc">Using a DragBox interaction to select features.</p>
|
||||
<div id="docs">
|
||||
<p>This example shows how to use a <code>DragBox</code> interaction to select features. Selected features are added
|
||||
to the feature overlay of a select interaction (<code>ol.interaction.Select</code>) for highlighting.</p>
|
||||
<p>Use <code>SHIFT+drag</code> to draw boxes.</p>
|
||||
<p>See the <a href="box-selection.js" target="_blank">box-selection.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">DragBox, feature, selection, box</div>
|
||||
</div>
|
||||
<div class="span4 offset4">
|
||||
<div id="info" class="alert alert-success">
|
||||
|
||||
</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=box-selection" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,74 +0,0 @@
|
||||
<!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>Brightness/contrast example</title>
|
||||
<style>
|
||||
#reset-brightness {
|
||||
min-width: 138px;
|
||||
}
|
||||
#reset-contrast {
|
||||
min-width: 120px;
|
||||
}
|
||||
</style>
|
||||
</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 id="no-webgl" class="alert alert-error" style="display: none">
|
||||
This example requires a browser that supports <a href="http://get.webgl.org/">WebGL</a>.
|
||||
</div>
|
||||
|
||||
<div class="btn-group">
|
||||
<button id="increase-brightness"><i class="icon-plus"></i></button>
|
||||
<button id="reset-brightness">Brightness</button>
|
||||
<button id="decrease-brightness"><i class="icon-minus"></i></button>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<button id="increase-contrast"><i class="icon-plus"></i></button>
|
||||
<button id="reset-contrast">Contrast</button>
|
||||
<button id="decrease-contrast"><i class="icon-minus"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row-fluid">
|
||||
|
||||
<div class="span12">
|
||||
<h4 id="title">Brightness/contrast example</h4>
|
||||
<p id="shortdesc">Example of brightness/contrast control on the client (WebGL only).</p>
|
||||
<div id="docs">
|
||||
<p>See the <a href="brightness-contrast.js" target="_blank">brightness-contrast.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">brightness, contrast, webgl</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=brightness-contrast" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,62 +0,0 @@
|
||||
<!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 type="text/css">
|
||||
.tooltip-inner {
|
||||
white-space: nowrap;
|
||||
}
|
||||
</style>
|
||||
<title>ol3 custom tooltips 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="span12">
|
||||
<h4 id="title">Custom tooltips</h4>
|
||||
<p id="shortdesc">
|
||||
This example shows how to customize the buttons tooltips with
|
||||
<a href="http://getbootstrap.com/javascript/#tooltips">Bootstrap</a>.
|
||||
</p>
|
||||
<div id="docs">
|
||||
<p>
|
||||
See the <a href="button-title.js" target="_blank">button-title.js source</a> to see how this is done.
|
||||
</p>
|
||||
</div>
|
||||
<div id="tags">
|
||||
custom, tooltip
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../resources/jquery.min.js" type="text/javascript"></script>
|
||||
<script src="../resources/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
|
||||
<script src="../resources/example-behaviour.js" type="text/javascript"></script>
|
||||
<script src="loader.js?id=button-title" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -1,52 +0,0 @@
|
||||
<!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>Canvas tiles 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="span12">
|
||||
<h4 id="title">Canvas tiles example</h4>
|
||||
<p id="shortdesc">Renders tiles with coordinates for debugging.</p>
|
||||
<div id="docs">
|
||||
<p>The black grid tiles are generated on the client with an HTML5 canvas. Note that the tile coordinates are ol3 normalized tile coordinates (origin bottom left), not OSM tile coordinates (origin top left).</p>
|
||||
<p>See the <a href="canvas-tiles.js" target="_blank">canvas-tiles.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">layers, openstreetmap, canvas</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=canvas-tiles" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,131 +0,0 @@
|
||||
<!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>
|
||||
.mapcontainer {
|
||||
position: relative;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.map {
|
||||
width: 1000px;
|
||||
height: 600px;
|
||||
}
|
||||
div.ol-zoom {
|
||||
top: 178px;
|
||||
left: 158px;
|
||||
}
|
||||
div.ol-attribution {
|
||||
bottom: 30px;
|
||||
right: 50px;
|
||||
}
|
||||
.padding-top {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0px;
|
||||
width: 1000px;
|
||||
height: 170px;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
.padding-left {
|
||||
position: absolute;
|
||||
top: 170px;
|
||||
left: 0;
|
||||
width: 150px;
|
||||
height: 400px;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
.padding-right {
|
||||
position: absolute;
|
||||
top: 170px;
|
||||
left: 950px;
|
||||
width: 50px;
|
||||
height: 400px;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
.padding-bottom {
|
||||
position: absolute;
|
||||
top: 570px;
|
||||
left: 0px;
|
||||
width: 1000px;
|
||||
height: 30px;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
.center {
|
||||
position: absolute;
|
||||
border: solid 1px black;
|
||||
top: 490px;
|
||||
left: 560px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
</style>
|
||||
<title>Advanced View Positioning 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 mapcontainer">
|
||||
<div id="map" class="map"></div>
|
||||
<div class="padding-top"></div>
|
||||
<div class="padding-left"></div>
|
||||
<div class="padding-right"></div>
|
||||
<div class="padding-bottom"></div>
|
||||
<div class="center"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<button id="zoomtoswitzerlandbest">Zoom to Switzerland</button> (best fit),<br/>
|
||||
<button id="zoomtoswitzerlandconstrained">Zoom to Switzerland</button> (respect resolution constraint).<br/>
|
||||
<button id="zoomtoswitzerlandnearest">Zoom to Switzerland</button> (nearest),<br/>
|
||||
<button id="zoomtolausanne">Zoom to Lausanne</button> (with min resolution),<br/>
|
||||
<button id="centerlausanne">Center on Lausanne</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row-fluid">
|
||||
|
||||
<div class="span12">
|
||||
<h4 id="title">Advanced View Positioning example</h4>
|
||||
<p id="shortdesc">This example demonstrates how a map's view can be
|
||||
adjusted so a geometry or coordinate is positioned at a specific
|
||||
pixel location. The map above has top, right, bottom, and left
|
||||
padding applied inside the viewport. The view's <code>fitGeometry</code> method
|
||||
is used to fit a geometry in the view with the same padding. The
|
||||
view's <code>centerOn</code> method is used to position a coordinate (Lausanne)
|
||||
at a specific pixel location (the center of the black box).</p>
|
||||
<div id="docs">
|
||||
<p>Use <code>Alt</code>+<code>Shift</code>+drag to rotate the map.</p>
|
||||
<p>See the <a href="center.js" target="_blank">center.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">center, rotation, openstreetmap</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="../resources/jquery.min.js" type="text/javascript"></script>
|
||||
<script src="loader.js?id=center" type="text/javascript"></script>
|
||||
<script src="../resources/example-behaviour.js" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,51 +0,0 @@
|
||||
<!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>Clustering 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="span12">
|
||||
<h4 id="title">Clustering example</h4>
|
||||
<p id="shortdesc">Example of using <code>ol.Cluster</code>.</p>
|
||||
<div id="docs">
|
||||
<p>See the <a href="cluster.js" target="_blank">cluster.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">cluster vector</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=cluster" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,64 +0,0 @@
|
||||
<!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 type="text/css">
|
||||
.rotate-north {
|
||||
top: 65px;
|
||||
left: .5em;
|
||||
}
|
||||
.ol-touch .rotate-north {
|
||||
top: 80px;
|
||||
}
|
||||
</style>
|
||||
<title>ol3 custom controls 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="span12">
|
||||
<h4 id="title">Custom controls</h4>
|
||||
<p id="shortdesc">This example shows how to create custom controls.</p>
|
||||
<div id="docs">
|
||||
<p>
|
||||
This example creates a "rotate to north" button.
|
||||
See the <a href="custom-controls.js" target="_blank">custom-controls.js
|
||||
source</a> to see how this is done.
|
||||
</p>
|
||||
</div>
|
||||
<div id="tags">
|
||||
custom, control
|
||||
</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=custom-controls" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -1,54 +0,0 @@
|
||||
<!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>d3 integration 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="span12">
|
||||
<h4 id="title">d3 integration example</h4>
|
||||
<p id="shortdesc">Example of using ol3 and d3 together.</p>
|
||||
<div id="docs">
|
||||
<p>The example loads TopoJSON geometries and uses d3 (<code>d3.geo.path</code>) to render these geometries to a canvas element that is then used as the image of an ol3 image layer.</p>
|
||||
<p>See the <a href="d3.js" target="_blank">d3.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">d3</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="../resources/jquery.min.js" type="text/javascript"></script>
|
||||
<script src="http://d3js.org/d3.v3.min.js"></script>
|
||||
<script src="http://d3js.org/topojson.v1.min.js"></script>
|
||||
<script src="../resources/example-behaviour.js" type="text/javascript"></script>
|
||||
<script src="loader.js?id=d3" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,58 +0,0 @@
|
||||
<!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>Device-Orientation 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="span12">
|
||||
<h4 id="title">Device orientation example</h4>
|
||||
<label class="checkbox" for="track">
|
||||
<input id="track" type="checkbox"/>track changes
|
||||
</label>
|
||||
<p>α : <code id="alpha"></code></p>
|
||||
<p>β : <code id="beta"></code></p>
|
||||
<p>γ : <code id="gamma"></code></p>
|
||||
<p>heading : <code id="heading"></code></p>
|
||||
<p id="shortdesc">Listen to DeviceOrientation events</p>
|
||||
<div id="docs">
|
||||
<p>See the <a href="device-orientation.js" target="_blank">device-orientation.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">orientation, openstreetmap</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=device-orientation" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,56 +0,0 @@
|
||||
<!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>Drag-and-Drop image vector 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">Drag-and-Drop image vector example</h4>
|
||||
<p id="shortdesc">Example of using the drag-and-drop interaction with a ol.source.ImageVector. Drag and drop GPX, GeoJSON, IGC, KML, or TopoJSON files on to the map. Each file is rendered to an image on the client.</p>
|
||||
<div id="docs">
|
||||
<p>See the <a href="drag-and-drop-image-vector.js" target="_blank">drag-and-drop-image-vector.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">drag-and-drop-image-vector, gpx, geojson, igc, kml, topojson, vector, image</div>
|
||||
</div>
|
||||
<div class="span4 offset4">
|
||||
<div id="info" class="alert alert-success">
|
||||
|
||||
</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=drag-and-drop-image-vector" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,56 +0,0 @@
|
||||
<!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>Drag-and-Drop 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">Drag-and-Drop example</h4>
|
||||
<p id="shortdesc">Example of using the drag-and-drop interaction. Drag and drop GPX, GeoJSON, IGC, KML, or TopoJSON files on to the map. There is no projection transform support, so this will only work with data in EPSG:4326 and EPSG:3857.</p>
|
||||
<div id="docs">
|
||||
<p>See the <a href="drag-and-drop.js" target="_blank">drag-and-drop.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">drag-and-drop, gpx, geojson, igc, kml, topojson</div>
|
||||
</div>
|
||||
<div class="span4 offset4">
|
||||
<div id="info" class="alert alert-success">
|
||||
|
||||
</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=drag-and-drop" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,51 +0,0 @@
|
||||
<!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>Drag features 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="span12">
|
||||
<h4 id="title">Drag features example</h4>
|
||||
<p id="shortdesc">Example of a drag features interaction.</p>
|
||||
<div id="docs">
|
||||
<p>See the <a href="drag-features.js" target="_blank">drag-features.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">drag, feature, vector, editing</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=drag-features" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,52 +0,0 @@
|
||||
<!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>Drag rotate and zoom 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="span12">
|
||||
<h4 id="title">Drag rotate and zoom example</h4>
|
||||
<p id="shortdesc">A single interaction to drag, rotate, and zoom.</p>
|
||||
<div id="docs">
|
||||
<p><code>Shift</code> + Drag to rotate and zoom the map around its center.</p>
|
||||
<p>See the <a href="drag-rotate-and-zoom.js" target="_blank">drag-rotate-and-zoom.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">drag, rotate, zoom, interaction</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=drag-rotate-and-zoom" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,61 +0,0 @@
|
||||
<!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>Draw and modify features 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="span12">
|
||||
<h4 id="title">Draw and modify features example</h4>
|
||||
<p id="shortdesc">Example of using the ol.interaction.Draw interaction together with
|
||||
the ol.interaction.Modify interaction.</p>
|
||||
<form class="form-inline">
|
||||
<label>Geometry type </label>
|
||||
<select id="type">
|
||||
<option value="Point">Point</option>
|
||||
<option value="LineString">LineString</option>
|
||||
<option value="Polygon">Polygon</option>
|
||||
</select>
|
||||
</form>
|
||||
|
||||
<div id="docs">
|
||||
<p>See the <a href="draw-and-modify-features.js" target="_blank">draw-and-modify-features.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">draw, edit, modify, vector, featureoverlay</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=draw-and-modify-features" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,62 +0,0 @@
|
||||
<!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>Draw features 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="span12">
|
||||
<h4 id="title">Draw features example</h4>
|
||||
<p id="shortdesc">Example of using the ol.interaction.Draw interaction.</p>
|
||||
<form class="form-inline">
|
||||
<label>Geometry type </label>
|
||||
<select id="type">
|
||||
<option value="None">None</option>
|
||||
<option value="Point">Point</option>
|
||||
<option value="LineString">LineString</option>
|
||||
<option value="Polygon">Polygon</option>
|
||||
<option value="Circle">Circle</option>
|
||||
</select>
|
||||
</form>
|
||||
|
||||
<div id="docs">
|
||||
<p>See the <a href="draw-features.js" target="_blank">draw-features.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">draw, edit, vector</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=draw-features" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,51 +0,0 @@
|
||||
<!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>Dynamic data 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="span12">
|
||||
<h4 id="title">Dynamic data example</h4>
|
||||
<p id="shortdesc">Example of dynamic data.</p>
|
||||
<div id="docs">
|
||||
<p>See the <a href="dynamic-data.js" target="_blank">dynamic-data.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">dynamic-data</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=dynamic-data" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,75 +0,0 @@
|
||||
<!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>Earthquake Clusters</title>
|
||||
<style>
|
||||
#map {
|
||||
position: relative;
|
||||
}
|
||||
#info {
|
||||
position: absolute;
|
||||
height: 1px;
|
||||
width: 1px;
|
||||
z-index: 100;
|
||||
}
|
||||
.tooltip.in {
|
||||
opacity: 1;
|
||||
filter: alpha(opacity=100);
|
||||
}
|
||||
.tooltip.top .tooltip-arrow {
|
||||
border-top-color: white;
|
||||
}
|
||||
.tooltip-inner {
|
||||
border: 2px solid white;
|
||||
}
|
||||
</style>
|
||||
</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="span12">
|
||||
<h4 id="title">Earthquake Clusters</h4>
|
||||
<p id="shortdesc">Demonstrates the use of style geometries to render source features of a cluster.</p>
|
||||
<div id="docs">
|
||||
<p>
|
||||
This example parses a KML file and renders the features as clusters on a vector layer. The styling in this example is quite involved. Single earthquake locations (rendered as stars) have a size relative to their magnitude. Clusters have an opacity relative to the number of features in the cluster, and a size that represents the extent of the features that make up the cluster. When clicking or hovering on a cluster, the individual features that make up the cluster will be shown.
|
||||
</p>
|
||||
<p>To achieve this, we make heavy use of style functions and <code>ol.style.Style#geometry</code>. See the <a href="earthquake-clusters.js" target="_blank">earthquake-clusters.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">KML, vector, style, geometry, cluster</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="../resources/jquery.min.js" type="text/javascript"></script>
|
||||
<script src="../resources/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
|
||||
<script src="../resources/example-behaviour.js" type="text/javascript"></script>
|
||||
<script src="loader.js?id=earthquake-clusters" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,51 +0,0 @@
|
||||
<!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>EPSG:4326 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="span12">
|
||||
<h4 id="title">EPSG:4326 example</h4>
|
||||
<p id="shortdesc">Example of a map in EPSG:4326.</p>
|
||||
<div id="docs">
|
||||
<p>See the <a href="epsg-4326.js" target="_blank">epsg-4326.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">epsg4326</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=epsg-4326" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,56 +0,0 @@
|
||||
<!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>Export map 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 id="no-download" class="alert alert-error" style="display: none">
|
||||
This example requires a browser that supports the
|
||||
<a href="http://caniuse.com/#feat=download">link download</a> attribute.
|
||||
</div>
|
||||
<a id="export-png" class="btn" download="map.png"><i class="icon-download"></i> Export PNG</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row-fluid">
|
||||
|
||||
<div class="span12">
|
||||
<h4 id="title">Export map example</h4>
|
||||
<p id="shortdesc">Example of exporting a map as a PNG image.</p>
|
||||
<div id="docs">
|
||||
<p>See the <a href="export-map.js" target="_blank">export-map.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">export, png, openstreetmap</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=export-map" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,64 +0,0 @@
|
||||
<!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>Fractal Example</title>
|
||||
<style>
|
||||
.map {
|
||||
background: whitesmoke;
|
||||
}
|
||||
#depth {
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
</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="span12">
|
||||
<h4 id="title">Fractal Example</h4>
|
||||
<p id="shortdesc">Example of a fractal.</p>
|
||||
<label for="depth">
|
||||
depth:
|
||||
<input id="depth" type="range" min="0" max="9" step="1" value="5">
|
||||
(<span id="count">#</span> points)
|
||||
</label>
|
||||
<div id="docs">
|
||||
<p>See the <a href="fractal.js" target="_blank">fractal.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">fractal, vector</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=fractal" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,64 +0,0 @@
|
||||
<!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>
|
||||
.map:-moz-full-screen {
|
||||
height: 100%;
|
||||
}
|
||||
.map:-webkit-full-screen {
|
||||
height: 100%;
|
||||
}
|
||||
.map:fullscreen {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
<title>Full screen drag rotate and zoom 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="span12">
|
||||
<h4 id="title">Full screen drag rotate and zoom example</h4>
|
||||
<p id="shortdesc">Example of drag rotate and zoom control with full screen effect.</p>
|
||||
<div id="docs">
|
||||
<p>Hold down <code>Shift</code> + drag to rotate and zoom. Click the button in the top right corner to go full screen. Then do the <code>Shift</code> + drag thing again.</p>
|
||||
<p>If there is no button on the map, your browser does not support the <a href="http://caniuse.com/#feat=fullscreen">Full Screen API</a>.</p>
|
||||
<p>See the <a href="full-screen-drag-rotate-and-zoom.js" target="_blank">full-screen-drag-rotate-and-zoom.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">full-screen, drag, rotate, zoom, 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=full-screen-drag-rotate-and-zoom" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,70 +0,0 @@
|
||||
<!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>
|
||||
.map:-moz-full-screen {
|
||||
height: 100%;
|
||||
}
|
||||
.map:-webkit-full-screen {
|
||||
height: 100%;
|
||||
}
|
||||
.map:-ms-fullscreen {
|
||||
height: 100%;
|
||||
}
|
||||
.map:fullscreen {
|
||||
height: 100%;
|
||||
}
|
||||
.ol-rotate {
|
||||
top: 3em;
|
||||
}
|
||||
</style>
|
||||
<title>Full screen control 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="span12">
|
||||
<h4 id="title">Full screen control example</h4>
|
||||
<p id="shortdesc">Example of a full screen control.</p>
|
||||
<div id="docs">
|
||||
<p>Click the control in the top right corner to go full screen. Click it again to exit full screen.</p>
|
||||
<p>If there is no button on the map, your browser does not support the <a href="http://caniuse.com/#feat=fullscreen">Full Screen API</a>.</p>
|
||||
<p>See the <a href="full-screen.js" target="_blank">full-screen.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">full-screen, 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=full-screen" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,51 +0,0 @@
|
||||
<!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>GeoJSON 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="span12">
|
||||
<h4 id="title">GeoJSON example</h4>
|
||||
<p id="shortdesc">Example of GeoJSON features.</p>
|
||||
<div id="docs">
|
||||
<p>See the <a href="geojson.js" target="_blank">geojson.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">geojson, vector, openstreetmap</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=geojson" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,61 +0,0 @@
|
||||
<!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>Geolocation 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="span8">
|
||||
<h4 id="title">Geolocation example</h4>
|
||||
<label class="checkbox" for="track">
|
||||
<input id="track" type="checkbox"/>track position
|
||||
</label>
|
||||
<p>position accuracy : <code id="accuracy"></code></p>
|
||||
<p>altitude : <code id="altitude"></code></p>
|
||||
<p>altitude accuracy : <code id="altitudeAccuracy"></code></p>
|
||||
<p>heading : <code id="heading"></code></p>
|
||||
<p>speed : <code id="speed"></code></p>
|
||||
|
||||
<p id="shortdesc">Example of a geolocation map.</p>
|
||||
<div id="docs">
|
||||
<p>See the <a href="geolocation.js" target="_blank">geolocation.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">geolocation, openstreetmap</div>
|
||||
</div>
|
||||
<div class="span4 pull-right">
|
||||
<div id="info" class="alert alert-error" style="display: none;"></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=geolocation" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,59 +0,0 @@
|
||||
<!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="../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>GetFeatureInfo example (image layer)</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">GetFeatureInfo example (image layer)</h4>
|
||||
<p id="shortdesc">This example shows how to trigger WMS GetFeatureInfo requests on click for a WMS image layer.</p>
|
||||
<div id="docs">
|
||||
<p>Additionally <code>map.forEachLayerAtPixel</code> is used to change the mouse
|
||||
pointer when hovering a non-transparent pixel on the map.</p>
|
||||
<p>See the <a href="getfeatureinfo-image.js" target="_blank">getfeatureinfo-image.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">getfeatureinfo, forEachLayerAtPixel</div>
|
||||
</div>
|
||||
<div class="span4 offset4">
|
||||
<div id="info" class="alert alert-success">
|
||||
|
||||
</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=getfeatureinfo-image" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,59 +0,0 @@
|
||||
<!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="../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>WMS GetFeatureInfo example (tile layer)</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">WMS GetFeatureInfo example (tile layer)</h4>
|
||||
<p id="shortdesc">This example shows how to trigger WMS GetFeatureInfo requests on click for a WMS tile layer.</p>
|
||||
<div id="docs">
|
||||
<p>Additionally <code>map.forEachLayerAtPixel</code> is used to change the mouse
|
||||
pointer when hovering a non-transparent pixel on the map.</p>
|
||||
<p>See the <a href="getfeatureinfo-tile.js" target="_blank">getfeatureinfo-tile.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">getfeatureinfo, forEachLayerAtPixel</div>
|
||||
</div>
|
||||
<div class="span4 offset4">
|
||||
<div id="info" class="alert alert-success">
|
||||
|
||||
</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=getfeatureinfo-tile" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,62 +0,0 @@
|
||||
<!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>GPX 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 id="no-download" class="alert alert-error" style="display: none">
|
||||
The "Export GPX" functionality requires a browser that supports the
|
||||
<a href="http://caniuse.com/#feat=download">link download</a> attribute.
|
||||
</div>
|
||||
<a id="export-gpx" class="btn" download="map.gpx"><i class="icon-download"></i>Export GPX</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row-fluid">
|
||||
|
||||
<div class="span4">
|
||||
<h4 id="title">GPX example</h4>
|
||||
<p id="shortdesc">Example of using the GPX source.</p>
|
||||
<div id="docs">
|
||||
<p>See the <a href="gpx.js" target="_blank">gpx.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">GPX</div>
|
||||
</div>
|
||||
<div class="span4 offset4">
|
||||
<div id="info" class="alert alert-success">
|
||||
|
||||
</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=gpx" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,51 +0,0 @@
|
||||
<!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>Graticule 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="span12">
|
||||
<h4 id="title">Graticule example</h4>
|
||||
<p id="shortdesc">This example shows how to add a graticule overlay to a map.</p>
|
||||
<div id="docs">
|
||||
<p>See the <a href="graticule.js" target="_blank">graticule.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">graticule</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=graticule" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,61 +0,0 @@
|
||||
<!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="../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>Earthquakes heatmap</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 id="info"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row-fluid">
|
||||
|
||||
<div class="span8">
|
||||
<h4 id="title">Earthquakes heatmap</h4>
|
||||
<p id="shortdesc">Demonstrates the use of a heatmap layer.</p>
|
||||
<div id="docs">
|
||||
<p>
|
||||
This example parses a KML file and renders the features as a <code>ol.layer.Heatmap</code> layer.
|
||||
</p>
|
||||
<p>See the <a href="heatmap-earthquakes.js" target="_blank">heatmap-earthquakes.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">heatmap, kml, vector, style</div>
|
||||
</div>
|
||||
|
||||
<div class="span4">
|
||||
<form>
|
||||
<label>radius size</label>
|
||||
<input id="radius" type="range" min="1" max="50" step="1" value="5"/>
|
||||
<label>blur size</label>
|
||||
<input id="blur" type="range" min="1" max="50" step="1" value="15"/>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../resources/jquery.min.js" type="text/javascript"></script>
|
||||
<script src="loader.js?id=heatmap-earthquakes" type="text/javascript"></script>
|
||||
<script src="../resources/example-behaviour.js" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,74 +0,0 @@
|
||||
<!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>Hue/saturation example</title>
|
||||
<style>
|
||||
#reset-hue {
|
||||
min-width: 90px;
|
||||
}
|
||||
#reset-saturation {
|
||||
min-width: 124px;
|
||||
}
|
||||
</style>
|
||||
</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 id="no-webgl" class="alert alert-error" style="display: none">
|
||||
This example requires a browser that supports <a href="http://get.webgl.org/">WebGL</a>.
|
||||
</div>
|
||||
|
||||
<div class="btn-group">
|
||||
<button id="increase-hue"><i class="icon-plus"></i></button>
|
||||
<button id="reset-hue">Hue</button>
|
||||
<button id="decrease-hue"><i class="icon-minus"></i></button>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<button id="increase-saturation"><i class="icon-plus"></i></button>
|
||||
<button id="reset-saturation">Saturation</button>
|
||||
<button id="decrease-saturation"><i class="icon-minus"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row-fluid">
|
||||
|
||||
<div class="span12">
|
||||
<h4 id="title">Hue/saturation example</h4>
|
||||
<p id="shortdesc">Example of hue/saturation control on the client (WebGL only).</p>
|
||||
<div id="docs">
|
||||
<p>See the <a href="hue-saturation.js" target="_blank">hue-saturation.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">hue, saturation, webgl</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=hue-saturation" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,58 +0,0 @@
|
||||
<!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>Icon sprites with WebGL 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="span8">
|
||||
<h4 id="title">Icon sprite with WebGL example</h4>
|
||||
<p id="shortdesc">Icon sprite with WebGL.</p>
|
||||
<div id="docs">
|
||||
<p>See the <a href="icon-sprite-webgl.js" target="_blank">icon-sprite-webgl.js source</a> to see how this is done.</p>
|
||||
<p>In this example a sprite image is used for the icon styles. Using a sprite is required to get good performance with WebGL.</p>
|
||||
</div>
|
||||
<div id="tags">webgl, icon, sprite, vector, point</div>
|
||||
</div>
|
||||
<div class="span2 offset2">
|
||||
<div id="info" class="alert alert-success">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="../resources/jquery.min.js" type="text/javascript"></script>
|
||||
<script src="../resources/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
|
||||
<script src="../resources/example-behaviour.js" type="text/javascript"></script>
|
||||
<script src="loader.js?id=icon-sprite-webgl" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,62 +0,0 @@
|
||||
<!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>Vector Icon Example</title>
|
||||
<style>
|
||||
#map {
|
||||
position: relative;
|
||||
}
|
||||
#popup {
|
||||
padding-bottom: 45px;
|
||||
}
|
||||
</style>
|
||||
</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 id="popup"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row-fluid">
|
||||
|
||||
<div class="span12">
|
||||
<h4 id="title">Icon example</h4>
|
||||
<p id="shortdesc">Example using an icon to symbolize a point.</p>
|
||||
<div id="docs">
|
||||
<p>See the <a href="icon.js" target="_blank">icon.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">vector, style, icon, marker, popup</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="../resources/jquery.min.js" type="text/javascript"></script>
|
||||
<script src="../resources/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
|
||||
<script src="../resources/example-behaviour.js" type="text/javascript"></script>
|
||||
<script src="loader.js?id=icon" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,58 +0,0 @@
|
||||
<!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>IGC 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">IGC example</h4>
|
||||
<p id="shortdesc">Example of tracks recorded from multiple paraglider flights on the same day, read from an IGC file.</p>
|
||||
<div id="docs">
|
||||
<p>The five tracks contain a total of 49,707 unique coordinates. Zoom in to see more detail. The background layer is from <a href="http://www.opencyclemap.org/">OpenCycleMap</a>.</p>
|
||||
<p>See the <a href="igc.js" target="_blank">igc.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<input id="time" type="range" value="0" steps="1" />
|
||||
<div id="tags">complex-geometry, closest-feature, igc, opencyclemap</div>
|
||||
</div>
|
||||
<div class="span4 offset4">
|
||||
<div id="info" class="alert alert-success">
|
||||
|
||||
</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=igc" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,65 +0,0 @@
|
||||
<!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>Image Filter 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="span12">
|
||||
<h4 id="title">Image filter example</h4>
|
||||
<p id="shortdesc">Apply a filter to imagery</p>
|
||||
<select id="kernel" name="kernel">
|
||||
<option>none</option>
|
||||
<option selected>sharpen</option>
|
||||
<option value="sharpenless">sharpen less</option>
|
||||
<option>blur</option>
|
||||
<option>shadow</option>
|
||||
<option>emboss</option>
|
||||
<option value="edge">edge detect</option>
|
||||
</select>
|
||||
<div id="docs">
|
||||
<p>
|
||||
Layer rendering can be manipulated in <code>precompose</code> and <code>postcompose</code> event listeners.
|
||||
These listeners get an event with a reference to the Canvas rendering context.
|
||||
In this example, the <code>postcompose</code> listener applies a filter to the image data.
|
||||
</p>
|
||||
<p>See the <a href="image-filter.js" target="_blank">image-filter.js source</a> for details on how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">filter, image manipulation</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=image-filter" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,79 +0,0 @@
|
||||
<!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>Image load events example</title>
|
||||
<style>
|
||||
.map {
|
||||
background: #E0ECED;
|
||||
}
|
||||
.wrapper {
|
||||
position: relative;
|
||||
}
|
||||
#progress {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 2px;
|
||||
background: rgba(0, 60, 136, 0.4);
|
||||
width: 0;
|
||||
transition: width 250ms;
|
||||
}
|
||||
</style>
|
||||
</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 wrapper">
|
||||
<div id="map" class="map"></div>
|
||||
<div id="progress"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row-fluid">
|
||||
|
||||
<div class="span12">
|
||||
<h4 id="title">Image load events example</h4>
|
||||
<p id="shortdesc">Example using image load events.</p>
|
||||
<div id="docs">
|
||||
<p>
|
||||
Image sources fire events related to image loading. You can
|
||||
listen for <code>imageloadstart</code>, <code>imageloadend</code>,
|
||||
and <code>imageloaderror</code> type events to monitor image loading
|
||||
progress. This example registers listeners for these events and
|
||||
renders an image loading progress bar at the bottom of the map.
|
||||
</p>
|
||||
<p>
|
||||
See the <a href="image-load-events.js" target="_blank">image-load-events.js source</a>
|
||||
for more detail on how this is done.
|
||||
</p>
|
||||
</div>
|
||||
<div id="tags">image, events, loading</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=image-load-events" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,59 +0,0 @@
|
||||
<!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>Image vector layer 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="span8">
|
||||
<h4 id="title">Image vector example</h4>
|
||||
<p id="shortdesc">Example of an image vector layer.</p>
|
||||
<div id="docs">
|
||||
<p>This example uses a <code>ol.source.ImageVector</code> source. That source gets vector features from the
|
||||
<code>ol.source.Vector</code> it's configured with, and draw these features to an HTML5 canvas element that
|
||||
is then used as the image of an image layer.</p>
|
||||
<p>See the <a href="image-vector-layer.js" target="_blank">image-vector-layer.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">vector, image</div>
|
||||
</div>
|
||||
<div class="span4">
|
||||
<div id="info" class="alert alert-success">
|
||||
|
||||
</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=image-vector-layer" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,75 +0,0 @@
|
||||
<!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>Earthquakes in KML</title>
|
||||
<style>
|
||||
#map {
|
||||
position: relative;
|
||||
}
|
||||
#info {
|
||||
position: absolute;
|
||||
height: 1px;
|
||||
width: 1px;
|
||||
z-index: 100;
|
||||
}
|
||||
.tooltip.in {
|
||||
opacity: 1;
|
||||
filter: alpha(opacity=100);
|
||||
}
|
||||
.tooltip.top .tooltip-arrow {
|
||||
border-top-color: white;
|
||||
}
|
||||
.tooltip-inner {
|
||||
border: 2px solid white;
|
||||
}
|
||||
</style>
|
||||
</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 id="info"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row-fluid">
|
||||
|
||||
<div class="span12">
|
||||
<h4 id="title">Earthquakes in KML</h4>
|
||||
<p id="shortdesc">Demonstrates the use of a Shape symbolizer to render earthquake locations.</p>
|
||||
<div id="docs">
|
||||
<p>
|
||||
This example parses a KML file and renders the features as a vector layer. The layer is given a <code>style</code> that renders earthquake locations with a size relative to their magnitude.
|
||||
</p>
|
||||
<p>See the <a href="kml-earthquakes.js" target="_blank">kml-earthquakes.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">KML, vector, style, tooltip</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="../resources/jquery.min.js" type="text/javascript"></script>
|
||||
<script src="../resources/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
|
||||
<script src="../resources/example-behaviour.js" type="text/javascript"></script>
|
||||
<script src="loader.js?id=kml-earthquakes" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,63 +0,0 @@
|
||||
<!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>Timezones in KML</title>
|
||||
<style>
|
||||
#map {
|
||||
position: relative;
|
||||
}
|
||||
#info {
|
||||
position: absolute;
|
||||
height: 1px;
|
||||
width: 1px;
|
||||
z-index: 100;
|
||||
}
|
||||
</style>
|
||||
</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 id="info"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row-fluid">
|
||||
|
||||
<div class="span12">
|
||||
<h4 id="title">Timezones in KML</h4>
|
||||
<p id="shortdesc">Demonstrates rendering timezones from KML.</p>
|
||||
<div id="docs">
|
||||
<p>This example parses a KML file and renders the features as a vector layer. The layer is given a <code>ol.style.Style</code> that fills timezones yellow with an opacity calculated based on the current offset to local noon.</p>
|
||||
<p>See the <a href="kml-timezones.js" target="_blank">kml-timezones.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">KML, vector, style</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="../resources/jquery.min.js" type="text/javascript"></script>
|
||||
<script src="../resources/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
|
||||
<script src="../resources/example-behaviour.js" type="text/javascript"></script>
|
||||
<script src="loader.js?id=kml-timezones" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,61 +0,0 @@
|
||||
<!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>KML 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 id="no-download" class="alert alert-error" style="display: none">
|
||||
The "Export KML" functionality requires a browser that supports the
|
||||
<a href="http://caniuse.com/#feat=download">link download</a> attribute.
|
||||
</div>
|
||||
<a id="export-kml" class="btn" download="map.kml"><i class="icon-download"></i>Export KML</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row-fluid">
|
||||
|
||||
<div class="span4">
|
||||
<h4 id="title">KML example</h4>
|
||||
<p id="shortdesc">Example of using the KML source.</p>
|
||||
<div id="docs">
|
||||
<p>See the <a href="kml.js" target="_blank">kml.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">KML</div>
|
||||
</div>
|
||||
<div class="span4 offset4">
|
||||
<div id="info" class="alert alert-success">
|
||||
|
||||
</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=kml" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,56 +0,0 @@
|
||||
<!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>Layer WebGL clipping 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 id="no-webgl" class="alert alert-error" style="display: none">
|
||||
This example requires a browser that supports <a href="http://get.webgl.org/">WebGL</a>.
|
||||
</div>
|
||||
|
||||
<div class="row-fluid">
|
||||
|
||||
<div class="span12">
|
||||
<h4 id="title">Layer WebGL clipping example</h4>
|
||||
<p id="shortdesc">Layer WebGL clipping example.</p>
|
||||
<div id="docs">
|
||||
<p>This example shows how to use the <code>precompose</code> and <code>postcompose</code> rendering hooks to clip layers using WebGL.</p>
|
||||
<p>See the <a href="layer-clipping-webgl.js" target="_blank">layer-clipping-webgl.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">clipping, webgl, openstreetmap</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=layer-clipping-webgl" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,51 +0,0 @@
|
||||
<!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>Layer clipping 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="span12">
|
||||
<h4 id="title">Layer clipping example</h4>
|
||||
<p id="shortdesc">Layer clipping example.</p>
|
||||
<div id="docs">
|
||||
<p>See the <a href="layer-clipping.js" target="_blank">layer-clipping.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">clipping, openstreetmap</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=layer-clipping" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,68 +0,0 @@
|
||||
<!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>Limited Layer Extent</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="span12">
|
||||
<h4 id="title">Limited layer extent</h4>
|
||||
<p id="shortdesc">Restricting layer rendering to a limited extent.</p>
|
||||
<div id="docs">
|
||||
<p>
|
||||
This example uses the <code>layer.setExtent()</code> method to
|
||||
modify the extent of the overlay layer. Use the controls below
|
||||
to limit rendering based on an extent.
|
||||
</p>
|
||||
<p>
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-default" id="northwest">northwest</button>
|
||||
<button type="button" class="btn btn-default" id="northeast">northeast</button>
|
||||
<button type="button" class="btn btn-default" id="southeast">southeast</button>
|
||||
<button type="button" class="btn btn-default" id="southwest">southwest</button>
|
||||
<button type="button" class="btn btn-default" id="world">world</button>
|
||||
</div>
|
||||
</p>
|
||||
<p>
|
||||
See the <a href="layer-extent.js" target="_blank">layer-extent.js
|
||||
source</a> for details on how this is done.
|
||||
</p>
|
||||
</div>
|
||||
<div id="tags">extent, tilejson</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=layer-extent" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,126 +0,0 @@
|
||||
<!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="../resources/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>
|
||||
@@ -1,60 +0,0 @@
|
||||
<!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>Layer Spy 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="span12">
|
||||
<h4 id="title">Layer spy example</h4>
|
||||
<p id="shortdesc">View a portion of one layer over another</p>
|
||||
<div id="docs">
|
||||
<p>
|
||||
Layer rendering can be manipulated in <code>precompose</code> and <code>postcompose</code> event listeners.
|
||||
These listeners get an event with a reference to the Canvas rendering context.
|
||||
In this example, the <code>precompose</code> listener sets a clipping mask around the most
|
||||
recent mouse position, giving you a spyglass effect for viewing one layer over another.
|
||||
</p>
|
||||
<p>
|
||||
Move around the map to see the effect. Use the ↑ up and ↓ down arrow keys to adjust the spyglass size.
|
||||
</p>
|
||||
<p>See the <a href="layer-spy.js" target="_blank">layer-spy.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">spy, image manipulation</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=layer-spy" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,52 +0,0 @@
|
||||
<!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>Layer Swipe 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>
|
||||
<input id="swipe" type="range" style="width: 100%">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row-fluid">
|
||||
|
||||
<div class="span12">
|
||||
<h4 id="title">Layer Swipe example</h4>
|
||||
<p id="shortdesc">Example of a Layer swipe map.</p>
|
||||
<div id="docs">
|
||||
<p>See the <a href="layer-swipe.js" target="_blank">layer-swipe.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">swipe, openstreetmap</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=layer-swipe" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,73 +0,0 @@
|
||||
<!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>Lazy Source</title>
|
||||
<style>
|
||||
button.code {
|
||||
font-family: Monaco,Menlo,Consolas,"Courier New",monospace;
|
||||
font-size: 12px;
|
||||
padding: 5px;
|
||||
margin: 0 5px;
|
||||
}
|
||||
</style>
|
||||
</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="span12">
|
||||
<h4 id="title">Lazy source example</h4>
|
||||
<p id="shortdesc">Example of setting a layer source after construction.</p>
|
||||
<div id="docs">
|
||||
<p>
|
||||
Typically, the source for a layer is provided to the layer constructor.
|
||||
If you need to set a layer source after construction, this can be
|
||||
done with the <code>layer.setSource()</code> method.
|
||||
</p>
|
||||
<p>
|
||||
The layer in the map above is constructed with no source. Use the
|
||||
links below to set/unset the layer source. A layer is not rendered
|
||||
until its source is set.
|
||||
</p>
|
||||
<p>
|
||||
<button id="set-source" class="code">layer.setSource(source)</button>
|
||||
<button id="unset-source" class="code">layer.setSource(null)</button>
|
||||
</p>
|
||||
<p>See the <a href="lazy-source.js" target="_blank">lazy-source.js source</a> for details on how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">source</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=lazy-source" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,51 +0,0 @@
|
||||
<!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>LineString arrows 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="span12">
|
||||
<h4 id="title">LineString arrows example</h4>
|
||||
<p id="shortdesc">Example of drawing arrows for each line string segment.</p>
|
||||
<div id="docs">
|
||||
<p>See the <a href="line-arrows.js" target="_blank">line-arrows.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">draw, vector, arrow</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=line-arrows" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,52 +0,0 @@
|
||||
<!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>Localized OpenStreetMap 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="span12">
|
||||
<h4 id="title">Localized OpenStreetMap example</h4>
|
||||
<p id="shortdesc">Example of a localized OpenStreetMap map with a custom tile server and a custom attribution.</p>
|
||||
<div id="docs">
|
||||
<p>The base layer is <a href="http://www.opencyclemap.org/">OpenCycleMap</a> with an overlay from <a href="http://www.openseamap.org/">OpenSeaMap</a>. The OpenSeaMap tile server does not support <a href="http://enable-cors.org/">CORS</a> headers.</p>
|
||||
<p>See the <a href="localized-openstreetmap.js" target="_blank">localized-openstreetmap.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">cors, localized-openstreetmap, openseamap, openstreetmap</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=localized-openstreetmap" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,51 +0,0 @@
|
||||
<!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>MapGuide untiled 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="span12">
|
||||
<h4 id="title">MapGuide untiled example</h4>
|
||||
<p id="shortdesc">Example of a untiled MapGuide map.</p>
|
||||
<div id="docs">
|
||||
<p>See the <a href="mapguide-untiled.js" target="_blank">mapguide-untiled.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">mapguide</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=mapguide-untiled" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,56 +0,0 @@
|
||||
<!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>MapQuest 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>
|
||||
<select id="layer-select">
|
||||
<option value="Aerial">Aerial</option>
|
||||
<option value="AerialWithLabels">Aerial with labels</option>
|
||||
<option value="Road" selected>Road</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row-fluid">
|
||||
|
||||
<div class="span12">
|
||||
<h4 id="title">MapQuest example</h4>
|
||||
<p id="shortdesc">Example of a MapQuest map.</p>
|
||||
<div id="docs">
|
||||
<p>See the <a href="mapquest.js" target="_blank">mapquest.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">mapquest</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=mapquest" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,98 +0,0 @@
|
||||
<!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>Measure example</title>
|
||||
<style>
|
||||
.tooltip {
|
||||
position: relative;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
border-radius: 4px;
|
||||
color: white;
|
||||
padding: 4px 8px;
|
||||
opacity: 0.7;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.tooltip-measure {
|
||||
opacity: 1;
|
||||
font-weight: bold;
|
||||
}
|
||||
.tooltip-static {
|
||||
background-color: #ffcc33;
|
||||
color: black;
|
||||
border: 1px solid white;
|
||||
}
|
||||
.tooltip-measure:before,
|
||||
.tooltip-static:before {
|
||||
border-top: 6px solid rgba(0, 0, 0, 0.5);
|
||||
border-right: 6px solid transparent;
|
||||
border-left: 6px solid transparent;
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: -6px;
|
||||
margin-left: -7px;
|
||||
left: 50%;
|
||||
}
|
||||
.tooltip-static:before {
|
||||
border-top-color: #ffcc33;
|
||||
}
|
||||
</style>
|
||||
</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="span12">
|
||||
<h4 id="title">Measure example</h4>
|
||||
<p id="shortdesc">Example of using the
|
||||
ol.interaction.Draw interaction for creating simple
|
||||
measuring application. </p>
|
||||
<form class="form-inline">
|
||||
<label>Geometry type </label>
|
||||
<select id="type">
|
||||
<option value="length">Length</option>
|
||||
<option value="area">Area</option>
|
||||
</select>
|
||||
<label class="checkbox"><input type="checkbox" id="geodesic"/>use geodesic measures</label>
|
||||
</form>
|
||||
|
||||
<div id="docs">
|
||||
<p><i>NOTE: If use geodesic measures is not checked, measure is done in simple way on projected plane. Earth
|
||||
curvature is not taken into account</i></p>
|
||||
<p>See the <a href="measure.js" target="_blank">measure.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">draw, edit, measure, vector</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=measure" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,60 +0,0 @@
|
||||
<!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>Min/max resolution 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="span12">
|
||||
<h4 id="title">Min/max resolution example</h4>
|
||||
<p id="shortdesc">Show/hide layers depending on current view resolution.</p>
|
||||
<div id="docs">
|
||||
<p>
|
||||
Zoom in twice: the MapBox layer should hide whereas the OSM layer should be shown.
|
||||
</p>
|
||||
<p>
|
||||
If you continue to zoom in, you'll see the OSM layer also disappear.
|
||||
</p>
|
||||
<p>
|
||||
The rendering of the layers are here controlled using minResolution and maxResolution options.
|
||||
</p>
|
||||
<p>See the <a href="min-max-resolution.js" target="_blank">min-max-resolution.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">minResolution, maxResolution, resolution</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=min-max-resolution" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,53 +0,0 @@
|
||||
<!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="../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>Modify features 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="span12">
|
||||
<h4 id="title">Modify features example</h4>
|
||||
<p id="shortdesc">Editing features with the modify interaction.</p>
|
||||
<div id="docs">
|
||||
<p>This example demonstrates how the modify and select interactions can be used together. Zoom in to an area of interest and select a feature for editing. Then drag points around to modify the feature. You can preserve topology by selecting multiple features before editing (<code>Shift</code>+click to select multiple features).</p>
|
||||
<p>See the <a href="modify-features.js" target="_blank">modify-features.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">modify, edit, vector</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="../resources/jquery.min.js" type="text/javascript"></script>
|
||||
<script src="loader.js?id=modify-features" type="text/javascript"></script>
|
||||
<script src="../resources/example-behaviour.js" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,57 +0,0 @@
|
||||
<!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="../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>Modify features test</title>
|
||||
<style>
|
||||
.map {
|
||||
background: grey;
|
||||
}
|
||||
</style>
|
||||
</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="span12">
|
||||
<h4 id="title">Modify features test</h4>
|
||||
<p id="shortdesc">Example for testing feature modification.</p>
|
||||
<div id="docs">
|
||||
<p>See the <a href="modify-test.js" target="_blank">modify-test.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">modify, edit, vector</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="../resources/jquery.min.js" type="text/javascript"></script>
|
||||
<script src="loader.js?id=modify-test" type="text/javascript"></script>
|
||||
<script src="../resources/example-behaviour.js" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,59 +0,0 @@
|
||||
<!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>Mouse position 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="span6">
|
||||
<h4 id="title">Mouse position example</h4>
|
||||
<p id="shortdesc">Example of a mouse position control, outside the map.</p>
|
||||
<div id="docs">
|
||||
<p>See the <a href="mouse-position.js" target="_blank">mouse-position.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">mouse-position, openstreetmap</div>
|
||||
<form>
|
||||
<label>Projection </label>
|
||||
<select id="projection">
|
||||
<option value="EPSG:4326">EPSG:4326</option>
|
||||
<option value="EPSG:3857">EPSG:3857</option>
|
||||
</select>
|
||||
<label>Precision </label>
|
||||
<input id="precision" type="number" min="0" max="12" value="4"/>
|
||||
</form>
|
||||
</div>
|
||||
<div class="span6" id="mouse-position"> </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=mouse-position" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,54 +0,0 @@
|
||||
<!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>Moveend 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="span12">
|
||||
<h4 id="title">Move end example</h4>
|
||||
<p id="shortdesc">Use of the moveend event.</p>
|
||||
<div id="docs">
|
||||
<p>In this example, a listener is registered for the map's <code>moveend</code> event. Whenever this listener is called, it updates the inputs below with the map extent in decimal degrees.</p>
|
||||
<p>See the <a href="moveend.js" target="_blank">moveend.js source</a> for details on how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">moveend, map, event</div>
|
||||
<label>top</label><input type="text" id="top">
|
||||
<label>right</label><input type="text" id="right">
|
||||
<label>bottom</label><input type="text" id="bottom">
|
||||
<label>left</label><input type="text" id="left">
|
||||
</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=moveend" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,56 +0,0 @@
|
||||
<!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>Navigation controls 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="span12">
|
||||
<h4 id="title">Navigation controls example</h4>
|
||||
<p id="shortdesc">Shows how to add navigation controls.</p>
|
||||
The following navigation controls are added to the map:
|
||||
<ul>
|
||||
<li><code>ol.control.Zoom</code> (added by default)</li>
|
||||
<li><code>ol.control.ZoomToExtent</code></li>
|
||||
</ul>
|
||||
<div id="docs">
|
||||
<p>See the <a href="navigation-controls.js" target="_blank">navigation-controls.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">control, navigation, extent</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=navigation-controls" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,82 +0,0 @@
|
||||
<!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 type="text/css">
|
||||
#marker {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 1px solid #088;
|
||||
border-radius: 10px;
|
||||
background-color: #0FF;
|
||||
opacity: 0.5;
|
||||
}
|
||||
#vienna {
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
font-size: 11pt;
|
||||
font-weight: bold;
|
||||
text-shadow: black 0.1em 0.1em 0.2em;
|
||||
}
|
||||
.popover-content {
|
||||
min-width: 180px;
|
||||
}
|
||||
</style>
|
||||
<title>Overlay 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="span12">
|
||||
<h4 id="title">Overlay example</h4>
|
||||
<p id="shortdesc">Demonstrates overlays.</p>
|
||||
<div id="docs">
|
||||
<p>The popups are created using
|
||||
<a href="http://twitter.github.com/bootstrap/javascript.html#popovers">Popovers</a> from Bootstrap.</p>
|
||||
<p>See the <a href="overlay.js" target="_blank">overlay.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">overlay, popup, bootstrap, popover, mapquest, openaerial</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div style="display: none;">
|
||||
<!-- Clickable label for Vienna -->
|
||||
<a class="overlay" id="vienna" target="_blank" href="http://en.wikipedia.org/wiki/Vienna">Vienna</a>
|
||||
<div id="marker" title="Marker"></div>
|
||||
<!-- Popup -->
|
||||
<div id="popup" title="Welcome to ol3"></div>
|
||||
</div>
|
||||
|
||||
<script src="../resources/jquery.min.js" type="text/javascript"></script>
|
||||
<script src="../resources/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
|
||||
<script src="../resources/example-behaviour.js" type="text/javascript"></script>
|
||||
<script src="loader.js?id=overlay" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,77 +0,0 @@
|
||||
<!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 type="text/css">
|
||||
.ol-custom-overviewmap,
|
||||
.ol-custom-overviewmap.ol-uncollapsible {
|
||||
bottom: auto;
|
||||
left: auto;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.ol-custom-overviewmap:not(.ol-collapsed) {
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
.ol-custom-overviewmap .ol-overviewmap-map {
|
||||
border: none;
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.ol-custom-overviewmap .ol-overviewmap-box {
|
||||
border: 2px solid red;
|
||||
}
|
||||
|
||||
.ol-custom-overviewmap:not(.ol-collapsed) button{
|
||||
bottom: auto;
|
||||
left: auto;
|
||||
right: 1px;
|
||||
top: 1px;
|
||||
}
|
||||
|
||||
.ol-rotate {
|
||||
top: 170px;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
</style>
|
||||
<title>ol3 OverviewMap control with advanced customization 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">
|
||||
<h4 id="title">OverviewMap control, advanced</h4>
|
||||
<div id="map" class="map"></div>
|
||||
|
||||
<div class="row-fluid">
|
||||
<p id="shortdesc">Example of OverviewMap control with advanced customization.</p>
|
||||
<div id="docs">
|
||||
<p>See the <a href="overviewmap-custom.js" target="_blank">overviewmap-custom.js source</a> to see how this is done.</p>
|
||||
<p>This example demonstrates how you can customize the overviewmap control using its supported options as well as defining custom CSS. You can also rotate the map using the shift key to see how the overview map reacts.</p>
|
||||
</div>
|
||||
<div id="tags">overview, overviewmap</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=overviewmap-custom" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,41 +0,0 @@
|
||||
<!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>ol3 OverviewMap control 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">
|
||||
<h4 id="title">OverviewMap control</h4>
|
||||
<div id="map" class="map"></div>
|
||||
|
||||
<div class="row-fluid">
|
||||
<p id="shortdesc">Example of OverviewMap control.</p>
|
||||
<div id="docs">
|
||||
<p>See the <a href="overviewmap.js" target="_blank">overviewmap.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">overview, overviewmap</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=overviewmap" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,57 +0,0 @@
|
||||
<!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="../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>Custom styles for polygons</title>
|
||||
<style>
|
||||
.map {
|
||||
background: grey;
|
||||
}
|
||||
</style>
|
||||
</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="span12">
|
||||
<h4 id="title">Custom styles for polygons</h4>
|
||||
<p id="shortdesc">Showing the vertices of a polygon with a custom style geometry.</p>
|
||||
<div id="docs">
|
||||
<p>See the <a href="polygon-styles.js" target="_blank">polygon-styles.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">polygon, vector, style, GeometryFunction</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="../resources/jquery.min.js" type="text/javascript"></script>
|
||||
<script src="loader.js?id=polygon-styles" type="text/javascript"></script>
|
||||
<script src="../resources/example-behaviour.js" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,104 +0,0 @@
|
||||
<!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 type="text/css">
|
||||
.ol-popup {
|
||||
position: absolute;
|
||||
background-color: white;
|
||||
-webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
|
||||
filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
|
||||
padding: 15px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid #cccccc;
|
||||
bottom: 12px;
|
||||
left: -50px;
|
||||
}
|
||||
.ol-popup:after, .ol-popup:before {
|
||||
top: 100%;
|
||||
border: solid transparent;
|
||||
content: " ";
|
||||
height: 0;
|
||||
width: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
.ol-popup:after {
|
||||
border-top-color: white;
|
||||
border-width: 10px;
|
||||
left: 48px;
|
||||
margin-left: -10px;
|
||||
}
|
||||
.ol-popup:before {
|
||||
border-top-color: #cccccc;
|
||||
border-width: 11px;
|
||||
left: 48px;
|
||||
margin-left: -11px;
|
||||
}
|
||||
.ol-popup-closer {
|
||||
text-decoration: none;
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
right: 8px;
|
||||
}
|
||||
.ol-popup-closer:after {
|
||||
content: "✖";
|
||||
}
|
||||
</style>
|
||||
<title>Popup 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 id="popup" class="ol-popup">
|
||||
<a href="#" id="popup-closer" class="ol-popup-closer"></a>
|
||||
<div id="popup-content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row-fluid">
|
||||
|
||||
<div class="span12">
|
||||
<h4 id="title">Popup example</h4>
|
||||
<p id="shortdesc">Uses an overlay to create a popup.</p>
|
||||
<div id="docs">
|
||||
<p>
|
||||
Click on the map to get a popup. The popup is composed of a few basic elements: a container, a close button, and a place for the content. To anchor the popup to the map, an <code>ol.Overlay</code> is created with the popup container. A listener is registered for the map's <code>click</code> event to display the popup, and another listener is set as the <code>click</code> handler for the close button to hide the popup.
|
||||
</p>
|
||||
<p>
|
||||
See the <a href="popup.js" target="_blank">popup.js source</a> to see how this is done.
|
||||
</p>
|
||||
</div>
|
||||
<div id="tags">overlay, popup, mapquest, openaerial</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=popup" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,55 +0,0 @@
|
||||
<!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>Preload 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="map1" class="map"></div>
|
||||
</div>
|
||||
<div class="span6">
|
||||
<div id="map2" class="map"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row-fluid">
|
||||
|
||||
<div class="span12">
|
||||
<h4 id="title">Preload example</h4>
|
||||
<p id="shortdesc">Example of tile preloading.</p>
|
||||
<div id="docs">
|
||||
<p>The map on the left preloads low resolution tiles. The map on the right does not use any preloading. Try zooming out and panning to see the difference.</p>
|
||||
<p>See the <a href="preload.js" target="_blank">preload.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">preload, bing</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=preload" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,51 +0,0 @@
|
||||
<!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>Regular Shape 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="span12">
|
||||
<h4 id="title">Regular Shape example</h4>
|
||||
<p id="shortdesc">Example of some Regular Shape styles.</p>
|
||||
<div id="docs">
|
||||
<p>See the <a href="regularshape.js" target="_blank">regularshape.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">vector, symbol, regularshape, style, square, cross, star, triangle, x</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=regularshape" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,52 +0,0 @@
|
||||
<!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>Rotation 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="span12">
|
||||
<h4 id="title">Rotation example</h4>
|
||||
<p id="shortdesc">Example of a rotated map.</p>
|
||||
<div id="docs">
|
||||
<p>Use <code>Alt</code>+<code>Shift</code>+drag to rotate the map.</p>
|
||||
<p>See the <a href="rotation.js" target="_blank">rotation.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">rotation, openstreetmap</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=rotation" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,58 +0,0 @@
|
||||
<!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>Scale line 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>
|
||||
<select id="units">
|
||||
<option value="degrees">degrees</option>
|
||||
<option value="imperial">imperial inch</option>
|
||||
<option value="us">us inch</option>
|
||||
<option value="nautical">nautical mile</option>
|
||||
<option value="metric">metric</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row-fluid">
|
||||
|
||||
<div class="span12">
|
||||
<h4 id="title">Scale line example</h4>
|
||||
<p id="shortdesc">Example of a scale line.</p>
|
||||
<div id="docs">
|
||||
<p>See the <a href="scale-line.js" target="_blank">scale-line.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">scale-line, openstreetmap</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=scale-line" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,64 +0,0 @@
|
||||
<!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="../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>Select features 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="span12">
|
||||
<h4 id="title">Select features example</h4>
|
||||
<p id="shortdesc">Example of using the Select interaction. Choose between <code>Single-click</code>, <code>Click</code> and <code>Hover</code> as the event type for selection in the combobox below. When using <code>Single-click</code> or <code>Click</code> you can hold do <code>Shift</code> key to toggle the feature in the selection.</p>
|
||||
<p>Note: when <code>Single-click</code> is used double-clicks won't select features. This in contrast to <code>Click</code>, where a double-click will both select the feature and zoom the map (because of the <code>DoubleClickZoom</code> interaction). Note that <code>Single-click</code> is less responsive than <code>Click</code> because of the delay it uses to detect double-clicks.</p>
|
||||
<p>In this example, a listener is registered for the Select interaction's <code>select</code> event in order to update the selection status below.
|
||||
<form class="form-inline">
|
||||
<label>Action type </label>
|
||||
<select id="type">
|
||||
<option value="none" selected>None</option>
|
||||
<option value="singleclick">Single-click</option>
|
||||
<option value="click">Click</option>
|
||||
<option value="pointermove">Hover</option>
|
||||
</select>
|
||||
<span id="status"> 0 selected features</span>
|
||||
</form>
|
||||
<div id="docs">
|
||||
<p>See the <a href="select-features.js" target="_blank">select-features.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">select, vector</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=select-features" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,51 +0,0 @@
|
||||
<!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>Semi-transparent layer 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="span12">
|
||||
<h4 id="title">Semi-transparent layer example</h4>
|
||||
<p id="shortdesc">Example of a map with a semi-transparent layer.</p>
|
||||
<div id="docs">
|
||||
<p>See the <a href="semi-transparent-layer.js" target="_blank">semi-transparent-layer.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">transparent, mapquest, tilejson</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=semi-transparent-layer" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,63 +0,0 @@
|
||||
<!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>Side-by-side 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="span4">
|
||||
<h4>Canvas</h4>
|
||||
<div id="canvasMap" class="map"></div>
|
||||
</div>
|
||||
<div class="span4">
|
||||
<h4>WebGL</h4>
|
||||
<div id="webglMap" class="map"></div>
|
||||
<div id="no-webgl" class="alert alert-error" style="display: none">
|
||||
This map requires a browser that supports <a href="http://get.webgl.org/">WebGL</a>.
|
||||
</div>
|
||||
</div>
|
||||
<div class="span4">
|
||||
<h4>DOM</h4>
|
||||
<div id="domMap" class="map"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row-fluid">
|
||||
|
||||
<div class="span12">
|
||||
<h4 id="title">Side-by-side example</h4>
|
||||
<p id="shortdesc">The three maps, one WebGL, one Canvas, one DOM, share the same center, resolution, rotation and layers.</p>
|
||||
<div id="docs">
|
||||
<p>See the <a href="side-by-side.js" target="_blank">side-by-side.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">side-by-side, canvas, webgl, dom, canvas, sync, object</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=side-by-side" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,51 +0,0 @@
|
||||
<!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>Simple 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="span12">
|
||||
<h4 id="title">Simple example</h4>
|
||||
<p id="shortdesc">Example of a simple map.</p>
|
||||
<div id="docs">
|
||||
<p>See the <a href="simple.js" target="_blank">simple.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">simple, openstreetmap</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=simple" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,77 +0,0 @@
|
||||
<!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> Snap 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="span12">
|
||||
<h4 id="title">Snap interaction example</h4>
|
||||
<p id="shortdesc">Example of using the snap interaction together with
|
||||
draw and modify interactions. The snap interaction must be added
|
||||
last, as it needs to be the first to handle the
|
||||
<code>pointermove</code> event.</p>
|
||||
<form id="options-form" automplete="off">
|
||||
<div class="radio">
|
||||
<label>
|
||||
<input type="radio" name="interaction" value="draw" id="draw" checked>
|
||||
Draw
|
||||
</label>
|
||||
</div>
|
||||
<div class="radio">
|
||||
<label>
|
||||
<input type="radio" name="interaction" value="modify">
|
||||
Modify
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Draw type </label>
|
||||
<select name="draw-type" id="draw-type">
|
||||
<option value="Point">Point</option>
|
||||
<option value="LineString">LineString</option>
|
||||
<option value="Polygon">Polygon</option>
|
||||
</select>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div id="docs">
|
||||
<p>See the <a href="snap.js" target="_blank">snap.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">draw, edit, modify, vector, featureoverlay, snap</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=snap" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,52 +0,0 @@
|
||||
<!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>Sphere Mollweide 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="span12">
|
||||
<h4 id="title">Sphere Mollweide example</h4>
|
||||
<p id="shortdesc">Example of a Sphere Mollweide map with a Graticule component.</p>
|
||||
<div id="docs">
|
||||
<p>See the <a href="sphere-mollweide.js" target="_blank">sphere-mollweide.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">graticule, Mollweide, projection, proj4js</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="http://cdnjs.cloudflare.com/ajax/libs/proj4js/2.2.1/proj4.js" type="text/javascript"></script>
|
||||
<script src="loader.js?id=sphere-mollweide" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,51 +0,0 @@
|
||||
<!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>Stamen 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="span12">
|
||||
<h4 id="title">Stamen example</h4>
|
||||
<p id="shortdesc">Example of a Stamen tile source. Two layers are composed: the watercolor base layer with the terrain labels.</p>
|
||||
<div id="docs">
|
||||
<p>See the <a href="stamen.js" target="_blank">stamen.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">stamen, watercolor, terrain-labels, two-layers</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=stamen" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,60 +0,0 @@
|
||||
<!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>Static image 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="span12">
|
||||
<h4 id="title">Static image example</h4>
|
||||
<p id="shortdesc">Example of a static image layer.</p>
|
||||
<div id="docs">
|
||||
<p>
|
||||
This example uses a <a href="http://xkcd.com/256/">static image</a>
|
||||
as a layer source. The map view is configured with a custom
|
||||
projection that translates image coordinates directly into map
|
||||
coordinates.
|
||||
</p>
|
||||
<p>
|
||||
See the <a href="static-image.js" target="_blank">static-image.js source</a>
|
||||
for details on how this is done.
|
||||
</p>
|
||||
</div>
|
||||
<div id="tags">static image, xkcd</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=static-image" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,58 +0,0 @@
|
||||
<!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>Symbols with WebGL 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="span12">
|
||||
<h4 id="title">Symbols with WebGL example</h4>
|
||||
<p id="shortdesc">Using symbols in an atlas with WebGL.</p>
|
||||
<div id="docs">
|
||||
<p>When using symbol styles with WebGL, OpenLayers would render the symbol
|
||||
on a temporary image and would create a WebGL texture for each image. For a
|
||||
better performance, it is recommended to use atlas images (similar to
|
||||
image sprites with CSS), so that the number of textures is reduced. OpenLayers
|
||||
provides an <code>AtlasManager</code>, which when passed to the constructor
|
||||
of a symbol style, will create atlases for the symbols.</p>
|
||||
<p>See the <a href="symbol-atlas-webgl.js" target="_blank">symbol-atlas-webgl.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">webgl, symbol, atlas, vector, point</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="../resources/jquery.min.js" type="text/javascript"></script>
|
||||
<script src="../resources/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
|
||||
<script src="../resources/example-behaviour.js" type="text/javascript"></script>
|
||||
<script src="loader.js?id=symbol-atlas-webgl" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,110 +0,0 @@
|
||||
<!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>Synthetic lines 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="span12">
|
||||
<h4 id="title">Synthetic lines example</h4>
|
||||
<p id="shortdesc">Synthetic lines example.</p>
|
||||
<div id="docs">
|
||||
<p>See the <a href="synthetic-lines.js" target="_blank">synthetic-lines.js source</a> to see how this is done.</p>
|
||||
<p>Performance results:</p>
|
||||
<table border="1">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Device/Browser</th>
|
||||
<th>200 lines</th>
|
||||
<th>500 lines</th>
|
||||
<th>1000 lines</th>
|
||||
<th>2000 lines</th>
|
||||
<th>5000 lines</th>
|
||||
<th>10000 lines</th>
|
||||
<th>20000 lines</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Mac Book Air / Chrome 33 canary</td>
|
||||
<td>60 fps</td>
|
||||
<td>60 fps</td>
|
||||
<td>60 fps</td>
|
||||
<td>60 fps</td>
|
||||
<td>60 fps</td>
|
||||
<td>60 fps</td>
|
||||
<td>60 fps</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Mac Book Air / FireFox 25</td>
|
||||
<td>60 fps</td>
|
||||
<td>60 fps</td>
|
||||
<td>60 fps</td>
|
||||
<td>60 fps</td>
|
||||
<td>60 fps</td>
|
||||
<td>22 fps</td>
|
||||
<td>6 fps</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Mac Book Air / Safari 7</td>
|
||||
<td>60 fps</td>
|
||||
<td>60 fps</td>
|
||||
<td>60 fps</td>
|
||||
<td>40 fps</td>
|
||||
<td>10 fps</td>
|
||||
<td>N/A</td>
|
||||
<td>N/A</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>iPhone 4S / iOS 7 / Safari</td>
|
||||
<td>60 fps</td>
|
||||
<td>33 fps</td>
|
||||
<td>15 fps</td>
|
||||
<td>5 fps</td>
|
||||
<td>N/A</td>
|
||||
<td>N/A</td>
|
||||
<td>N/A</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
<div id="tags">vector</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=synthetic-lines" type="text/javascript"></script>
|
||||
<script src="../resources/display-frame-rate.js" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,52 +0,0 @@
|
||||
<!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>Synthetic points 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="span12">
|
||||
<h4 id="title">Synthetic points example</h4>
|
||||
<p id="shortdesc">Synthetic points example.</p>
|
||||
<div id="docs">
|
||||
<p>See the <a href="synthetic-points.js" target="_blank">synthetic-points.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">vector</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="../resources/jquery.min.js" type="text/javascript"></script>
|
||||
<script src="../resources/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
|
||||
<script src="../resources/example-behaviour.js" type="text/javascript"></script>
|
||||
<script src="loader.js?id=synthetic-points" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,61 +0,0 @@
|
||||
<!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>Teleport 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="span8">
|
||||
<div id="map1" class="map"></div>
|
||||
</div>
|
||||
<div class="span4">
|
||||
<div id="map2" class="map"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<a id="teleport" href="#" class="btn">Teleport</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row-fluid">
|
||||
|
||||
<div class="span12">
|
||||
<h4 id="title">Teleport example</h4>
|
||||
<p id="shortdesc">Example of moving a map from one target to another.</p>
|
||||
<div id="docs">
|
||||
<p>Click on the Teleport button below the map to move the map from one target to another.</p>
|
||||
<p>See the <a href="teleport.js" target="_blank">teleport.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">teleport, openstreetmap</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=teleport" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,79 +0,0 @@
|
||||
<!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>Tile load events example</title>
|
||||
<style>
|
||||
.map {
|
||||
background: #E0ECED;
|
||||
}
|
||||
.wrapper {
|
||||
position: relative;
|
||||
}
|
||||
#progress {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 2px;
|
||||
background: rgba(0, 60, 136, 0.4);
|
||||
width: 0;
|
||||
transition: width 250ms;
|
||||
}
|
||||
</style>
|
||||
</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 wrapper">
|
||||
<div id="map" class="map"></div>
|
||||
<div id="progress"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row-fluid">
|
||||
|
||||
<div class="span12">
|
||||
<h4 id="title">Tile load events example</h4>
|
||||
<p id="shortdesc">Example using tile load events.</p>
|
||||
<div id="docs">
|
||||
<p>
|
||||
Image tile sources fire events related to tile loading. You can
|
||||
listen for <code>tileloadstart</code>, <code>tileloadend</code>,
|
||||
and <code>tileloaderror</code> type events to monitor tile loading
|
||||
progress. This example registers listeners for these events and
|
||||
renders a tile loading progress bar at the bottom of the map.
|
||||
</p>
|
||||
<p>
|
||||
See the <a href="tile-load-events.js" target="_blank">tile-load-events.js source</a>
|
||||
for more detail on how this is done.
|
||||
</p>
|
||||
</div>
|
||||
<div id="tags">tile, events, loading</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=tile-load-events" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,67 +0,0 @@
|
||||
<!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>Tile vector example</title>
|
||||
<style>
|
||||
#map {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
</style>
|
||||
</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" style="background: white;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row-fluid">
|
||||
|
||||
<div class="span12">
|
||||
<h4 id="title">Tile vector example</h4>
|
||||
<p id="shortdesc">Example of vector tiles from openstreetmap.us.</p>
|
||||
<div id="docs">
|
||||
<p>See the <a href="tile-vector.js" target="_blank">tile-vector.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div class="alert">
|
||||
<strong>Warning</strong> Map is becoming unresponsive with too many layers.
|
||||
</div>
|
||||
<fieldset>
|
||||
<legend>Layers</legend>
|
||||
<label class="checkbox"><input type="checkbox" id="landuse"/> Landuse</label>
|
||||
<label class="checkbox"><input type="checkbox" id="buildings"/> Buildings</label>
|
||||
<label class="checkbox"><input type="checkbox" id="water" checked/> Water</label>
|
||||
<label class="checkbox"><input type="checkbox" id="roads" checked/> Roads</label>
|
||||
</fieldset>
|
||||
<div id="tags">tile-vector, openstreetmap</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=tile-vector" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,51 +0,0 @@
|
||||
<!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>TileJSON 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="span12">
|
||||
<h4 id="title">TileJSON example</h4>
|
||||
<p id="shortdesc">Example of a TileJSON layer.</p>
|
||||
<div id="docs">
|
||||
<p>See the <a href="tilejson.js" target="_blank">tilejson.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">tilejson</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=tilejson" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,69 +0,0 @@
|
||||
<!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 type="text/css">
|
||||
#country-name {
|
||||
color: black;
|
||||
font-size: 12pt;
|
||||
font-weight: bold;
|
||||
text-shadow: white 0.1em 0.1em 0.2em;
|
||||
}
|
||||
</style>
|
||||
<title>TileUTFGrid 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="span12">
|
||||
<h4 id="title">TileUTFGrid example</h4>
|
||||
<p id="shortdesc">This example shows how to read data from a TileUTFGrid layer.</p>
|
||||
<p>Point to a country to see its name and flag.</p>
|
||||
<div id="docs">
|
||||
<p>Tiles made with <a href="http://tilemill.com/">TileMill</a>. Hosting on MapBox.com or with open-source <a href="https://github.com/klokantech/tileserver-php/">TileServer</a>.</p>
|
||||
<p>See the <a href="tileutfgrid.js" target="_blank">tileutfgrid.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">utfgrid, tileutfgrid, tilejson</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div style="display: none;">
|
||||
<!-- Overlay with the country info -->
|
||||
<div id="country-info">
|
||||
<div id="country-name"> </div>
|
||||
<img id="country-flag" src="" />
|
||||
</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=tileutfgrid" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,56 +0,0 @@
|
||||
<!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>Tissot indicatrix 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">
|
||||
<h4>EPSG:4326</h4>
|
||||
<div id="map4326" class="map"></div>
|
||||
</div>
|
||||
<div class="span6">
|
||||
<h4>EPSG:3857</h4>
|
||||
<div id="map3857" class="map"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row-fluid">
|
||||
|
||||
<div class="span12">
|
||||
<h4 id="title">Tissot indicatrix example</h4>
|
||||
<p id="shortdesc">Example of <a href="http://en.wikipedia.org/wiki/Tissot's_indicatrix">Tissot indicatrix</a> maps. The map on the left is an EPSG:4326 map. The one on the right is EPSG:3857.</p>
|
||||
<div id="docs">
|
||||
<p>See the <a href="tissot.js" target="_blank">tissot.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">tissot, circle</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=tissot" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,53 +0,0 @@
|
||||
<!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="../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>TopoJSON 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="span8">
|
||||
<h4 id="title">TopoJSON example</h4>
|
||||
<p id="shortdesc">Demonstrates rendering of features from a TopoJSON topology.</p>
|
||||
<div id="docs">
|
||||
<p>See the <a href="topojson.js" target="_blank">topojson.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">vector, topojson, style</div>
|
||||
</div>
|
||||
<div id="info" class="span4"> </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=topojson" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,361 +0,0 @@
|
||||
<!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 type="text/css">
|
||||
h2 {
|
||||
font-size: 1.5em;
|
||||
line-height: 15px;
|
||||
}
|
||||
|
||||
.scale-cnt {
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.edit-form-ctn {
|
||||
}
|
||||
|
||||
.edit-form {
|
||||
float: left;
|
||||
margin: 5px;
|
||||
width: 230px;
|
||||
padding: 4px;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
.edit-form input[type="button"] {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.edit-form-elem label {
|
||||
display: block;
|
||||
float: left;
|
||||
width: 85px;
|
||||
}
|
||||
|
||||
.edit-form-elem input[type="text"] {
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
.edit-form-elem select {
|
||||
width: 130px;
|
||||
}
|
||||
</style>
|
||||
<title>Vector labels 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="edit-form">
|
||||
<input id="refresh-points" type="button" value="Refresh" />
|
||||
<h2>Points</h2>
|
||||
<div class="edit-form-elem">
|
||||
<label>Text: </label>
|
||||
<select id="points-text">
|
||||
<option value="hide">Hide</option>
|
||||
<option value="normal">Normal</option>
|
||||
<option value="shorten" selected="selected">Shorten</option>
|
||||
<option value="wrap">Wrap</option>
|
||||
</select>
|
||||
<br />
|
||||
<label title="Max Resolution Denominator">MaxReso.:</label>
|
||||
<select id="points-maxreso">
|
||||
<option value="38400">38,400</option>
|
||||
<option value="19200">19,200</option>
|
||||
<option value="9600">9,600</option>
|
||||
<option value="4800">4,800</option>
|
||||
<option value="2400">2,400</option>
|
||||
<option value="1200" selected="selected">1,200</option>
|
||||
<option value="600">600</option>
|
||||
<option value="300">300</option>
|
||||
<option value="150">150</option>
|
||||
<option value="75">75</option>
|
||||
<option value="32">32</option>
|
||||
<option value="16">16</option>
|
||||
<option value="8">8</option>
|
||||
</select>
|
||||
<br />
|
||||
<label>Align: </label>
|
||||
<select id="points-align">
|
||||
<option value="center" selected="selected">Center</option>
|
||||
<option value="end">End</option>
|
||||
<option value="left">Left</option>
|
||||
<option value="right">Right</option>
|
||||
<option value="start">Start</option>
|
||||
</select>
|
||||
<br />
|
||||
<label>Baseline: </label>
|
||||
<select id="points-baseline">
|
||||
<option value="alphabetic">Alphabetic</option>
|
||||
<option value="bottom">Bottom</option>
|
||||
<option value="hanging">Hanging</option>
|
||||
<option value="ideographic">Ideographic</option>
|
||||
<option value="middle" selected="selected">Middle</option>
|
||||
<option value="top">Top</option>
|
||||
</select>
|
||||
<br />
|
||||
<label>Rotation: </label>
|
||||
<select id="points-rotation">
|
||||
<option value="0">0°</option>
|
||||
<option value="0.785398164">45°</option>
|
||||
<option value="1.570796327">90°</option>
|
||||
</select>
|
||||
<br />
|
||||
<label>Font: </label>
|
||||
<select id="points-font">
|
||||
<option value="Arial" selected="selected">Arial</option>
|
||||
<option value="Courier New">Courier New</option>
|
||||
<option value="Quattrocento Sans">Quattrocento</option>
|
||||
<option value="Verdana">Verdana</option>
|
||||
</select>
|
||||
<br />
|
||||
<label>Weight: </label>
|
||||
<select id="points-weight">
|
||||
<option value="bold">Bold</option>
|
||||
<option value="normal" selected="selected">Normal</option>
|
||||
</select>
|
||||
<br />
|
||||
<label>Size: </label>
|
||||
<input type="text" value="12px" id="points-size" />
|
||||
<br />
|
||||
<label>Offset X:</label>
|
||||
<input type="text" value="0" id="points-offset-x" />
|
||||
<br />
|
||||
<label>Offset Y:</label>
|
||||
<input type="text" value="0" id="points-offset-y" />
|
||||
<br />
|
||||
<label>Color :</label>
|
||||
<input type="text" value="#aa3300" id="points-color" />
|
||||
<br />
|
||||
<label title="Outline Color">O. Color:</label>
|
||||
<input type="text" value="#ffffff" id="points-outline" />
|
||||
<br />
|
||||
<label title="Outline Width">O. Width :</label>
|
||||
<input type="text" value="3" id="points-outline-width" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="edit-form">
|
||||
<input id="refresh-lines" type="button" value="Refresh" />
|
||||
<h2>Lines</h2>
|
||||
<div class="edit-form-elem">
|
||||
<label>Text: </label>
|
||||
<select id="lines-text">
|
||||
<option value="hide">Hide</option>
|
||||
<option value="normal">Normal</option>
|
||||
<option value="shorten">Shorten</option>
|
||||
<option value="wrap" selected="selected">Wrap</option>
|
||||
</select>
|
||||
<br />
|
||||
<label title="Max Resolution Denominator">MaxReso.:</label>
|
||||
<select id="lines-maxreso">
|
||||
<option value="38400">38,400</option>
|
||||
<option value="19200">19,200</option>
|
||||
<option value="9600">9,600</option>
|
||||
<option value="4800">4,800</option>
|
||||
<option value="2400">2,400</option>
|
||||
<option value="1200" selected="selected">1,200</option>
|
||||
<option value="600">600</option>
|
||||
<option value="300">300</option>
|
||||
<option value="150">150</option>
|
||||
<option value="75">75</option>
|
||||
<option value="32">32</option>
|
||||
<option value="16">16</option>
|
||||
<option value="8">8</option>
|
||||
</select>
|
||||
<br />
|
||||
<label>Align: </label>
|
||||
<select id="lines-align">
|
||||
<option value="center" selected="selected">Center</option>
|
||||
<option value="end">End</option>
|
||||
<option value="left">Left</option>
|
||||
<option value="right">Right</option>
|
||||
<option value="start">Start</option>
|
||||
</select>
|
||||
<br />
|
||||
<label>Baseline: </label>
|
||||
<select id="lines-baseline">
|
||||
<option value="alphabetic">Alphabetic</option>
|
||||
<option value="bottom">Bottom</option>
|
||||
<option value="hanging">Hanging</option>
|
||||
<option value="ideographic">Ideographic</option>
|
||||
<option value="middle" selected="selected">Middle</option>
|
||||
<option value="top">Top</option>
|
||||
</select>
|
||||
<br />
|
||||
<label>Rotation: </label>
|
||||
<select id="lines-rotation">
|
||||
<option value="0">0°</option>
|
||||
<option value="0.785398164">45°</option>
|
||||
<option value="1.570796327">90°</option>
|
||||
</select>
|
||||
<br />
|
||||
<label>Font: </label>
|
||||
<select id="lines-font">
|
||||
<option value="Arial">Arial</option>
|
||||
<option value="Courier New" selected="selected">Courier New</option>
|
||||
<option value="Quattrocento Sans">Quattrocento</option>
|
||||
<option value="Verdana">Verdana</option>
|
||||
</select>
|
||||
<br />
|
||||
<label>Weight: </label>
|
||||
<select id="lines-weight">
|
||||
<option value="bold" selected="selected">Bold</option>
|
||||
<option value="normal">Normal</option>
|
||||
</select>
|
||||
<br />
|
||||
<label>Size: </label>
|
||||
<input type="text" value="12px" id="lines-size" />
|
||||
<br />
|
||||
<label>Offset X:</label>
|
||||
<input type="text" value="0" id="lines-offset-x" />
|
||||
<br />
|
||||
<label>Offset Y:</label>
|
||||
<input type="text" value="0" id="lines-offset-y" />
|
||||
<br />
|
||||
<label>Color :</label>
|
||||
<input type="text" value="green" id="lines-color" />
|
||||
<br />
|
||||
<label title="Outline Color">O. Color:</label>
|
||||
<input type="text" value="#ffffff" id="lines-outline" />
|
||||
<br />
|
||||
<label title="Outline Width">O. Width :</label>
|
||||
<input type="text" value="3" id="lines-outline-width" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="edit-form">
|
||||
<input id="refresh-polygons" type="button" value="Refresh" />
|
||||
<h2>Polygons</h2>
|
||||
<div class="edit-form-elem">
|
||||
<label>Text: </label>
|
||||
<select id="polygons-text">
|
||||
<option value="hide">Hide</option>
|
||||
<option value="normal" selected="selected">Normal</option>
|
||||
<option value="shorten">Shorten</option>
|
||||
<option value="wrap">Wrap</option>
|
||||
</select>
|
||||
<br />
|
||||
<label title="Max Resolution Denominator">MaxReso.:</label>
|
||||
<select id="polygons-maxreso">
|
||||
<option value="38400">38,400</option>
|
||||
<option value="19200">19,200</option>
|
||||
<option value="9600">9,600</option>
|
||||
<option value="4800">4,800</option>
|
||||
<option value="2400">2,400</option>
|
||||
<option value="1200" selected="selected">1,200</option>
|
||||
<option value="600">600</option>
|
||||
<option value="300">300</option>
|
||||
<option value="150">150</option>
|
||||
<option value="75">75</option>
|
||||
<option value="32">32</option>
|
||||
<option value="16">16</option>
|
||||
<option value="8">8</option>
|
||||
</select>
|
||||
<br />
|
||||
<label>Align: </label>
|
||||
<select id="polygons-align">
|
||||
<option value="center" selected="selected">Center</option>
|
||||
<option value="end">End</option>
|
||||
<option value="left">Left</option>
|
||||
<option value="right">Right</option>
|
||||
<option value="start">Start</option>
|
||||
</select>
|
||||
<br />
|
||||
<label>Baseline: </label>
|
||||
<select id="polygons-baseline">
|
||||
<option value="alphabetic">Alphabetic</option>
|
||||
<option value="bottom">Bottom</option>
|
||||
<option value="hanging">Hanging</option>
|
||||
<option value="ideographic">Ideographic</option>
|
||||
<option value="middle" selected="selected">Middle</option>
|
||||
<option value="top">Top</option>
|
||||
</select>
|
||||
<br />
|
||||
<label>Rotation: </label>
|
||||
<select id="polygons-rotation">
|
||||
<option value="0">0°</option>
|
||||
<option value="0.785398164">45°</option>
|
||||
<option value="1.570796327">90°</option>
|
||||
</select>
|
||||
<br />
|
||||
<label>Font: </label>
|
||||
<select id="polygons-font">
|
||||
<option value="Arial">Arial</option>
|
||||
<option value="Courier New">Courier New</option>
|
||||
<option value="Quattrocento Sans">Quattrocento</option>
|
||||
<option value="Verdana" selected="selected">Verdana</option>
|
||||
</select>
|
||||
<br />
|
||||
<label>Weight: </label>
|
||||
<select id="polygons-weight">
|
||||
<option value="bold" selected="selected">Bold</option>
|
||||
<option value="normal">Normal</option>
|
||||
</select>
|
||||
<br />
|
||||
<label>Size: </label>
|
||||
<input type="text" value="10px" id="polygons-size" />
|
||||
<br />
|
||||
<label>Offset X:</label>
|
||||
<input type="text" value="0" id="polygons-offset-x" />
|
||||
<br />
|
||||
<label>Offset Y:</label>
|
||||
<input type="text" value="0" id="polygons-offset-y" />
|
||||
<br />
|
||||
<label>Color :</label>
|
||||
<input type="text" value="blue" id="polygons-color" />
|
||||
<br />
|
||||
<label title="Outline Color">O. Color:</label>
|
||||
<input type="text" value="#ffffff" id="polygons-outline" />
|
||||
<br />
|
||||
<label title="Outline Width">O. Width :</label>
|
||||
<input type="text" value="3" id="polygons-outline-width" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="clear:left;"></div>
|
||||
|
||||
<div class="row-fluid">
|
||||
|
||||
<div class="span12">
|
||||
<h4 id="title">Vector labels example</h4>
|
||||
<p id="shortdesc">Example of GeoJSON features with labels.</p>
|
||||
<div id="docs">
|
||||
<p>See the <a href="vector-labels.js" target="_blank">vector-labels.js source</a> to see how this is done.</p>
|
||||
<p><strong>Note:</strong> The 'Text/Wrap' option is currently not working properly. This is because ol3 uses Canvas's strokeText and fillText functions that do not support text wrapping.</p>
|
||||
</div>
|
||||
<div id="tags">geojson, vector, openstreetmap, label</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=vector-labels" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,56 +0,0 @@
|
||||
<!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>Vector layer 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">Vector layer example</h4>
|
||||
<p id="shortdesc">Example of a countries vector layer with country information on hover and country labels at higher zoom levels.</p>
|
||||
<div id="docs">
|
||||
<p>See the <a href="vector-layer.js" target="_blank">vector-layer.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">vector, geojson, style, feature overlay</div>
|
||||
</div>
|
||||
<div class="span4 offset4">
|
||||
<div id="info" class="alert alert-success">
|
||||
|
||||
</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=vector-layer" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,56 +0,0 @@
|
||||
<!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>OSM XML 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">OSM XML example</h4>
|
||||
<p id="shortdesc">Example of using the OSM XML source. Vector data is loaded dynamically from a server using a tiling strategy.</p>
|
||||
<div id="docs">
|
||||
<p>See the <a href="vector-osm.js" target="_blank">vector-osm.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">vector, osm, xml, loading, server</div>
|
||||
</div>
|
||||
<div class="span4 offset4">
|
||||
<div id="info" class="alert alert-success">
|
||||
|
||||
</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=vector-osm" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,50 +0,0 @@
|
||||
<!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>WFS 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="span12">
|
||||
<h4 id="title">WFS example</h4>
|
||||
<p id="shortdesc">Example of using WFS with a BBOX strategy.</p>
|
||||
<div id="docs">
|
||||
<p>See the <a href="vector-wfs.js" target="_blank">vector-wfs.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">vector, WFS, bbox, loading, server</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=vector-wfs" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,50 +0,0 @@
|
||||
<!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>WKT 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">WKT example</h4>
|
||||
<p id="shortdesc">Example of using the WKT parser.</p>
|
||||
<div id="docs">
|
||||
<p>See the <a href="wkt.js" target="_blank">wkt.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">WKT Well Known Text</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=wkt" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,49 +0,0 @@
|
||||
<!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>WMS GetCapabilities parsing 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="span4">
|
||||
<h4 id="title">WMS GetCapabilities parsing example</h4>
|
||||
<p id="shortdesc">Example of parsing a WMS GetCapabilities response.</p>
|
||||
<div id="docs">
|
||||
<p>See the <a href="wms-capabilities.js" target="_blank">wms-capabilities.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">wms, capabilities, getcapabilities</div>
|
||||
</div>
|
||||
|
||||
<div class="span8">
|
||||
<pre id="log"></pre>
|
||||
</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=wms-capabilities" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user