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

83
examples_src/geolocation.html
View File

@@ -1,61 +1,24 @@
<!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>
---
template: "example.html"
title: "Geolocation example"
shortdesc: "Example of a geolocation map."
docs: >
Example of a geolocation map.
tags: "geolocation, openstreetmap"
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
<div class="span4 pull-right">
<div id="info" class="alert alert-error" style="display: none;"></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>
<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>
</div>
</div>

73
examples_src/getfeatureinfo-image.html
View File

@@ -1,59 +1,18 @@
<!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>
---
template: "example.html"
title: "GetFeatureInfo example (image layer)"
shortdesc: "This example shows how to trigger WMS GetFeatureInfo requests on click for a WMS image layer."
docs: >
<p>Additionally <code>map.forEachLayerAtPixel</code> is used to change the mouse pointer when hovering a non-transparent pixel on the map.</p>
tags: "getfeatureinfo, forEachLayerAtPixel"
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
<div class="span4 offset4 pull-right">
<div id="info" class="alert alert-success">
&nbsp;
</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">
&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>
</div>
</div>

73
examples_src/getfeatureinfo-tile.html
View File

@@ -1,59 +1,18 @@
<!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>
---
template: "example.html"
title: "WMS GetFeatureInfo example (tile layer)"
shortdesc: "This example shows how to trigger WMS GetFeatureInfo requests on click for a WMS tile layer."
docs: >
<p>Additionally <code>map.forEachLayerAtPixel</code> is used to change the mouse pointer when hovering a non-transparent pixel on the map.</p>
tags: "getfeatureinfo, forEachLayerAtPixel"
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
<div class="span4 offset4 pull-right">
<div id="info" class="alert alert-success">
&nbsp;
</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">
&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>
</div>
</div>

86
examples_src/gpx.html
View File

@@ -1,62 +1,24 @@
<!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">
&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>
---
template: "example.html"
title: "GPX example"
shortdesc: "Example of using the GPX source."
docs: >
Example of using the GPX source.
tags: "GPX"
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
<div class="span4 offset4 pull-right">
<div id="info" class="alert alert-success">
&nbsp;
</div>
</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>