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

Port over the geolocation, getfeatureinfo-image, getfeature-info-tile, gpx examples

Browse Source
This commit is contained in:
Bart van den Eijnden
2015-04-02 16:32:00 +02:00
committed by Andreas Hocevar
parent 2ebefc4466
commit 2ccdd87942
4 changed files with 79 additions and 236 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples_src/geolocation.html
+23 -60
View File
@@ -1,61 +1,24 @@
<!doctype html> ---
<html lang="en"> template: "example.html"
<head> title: "Geolocation example"
<meta charset="utf-8"> shortdesc: "Example of a geolocation map."
<meta http-equiv="X-UA-Compatible" content="chrome=1"> docs: >
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"> Example of a geolocation map.
<link rel="stylesheet" href="../css/ol.css" type="text/css"> tags: "geolocation, openstreetmap"
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css"> ---
<link rel="stylesheet" href="../resources/layout.css" type="text/css"> <div class="row-fluid">
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css"> <div class="span12">
<title>Geolocation example</title> <div id="map" class="map"></div>
</head> <div class="span4 pull-right">
<body> <div id="info" class="alert alert-error" style="display: none;"></div>
<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>
<label class="checkbox" for="track">
<div class="container-fluid"> <input id="track" type="checkbox"/>track position
</label>
<div class="row-fluid"> <p>position accuracy : <code id="accuracy"></code></p>
<div class="span12"> <p>altitude : <code id="altitude"></code></p>
<div id="map" class="map"></div> <p>altitude accuracy : <code id="altitudeAccuracy"></code></p>
</div> <p>heading : <code id="heading"></code></p>
</div> <p>speed : <code id="speed"></code></p>
</div>
<div class="row-fluid"> </div>
<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>
examples_src/getfeatureinfo-image.html
+16 -57
View File
@@ -1,59 +1,18 @@
<!doctype html> ---
<html lang="en"> template: "example.html"
<head> title: "GetFeatureInfo example (image layer)"
<meta charset="utf-8"> shortdesc: "This example shows how to trigger WMS GetFeatureInfo requests on click for a WMS image layer."
<meta http-equiv="X-UA-Compatible" content="chrome=1"> docs: >
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"> <p>Additionally <code>map.forEachLayerAtPixel</code> is used to change the mouse pointer when hovering a non-transparent pixel on the map.</p>
<link rel="stylesheet" href="../css/ol.css" type="text/css"> tags: "getfeatureinfo, forEachLayerAtPixel"
<link rel="stylesheet" href="../css/ol.css" type="text/css"> ---
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css"> <div class="row-fluid">
<link rel="stylesheet" href="../resources/layout.css" type="text/css"> <div class="span12">
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css"> <div id="map" class="map"></div>
<title>GetFeatureInfo example (image layer)</title> <div class="span4 offset4 pull-right">
</head> <div id="info" class="alert alert-success">
<body> &nbsp;
<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> </div>
</div>
<div class="container-fluid"> </div>
<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">
&nbsp;
</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>
examples_src/getfeatureinfo-tile.html
+16 -57
View File
@@ -1,59 +1,18 @@
<!doctype html> ---
<html lang="en"> template: "example.html"
<head> title: "WMS GetFeatureInfo example (tile layer)"
<meta charset="utf-8"> shortdesc: "This example shows how to trigger WMS GetFeatureInfo requests on click for a WMS tile layer."
<meta http-equiv="X-UA-Compatible" content="chrome=1"> docs: >
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"> <p>Additionally <code>map.forEachLayerAtPixel</code> is used to change the mouse pointer when hovering a non-transparent pixel on the map.</p>
<link rel="stylesheet" href="../css/ol.css" type="text/css"> tags: "getfeatureinfo, forEachLayerAtPixel"
<link rel="stylesheet" href="../css/ol.css" type="text/css"> ---
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css"> <div class="row-fluid">
<link rel="stylesheet" href="../resources/layout.css" type="text/css"> <div class="span12">
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css"> <div id="map" class="map"></div>
<title>WMS GetFeatureInfo example (tile layer)</title> <div class="span4 offset4 pull-right">
</head> <div id="info" class="alert alert-success">
<body> &nbsp;
<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> </div>
</div>
<div class="container-fluid"> </div>
<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">
&nbsp;
</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>
examples_src/gpx.html
+24 -62
View File
@@ -1,62 +1,24 @@
<!doctype html> ---
<html lang="en"> template: "example.html"
<head> title: "GPX example"
<meta charset="utf-8"> shortdesc: "Example of using the GPX source."
<meta http-equiv="X-UA-Compatible" content="chrome=1"> docs: >
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"> Example of using the GPX source.
<link rel="stylesheet" href="../css/ol.css" type="text/css"> tags: "GPX"
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css"> ---
<link rel="stylesheet" href="../resources/layout.css" type="text/css"> <div class="row-fluid">
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css"> <div class="span12">
<title>GPX example</title> <div id="map" class="map"></div>
</head> <div class="span4 offset4 pull-right">
<body> <div id="info" class="alert alert-success">
&nbsp;
<div class="navbar navbar-inverse navbar-fixed-top"> </div>
<div class="navbar-inner"> </div>
<div class="container"> <div id="no-download" class="alert alert-error" style="display: none">
<a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a> The "Export GPX" functionality requires a browser that supports the
</div> <a href="http://caniuse.com/#feat=download">link download</a> attribute.
</div> </div>
</div> <a id="export-gpx" class="btn" download="map.gpx"><i class="icon-download"></i>Export GPX</a>
</div>
<div class="container-fluid"> </div>
</div>
<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">
&nbsp;
</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>