Build and parse examples from examples_src/
This commit is contained in:
Andreas Hocevar
8
examples_src/Jugl.js
Normal file
8
examples_src/Jugl.js
Normal file
File diff suppressed because one or more lines are too long
72
examples_src/accessible.html
Normal file
72
examples_src/accessible.html
Normal file
@@ -0,0 +1,72 @@
|
||||
<!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>
|
||||
32
examples_src/accessible.js
Normal file
32
examples_src/accessible.js
Normal file
@@ -0,0 +1,32 @@
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.View');
|
||||
goog.require('ol.control');
|
||||
goog.require('ol.layer.Tile');
|
||||
goog.require('ol.source.OSM');
|
||||
|
||||
|
||||
var map = new ol.Map({
|
||||
layers: [
|
||||
new ol.layer.Tile({
|
||||
source: new ol.source.OSM()
|
||||
})
|
||||
],
|
||||
renderer: exampleNS.getRendererFromQueryString(),
|
||||
target: 'map',
|
||||
controls: ol.control.defaults({
|
||||
attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
|
||||
collapsible: false
|
||||
})
|
||||
}),
|
||||
view: new ol.View({
|
||||
center: [0, 0],
|
||||
zoom: 2
|
||||
})
|
||||
});
|
||||
|
||||
jQuery('#map').after('<button type="button" ' +
|
||||
'onclick="map.getView().setZoom(map.getView().getZoom() - 1);">' +
|
||||
'Zoom out</button>');
|
||||
jQuery('#map').after('<button type="button" ' +
|
||||
'onclick="map.getView().setZoom(map.getView().getZoom() + 1);">' +
|
||||
'Zoom in</button>');
|
||||
65
examples_src/animation.html
Normal file
65
examples_src/animation.html
Normal file
@@ -0,0 +1,65 @@
|
||||
<!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>
|
||||
188
examples_src/animation.js
Normal file
188
examples_src/animation.js
Normal file
@@ -0,0 +1,188 @@
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.View');
|
||||
goog.require('ol.animation');
|
||||
goog.require('ol.control');
|
||||
goog.require('ol.layer.Tile');
|
||||
goog.require('ol.proj');
|
||||
goog.require('ol.source.OSM');
|
||||
|
||||
|
||||
// from https://github.com/DmitryBaranovskiy/raphael
|
||||
function bounce(t) {
|
||||
var s = 7.5625, p = 2.75, l;
|
||||
if (t < (1 / p)) {
|
||||
l = s * t * t;
|
||||
} else {
|
||||
if (t < (2 / p)) {
|
||||
t -= (1.5 / p);
|
||||
l = s * t * t + 0.75;
|
||||
} else {
|
||||
if (t < (2.5 / p)) {
|
||||
t -= (2.25 / p);
|
||||
l = s * t * t + 0.9375;
|
||||
} else {
|
||||
t -= (2.625 / p);
|
||||
l = s * t * t + 0.984375;
|
||||
}
|
||||
}
|
||||
}
|
||||
return l;
|
||||
}
|
||||
|
||||
// from https://github.com/DmitryBaranovskiy/raphael
|
||||
function elastic(t) {
|
||||
return Math.pow(2, -10 * t) * Math.sin((t - 0.075) * (2 * Math.PI) / 0.3) + 1;
|
||||
}
|
||||
|
||||
var london = ol.proj.fromLonLat([-0.12755, 51.507222]);
|
||||
var moscow = ol.proj.fromLonLat([37.6178, 55.7517]);
|
||||
var istanbul = ol.proj.fromLonLat([28.9744, 41.0128]);
|
||||
var rome = ol.proj.fromLonLat([12.5, 41.9]);
|
||||
var bern = ol.proj.fromLonLat([7.4458, 46.95]);
|
||||
var madrid = ol.proj.fromLonLat([-3.683333, 40.4]);
|
||||
|
||||
var view = new ol.View({
|
||||
// the view's initial state
|
||||
center: istanbul,
|
||||
zoom: 6
|
||||
});
|
||||
|
||||
var map = new ol.Map({
|
||||
layers: [
|
||||
new ol.layer.Tile({
|
||||
preload: 4,
|
||||
source: new ol.source.OSM()
|
||||
})
|
||||
],
|
||||
renderer: exampleNS.getRendererFromQueryString(),
|
||||
// Improve user experience by loading tiles while animating. Will make
|
||||
// animations stutter on mobile or slow devices.
|
||||
loadTilesWhileAnimating: true,
|
||||
target: 'map',
|
||||
controls: ol.control.defaults({
|
||||
attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
|
||||
collapsible: false
|
||||
})
|
||||
}),
|
||||
view: view
|
||||
});
|
||||
|
||||
var rotateLeft = document.getElementById('rotate-left');
|
||||
rotateLeft.addEventListener('click', function() {
|
||||
var rotateLeft = ol.animation.rotate({
|
||||
duration: 2000,
|
||||
rotation: -4 * Math.PI
|
||||
});
|
||||
map.beforeRender(rotateLeft);
|
||||
}, false);
|
||||
var rotateRight = document.getElementById('rotate-right');
|
||||
rotateRight.addEventListener('click', function() {
|
||||
var rotateRight = ol.animation.rotate({
|
||||
duration: 2000,
|
||||
rotation: 4 * Math.PI
|
||||
});
|
||||
map.beforeRender(rotateRight);
|
||||
}, false);
|
||||
|
||||
var rotateAroundRome = document.getElementById('rotate-around-rome');
|
||||
rotateAroundRome.addEventListener('click', function() {
|
||||
var currentRotation = view.getRotation();
|
||||
var rotateAroundRome = ol.animation.rotate({
|
||||
anchor: rome,
|
||||
duration: 1000,
|
||||
rotation: currentRotation
|
||||
});
|
||||
map.beforeRender(rotateAroundRome);
|
||||
view.rotate(currentRotation + (Math.PI / 2), rome);
|
||||
}, false);
|
||||
|
||||
var panToLondon = document.getElementById('pan-to-london');
|
||||
panToLondon.addEventListener('click', function() {
|
||||
var pan = ol.animation.pan({
|
||||
duration: 2000,
|
||||
source: /** @type {ol.Coordinate} */ (view.getCenter())
|
||||
});
|
||||
map.beforeRender(pan);
|
||||
view.setCenter(london);
|
||||
}, false);
|
||||
|
||||
var elasticToMoscow = document.getElementById('elastic-to-moscow');
|
||||
elasticToMoscow.addEventListener('click', function() {
|
||||
var pan = ol.animation.pan({
|
||||
duration: 2000,
|
||||
easing: elastic,
|
||||
source: /** @type {ol.Coordinate} */ (view.getCenter())
|
||||
});
|
||||
map.beforeRender(pan);
|
||||
view.setCenter(moscow);
|
||||
}, false);
|
||||
|
||||
var bounceToIstanbul = document.getElementById('bounce-to-istanbul');
|
||||
bounceToIstanbul.addEventListener('click', function() {
|
||||
var pan = ol.animation.pan({
|
||||
duration: 2000,
|
||||
easing: bounce,
|
||||
source: /** @type {ol.Coordinate} */ (view.getCenter())
|
||||
});
|
||||
map.beforeRender(pan);
|
||||
view.setCenter(istanbul);
|
||||
}, false);
|
||||
|
||||
var spinToRome = document.getElementById('spin-to-rome');
|
||||
spinToRome.addEventListener('click', function() {
|
||||
var duration = 2000;
|
||||
var start = +new Date();
|
||||
var pan = ol.animation.pan({
|
||||
duration: duration,
|
||||
source: /** @type {ol.Coordinate} */ (view.getCenter()),
|
||||
start: start
|
||||
});
|
||||
var rotate = ol.animation.rotate({
|
||||
duration: duration,
|
||||
rotation: 2 * Math.PI,
|
||||
start: start
|
||||
});
|
||||
map.beforeRender(pan, rotate);
|
||||
view.setCenter(rome);
|
||||
}, false);
|
||||
|
||||
var flyToBern = document.getElementById('fly-to-bern');
|
||||
flyToBern.addEventListener('click', function() {
|
||||
var duration = 2000;
|
||||
var start = +new Date();
|
||||
var pan = ol.animation.pan({
|
||||
duration: duration,
|
||||
source: /** @type {ol.Coordinate} */ (view.getCenter()),
|
||||
start: start
|
||||
});
|
||||
var bounce = ol.animation.bounce({
|
||||
duration: duration,
|
||||
resolution: 4 * view.getResolution(),
|
||||
start: start
|
||||
});
|
||||
map.beforeRender(pan, bounce);
|
||||
view.setCenter(bern);
|
||||
}, false);
|
||||
|
||||
var spiralToMadrid = document.getElementById('spiral-to-madrid');
|
||||
spiralToMadrid.addEventListener('click', function() {
|
||||
var duration = 2000;
|
||||
var start = +new Date();
|
||||
var pan = ol.animation.pan({
|
||||
duration: duration,
|
||||
source: /** @type {ol.Coordinate} */ (view.getCenter()),
|
||||
start: start
|
||||
});
|
||||
var bounce = ol.animation.bounce({
|
||||
duration: duration,
|
||||
resolution: 2 * view.getResolution(),
|
||||
start: start
|
||||
});
|
||||
var rotate = ol.animation.rotate({
|
||||
duration: duration,
|
||||
rotation: -4 * Math.PI,
|
||||
start: start
|
||||
});
|
||||
map.beforeRender(pan, bounce, rotate);
|
||||
view.setCenter(madrid);
|
||||
}, false);
|
||||
51
examples_src/arcgis-tiled.html
Normal file
51
examples_src/arcgis-tiled.html
Normal file
@@ -0,0 +1,51 @@
|
||||
<!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>
|
||||
28
examples_src/arcgis-tiled.js
Normal file
28
examples_src/arcgis-tiled.js
Normal file
@@ -0,0 +1,28 @@
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.View');
|
||||
goog.require('ol.layer.Tile');
|
||||
goog.require('ol.source.MapQuest');
|
||||
goog.require('ol.source.TileArcGISRest');
|
||||
|
||||
var url = 'http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/' +
|
||||
'Specialty/ESRI_StateCityHighway_USA/MapServer';
|
||||
|
||||
var layers = [
|
||||
new ol.layer.Tile({
|
||||
source: new ol.source.MapQuest({layer: 'sat'})
|
||||
}),
|
||||
new ol.layer.Tile({
|
||||
extent: [-13884991, 2870341, -7455066, 6338219],
|
||||
source: new ol.source.TileArcGISRest({
|
||||
url: url
|
||||
})
|
||||
})
|
||||
];
|
||||
var map = new ol.Map({
|
||||
layers: layers,
|
||||
target: 'map',
|
||||
view: new ol.View({
|
||||
center: [-10997148, 4569099],
|
||||
zoom: 4
|
||||
})
|
||||
});
|
||||
51
examples_src/attributions.html
Normal file
51
examples_src/attributions.html
Normal file
@@ -0,0 +1,51 @@
|
||||
<!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>
|
||||
33
examples_src/attributions.js
Normal file
33
examples_src/attributions.js
Normal file
@@ -0,0 +1,33 @@
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.View');
|
||||
goog.require('ol.control');
|
||||
goog.require('ol.control.Attribution');
|
||||
goog.require('ol.layer.Tile');
|
||||
goog.require('ol.source.OSM');
|
||||
|
||||
var attribution = new ol.control.Attribution({
|
||||
collapsible: false
|
||||
});
|
||||
var map = new ol.Map({
|
||||
layers: [
|
||||
new ol.layer.Tile({
|
||||
source: new ol.source.OSM()
|
||||
})
|
||||
],
|
||||
controls: ol.control.defaults({ attribution: false }).extend([attribution]),
|
||||
renderer: exampleNS.getRendererFromQueryString(),
|
||||
target: 'map',
|
||||
view: new ol.View({
|
||||
center: [0, 0],
|
||||
zoom: 2
|
||||
})
|
||||
});
|
||||
|
||||
function checkSize() {
|
||||
var small = map.getSize()[0] < 600;
|
||||
attribution.setCollapsible(small);
|
||||
attribution.setCollapsed(small);
|
||||
}
|
||||
|
||||
$(window).on('resize', checkSize);
|
||||
checkSize();
|
||||
92
examples_src/bind-input.html
Normal file
92
examples_src/bind-input.html
Normal file
@@ -0,0 +1,92 @@
|
||||
<!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>
|
||||
69
examples_src/bind-input.js
Normal file
69
examples_src/bind-input.js
Normal file
@@ -0,0 +1,69 @@
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.View');
|
||||
goog.require('ol.control');
|
||||
goog.require('ol.dom.Input');
|
||||
goog.require('ol.has');
|
||||
goog.require('ol.layer.Tile');
|
||||
goog.require('ol.source.OSM');
|
||||
|
||||
|
||||
function checkWebGL(evt) {
|
||||
document.getElementById('no-webgl').style.display =
|
||||
ol.has.WEBGL ? 'none' : '';
|
||||
document.getElementById('has-webgl').style.display =
|
||||
ol.has.WEBGL && !evt.glContext ? '' : 'none';
|
||||
document.getElementById('webgl').style.display =
|
||||
evt.glContext ? '' : 'none';
|
||||
}
|
||||
|
||||
var layer = new ol.layer.Tile({
|
||||
source: new ol.source.OSM()
|
||||
});
|
||||
layer.once('precompose', checkWebGL);
|
||||
|
||||
var view = new ol.View({
|
||||
center: [0, 0],
|
||||
zoom: 2
|
||||
});
|
||||
|
||||
var map = new ol.Map({
|
||||
layers: [layer],
|
||||
renderer: exampleNS.getRendererFromQueryString(),
|
||||
target: 'map',
|
||||
controls: ol.control.defaults({
|
||||
attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
|
||||
collapsible: false
|
||||
})
|
||||
}),
|
||||
view: view
|
||||
});
|
||||
|
||||
var visible = new ol.dom.Input(document.getElementById('visible'));
|
||||
visible.bindTo('checked', layer, 'visible');
|
||||
|
||||
var opacity = new ol.dom.Input(document.getElementById('opacity'));
|
||||
opacity.bindTo('value', layer, 'opacity')
|
||||
.transform(parseFloat, String);
|
||||
|
||||
var hue = new ol.dom.Input(document.getElementById('hue'));
|
||||
hue.bindTo('value', layer, 'hue')
|
||||
.transform(parseFloat, String);
|
||||
|
||||
var saturation = new ol.dom.Input(document.getElementById('saturation'));
|
||||
saturation.bindTo('value', layer, 'saturation')
|
||||
.transform(parseFloat, String);
|
||||
|
||||
var contrast = new ol.dom.Input(document.getElementById('contrast'));
|
||||
contrast.bindTo('value', layer, 'contrast')
|
||||
.transform(parseFloat, String);
|
||||
|
||||
var brightness = new ol.dom.Input(document.getElementById('brightness'));
|
||||
brightness.bindTo('value', layer, 'brightness')
|
||||
.transform(parseFloat, String);
|
||||
|
||||
|
||||
var rotation = new ol.dom.Input(document.getElementById('rotation'));
|
||||
rotation.bindTo('value', view, 'rotation').transform(parseFloat, String);
|
||||
|
||||
var resolution = new ol.dom.Input(document.getElementById('resolution'));
|
||||
resolution.bindTo('value', view, 'resolution').transform(parseFloat, String);
|
||||
60
examples_src/bing-maps.html
Normal file
60
examples_src/bing-maps.html
Normal file
@@ -0,0 +1,60 @@
|
||||
<!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>
|
||||
49
examples_src/bing-maps.js
Normal file
49
examples_src/bing-maps.js
Normal file
@@ -0,0 +1,49 @@
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.View');
|
||||
goog.require('ol.layer.Tile');
|
||||
goog.require('ol.source.BingMaps');
|
||||
|
||||
|
||||
var styles = [
|
||||
'Road',
|
||||
'Aerial',
|
||||
'AerialWithLabels',
|
||||
'collinsBart',
|
||||
'ordnanceSurvey'
|
||||
];
|
||||
var layers = [];
|
||||
var i, ii;
|
||||
for (i = 0, ii = styles.length; i < ii; ++i) {
|
||||
layers.push(new ol.layer.Tile({
|
||||
visible: false,
|
||||
preload: Infinity,
|
||||
source: new ol.source.BingMaps({
|
||||
key: 'Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3',
|
||||
imagerySet: styles[i]
|
||||
// use maxZoom 19 to see stretched tiles instead of the BingMaps
|
||||
// "no photos at this zoom level" tiles
|
||||
// maxZoom: 19
|
||||
})
|
||||
}));
|
||||
}
|
||||
var map = new ol.Map({
|
||||
layers: layers,
|
||||
renderer: exampleNS.getRendererFromQueryString(),
|
||||
// Improve user experience by loading tiles while dragging/zooming. Will make
|
||||
// zooming choppy on mobile or slow devices.
|
||||
loadTilesWhileInteracting: true,
|
||||
target: 'map',
|
||||
view: new ol.View({
|
||||
center: [-6655.5402445057125, 6709968.258934638],
|
||||
zoom: 13
|
||||
})
|
||||
});
|
||||
|
||||
$('#layer-select').change(function() {
|
||||
var style = $(this).find(':selected').val();
|
||||
var i, ii;
|
||||
for (i = 0, ii = layers.length; i < ii; ++i) {
|
||||
layers[i].setVisible(styles[i] == style);
|
||||
}
|
||||
});
|
||||
$('#layer-select').trigger('change');
|
||||
59
examples_src/box-selection.html
Normal file
59
examples_src/box-selection.html
Normal file
@@ -0,0 +1,59 @@
|
||||
<!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>
|
||||
80
examples_src/box-selection.js
Normal file
80
examples_src/box-selection.js
Normal file
@@ -0,0 +1,80 @@
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.View');
|
||||
goog.require('ol.events.condition');
|
||||
goog.require('ol.interaction.DragBox');
|
||||
goog.require('ol.interaction.Select');
|
||||
goog.require('ol.layer.Tile');
|
||||
goog.require('ol.layer.Vector');
|
||||
goog.require('ol.source.GeoJSON');
|
||||
goog.require('ol.source.OSM');
|
||||
goog.require('ol.style.Stroke');
|
||||
goog.require('ol.style.Style');
|
||||
|
||||
|
||||
var vectorSource = new ol.source.GeoJSON({
|
||||
projection: 'EPSG:3857',
|
||||
url: 'data/geojson/countries.geojson'
|
||||
});
|
||||
|
||||
|
||||
var map = new ol.Map({
|
||||
layers: [
|
||||
new ol.layer.Tile({
|
||||
source: new ol.source.OSM()
|
||||
}),
|
||||
new ol.layer.Vector({
|
||||
source: vectorSource
|
||||
})
|
||||
],
|
||||
renderer: 'canvas',
|
||||
target: 'map',
|
||||
view: new ol.View({
|
||||
center: [0, 0],
|
||||
zoom: 2
|
||||
})
|
||||
});
|
||||
|
||||
// a normal select interaction to handle click
|
||||
var select = new ol.interaction.Select();
|
||||
map.addInteraction(select);
|
||||
|
||||
var selectedFeatures = select.getFeatures();
|
||||
|
||||
// a DragBox interaction used to select features by drawing boxes
|
||||
var dragBox = new ol.interaction.DragBox({
|
||||
condition: ol.events.condition.shiftKeyOnly,
|
||||
style: new ol.style.Style({
|
||||
stroke: new ol.style.Stroke({
|
||||
color: [0, 0, 255, 1]
|
||||
})
|
||||
})
|
||||
});
|
||||
|
||||
map.addInteraction(dragBox);
|
||||
|
||||
var infoBox = document.getElementById('info');
|
||||
|
||||
dragBox.on('boxend', function(e) {
|
||||
// features that intersect the box are added to the collection of
|
||||
// selected features, and their names are displayed in the "info"
|
||||
// div
|
||||
var info = [];
|
||||
var extent = dragBox.getGeometry().getExtent();
|
||||
vectorSource.forEachFeatureIntersectingExtent(extent, function(feature) {
|
||||
selectedFeatures.push(feature);
|
||||
info.push(feature.get('name'));
|
||||
});
|
||||
if (info.length > 0) {
|
||||
infoBox.innerHTML = info.join(', ');
|
||||
}
|
||||
});
|
||||
|
||||
// clear selection when drawing a new box and when clicking on the map
|
||||
dragBox.on('boxstart', function(e) {
|
||||
selectedFeatures.clear();
|
||||
infoBox.innerHTML = ' ';
|
||||
});
|
||||
map.on('click', function() {
|
||||
selectedFeatures.clear();
|
||||
infoBox.innerHTML = ' ';
|
||||
});
|
||||
74
examples_src/brightness-contrast.html
Normal file
74
examples_src/brightness-contrast.html
Normal file
@@ -0,0 +1,74 @@
|
||||
<!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>
|
||||
75
examples_src/brightness-contrast.js
Normal file
75
examples_src/brightness-contrast.js
Normal file
@@ -0,0 +1,75 @@
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.View');
|
||||
goog.require('ol.has');
|
||||
goog.require('ol.layer.Tile');
|
||||
goog.require('ol.source.MapQuest');
|
||||
|
||||
|
||||
function setResetBrightnessButtonHTML() {
|
||||
resetBrightness.innerHTML = 'Brightness (' +
|
||||
layer.getBrightness().toFixed(3) + ')';
|
||||
}
|
||||
|
||||
function setResetContrastButtonHTML() {
|
||||
resetContrast.innerHTML = 'Contrast (' + layer.getContrast().toFixed(3) + ')';
|
||||
}
|
||||
|
||||
if (!ol.has.WEBGL) {
|
||||
var info = document.getElementById('no-webgl');
|
||||
/**
|
||||
* display error message
|
||||
*/
|
||||
info.style.display = '';
|
||||
} else {
|
||||
var layer = new ol.layer.Tile({
|
||||
source: new ol.source.MapQuest({layer: 'sat'})
|
||||
});
|
||||
|
||||
var map = new ol.Map({
|
||||
layers: [layer],
|
||||
renderer: 'webgl',
|
||||
target: 'map',
|
||||
view: new ol.View({
|
||||
center: [0, 0],
|
||||
zoom: 2
|
||||
})
|
||||
});
|
||||
|
||||
var increaseBrightness = document.getElementById('increase-brightness');
|
||||
var resetBrightness = document.getElementById('reset-brightness');
|
||||
var decreaseBrightness = document.getElementById('decrease-brightness');
|
||||
|
||||
setResetBrightnessButtonHTML();
|
||||
|
||||
increaseBrightness.addEventListener('click', function() {
|
||||
layer.setBrightness(Math.min(layer.getBrightness() + 0.125, 1));
|
||||
setResetBrightnessButtonHTML();
|
||||
}, false);
|
||||
resetBrightness.addEventListener('click', function() {
|
||||
layer.setBrightness(0);
|
||||
setResetBrightnessButtonHTML();
|
||||
}, false);
|
||||
decreaseBrightness.addEventListener('click', function() {
|
||||
layer.setBrightness(Math.max(layer.getBrightness() - 0.125, -1));
|
||||
setResetBrightnessButtonHTML();
|
||||
}, false);
|
||||
|
||||
var increaseContrast = document.getElementById('increase-contrast');
|
||||
var resetContrast = document.getElementById('reset-contrast');
|
||||
var decreaseContrast = document.getElementById('decrease-contrast');
|
||||
|
||||
setResetContrastButtonHTML();
|
||||
|
||||
increaseContrast.addEventListener('click', function() {
|
||||
layer.setContrast(layer.getContrast() + 0.125);
|
||||
setResetContrastButtonHTML();
|
||||
}, false);
|
||||
resetContrast.addEventListener('click', function() {
|
||||
layer.setContrast(1);
|
||||
setResetContrastButtonHTML();
|
||||
}, false);
|
||||
decreaseContrast.addEventListener('click', function() {
|
||||
layer.setContrast(Math.max(layer.getContrast() - 0.125, 0));
|
||||
setResetContrastButtonHTML();
|
||||
}, false);
|
||||
}
|
||||
62
examples_src/button-title.html
Normal file
62
examples_src/button-title.html
Normal file
@@ -0,0 +1,62 @@
|
||||
<!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>
|
||||
27
examples_src/button-title.js
Normal file
27
examples_src/button-title.js
Normal file
@@ -0,0 +1,27 @@
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.View');
|
||||
goog.require('ol.layer.Tile');
|
||||
goog.require('ol.source.OSM');
|
||||
|
||||
var map = new ol.Map({
|
||||
layers: [
|
||||
new ol.layer.Tile({
|
||||
source: new ol.source.OSM()
|
||||
})
|
||||
],
|
||||
renderer: exampleNS.getRendererFromQueryString(),
|
||||
target: 'map',
|
||||
view: new ol.View({
|
||||
center: [-8730000, 5930000],
|
||||
rotation: Math.PI / 5,
|
||||
zoom: 8
|
||||
})
|
||||
});
|
||||
|
||||
|
||||
$('.ol-zoom-in, .ol-zoom-out').tooltip({
|
||||
placement: 'right'
|
||||
});
|
||||
$('.ol-rotate-reset, .ol-attribution button[title]').tooltip({
|
||||
placement: 'left'
|
||||
});
|
||||
52
examples_src/canvas-tiles.html
Normal file
52
examples_src/canvas-tiles.html
Normal file
@@ -0,0 +1,52 @@
|
||||
<!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>
|
||||
37
examples_src/canvas-tiles.js
Normal file
37
examples_src/canvas-tiles.js
Normal file
@@ -0,0 +1,37 @@
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.View');
|
||||
goog.require('ol.control');
|
||||
goog.require('ol.layer.Tile');
|
||||
goog.require('ol.proj');
|
||||
goog.require('ol.source.OSM');
|
||||
goog.require('ol.source.TileDebug');
|
||||
goog.require('ol.tilegrid.XYZ');
|
||||
|
||||
|
||||
var map = new ol.Map({
|
||||
layers: [
|
||||
new ol.layer.Tile({
|
||||
source: new ol.source.OSM()
|
||||
}),
|
||||
new ol.layer.Tile({
|
||||
source: new ol.source.TileDebug({
|
||||
projection: 'EPSG:3857',
|
||||
tileGrid: new ol.tilegrid.XYZ({
|
||||
maxZoom: 22
|
||||
})
|
||||
})
|
||||
})
|
||||
],
|
||||
renderer: exampleNS.getRendererFromQueryString(),
|
||||
target: 'map',
|
||||
controls: ol.control.defaults({
|
||||
attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
|
||||
collapsible: false
|
||||
})
|
||||
}),
|
||||
view: new ol.View({
|
||||
center: ol.proj.transform(
|
||||
[-0.1275, 51.507222], 'EPSG:4326', 'EPSG:3857'),
|
||||
zoom: 10
|
||||
})
|
||||
});
|
||||
131
examples_src/center.html
Normal file
131
examples_src/center.html
Normal file
@@ -0,0 +1,131 @@
|
||||
<!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>
|
||||
133
examples_src/center.js
Normal file
133
examples_src/center.js
Normal file
@@ -0,0 +1,133 @@
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.View');
|
||||
goog.require('ol.control');
|
||||
goog.require('ol.geom.Point');
|
||||
goog.require('ol.geom.SimpleGeometry');
|
||||
goog.require('ol.layer.Tile');
|
||||
goog.require('ol.layer.Vector');
|
||||
goog.require('ol.source.GeoJSON');
|
||||
goog.require('ol.source.OSM');
|
||||
goog.require('ol.style.Circle');
|
||||
goog.require('ol.style.Fill');
|
||||
goog.require('ol.style.Stroke');
|
||||
goog.require('ol.style.Style');
|
||||
|
||||
var source = new ol.source.GeoJSON({
|
||||
projection: 'EPSG:3857',
|
||||
url: 'data/geojson/switzerland.geojson'
|
||||
});
|
||||
var style = new ol.style.Style({
|
||||
fill: new ol.style.Fill({
|
||||
color: 'rgba(255, 255, 255, 0.6)'
|
||||
}),
|
||||
stroke: new ol.style.Stroke({
|
||||
color: '#319FD3',
|
||||
width: 1
|
||||
}),
|
||||
image: new ol.style.Circle({
|
||||
radius: 5,
|
||||
fill: new ol.style.Fill({
|
||||
color: 'rgba(255, 255, 255, 0.6)'
|
||||
}),
|
||||
stroke: new ol.style.Stroke({
|
||||
color: '#319FD3',
|
||||
width: 1
|
||||
})
|
||||
})
|
||||
});
|
||||
var vectorLayer = new ol.layer.Vector({
|
||||
source: source,
|
||||
style: style
|
||||
});
|
||||
var view = new ol.View({
|
||||
center: [0, 0],
|
||||
zoom: 1
|
||||
});
|
||||
var map = new ol.Map({
|
||||
layers: [
|
||||
new ol.layer.Tile({
|
||||
source: new ol.source.OSM()
|
||||
}),
|
||||
vectorLayer
|
||||
],
|
||||
target: 'map',
|
||||
controls: ol.control.defaults({
|
||||
attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
|
||||
collapsible: false
|
||||
})
|
||||
}),
|
||||
view: view
|
||||
});
|
||||
|
||||
var zoomtoswitzerlandbest = document.getElementById('zoomtoswitzerlandbest');
|
||||
zoomtoswitzerlandbest.addEventListener('click', function() {
|
||||
var feature = source.getFeatures()[0];
|
||||
var polygon = /** @type {ol.geom.SimpleGeometry} */ (feature.getGeometry());
|
||||
var size = /** @type {ol.Size} */ (map.getSize());
|
||||
view.fitGeometry(
|
||||
polygon,
|
||||
size,
|
||||
{
|
||||
padding: [170, 50, 30, 150],
|
||||
constrainResolution: false
|
||||
}
|
||||
);
|
||||
}, false);
|
||||
|
||||
var zoomtoswitzerlandconstrained =
|
||||
document.getElementById('zoomtoswitzerlandconstrained');
|
||||
zoomtoswitzerlandconstrained.addEventListener('click', function() {
|
||||
var feature = source.getFeatures()[0];
|
||||
var polygon = /** @type {ol.geom.SimpleGeometry} */ (feature.getGeometry());
|
||||
var size = /** @type {ol.Size} */ (map.getSize());
|
||||
view.fitGeometry(
|
||||
polygon,
|
||||
size,
|
||||
{
|
||||
padding: [170, 50, 30, 150]
|
||||
}
|
||||
);
|
||||
}, false);
|
||||
|
||||
var zoomtoswitzerlandnearest =
|
||||
document.getElementById('zoomtoswitzerlandnearest');
|
||||
zoomtoswitzerlandnearest.addEventListener('click', function() {
|
||||
var feature = source.getFeatures()[0];
|
||||
var polygon = /** @type {ol.geom.SimpleGeometry} */ (feature.getGeometry());
|
||||
var size = /** @type {ol.Size} */ (map.getSize());
|
||||
view.fitGeometry(
|
||||
polygon,
|
||||
size,
|
||||
{
|
||||
padding: [170, 50, 30, 150],
|
||||
nearest: true
|
||||
}
|
||||
);
|
||||
}, false);
|
||||
|
||||
var zoomtolausanne = document.getElementById('zoomtolausanne');
|
||||
zoomtolausanne.addEventListener('click', function() {
|
||||
var feature = source.getFeatures()[1];
|
||||
var point = /** @type {ol.geom.SimpleGeometry} */ (feature.getGeometry());
|
||||
var size = /** @type {ol.Size} */ (map.getSize());
|
||||
view.fitGeometry(
|
||||
point,
|
||||
size,
|
||||
{
|
||||
padding: [170, 50, 30, 150],
|
||||
minResolution: 50
|
||||
}
|
||||
);
|
||||
}, false);
|
||||
|
||||
var centerlausanne = document.getElementById('centerlausanne');
|
||||
centerlausanne.addEventListener('click', function() {
|
||||
var feature = source.getFeatures()[1];
|
||||
var point = /** @type {ol.geom.Point} */ (feature.getGeometry());
|
||||
var size = /** @type {ol.Size} */ (map.getSize());
|
||||
view.centerOn(
|
||||
point.getCoordinates(),
|
||||
size,
|
||||
[570, 500]
|
||||
);
|
||||
}, false);
|
||||
51
examples_src/cluster.html
Normal file
51
examples_src/cluster.html
Normal file
@@ -0,0 +1,51 @@
|
||||
<!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>
|
||||
80
examples_src/cluster.js
Normal file
80
examples_src/cluster.js
Normal file
@@ -0,0 +1,80 @@
|
||||
goog.require('ol.Feature');
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.View');
|
||||
goog.require('ol.geom.Point');
|
||||
goog.require('ol.layer.Tile');
|
||||
goog.require('ol.layer.Vector');
|
||||
goog.require('ol.source.Cluster');
|
||||
goog.require('ol.source.MapQuest');
|
||||
goog.require('ol.source.Vector');
|
||||
goog.require('ol.style.Circle');
|
||||
goog.require('ol.style.Fill');
|
||||
goog.require('ol.style.Stroke');
|
||||
goog.require('ol.style.Style');
|
||||
goog.require('ol.style.Text');
|
||||
|
||||
|
||||
var count = 20000;
|
||||
var features = new Array(count);
|
||||
var e = 4500000;
|
||||
for (var i = 0; i < count; ++i) {
|
||||
var coordinates = [2 * e * Math.random() - e, 2 * e * Math.random() - e];
|
||||
features[i] = new ol.Feature(new ol.geom.Point(coordinates));
|
||||
}
|
||||
|
||||
var source = new ol.source.Vector({
|
||||
features: features
|
||||
});
|
||||
|
||||
var clusterSource = new ol.source.Cluster({
|
||||
distance: 40,
|
||||
source: source
|
||||
});
|
||||
|
||||
var styleCache = {};
|
||||
var clusters = new ol.layer.Vector({
|
||||
source: clusterSource,
|
||||
style: function(feature, resolution) {
|
||||
var size = feature.get('features').length;
|
||||
var style = styleCache[size];
|
||||
if (!style) {
|
||||
style = [new ol.style.Style({
|
||||
image: new ol.style.Circle({
|
||||
radius: 10,
|
||||
stroke: new ol.style.Stroke({
|
||||
color: '#fff'
|
||||
}),
|
||||
fill: new ol.style.Fill({
|
||||
color: '#3399CC'
|
||||
})
|
||||
}),
|
||||
text: new ol.style.Text({
|
||||
text: size.toString(),
|
||||
fill: new ol.style.Fill({
|
||||
color: '#fff'
|
||||
})
|
||||
})
|
||||
})];
|
||||
styleCache[size] = style;
|
||||
}
|
||||
return style;
|
||||
}
|
||||
});
|
||||
|
||||
var raster = new ol.layer.Tile({
|
||||
source: new ol.source.MapQuest({layer: 'sat'})
|
||||
});
|
||||
|
||||
var raw = new ol.layer.Vector({
|
||||
source: source
|
||||
});
|
||||
|
||||
var map = new ol.Map({
|
||||
layers: [raster, clusters],
|
||||
renderer: 'canvas',
|
||||
target: 'map',
|
||||
view: new ol.View({
|
||||
center: [0, 0],
|
||||
zoom: 2
|
||||
})
|
||||
});
|
||||
64
examples_src/custom-controls.html
Normal file
64
examples_src/custom-controls.html
Normal file
@@ -0,0 +1,64 @@
|
||||
<!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>
|
||||
81
examples_src/custom-controls.js
Normal file
81
examples_src/custom-controls.js
Normal file
@@ -0,0 +1,81 @@
|
||||
goog.require('ol');
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.View');
|
||||
goog.require('ol.control');
|
||||
goog.require('ol.control.Control');
|
||||
goog.require('ol.layer.Tile');
|
||||
goog.require('ol.source.OSM');
|
||||
|
||||
|
||||
/**
|
||||
* Define a namespace for the application.
|
||||
*/
|
||||
window.app = {};
|
||||
var app = window.app;
|
||||
|
||||
|
||||
//
|
||||
// Define rotate to north control.
|
||||
//
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* @constructor
|
||||
* @extends {ol.control.Control}
|
||||
* @param {Object=} opt_options Control options.
|
||||
*/
|
||||
app.RotateNorthControl = function(opt_options) {
|
||||
|
||||
var options = opt_options || {};
|
||||
|
||||
var button = document.createElement('button');
|
||||
button.innerHTML = 'N';
|
||||
|
||||
var this_ = this;
|
||||
var handleRotateNorth = function(e) {
|
||||
this_.getMap().getView().setRotation(0);
|
||||
};
|
||||
|
||||
button.addEventListener('click', handleRotateNorth, false);
|
||||
button.addEventListener('touchstart', handleRotateNorth, false);
|
||||
|
||||
var element = document.createElement('div');
|
||||
element.className = 'rotate-north ol-unselectable ol-control';
|
||||
element.appendChild(button);
|
||||
|
||||
ol.control.Control.call(this, {
|
||||
element: element,
|
||||
target: options.target
|
||||
});
|
||||
|
||||
};
|
||||
ol.inherits(app.RotateNorthControl, ol.control.Control);
|
||||
|
||||
|
||||
//
|
||||
// Create map, giving it a rotate to north control.
|
||||
//
|
||||
|
||||
|
||||
var map = new ol.Map({
|
||||
controls: ol.control.defaults({
|
||||
attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
|
||||
collapsible: false
|
||||
})
|
||||
}).extend([
|
||||
new app.RotateNorthControl()
|
||||
]),
|
||||
layers: [
|
||||
new ol.layer.Tile({
|
||||
source: new ol.source.OSM()
|
||||
})
|
||||
],
|
||||
renderer: exampleNS.getRendererFromQueryString(),
|
||||
target: 'map',
|
||||
view: new ol.View({
|
||||
center: [0, 0],
|
||||
zoom: 2,
|
||||
rotation: 1
|
||||
})
|
||||
});
|
||||
54
examples_src/d3.html
Normal file
54
examples_src/d3.html
Normal file
@@ -0,0 +1,54 @@
|
||||
<!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>
|
||||
96
examples_src/d3.js
vendored
Normal file
96
examples_src/d3.js
vendored
Normal file
@@ -0,0 +1,96 @@
|
||||
// NOCOMPILE
|
||||
// this example uses d3 for which we don't have an externs file.
|
||||
goog.require('ol');
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.View');
|
||||
goog.require('ol.extent');
|
||||
goog.require('ol.layer.Image');
|
||||
goog.require('ol.layer.Tile');
|
||||
goog.require('ol.proj');
|
||||
goog.require('ol.source.ImageCanvas');
|
||||
goog.require('ol.source.Stamen');
|
||||
|
||||
|
||||
var map = new ol.Map({
|
||||
layers: [
|
||||
new ol.layer.Tile({
|
||||
source: new ol.source.Stamen({
|
||||
layer: 'watercolor'
|
||||
})
|
||||
})
|
||||
],
|
||||
target: 'map',
|
||||
view: new ol.View({
|
||||
center: ol.proj.fromLonLat([-97, 38]),
|
||||
zoom: 4
|
||||
})
|
||||
});
|
||||
|
||||
|
||||
/**
|
||||
* Load the topojson data and create an ol.layer.Image for that data.
|
||||
*/
|
||||
d3.json('data/topojson/us.json', function(error, us) {
|
||||
var features = topojson.feature(us, us.objects.counties);
|
||||
|
||||
/**
|
||||
* This function uses d3 to render the topojson features to a canvas.
|
||||
* @param {ol.Extent} extent Extent.
|
||||
* @param {number} resolution Resolution.
|
||||
* @param {number} pixelRatio Pixel ratio.
|
||||
* @param {ol.Size} size Size.
|
||||
* @param {ol.proj.Projection} projection Projection.
|
||||
* @return {HTMLCanvasElement}
|
||||
*/
|
||||
var canvasFunction = function(extent, resolution, pixelRatio,
|
||||
size, projection) {
|
||||
var canvasWidth = size[0];
|
||||
var canvasHeight = size[1];
|
||||
|
||||
var canvas = d3.select(document.createElement('canvas'));
|
||||
canvas.attr('width', canvasWidth).attr('height', canvasHeight);
|
||||
|
||||
var context = canvas.node().getContext('2d');
|
||||
|
||||
var d3Projection = d3.geo.mercator().scale(1).translate([0, 0]);
|
||||
var d3Path = d3.geo.path().projection(d3Projection);
|
||||
|
||||
var pixelBounds = d3Path.bounds(features);
|
||||
var pixelBoundsWidth = pixelBounds[1][0] - pixelBounds[0][0];
|
||||
var pixelBoundsHeight = pixelBounds[1][1] - pixelBounds[0][1];
|
||||
|
||||
var geoBounds = d3.geo.bounds(features);
|
||||
var geoBoundsLeftBottom = ol.proj.transform(
|
||||
geoBounds[0], 'EPSG:4326', projection);
|
||||
var geoBoundsRightTop = ol.proj.transform(
|
||||
geoBounds[1], 'EPSG:4326', projection);
|
||||
var geoBoundsWidth = geoBoundsRightTop[0] - geoBoundsLeftBottom[0];
|
||||
if (geoBoundsWidth < 0) {
|
||||
geoBoundsWidth += ol.extent.getWidth(projection.getExtent());
|
||||
}
|
||||
var geoBoundsHeight = geoBoundsRightTop[1] - geoBoundsLeftBottom[1];
|
||||
|
||||
var widthResolution = geoBoundsWidth / pixelBoundsWidth;
|
||||
var heightResolution = geoBoundsHeight / pixelBoundsHeight;
|
||||
var r = Math.max(widthResolution, heightResolution);
|
||||
var scale = r / (resolution / pixelRatio);
|
||||
|
||||
var center = ol.proj.transform(ol.extent.getCenter(extent),
|
||||
projection, 'EPSG:4326');
|
||||
d3Projection.scale(scale).center(center)
|
||||
.translate([canvasWidth / 2, canvasHeight / 2]);
|
||||
d3Path = d3Path.projection(d3Projection).context(context);
|
||||
d3Path(features);
|
||||
context.stroke();
|
||||
|
||||
return canvas[0][0];
|
||||
};
|
||||
|
||||
var layer = new ol.layer.Image({
|
||||
source: new ol.source.ImageCanvas({
|
||||
canvasFunction: canvasFunction,
|
||||
projection: 'EPSG:3857'
|
||||
})
|
||||
});
|
||||
map.addLayer(layer);
|
||||
});
|
||||
BIN
examples_src/data/Butterfly.png
Normal file
BIN
examples_src/data/Butterfly.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 61 KiB |
1
examples_src/data/IGNWMTSCapabilities.xml
Normal file
1
examples_src/data/IGNWMTSCapabilities.xml
Normal file
File diff suppressed because one or more lines are too long
279
examples_src/data/WMTSCapabilities.xml
Normal file
279
examples_src/data/WMTSCapabilities.xml
Normal file
@@ -0,0 +1,279 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<Capabilities version="1.0.0" xmlns="http://www.opengis.net/wmts/1.0" xmlns:gml="http://www.opengis.net/gml" xmlns:ows="http://www.opengis.net/ows/1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.opengis.net/wmts/1.0 http://schemas.opengis.net/wmts/1.0/wmtsGetCapabilities_response.xsd">
|
||||
<ows:ServiceIdentification>
|
||||
<ows:Title>Koordinates Labs</ows:Title>
|
||||
<ows:ServiceType>OGC WMTS</ows:ServiceType>
|
||||
<ows:ServiceTypeVersion>1.0.0</ows:ServiceTypeVersion>
|
||||
</ows:ServiceIdentification>
|
||||
<ows:ServiceProvider>
|
||||
<ows:ProviderName>Koordinates</ows:ProviderName>
|
||||
<ows:ProviderSite xlink:href="http://labs.koordinates.com"/>
|
||||
<ows:ServiceContact/>
|
||||
</ows:ServiceProvider>
|
||||
<ows:OperationsMetadata>
|
||||
<ows:Operation name="GetCapabilities">
|
||||
<ows:DCP>
|
||||
<ows:HTTP>
|
||||
<ows:Get xlink:href="https://labs.koordinates.com/services;key=d740ea02e0c44cafb70dce31a774ca10/wmts/1.0.0/layer/7328/WMTSCapabilities.xml?">
|
||||
<ows:Constraint name="GetEncoding">
|
||||
<ows:AllowedValues>
|
||||
<ows:Value>KVP</ows:Value>
|
||||
</ows:AllowedValues>
|
||||
</ows:Constraint>
|
||||
</ows:Get>
|
||||
</ows:HTTP>
|
||||
</ows:DCP>
|
||||
</ows:Operation>
|
||||
<ows:Operation name="GetFeatureInfo">
|
||||
<ows:DCP>
|
||||
<ows:HTTP>
|
||||
<ows:Get xlink:href="https://labs.koordinates.com/services;key=d740ea02e0c44cafb70dce31a774ca10/wmts/?">
|
||||
<ows:Constraint name="GetEncoding">
|
||||
<ows:AllowedValues>
|
||||
<ows:Value>KVP</ows:Value>
|
||||
</ows:AllowedValues>
|
||||
</ows:Constraint>
|
||||
</ows:Get>
|
||||
</ows:HTTP>
|
||||
</ows:DCP>
|
||||
</ows:Operation>
|
||||
</ows:OperationsMetadata>
|
||||
<Contents>
|
||||
<Layer>
|
||||
<ows:Title>New Zealand Earthquakes</ows:Title>
|
||||
<ows:Abstract>Historical earthquake data, accessed via the [GeoNet WFS feed](http://info.geonet.org.nz/display/appdata/Advanced+Queries). The data has been filtered to only include quakes in proximity to New Zealand with an `eventtype` of "Earthquake" or "none" per the [GeoNet catalogue](http://info.geonet.org.nz/display/appdata/Catalogue+Output). Most fields have been removed. Please also note the excluded data per this [GeoNet page](http://info.geonet.org.nz/display/appdata/The+Gap). We acknowledge the New Zealand GeoNet project and its sponsors EQC, GNS Science and LINZ, for providing data used in this layer.</ows:Abstract>
|
||||
<ows:Identifier>layer-7328</ows:Identifier>
|
||||
<ows:BoundingBox crs="urn:ogc:def:crs:EPSG::3857">
|
||||
<ows:LowerCorner>-20037508.342789 -6406581.708337</ows:LowerCorner>
|
||||
<ows:UpperCorner>20037508.342789 -3653545.667928</ows:UpperCorner>
|
||||
</ows:BoundingBox>
|
||||
<ows:WGS84BoundingBox crs="urn:ogc:def:crs:OGC:2:84">
|
||||
<ows:LowerCorner>-180.000000 -49.454297</ows:LowerCorner>
|
||||
<ows:UpperCorner>180.000000 -31.160000</ows:UpperCorner>
|
||||
</ows:WGS84BoundingBox>
|
||||
<Style isDefault="true">
|
||||
<ows:Title>Weighted point styles</ows:Title>
|
||||
<ows:Identifier>style=39</ows:Identifier>
|
||||
</Style>
|
||||
<Format>image/png</Format>
|
||||
<InfoFormat>application/json</InfoFormat>
|
||||
<InfoFormat>text/html</InfoFormat>
|
||||
<TileMatrixSetLink>
|
||||
<TileMatrixSet>EPSG:3857</TileMatrixSet>
|
||||
</TileMatrixSetLink>
|
||||
<ResourceURL format="image/png" resourceType="tile" template="https://koordinates-tiles-a.global.ssl.fastly.net/services;key=d740ea02e0c44cafb70dce31a774ca10/tiles/v4/layer=7328,{style}/{TileMatrixSet}/{TileMatrix}/{TileCol}/{TileRow}.png"/>
|
||||
<ResourceURL format="application/json" resourceType="FeatureInfo" template="https://labs.koordinates.com/services;key=d740ea02e0c44cafb70dce31a774ca10/wmts/1.0.0/layer/7328/featureinfo/{TileMatrixSet}/{TileMatrix}/{TileCol}/{TileRow}/{I}/{J}.json"/>
|
||||
<ResourceURL format="text/html" resourceType="FeatureInfo" template="https://labs.koordinates.com/services;key=d740ea02e0c44cafb70dce31a774ca10/wmts/1.0.0/layer/7328/featureinfo/{TileMatrixSet}/{TileMatrix}/{TileCol}/{TileRow}/{I}/{J}.html"/>
|
||||
</Layer>
|
||||
<TileMatrixSet>
|
||||
<ows:Title>GoogleMapsCompatible</ows:Title>
|
||||
<ows:Abstract>The well-known 'GoogleMapsCompatible' tile matrix set defined by the OGC WMTS specification</ows:Abstract>
|
||||
<ows:Identifier>EPSG:3857</ows:Identifier>
|
||||
<ows:BoundingBox crs="urn:ogc:def:crs:EPSG::3857">
|
||||
<ows:LowerCorner>-20037508.342789 -20037508.342789</ows:LowerCorner>
|
||||
<ows:UpperCorner>20037508.342789 20037508.342789</ows:UpperCorner>
|
||||
</ows:BoundingBox>
|
||||
<ows:SupportedCRS>urn:ogc:def:crs:EPSG::3857</ows:SupportedCRS>
|
||||
<WellKnownScaleSet>urn:ogc:def:wkss:OGC:1.0:GoogleMapsCompatible</WellKnownScaleSet>
|
||||
<TileMatrix>
|
||||
<ows:Identifier>0</ows:Identifier>
|
||||
<ScaleDenominator>559082264.029</ScaleDenominator>
|
||||
<TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
|
||||
<TileWidth>256</TileWidth>
|
||||
<TileHeight>256</TileHeight>
|
||||
<MatrixWidth>1</MatrixWidth>
|
||||
<MatrixHeight>1</MatrixHeight>
|
||||
</TileMatrix>
|
||||
<TileMatrix>
|
||||
<ows:Identifier>1</ows:Identifier>
|
||||
<ScaleDenominator>279541132.014</ScaleDenominator>
|
||||
<TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
|
||||
<TileWidth>256</TileWidth>
|
||||
<TileHeight>256</TileHeight>
|
||||
<MatrixWidth>2</MatrixWidth>
|
||||
<MatrixHeight>2</MatrixHeight>
|
||||
</TileMatrix>
|
||||
<TileMatrix>
|
||||
<ows:Identifier>2</ows:Identifier>
|
||||
<ScaleDenominator>139770566.007</ScaleDenominator>
|
||||
<TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
|
||||
<TileWidth>256</TileWidth>
|
||||
<TileHeight>256</TileHeight>
|
||||
<MatrixWidth>4</MatrixWidth>
|
||||
<MatrixHeight>4</MatrixHeight>
|
||||
</TileMatrix>
|
||||
<TileMatrix>
|
||||
<ows:Identifier>3</ows:Identifier>
|
||||
<ScaleDenominator>69885283.0036</ScaleDenominator>
|
||||
<TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
|
||||
<TileWidth>256</TileWidth>
|
||||
<TileHeight>256</TileHeight>
|
||||
<MatrixWidth>8</MatrixWidth>
|
||||
<MatrixHeight>8</MatrixHeight>
|
||||
</TileMatrix>
|
||||
<TileMatrix>
|
||||
<ows:Identifier>4</ows:Identifier>
|
||||
<ScaleDenominator>34942641.5018</ScaleDenominator>
|
||||
<TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
|
||||
<TileWidth>256</TileWidth>
|
||||
<TileHeight>256</TileHeight>
|
||||
<MatrixWidth>16</MatrixWidth>
|
||||
<MatrixHeight>16</MatrixHeight>
|
||||
</TileMatrix>
|
||||
<TileMatrix>
|
||||
<ows:Identifier>5</ows:Identifier>
|
||||
<ScaleDenominator>17471320.7509</ScaleDenominator>
|
||||
<TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
|
||||
<TileWidth>256</TileWidth>
|
||||
<TileHeight>256</TileHeight>
|
||||
<MatrixWidth>32</MatrixWidth>
|
||||
<MatrixHeight>32</MatrixHeight>
|
||||
</TileMatrix>
|
||||
<TileMatrix>
|
||||
<ows:Identifier>6</ows:Identifier>
|
||||
<ScaleDenominator>8735660.37545</ScaleDenominator>
|
||||
<TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
|
||||
<TileWidth>256</TileWidth>
|
||||
<TileHeight>256</TileHeight>
|
||||
<MatrixWidth>64</MatrixWidth>
|
||||
<MatrixHeight>64</MatrixHeight>
|
||||
</TileMatrix>
|
||||
<TileMatrix>
|
||||
<ows:Identifier>7</ows:Identifier>
|
||||
<ScaleDenominator>4367830.18772</ScaleDenominator>
|
||||
<TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
|
||||
<TileWidth>256</TileWidth>
|
||||
<TileHeight>256</TileHeight>
|
||||
<MatrixWidth>128</MatrixWidth>
|
||||
<MatrixHeight>128</MatrixHeight>
|
||||
</TileMatrix>
|
||||
<TileMatrix>
|
||||
<ows:Identifier>8</ows:Identifier>
|
||||
<ScaleDenominator>2183915.09386</ScaleDenominator>
|
||||
<TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
|
||||
<TileWidth>256</TileWidth>
|
||||
<TileHeight>256</TileHeight>
|
||||
<MatrixWidth>256</MatrixWidth>
|
||||
<MatrixHeight>256</MatrixHeight>
|
||||
</TileMatrix>
|
||||
<TileMatrix>
|
||||
<ows:Identifier>9</ows:Identifier>
|
||||
<ScaleDenominator>1091957.54693</ScaleDenominator>
|
||||
<TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
|
||||
<TileWidth>256</TileWidth>
|
||||
<TileHeight>256</TileHeight>
|
||||
<MatrixWidth>512</MatrixWidth>
|
||||
<MatrixHeight>512</MatrixHeight>
|
||||
</TileMatrix>
|
||||
<TileMatrix>
|
||||
<ows:Identifier>10</ows:Identifier>
|
||||
<ScaleDenominator>545978.773466</ScaleDenominator>
|
||||
<TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
|
||||
<TileWidth>256</TileWidth>
|
||||
<TileHeight>256</TileHeight>
|
||||
<MatrixWidth>1024</MatrixWidth>
|
||||
<MatrixHeight>1024</MatrixHeight>
|
||||
</TileMatrix>
|
||||
<TileMatrix>
|
||||
<ows:Identifier>11</ows:Identifier>
|
||||
<ScaleDenominator>272989.386733</ScaleDenominator>
|
||||
<TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
|
||||
<TileWidth>256</TileWidth>
|
||||
<TileHeight>256</TileHeight>
|
||||
<MatrixWidth>2048</MatrixWidth>
|
||||
<MatrixHeight>2048</MatrixHeight>
|
||||
</TileMatrix>
|
||||
<TileMatrix>
|
||||
<ows:Identifier>12</ows:Identifier>
|
||||
<ScaleDenominator>136494.693366</ScaleDenominator>
|
||||
<TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
|
||||
<TileWidth>256</TileWidth>
|
||||
<TileHeight>256</TileHeight>
|
||||
<MatrixWidth>4096</MatrixWidth>
|
||||
<MatrixHeight>4096</MatrixHeight>
|
||||
</TileMatrix>
|
||||
<TileMatrix>
|
||||
<ows:Identifier>13</ows:Identifier>
|
||||
<ScaleDenominator>68247.3466832</ScaleDenominator>
|
||||
<TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
|
||||
<TileWidth>256</TileWidth>
|
||||
<TileHeight>256</TileHeight>
|
||||
<MatrixWidth>8192</MatrixWidth>
|
||||
<MatrixHeight>8192</MatrixHeight>
|
||||
</TileMatrix>
|
||||
<TileMatrix>
|
||||
<ows:Identifier>14</ows:Identifier>
|
||||
<ScaleDenominator>34123.6733416</ScaleDenominator>
|
||||
<TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
|
||||
<TileWidth>256</TileWidth>
|
||||
<TileHeight>256</TileHeight>
|
||||
<MatrixWidth>16384</MatrixWidth>
|
||||
<MatrixHeight>16384</MatrixHeight>
|
||||
</TileMatrix>
|
||||
<TileMatrix>
|
||||
<ows:Identifier>15</ows:Identifier>
|
||||
<ScaleDenominator>17061.8366708</ScaleDenominator>
|
||||
<TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
|
||||
<TileWidth>256</TileWidth>
|
||||
<TileHeight>256</TileHeight>
|
||||
<MatrixWidth>32768</MatrixWidth>
|
||||
<MatrixHeight>32768</MatrixHeight>
|
||||
</TileMatrix>
|
||||
<TileMatrix>
|
||||
<ows:Identifier>16</ows:Identifier>
|
||||
<ScaleDenominator>8530.9183354</ScaleDenominator>
|
||||
<TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
|
||||
<TileWidth>256</TileWidth>
|
||||
<TileHeight>256</TileHeight>
|
||||
<MatrixWidth>65536</MatrixWidth>
|
||||
<MatrixHeight>65536</MatrixHeight>
|
||||
</TileMatrix>
|
||||
<TileMatrix>
|
||||
<ows:Identifier>17</ows:Identifier>
|
||||
<ScaleDenominator>4265.4591677</ScaleDenominator>
|
||||
<TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
|
||||
<TileWidth>256</TileWidth>
|
||||
<TileHeight>256</TileHeight>
|
||||
<MatrixWidth>131072</MatrixWidth>
|
||||
<MatrixHeight>131072</MatrixHeight>
|
||||
</TileMatrix>
|
||||
<TileMatrix>
|
||||
<ows:Identifier>18</ows:Identifier>
|
||||
<ScaleDenominator>2132.72958385</ScaleDenominator>
|
||||
<TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
|
||||
<TileWidth>256</TileWidth>
|
||||
<TileHeight>256</TileHeight>
|
||||
<MatrixWidth>262144</MatrixWidth>
|
||||
<MatrixHeight>262144</MatrixHeight>
|
||||
</TileMatrix>
|
||||
<TileMatrix>
|
||||
<ows:Identifier>19</ows:Identifier>
|
||||
<ScaleDenominator>1066.36479192</ScaleDenominator>
|
||||
<TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
|
||||
<TileWidth>256</TileWidth>
|
||||
<TileHeight>256</TileHeight>
|
||||
<MatrixWidth>524288</MatrixWidth>
|
||||
<MatrixHeight>524288</MatrixHeight>
|
||||
</TileMatrix>
|
||||
<TileMatrix>
|
||||
<ows:Identifier>20</ows:Identifier>
|
||||
<ScaleDenominator>533.182395962</ScaleDenominator>
|
||||
<TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
|
||||
<TileWidth>256</TileWidth>
|
||||
<TileHeight>256</TileHeight>
|
||||
<MatrixWidth>1048576</MatrixWidth>
|
||||
<MatrixHeight>1048576</MatrixHeight>
|
||||
</TileMatrix>
|
||||
<TileMatrix>
|
||||
<ows:Identifier>21</ows:Identifier>
|
||||
<ScaleDenominator>266.591197981</ScaleDenominator>
|
||||
<TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
|
||||
<TileWidth>256</TileWidth>
|
||||
<TileHeight>256</TileHeight>
|
||||
<MatrixWidth>2097152</MatrixWidth>
|
||||
<MatrixHeight>2097152</MatrixHeight>
|
||||
</TileMatrix>
|
||||
</TileMatrixSet>
|
||||
</Contents>
|
||||
<ServiceMetadataURL xlink:href="https://labs.koordinates.com/services;key=d740ea02e0c44cafb70dce31a774ca10/wmts/1.0.0/layer/7328/WMTSCapabilities.xml"/>
|
||||
</Capabilities>
|
||||
BIN
examples_src/data/arrow.png
Normal file
BIN
examples_src/data/arrow.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 398 B |
176
examples_src/data/geojson/countries-110m.geojson
Normal file
176
examples_src/data/geojson/countries-110m.geojson
Normal file
File diff suppressed because one or more lines are too long
181
examples_src/data/geojson/countries.geojson
Normal file
181
examples_src/data/geojson/countries.geojson
Normal file
File diff suppressed because one or more lines are too long
16
examples_src/data/geojson/line-samples.geojson
Normal file
16
examples_src/data/geojson/line-samples.geojson
Normal file
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"type": "FeatureCollection",
|
||||
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
|
||||
|
||||
"features": [
|
||||
{ "type": "Feature", "properties": { "name": "Roussel" }, "geometry": { "type": "LineString", "coordinates": [ [ -74.317812426119204, 48.287712285170407 ], [ -73.965445435101188, 48.287712285170407 ] ] } },
|
||||
{ "type": "Feature", "properties": { "name": "de la Grande-Décharge Sud" }, "geometry": { "type": "LineString", "coordinates": [ [ -72.890274359943689, 47.66777849648031 ], [ -73.03935270229745, 47.552045722357249 ], [ -73.03483517677158, 47.743778832463107 ], [ -72.750231068641639, 47.749854072477497 ], [ -72.754748594167509, 47.552045722357249 ] ] } },
|
||||
{ "type": "Feature", "properties": { "name": "du Saguenay Ouest" }, "geometry": { "type": "LineString", "coordinates": [ [ -73.007730023616347, 48.07082744644633 ], [ -72.894791885469544, 47.889388912080449 ], [ -72.727643441012276, 48.082900678850329 ], [ -72.560494996555022, 47.895447137861773 ] ] } },
|
||||
{ "type": "Feature", "properties": { "name": "Saint-Anicet" }, "geometry": { "type": "LineString", "coordinates": [ [ -72.985142395986983, 48.338787334581873 ], [ -72.980624870461128, 48.161307640513321 ], [ -72.885756834417805, 48.164320903012829 ], [ -72.894791885469544, 48.338787334581873 ] ] } },
|
||||
{ "type": "Feature", "properties": { "name": "Saint-Remy-en-Bouzemont-Saint-Genest-et-Isson" }, "geometry": { "type": "LineString", "coordinates": [ [ -73.459482576203527, 47.53679865861892 ], [ -73.454965050677686, 47.719470781160837 ] ] } },
|
||||
{ "type": "Feature", "properties": { "name": "Sainte-Geneviève" }, "geometry": { "type": "LineString", "coordinates": [ [ -73.716981531178234, 47.889388912080449 ], [ -73.423342371996569, 48.091953743979651 ], [ -73.242641350961676, 47.883329977544491 ], [ -73.685358852497131, 47.862118125007399 ] ] } },
|
||||
{ "type": "Feature", "properties": { "name": "de Lombard" }, "geometry": { "type": "LineString", "coordinates": [ [ -73.631148546186679, 48.323770568268507 ], [ -73.626631020660795, 48.185408784389622 ], [ -73.55435061224685, 48.188420630879783 ], [ -73.55435061224685, 48.320766684325278 ], [ -73.473035152781165, 48.317762623483489 ], [ -73.482070203832905, 48.19745510840756 ], [ -73.400754744367205, 48.206487993065075 ], [ -73.396237218841335, 48.323770568268507 ], [ -73.301369182798027, 48.317762623483489 ], [ -73.319439284901506, 48.191432300378096 ] ] } },
|
||||
{ "type": "Feature", "properties": { "name": "de la Grande-Baie Sud" }, "geometry": { "type": "LineString", "coordinates": [ [ -74.439785615317746, 47.564240180362376 ], [ -74.227461915601779, 47.716431476953346 ], [ -74.055795945618627, 47.552045722357249 ], [ -73.879612450109633, 47.710352336655504 ] ] } },
|
||||
{ "type": "Feature", "properties": { "name": "de Tadoussac" }, "geometry": { "type": "LineString", "coordinates": [ [ -74.313294900593348, 48.091953743979651 ], [ -74.313294900593348, 47.880300244488787 ], [ -73.974480486152942, 47.877270334238752 ], [ -73.978998011678812, 48.076864416783366 ] ] } }
|
||||
]
|
||||
}
|
||||
16
examples_src/data/geojson/point-samples.geojson
Normal file
16
examples_src/data/geojson/point-samples.geojson
Normal file
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"type": "FeatureCollection",
|
||||
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
|
||||
|
||||
"features": [
|
||||
{ "type": "Feature", "properties": { "name": "Saguenay (Arrondissement Latterière)" }, "geometry": { "type": "Point", "coordinates": [ -75.849253579389796, 47.6434349837781 ] } },
|
||||
{ "type": "Feature", "properties": { "name": "Canton Tremblay" }, "geometry": { "type": "Point", "coordinates": [ -75.840218528338056, 47.971115165183342 ] } },
|
||||
{ "type": "Feature", "properties": { "name": "Saint-Félix-d'Otis" }, "geometry": { "type": "Point", "coordinates": [ -75.849253579389796, 48.278693733790902 ] } },
|
||||
{ "type": "Feature", "properties": { "name": "La Baie" }, "geometry": { "type": "Point", "coordinates": [ -74.792152606335762, 47.649521925935176 ] } },
|
||||
{ "type": "Feature", "properties": { "name": "Saint-David-de-Falardeau" }, "geometry": { "type": "Point", "coordinates": [ -74.801187657387501, 47.977163824275436 ] } },
|
||||
{ "type": "Feature", "properties": { "name": "Saint-Honoré-de-Chicoutimi" }, "geometry": { "type": "Point", "coordinates": [ -74.792152606335762, 48.284706278302295 ] } },
|
||||
{ "type": "Feature", "properties": { "name": "Alma" }, "geometry": { "type": "Point", "coordinates": [ -75.298115465233423, 47.6434349837781 ] } },
|
||||
{ "type": "Feature", "properties": { "name": "Jonquière" }, "geometry": { "type": "Point", "coordinates": [ -75.298115465233423, 47.971115165183342 ] } },
|
||||
{ "type": "Feature", "properties": { "name": "Chicoutimi" }, "geometry": { "type": "Point", "coordinates": [ -75.289080414181669, 48.284706278302295 ] } }
|
||||
]
|
||||
}
|
||||
16
examples_src/data/geojson/polygon-samples.geojson
Normal file
16
examples_src/data/geojson/polygon-samples.geojson
Normal file
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"type": "FeatureCollection",
|
||||
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
|
||||
|
||||
"features": [
|
||||
{ "type": "Feature", "properties": { "name": "Parc de la Colline" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -72.357206347890767, 47.72858763003908 ], [ -71.86027854004486, 47.527648291638172 ], [ -72.37075892446839, 47.539848426151735 ], [ -72.357206347890767, 47.72858763003908 ] ] ] } },
|
||||
{ "type": "Feature", "properties": { "name": "Centre Paul-Étienne Simard" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -72.357206347890767, 48.013440900213297 ], [ -72.239750684218109, 48.013440900213297 ], [ -72.253303260795718, 47.856056000888501 ], [ -72.027426984502114, 47.856056000888501 ], [ -72.036462035553868, 48.013440900213297 ], [ -71.905453795303586, 48.01646283861713 ], [ -71.891901218725963, 47.801464984333364 ], [ -72.361723873416651, 47.810567474765456 ], [ -72.357206347890767, 48.013440900213297 ] ] ] } },
|
||||
{ "type": "Feature", "properties": { "name": "Loisirs Rivière du Moulin" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -72.194575428959382, 48.33278115872843 ], [ -72.018391933450374, 48.33278115872843 ], [ -71.846725963467236, 48.251628525276693 ], [ -71.950629050562299, 48.107038644740094 ], [ -72.203610480011122, 48.107038644740094 ], [ -72.397864077623623, 48.221539261269051 ], [ -72.194575428959382, 48.33278115872843 ] ] ] } },
|
||||
{ "type": "Feature", "properties": { "name": "L'Étoile-du-Nord" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -71.589227008492543, 47.649521925935176 ], [ -71.525981651130337, 47.734664642855655 ], [ -71.48532392139748, 47.649521925935169 ], [ -71.295587849310877, 47.637347332276697 ], [ -71.462736293768117, 47.585573652777313 ], [ -71.390455885354172, 47.475766052599219 ], [ -71.535016702182091, 47.552045722357242 ], [ -71.702165146639345, 47.491030857179695 ], [ -71.616332161647762, 47.591667334264848 ], [ -71.787998131630914, 47.655608158761908 ], [ -71.589227008492543, 47.649521925935176 ] ] ] } },
|
||||
{ "type": "Feature", "properties": { "name": "Loisirs Lavoie et St-Jean-Baptiste" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -71.729270299794578, 48.010418784700107 ], [ -71.291070323784993, 48.004374022337799 ], [ -71.291070323784993, 47.777183877693901 ], [ -71.729270299794578, 47.786290622064854 ], [ -71.729270299794578, 48.010418784700107 ] ] ] } },
|
||||
{ "type": "Feature", "properties": { "name": "Loisirs Diamant" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -71.693130095587605, 48.341790157179155 ], [ -71.286552798259123, 48.344792802893032 ], [ -71.449183717190522, 48.224548983994914 ], [ -71.277517747207369, 48.070827446446337 ], [ -71.751857927423927, 48.085918544287573 ], [ -71.507911549026844, 48.21551928490868 ], [ -71.693130095587605, 48.341790157179155 ] ] ] } },
|
||||
{ "type": "Feature", "properties": { "name": "Sydenham" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -71.051641470913779, 47.710352336655504 ], [ -70.911598179611758, 47.710352336655504 ], [ -70.925150756189367, 47.619080121567436 ], [ -70.712827056473373, 47.616034965734443 ], [ -70.721862107525112, 47.448278226184989 ], [ -70.857387873301292, 47.448278226184989 ], [ -70.852870347775408, 47.552045722357249 ], [ -71.056158996439635, 47.552045722357249 ], [ -71.051641470913779, 47.710352336655504 ] ] ] } },
|
||||
{ "type": "Feature", "properties": { "name": "Saint-Luc" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -71.110369302750115, 47.798430466372736 ], [ -70.902563128560018, 47.983211774835986 ], [ -70.699274479895777, 47.789325849015306 ], [ -71.110369302750115, 47.798430466372736 ] ] ] } },
|
||||
{ "type": "Feature", "properties": { "name": "Loisirs du Fjord du Saguenay" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -70.988396113551573, 48.32977780546792 ], [ -70.812212618042579, 48.32977780546792 ], [ -70.807695092516681, 48.209498600656133 ], [ -70.631511597007702, 48.209498600656147 ], [ -70.636029122533571, 48.079882636349602 ], [ -71.146509506957088, 48.082900678850329 ], [ -71.151027032482972, 48.212509031269981 ], [ -70.983878588025689, 48.209498600656133 ], [ -70.988396113551573, 48.32977780546792 ] ] ] } }
|
||||
]
|
||||
}
|
||||
4
examples_src/data/geojson/switzerland.geojson
Normal file
4
examples_src/data/geojson/switzerland.geojson
Normal file
@@ -0,0 +1,4 @@
|
||||
{"type":"FeatureCollection","features":[
|
||||
{"type":"Feature","id":"CHE","properties":{"name":"Switzerland"},"geometry":{"type":"Polygon","coordinates":[[[9.594226,47.525058],[9.632932,47.347601],[9.47997,47.10281],[9.932448,46.920728],[10.442701,46.893546],[10.363378,46.483571],[9.922837,46.314899],[9.182882,46.440215],[8.966306,46.036932],[8.489952,46.005151],[8.31663,46.163642],[7.755992,45.82449],[7.273851,45.776948],[6.843593,45.991147],[6.5001,46.429673],[6.022609,46.27299],[6.037389,46.725779],[6.768714,47.287708],[6.736571,47.541801],[7.192202,47.449766],[7.466759,47.620582],[8.317301,47.61358],[8.522612,47.830828],[9.594226,47.525058]]]}},
|
||||
{"type":"Feature","id":"LSNE","properties":{"name":"Lausanne"},"geometry":{"type":"Point","coordinates":[6.6339863,46.5193823]}}
|
||||
]}
|
||||
729
examples_src/data/geolocation-orientation.json
Normal file
729
examples_src/data/geolocation-orientation.json
Normal file
@@ -0,0 +1,729 @@
|
||||
{
|
||||
"data": [{
|
||||
"coords": {
|
||||
"speed": 1.7330950498580933,
|
||||
"accuracy": 5,
|
||||
"altitudeAccuracy": 8,
|
||||
"altitude": 238,
|
||||
"longitude": 5.868668798362713,
|
||||
"heading": 67.5,
|
||||
"latitude": 45.64444874417562
|
||||
},
|
||||
"timestamp": 1394788264972
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 1.9535436630249023,
|
||||
"accuracy": 5,
|
||||
"altitudeAccuracy": 8,
|
||||
"altitude": 238,
|
||||
"longitude": 5.868715401744348,
|
||||
"heading": 69.609375,
|
||||
"latitude": 45.64446391542036
|
||||
},
|
||||
"timestamp": 1394788266115
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 2.1882569789886475,
|
||||
"accuracy": 10,
|
||||
"altitudeAccuracy": 8,
|
||||
"altitude": 238,
|
||||
"longitude": 5.868768962105614,
|
||||
"heading": 67.5,
|
||||
"latitude": 45.644484995906836
|
||||
},
|
||||
"timestamp": 1394788267107
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 2.4942498207092285,
|
||||
"accuracy": 5,
|
||||
"altitudeAccuracy": 6,
|
||||
"altitude": 237,
|
||||
"longitude": 5.868825791409117,
|
||||
"heading": 68.5546875,
|
||||
"latitude": 45.64450435810316
|
||||
},
|
||||
"timestamp": 1394788267959
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 2.7581217288970947,
|
||||
"accuracy": 5,
|
||||
"altitudeAccuracy": 6,
|
||||
"altitude": 237,
|
||||
"longitude": 5.868881698703271,
|
||||
"heading": 69.609375,
|
||||
"latitude": 45.64452149909515
|
||||
},
|
||||
"timestamp": 1394788268964
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 3.3746347427368164,
|
||||
"accuracy": 5,
|
||||
"altitudeAccuracy": 6,
|
||||
"altitude": 236,
|
||||
"longitude": 5.868938528006774,
|
||||
"heading": 70.3125,
|
||||
"latitude": 45.644536712249405
|
||||
},
|
||||
"timestamp": 1394788270116
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 3.597411870956421,
|
||||
"accuracy": 5,
|
||||
"altitudeAccuracy": 6,
|
||||
"altitude": 236,
|
||||
"longitude": 5.868992004549009,
|
||||
"heading": 74.8828125,
|
||||
"latitude": 45.644547943999655
|
||||
},
|
||||
"timestamp": 1394788271158
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 3.6382505893707275,
|
||||
"accuracy": 5,
|
||||
"altitudeAccuracy": 6,
|
||||
"altitude": 236,
|
||||
"longitude": 5.869038775568706,
|
||||
"heading": 73.828125,
|
||||
"latitude": 45.64456005584974
|
||||
},
|
||||
"timestamp": 1394788271893
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 3.65671443939209,
|
||||
"accuracy": 5,
|
||||
"altitudeAccuracy": 6,
|
||||
"altitude": 236,
|
||||
"longitude": 5.869091162463528,
|
||||
"heading": 73.4765625,
|
||||
"latitude": 45.644572335337884
|
||||
},
|
||||
"timestamp": 1394788272903
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 3.7153592109680176,
|
||||
"accuracy": 5,
|
||||
"altitudeAccuracy": 6,
|
||||
"altitude": 236,
|
||||
"longitude": 5.869144219910604,
|
||||
"heading": 73.125,
|
||||
"latitude": 45.64458671030182
|
||||
},
|
||||
"timestamp": 1394788273914
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 3.8041043281555176,
|
||||
"accuracy": 5,
|
||||
"altitudeAccuracy": 4,
|
||||
"altitude": 236,
|
||||
"longitude": 5.869205072527629,
|
||||
"heading": 72.421875,
|
||||
"latitude": 45.64460313883204
|
||||
},
|
||||
"timestamp": 1394788274901
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 3.9588162899017334,
|
||||
"accuracy": 5,
|
||||
"altitudeAccuracy": 4,
|
||||
"altitude": 236,
|
||||
"longitude": 5.869268858810765,
|
||||
"heading": 72.421875,
|
||||
"latitude": 45.64461990263838
|
||||
},
|
||||
"timestamp": 1394788276140
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 4.152309417724609,
|
||||
"accuracy": 5,
|
||||
"altitudeAccuracy": 4,
|
||||
"altitude": 235,
|
||||
"longitude": 5.869351252918941,
|
||||
"heading": 78.046875,
|
||||
"latitude": 45.64466122542102
|
||||
},
|
||||
"timestamp": 1394788276948
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 4.49971866607666,
|
||||
"accuracy": 5,
|
||||
"altitudeAccuracy": 6,
|
||||
"altitude": 236,
|
||||
"longitude": 5.869433479389054,
|
||||
"heading": 79.8046875,
|
||||
"latitude": 45.64467040360499
|
||||
},
|
||||
"timestamp": 1394788277892
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 4.824056148529053,
|
||||
"accuracy": 5,
|
||||
"altitudeAccuracy": 6,
|
||||
"altitude": 235,
|
||||
"longitude": 5.869504055013758,
|
||||
"heading": 91.40625,
|
||||
"latitude": 45.64466089014489
|
||||
},
|
||||
"timestamp": 1394788279211
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 5.269814491271973,
|
||||
"accuracy": 10,
|
||||
"altitudeAccuracy": 6,
|
||||
"altitude": 235,
|
||||
"longitude": 5.869575049733621,
|
||||
"heading": 91.40625,
|
||||
"latitude": 45.64465967476893
|
||||
},
|
||||
"timestamp": 1394788279898
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 5.4861016273498535,
|
||||
"accuracy": 5,
|
||||
"altitudeAccuracy": 6,
|
||||
"altitude": 235,
|
||||
"longitude": 5.86963213049422,
|
||||
"heading": 95.2734375,
|
||||
"latitude": 45.64465091568012
|
||||
},
|
||||
"timestamp": 1394788280935
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 5.380503177642822,
|
||||
"accuracy": 5,
|
||||
"altitudeAccuracy": 6,
|
||||
"altitude": 235,
|
||||
"longitude": 5.869714859878523,
|
||||
"heading": 75.5859375,
|
||||
"latitude": 45.64468792178262
|
||||
},
|
||||
"timestamp": 1394788281930
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 5.276519775390625,
|
||||
"accuracy": 5,
|
||||
"altitudeAccuracy": 6,
|
||||
"altitude": 234,
|
||||
"longitude": 5.869746124377353,
|
||||
"heading": 55.1953125,
|
||||
"latitude": 45.64467706721801
|
||||
},
|
||||
"timestamp": 1394788282909
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 5.212399482727051,
|
||||
"accuracy": 5,
|
||||
"altitudeAccuracy": 6,
|
||||
"altitude": 232,
|
||||
"longitude": 5.8697939850444625,
|
||||
"heading": 49.5703125,
|
||||
"latitude": 45.64467899505574
|
||||
},
|
||||
"timestamp": 1394788284221
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 5.174651622772217,
|
||||
"accuracy": 5,
|
||||
"altitudeAccuracy": 6,
|
||||
"altitude": 232,
|
||||
"longitude": 5.869789123540623,
|
||||
"heading": 18.984375,
|
||||
"latitude": 45.64469378911484
|
||||
},
|
||||
"timestamp": 1394788284924
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 5.211904525756836,
|
||||
"accuracy": 5,
|
||||
"altitudeAccuracy": 4,
|
||||
"altitude": 232,
|
||||
"longitude": 5.869806222623093,
|
||||
"heading": 10.1953125,
|
||||
"latitude": 45.64473896757294
|
||||
},
|
||||
"timestamp": 1394788286251
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 5.254780292510986,
|
||||
"accuracy": 5,
|
||||
"altitudeAccuracy": 4,
|
||||
"altitude": 233,
|
||||
"longitude": 5.86982952431391,
|
||||
"heading": 18.6328125,
|
||||
"latitude": 45.64478381075491
|
||||
},
|
||||
"timestamp": 1394788286927
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 5.329030513763428,
|
||||
"accuracy": 5,
|
||||
"altitudeAccuracy": 4,
|
||||
"altitude": 232,
|
||||
"longitude": 5.869875792419417,
|
||||
"heading": 33.75,
|
||||
"latitude": 45.644830078860416
|
||||
},
|
||||
"timestamp": 1394788288221
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 5.384955883026123,
|
||||
"accuracy": 5,
|
||||
"altitudeAccuracy": 4,
|
||||
"altitude": 232,
|
||||
"longitude": 5.869927508761985,
|
||||
"heading": 46.7578125,
|
||||
"latitude": 45.64486025371183
|
||||
},
|
||||
"timestamp": 1394788288935
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 5.309582233428955,
|
||||
"accuracy": 5,
|
||||
"altitudeAccuracy": 4,
|
||||
"altitude": 232,
|
||||
"longitude": 5.869972854858143,
|
||||
"heading": 47.109375,
|
||||
"latitude": 45.644890596201314
|
||||
},
|
||||
"timestamp": 1394788290178
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 5.250724792480469,
|
||||
"accuracy": 5,
|
||||
"altitudeAccuracy": 6,
|
||||
"altitude": 231,
|
||||
"longitude": 5.870029265066488,
|
||||
"heading": 46.40625,
|
||||
"latitude": 45.644932673355235
|
||||
},
|
||||
"timestamp": 1394788290890
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 5.3057990074157715,
|
||||
"accuracy": 5,
|
||||
"altitudeAccuracy": 6,
|
||||
"altitude": 231,
|
||||
"longitude": 5.870077712466819,
|
||||
"heading": 39.375,
|
||||
"latitude": 45.644970224281444
|
||||
},
|
||||
"timestamp": 1394788291884
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 5.431822299957275,
|
||||
"accuracy": 5,
|
||||
"altitudeAccuracy": 6,
|
||||
"altitude": 231,
|
||||
"longitude": 5.870133116846783,
|
||||
"heading": 43.59375,
|
||||
"latitude": 45.6450097449549
|
||||
},
|
||||
"timestamp": 1394788292885
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 5.542125225067139,
|
||||
"accuracy": 5,
|
||||
"altitudeAccuracy": 6,
|
||||
"altitude": 231,
|
||||
"longitude": 5.870186509569986,
|
||||
"heading": 43.59375,
|
||||
"latitude": 45.645047421609654
|
||||
},
|
||||
"timestamp": 1394788294100
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 5.647174835205078,
|
||||
"accuracy": 5,
|
||||
"altitudeAccuracy": 6,
|
||||
"altitude": 231,
|
||||
"longitude": 5.870246104901535,
|
||||
"heading": 42.890625,
|
||||
"latitude": 45.645093647805645
|
||||
},
|
||||
"timestamp": 1394788295157
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 5.735793590545654,
|
||||
"accuracy": 5,
|
||||
"altitudeAccuracy": 6,
|
||||
"altitude": 230,
|
||||
"longitude": 5.870298156520231,
|
||||
"heading": 42.5390625,
|
||||
"latitude": 45.64514368776758
|
||||
},
|
||||
"timestamp": 1394788296124
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 5.809989929199219,
|
||||
"accuracy": 5,
|
||||
"altitudeAccuracy": 6,
|
||||
"altitude": 230,
|
||||
"longitude": 5.870346436282499,
|
||||
"heading": 43.59375,
|
||||
"latitude": 45.64519154843469
|
||||
},
|
||||
"timestamp": 1394788296960
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 5.877871036529541,
|
||||
"accuracy": 5,
|
||||
"altitudeAccuracy": 6,
|
||||
"altitude": 228,
|
||||
"longitude": 5.87034755932109,
|
||||
"heading": 42.75193405151367,
|
||||
"latitude": 45.645270362475216
|
||||
},
|
||||
"timestamp": 1394788298177
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 5.937166690826416,
|
||||
"accuracy": 5,
|
||||
"altitudeAccuracy": 6,
|
||||
"altitude": 228,
|
||||
"longitude": 5.870402806867787,
|
||||
"heading": 42.75193405151367,
|
||||
"latitude": 45.645312142096095
|
||||
},
|
||||
"timestamp": 1394788298898
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 6.071393966674805,
|
||||
"accuracy": 5,
|
||||
"altitudeAccuracy": 6,
|
||||
"altitude": 229,
|
||||
"longitude": 5.870464520921814,
|
||||
"heading": 43.183074951171875,
|
||||
"latitude": 45.64535851937182
|
||||
},
|
||||
"timestamp": 1394788299897
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 6.329115390777588,
|
||||
"accuracy": 5,
|
||||
"altitudeAccuracy": 6,
|
||||
"altitude": 230,
|
||||
"longitude": 5.8705368384107715,
|
||||
"heading": 43.183074951171875,
|
||||
"latitude": 45.645412389093565
|
||||
},
|
||||
"timestamp": 1394788300957
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 6.581554889678955,
|
||||
"accuracy": 5,
|
||||
"altitudeAccuracy": 6,
|
||||
"altitude": 229,
|
||||
"longitude": 5.870600162706978,
|
||||
"heading": 43.183074951171875,
|
||||
"latitude": 45.64545955929912
|
||||
},
|
||||
"timestamp": 1394788302211
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 6.605470180511475,
|
||||
"accuracy": 5,
|
||||
"altitudeAccuracy": 6,
|
||||
"altitude": 230,
|
||||
"longitude": 5.870657211053185,
|
||||
"heading": 43.183074951171875,
|
||||
"latitude": 45.64550205482465
|
||||
},
|
||||
"timestamp": 1394788302917
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 6.623170375823975,
|
||||
"accuracy": 5,
|
||||
"altitudeAccuracy": 4,
|
||||
"altitude": 229,
|
||||
"longitude": 5.870713613403495,
|
||||
"heading": 43.183074951171875,
|
||||
"latitude": 45.64554406917767
|
||||
},
|
||||
"timestamp": 1394788303929
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 6.645580768585205,
|
||||
"accuracy": 5,
|
||||
"altitudeAccuracy": 4,
|
||||
"altitude": 229,
|
||||
"longitude": 5.870773011629353,
|
||||
"heading": 43.183074951171875,
|
||||
"latitude": 45.64558831489415
|
||||
},
|
||||
"timestamp": 1394788304902
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 6.663600444793701,
|
||||
"accuracy": 5,
|
||||
"altitudeAccuracy": 4,
|
||||
"altitude": 229,
|
||||
"longitude": 5.87083890910435,
|
||||
"heading": 43.183074951171875,
|
||||
"latitude": 45.645637401898654
|
||||
},
|
||||
"timestamp": 1394788306035
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 6.664675712585449,
|
||||
"accuracy": 5,
|
||||
"altitudeAccuracy": 6,
|
||||
"altitude": 229,
|
||||
"longitude": 5.870890033475007,
|
||||
"heading": 43.183074951171875,
|
||||
"latitude": 45.64567548463474
|
||||
},
|
||||
"timestamp": 1394788307080
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 6.6489081382751465,
|
||||
"accuracy": 5,
|
||||
"altitudeAccuracy": 6,
|
||||
"altitude": 228,
|
||||
"longitude": 5.870943189474929,
|
||||
"heading": 43.183074951171875,
|
||||
"latitude": 45.645715080460064
|
||||
},
|
||||
"timestamp": 1394788308211
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 6.551820755004883,
|
||||
"accuracy": 5,
|
||||
"altitudeAccuracy": 6,
|
||||
"altitude": 228,
|
||||
"longitude": 5.871005613698799,
|
||||
"heading": 43.183074951171875,
|
||||
"latitude": 45.64576158014743
|
||||
},
|
||||
"timestamp": 1394788308904
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 6.467689514160156,
|
||||
"accuracy": 5,
|
||||
"altitudeAccuracy": 6,
|
||||
"altitude": 229,
|
||||
"longitude": 5.871058030061249,
|
||||
"heading": 43.183074951171875,
|
||||
"latitude": 45.64580062501799
|
||||
},
|
||||
"timestamp": 1394788310161
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 6.3997955322265625,
|
||||
"accuracy": 5,
|
||||
"altitudeAccuracy": 6,
|
||||
"altitude": 229,
|
||||
"longitude": 5.871062579208228,
|
||||
"heading": 43.183074951171875,
|
||||
"latitude": 45.64580401381376
|
||||
},
|
||||
"timestamp": 1394788310957
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 5.799798488616943,
|
||||
"accuracy": 5,
|
||||
"altitudeAccuracy": 6,
|
||||
"altitude": 230,
|
||||
"longitude": 5.8710817079554545,
|
||||
"heading": 43.183074951171875,
|
||||
"latitude": 45.64581826277647
|
||||
},
|
||||
"timestamp": 1394788312036
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 4.424941062927246,
|
||||
"accuracy": 5,
|
||||
"altitudeAccuracy": 6,
|
||||
"altitude": 230,
|
||||
"longitude": 5.871121835629857,
|
||||
"heading": 175.4296875,
|
||||
"latitude": 45.645828271551544
|
||||
},
|
||||
"timestamp": 1394788312951
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 4.3496222496032715,
|
||||
"accuracy": 5,
|
||||
"altitudeAccuracy": 6,
|
||||
"altitude": 231,
|
||||
"longitude": 5.8710026017471595,
|
||||
"heading": 176.484375,
|
||||
"latitude": 45.645752236602775
|
||||
},
|
||||
"timestamp": 1394788315227
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 5.076380252838135,
|
||||
"accuracy": 5,
|
||||
"altitudeAccuracy": 6,
|
||||
"altitude": 232,
|
||||
"longitude": 5.871189236646398,
|
||||
"heading": 176.1328125,
|
||||
"latitude": 45.64553692475487
|
||||
},
|
||||
"timestamp": 1394788316970
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 5.102786064147949,
|
||||
"accuracy": 5,
|
||||
"altitudeAccuracy": 6,
|
||||
"altitude": 231,
|
||||
"longitude": 5.871200384577616,
|
||||
"heading": 171.2109375,
|
||||
"latitude": 45.64548554368843
|
||||
},
|
||||
"timestamp": 1394788317965
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 4.705626964569092,
|
||||
"accuracy": 5,
|
||||
"altitudeAccuracy": 6,
|
||||
"altitude": 231,
|
||||
"longitude": 5.871210945775612,
|
||||
"heading": 164.1796875,
|
||||
"latitude": 45.645453105723156
|
||||
},
|
||||
"timestamp": 1394788318956
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 4.378190040588379,
|
||||
"accuracy": 5,
|
||||
"altitudeAccuracy": 6,
|
||||
"altitude": 231,
|
||||
"longitude": 5.87124749087344,
|
||||
"heading": 126.2109375,
|
||||
"latitude": 45.645433282522156
|
||||
},
|
||||
"timestamp": 1394788320197
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 4.208680152893066,
|
||||
"accuracy": 5,
|
||||
"altitudeAccuracy": 6,
|
||||
"altitude": 233,
|
||||
"longitude": 5.871283365419014,
|
||||
"heading": 125.859375,
|
||||
"latitude": 45.6454103999265
|
||||
},
|
||||
"timestamp": 1394788320894
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 4.072604179382324,
|
||||
"accuracy": 5,
|
||||
"altitudeAccuracy": 6,
|
||||
"altitude": 233,
|
||||
"longitude": 5.871314043184622,
|
||||
"heading": 103.359375,
|
||||
"latitude": 45.645410819021656
|
||||
},
|
||||
"timestamp": 1394788322169
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 3.7680623531341553,
|
||||
"accuracy": 5,
|
||||
"altitudeAccuracy": 6,
|
||||
"altitude": 234,
|
||||
"longitude": 5.871355114510163,
|
||||
"heading": 92.4609375,
|
||||
"latitude": 45.645418111277415
|
||||
},
|
||||
"timestamp": 1394788322898
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 3.537794351577759,
|
||||
"accuracy": 10,
|
||||
"altitudeAccuracy": 6,
|
||||
"altitude": 234,
|
||||
"longitude": 5.871393922721847,
|
||||
"heading": 92.4609375,
|
||||
"latitude": 45.64541693781097
|
||||
},
|
||||
"timestamp": 1394788323968
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 3.3741507530212402,
|
||||
"accuracy": 10,
|
||||
"altitudeAccuracy": 6,
|
||||
"altitude": 234,
|
||||
"longitude": 5.8714455552453835,
|
||||
"heading": 75.5859375,
|
||||
"latitude": 45.645444011358215
|
||||
},
|
||||
"timestamp": 1394788324896
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 3.3729660511016846,
|
||||
"accuracy": 10,
|
||||
"altitudeAccuracy": 6,
|
||||
"altitude": 235,
|
||||
"longitude": 5.87150791660498,
|
||||
"heading": 70.3125,
|
||||
"latitude": 45.64547209073384
|
||||
},
|
||||
"timestamp": 1394788325971
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 3.463883876800537,
|
||||
"accuracy": 10,
|
||||
"altitudeAccuracy": 6,
|
||||
"altitude": 235,
|
||||
"longitude": 5.871554352348551,
|
||||
"heading": 70.3125,
|
||||
"latitude": 45.64548374157925
|
||||
},
|
||||
"timestamp": 1394788327122
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 3.5247886180877686,
|
||||
"accuracy": 10,
|
||||
"altitudeAccuracy": 6,
|
||||
"altitude": 235,
|
||||
"longitude": 5.871567260479435,
|
||||
"heading": 67.1484375,
|
||||
"latitude": 45.645496733529164
|
||||
},
|
||||
"timestamp": 1394788328164
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 3.455146551132202,
|
||||
"accuracy": 10,
|
||||
"altitudeAccuracy": 6,
|
||||
"altitude": 235,
|
||||
"longitude": 5.871608583262071,
|
||||
"heading": 68.90625,
|
||||
"latitude": 45.64550293613751
|
||||
},
|
||||
"timestamp": 1394788328985
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 3.382997989654541,
|
||||
"accuracy": 10,
|
||||
"altitudeAccuracy": 8,
|
||||
"altitude": 236,
|
||||
"longitude": 5.871640518313154,
|
||||
"heading": 78.75,
|
||||
"latitude": 45.6454965658911
|
||||
},
|
||||
"timestamp": 1394788329900
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 3.242330312728882,
|
||||
"accuracy": 10,
|
||||
"altitudeAccuracy": 8,
|
||||
"altitude": 236,
|
||||
"longitude": 5.871667759498462,
|
||||
"heading": 92.4609375,
|
||||
"latitude": 45.64548562750746
|
||||
},
|
||||
"timestamp": 1394788331120
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 3.074465274810791,
|
||||
"accuracy": 10,
|
||||
"altitudeAccuracy": 8,
|
||||
"altitude": 236,
|
||||
"longitude": 5.871691312646374,
|
||||
"heading": 110.0390625,
|
||||
"latitude": 45.645468402696444
|
||||
},
|
||||
"timestamp": 1394788332219
|
||||
}]
|
||||
}
|
||||
BIN
examples_src/data/geolocation_marker.png
Normal file
BIN
examples_src/data/geolocation_marker.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 829 B |
BIN
examples_src/data/geolocation_marker_heading.png
Normal file
BIN
examples_src/data/geolocation_marker_heading.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
2
examples_src/data/gml/topp-states-wfs.xml
Normal file
2
examples_src/data/gml/topp-states-wfs.xml
Normal file
File diff suppressed because one or more lines are too long
1077
examples_src/data/gpx/fells_loop.gpx
Normal file
1077
examples_src/data/gpx/fells_loop.gpx
Normal file
File diff suppressed because it is too large
Load Diff
BIN
examples_src/data/icon.png
Normal file
BIN
examples_src/data/icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
15585
examples_src/data/igc/Clement-Latour.igc
Normal file
15585
examples_src/data/igc/Clement-Latour.igc
Normal file
File diff suppressed because it is too large
Load Diff
3319
examples_src/data/igc/Damien-de-Baenst.igc
Normal file
3319
examples_src/data/igc/Damien-de-Baenst.igc
Normal file
File diff suppressed because it is too large
Load Diff
16374
examples_src/data/igc/Sylvain-Dhonneur.igc
Normal file
16374
examples_src/data/igc/Sylvain-Dhonneur.igc
Normal file
File diff suppressed because it is too large
Load Diff
9879
examples_src/data/igc/Tom-Payne.igc
Normal file
9879
examples_src/data/igc/Tom-Payne.igc
Normal file
File diff suppressed because it is too large
Load Diff
4611
examples_src/data/igc/Ulrich-Prinz.igc
Normal file
4611
examples_src/data/igc/Ulrich-Prinz.igc
Normal file
File diff suppressed because it is too large
Load Diff
9391
examples_src/data/kml/2012-02-10.kml
Normal file
9391
examples_src/data/kml/2012-02-10.kml
Normal file
File diff suppressed because one or more lines are too long
10758
examples_src/data/kml/2012_Earthquakes_Mag5.kml
Normal file
10758
examples_src/data/kml/2012_Earthquakes_Mag5.kml
Normal file
File diff suppressed because it is too large
Load Diff
1608
examples_src/data/kml/timezones.kml
Normal file
1608
examples_src/data/kml/timezones.kml
Normal file
File diff suppressed because one or more lines are too long
284
examples_src/data/ogcsample.xml
Normal file
284
examples_src/data/ogcsample.xml
Normal file
@@ -0,0 +1,284 @@
|
||||
<?xml version='1.0' encoding="UTF-8"?>
|
||||
<WMS_Capabilities version="1.3.0" xmlns="http://www.opengis.net/wms"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
|
||||
xsi:schemaLocation="http://www.opengis.net/wms http://schemas.opengis.net/wms/1.3.0/capabilities_1_3_0.xsd">
|
||||
<Service>
|
||||
<Name>WMS</Name>
|
||||
<Title>Acme Corp. Map Server</Title>
|
||||
<Abstract>Map Server maintained by Acme Corporation. Contact: webmaster@wmt.acme.com. High-quality maps showing roadrunner nests and possible ambush locations.</Abstract>
|
||||
|
||||
<KeywordList>
|
||||
<Keyword>bird</Keyword>
|
||||
<Keyword>roadrunner</Keyword>
|
||||
<Keyword>ambush</Keyword>
|
||||
</KeywordList>
|
||||
<OnlineResource xmlns:xlink="http://www.w3.org/1999/xlink" xlink:type="simple"
|
||||
xlink:href="http://hostname/" />
|
||||
|
||||
|
||||
<ContactInformation>
|
||||
<ContactPersonPrimary>
|
||||
<ContactPerson>Jeff Smith</ContactPerson>
|
||||
<ContactOrganization>NASA</ContactOrganization>
|
||||
</ContactPersonPrimary>
|
||||
<ContactPosition>Computer Scientist</ContactPosition>
|
||||
|
||||
<ContactAddress>
|
||||
<AddressType>postal</AddressType>
|
||||
<Address>NASA Goddard Space Flight Center</Address>
|
||||
<City>Greenbelt</City>
|
||||
<StateOrProvince>MD</StateOrProvince>
|
||||
<PostCode>20771</PostCode>
|
||||
|
||||
<Country>USA</Country>
|
||||
</ContactAddress>
|
||||
<ContactVoiceTelephone>+1 301 555-1212</ContactVoiceTelephone>
|
||||
<ContactElectronicMailAddress>user@host.com</ContactElectronicMailAddress>
|
||||
</ContactInformation>
|
||||
|
||||
<Fees>none</Fees>
|
||||
|
||||
<AccessConstraints>none</AccessConstraints>
|
||||
<LayerLimit>16</LayerLimit>
|
||||
<MaxWidth>2048</MaxWidth>
|
||||
<MaxHeight>2048</MaxHeight>
|
||||
</Service>
|
||||
<Capability>
|
||||
<Request>
|
||||
<GetCapabilities>
|
||||
|
||||
<Format>text/xml</Format>
|
||||
<DCPType>
|
||||
<HTTP>
|
||||
<Get>
|
||||
<OnlineResource xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
xlink:type="simple"
|
||||
xlink:href="http://hostname/path?" />
|
||||
</Get>
|
||||
<Post>
|
||||
<OnlineResource xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
xlink:type="simple"
|
||||
xlink:href="http://hostname/path?" />
|
||||
|
||||
</Post>
|
||||
</HTTP>
|
||||
</DCPType>
|
||||
</GetCapabilities>
|
||||
<GetMap>
|
||||
<Format>image/gif</Format>
|
||||
<Format>image/png</Format>
|
||||
<Format>image/jpeg</Format>
|
||||
|
||||
<DCPType>
|
||||
<HTTP>
|
||||
<Get>
|
||||
<OnlineResource xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
xlink:type="simple"
|
||||
xlink:href="http://hostname/path?" />
|
||||
</Get>
|
||||
</HTTP>
|
||||
</DCPType>
|
||||
</GetMap>
|
||||
|
||||
<GetFeatureInfo>
|
||||
<Format>text/xml</Format>
|
||||
<Format>text/plain</Format>
|
||||
<Format>text/html</Format>
|
||||
<DCPType>
|
||||
<HTTP>
|
||||
<Get>
|
||||
|
||||
<OnlineResource xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
xlink:type="simple"
|
||||
xlink:href="http://hostname/path?" />
|
||||
</Get>
|
||||
</HTTP>
|
||||
</DCPType>
|
||||
</GetFeatureInfo>
|
||||
</Request>
|
||||
<Exception>
|
||||
<Format>XML</Format>
|
||||
|
||||
<Format>INIMAGE</Format>
|
||||
<Format>BLANK</Format>
|
||||
</Exception>
|
||||
<Layer>
|
||||
<Title>Acme Corp. Map Server</Title>
|
||||
<CRS>CRS:84</CRS>
|
||||
|
||||
<AuthorityURL name="DIF_ID">
|
||||
<OnlineResource xmlns:xlink="http://www.w3.org/1999/xlink" xlink:type="simple"
|
||||
xlink:href="http://gcmd.gsfc.nasa.gov/difguide/whatisadif.html" />
|
||||
</AuthorityURL>
|
||||
<BoundingBox CRS="CRS:84"
|
||||
minx="-1" miny="-1" maxx="1" maxy="1" resx="0.0" resy="0.0"/>
|
||||
<Layer>
|
||||
|
||||
<Name>ROADS_RIVERS</Name>
|
||||
<Title>Roads and Rivers</Title>
|
||||
|
||||
<CRS>EPSG:26986</CRS>
|
||||
<EX_GeographicBoundingBox>
|
||||
<westBoundLongitude>-71.63</westBoundLongitude>
|
||||
<eastBoundLongitude>-70.78</eastBoundLongitude>
|
||||
<southBoundLatitude>41.75</southBoundLatitude>
|
||||
<northBoundLatitude>42.90</northBoundLatitude>
|
||||
|
||||
</EX_GeographicBoundingBox>
|
||||
<BoundingBox CRS="CRS:84"
|
||||
minx="-71.63" miny="41.75" maxx="-70.78" maxy="42.90" resx="0.01" resy="0.01"/>
|
||||
<BoundingBox CRS="EPSG:26986"
|
||||
minx="189000" miny="834000" maxx="285000" maxy="962000" resx="1" resy="1" />
|
||||
<Attribution>
|
||||
<Title>State College University</Title>
|
||||
<OnlineResource xmlns:xlink="http://www.w3.org/1999/xlink" xlink:type="simple"
|
||||
xlink:href="http://www.university.edu/" />
|
||||
|
||||
<LogoURL width="100" height="100">
|
||||
<Format>image/gif</Format>
|
||||
<OnlineResource xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
xlink:type="simple"
|
||||
xlink:href="http://www.university.edu/icons/logo.gif" />
|
||||
</LogoURL>
|
||||
</Attribution>
|
||||
<Identifier authority="DIF_ID">123456</Identifier>
|
||||
<FeatureListURL>
|
||||
|
||||
<Format>XML</Format>
|
||||
<OnlineResource xmlns:xlink="http://www.w3.org/1999/xlink" xlink:type="simple"
|
||||
xlink:href="http://www.university.edu/data/roads_rivers.gml" />
|
||||
</FeatureListURL>
|
||||
<Style>
|
||||
<Name>USGS</Name>
|
||||
<Title>USGS Topo Map Style</Title>
|
||||
<Abstract>Features are shown in a style like that used in USGS topographic maps.</Abstract>
|
||||
|
||||
<LegendURL width="72" height="72">
|
||||
<Format>image/gif</Format>
|
||||
<OnlineResource xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
xlink:type="simple"
|
||||
xlink:href="http://www.university.edu/legends/usgs.gif" />
|
||||
</LegendURL>
|
||||
<StyleSheetURL>
|
||||
<Format>text/xsl</Format>
|
||||
|
||||
<OnlineResource xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
xlink:type="simple"
|
||||
xlink:href="http://www.university.edu/stylesheets/usgs.xsl" />
|
||||
</StyleSheetURL>
|
||||
</Style>
|
||||
<MinScaleDenominator>1000</MinScaleDenominator>
|
||||
<MaxScaleDenominator>250000</MaxScaleDenominator>
|
||||
<Layer queryable="1">
|
||||
<Name>ROADS_1M</Name>
|
||||
<Title>Roads at 1:1M scale</Title>
|
||||
<Abstract>Roads at a scale of 1 to 1 million.</Abstract>
|
||||
|
||||
<KeywordList>
|
||||
<Keyword>road</Keyword>
|
||||
<Keyword>transportation</Keyword>
|
||||
<Keyword>atlas</Keyword>
|
||||
</KeywordList>
|
||||
<Identifier authority="DIF_ID">123456</Identifier>
|
||||
<MetadataURL type="FGDC:1998">
|
||||
|
||||
<Format>text/plain</Format>
|
||||
<OnlineResource xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
xlink:type="simple"
|
||||
xlink:href="http://www.university.edu/metadata/roads.txt" />
|
||||
</MetadataURL>
|
||||
<MetadataURL type="ISO19115:2003">
|
||||
<Format>text/xml</Format>
|
||||
<OnlineResource xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
xlink:type="simple"
|
||||
xlink:href="http://www.university.edu/metadata/roads.xml" />
|
||||
</MetadataURL>
|
||||
|
||||
<Style>
|
||||
<Name>ATLAS</Name>
|
||||
<Title>Road atlas style</Title>
|
||||
<Abstract>Roads are shown in a style like that used in a commercial road atlas.</Abstract>
|
||||
<LegendURL width="72" height="72">
|
||||
<Format>image/gif</Format>
|
||||
<OnlineResource xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
xlink:type="simple"
|
||||
xlink:href="http://www.university.edu/legends/atlas.gif" />
|
||||
|
||||
</LegendURL>
|
||||
</Style>
|
||||
</Layer>
|
||||
<Layer queryable="1">
|
||||
<Name>RIVERS_1M</Name>
|
||||
<Title>Rivers at 1:1M scale</Title>
|
||||
<Abstract>Rivers at a scale of 1 to 1 million.</Abstract>
|
||||
|
||||
<KeywordList>
|
||||
<Keyword>river</Keyword>
|
||||
<Keyword>canal</Keyword>
|
||||
<Keyword>waterway</Keyword>
|
||||
</KeywordList>
|
||||
</Layer>
|
||||
</Layer>
|
||||
|
||||
<Layer queryable="1">
|
||||
<Title>Weather Forecast Data</Title>
|
||||
<CRS>CRS:84</CRS>
|
||||
|
||||
<EX_GeographicBoundingBox>
|
||||
<westBoundLongitude>-180</westBoundLongitude>
|
||||
<eastBoundLongitude>180</eastBoundLongitude>
|
||||
|
||||
<southBoundLatitude>-90</southBoundLatitude>
|
||||
<northBoundLatitude>90</northBoundLatitude>
|
||||
</EX_GeographicBoundingBox>
|
||||
<Dimension name="time" units="ISO8601" default="2000-08-22">1999-01-01/2000-08-22/P1D</Dimension>
|
||||
<Layer>
|
||||
|
||||
<Name>Clouds</Name>
|
||||
<Title>Forecast cloud cover</Title>
|
||||
</Layer>
|
||||
<Layer>
|
||||
<Name>Temperature</Name>
|
||||
<Title>Forecast temperature</Title>
|
||||
</Layer>
|
||||
|
||||
<Layer>
|
||||
<Name>Pressure</Name>
|
||||
<Title>Forecast barometric pressure</Title>
|
||||
<Dimension name="elevation" units="EPSG:5030" />
|
||||
<Dimension name="time" units="ISO8601" default="2000-08-22">
|
||||
1999-01-01/2000-08-22/P1D</Dimension>
|
||||
|
||||
<Dimension name="elevation" units="CRS:88" default="0" nearestValue="1">0,1000,3000,5000,10000</Dimension>
|
||||
</Layer>
|
||||
</Layer>
|
||||
<Layer opaque="1" noSubsets="1" fixedWidth="512" fixedHeight="256">
|
||||
<Name>ozone_image</Name>
|
||||
<Title>Global ozone distribution (1992)</Title>
|
||||
|
||||
<EX_GeographicBoundingBox>
|
||||
<westBoundLongitude>-180</westBoundLongitude>
|
||||
<eastBoundLongitude>180</eastBoundLongitude>
|
||||
<southBoundLatitude>-90</southBoundLatitude>
|
||||
<northBoundLatitude>90</northBoundLatitude>
|
||||
</EX_GeographicBoundingBox>
|
||||
<Dimension name="time" units="ISO8601" default="1992">1992</Dimension>
|
||||
|
||||
</Layer>
|
||||
<Layer cascaded="1">
|
||||
<Name>population</Name>
|
||||
<Title>World population, annual</Title>
|
||||
<EX_GeographicBoundingBox>
|
||||
<westBoundLongitude>-180</westBoundLongitude>
|
||||
|
||||
<eastBoundLongitude>180</eastBoundLongitude>
|
||||
<southBoundLatitude>-90</southBoundLatitude>
|
||||
<northBoundLatitude>90</northBoundLatitude>
|
||||
</EX_GeographicBoundingBox>
|
||||
<Dimension name="time" units="ISO8601" default="2000">1990/2000/P1Y</Dimension>
|
||||
</Layer>
|
||||
</Layer>
|
||||
|
||||
</Capability>
|
||||
</WMS_Capabilities>
|
||||
43
examples_src/data/sld/countries.sld
Normal file
43
examples_src/data/sld/countries.sld
Normal file
@@ -0,0 +1,43 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<sld:StyledLayerDescriptor xmlns="http://www.opengis.net/sld" xmlns:sld="http://www.opengis.net/sld" xmlns:ogc="http://www.opengis.net/ogc" xmlns:gml="http://www.opengis.net/gml" version="1.0.0">
|
||||
<sld:NamedLayer>
|
||||
<sld:Name>countries</sld:Name>
|
||||
<sld:UserStyle>
|
||||
<sld:Name>countries</sld:Name>
|
||||
<sld:Title>A sample style for countries</sld:Title>
|
||||
<sld:IsDefault>1</sld:IsDefault>
|
||||
<sld:Abstract>A sample style for countries</sld:Abstract>
|
||||
<sld:FeatureTypeStyle>
|
||||
<sld:Name>name</sld:Name>
|
||||
<sld:Rule>
|
||||
<sld:Name>Sample</sld:Name>
|
||||
<sld:Title>Sample</sld:Title>
|
||||
<sld:PolygonSymbolizer>
|
||||
<sld:Fill>
|
||||
<sld:CssParameter name="fill">#ff0000</sld:CssParameter>
|
||||
<sld:CssParameter name="fill-opacity">0.6</sld:CssParameter>
|
||||
</sld:Fill>
|
||||
<sld:Stroke>
|
||||
<sld:CssParameter name="stroke">#00FF00</sld:CssParameter>
|
||||
<sld:CssParameter name="stroke-opacity">0.5</sld:CssParameter>
|
||||
<sld:CssParameter name="stroke-width">4</sld:CssParameter>
|
||||
</sld:Stroke>
|
||||
</sld:PolygonSymbolizer>
|
||||
</sld:Rule>
|
||||
<sld:Rule>
|
||||
<sld:MaxScaleDenominator>20000000</sld:MaxScaleDenominator>
|
||||
<sld:TextSymbolizer>
|
||||
<sld:Label>
|
||||
<ogc:PropertyName>name</ogc:PropertyName>
|
||||
</sld:Label>
|
||||
<sld:Font>
|
||||
<sld:CssParameter name="font-family">Arial</sld:CssParameter>
|
||||
<sld:CssParameter name="font-size">10</sld:CssParameter>
|
||||
<sld:CssParameter name="font-style">Normal</sld:CssParameter>
|
||||
</sld:Font>
|
||||
</sld:TextSymbolizer>
|
||||
</sld:Rule>
|
||||
</sld:FeatureTypeStyle>
|
||||
</sld:UserStyle>
|
||||
</sld:NamedLayer>
|
||||
</sld:StyledLayerDescriptor>
|
||||
1
examples_src/data/topojson/us.json
Normal file
1
examples_src/data/topojson/us.json
Normal file
File diff suppressed because one or more lines are too long
1
examples_src/data/topojson/world-110m.json
Normal file
1
examples_src/data/topojson/world-110m.json
Normal file
File diff suppressed because one or more lines are too long
58
examples_src/device-orientation.html
Normal file
58
examples_src/device-orientation.html
Normal file
@@ -0,0 +1,58 @@
|
||||
<!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>
|
||||
55
examples_src/device-orientation.js
Normal file
55
examples_src/device-orientation.js
Normal file
@@ -0,0 +1,55 @@
|
||||
goog.require('ol.DeviceOrientation');
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.View');
|
||||
goog.require('ol.control');
|
||||
goog.require('ol.dom.Input');
|
||||
goog.require('ol.layer.Tile');
|
||||
goog.require('ol.proj');
|
||||
goog.require('ol.source.OSM');
|
||||
|
||||
var projection = ol.proj.get('EPSG:3857');
|
||||
var view = new ol.View({
|
||||
center: [0, 0],
|
||||
projection: projection,
|
||||
extent: projection.getExtent(),
|
||||
zoom: 2
|
||||
});
|
||||
var map = new ol.Map({
|
||||
layers: [
|
||||
new ol.layer.Tile({
|
||||
source: new ol.source.OSM()
|
||||
})
|
||||
],
|
||||
renderer: exampleNS.getRendererFromQueryString(),
|
||||
target: 'map',
|
||||
controls: ol.control.defaults({
|
||||
attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
|
||||
collapsible: false
|
||||
})
|
||||
}),
|
||||
view: view
|
||||
});
|
||||
|
||||
var deviceOrientation = new ol.DeviceOrientation();
|
||||
var track = new ol.dom.Input(document.getElementById('track'));
|
||||
track.bindTo('checked', deviceOrientation, 'tracking');
|
||||
|
||||
deviceOrientation.on('change', function(event) {
|
||||
$('#alpha').text(deviceOrientation.getAlpha() + ' [rad]');
|
||||
$('#beta').text(deviceOrientation.getBeta() + ' [rad]');
|
||||
$('#gamma').text(deviceOrientation.getGamma() + ' [rad]');
|
||||
$('#heading').text(deviceOrientation.getHeading() + ' [rad]');
|
||||
});
|
||||
|
||||
// tilt the map
|
||||
deviceOrientation.on(['change:beta', 'change:gamma'], function(event) {
|
||||
var center = view.getCenter();
|
||||
var resolution = view.getResolution();
|
||||
var beta = event.target.getBeta() || 0;
|
||||
var gamma = event.target.getGamma() || 0;
|
||||
|
||||
center[0] -= resolution * gamma * 25;
|
||||
center[1] += resolution * beta * 25;
|
||||
|
||||
view.setCenter(view.constrainCenter(center));
|
||||
});
|
||||
56
examples_src/drag-and-drop-image-vector.html
Normal file
56
examples_src/drag-and-drop-image-vector.html
Normal file
@@ -0,0 +1,56 @@
|
||||
<!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>
|
||||
158
examples_src/drag-and-drop-image-vector.js
Normal file
158
examples_src/drag-and-drop-image-vector.js
Normal file
@@ -0,0 +1,158 @@
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.View');
|
||||
goog.require('ol.format.GPX');
|
||||
goog.require('ol.format.GeoJSON');
|
||||
goog.require('ol.format.IGC');
|
||||
goog.require('ol.format.KML');
|
||||
goog.require('ol.format.TopoJSON');
|
||||
goog.require('ol.interaction');
|
||||
goog.require('ol.interaction.DragAndDrop');
|
||||
goog.require('ol.layer.Image');
|
||||
goog.require('ol.layer.Tile');
|
||||
goog.require('ol.source.BingMaps');
|
||||
goog.require('ol.source.ImageVector');
|
||||
goog.require('ol.source.Vector');
|
||||
goog.require('ol.style.Circle');
|
||||
goog.require('ol.style.Fill');
|
||||
goog.require('ol.style.Stroke');
|
||||
goog.require('ol.style.Style');
|
||||
|
||||
|
||||
var defaultStyle = {
|
||||
'Point': [new ol.style.Style({
|
||||
image: new ol.style.Circle({
|
||||
fill: new ol.style.Fill({
|
||||
color: 'rgba(255,255,0,0.5)'
|
||||
}),
|
||||
radius: 5,
|
||||
stroke: new ol.style.Stroke({
|
||||
color: '#ff0',
|
||||
width: 1
|
||||
})
|
||||
})
|
||||
})],
|
||||
'LineString': [new ol.style.Style({
|
||||
stroke: new ol.style.Stroke({
|
||||
color: '#f00',
|
||||
width: 3
|
||||
})
|
||||
})],
|
||||
'Polygon': [new ol.style.Style({
|
||||
fill: new ol.style.Fill({
|
||||
color: 'rgba(0,255,255,0.5)'
|
||||
}),
|
||||
stroke: new ol.style.Stroke({
|
||||
color: '#0ff',
|
||||
width: 1
|
||||
})
|
||||
})],
|
||||
'MultiPoint': [new ol.style.Style({
|
||||
image: new ol.style.Circle({
|
||||
fill: new ol.style.Fill({
|
||||
color: 'rgba(255,0,255,0.5)'
|
||||
}),
|
||||
radius: 5,
|
||||
stroke: new ol.style.Stroke({
|
||||
color: '#f0f',
|
||||
width: 1
|
||||
})
|
||||
})
|
||||
})],
|
||||
'MultiLineString': [new ol.style.Style({
|
||||
stroke: new ol.style.Stroke({
|
||||
color: '#0f0',
|
||||
width: 3
|
||||
})
|
||||
})],
|
||||
'MultiPolygon': [new ol.style.Style({
|
||||
fill: new ol.style.Fill({
|
||||
color: 'rgba(0,0,255,0.5)'
|
||||
}),
|
||||
stroke: new ol.style.Stroke({
|
||||
color: '#00f',
|
||||
width: 1
|
||||
})
|
||||
})]
|
||||
};
|
||||
|
||||
var styleFunction = function(feature, resolution) {
|
||||
var featureStyleFunction = feature.getStyleFunction();
|
||||
if (featureStyleFunction) {
|
||||
return featureStyleFunction.call(feature, resolution);
|
||||
} else {
|
||||
return defaultStyle[feature.getGeometry().getType()];
|
||||
}
|
||||
};
|
||||
|
||||
var dragAndDropInteraction = new ol.interaction.DragAndDrop({
|
||||
formatConstructors: [
|
||||
ol.format.GPX,
|
||||
ol.format.GeoJSON,
|
||||
ol.format.IGC,
|
||||
ol.format.KML,
|
||||
ol.format.TopoJSON
|
||||
]
|
||||
});
|
||||
|
||||
var map = new ol.Map({
|
||||
interactions: ol.interaction.defaults().extend([dragAndDropInteraction]),
|
||||
layers: [
|
||||
new ol.layer.Tile({
|
||||
source: new ol.source.BingMaps({
|
||||
imagerySet: 'Aerial',
|
||||
key: 'Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3'
|
||||
})
|
||||
})
|
||||
],
|
||||
renderer: exampleNS.getRendererFromQueryString(),
|
||||
target: 'map',
|
||||
view: new ol.View({
|
||||
center: [0, 0],
|
||||
zoom: 2
|
||||
})
|
||||
});
|
||||
|
||||
dragAndDropInteraction.on('addfeatures', function(event) {
|
||||
var vectorSource = new ol.source.Vector({
|
||||
features: event.features,
|
||||
projection: event.projection
|
||||
});
|
||||
map.getLayers().push(new ol.layer.Image({
|
||||
source: new ol.source.ImageVector({
|
||||
source: vectorSource,
|
||||
style: styleFunction
|
||||
})
|
||||
}));
|
||||
var view = map.getView();
|
||||
view.fitExtent(
|
||||
vectorSource.getExtent(), /** @type {ol.Size} */ (map.getSize()));
|
||||
});
|
||||
|
||||
var displayFeatureInfo = function(pixel) {
|
||||
var features = [];
|
||||
map.forEachFeatureAtPixel(pixel, function(feature, layer) {
|
||||
features.push(feature);
|
||||
});
|
||||
if (features.length > 0) {
|
||||
var info = [];
|
||||
var i, ii;
|
||||
for (i = 0, ii = features.length; i < ii; ++i) {
|
||||
info.push(features[i].get('name'));
|
||||
}
|
||||
document.getElementById('info').innerHTML = info.join(', ') || ' ';
|
||||
} else {
|
||||
document.getElementById('info').innerHTML = ' ';
|
||||
}
|
||||
};
|
||||
|
||||
map.on('pointermove', function(evt) {
|
||||
if (evt.dragging) {
|
||||
return;
|
||||
}
|
||||
var pixel = map.getEventPixel(evt.originalEvent);
|
||||
displayFeatureInfo(pixel);
|
||||
});
|
||||
|
||||
map.on('click', function(evt) {
|
||||
displayFeatureInfo(evt.pixel);
|
||||
});
|
||||
56
examples_src/drag-and-drop.html
Normal file
56
examples_src/drag-and-drop.html
Normal file
@@ -0,0 +1,56 @@
|
||||
<!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>
|
||||
154
examples_src/drag-and-drop.js
Normal file
154
examples_src/drag-and-drop.js
Normal file
@@ -0,0 +1,154 @@
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.View');
|
||||
goog.require('ol.format.GPX');
|
||||
goog.require('ol.format.GeoJSON');
|
||||
goog.require('ol.format.IGC');
|
||||
goog.require('ol.format.KML');
|
||||
goog.require('ol.format.TopoJSON');
|
||||
goog.require('ol.interaction');
|
||||
goog.require('ol.interaction.DragAndDrop');
|
||||
goog.require('ol.layer.Tile');
|
||||
goog.require('ol.layer.Vector');
|
||||
goog.require('ol.source.BingMaps');
|
||||
goog.require('ol.source.Vector');
|
||||
goog.require('ol.style.Circle');
|
||||
goog.require('ol.style.Fill');
|
||||
goog.require('ol.style.Stroke');
|
||||
goog.require('ol.style.Style');
|
||||
|
||||
|
||||
var defaultStyle = {
|
||||
'Point': [new ol.style.Style({
|
||||
image: new ol.style.Circle({
|
||||
fill: new ol.style.Fill({
|
||||
color: 'rgba(255,255,0,0.5)'
|
||||
}),
|
||||
radius: 5,
|
||||
stroke: new ol.style.Stroke({
|
||||
color: '#ff0',
|
||||
width: 1
|
||||
})
|
||||
})
|
||||
})],
|
||||
'LineString': [new ol.style.Style({
|
||||
stroke: new ol.style.Stroke({
|
||||
color: '#f00',
|
||||
width: 3
|
||||
})
|
||||
})],
|
||||
'Polygon': [new ol.style.Style({
|
||||
fill: new ol.style.Fill({
|
||||
color: 'rgba(0,255,255,0.5)'
|
||||
}),
|
||||
stroke: new ol.style.Stroke({
|
||||
color: '#0ff',
|
||||
width: 1
|
||||
})
|
||||
})],
|
||||
'MultiPoint': [new ol.style.Style({
|
||||
image: new ol.style.Circle({
|
||||
fill: new ol.style.Fill({
|
||||
color: 'rgba(255,0,255,0.5)'
|
||||
}),
|
||||
radius: 5,
|
||||
stroke: new ol.style.Stroke({
|
||||
color: '#f0f',
|
||||
width: 1
|
||||
})
|
||||
})
|
||||
})],
|
||||
'MultiLineString': [new ol.style.Style({
|
||||
stroke: new ol.style.Stroke({
|
||||
color: '#0f0',
|
||||
width: 3
|
||||
})
|
||||
})],
|
||||
'MultiPolygon': [new ol.style.Style({
|
||||
fill: new ol.style.Fill({
|
||||
color: 'rgba(0,0,255,0.5)'
|
||||
}),
|
||||
stroke: new ol.style.Stroke({
|
||||
color: '#00f',
|
||||
width: 1
|
||||
})
|
||||
})]
|
||||
};
|
||||
|
||||
var styleFunction = function(feature, resolution) {
|
||||
var featureStyleFunction = feature.getStyleFunction();
|
||||
if (featureStyleFunction) {
|
||||
return featureStyleFunction.call(feature, resolution);
|
||||
} else {
|
||||
return defaultStyle[feature.getGeometry().getType()];
|
||||
}
|
||||
};
|
||||
|
||||
var dragAndDropInteraction = new ol.interaction.DragAndDrop({
|
||||
formatConstructors: [
|
||||
ol.format.GPX,
|
||||
ol.format.GeoJSON,
|
||||
ol.format.IGC,
|
||||
ol.format.KML,
|
||||
ol.format.TopoJSON
|
||||
]
|
||||
});
|
||||
|
||||
var map = new ol.Map({
|
||||
interactions: ol.interaction.defaults().extend([dragAndDropInteraction]),
|
||||
layers: [
|
||||
new ol.layer.Tile({
|
||||
source: new ol.source.BingMaps({
|
||||
imagerySet: 'Aerial',
|
||||
key: 'Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3'
|
||||
})
|
||||
})
|
||||
],
|
||||
target: 'map',
|
||||
view: new ol.View({
|
||||
center: [0, 0],
|
||||
zoom: 2
|
||||
})
|
||||
});
|
||||
|
||||
dragAndDropInteraction.on('addfeatures', function(event) {
|
||||
var vectorSource = new ol.source.Vector({
|
||||
features: event.features,
|
||||
projection: event.projection
|
||||
});
|
||||
map.getLayers().push(new ol.layer.Vector({
|
||||
source: vectorSource,
|
||||
style: styleFunction
|
||||
}));
|
||||
var view = map.getView();
|
||||
view.fitExtent(
|
||||
vectorSource.getExtent(), /** @type {ol.Size} */ (map.getSize()));
|
||||
});
|
||||
|
||||
var displayFeatureInfo = function(pixel) {
|
||||
var features = [];
|
||||
map.forEachFeatureAtPixel(pixel, function(feature, layer) {
|
||||
features.push(feature);
|
||||
});
|
||||
if (features.length > 0) {
|
||||
var info = [];
|
||||
var i, ii;
|
||||
for (i = 0, ii = features.length; i < ii; ++i) {
|
||||
info.push(features[i].get('name'));
|
||||
}
|
||||
document.getElementById('info').innerHTML = info.join(', ') || ' ';
|
||||
} else {
|
||||
document.getElementById('info').innerHTML = ' ';
|
||||
}
|
||||
};
|
||||
|
||||
map.on('pointermove', function(evt) {
|
||||
if (evt.dragging) {
|
||||
return;
|
||||
}
|
||||
var pixel = map.getEventPixel(evt.originalEvent);
|
||||
displayFeatureInfo(pixel);
|
||||
});
|
||||
|
||||
map.on('click', function(evt) {
|
||||
displayFeatureInfo(evt.pixel);
|
||||
});
|
||||
51
examples_src/drag-features.html
Normal file
51
examples_src/drag-features.html
Normal file
@@ -0,0 +1,51 @@
|
||||
<!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>
|
||||
192
examples_src/drag-features.js
Normal file
192
examples_src/drag-features.js
Normal file
@@ -0,0 +1,192 @@
|
||||
goog.require('ol.Feature');
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.View');
|
||||
goog.require('ol.geom.LineString');
|
||||
goog.require('ol.geom.Point');
|
||||
goog.require('ol.geom.Polygon');
|
||||
goog.require('ol.interaction');
|
||||
goog.require('ol.interaction.Pointer');
|
||||
goog.require('ol.layer.Tile');
|
||||
goog.require('ol.layer.Vector');
|
||||
goog.require('ol.source.TileJSON');
|
||||
goog.require('ol.source.Vector');
|
||||
goog.require('ol.style.Fill');
|
||||
goog.require('ol.style.Icon');
|
||||
goog.require('ol.style.Stroke');
|
||||
goog.require('ol.style.Style');
|
||||
|
||||
|
||||
/**
|
||||
* Define a namespace for the application.
|
||||
*/
|
||||
window.app = {};
|
||||
var app = window.app;
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* @constructor
|
||||
* @extends {ol.interaction.Pointer}
|
||||
*/
|
||||
app.Drag = function() {
|
||||
|
||||
ol.interaction.Pointer.call(this, {
|
||||
handleDownEvent: app.Drag.prototype.handleDownEvent,
|
||||
handleDragEvent: app.Drag.prototype.handleDragEvent,
|
||||
handleMoveEvent: app.Drag.prototype.handleMoveEvent,
|
||||
handleUpEvent: app.Drag.prototype.handleUpEvent
|
||||
});
|
||||
|
||||
/**
|
||||
* @type {ol.Pixel}
|
||||
* @private
|
||||
*/
|
||||
this.coordinate_ = null;
|
||||
|
||||
/**
|
||||
* @type {string|undefined}
|
||||
* @private
|
||||
*/
|
||||
this.cursor_ = 'pointer';
|
||||
|
||||
/**
|
||||
* @type {ol.Feature}
|
||||
* @private
|
||||
*/
|
||||
this.feature_ = null;
|
||||
|
||||
/**
|
||||
* @type {string|undefined}
|
||||
* @private
|
||||
*/
|
||||
this.previousCursor_ = undefined;
|
||||
|
||||
};
|
||||
ol.inherits(app.Drag, ol.interaction.Pointer);
|
||||
|
||||
|
||||
/**
|
||||
* @param {ol.MapBrowserEvent} evt Map browser event.
|
||||
* @return {boolean} `true` to start the drag sequence.
|
||||
*/
|
||||
app.Drag.prototype.handleDownEvent = function(evt) {
|
||||
var map = evt.map;
|
||||
|
||||
var feature = map.forEachFeatureAtPixel(evt.pixel,
|
||||
function(feature, layer) {
|
||||
return feature;
|
||||
});
|
||||
|
||||
if (feature) {
|
||||
this.coordinate_ = evt.coordinate;
|
||||
this.feature_ = feature;
|
||||
}
|
||||
|
||||
return !!feature;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @param {ol.MapBrowserEvent} evt Map browser event.
|
||||
*/
|
||||
app.Drag.prototype.handleDragEvent = function(evt) {
|
||||
var map = evt.map;
|
||||
|
||||
var feature = map.forEachFeatureAtPixel(evt.pixel,
|
||||
function(feature, layer) {
|
||||
return feature;
|
||||
});
|
||||
|
||||
var deltaX = evt.coordinate[0] - this.coordinate_[0];
|
||||
var deltaY = evt.coordinate[1] - this.coordinate_[1];
|
||||
|
||||
var geometry = /** @type {ol.geom.SimpleGeometry} */
|
||||
(this.feature_.getGeometry());
|
||||
geometry.translate(deltaX, deltaY);
|
||||
|
||||
this.coordinate_[0] = evt.coordinate[0];
|
||||
this.coordinate_[1] = evt.coordinate[1];
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @param {ol.MapBrowserEvent} evt Event.
|
||||
*/
|
||||
app.Drag.prototype.handleMoveEvent = function(evt) {
|
||||
if (this.cursor_) {
|
||||
var map = evt.map;
|
||||
var feature = map.forEachFeatureAtPixel(evt.pixel,
|
||||
function(feature, layer) {
|
||||
return feature;
|
||||
});
|
||||
var element = evt.map.getTargetElement();
|
||||
if (feature) {
|
||||
if (element.style.cursor != this.cursor_) {
|
||||
this.previousCursor_ = element.style.cursor;
|
||||
element.style.cursor = this.cursor_;
|
||||
}
|
||||
} else if (this.previousCursor_ !== undefined) {
|
||||
element.style.cursor = this.previousCursor_;
|
||||
this.previousCursor_ = undefined;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @param {ol.MapBrowserEvent} evt Map browser event.
|
||||
* @return {boolean} `false` to stop the drag sequence.
|
||||
*/
|
||||
app.Drag.prototype.handleUpEvent = function(evt) {
|
||||
this.coordinate_ = null;
|
||||
this.feature_ = null;
|
||||
return false;
|
||||
};
|
||||
|
||||
|
||||
var pointFeature = new ol.Feature(new ol.geom.Point([0, 0]));
|
||||
|
||||
var lineFeature = new ol.Feature(
|
||||
new ol.geom.LineString([[-1e7, 1e6], [-1e6, 3e6]]));
|
||||
|
||||
var polygonFeature = new ol.Feature(
|
||||
new ol.geom.Polygon([[[-3e6, -1e6], [-3e6, 1e6],
|
||||
[-1e6, 1e6], [-1e6, -1e6], [-3e6, -1e6]]]));
|
||||
|
||||
|
||||
var map = new ol.Map({
|
||||
interactions: ol.interaction.defaults().extend([new app.Drag()]),
|
||||
layers: [
|
||||
new ol.layer.Tile({
|
||||
source: new ol.source.TileJSON({
|
||||
url: 'http://api.tiles.mapbox.com/v3/mapbox.geography-class.jsonp'
|
||||
})
|
||||
}),
|
||||
new ol.layer.Vector({
|
||||
source: new ol.source.Vector({
|
||||
features: [pointFeature, lineFeature, polygonFeature]
|
||||
}),
|
||||
style: new ol.style.Style({
|
||||
image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
|
||||
anchor: [0.5, 46],
|
||||
anchorXUnits: 'fraction',
|
||||
anchorYUnits: 'pixels',
|
||||
opacity: 0.95,
|
||||
src: 'data/icon.png'
|
||||
})),
|
||||
stroke: new ol.style.Stroke({
|
||||
width: 3,
|
||||
color: [255, 0, 0, 1]
|
||||
}),
|
||||
fill: new ol.style.Fill({
|
||||
color: [0, 0, 255, 0.6]
|
||||
})
|
||||
})
|
||||
})
|
||||
],
|
||||
target: 'map',
|
||||
view: new ol.View({
|
||||
center: [0, 0],
|
||||
zoom: 2
|
||||
})
|
||||
});
|
||||
52
examples_src/drag-rotate-and-zoom.html
Normal file
52
examples_src/drag-rotate-and-zoom.html
Normal file
@@ -0,0 +1,52 @@
|
||||
<!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>
|
||||
24
examples_src/drag-rotate-and-zoom.js
Normal file
24
examples_src/drag-rotate-and-zoom.js
Normal file
@@ -0,0 +1,24 @@
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.View');
|
||||
goog.require('ol.interaction');
|
||||
goog.require('ol.interaction.DragRotateAndZoom');
|
||||
goog.require('ol.layer.Tile');
|
||||
goog.require('ol.source.MapQuest');
|
||||
|
||||
|
||||
var map = new ol.Map({
|
||||
interactions: ol.interaction.defaults().extend([
|
||||
new ol.interaction.DragRotateAndZoom()
|
||||
]),
|
||||
layers: [
|
||||
new ol.layer.Tile({
|
||||
source: new ol.source.MapQuest({layer: 'sat'})
|
||||
})
|
||||
],
|
||||
renderer: exampleNS.getRendererFromQueryString(),
|
||||
target: 'map',
|
||||
view: new ol.View({
|
||||
center: [0, 0],
|
||||
zoom: 2
|
||||
})
|
||||
});
|
||||
61
examples_src/draw-and-modify-features.html
Normal file
61
examples_src/draw-and-modify-features.html
Normal file
@@ -0,0 +1,61 @@
|
||||
<!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>
|
||||
83
examples_src/draw-and-modify-features.js
Normal file
83
examples_src/draw-and-modify-features.js
Normal file
@@ -0,0 +1,83 @@
|
||||
goog.require('ol.FeatureOverlay');
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.View');
|
||||
goog.require('ol.events.condition');
|
||||
goog.require('ol.interaction.Draw');
|
||||
goog.require('ol.interaction.Modify');
|
||||
goog.require('ol.layer.Tile');
|
||||
goog.require('ol.source.MapQuest');
|
||||
goog.require('ol.style.Circle');
|
||||
goog.require('ol.style.Fill');
|
||||
goog.require('ol.style.Stroke');
|
||||
goog.require('ol.style.Style');
|
||||
|
||||
var raster = new ol.layer.Tile({
|
||||
source: new ol.source.MapQuest({layer: 'sat'})
|
||||
});
|
||||
|
||||
var map = new ol.Map({
|
||||
layers: [raster],
|
||||
target: 'map',
|
||||
view: new ol.View({
|
||||
center: [-11000000, 4600000],
|
||||
zoom: 4
|
||||
})
|
||||
});
|
||||
|
||||
// The features are not added to a regular vector layer/source,
|
||||
// but to a feature overlay which holds a collection of features.
|
||||
// This collection is passed to the modify and also the draw
|
||||
// interaction, so that both can add or modify features.
|
||||
var featureOverlay = new ol.FeatureOverlay({
|
||||
style: new ol.style.Style({
|
||||
fill: new ol.style.Fill({
|
||||
color: 'rgba(255, 255, 255, 0.2)'
|
||||
}),
|
||||
stroke: new ol.style.Stroke({
|
||||
color: '#ffcc33',
|
||||
width: 2
|
||||
}),
|
||||
image: new ol.style.Circle({
|
||||
radius: 7,
|
||||
fill: new ol.style.Fill({
|
||||
color: '#ffcc33'
|
||||
})
|
||||
})
|
||||
})
|
||||
});
|
||||
featureOverlay.setMap(map);
|
||||
|
||||
var modify = new ol.interaction.Modify({
|
||||
features: featureOverlay.getFeatures(),
|
||||
// the SHIFT key must be pressed to delete vertices, so
|
||||
// that new vertices can be drawn at the same position
|
||||
// of existing vertices
|
||||
deleteCondition: function(event) {
|
||||
return ol.events.condition.shiftKeyOnly(event) &&
|
||||
ol.events.condition.singleClick(event);
|
||||
}
|
||||
});
|
||||
map.addInteraction(modify);
|
||||
|
||||
var draw; // global so we can remove it later
|
||||
function addInteraction() {
|
||||
draw = new ol.interaction.Draw({
|
||||
features: featureOverlay.getFeatures(),
|
||||
type: /** @type {ol.geom.GeometryType} */ (typeSelect.value)
|
||||
});
|
||||
map.addInteraction(draw);
|
||||
}
|
||||
|
||||
var typeSelect = document.getElementById('type');
|
||||
|
||||
|
||||
/**
|
||||
* Let user change the geometry type.
|
||||
* @param {Event} e Change event.
|
||||
*/
|
||||
typeSelect.onchange = function(e) {
|
||||
map.removeInteraction(draw);
|
||||
addInteraction();
|
||||
};
|
||||
|
||||
addInteraction();
|
||||
62
examples_src/draw-features.html
Normal file
62
examples_src/draw-features.html
Normal file
@@ -0,0 +1,62 @@
|
||||
<!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>
|
||||
72
examples_src/draw-features.js
Normal file
72
examples_src/draw-features.js
Normal file
@@ -0,0 +1,72 @@
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.View');
|
||||
goog.require('ol.interaction.Draw');
|
||||
goog.require('ol.layer.Tile');
|
||||
goog.require('ol.layer.Vector');
|
||||
goog.require('ol.source.MapQuest');
|
||||
goog.require('ol.source.Vector');
|
||||
goog.require('ol.style.Circle');
|
||||
goog.require('ol.style.Fill');
|
||||
goog.require('ol.style.Stroke');
|
||||
goog.require('ol.style.Style');
|
||||
|
||||
var raster = new ol.layer.Tile({
|
||||
source: new ol.source.MapQuest({layer: 'sat'})
|
||||
});
|
||||
|
||||
var source = new ol.source.Vector();
|
||||
|
||||
var vector = new ol.layer.Vector({
|
||||
source: source,
|
||||
style: new ol.style.Style({
|
||||
fill: new ol.style.Fill({
|
||||
color: 'rgba(255, 255, 255, 0.2)'
|
||||
}),
|
||||
stroke: new ol.style.Stroke({
|
||||
color: '#ffcc33',
|
||||
width: 2
|
||||
}),
|
||||
image: new ol.style.Circle({
|
||||
radius: 7,
|
||||
fill: new ol.style.Fill({
|
||||
color: '#ffcc33'
|
||||
})
|
||||
})
|
||||
})
|
||||
});
|
||||
|
||||
var map = new ol.Map({
|
||||
layers: [raster, vector],
|
||||
renderer: exampleNS.getRendererFromQueryString(),
|
||||
target: 'map',
|
||||
view: new ol.View({
|
||||
center: [-11000000, 4600000],
|
||||
zoom: 4
|
||||
})
|
||||
});
|
||||
|
||||
var typeSelect = document.getElementById('type');
|
||||
|
||||
var draw; // global so we can remove it later
|
||||
function addInteraction() {
|
||||
var value = typeSelect.value;
|
||||
if (value !== 'None') {
|
||||
draw = new ol.interaction.Draw({
|
||||
source: source,
|
||||
type: /** @type {ol.geom.GeometryType} */ (value)
|
||||
});
|
||||
map.addInteraction(draw);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Let user change the geometry type.
|
||||
* @param {Event} e Change event.
|
||||
*/
|
||||
typeSelect.onchange = function(e) {
|
||||
map.removeInteraction(draw);
|
||||
addInteraction();
|
||||
};
|
||||
|
||||
addInteraction();
|
||||
51
examples_src/dynamic-data.html
Normal file
51
examples_src/dynamic-data.html
Normal file
@@ -0,0 +1,51 @@
|
||||
<!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>
|
||||
79
examples_src/dynamic-data.js
Normal file
79
examples_src/dynamic-data.js
Normal file
@@ -0,0 +1,79 @@
|
||||
goog.require('ol.Feature');
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.View');
|
||||
goog.require('ol.geom.MultiPoint');
|
||||
goog.require('ol.geom.Point');
|
||||
goog.require('ol.layer.Tile');
|
||||
goog.require('ol.source.MapQuest');
|
||||
goog.require('ol.style.Circle');
|
||||
goog.require('ol.style.Fill');
|
||||
goog.require('ol.style.Stroke');
|
||||
goog.require('ol.style.Style');
|
||||
|
||||
|
||||
var map = new ol.Map({
|
||||
layers: [
|
||||
new ol.layer.Tile({
|
||||
source: new ol.source.MapQuest({layer: 'sat'})
|
||||
})
|
||||
],
|
||||
renderer: exampleNS.getRendererFromQueryString(),
|
||||
target: 'map',
|
||||
view: new ol.View({
|
||||
center: [0, 0],
|
||||
zoom: 2
|
||||
})
|
||||
});
|
||||
|
||||
var imageStyle = new ol.style.Circle({
|
||||
radius: 5,
|
||||
snapToPixel: false,
|
||||
fill: new ol.style.Fill({color: 'yellow'}),
|
||||
stroke: new ol.style.Stroke({color: 'red', width: 1})
|
||||
});
|
||||
|
||||
var headInnerImageStyle = new ol.style.Style({
|
||||
image: new ol.style.Circle({
|
||||
radius: 2,
|
||||
snapToPixel: false,
|
||||
fill: new ol.style.Fill({color: 'blue'})
|
||||
})
|
||||
});
|
||||
|
||||
var headOuterImageStyle = new ol.style.Circle({
|
||||
radius: 5,
|
||||
snapToPixel: false,
|
||||
fill: new ol.style.Fill({color: 'black'})
|
||||
});
|
||||
|
||||
var n = 200;
|
||||
var omegaTheta = 30000; // Rotation period in ms
|
||||
var R = 7e6;
|
||||
var r = 2e6;
|
||||
var p = 2e6;
|
||||
map.on('postcompose', function(event) {
|
||||
var vectorContext = event.vectorContext;
|
||||
var frameState = event.frameState;
|
||||
var theta = 2 * Math.PI * frameState.time / omegaTheta;
|
||||
var coordinates = [];
|
||||
var i;
|
||||
for (i = 0; i < n; ++i) {
|
||||
var t = theta + 2 * Math.PI * i / n;
|
||||
var x = (R + r) * Math.cos(t) + p * Math.cos((R + r) * t / r);
|
||||
var y = (R + r) * Math.sin(t) + p * Math.sin((R + r) * t / r);
|
||||
coordinates.push([x, y]);
|
||||
}
|
||||
vectorContext.setImageStyle(imageStyle);
|
||||
vectorContext.drawMultiPointGeometry(
|
||||
new ol.geom.MultiPoint(coordinates), null);
|
||||
|
||||
var headPoint = new ol.geom.Point(coordinates[coordinates.length - 1]);
|
||||
var headFeature = new ol.Feature(headPoint);
|
||||
vectorContext.drawFeature(headFeature, headInnerImageStyle);
|
||||
|
||||
vectorContext.setImageStyle(headOuterImageStyle);
|
||||
vectorContext.drawMultiPointGeometry(headPoint, null);
|
||||
|
||||
map.render();
|
||||
});
|
||||
map.render();
|
||||
75
examples_src/earthquake-clusters.html
Normal file
75
examples_src/earthquake-clusters.html
Normal file
@@ -0,0 +1,75 @@
|
||||
<!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>
|
||||
154
examples_src/earthquake-clusters.js
Normal file
154
examples_src/earthquake-clusters.js
Normal file
@@ -0,0 +1,154 @@
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.View');
|
||||
goog.require('ol.extent');
|
||||
goog.require('ol.interaction');
|
||||
goog.require('ol.interaction.Select');
|
||||
goog.require('ol.layer.Tile');
|
||||
goog.require('ol.layer.Vector');
|
||||
goog.require('ol.source.Cluster');
|
||||
goog.require('ol.source.KML');
|
||||
goog.require('ol.source.Stamen');
|
||||
goog.require('ol.style.Circle');
|
||||
goog.require('ol.style.Fill');
|
||||
goog.require('ol.style.RegularShape');
|
||||
goog.require('ol.style.Stroke');
|
||||
goog.require('ol.style.Style');
|
||||
goog.require('ol.style.Text');
|
||||
|
||||
|
||||
var earthquakeFill = new ol.style.Fill({
|
||||
color: 'rgba(255, 153, 0, 0.8)'
|
||||
});
|
||||
var earthquakeStroke = new ol.style.Stroke({
|
||||
color: 'rgba(255, 204, 0, 0.2)',
|
||||
width: 1
|
||||
});
|
||||
var textFill = new ol.style.Fill({
|
||||
color: '#fff'
|
||||
});
|
||||
var textStroke = new ol.style.Stroke({
|
||||
color: 'rgba(0, 0, 0, 0.6)',
|
||||
width: 3
|
||||
});
|
||||
var invisibleFill = new ol.style.Fill({
|
||||
color: 'rgba(255, 255, 255, 0.01)'
|
||||
});
|
||||
|
||||
function createEarthquakeStyle(feature) {
|
||||
// 2012_Earthquakes_Mag5.kml stores the magnitude of each earthquake in a
|
||||
// standards-violating <magnitude> tag in each Placemark. We extract it
|
||||
// from the Placemark's name instead.
|
||||
var name = feature.get('name');
|
||||
var magnitude = parseFloat(name.substr(2));
|
||||
var radius = 5 + 20 * (magnitude - 5);
|
||||
|
||||
return new ol.style.Style({
|
||||
geometry: feature.getGeometry(),
|
||||
image: new ol.style.RegularShape({
|
||||
radius1: radius,
|
||||
radius2: 3,
|
||||
points: 5,
|
||||
angle: Math.PI,
|
||||
fill: earthquakeFill,
|
||||
stroke: earthquakeStroke
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
var maxFeatureCount;
|
||||
function calculateClusterInfo(resolution) {
|
||||
maxFeatureCount = 0;
|
||||
var features = vector.getSource().getFeatures();
|
||||
var feature, radius;
|
||||
for (var i = features.length - 1; i >= 0; --i) {
|
||||
feature = features[i];
|
||||
var originalFeatures = feature.get('features');
|
||||
var extent = ol.extent.createEmpty();
|
||||
for (var j = 0, jj = originalFeatures.length; j < jj; ++j) {
|
||||
ol.extent.extend(extent, originalFeatures[j].getGeometry().getExtent());
|
||||
}
|
||||
maxFeatureCount = Math.max(maxFeatureCount, jj);
|
||||
radius = 0.25 * (ol.extent.getWidth(extent) + ol.extent.getHeight(extent)) /
|
||||
resolution;
|
||||
feature.set('radius', radius);
|
||||
}
|
||||
}
|
||||
|
||||
var currentResolution;
|
||||
function styleFunction(feature, resolution) {
|
||||
if (resolution != currentResolution) {
|
||||
calculateClusterInfo(resolution);
|
||||
currentResolution = resolution;
|
||||
}
|
||||
var style;
|
||||
var size = feature.get('features').length;
|
||||
if (size > 1) {
|
||||
style = [new ol.style.Style({
|
||||
image: new ol.style.Circle({
|
||||
radius: feature.get('radius'),
|
||||
fill: new ol.style.Fill({
|
||||
color: [255, 153, 0, Math.min(0.8, 0.4 + (size / maxFeatureCount))]
|
||||
})
|
||||
}),
|
||||
text: new ol.style.Text({
|
||||
text: size.toString(),
|
||||
fill: textFill,
|
||||
stroke: textStroke
|
||||
})
|
||||
})];
|
||||
} else {
|
||||
var originalFeature = feature.get('features')[0];
|
||||
style = [createEarthquakeStyle(originalFeature)];
|
||||
}
|
||||
return style;
|
||||
}
|
||||
|
||||
function selectStyleFunction(feature, resolution) {
|
||||
var styles = [new ol.style.Style({
|
||||
image: new ol.style.Circle({
|
||||
radius: feature.get('radius'),
|
||||
fill: invisibleFill
|
||||
})
|
||||
})];
|
||||
var originalFeatures = feature.get('features');
|
||||
var originalFeature;
|
||||
for (var i = originalFeatures.length - 1; i >= 0; --i) {
|
||||
originalFeature = originalFeatures[i];
|
||||
styles.push(createEarthquakeStyle(originalFeature));
|
||||
}
|
||||
return styles;
|
||||
}
|
||||
|
||||
var vector = new ol.layer.Vector({
|
||||
source: new ol.source.Cluster({
|
||||
distance: 40,
|
||||
source: new ol.source.KML({
|
||||
extractStyles: false,
|
||||
projection: 'EPSG:3857',
|
||||
url: 'data/kml/2012_Earthquakes_Mag5.kml'
|
||||
})
|
||||
}),
|
||||
style: styleFunction
|
||||
});
|
||||
|
||||
var raster = new ol.layer.Tile({
|
||||
source: new ol.source.Stamen({
|
||||
layer: 'toner'
|
||||
})
|
||||
});
|
||||
|
||||
var map = new ol.Map({
|
||||
layers: [raster, vector],
|
||||
interactions: ol.interaction.defaults().extend([new ol.interaction.Select({
|
||||
condition: function(evt) {
|
||||
return evt.originalEvent.type == 'mousemove' ||
|
||||
evt.type == 'singleclick';
|
||||
},
|
||||
style: selectStyleFunction
|
||||
})]),
|
||||
target: 'map',
|
||||
view: new ol.View({
|
||||
center: [0, 0],
|
||||
zoom: 2
|
||||
})
|
||||
});
|
||||
51
examples_src/epsg-4326.html
Normal file
51
examples_src/epsg-4326.html
Normal file
@@ -0,0 +1,51 @@
|
||||
<!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>
|
||||
33
examples_src/epsg-4326.js
Normal file
33
examples_src/epsg-4326.js
Normal file
@@ -0,0 +1,33 @@
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.View');
|
||||
goog.require('ol.control');
|
||||
goog.require('ol.control.ScaleLine');
|
||||
goog.require('ol.layer.Tile');
|
||||
goog.require('ol.source.TileWMS');
|
||||
|
||||
|
||||
var layers = [
|
||||
new ol.layer.Tile({
|
||||
source: new ol.source.TileWMS({
|
||||
url: 'http://demo.boundlessgeo.com/geoserver/wms',
|
||||
params: {
|
||||
'LAYERS': 'ne:NE1_HR_LC_SR_W_DR'
|
||||
}
|
||||
})
|
||||
})
|
||||
];
|
||||
|
||||
var map = new ol.Map({
|
||||
controls: ol.control.defaults().extend([
|
||||
new ol.control.ScaleLine({
|
||||
units: 'degrees'
|
||||
})
|
||||
]),
|
||||
layers: layers,
|
||||
target: 'map',
|
||||
view: new ol.View({
|
||||
projection: 'EPSG:4326',
|
||||
center: [0, 0],
|
||||
zoom: 2
|
||||
})
|
||||
});
|
||||
56
examples_src/export-map.html
Normal file
56
examples_src/export-map.html
Normal file
@@ -0,0 +1,56 @@
|
||||
<!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>
|
||||
49
examples_src/export-map.js
Normal file
49
examples_src/export-map.js
Normal file
@@ -0,0 +1,49 @@
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.View');
|
||||
goog.require('ol.control');
|
||||
goog.require('ol.layer.Tile');
|
||||
goog.require('ol.layer.Vector');
|
||||
goog.require('ol.source.GeoJSON');
|
||||
goog.require('ol.source.OSM');
|
||||
|
||||
var map = new ol.Map({
|
||||
layers: [
|
||||
new ol.layer.Tile({
|
||||
source: new ol.source.OSM()
|
||||
}),
|
||||
new ol.layer.Vector({
|
||||
source: new ol.source.GeoJSON({
|
||||
projection: 'EPSG:3857',
|
||||
url: 'data/geojson/countries.geojson'
|
||||
})
|
||||
})
|
||||
],
|
||||
target: 'map',
|
||||
controls: ol.control.defaults({
|
||||
attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
|
||||
collapsible: false
|
||||
})
|
||||
}),
|
||||
view: new ol.View({
|
||||
center: [0, 0],
|
||||
zoom: 2
|
||||
})
|
||||
});
|
||||
|
||||
var exportPNGElement = document.getElementById('export-png');
|
||||
|
||||
if ('download' in exportPNGElement) {
|
||||
exportPNGElement.addEventListener('click', function(e) {
|
||||
map.once('postcompose', function(event) {
|
||||
var canvas = event.context.canvas;
|
||||
exportPNGElement.href = canvas.toDataURL('image/png');
|
||||
});
|
||||
map.renderSync();
|
||||
}, false);
|
||||
} else {
|
||||
var info = document.getElementById('no-download');
|
||||
/**
|
||||
* display error message
|
||||
*/
|
||||
info.style.display = '';
|
||||
}
|
||||
64
examples_src/fractal.html
Normal file
64
examples_src/fractal.html
Normal file
@@ -0,0 +1,64 @@
|
||||
<!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>
|
||||
124
examples_src/fractal.js
Normal file
124
examples_src/fractal.js
Normal file
@@ -0,0 +1,124 @@
|
||||
goog.require('ol.Feature');
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.View');
|
||||
goog.require('ol.geom.LineString');
|
||||
goog.require('ol.layer.Vector');
|
||||
goog.require('ol.source.Vector');
|
||||
|
||||
var radius = 10e6;
|
||||
var cos30 = Math.cos(Math.PI / 6);
|
||||
var sin30 = Math.sin(Math.PI / 6);
|
||||
var rise = radius * sin30;
|
||||
var run = radius * cos30;
|
||||
|
||||
var triangle = new ol.geom.LineString([
|
||||
[0, radius], [run, -rise], [-run, -rise], [0, radius]
|
||||
]);
|
||||
|
||||
var feature = new ol.Feature(triangle);
|
||||
|
||||
var layer = new ol.layer.Vector({
|
||||
source: new ol.source.Vector({
|
||||
features: [feature]
|
||||
})
|
||||
});
|
||||
|
||||
var map = new ol.Map({
|
||||
layers: [layer],
|
||||
target: 'map',
|
||||
view: new ol.View({
|
||||
center: [0, 0],
|
||||
zoom: 1
|
||||
})
|
||||
});
|
||||
|
||||
function makeFractal(depth) {
|
||||
var geometry = /** @type {ol.geom.LineString} */ (triangle.clone());
|
||||
var graph = coordsToGraph(geometry.getCoordinates());
|
||||
for (var i = 0; i < depth; ++i) {
|
||||
var node = graph;
|
||||
while (node.next) {
|
||||
var next = node.next;
|
||||
injectNodes(node);
|
||||
node = next;
|
||||
}
|
||||
}
|
||||
var coordinates = graphToCoords(graph);
|
||||
document.getElementById('count').innerHTML = coordinates.length;
|
||||
geometry.setCoordinates(coordinates);
|
||||
feature.setGeometry(geometry);
|
||||
}
|
||||
|
||||
function injectNodes(startNode) {
|
||||
var endNode = startNode.next;
|
||||
|
||||
var start = startNode.point;
|
||||
var end = startNode.next.point;
|
||||
var dx = end[0] - start[0];
|
||||
var dy = end[1] - start[1];
|
||||
|
||||
// first point at 1/3 along the segment
|
||||
var firstNode = {
|
||||
point: [start[0] + dx / 3, start[1] + dy / 3]
|
||||
};
|
||||
|
||||
// second point at peak of _/\_
|
||||
var r = Math.sqrt(dx * dx + dy * dy) / (2 * cos30);
|
||||
var a = Math.atan2(dy, dx) + Math.PI / 6;
|
||||
var secondNode = {
|
||||
point: [start[0] + r * Math.cos(a), start[1] + r * Math.sin(a)]
|
||||
};
|
||||
|
||||
// third point at 2/3 along the segment
|
||||
var thirdNode = {
|
||||
point: [end[0] - dx / 3, end[1] - dy / 3]
|
||||
};
|
||||
|
||||
startNode.next = firstNode;
|
||||
firstNode.next = secondNode;
|
||||
secondNode.next = thirdNode;
|
||||
thirdNode.next = endNode;
|
||||
}
|
||||
|
||||
|
||||
function coordsToGraph(coordinates) {
|
||||
var graph = {
|
||||
point: coordinates[0]
|
||||
};
|
||||
var length = coordinates.length;
|
||||
for (var level = 0, node = graph; level < length - 1; ++level) {
|
||||
node.next = {
|
||||
point: coordinates[level + 1]
|
||||
};
|
||||
node = node.next;
|
||||
}
|
||||
return graph;
|
||||
}
|
||||
|
||||
function graphToCoords(graph) {
|
||||
var coordinates = [graph.point];
|
||||
for (var node = graph, i = 1; node.next; node = node.next, ++i) {
|
||||
coordinates[i] = node.next.point;
|
||||
}
|
||||
return coordinates;
|
||||
}
|
||||
|
||||
var depthInput = document.getElementById('depth');
|
||||
|
||||
function update() {
|
||||
makeFractal(Number(depthInput.value));
|
||||
}
|
||||
|
||||
var updateTimer;
|
||||
|
||||
|
||||
/**
|
||||
* Regenerate fractal on depth change. Change events are debounced so updates
|
||||
* only occur every 200ms.
|
||||
*/
|
||||
depthInput.onchange = function() {
|
||||
window.clearTimeout(updateTimer);
|
||||
updateTimer = window.setTimeout(update, 200);
|
||||
};
|
||||
|
||||
update();
|
||||
64
examples_src/full-screen-drag-rotate-and-zoom.html
Normal file
64
examples_src/full-screen-drag-rotate-and-zoom.html
Normal file
@@ -0,0 +1,64 @@
|
||||
<!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>
|
||||
33
examples_src/full-screen-drag-rotate-and-zoom.js
Normal file
33
examples_src/full-screen-drag-rotate-and-zoom.js
Normal file
@@ -0,0 +1,33 @@
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.View');
|
||||
goog.require('ol.control');
|
||||
goog.require('ol.control.FullScreen');
|
||||
goog.require('ol.interaction');
|
||||
goog.require('ol.interaction.DragRotateAndZoom');
|
||||
goog.require('ol.layer.Tile');
|
||||
goog.require('ol.source.BingMaps');
|
||||
|
||||
|
||||
var map = new ol.Map({
|
||||
controls: ol.control.defaults().extend([
|
||||
new ol.control.FullScreen()
|
||||
]),
|
||||
interactions: ol.interaction.defaults().extend([
|
||||
new ol.interaction.DragRotateAndZoom()
|
||||
]),
|
||||
layers: [
|
||||
new ol.layer.Tile({
|
||||
source: new ol.source.BingMaps({
|
||||
key: 'Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3',
|
||||
imagerySet: 'Aerial'
|
||||
})
|
||||
})
|
||||
],
|
||||
// Use the canvas renderer because it's currently the fastest
|
||||
target: 'map',
|
||||
view: new ol.View({
|
||||
center: [-33519607, 5616436],
|
||||
rotation: -Math.PI / 8,
|
||||
zoom: 8
|
||||
})
|
||||
});
|
||||
70
examples_src/full-screen.html
Normal file
70
examples_src/full-screen.html
Normal file
@@ -0,0 +1,70 @@
|
||||
<!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>
|
||||
29
examples_src/full-screen.js
Normal file
29
examples_src/full-screen.js
Normal file
@@ -0,0 +1,29 @@
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.View');
|
||||
goog.require('ol.control');
|
||||
goog.require('ol.control.FullScreen');
|
||||
goog.require('ol.layer.Tile');
|
||||
goog.require('ol.source.BingMaps');
|
||||
|
||||
|
||||
var view = new ol.View({
|
||||
center: [-9101767, 2822912],
|
||||
zoom: 14
|
||||
});
|
||||
|
||||
var map = new ol.Map({
|
||||
controls: ol.control.defaults().extend([
|
||||
new ol.control.FullScreen()
|
||||
]),
|
||||
layers: [
|
||||
new ol.layer.Tile({
|
||||
source: new ol.source.BingMaps({
|
||||
key: 'Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3',
|
||||
imagerySet: 'Aerial'
|
||||
})
|
||||
})
|
||||
],
|
||||
renderer: exampleNS.getRendererFromQueryString(),
|
||||
target: 'map',
|
||||
view: view
|
||||
});
|
||||
51
examples_src/geojson.html
Normal file
51
examples_src/geojson.html
Normal file
@@ -0,0 +1,51 @@
|
||||
<!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>
|
||||
201
examples_src/geojson.js
Normal file
201
examples_src/geojson.js
Normal file
@@ -0,0 +1,201 @@
|
||||
goog.require('ol.Feature');
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.View');
|
||||
goog.require('ol.control');
|
||||
goog.require('ol.geom.Circle');
|
||||
goog.require('ol.layer.Tile');
|
||||
goog.require('ol.layer.Vector');
|
||||
goog.require('ol.source.GeoJSON');
|
||||
goog.require('ol.source.OSM');
|
||||
goog.require('ol.style.Circle');
|
||||
goog.require('ol.style.Fill');
|
||||
goog.require('ol.style.Stroke');
|
||||
goog.require('ol.style.Style');
|
||||
|
||||
|
||||
var image = new ol.style.Circle({
|
||||
radius: 5,
|
||||
fill: null,
|
||||
stroke: new ol.style.Stroke({color: 'red', width: 1})
|
||||
});
|
||||
|
||||
var styles = {
|
||||
'Point': [new ol.style.Style({
|
||||
image: image
|
||||
})],
|
||||
'LineString': [new ol.style.Style({
|
||||
stroke: new ol.style.Stroke({
|
||||
color: 'green',
|
||||
width: 1
|
||||
})
|
||||
})],
|
||||
'MultiLineString': [new ol.style.Style({
|
||||
stroke: new ol.style.Stroke({
|
||||
color: 'green',
|
||||
width: 1
|
||||
})
|
||||
})],
|
||||
'MultiPoint': [new ol.style.Style({
|
||||
image: image
|
||||
})],
|
||||
'MultiPolygon': [new ol.style.Style({
|
||||
stroke: new ol.style.Stroke({
|
||||
color: 'yellow',
|
||||
width: 1
|
||||
}),
|
||||
fill: new ol.style.Fill({
|
||||
color: 'rgba(255, 255, 0, 0.1)'
|
||||
})
|
||||
})],
|
||||
'Polygon': [new ol.style.Style({
|
||||
stroke: new ol.style.Stroke({
|
||||
color: 'blue',
|
||||
lineDash: [4],
|
||||
width: 3
|
||||
}),
|
||||
fill: new ol.style.Fill({
|
||||
color: 'rgba(0, 0, 255, 0.1)'
|
||||
})
|
||||
})],
|
||||
'GeometryCollection': [new ol.style.Style({
|
||||
stroke: new ol.style.Stroke({
|
||||
color: 'magenta',
|
||||
width: 2
|
||||
}),
|
||||
fill: new ol.style.Fill({
|
||||
color: 'magenta'
|
||||
}),
|
||||
image: new ol.style.Circle({
|
||||
radius: 10,
|
||||
fill: null,
|
||||
stroke: new ol.style.Stroke({
|
||||
color: 'magenta'
|
||||
})
|
||||
})
|
||||
})],
|
||||
'Circle': [new ol.style.Style({
|
||||
stroke: new ol.style.Stroke({
|
||||
color: 'red',
|
||||
width: 2
|
||||
}),
|
||||
fill: new ol.style.Fill({
|
||||
color: 'rgba(255,0,0,0.2)'
|
||||
})
|
||||
})]
|
||||
};
|
||||
|
||||
var styleFunction = function(feature, resolution) {
|
||||
return styles[feature.getGeometry().getType()];
|
||||
};
|
||||
|
||||
var vectorSource = new ol.source.GeoJSON(
|
||||
/** @type {olx.source.GeoJSONOptions} */ ({
|
||||
object: {
|
||||
'type': 'FeatureCollection',
|
||||
'crs': {
|
||||
'type': 'name',
|
||||
'properties': {
|
||||
'name': 'EPSG:3857'
|
||||
}
|
||||
},
|
||||
'features': [
|
||||
{
|
||||
'type': 'Feature',
|
||||
'geometry': {
|
||||
'type': 'Point',
|
||||
'coordinates': [0, 0]
|
||||
}
|
||||
},
|
||||
{
|
||||
'type': 'Feature',
|
||||
'geometry': {
|
||||
'type': 'LineString',
|
||||
'coordinates': [[4e6, -2e6], [8e6, 2e6]]
|
||||
}
|
||||
},
|
||||
{
|
||||
'type': 'Feature',
|
||||
'geometry': {
|
||||
'type': 'LineString',
|
||||
'coordinates': [[4e6, 2e6], [8e6, -2e6]]
|
||||
}
|
||||
},
|
||||
{
|
||||
'type': 'Feature',
|
||||
'geometry': {
|
||||
'type': 'Polygon',
|
||||
'coordinates': [[[-5e6, -1e6], [-4e6, 1e6], [-3e6, -1e6]]]
|
||||
}
|
||||
},
|
||||
{
|
||||
'type': 'Feature',
|
||||
'geometry': {
|
||||
'type': 'MultiLineString',
|
||||
'coordinates': [
|
||||
[[-1e6, -7.5e5], [-1e6, 7.5e5]],
|
||||
[[1e6, -7.5e5], [1e6, 7.5e5]],
|
||||
[[-7.5e5, -1e6], [7.5e5, -1e6]],
|
||||
[[-7.5e5, 1e6], [7.5e5, 1e6]]
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
'type': 'Feature',
|
||||
'geometry': {
|
||||
'type': 'MultiPolygon',
|
||||
'coordinates': [
|
||||
[[[-5e6, 6e6], [-5e6, 8e6], [-3e6, 8e6], [-3e6, 6e6]]],
|
||||
[[[-2e6, 6e6], [-2e6, 8e6], [0, 8e6], [0, 6e6]]],
|
||||
[[[1e6, 6e6], [1e6, 8e6], [3e6, 8e6], [3e6, 6e6]]]
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
'type': 'Feature',
|
||||
'geometry': {
|
||||
'type': 'GeometryCollection',
|
||||
'geometries': [
|
||||
{
|
||||
'type': 'LineString',
|
||||
'coordinates': [[-5e6, -5e6], [0, -5e6]]
|
||||
},
|
||||
{
|
||||
'type': 'Point',
|
||||
'coordinates': [4e6, -5e6]
|
||||
},
|
||||
{
|
||||
'type': 'Polygon',
|
||||
'coordinates': [[[1e6, -6e6], [2e6, -4e6], [3e6, -6e6]]]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}));
|
||||
|
||||
vectorSource.addFeature(new ol.Feature(new ol.geom.Circle([5e6, 7e6], 1e6)));
|
||||
|
||||
var vectorLayer = new ol.layer.Vector({
|
||||
source: vectorSource,
|
||||
style: styleFunction
|
||||
});
|
||||
|
||||
var map = new ol.Map({
|
||||
layers: [
|
||||
new ol.layer.Tile({
|
||||
source: new ol.source.OSM()
|
||||
}),
|
||||
vectorLayer
|
||||
],
|
||||
target: 'map',
|
||||
controls: ol.control.defaults({
|
||||
attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
|
||||
collapsible: false
|
||||
})
|
||||
}),
|
||||
view: new ol.View({
|
||||
center: [0, 0],
|
||||
zoom: 2
|
||||
})
|
||||
});
|
||||
53
examples_src/geolocation-orientation.html
Normal file
53
examples_src/geolocation-orientation.html
Normal file
@@ -0,0 +1,53 @@
|
||||
<!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>Mobile Geolocation Tracking with Orientation</title>
|
||||
<style type="text/css">
|
||||
html, body, .map {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
#info {
|
||||
position: absolute;
|
||||
font-size: 0.7em;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
background-color: lightgrey;
|
||||
padding: 4px;
|
||||
}
|
||||
.button {
|
||||
position: absolute;
|
||||
bottom: 40px;
|
||||
left: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="map" class="map"></div>
|
||||
<div id="info"></div>
|
||||
<img id="geolocation_marker" src="data/geolocation_marker.png" />
|
||||
<div class="button">
|
||||
<button id="geolocate">Geolocate Me!</button>
|
||||
<button id="simulate">Simulate</button>
|
||||
</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-orientation" type="text/javascript"></script>
|
||||
|
||||
<div style="display: none;">
|
||||
<div id="title">Geolocation tracking with orientation example</div>
|
||||
<div id="shortdesc">Example of a geolocated and oriented map.</div>
|
||||
<div id="tags">fullscreen, geolocation, orientation, mobile</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
229
examples_src/geolocation-orientation.js
Normal file
229
examples_src/geolocation-orientation.js
Normal file
@@ -0,0 +1,229 @@
|
||||
goog.require('ol.Geolocation');
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.Overlay');
|
||||
goog.require('ol.View');
|
||||
goog.require('ol.control');
|
||||
goog.require('ol.geom.LineString');
|
||||
goog.require('ol.layer.Tile');
|
||||
goog.require('ol.proj');
|
||||
goog.require('ol.source.OSM');
|
||||
|
||||
// creating the view
|
||||
var view = new ol.View({
|
||||
center: ol.proj.fromLonLat([5.8713, 45.6452]),
|
||||
zoom: 19
|
||||
});
|
||||
|
||||
// creating the map
|
||||
var map = new ol.Map({
|
||||
layers: [
|
||||
new ol.layer.Tile({
|
||||
source: new ol.source.OSM()
|
||||
})
|
||||
],
|
||||
target: 'map',
|
||||
controls: ol.control.defaults({
|
||||
attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
|
||||
collapsible: false
|
||||
})
|
||||
}),
|
||||
view: view
|
||||
});
|
||||
|
||||
// Geolocation marker
|
||||
var markerEl = document.getElementById('geolocation_marker');
|
||||
var marker = new ol.Overlay({
|
||||
positioning: 'center-center',
|
||||
element: markerEl,
|
||||
stopEvent: false
|
||||
});
|
||||
map.addOverlay(marker);
|
||||
|
||||
// LineString to store the different geolocation positions. This LineString
|
||||
// is time aware.
|
||||
// The Z dimension is actually used to store the rotation (heading).
|
||||
var positions = new ol.geom.LineString([],
|
||||
/** @type {ol.geom.GeometryLayout} */ ('XYZM'));
|
||||
|
||||
// Geolocation Control
|
||||
var geolocation = new ol.Geolocation(/** @type {olx.GeolocationOptions} */ ({
|
||||
projection: view.getProjection(),
|
||||
trackingOptions: {
|
||||
maximumAge: 10000,
|
||||
enableHighAccuracy: true,
|
||||
timeout: 600000
|
||||
}
|
||||
}));
|
||||
|
||||
var deltaMean = 500; // the geolocation sampling period mean in ms
|
||||
|
||||
// Listen to position changes
|
||||
geolocation.on('change', function(evt) {
|
||||
var position = geolocation.getPosition();
|
||||
var accuracy = geolocation.getAccuracy();
|
||||
var heading = geolocation.getHeading() || 0;
|
||||
var speed = geolocation.getSpeed() || 0;
|
||||
var m = Date.now();
|
||||
|
||||
addPosition(position, heading, m, speed);
|
||||
|
||||
var coords = positions.getCoordinates();
|
||||
var len = coords.length;
|
||||
if (len >= 2) {
|
||||
deltaMean = (coords[len - 1][3] - coords[0][3]) / (len - 1);
|
||||
}
|
||||
|
||||
var html = [
|
||||
'Position: ' + position[0].toFixed(2) + ', ' + position[1].toFixed(2),
|
||||
'Accuracy: ' + accuracy,
|
||||
'Heading: ' + Math.round(radToDeg(heading)) + '°',
|
||||
'Speed: ' + (speed * 3.6).toFixed(1) + ' km/h',
|
||||
'Delta: ' + Math.round(deltaMean) + 'ms'
|
||||
].join('<br />');
|
||||
document.getElementById('info').innerHTML = html;
|
||||
});
|
||||
|
||||
geolocation.on('error', function() {
|
||||
alert('geolocation error');
|
||||
// FIXME we should remove the coordinates in positions
|
||||
});
|
||||
|
||||
// convert radians to degrees
|
||||
function radToDeg(rad) {
|
||||
return rad * 360 / (Math.PI * 2);
|
||||
}
|
||||
// convert degrees to radians
|
||||
function degToRad(deg) {
|
||||
return deg * Math.PI * 2 / 360;
|
||||
}
|
||||
// modulo for negative values
|
||||
function mod(n) {
|
||||
return ((n % (2 * Math.PI)) + (2 * Math.PI)) % (2 * Math.PI);
|
||||
}
|
||||
|
||||
function addPosition(position, heading, m, speed) {
|
||||
var x = position[0];
|
||||
var y = position[1];
|
||||
var fCoords = positions.getCoordinates();
|
||||
var previous = fCoords[fCoords.length - 1];
|
||||
var prevHeading = previous && previous[2];
|
||||
if (prevHeading) {
|
||||
var headingDiff = heading - mod(prevHeading);
|
||||
|
||||
// force the rotation change to be less than 180°
|
||||
if (Math.abs(headingDiff) > Math.PI) {
|
||||
var sign = (headingDiff >= 0) ? 1 : -1;
|
||||
headingDiff = - sign * (2 * Math.PI - Math.abs(headingDiff));
|
||||
}
|
||||
heading = prevHeading + headingDiff;
|
||||
}
|
||||
positions.appendCoordinate([x, y, heading, m]);
|
||||
|
||||
// only keep the 20 last coordinates
|
||||
positions.setCoordinates(positions.getCoordinates().slice(-20));
|
||||
|
||||
// FIXME use speed instead
|
||||
if (heading && speed) {
|
||||
markerEl.src = 'data/geolocation_marker_heading.png';
|
||||
} else {
|
||||
markerEl.src = 'data/geolocation_marker.png';
|
||||
}
|
||||
}
|
||||
|
||||
var previousM = 0;
|
||||
// change center and rotation before render
|
||||
map.beforeRender(function(map, frameState) {
|
||||
if (frameState !== null) {
|
||||
// use sampling period to get a smooth transition
|
||||
var m = frameState.time - deltaMean * 1.5;
|
||||
m = Math.max(m, previousM);
|
||||
previousM = m;
|
||||
// interpolate position along positions LineString
|
||||
var c = positions.getCoordinateAtM(m, true);
|
||||
var view = frameState.viewState;
|
||||
if (c) {
|
||||
view.center = getCenterWithHeading(c, -c[2], view.resolution);
|
||||
view.rotation = -c[2];
|
||||
marker.setPosition(c);
|
||||
}
|
||||
}
|
||||
return true; // Force animation to continue
|
||||
});
|
||||
|
||||
// recenters the view by putting the given coordinates at 3/4 from the top or
|
||||
// the screen
|
||||
function getCenterWithHeading(position, rotation, resolution) {
|
||||
var size = map.getSize();
|
||||
var height = size[1];
|
||||
|
||||
return [
|
||||
position[0] - Math.sin(rotation) * height * resolution * 1 / 4,
|
||||
position[1] + Math.cos(rotation) * height * resolution * 1 / 4
|
||||
];
|
||||
}
|
||||
|
||||
// postcompose callback
|
||||
function render() {
|
||||
map.render();
|
||||
}
|
||||
|
||||
// geolocate device
|
||||
var geolocateBtn = document.getElementById('geolocate');
|
||||
geolocateBtn.addEventListener('click', function() {
|
||||
geolocation.setTracking(true); // Start position tracking
|
||||
|
||||
map.on('postcompose', render);
|
||||
map.render();
|
||||
|
||||
disableButtons();
|
||||
}, false);
|
||||
|
||||
// simulate device move
|
||||
var simulationData;
|
||||
$.getJSON('data/geolocation-orientation.json', function(data) {
|
||||
simulationData = data.data;
|
||||
});
|
||||
var simulateBtn = document.getElementById('simulate');
|
||||
simulateBtn.addEventListener('click', function() {
|
||||
var coordinates = simulationData;
|
||||
|
||||
var first = coordinates.shift();
|
||||
simulatePositionChange(first);
|
||||
|
||||
var prevDate = first.timestamp;
|
||||
function geolocate() {
|
||||
var position = coordinates.shift();
|
||||
if (!position) {
|
||||
return;
|
||||
}
|
||||
var newDate = position.timestamp;
|
||||
simulatePositionChange(position);
|
||||
window.setTimeout(function() {
|
||||
prevDate = newDate;
|
||||
geolocate();
|
||||
}, (newDate - prevDate) / 0.5);
|
||||
}
|
||||
geolocate();
|
||||
|
||||
map.on('postcompose', render);
|
||||
map.render();
|
||||
|
||||
disableButtons();
|
||||
}, false);
|
||||
|
||||
function simulatePositionChange(position) {
|
||||
var coords = position.coords;
|
||||
geolocation.set('accuracy', coords.accuracy);
|
||||
geolocation.set('heading', degToRad(coords.heading));
|
||||
var position_ = [coords.longitude, coords.latitude];
|
||||
var projectedPosition = ol.proj.transform(position_, 'EPSG:4326',
|
||||
'EPSG:3857');
|
||||
geolocation.set('position', projectedPosition);
|
||||
geolocation.set('speed', coords.speed);
|
||||
geolocation.changed();
|
||||
}
|
||||
|
||||
function disableButtons() {
|
||||
geolocateBtn.disabled = 'disabled';
|
||||
simulateBtn.disabled = 'disabled';
|
||||
}
|
||||
61
examples_src/geolocation.html
Normal file
61
examples_src/geolocation.html
Normal file
@@ -0,0 +1,61 @@
|
||||
<!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>
|
||||
84
examples_src/geolocation.js
Normal file
84
examples_src/geolocation.js
Normal file
@@ -0,0 +1,84 @@
|
||||
goog.require('ol.Feature');
|
||||
goog.require('ol.FeatureOverlay');
|
||||
goog.require('ol.Geolocation');
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.View');
|
||||
goog.require('ol.control');
|
||||
goog.require('ol.dom.Input');
|
||||
goog.require('ol.geom.Point');
|
||||
goog.require('ol.layer.Tile');
|
||||
goog.require('ol.source.OSM');
|
||||
goog.require('ol.style.Circle');
|
||||
goog.require('ol.style.Fill');
|
||||
goog.require('ol.style.Stroke');
|
||||
goog.require('ol.style.Style');
|
||||
|
||||
var view = new ol.View({
|
||||
center: [0, 0],
|
||||
zoom: 2
|
||||
});
|
||||
|
||||
var map = new ol.Map({
|
||||
layers: [
|
||||
new ol.layer.Tile({
|
||||
source: new ol.source.OSM()
|
||||
})
|
||||
],
|
||||
target: 'map',
|
||||
controls: ol.control.defaults({
|
||||
attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
|
||||
collapsible: false
|
||||
})
|
||||
}),
|
||||
view: view
|
||||
});
|
||||
|
||||
var geolocation = new ol.Geolocation({
|
||||
projection: view.getProjection()
|
||||
});
|
||||
|
||||
var track = new ol.dom.Input(document.getElementById('track'));
|
||||
track.bindTo('checked', geolocation, 'tracking');
|
||||
|
||||
// update the HTML page when the position changes.
|
||||
geolocation.on('change', function() {
|
||||
$('#accuracy').text(geolocation.getAccuracy() + ' [m]');
|
||||
$('#altitude').text(geolocation.getAltitude() + ' [m]');
|
||||
$('#altitudeAccuracy').text(geolocation.getAltitudeAccuracy() + ' [m]');
|
||||
$('#heading').text(geolocation.getHeading() + ' [rad]');
|
||||
$('#speed').text(geolocation.getSpeed() + ' [m/s]');
|
||||
});
|
||||
|
||||
// handle geolocation error.
|
||||
geolocation.on('error', function(error) {
|
||||
var info = document.getElementById('info');
|
||||
info.innerHTML = error.message;
|
||||
info.style.display = '';
|
||||
});
|
||||
|
||||
var accuracyFeature = new ol.Feature();
|
||||
accuracyFeature.bindTo('geometry', geolocation, 'accuracyGeometry');
|
||||
|
||||
var positionFeature = new ol.Feature();
|
||||
positionFeature.setStyle(new ol.style.Style({
|
||||
image: new ol.style.Circle({
|
||||
radius: 6,
|
||||
fill: new ol.style.Fill({
|
||||
color: '#3399CC'
|
||||
}),
|
||||
stroke: new ol.style.Stroke({
|
||||
color: '#fff',
|
||||
width: 2
|
||||
})
|
||||
})
|
||||
}));
|
||||
|
||||
positionFeature.bindTo('geometry', geolocation, 'position')
|
||||
.transform(function() {}, function(coordinates) {
|
||||
return coordinates ? new ol.geom.Point(coordinates) : null;
|
||||
});
|
||||
|
||||
var featuresOverlay = new ol.FeatureOverlay({
|
||||
map: map,
|
||||
features: [accuracyFeature, positionFeature]
|
||||
});
|
||||
59
examples_src/getfeatureinfo-image.html
Normal file
59
examples_src/getfeatureinfo-image.html
Normal file
@@ -0,0 +1,59 @@
|
||||
<!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>
|
||||
51
examples_src/getfeatureinfo-image.js
Normal file
51
examples_src/getfeatureinfo-image.js
Normal file
@@ -0,0 +1,51 @@
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.View');
|
||||
goog.require('ol.layer.Image');
|
||||
goog.require('ol.source.ImageWMS');
|
||||
|
||||
|
||||
var wmsSource = new ol.source.ImageWMS({
|
||||
url: 'http://demo.boundlessgeo.com/geoserver/wms',
|
||||
params: {'LAYERS': 'ne:ne'},
|
||||
serverType: 'geoserver',
|
||||
crossOrigin: ''
|
||||
});
|
||||
|
||||
var wmsLayer = new ol.layer.Image({
|
||||
source: wmsSource
|
||||
});
|
||||
|
||||
var view = new ol.View({
|
||||
center: [0, 0],
|
||||
zoom: 1
|
||||
});
|
||||
|
||||
var map = new ol.Map({
|
||||
renderer: exampleNS.getRendererFromQueryString(),
|
||||
layers: [wmsLayer],
|
||||
target: 'map',
|
||||
view: view
|
||||
});
|
||||
|
||||
map.on('singleclick', function(evt) {
|
||||
document.getElementById('info').innerHTML = '';
|
||||
var viewResolution = /** @type {number} */ (view.getResolution());
|
||||
var url = wmsSource.getGetFeatureInfoUrl(
|
||||
evt.coordinate, viewResolution, 'EPSG:3857',
|
||||
{'INFO_FORMAT': 'text/html'});
|
||||
if (url) {
|
||||
document.getElementById('info').innerHTML =
|
||||
'<iframe seamless src="' + url + '"></iframe>';
|
||||
}
|
||||
});
|
||||
|
||||
map.on('pointermove', function(evt) {
|
||||
if (evt.dragging) {
|
||||
return;
|
||||
}
|
||||
var pixel = map.getEventPixel(evt.originalEvent);
|
||||
var hit = map.forEachLayerAtPixel(pixel, function(layer) {
|
||||
return true;
|
||||
});
|
||||
map.getTargetElement().style.cursor = hit ? 'pointer' : '';
|
||||
});
|
||||
59
examples_src/getfeatureinfo-tile.html
Normal file
59
examples_src/getfeatureinfo-tile.html
Normal file
@@ -0,0 +1,59 @@
|
||||
<!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>
|
||||
51
examples_src/getfeatureinfo-tile.js
Normal file
51
examples_src/getfeatureinfo-tile.js
Normal file
@@ -0,0 +1,51 @@
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.View');
|
||||
goog.require('ol.layer.Tile');
|
||||
goog.require('ol.source.TileWMS');
|
||||
|
||||
|
||||
var wmsSource = new ol.source.TileWMS({
|
||||
url: 'http://demo.boundlessgeo.com/geoserver/wms',
|
||||
params: {'LAYERS': 'ne:ne'},
|
||||
serverType: 'geoserver',
|
||||
crossOrigin: ''
|
||||
});
|
||||
|
||||
var wmsLayer = new ol.layer.Tile({
|
||||
source: wmsSource
|
||||
});
|
||||
|
||||
var view = new ol.View({
|
||||
center: [0, 0],
|
||||
zoom: 1
|
||||
});
|
||||
|
||||
var map = new ol.Map({
|
||||
renderer: exampleNS.getRendererFromQueryString(),
|
||||
layers: [wmsLayer],
|
||||
target: 'map',
|
||||
view: view
|
||||
});
|
||||
|
||||
map.on('singleclick', function(evt) {
|
||||
document.getElementById('info').innerHTML = '';
|
||||
var viewResolution = /** @type {number} */ (view.getResolution());
|
||||
var url = wmsSource.getGetFeatureInfoUrl(
|
||||
evt.coordinate, viewResolution, 'EPSG:3857',
|
||||
{'INFO_FORMAT': 'text/html'});
|
||||
if (url) {
|
||||
document.getElementById('info').innerHTML =
|
||||
'<iframe seamless src="' + url + '"></iframe>';
|
||||
}
|
||||
});
|
||||
|
||||
map.on('pointermove', function(evt) {
|
||||
if (evt.dragging) {
|
||||
return;
|
||||
}
|
||||
var pixel = map.getEventPixel(evt.originalEvent);
|
||||
var hit = map.forEachLayerAtPixel(pixel, function(layer) {
|
||||
return true;
|
||||
});
|
||||
map.getTargetElement().style.cursor = hit ? 'pointer' : '';
|
||||
});
|
||||
62
examples_src/gpx.html
Normal file
62
examples_src/gpx.html
Normal file
@@ -0,0 +1,62 @@
|
||||
<!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>
|
||||
123
examples_src/gpx.js
Normal file
123
examples_src/gpx.js
Normal file
@@ -0,0 +1,123 @@
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.View');
|
||||
goog.require('ol.format.GPX');
|
||||
goog.require('ol.layer.Tile');
|
||||
goog.require('ol.layer.Vector');
|
||||
goog.require('ol.proj');
|
||||
goog.require('ol.source.BingMaps');
|
||||
goog.require('ol.source.GPX');
|
||||
goog.require('ol.style.Circle');
|
||||
goog.require('ol.style.Fill');
|
||||
goog.require('ol.style.Stroke');
|
||||
goog.require('ol.style.Style');
|
||||
|
||||
var projection = ol.proj.get('EPSG:3857');
|
||||
|
||||
var raster = new ol.layer.Tile({
|
||||
source: new ol.source.BingMaps({
|
||||
imagerySet: 'Aerial',
|
||||
key: 'Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3'
|
||||
})
|
||||
});
|
||||
|
||||
var style = {
|
||||
'Point': [new ol.style.Style({
|
||||
image: new ol.style.Circle({
|
||||
fill: new ol.style.Fill({
|
||||
color: 'rgba(255,255,0,0.4)'
|
||||
}),
|
||||
radius: 5,
|
||||
stroke: new ol.style.Stroke({
|
||||
color: '#ff0',
|
||||
width: 1
|
||||
})
|
||||
})
|
||||
})],
|
||||
'LineString': [new ol.style.Style({
|
||||
stroke: new ol.style.Stroke({
|
||||
color: '#f00',
|
||||
width: 3
|
||||
})
|
||||
})],
|
||||
'MultiLineString': [new ol.style.Style({
|
||||
stroke: new ol.style.Stroke({
|
||||
color: '#0f0',
|
||||
width: 3
|
||||
})
|
||||
})]
|
||||
};
|
||||
|
||||
var vector = new ol.layer.Vector({
|
||||
source: new ol.source.GPX({
|
||||
projection: projection,
|
||||
url: 'data/gpx/fells_loop.gpx'
|
||||
}),
|
||||
style: function(feature, resolution) {
|
||||
return style[feature.getGeometry().getType()];
|
||||
}
|
||||
});
|
||||
|
||||
var map = new ol.Map({
|
||||
layers: [raster, vector],
|
||||
target: document.getElementById('map'),
|
||||
view: new ol.View({
|
||||
center: [-7916041.528716288, 5228379.045749711],
|
||||
zoom: 12
|
||||
})
|
||||
});
|
||||
|
||||
var displayFeatureInfo = function(pixel) {
|
||||
var features = [];
|
||||
map.forEachFeatureAtPixel(pixel, function(feature, layer) {
|
||||
features.push(feature);
|
||||
});
|
||||
if (features.length > 0) {
|
||||
var info = [];
|
||||
var i, ii;
|
||||
for (i = 0, ii = features.length; i < ii; ++i) {
|
||||
info.push(features[i].get('desc'));
|
||||
}
|
||||
document.getElementById('info').innerHTML = info.join(', ') || '(unknown)';
|
||||
map.getTarget().style.cursor = 'pointer';
|
||||
} else {
|
||||
document.getElementById('info').innerHTML = ' ';
|
||||
map.getTarget().style.cursor = '';
|
||||
}
|
||||
};
|
||||
|
||||
map.on('pointermove', function(evt) {
|
||||
if (evt.dragging) {
|
||||
return;
|
||||
}
|
||||
var pixel = map.getEventPixel(evt.originalEvent);
|
||||
displayFeatureInfo(pixel);
|
||||
});
|
||||
|
||||
map.on('click', function(evt) {
|
||||
displayFeatureInfo(evt.pixel);
|
||||
});
|
||||
|
||||
var exportGPXElement = document.getElementById('export-gpx');
|
||||
if ('download' in exportGPXElement) {
|
||||
var vectorSource = vector.getSource();
|
||||
exportGPXElement.addEventListener('click', function(e) {
|
||||
if (!exportGPXElement.href) {
|
||||
var features = [];
|
||||
vectorSource.forEachFeature(function(feature) {
|
||||
var clone = feature.clone();
|
||||
clone.getGeometry().transform(projection, 'EPSG:4326');
|
||||
features.push(clone);
|
||||
});
|
||||
var string = new ol.format.GPX().writeFeatures(features);
|
||||
var base64 = exampleNS.strToBase64(string);
|
||||
exportGPXElement.href =
|
||||
'data:text/gpx+xml;base64,' + base64;
|
||||
}
|
||||
}, false);
|
||||
} else {
|
||||
var info = document.getElementById('no-download');
|
||||
/**
|
||||
* display error message
|
||||
*/
|
||||
info.style.display = '';
|
||||
}
|
||||
51
examples_src/graticule.html
Normal file
51
examples_src/graticule.html
Normal file
@@ -0,0 +1,51 @@
|
||||
<!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>
|
||||
33
examples_src/graticule.js
Normal file
33
examples_src/graticule.js
Normal file
@@ -0,0 +1,33 @@
|
||||
goog.require('ol.Graticule');
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.View');
|
||||
goog.require('ol.layer.Tile');
|
||||
goog.require('ol.proj');
|
||||
goog.require('ol.source.OSM');
|
||||
goog.require('ol.style.Stroke');
|
||||
|
||||
|
||||
var map = new ol.Map({
|
||||
layers: [
|
||||
new ol.layer.Tile({
|
||||
source: new ol.source.OSM()
|
||||
})
|
||||
],
|
||||
renderer: 'canvas',
|
||||
target: 'map',
|
||||
view: new ol.View({
|
||||
center: ol.proj.fromLonLat([4.8, 47.75]),
|
||||
zoom: 5
|
||||
})
|
||||
});
|
||||
|
||||
// Create the graticule component
|
||||
var graticule = new ol.Graticule({
|
||||
// the style to use for the lines, optional.
|
||||
strokeStyle: new ol.style.Stroke({
|
||||
color: 'rgba(255,120,0,0.9)',
|
||||
width: 2,
|
||||
lineDash: [0.5, 4]
|
||||
})
|
||||
});
|
||||
graticule.setMap(map);
|
||||
61
examples_src/heatmap-earthquakes.html
Normal file
61
examples_src/heatmap-earthquakes.html
Normal file
@@ -0,0 +1,61 @@
|
||||
<!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>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user