Port over the measure, min-max-resolution, modify-features, modify-test, mouse-position and moveend examples
This commit is contained in:
Bart van den Eijnden
committed by
Andreas Hocevar
Andreas Hocevar
parent
de13706df9
commit
5b57c7d4b8
32
examples_src/measure.css
Normal file
32
examples_src/measure.css
Normal file
@@ -0,0 +1,32 @@
|
||||
.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;
|
||||
}
|
||||
@@ -1,98 +1,21 @@
|
||||
<!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>
|
||||
---
|
||||
template: "example.html"
|
||||
title: "Measure example"
|
||||
shortdesc: "Example of using the ol.interaction.Draw interaction for creating simple measuring application."
|
||||
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>
|
||||
tags: "draw, edit, measure, vector"
|
||||
---
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<div id="map" class="map"></div>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
@@ -1,60 +1,15 @@
|
||||
<!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>
|
||||
---
|
||||
template: "example.html"
|
||||
title: "Min/max resolution example"
|
||||
shortdesc: "Show/hide layers depending on current view resolution."
|
||||
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>
|
||||
tags: "minResolution, maxResolution, resolution"
|
||||
---
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<div id="map" class="map"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,53 +1,14 @@
|
||||
<!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>
|
||||
---
|
||||
template: "example.html"
|
||||
title: "Modify features example"
|
||||
shortdesc: "Editing features with the modify interaction."
|
||||
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>
|
||||
tags: "modify, edit, vector"
|
||||
---
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<div id="map" class="map"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
3
examples_src/modify-test.css
Normal file
3
examples_src/modify-test.css
Normal file
@@ -0,0 +1,3 @@
|
||||
.map {
|
||||
background: grey;
|
||||
}
|
||||
@@ -1,57 +1,13 @@
|
||||
<!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>
|
||||
---
|
||||
template: "example.html"
|
||||
title: "Modify features test"
|
||||
shortdesc: "Example for testing feature modification."
|
||||
docs: >
|
||||
Example for testing feature modification.
|
||||
tags: "modify, edit, vector"
|
||||
---
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<div id="map" class="map"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,59 +1,25 @@
|
||||
<!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>
|
||||
---
|
||||
template: "example.html"
|
||||
title: "Mouse position example"
|
||||
shortdesc: "Example of a mouse position control, outside the map."
|
||||
docs: >
|
||||
Example of a mouse position control, outside the map.
|
||||
tags: "mouse-position, openstreetmap"
|
||||
---
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<div id="map" class="map"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="span6">
|
||||
<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>
|
||||
@@ -1,54 +1,17 @@
|
||||
<!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>
|
||||
---
|
||||
template: "example.html"
|
||||
title: "Moveend Example"
|
||||
shortdesc: "Use of the moveend event."
|
||||
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>
|
||||
tags: "moveend, map, event"
|
||||
---
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<div id="map" class="map"></div>
|
||||
</div>
|
||||
</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">
|
||||
|
||||
Reference in New Issue
Block a user