Publishing edit branch
This commit is contained in:
ahocevar
File diff suppressed because one or more lines are too long
@@ -0,0 +1,8 @@
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.RendererHints');
|
||||
goog.require('ol.View2D');
|
||||
goog.require('ol.animation');
|
||||
goog.require('ol.easing');
|
||||
goog.require('ol.layer.Tile');
|
||||
goog.require('ol.proj');
|
||||
goog.require('ol.source.OSM');
|
||||
@@ -0,0 +1,69 @@
|
||||
<!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="./">OpenLayers 3 Examples</a>
|
||||
<ul class="nav pull-right">
|
||||
<li><iframe class="github-watch-button" src="http://ghbtns.com/github-btn.html?user=openlayers&repo=ol3&type=watch&count=true"
|
||||
allowtransparency="true" frameborder="0" scrolling="0" height="20" width="90"></iframe></li>
|
||||
<li><a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-hashtags="openlayers"> </a></li>
|
||||
<li><div class="g-plusone-wrapper"><div class="g-plusone" data-size="medium" data-annotation="none"></div></div></li>
|
||||
</ul>
|
||||
</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="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="loader.js?id=animation" type="text/javascript"></script>
|
||||
<script src="../resources/social-links.js" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,133 @@
|
||||
var london = ol.proj.transform([-0.12755, 51.507222], 'EPSG:4326', 'EPSG:3857');
|
||||
var moscow = ol.proj.transform([37.6178, 55.7517], 'EPSG:4326', 'EPSG:3857');
|
||||
var istanbul = ol.proj.transform([28.9744, 41.0128], 'EPSG:4326', 'EPSG:3857');
|
||||
var rome = ol.proj.transform([12.5, 41.9], 'EPSG:4326', 'EPSG:3857');
|
||||
var bern = ol.proj.transform([7.4458, 46.95], 'EPSG:4326', 'EPSG:3857');
|
||||
var madrid = ol.proj.transform([-3.683333, 40.4], 'EPSG:4326', 'EPSG:3857');
|
||||
|
||||
var view = new ol.View2D({
|
||||
// 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()
|
||||
})
|
||||
],
|
||||
renderers: ol.RendererHints.createFromQueryData(),
|
||||
target: 'map',
|
||||
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 panToLondon = document.getElementById('pan-to-london');
|
||||
panToLondon.addEventListener('click', function() {
|
||||
var pan = ol.animation.pan({
|
||||
duration: 2000,
|
||||
source: 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: ol.easing.elastic,
|
||||
source: 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: ol.easing.bounce,
|
||||
source: 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: 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: 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: 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);
|
||||
@@ -0,0 +1,7 @@
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.RendererHints');
|
||||
goog.require('ol.View2D');
|
||||
goog.require('ol.dom.Input');
|
||||
goog.require('ol.layer.Tile');
|
||||
goog.require('ol.source.OSM');
|
||||
goog.require('ol.webgl.SUPPORTED');
|
||||
@@ -0,0 +1,94 @@
|
||||
<!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="./">OpenLayers 3 Examples</a>
|
||||
<ul class="nav pull-right">
|
||||
<li><iframe class="github-watch-button" src="http://ghbtns.com/github-btn.html?user=openlayers&repo=ol3&type=watch&count=true"
|
||||
allowtransparency="true" frameborder="0" scrolling="0" height="20" width="90"></iframe></li>
|
||||
<li><a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-hashtags="openlayers"> </a></li>
|
||||
<li><div class="g-plusone-wrapper"><div class="g-plusone" data-size="medium" data-annotation="none"></div></div></li>
|
||||
</ul>
|
||||
</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>
|
||||
<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"/>
|
||||
<label>hue</label>
|
||||
<input id="hue" class="webgl" type="range" min="-3.141592653589793" max="3.141592653589793" step="0.01"/>
|
||||
<label>saturation</label>
|
||||
<input id="saturation" class="webgl" type="range" min="0" max="5" step="0.01"/>
|
||||
<label>contrast</label>
|
||||
<input id="contrast" class="webgl" type="range" min="0" max="2" step="0.01"/>
|
||||
<label>brightness</label>
|
||||
<input id="brightness" class="webgl" 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="loader.js?id=bind-input" type="text/javascript"></script>
|
||||
<script src="../resources/social-links.js" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,49 @@
|
||||
if (!ol.webgl.SUPPORTED) {
|
||||
var inputs = document.getElementsByClassName('webgl');
|
||||
for (var i = 0, len = inputs.length; i < len; i++) {
|
||||
inputs[i].disabled = true;
|
||||
}
|
||||
var info = document.getElementById('no-webgl');
|
||||
/**
|
||||
* display warning message
|
||||
*/
|
||||
info.style.display = '';
|
||||
}
|
||||
|
||||
var layer = new ol.layer.Tile({
|
||||
source: new ol.source.OSM()
|
||||
});
|
||||
var map = new ol.Map({
|
||||
layers: [layer],
|
||||
renderers: ol.RendererHints.createFromQueryData(),
|
||||
target: 'map',
|
||||
view: new ol.View2D({
|
||||
center: [0, 0],
|
||||
zoom: 2
|
||||
})
|
||||
});
|
||||
|
||||
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('valueAsNumber', layer, 'opacity');
|
||||
|
||||
var hue = new ol.dom.Input(document.getElementById('hue'));
|
||||
hue.bindTo('valueAsNumber', layer, 'hue');
|
||||
|
||||
var saturation = new ol.dom.Input(document.getElementById('saturation'));
|
||||
saturation.bindTo('valueAsNumber', layer, 'saturation');
|
||||
|
||||
var contrast = new ol.dom.Input(document.getElementById('contrast'));
|
||||
contrast.bindTo('valueAsNumber', layer, 'contrast');
|
||||
|
||||
var brightness = new ol.dom.Input(document.getElementById('brightness'));
|
||||
brightness.bindTo('valueAsNumber', layer, 'brightness');
|
||||
|
||||
|
||||
var rotation = new ol.dom.Input(document.getElementById('rotation'));
|
||||
rotation.bindTo('valueAsNumber', map.getView(), 'rotation');
|
||||
|
||||
var resolution = new ol.dom.Input(document.getElementById('resolution'));
|
||||
resolution.bindTo('valueAsNumber', map.getView(), 'resolution');
|
||||
@@ -0,0 +1,6 @@
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.RendererHints');
|
||||
goog.require('ol.View2D');
|
||||
goog.require('ol.layer.Tile');
|
||||
goog.require('ol.proj');
|
||||
goog.require('ol.source.BingMaps');
|
||||
@@ -0,0 +1,63 @@
|
||||
<!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="./">OpenLayers 3 Examples</a>
|
||||
<ul class="nav pull-right">
|
||||
<li><iframe class="github-watch-button" src="http://ghbtns.com/github-btn.html?user=openlayers&repo=ol3&type=watch&count=true"
|
||||
allowtransparency="true" frameborder="0" scrolling="0" height="20" width="90"></iframe></li>
|
||||
<li><a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-hashtags="openlayers"> </a></li>
|
||||
<li><div class="g-plusone-wrapper"><div class="g-plusone" data-size="medium" data-annotation="none"></div></div></li>
|
||||
</ul>
|
||||
</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>
|
||||
</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>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="jquery.min.js" type="text/javascript"></script>
|
||||
<script src="loader.js?id=bing-maps" type="text/javascript"></script>
|
||||
<script src="../resources/social-links.js" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,29 @@
|
||||
var styles = ['Road', 'Aerial', 'AerialWithLabels'];
|
||||
var layers = [];
|
||||
for (var i = 0; i < styles.length; ++i) {
|
||||
layers.push(new ol.layer.Tile({
|
||||
visible: false,
|
||||
preload: Infinity,
|
||||
source: new ol.source.BingMaps({
|
||||
key: 'Ar33pRUvQOdESG8m_T15MUmNz__E1twPo42bFx9jvdDePhX0PNgAcEm44OVTS7tt',
|
||||
style: styles[i]
|
||||
})
|
||||
}));
|
||||
}
|
||||
var map = new ol.Map({
|
||||
layers: layers,
|
||||
renderers: ol.RendererHints.createFromQueryData(),
|
||||
target: 'map',
|
||||
view: new ol.View2D({
|
||||
center: ol.proj.transform([-123.1, 49.25], 'EPSG:4326', 'EPSG:3857'),
|
||||
zoom: 8
|
||||
})
|
||||
});
|
||||
|
||||
$('#layer-select').change(function() {
|
||||
var style = $(this).find(':selected').val();
|
||||
for (var i = 0; i < layers.length; ++i) {
|
||||
layers[i].setVisible(styles[i] == style);
|
||||
}
|
||||
});
|
||||
$('#layer-select').trigger('change');
|
||||
@@ -0,0 +1,6 @@
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.RendererHint');
|
||||
goog.require('ol.View2D');
|
||||
goog.require('ol.layer.Tile');
|
||||
goog.require('ol.source.MapQuestOpenAerial');
|
||||
goog.require('ol.webgl.SUPPORTED');
|
||||
@@ -0,0 +1,79 @@
|
||||
<!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="./">OpenLayers 3 Examples</a>
|
||||
<ul class="nav pull-right">
|
||||
<li><iframe class="github-watch-button" src="http://ghbtns.com/github-btn.html?user=openlayers&repo=ol3&type=watch&count=true"
|
||||
allowtransparency="true" frameborder="0" scrolling="0" height="20" width="90"></iframe></li>
|
||||
<li><a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-hashtags="openlayers"> </a></li>
|
||||
<li><div class="g-plusone-wrapper"><div class="g-plusone" data-size="medium" data-annotation="none"></div></div></li>
|
||||
</ul>
|
||||
</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="loader.js?id=brightness-contrast" type="text/javascript"></script>
|
||||
<script src="../resources/social-links.js" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,68 @@
|
||||
function setResetBrightnessButtonHTML() {
|
||||
resetBrightness.innerHTML = 'Brightness (' +
|
||||
layer.getBrightness().toFixed(3) + ')';
|
||||
}
|
||||
|
||||
function setResetContrastButtonHTML() {
|
||||
resetContrast.innerHTML = 'Contrast (' + layer.getContrast().toFixed(3) + ')';
|
||||
}
|
||||
|
||||
if (!ol.webgl.SUPPORTED) {
|
||||
var info = document.getElementById('no-webgl');
|
||||
/**
|
||||
* display error message
|
||||
*/
|
||||
info.style.display = '';
|
||||
} else {
|
||||
var layer = new ol.layer.Tile({
|
||||
source: new ol.source.MapQuestOpenAerial()
|
||||
});
|
||||
|
||||
var map = new ol.Map({
|
||||
layers: [layer],
|
||||
renderer: ol.RendererHint.WEBGL,
|
||||
target: 'map',
|
||||
view: new ol.View2D({
|
||||
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);
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.RendererHints');
|
||||
goog.require('ol.View2D');
|
||||
goog.require('ol.layer.Tile');
|
||||
goog.require('ol.proj');
|
||||
goog.require('ol.source.OSM');
|
||||
goog.require('ol.source.TileDebug');
|
||||
goog.require('ol.tilegrid.XYZ');
|
||||
@@ -0,0 +1,57 @@
|
||||
<!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="./">OpenLayers 3 Examples</a>
|
||||
<ul class="nav pull-right">
|
||||
<li><iframe class="github-watch-button" src="http://ghbtns.com/github-btn.html?user=openlayers&repo=ol3&type=watch&count=true"
|
||||
allowtransparency="true" frameborder="0" scrolling="0" height="20" width="90"></iframe></li>
|
||||
<li><a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-hashtags="openlayers"> </a></li>
|
||||
<li><div class="g-plusone-wrapper"><div class="g-plusone" data-size="medium" data-annotation="none"></div></div></li>
|
||||
</ul>
|
||||
</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="loader.js?id=canvas-tiles" type="text/javascript"></script>
|
||||
<script src="../resources/social-links.js" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,22 @@
|
||||
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
|
||||
})
|
||||
})
|
||||
})
|
||||
],
|
||||
renderers: ol.RendererHints.createFromQueryData(),
|
||||
target: 'map',
|
||||
view: new ol.View2D({
|
||||
center: ol.proj.transform(
|
||||
[-0.1275, 51.507222], 'EPSG:4326', 'EPSG:3857'),
|
||||
zoom: 10
|
||||
})
|
||||
});
|
||||
@@ -0,0 +1,8 @@
|
||||
goog.require('ol');
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.RendererHints');
|
||||
goog.require('ol.View2D');
|
||||
goog.require('ol.control');
|
||||
goog.require('ol.control.Control');
|
||||
goog.require('ol.layer.Tile');
|
||||
goog.require('ol.source.OSM');
|
||||
@@ -0,0 +1,96 @@
|
||||
<!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 {
|
||||
position: absolute;
|
||||
top: 65px;
|
||||
left: 8px;
|
||||
background: rgba(255,255,255,0.4);
|
||||
border-radius: 4px;
|
||||
padding: 2px;
|
||||
}
|
||||
.ol-touch .rotate-north {
|
||||
top: 80px;
|
||||
}
|
||||
.rotate-north a {
|
||||
display: block;
|
||||
color: white;
|
||||
font-size: 16px;
|
||||
font-family: 'Lucida Grande',Verdana,Geneva,Lucida,Arial,Helvetica,sans-serif;
|
||||
font-weight: bold;
|
||||
margin: 1px;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
border-radius: 2px;
|
||||
height: 22px;
|
||||
width: 22px;
|
||||
background: rgba(0,60,136,0.5);
|
||||
}
|
||||
.ol-touch .rotate-north a {
|
||||
font-size: 20px;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
line-height: 26px;
|
||||
}
|
||||
.rotate-north a:hover {
|
||||
background: rgba(0,60,136,0.7);
|
||||
}
|
||||
</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="./">OpenLayers 3 Examples</a>
|
||||
<ul class="nav pull-right">
|
||||
<li><iframe class="github-watch-button" src="http://ghbtns.com/github-btn.html?user=openlayers&repo=ol3&type=watch&count=true"
|
||||
allowtransparency="true" frameborder="0" scrolling="0" height="20" width="90"></iframe></li>
|
||||
<li><a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-hashtags="openlayers"> </a></li>
|
||||
<li><div class="g-plusone-wrapper"><div class="g-plusone" data-size="medium" data-annotation="none"></div></div></li>
|
||||
</ul>
|
||||
</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="loader.js?id=custom-controls" type="text/javascript"></script>
|
||||
<script src="../resources/social-links.js" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,71 @@
|
||||
/**
|
||||
* 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 anchor = document.createElement('a');
|
||||
anchor.href = '#rotate-north';
|
||||
anchor.innerHTML = 'N';
|
||||
|
||||
var this_ = this;
|
||||
var handleRotateNorth = function(e) {
|
||||
// prevent #rotate-north anchor from getting appended to the url
|
||||
e.preventDefault();
|
||||
this_.getMap().getView().getView2D().setRotation(0);
|
||||
};
|
||||
|
||||
anchor.addEventListener('click', handleRotateNorth, false);
|
||||
anchor.addEventListener('touchstart', handleRotateNorth, false);
|
||||
|
||||
var element = document.createElement('div');
|
||||
element.className = 'rotate-north ol-unselectable';
|
||||
element.appendChild(anchor);
|
||||
|
||||
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().extend([
|
||||
new app.RotateNorthControl()
|
||||
]),
|
||||
layers: [
|
||||
new ol.layer.Tile({
|
||||
source: new ol.source.OSM()
|
||||
})
|
||||
],
|
||||
renderers: ol.RendererHints.createFromQueryData(),
|
||||
target: 'map',
|
||||
view: new ol.View2D({
|
||||
center: [0, 0],
|
||||
zoom: 2,
|
||||
rotation: 1
|
||||
})
|
||||
});
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,508 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<Capabilities xmlns="http://www.opengis.net/wmts/1.0" 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" xmlns:gml="http://www.opengis.net/gml" xsi:schemaLocation="http://www.opengis.net/wmts/1.0 http://schemas.opengis.net/wmts/1.0/wmtsGetCapabilities_response.xsd" version="1.0.0">
|
||||
<ows:ServiceIdentification>
|
||||
<ows:Title>Web Map Tile Service</ows:Title>
|
||||
<ows:ServiceType>OGC WMTS</ows:ServiceType>
|
||||
<ows:ServiceTypeVersion>1.0.0</ows:ServiceTypeVersion>
|
||||
<ows:Fees>none</ows:Fees>
|
||||
<ows:AccessConstraints>http://data.wien.gv.at/nutzungsbedingungen</ows:AccessConstraints>
|
||||
</ows:ServiceIdentification>
|
||||
<ows:ServiceProvider>
|
||||
<ows:ProviderName>Magistrat Wien</ows:ProviderName>
|
||||
<ows:ProviderSite xlink:href="http://www.wien.gv.at"/>
|
||||
<ows:ServiceContact>
|
||||
<ows:IndividualName>Gerhard Sommer</ows:IndividualName>
|
||||
</ows:ServiceContact>
|
||||
</ows:ServiceProvider>
|
||||
<ows:OperationsMetadata>
|
||||
<ows:Operation name="GetCapabilities">
|
||||
<ows:DCP>
|
||||
<ows:HTTP>
|
||||
<ows:Get xlink:href="http://maps.wien.gv.at/wmts">
|
||||
<ows:Constraint name="GetEncoding">
|
||||
<ows:AllowedValues>
|
||||
<ows:Value>RESTful</ows:Value>
|
||||
</ows:AllowedValues>
|
||||
</ows:Constraint>
|
||||
</ows:Get>
|
||||
<ows:Get xlink:href="http://maps1.wien.gv.at/wmts">
|
||||
<ows:Constraint name="GetEncoding">
|
||||
<ows:AllowedValues>
|
||||
<ows:Value>RESTful</ows:Value>
|
||||
</ows:AllowedValues>
|
||||
</ows:Constraint>
|
||||
</ows:Get>
|
||||
<ows:Get xlink:href="http://maps2.wien.gv.at/wmts">
|
||||
<ows:Constraint name="GetEncoding">
|
||||
<ows:AllowedValues>
|
||||
<ows:Value>RESTful</ows:Value>
|
||||
</ows:AllowedValues>
|
||||
</ows:Constraint>
|
||||
</ows:Get>
|
||||
<ows:Get xlink:href="http://maps3.wien.gv.at/wmts">
|
||||
<ows:Constraint name="GetEncoding">
|
||||
<ows:AllowedValues>
|
||||
<ows:Value>RESTful</ows:Value>
|
||||
</ows:AllowedValues>
|
||||
</ows:Constraint>
|
||||
</ows:Get>
|
||||
<ows:Get xlink:href="http://maps4.wien.gv.at/wmts">
|
||||
<ows:Constraint name="GetEncoding">
|
||||
<ows:AllowedValues>
|
||||
<ows:Value>RESTful</ows:Value>
|
||||
</ows:AllowedValues>
|
||||
</ows:Constraint>
|
||||
</ows:Get>
|
||||
</ows:HTTP>
|
||||
</ows:DCP>
|
||||
</ows:Operation>
|
||||
<ows:Operation name="GetTile">
|
||||
<ows:DCP>
|
||||
<ows:HTTP>
|
||||
<ows:Get xlink:href="http://maps.wien.gv.at/wmts">
|
||||
<ows:Constraint name="GetEncoding">
|
||||
<ows:AllowedValues>
|
||||
<ows:Value>RESTful</ows:Value>
|
||||
</ows:AllowedValues>
|
||||
</ows:Constraint>
|
||||
</ows:Get>
|
||||
<ows:Get xlink:href="http://maps1.wien.gv.at/wmts">
|
||||
<ows:Constraint name="GetEncoding">
|
||||
<ows:AllowedValues>
|
||||
<ows:Value>RESTful</ows:Value>
|
||||
</ows:AllowedValues>
|
||||
</ows:Constraint>
|
||||
</ows:Get>
|
||||
<ows:Get xlink:href="http://maps2.wien.gv.at/wmts">
|
||||
<ows:Constraint name="GetEncoding">
|
||||
<ows:AllowedValues>
|
||||
<ows:Value>RESTful</ows:Value>
|
||||
</ows:AllowedValues>
|
||||
</ows:Constraint>
|
||||
</ows:Get>
|
||||
<ows:Get xlink:href="http://maps3.wien.gv.at/wmts">
|
||||
<ows:Constraint name="GetEncoding">
|
||||
<ows:AllowedValues>
|
||||
<ows:Value>RESTful</ows:Value>
|
||||
</ows:AllowedValues>
|
||||
</ows:Constraint>
|
||||
</ows:Get>
|
||||
<ows:Get xlink:href="http://maps4.wien.gv.at/wmts">
|
||||
<ows:Constraint name="GetEncoding">
|
||||
<ows:AllowedValues>
|
||||
<ows:Value>RESTful</ows:Value>
|
||||
</ows:AllowedValues>
|
||||
</ows:Constraint>
|
||||
</ows:Get>
|
||||
</ows:HTTP>
|
||||
</ows:DCP>
|
||||
</ows:Operation>
|
||||
</ows:OperationsMetadata>
|
||||
<Contents>
|
||||
<Layer>
|
||||
<ows:Title>Luftbild</ows:Title>
|
||||
<ows:WGS84BoundingBox crs="urn:ogc:def:crs:OGC:2:84">
|
||||
<ows:LowerCorner>16.17 48.10</ows:LowerCorner>
|
||||
<ows:UpperCorner>16.58 48.33</ows:UpperCorner>
|
||||
</ows:WGS84BoundingBox>
|
||||
<ows:Identifier>lb</ows:Identifier>
|
||||
<Style isDefault="true">
|
||||
<ows:Identifier>farbe</ows:Identifier>
|
||||
</Style>
|
||||
<Format>image/jpeg</Format>
|
||||
<TileMatrixSetLink>
|
||||
<TileMatrixSet>google3857</TileMatrixSet>
|
||||
</TileMatrixSetLink>
|
||||
<ResourceURL format="image/jpeg" template="http://maps1.wien.gv.at/wmts/lb/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.jpeg" resourceType="tile"/>
|
||||
<ResourceURL format="image/jpeg" template="http://maps2.wien.gv.at/wmts/lb/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.jpeg" resourceType="tile"/>
|
||||
<ResourceURL format="image/jpeg" template="http://maps3.wien.gv.at/wmts/lb/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.jpeg" resourceType="tile"/>
|
||||
<ResourceURL format="image/jpeg" template="http://maps4.wien.gv.at/wmts/lb/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.jpeg" resourceType="tile"/>
|
||||
<ResourceURL format="image/jpeg" template="http://maps.wien.gv.at/wmts/lb/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.jpeg" resourceType="tile"/>
|
||||
</Layer>
|
||||
<Layer>
|
||||
<ows:Title>MZK Flächen</ows:Title>
|
||||
<ows:WGS84BoundingBox crs="urn:ogc:def:crs:OGC:2:84">
|
||||
<ows:LowerCorner>16.17 48.10</ows:LowerCorner>
|
||||
<ows:UpperCorner>16.58 48.33</ows:UpperCorner>
|
||||
</ows:WGS84BoundingBox>
|
||||
<ows:Identifier>fmzk</ows:Identifier>
|
||||
<Style isDefault="true">
|
||||
<ows:Identifier>pastell</ows:Identifier>
|
||||
</Style>
|
||||
<Format>image/jpeg</Format>
|
||||
<TileMatrixSetLink>
|
||||
<TileMatrixSet>google3857</TileMatrixSet>
|
||||
</TileMatrixSetLink>
|
||||
<ResourceURL format="image/jpeg" template="http://maps1.wien.gv.at/wmts/fmzk/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.jpeg" resourceType="tile"/>
|
||||
<ResourceURL format="image/jpeg" template="http://maps2.wien.gv.at/wmts/fmzk/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.jpeg" resourceType="tile"/>
|
||||
<ResourceURL format="image/jpeg" template="http://maps3.wien.gv.at/wmts/fmzk/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.jpeg" resourceType="tile"/>
|
||||
<ResourceURL format="image/jpeg" template="http://maps4.wien.gv.at/wmts/fmzk/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.jpeg" resourceType="tile"/>
|
||||
<ResourceURL format="image/jpeg" template="http://maps.wien.gv.at/wmts/fmzk/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.jpeg" resourceType="tile"/>
|
||||
</Layer>
|
||||
<Layer>
|
||||
<ows:Title>Flächenwidmungs- und Bebauungsplan</ows:Title>
|
||||
<ows:WGS84BoundingBox crs="urn:ogc:def:crs:OGC:2:84">
|
||||
<ows:LowerCorner>16.17 48.10</ows:LowerCorner>
|
||||
<ows:UpperCorner>16.58 48.33</ows:UpperCorner>
|
||||
</ows:WGS84BoundingBox>
|
||||
<ows:Identifier>flwbplmzk</ows:Identifier>
|
||||
<Style isDefault="true">
|
||||
<ows:Identifier>rot</ows:Identifier>
|
||||
</Style>
|
||||
<Format>image/jpeg</Format>
|
||||
<TileMatrixSetLink>
|
||||
<TileMatrixSet>google3857</TileMatrixSet>
|
||||
</TileMatrixSetLink>
|
||||
<ResourceURL format="image/jpeg" template="http://maps1.wien.gv.at/wmts/flwbplmzk/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.jpeg" resourceType="tile"/>
|
||||
<ResourceURL format="image/jpeg" template="http://maps2.wien.gv.at/wmts/flwbplmzk/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.jpeg" resourceType="tile"/>
|
||||
<ResourceURL format="image/jpeg" template="http://maps3.wien.gv.at/wmts/flwbplmzk/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.jpeg" resourceType="tile"/>
|
||||
<ResourceURL format="image/jpeg" template="http://maps4.wien.gv.at/wmts/flwbplmzk/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.jpeg" resourceType="tile"/>
|
||||
<ResourceURL format="image/jpeg" template="http://maps.wien.gv.at/wmts/flwbplmzk/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.jpeg" resourceType="tile"/>
|
||||
</Layer>
|
||||
<Layer>
|
||||
<ows:Title>Beschriftung</ows:Title>
|
||||
<ows:WGS84BoundingBox crs="urn:ogc:def:crs:OGC:2:84">
|
||||
<ows:LowerCorner>16.17 48.10</ows:LowerCorner>
|
||||
<ows:UpperCorner>16.58 48.33</ows:UpperCorner>
|
||||
</ows:WGS84BoundingBox>
|
||||
<ows:Identifier>beschriftung</ows:Identifier>
|
||||
<Style isDefault="true">
|
||||
<ows:Identifier>normal</ows:Identifier>
|
||||
</Style>
|
||||
<Format>image/png</Format>
|
||||
<TileMatrixSetLink>
|
||||
<TileMatrixSet>google3857</TileMatrixSet>
|
||||
</TileMatrixSetLink>
|
||||
<ResourceURL format="image/png" template="http://maps1.wien.gv.at/wmts/beschriftung/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.png" resourceType="tile"/>
|
||||
<ResourceURL format="image/png" template="http://maps2.wien.gv.at/wmts/beschriftung/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.png" resourceType="tile"/>
|
||||
<ResourceURL format="image/png" template="http://maps3.wien.gv.at/wmts/beschriftung/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.png" resourceType="tile"/>
|
||||
<ResourceURL format="image/png" template="http://maps4.wien.gv.at/wmts/beschriftung/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.png" resourceType="tile"/>
|
||||
<ResourceURL format="image/png" template="http://maps.wien.gv.at/wmts/beschriftung/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.png" resourceType="tile"/>
|
||||
</Layer>
|
||||
<TileMatrixSet>
|
||||
<ows:Identifier>viennagis31256</ows:Identifier>
|
||||
<ows:BoundingBox crs="urn:ogc:def:crs:EPSG::31256">
|
||||
<ows:LowerCorner>-11500 330500</ows:LowerCorner>
|
||||
<ows:UpperCorner>18500 354000</ows:UpperCorner>
|
||||
</ows:BoundingBox>
|
||||
<ows:SupportedCRS>urn:ogc:def:crs:EPSG::31256</ows:SupportedCRS>
|
||||
<TileMatrix>
|
||||
<ows:Identifier>0</ows:Identifier>
|
||||
<ScaleDenominator>500000.0</ScaleDenominator>
|
||||
<TopLeftCorner>355000.0 -13500.0</TopLeftCorner>
|
||||
<TileWidth>256</TileWidth>
|
||||
<TileHeight>256</TileHeight>
|
||||
<MatrixWidth>2</MatrixWidth>
|
||||
<MatrixHeight>1</MatrixHeight>
|
||||
</TileMatrix>
|
||||
<TileMatrix>
|
||||
<ows:Identifier>1</ows:Identifier>
|
||||
<ScaleDenominator>250000.0</ScaleDenominator>
|
||||
<TopLeftCorner>355000.0 -13500.0</TopLeftCorner>
|
||||
<TileWidth>256</TileWidth>
|
||||
<TileHeight>256</TileHeight>
|
||||
<MatrixWidth>3</MatrixWidth>
|
||||
<MatrixHeight>2</MatrixHeight>
|
||||
</TileMatrix>
|
||||
<TileMatrix>
|
||||
<ows:Identifier>2</ows:Identifier>
|
||||
<ScaleDenominator>125000.0</ScaleDenominator>
|
||||
<TopLeftCorner>355000.0 -13500.0</TopLeftCorner>
|
||||
<TileWidth>256</TileWidth>
|
||||
<TileHeight>256</TileHeight>
|
||||
<MatrixWidth>5</MatrixWidth>
|
||||
<MatrixHeight>3</MatrixHeight>
|
||||
</TileMatrix>
|
||||
<TileMatrix>
|
||||
<ows:Identifier>3</ows:Identifier>
|
||||
<ScaleDenominator>64000.0</ScaleDenominator>
|
||||
<TopLeftCorner>355000.0 -13500.0</TopLeftCorner>
|
||||
<TileWidth>256</TileWidth>
|
||||
<TileHeight>256</TileHeight>
|
||||
<MatrixWidth>9</MatrixWidth>
|
||||
<MatrixHeight>6</MatrixHeight>
|
||||
</TileMatrix>
|
||||
<TileMatrix>
|
||||
<ows:Identifier>4</ows:Identifier>
|
||||
<ScaleDenominator>32000.0</ScaleDenominator>
|
||||
<TopLeftCorner>355000.0 -13500.0</TopLeftCorner>
|
||||
<TileWidth>256</TileWidth>
|
||||
<TileHeight>256</TileHeight>
|
||||
<MatrixWidth>17</MatrixWidth>
|
||||
<MatrixHeight>12</MatrixHeight>
|
||||
</TileMatrix>
|
||||
<TileMatrix>
|
||||
<ows:Identifier>5</ows:Identifier>
|
||||
<ScaleDenominator>16000.0</ScaleDenominator>
|
||||
<TopLeftCorner>355000.0 -13500.0</TopLeftCorner>
|
||||
<TileWidth>256</TileWidth>
|
||||
<TileHeight>256</TileHeight>
|
||||
<MatrixWidth>33</MatrixWidth>
|
||||
<MatrixHeight>24</MatrixHeight>
|
||||
</TileMatrix>
|
||||
<TileMatrix>
|
||||
<ows:Identifier>6</ows:Identifier>
|
||||
<ScaleDenominator>8000.0</ScaleDenominator>
|
||||
<TopLeftCorner>355000.0 -13500.0</TopLeftCorner>
|
||||
<TileWidth>256</TileWidth>
|
||||
<TileHeight>256</TileHeight>
|
||||
<MatrixWidth>66</MatrixWidth>
|
||||
<MatrixHeight>47</MatrixHeight>
|
||||
</TileMatrix>
|
||||
<TileMatrix>
|
||||
<ows:Identifier>7</ows:Identifier>
|
||||
<ScaleDenominator>5000.0</ScaleDenominator>
|
||||
<TopLeftCorner>355000.0 -13500.0</TopLeftCorner>
|
||||
<TileWidth>256</TileWidth>
|
||||
<TileHeight>256</TileHeight>
|
||||
<MatrixWidth>105</MatrixWidth>
|
||||
<MatrixHeight>74</MatrixHeight>
|
||||
</TileMatrix>
|
||||
<TileMatrix>
|
||||
<ows:Identifier>8</ows:Identifier>
|
||||
<ScaleDenominator>4000.0</ScaleDenominator>
|
||||
<TopLeftCorner>355000.0 -13500.0</TopLeftCorner>
|
||||
<TileWidth>256</TileWidth>
|
||||
<TileHeight>256</TileHeight>
|
||||
<MatrixWidth>132</MatrixWidth>
|
||||
<MatrixHeight>93</MatrixHeight>
|
||||
</TileMatrix>
|
||||
<TileMatrix>
|
||||
<ows:Identifier>9</ows:Identifier>
|
||||
<ScaleDenominator>3000.0</ScaleDenominator>
|
||||
<TopLeftCorner>355000.0 -13500.0</TopLeftCorner>
|
||||
<TileWidth>256</TileWidth>
|
||||
<TileHeight>256</TileHeight>
|
||||
<MatrixWidth>175</MatrixWidth>
|
||||
<MatrixHeight>124</MatrixHeight>
|
||||
</TileMatrix>
|
||||
<TileMatrix>
|
||||
<ows:Identifier>10</ows:Identifier>
|
||||
<ScaleDenominator>2000.0</ScaleDenominator>
|
||||
<TopLeftCorner>355000.0 -13500.0</TopLeftCorner>
|
||||
<TileWidth>256</TileWidth>
|
||||
<TileHeight>256</TileHeight>
|
||||
<MatrixWidth>263</MatrixWidth>
|
||||
<MatrixHeight>185</MatrixHeight>
|
||||
</TileMatrix>
|
||||
<TileMatrix>
|
||||
<ows:Identifier>11</ows:Identifier>
|
||||
<ScaleDenominator>1500.0</ScaleDenominator>
|
||||
<TopLeftCorner>355000.0 -13500.0</TopLeftCorner>
|
||||
<TileWidth>256</TileWidth>
|
||||
<TileHeight>256</TileHeight>
|
||||
<MatrixWidth>350</MatrixWidth>
|
||||
<MatrixHeight>247</MatrixHeight>
|
||||
</TileMatrix>
|
||||
<TileMatrix>
|
||||
<ows:Identifier>12</ows:Identifier>
|
||||
<ScaleDenominator>1000.0</ScaleDenominator>
|
||||
<TopLeftCorner>355000.0 -13500.0</TopLeftCorner>
|
||||
<TileWidth>256</TileWidth>
|
||||
<TileHeight>256</TileHeight>
|
||||
<MatrixWidth>525</MatrixWidth>
|
||||
<MatrixHeight>370</MatrixHeight>
|
||||
</TileMatrix>
|
||||
<TileMatrix>
|
||||
<ows:Identifier>13</ows:Identifier>
|
||||
<ScaleDenominator>500.0</ScaleDenominator>
|
||||
<TopLeftCorner>355000.0 -13500.0</TopLeftCorner>
|
||||
<TileWidth>256</TileWidth>
|
||||
<TileHeight>256</TileHeight>
|
||||
<MatrixWidth>1049</MatrixWidth>
|
||||
<MatrixHeight>739</MatrixHeight>
|
||||
</TileMatrix>
|
||||
</TileMatrixSet>
|
||||
<TileMatrixSet>
|
||||
<!-- -180 85.05112878 -->
|
||||
<ows:Identifier>google3857</ows:Identifier>
|
||||
<ows:BoundingBox crs="urn:ogc:def:crs:EPSG:6.18:3:3857">
|
||||
<ows:LowerCorner>1799448.394855 6124949.747770</ows:LowerCorner>
|
||||
<ows:UpperCorner>1848250.442089 6162571.828177</ows:UpperCorner>
|
||||
</ows:BoundingBox>
|
||||
<ows:SupportedCRS>urn:ogc:def:crs:EPSG:6.18:3: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.015</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.18773</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.91833540</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.45916770</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.36479193</ScaleDenominator>
|
||||
<TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
|
||||
<TileWidth>256</TileWidth>
|
||||
<TileHeight>256</TileHeight>
|
||||
<MatrixWidth>524288</MatrixWidth>
|
||||
<MatrixHeight>524288</MatrixHeight>
|
||||
</TileMatrix>
|
||||
</TileMatrixSet>
|
||||
</Contents>
|
||||
<ServiceMetadataURL xlink:href="http://maps.wien.gv.at/wmts/1.0.0/WMTSCapabilities.xml"/>
|
||||
</Capabilities>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,275 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<kml xmlns="http://earth.google.com/kml/2.0">
|
||||
<Document>
|
||||
<name>KML Samples</name>
|
||||
<open>1</open>
|
||||
<description>Unleash your creativity with the help of these examples!</description>
|
||||
<Style id="downArrowIcon">
|
||||
<IconStyle>
|
||||
<Icon>
|
||||
<href>http://maps.google.com/mapfiles/kml/pal4/icon28.png</href>
|
||||
</Icon>
|
||||
</IconStyle>
|
||||
</Style>
|
||||
<Style id="globeIcon">
|
||||
<IconStyle>
|
||||
<Icon>
|
||||
<href>http://maps.google.com/mapfiles/kml/pal3/icon19.png</href>
|
||||
</Icon>
|
||||
</IconStyle>
|
||||
<LineStyle>
|
||||
<width>2</width>
|
||||
</LineStyle>
|
||||
</Style>
|
||||
<Style id="transPurpleLineGreenPoly">
|
||||
<LineStyle>
|
||||
<color>7fff00ff</color>
|
||||
<width>4</width>
|
||||
</LineStyle>
|
||||
<PolyStyle>
|
||||
<color>7f00ff00</color>
|
||||
</PolyStyle>
|
||||
</Style>
|
||||
<Style id="yellowLineGreenPoly">
|
||||
<LineStyle>
|
||||
<color>7f00ffff</color>
|
||||
<width>4</width>
|
||||
</LineStyle>
|
||||
<PolyStyle>
|
||||
<color>7f00ff00</color>
|
||||
</PolyStyle>
|
||||
</Style>
|
||||
<Style id="thickBlackLine">
|
||||
<LineStyle>
|
||||
<color>87000000</color>
|
||||
<width>10</width>
|
||||
</LineStyle>
|
||||
</Style>
|
||||
<Style id="redLineBluePoly">
|
||||
<LineStyle>
|
||||
<color>ff0000ff</color>
|
||||
</LineStyle>
|
||||
<PolyStyle>
|
||||
<color>ffff0000</color>
|
||||
</PolyStyle>
|
||||
</Style>
|
||||
<Style id="blueLineRedPoly">
|
||||
<LineStyle>
|
||||
<color>ffff0000</color>
|
||||
</LineStyle>
|
||||
<PolyStyle>
|
||||
<color>ff0000ff</color>
|
||||
</PolyStyle>
|
||||
</Style>
|
||||
<Style id="transRedPoly">
|
||||
<LineStyle>
|
||||
<width>1.5</width>
|
||||
</LineStyle>
|
||||
<PolyStyle>
|
||||
<color>7d0000ff</color>
|
||||
</PolyStyle>
|
||||
</Style>
|
||||
<Style id="transBluePoly">
|
||||
<LineStyle>
|
||||
<width>1.5</width>
|
||||
</LineStyle>
|
||||
<PolyStyle>
|
||||
<color>7dff0000</color>
|
||||
</PolyStyle>
|
||||
</Style>
|
||||
<Style id="transGreenPoly">
|
||||
<LineStyle>
|
||||
<width>1.5</width>
|
||||
</LineStyle>
|
||||
<PolyStyle>
|
||||
<color>7d00ff00</color>
|
||||
</PolyStyle>
|
||||
</Style>
|
||||
<Style id="transYellowPoly">
|
||||
<LineStyle>
|
||||
<width>1.5</width>
|
||||
</LineStyle>
|
||||
<PolyStyle>
|
||||
<color>7d00ffff</color>
|
||||
</PolyStyle>
|
||||
</Style>
|
||||
<Style id="noDrivingDirections">
|
||||
<BalloonStyle>
|
||||
<text><![CDATA[
|
||||
<b>$[name]</b>
|
||||
<br /><br />
|
||||
$[description]
|
||||
]]></text>
|
||||
</BalloonStyle>
|
||||
</Style>
|
||||
<Folder>
|
||||
<name>Paths</name>
|
||||
<visibility>0</visibility>
|
||||
<description>Examples of paths. Note that the tessellate tag is by default
|
||||
set to 0. If you want to create tessellated lines, they must be authored
|
||||
(or edited) directly in KML.</description>
|
||||
<Placemark>
|
||||
<name>Tessellated</name>
|
||||
<visibility>0</visibility>
|
||||
<description><![CDATA[If the <tessellate> tag has a value of 1, the line will contour to the underlying terrain]]></description>
|
||||
<LookAt>
|
||||
<longitude>-112.0822680013139</longitude>
|
||||
<latitude>36.09825589333556</latitude>
|
||||
<altitude>0</altitude>
|
||||
<range>2889.145007690472</range>
|
||||
<tilt>62.04855796276328</tilt>
|
||||
<heading>103.8120432044965</heading>
|
||||
</LookAt>
|
||||
<LineString>
|
||||
<tessellate>1</tessellate>
|
||||
<coordinates> -112.0814237830345,36.10677870477137,0
|
||||
-112.0870267752693,36.0905099328766,0 </coordinates>
|
||||
</LineString>
|
||||
</Placemark>
|
||||
<Placemark>
|
||||
<name>Untessellated</name>
|
||||
<visibility>0</visibility>
|
||||
<description><![CDATA[If the <tessellate> tag has a value of 0, the line follow a simple straight-line path from point to point]]></description>
|
||||
<LookAt>
|
||||
<longitude>-112.0822680013139</longitude>
|
||||
<latitude>36.09825589333556</latitude>
|
||||
<altitude>0</altitude>
|
||||
<range>2889.145007690472</range>
|
||||
<tilt>62.04855796276328</tilt>
|
||||
<heading>103.8120432044965</heading>
|
||||
</LookAt>
|
||||
<LineString>
|
||||
<tessellate>0</tessellate>
|
||||
<coordinates> -112.080622229595,36.10673460007995,0
|
||||
-112.085242575315,36.09049598612422,0 </coordinates>
|
||||
</LineString>
|
||||
</Placemark>
|
||||
<Placemark>
|
||||
<name>Absolute</name>
|
||||
<visibility>0</visibility>
|
||||
<description>Transparent purple line</description>
|
||||
<LookAt>
|
||||
<longitude>-112.2719329043177</longitude>
|
||||
<latitude>36.08890633450894</latitude>
|
||||
<altitude>0</altitude>
|
||||
<range>2569.386744398339</range>
|
||||
<tilt>44.60763714063257</tilt>
|
||||
<heading>-106.8161545998597</heading>
|
||||
</LookAt>
|
||||
<styleUrl>#transPurpleLineGreenPoly</styleUrl>
|
||||
<LineString>
|
||||
<tessellate>1</tessellate>
|
||||
<altitudeMode>absolute</altitudeMode>
|
||||
<coordinates> -112.265654928602,36.09447672602546,2357
|
||||
-112.2660384528238,36.09342608838671,2357
|
||||
-112.2668139013453,36.09251058776881,2357
|
||||
-112.2677826834445,36.09189827357996,2357
|
||||
-112.2688557510952,36.0913137941187,2357
|
||||
-112.2694810717219,36.0903677207521,2357
|
||||
-112.2695268555611,36.08932171487285,2357
|
||||
-112.2690144567276,36.08850916060472,2357
|
||||
-112.2681528815339,36.08753813597956,2357
|
||||
-112.2670588176031,36.08682685262568,2357
|
||||
-112.2657374587321,36.08646312301303,2357 </coordinates>
|
||||
</LineString>
|
||||
</Placemark>
|
||||
<Placemark>
|
||||
<name>Absolute Extruded</name>
|
||||
<visibility>0</visibility>
|
||||
<description>Transparent green wall with yellow outlines</description>
|
||||
<LookAt>
|
||||
<longitude>-112.2643334742529</longitude>
|
||||
<latitude>36.08563154742419</latitude>
|
||||
<altitude>0</altitude>
|
||||
<range>4451.842204068102</range>
|
||||
<tilt>44.61038665812578</tilt>
|
||||
<heading>-125.7518698668815</heading>
|
||||
</LookAt>
|
||||
<styleUrl>#yellowLineGreenPoly</styleUrl>
|
||||
<LineString>
|
||||
<extrude>1</extrude>
|
||||
<tessellate>1</tessellate>
|
||||
<altitudeMode>absolute</altitudeMode>
|
||||
<coordinates> -112.2550785337791,36.07954952145647,2357
|
||||
-112.2549277039738,36.08117083492122,2357
|
||||
-112.2552505069063,36.08260761307279,2357
|
||||
-112.2564540158376,36.08395660588506,2357
|
||||
-112.2580238976449,36.08511401044813,2357
|
||||
-112.2595218489022,36.08584355239394,2357
|
||||
-112.2608216347552,36.08612634548589,2357
|
||||
-112.262073428656,36.08626019085147,2357
|
||||
-112.2633204928495,36.08621519860091,2357
|
||||
-112.2644963846444,36.08627897945274,2357
|
||||
-112.2656969554589,36.08649599090644,2357 </coordinates>
|
||||
</LineString>
|
||||
</Placemark>
|
||||
<Placemark>
|
||||
<name>Relative</name>
|
||||
<visibility>0</visibility>
|
||||
<description>Black line (10 pixels wide), height tracks terrain</description>
|
||||
<LookAt>
|
||||
<longitude>-112.2580438551384</longitude>
|
||||
<latitude>36.1072674824385</latitude>
|
||||
<altitude>0</altitude>
|
||||
<range>2927.61105910266</range>
|
||||
<tilt>44.61324882043339</tilt>
|
||||
<heading>4.947421249553717</heading>
|
||||
</LookAt>
|
||||
<styleUrl>#thickBlackLine</styleUrl>
|
||||
<LineString>
|
||||
<tessellate>1</tessellate>
|
||||
<altitudeMode>relativeToGround</altitudeMode>
|
||||
<coordinates> -112.2532845153347,36.09886943729116,645
|
||||
-112.2540466121145,36.09919570465255,645
|
||||
-112.254734666947,36.09984998366178,645
|
||||
-112.255493345654,36.10051310621746,645
|
||||
-112.2563157098468,36.10108441943419,645
|
||||
-112.2568033076439,36.10159722088088,645
|
||||
-112.257494011321,36.10204323542867,645
|
||||
-112.2584106072308,36.10229131995655,645
|
||||
-112.2596588987972,36.10240001286358,645
|
||||
-112.2610581199487,36.10213176873407,645
|
||||
-112.2626285262793,36.10157011437219,645 </coordinates>
|
||||
</LineString>
|
||||
</Placemark>
|
||||
<Placemark>
|
||||
<name>Relative Extruded</name>
|
||||
<visibility>0</visibility>
|
||||
<description>Opaque blue walls with red outline, height tracks terrain</description>
|
||||
<LookAt>
|
||||
<longitude>-112.2683594333433</longitude>
|
||||
<latitude>36.09884362144909</latitude>
|
||||
<altitude>0</altitude>
|
||||
<range>2184.193522571467</range>
|
||||
<tilt>44.60855445139561</tilt>
|
||||
<heading>-72.24271551768405</heading>
|
||||
</LookAt>
|
||||
<styleUrl>#redLineBluePoly</styleUrl>
|
||||
<LineString>
|
||||
<extrude>1</extrude>
|
||||
<tessellate>1</tessellate>
|
||||
<altitudeMode>relativeToGround</altitudeMode>
|
||||
<coordinates> -112.2656634181359,36.09445214722695,630
|
||||
-112.2652238941097,36.09520916122063,630
|
||||
-112.2645079986395,36.09580763864907,630
|
||||
-112.2638827428817,36.09628572284063,630
|
||||
-112.2635746835406,36.09679275951239,630
|
||||
-112.2635711822407,36.09740038871899,630
|
||||
-112.2640296531825,36.09804913435539,630
|
||||
-112.264327720538,36.09880337400301,630
|
||||
-112.2642436562271,36.09963644790288,630
|
||||
-112.2639148687042,36.10055381117246,630
|
||||
-112.2626894973474,36.10149062823369,630 </coordinates>
|
||||
</LineString>
|
||||
</Placemark>
|
||||
<Placemark>
|
||||
<name>Blue Icon</name>
|
||||
<description>Just another blue icon.</description>
|
||||
<styleUrl>data/kml/styles.kml#blueIcons</styleUrl>
|
||||
<Point>
|
||||
<coordinates>-112.292238941097,36.09520916122063,630</coordinates>
|
||||
</Point>
|
||||
</Placemark>
|
||||
</Folder>
|
||||
</Document>
|
||||
</kml>
|
||||
@@ -0,0 +1,21 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!--
|
||||
|
||||
This file contains styles referenced by other KML files in this project.
|
||||
http://kml-samples.googlecode.com/svn/trunk/kml/Style/styles.kml
|
||||
|
||||
-->
|
||||
<kml xmlns="http://earth.google.com/kml/2.1">
|
||||
<Document id="globalStyles">
|
||||
|
||||
<Style id="blueIcons">
|
||||
<IconStyle>
|
||||
<color>ffff0000</color>
|
||||
<Icon>
|
||||
<href>http://maps.google.com/mapfiles/kml/shapes/sunny.png</href>
|
||||
</Icon>
|
||||
</IconStyle>
|
||||
</Style>
|
||||
|
||||
</Document>
|
||||
</kml>
|
||||
File diff suppressed because one or more lines are too long
@@ -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>
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,7 @@
|
||||
goog.require('ol.DeviceOrientation');
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.RendererHints');
|
||||
goog.require('ol.View2D');
|
||||
goog.require('ol.dom.Input');
|
||||
goog.require('ol.layer.Tile');
|
||||
goog.require('ol.source.OSM');
|
||||
@@ -0,0 +1,63 @@
|
||||
<!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="./">OpenLayers 3 Examples</a>
|
||||
<ul class="nav pull-right">
|
||||
<li><iframe class="github-watch-button" src="http://ghbtns.com/github-btn.html?user=openlayers&repo=ol3&type=watch&count=true"
|
||||
allowtransparency="true" frameborder="0" scrolling="0" height="20" width="90"></iframe></li>
|
||||
<li><a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-hashtags="openlayers"> </a></li>
|
||||
<li><div class="g-plusone-wrapper"><div class="g-plusone" data-size="medium" data-annotation="none"></div></div></li>
|
||||
</ul>
|
||||
</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="loader.js?id=device-orientation" type="text/javascript"></script>
|
||||
<script src="../resources/social-links.js" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,38 @@
|
||||
var map = new ol.Map({
|
||||
layers: [
|
||||
new ol.layer.Tile({
|
||||
source: new ol.source.OSM()
|
||||
})
|
||||
],
|
||||
renderers: ol.RendererHints.createFromQueryData(),
|
||||
target: 'map',
|
||||
view: new ol.View2D({
|
||||
center: [0, 0],
|
||||
zoom: 2
|
||||
})
|
||||
});
|
||||
var view = map.getView();
|
||||
|
||||
var deviceOrientation = new ol.DeviceOrientation();
|
||||
var track = new ol.dom.Input(document.getElementById('track'));
|
||||
track.bindTo('checked', deviceOrientation, 'tracking');
|
||||
|
||||
deviceOrientation.on('change', function(event) {
|
||||
document.getElementById('alpha').innerHTML = event.target.getAlpha();
|
||||
document.getElementById('beta').innerHTML = event.target.getBeta();
|
||||
document.getElementById('gamma').innerHTML = event.target.getGamma();
|
||||
document.getElementById('heading').innerHTML = event.target.getHeading();
|
||||
});
|
||||
|
||||
// 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(center);
|
||||
});
|
||||
@@ -0,0 +1,7 @@
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.RendererHints');
|
||||
goog.require('ol.View2D');
|
||||
goog.require('ol.interaction');
|
||||
goog.require('ol.interaction.DragRotateAndZoom');
|
||||
goog.require('ol.layer.Tile');
|
||||
goog.require('ol.source.MapQuestOpenAerial');
|
||||
@@ -0,0 +1,57 @@
|
||||
<!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="./">OpenLayers 3 Examples</a>
|
||||
<ul class="nav pull-right">
|
||||
<li><iframe class="github-watch-button" src="http://ghbtns.com/github-btn.html?user=openlayers&repo=ol3&type=watch&count=true"
|
||||
allowtransparency="true" frameborder="0" scrolling="0" height="20" width="90"></iframe></li>
|
||||
<li><a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-hashtags="openlayers"> </a></li>
|
||||
<li><div class="g-plusone-wrapper"><div class="g-plusone" data-size="medium" data-annotation="none"></div></div></li>
|
||||
</ul>
|
||||
</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="loader.js?id=drag-rotate-and-zoom" type="text/javascript"></script>
|
||||
<script src="../resources/social-links.js" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,16 @@
|
||||
var map = new ol.Map({
|
||||
interactions: ol.interaction.defaults().extend([
|
||||
new ol.interaction.DragRotateAndZoom()
|
||||
]),
|
||||
layers: [
|
||||
new ol.layer.Tile({
|
||||
source: new ol.source.MapQuestOpenAerial()
|
||||
})
|
||||
],
|
||||
renderers: ol.RendererHints.createFromQueryData(),
|
||||
target: 'map',
|
||||
view: new ol.View2D({
|
||||
center: [0, 0],
|
||||
zoom: 2
|
||||
})
|
||||
});
|
||||
@@ -0,0 +1,8 @@
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.RendererHint');
|
||||
goog.require('ol.View2D');
|
||||
goog.require('ol.control');
|
||||
goog.require('ol.control.ScaleLine');
|
||||
goog.require('ol.control.ScaleLineUnits');
|
||||
goog.require('ol.layer.Tile');
|
||||
goog.require('ol.source.TileWMS');
|
||||
@@ -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>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="./">OpenLayers 3 Examples</a>
|
||||
<ul class="nav pull-right">
|
||||
<li><iframe class="github-watch-button" src="http://ghbtns.com/github-btn.html?user=openlayers&repo=ol3&type=watch&count=true"
|
||||
allowtransparency="true" frameborder="0" scrolling="0" height="20" width="90"></iframe></li>
|
||||
<li><a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-hashtags="openlayers"> </a></li>
|
||||
<li><div class="g-plusone-wrapper"><div class="g-plusone" data-size="medium" data-annotation="none"></div></div></li>
|
||||
</ul>
|
||||
</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="loader.js?id=epsg-4326" type="text/javascript"></script>
|
||||
<script src="../resources/social-links.js" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,29 @@
|
||||
var layers = [
|
||||
new ol.layer.Tile({
|
||||
source: new ol.source.TileWMS({
|
||||
url: 'http://vmap0.tiles.osgeo.org/wms/vmap0',
|
||||
params: {
|
||||
'VERSION': '1.1.1',
|
||||
'LAYERS': 'basic',
|
||||
'FORMAT': 'image/jpeg'
|
||||
}
|
||||
})
|
||||
})
|
||||
];
|
||||
|
||||
var map = new ol.Map({
|
||||
controls: ol.control.defaults().extend([
|
||||
new ol.control.ScaleLine({
|
||||
units: ol.control.ScaleLineUnits.DEGREES
|
||||
})
|
||||
]),
|
||||
layers: layers,
|
||||
// The OSgeo server does not set cross origin headers, so we cannot use WebGL
|
||||
renderers: [ol.RendererHint.CANVAS, ol.RendererHint.DOM],
|
||||
target: 'map',
|
||||
view: new ol.View2D({
|
||||
projection: 'EPSG:4326',
|
||||
center: [0, 0],
|
||||
zoom: 2
|
||||
})
|
||||
});
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -0,0 +1,5 @@
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.RendererHint');
|
||||
goog.require('ol.View2D');
|
||||
goog.require('ol.layer.Tile');
|
||||
goog.require('ol.source.OSM');
|
||||
@@ -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>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="./">OpenLayers 3 Examples</a>
|
||||
<ul class="nav pull-right">
|
||||
<li><iframe class="github-watch-button" src="http://ghbtns.com/github-btn.html?user=openlayers&repo=ol3&type=watch&count=true"
|
||||
allowtransparency="true" frameborder="0" scrolling="0" height="20" width="90"></iframe></li>
|
||||
<li><a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-hashtags="openlayers"> </a></li>
|
||||
<li><div class="g-plusone-wrapper"><div class="g-plusone" data-size="medium" data-annotation="none"></div></div></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container-fluid">
|
||||
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<div id="map" class="map"></div>
|
||||
<a id="export-jpeg" class="btn" download="map.jpeg"><i class="icon-download"></i> Export JPEG</a>
|
||||
<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 JPEG or 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, jpeg, png, openstreetmap</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="loader.js?id=export-map" type="text/javascript"></script>
|
||||
<script src="../resources/social-links.js" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,23 @@
|
||||
var map = new ol.Map({
|
||||
layers: [
|
||||
new ol.layer.Tile({
|
||||
source: new ol.source.OSM()
|
||||
})
|
||||
],
|
||||
renderer: ol.RendererHint.CANVAS,
|
||||
target: 'map',
|
||||
view: new ol.View2D({
|
||||
center: [0, 0],
|
||||
zoom: 2
|
||||
})
|
||||
});
|
||||
|
||||
var exportJPEGElement = document.getElementById('export-jpeg');
|
||||
exportJPEGElement.addEventListener('click', function(e) {
|
||||
e.target.href = map.getRenderer().getCanvas().toDataURL('image/jpeg');
|
||||
}, false);
|
||||
|
||||
var exportPNGElement = document.getElementById('export-png');
|
||||
exportPNGElement.addEventListener('click', function(e) {
|
||||
e.target.href = map.getRenderer().getCanvas().toDataURL('image/png');
|
||||
}, false);
|
||||
@@ -0,0 +1,9 @@
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.RendererHint');
|
||||
goog.require('ol.View2D');
|
||||
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');
|
||||
@@ -0,0 +1,69 @@
|
||||
<!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:full-screen {
|
||||
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="./">OpenLayers 3 Examples</a>
|
||||
<ul class="nav pull-right">
|
||||
<li><iframe class="github-watch-button" src="http://ghbtns.com/github-btn.html?user=openlayers&repo=ol3&type=watch&count=true"
|
||||
allowtransparency="true" frameborder="0" scrolling="0" height="20" width="90"></iframe></li>
|
||||
<li><a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-hashtags="openlayers"> </a></li>
|
||||
<li><div class="g-plusone-wrapper"><div class="g-plusone" data-size="medium" data-annotation="none"></div></div></li>
|
||||
</ul>
|
||||
</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="loader.js?id=full-screen-drag-rotate-and-zoom" type="text/javascript"></script>
|
||||
<script src="../resources/social-links.js" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,24 @@
|
||||
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: 'Ar33pRUvQOdESG8m_T15MUmNz__E1twPo42bFx9jvdDePhX0PNgAcEm44OVTS7tt',
|
||||
style: 'Aerial'
|
||||
})
|
||||
})
|
||||
],
|
||||
// Use the canvas renderer because it's currently the fastest
|
||||
renderer: ol.RendererHint.CANVAS,
|
||||
target: 'map',
|
||||
view: new ol.View2D({
|
||||
center: [-33519607, 5616436],
|
||||
rotation: -Math.PI / 8,
|
||||
zoom: 8
|
||||
})
|
||||
});
|
||||
@@ -0,0 +1,7 @@
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.RendererHints');
|
||||
goog.require('ol.View2D');
|
||||
goog.require('ol.control');
|
||||
goog.require('ol.control.FullScreen');
|
||||
goog.require('ol.layer.Tile');
|
||||
goog.require('ol.source.BingMaps');
|
||||
@@ -0,0 +1,69 @@
|
||||
<!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:full-screen {
|
||||
height: 100%;
|
||||
}
|
||||
</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="./">OpenLayers 3 Examples</a>
|
||||
<ul class="nav pull-right">
|
||||
<li><iframe class="github-watch-button" src="http://ghbtns.com/github-btn.html?user=openlayers&repo=ol3&type=watch&count=true"
|
||||
allowtransparency="true" frameborder="0" scrolling="0" height="20" width="90"></iframe></li>
|
||||
<li><a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-hashtags="openlayers"> </a></li>
|
||||
<li><div class="g-plusone-wrapper"><div class="g-plusone" data-size="medium" data-annotation="none"></div></div></li>
|
||||
</ul>
|
||||
</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="loader.js?id=full-screen" type="text/javascript"></script>
|
||||
<script src="../resources/social-links.js" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,21 @@
|
||||
var view = new ol.View2D({
|
||||
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: 'Ar33pRUvQOdESG8m_T15MUmNz__E1twPo42bFx9jvdDePhX0PNgAcEm44OVTS7tt',
|
||||
style: 'Aerial'
|
||||
})
|
||||
})
|
||||
],
|
||||
renderers: ol.RendererHints.createFromQueryData(),
|
||||
target: 'map',
|
||||
view: view
|
||||
});
|
||||
@@ -0,0 +1,8 @@
|
||||
goog.require('ol.Geolocation');
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.Overlay');
|
||||
goog.require('ol.RendererHints');
|
||||
goog.require('ol.View2D');
|
||||
goog.require('ol.dom.Input');
|
||||
goog.require('ol.layer.Tile');
|
||||
goog.require('ol.source.OSM');
|
||||
@@ -0,0 +1,77 @@
|
||||
<!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>
|
||||
.icon-flag {
|
||||
font-size: 22px;
|
||||
text-shadow: 2px 2px 3px #013;
|
||||
}
|
||||
.tooltip-inner {
|
||||
white-space: nowrap;
|
||||
}
|
||||
</style>
|
||||
<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="./">OpenLayers 3 Examples</a>
|
||||
<ul class="nav pull-right">
|
||||
<li><iframe class="github-watch-button" src="http://ghbtns.com/github-btn.html?user=openlayers&repo=ol3&type=watch&count=true"
|
||||
allowtransparency="true" frameborder="0" scrolling="0" height="20" width="90"></iframe></li>
|
||||
<li><a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-hashtags="openlayers"> </a></li>
|
||||
<li><div class="g-plusone-wrapper"><div class="g-plusone" data-size="medium" data-annotation="none"></div></div></li>
|
||||
</ul>
|
||||
</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="jquery.min.js" type="text/javascript"></script>
|
||||
<script src="../resources/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
|
||||
<script src="loader.js?id=geolocation" type="text/javascript"></script>
|
||||
<script src="../resources/social-links.js" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,45 @@
|
||||
var map = new ol.Map({
|
||||
layers: [
|
||||
new ol.layer.Tile({
|
||||
source: new ol.source.OSM()
|
||||
})
|
||||
],
|
||||
renderers: ol.RendererHints.createFromQueryData(),
|
||||
target: 'map',
|
||||
view: new ol.View2D({
|
||||
center: [0, 0],
|
||||
zoom: 2
|
||||
})
|
||||
});
|
||||
|
||||
var geolocation = new ol.Geolocation();
|
||||
geolocation.bindTo('projection', map.getView());
|
||||
|
||||
var track = new ol.dom.Input(document.getElementById('track'));
|
||||
track.bindTo('checked', geolocation, 'tracking');
|
||||
|
||||
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]');
|
||||
});
|
||||
|
||||
var marker = new ol.Overlay({
|
||||
element: /** @type {Element} */ ($('<i/>').addClass('icon-flag').get(0))
|
||||
});
|
||||
map.addOverlay(marker);
|
||||
// bind the marker position to the device location.
|
||||
marker.bindTo('position', geolocation);
|
||||
|
||||
geolocation.on('change:accuracy', function() {
|
||||
$(marker.getElement()).tooltip({
|
||||
title: this.getAccuracy() + 'm from this point'
|
||||
});
|
||||
});
|
||||
geolocation.on('error', function(error) {
|
||||
var info = document.getElementById('info');
|
||||
info.innerHTML = error.message;
|
||||
info.style.display = '';
|
||||
});
|
||||
@@ -0,0 +1,10 @@
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.RendererHint');
|
||||
goog.require('ol.View2D');
|
||||
goog.require('ol.layer.Tile');
|
||||
goog.require('ol.layer.Vector');
|
||||
goog.require('ol.parser.GeoJSON');
|
||||
goog.require('ol.source.TileWMS');
|
||||
goog.require('ol.source.Vector');
|
||||
goog.require('ol.style.Stroke');
|
||||
goog.require('ol.style.Style');
|
||||
@@ -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>Get feature info example</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="navbar navbar-inverse navbar-fixed-top">
|
||||
<div class="navbar-inner">
|
||||
<div class="container">
|
||||
<a class="brand" href="./">OpenLayers 3 Examples</a>
|
||||
<ul class="nav pull-right">
|
||||
<li><iframe class="github-watch-button" src="http://ghbtns.com/github-btn.html?user=openlayers&repo=ol3&type=watch&count=true"
|
||||
allowtransparency="true" frameborder="0" scrolling="0" height="20" width="90"></iframe></li>
|
||||
<li><a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-hashtags="openlayers"> </a></li>
|
||||
<li><div class="g-plusone-wrapper"><div class="g-plusone" data-size="medium" data-annotation="none"></div></div></li>
|
||||
</ul>
|
||||
</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</h4>
|
||||
<p id="shortdesc">Example of a WMS layer and a vector layer, both configured to provide feature information on click.</p>
|
||||
<div id="docs">
|
||||
<p>See the <a href="getfeatureinfo.js" target="_blank">getfeatureinfo.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">getfeatureinfo</div>
|
||||
</div>
|
||||
<div class="span4 offset4">
|
||||
<div id="info" class="alert alert-success">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="loader.js?id=getfeatureinfo" type="text/javascript"></script>
|
||||
<script src="../resources/social-links.js" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,44 @@
|
||||
var wms = new ol.layer.Tile({
|
||||
source: new ol.source.TileWMS({
|
||||
url: 'http://demo.opengeo.org/geoserver/wms',
|
||||
params: {'LAYERS': 'ne:ne'}
|
||||
})
|
||||
});
|
||||
|
||||
var vector = new ol.layer.Vector({
|
||||
source: new ol.source.Vector({
|
||||
parser: new ol.parser.GeoJSON(),
|
||||
url: 'data/countries.geojson'
|
||||
}),
|
||||
style: new ol.style.Style({
|
||||
symbolizers: [
|
||||
new ol.style.Stroke({
|
||||
color: '#33cc66',
|
||||
width: 2
|
||||
})
|
||||
]
|
||||
}),
|
||||
transformFeatureInfo: function(features) {
|
||||
return features.length > 0 ?
|
||||
features[0].getFeatureId() + ': ' + features[0].get('name') : ' ';
|
||||
}
|
||||
});
|
||||
|
||||
var map = new ol.Map({
|
||||
layers: [wms, vector],
|
||||
renderer: ol.RendererHint.CANVAS,
|
||||
target: 'map',
|
||||
view: new ol.View2D({
|
||||
center: [0, 0],
|
||||
zoom: 1
|
||||
})
|
||||
});
|
||||
|
||||
map.on('click', function(evt) {
|
||||
map.getFeatureInfo({
|
||||
pixel: evt.getPixel(),
|
||||
success: function(featureInfoByLayer) {
|
||||
document.getElementById('info').innerHTML = featureInfoByLayer.join('');
|
||||
}
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,11 @@
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.RendererHint');
|
||||
goog.require('ol.View2D');
|
||||
goog.require('ol.layer.Tile');
|
||||
goog.require('ol.layer.Vector');
|
||||
goog.require('ol.parser.ogc.GML_v3');
|
||||
goog.require('ol.source.MapQuestOpenAerial');
|
||||
goog.require('ol.source.Vector');
|
||||
goog.require('ol.style.Fill');
|
||||
goog.require('ol.style.Stroke');
|
||||
goog.require('ol.style.Style');
|
||||
@@ -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>GML example</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="navbar navbar-inverse navbar-fixed-top">
|
||||
<div class="navbar-inner">
|
||||
<div class="container">
|
||||
<a class="brand" href="./">OpenLayers 3 Examples</a>
|
||||
<ul class="nav pull-right">
|
||||
<li><iframe class="github-watch-button" src="http://ghbtns.com/github-btn.html?user=openlayers&repo=ol3&type=watch&count=true"
|
||||
allowtransparency="true" frameborder="0" scrolling="0" height="20" width="90"></iframe></li>
|
||||
<li><a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-hashtags="openlayers"> </a></li>
|
||||
<li><div class="g-plusone-wrapper"><div class="g-plusone" data-size="medium" data-annotation="none"></div></div></li>
|
||||
</ul>
|
||||
</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">GML example</h4>
|
||||
<p id="shortdesc">Example of using the GML parser.</p>
|
||||
<div id="docs">
|
||||
<p>See the <a href="gml.js" target="_blank">gml.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">GML</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="loader.js?id=gml" type="text/javascript"></script>
|
||||
<script src="../resources/social-links.js" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,31 @@
|
||||
var raster = new ol.layer.Tile({
|
||||
source: new ol.source.MapQuestOpenAerial()
|
||||
});
|
||||
|
||||
var vector = new ol.layer.Vector({
|
||||
source: new ol.source.Vector({
|
||||
parser: new ol.parser.ogc.GML_v3(),
|
||||
url: 'data/gml/topp-states-wfs.xml'
|
||||
}),
|
||||
style: new ol.style.Style({
|
||||
symbolizers: [
|
||||
new ol.style.Fill({
|
||||
color: '#ffffff',
|
||||
opacity: 0.25
|
||||
}),
|
||||
new ol.style.Stroke({
|
||||
color: '#6666ff'
|
||||
})
|
||||
]
|
||||
})
|
||||
});
|
||||
|
||||
var map = new ol.Map({
|
||||
layers: [raster, vector],
|
||||
renderer: ol.RendererHint.CANVAS,
|
||||
target: 'map',
|
||||
view: new ol.View2D({
|
||||
center: [-10997171, 4658434],
|
||||
zoom: 4
|
||||
})
|
||||
});
|
||||
@@ -0,0 +1,8 @@
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.RendererHint');
|
||||
goog.require('ol.View2D');
|
||||
goog.require('ol.layer.Tile');
|
||||
goog.require('ol.layer.Vector');
|
||||
goog.require('ol.parser.GPX');
|
||||
goog.require('ol.source.OSM');
|
||||
goog.require('ol.source.Vector');
|
||||
@@ -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>GPX example</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="navbar navbar-inverse navbar-fixed-top">
|
||||
<div class="navbar-inner">
|
||||
<div class="container">
|
||||
<a class="brand" href="./">OpenLayers 3 Examples</a>
|
||||
<ul class="nav pull-right">
|
||||
<li><iframe class="github-watch-button" src="http://ghbtns.com/github-btn.html?user=openlayers&repo=ol3&type=watch&count=true"
|
||||
allowtransparency="true" frameborder="0" scrolling="0" height="20" width="90"></iframe></li>
|
||||
<li><a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-hashtags="openlayers"> </a></li>
|
||||
<li><div class="g-plusone-wrapper"><div class="g-plusone" data-size="medium" data-annotation="none"></div></div></li>
|
||||
</ul>
|
||||
</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">GPX example</h4>
|
||||
<p id="shortdesc">Example of using the GPX parser.</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="loader.js?id=gpx" type="text/javascript"></script>
|
||||
<script src="../resources/social-links.js" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,35 @@
|
||||
var raster = new ol.layer.Tile({
|
||||
source: new ol.source.OSM()
|
||||
});
|
||||
|
||||
var vector = new ol.layer.Vector({
|
||||
source: new ol.source.Vector({
|
||||
parser: new ol.parser.GPX(),
|
||||
url: 'data/gpx/yahoo.xml'
|
||||
})
|
||||
});
|
||||
|
||||
var map = new ol.Map({
|
||||
layers: [raster, vector],
|
||||
renderer: ol.RendererHint.CANVAS,
|
||||
target: 'map',
|
||||
view: new ol.View2D({
|
||||
center: [-7916461.9312699, 5226343.9091441],
|
||||
zoom: 11
|
||||
})
|
||||
});
|
||||
|
||||
map.on(['click', 'mousemove'], function(evt) {
|
||||
map.getFeatures({
|
||||
pixel: evt.getPixel(),
|
||||
layers: [vector],
|
||||
success: function(featuresByLayer) {
|
||||
var features = featuresByLayer[0];
|
||||
var info = [];
|
||||
for (var i = 0, ii = features.length; i < ii; ++i) {
|
||||
info.push(features[i].get('name') + ': ' + features[i].get('type'));
|
||||
}
|
||||
document.getElementById('info').innerHTML = info.join(', ') || ' ';
|
||||
}
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,7 @@
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.RendererHint');
|
||||
goog.require('ol.View2D');
|
||||
goog.require('ol.layer.Tile');
|
||||
goog.require('ol.proj');
|
||||
goog.require('ol.source.BingMaps');
|
||||
goog.require('ol.webgl.SUPPORTED');
|
||||
@@ -0,0 +1,79 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="chrome=1">
|
||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
|
||||
<link rel="stylesheet" href="../css/ol.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/layout.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
|
||||
<title>Hue/saturation example</title>
|
||||
<style>
|
||||
#reset-hue {
|
||||
min-width: 90px;
|
||||
}
|
||||
#reset-saturation {
|
||||
min-width: 124px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="navbar navbar-inverse navbar-fixed-top">
|
||||
<div class="navbar-inner">
|
||||
<div class="container">
|
||||
<a class="brand" href="./">OpenLayers 3 Examples</a>
|
||||
<ul class="nav pull-right">
|
||||
<li><iframe class="github-watch-button" src="http://ghbtns.com/github-btn.html?user=openlayers&repo=ol3&type=watch&count=true"
|
||||
allowtransparency="true" frameborder="0" scrolling="0" height="20" width="90"></iframe></li>
|
||||
<li><a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-hashtags="openlayers"> </a></li>
|
||||
<li><div class="g-plusone-wrapper"><div class="g-plusone" data-size="medium" data-annotation="none"></div></div></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container-fluid">
|
||||
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<div id="map" class="map"></div>
|
||||
|
||||
<div id="no-webgl" class="alert alert-error" style="display: none">
|
||||
This example requires a browser that supports <a href="http://get.webgl.org/">WebGL</a>.
|
||||
</div>
|
||||
|
||||
<div class="btn-group">
|
||||
<button id="increase-hue"><i class="icon-plus"></i></button>
|
||||
<button id="reset-hue">Hue</button>
|
||||
<button id="decrease-hue"><i class="icon-minus"></i></button>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<button id="increase-saturation"><i class="icon-plus"></i></button>
|
||||
<button id="reset-saturation">Saturation</button>
|
||||
<button id="decrease-saturation"><i class="icon-minus"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row-fluid">
|
||||
|
||||
<div class="span12">
|
||||
<h4 id="title">Hue/saturation example</h4>
|
||||
<p id="shortdesc">Example of hue/saturation control on the client (WebGL only).</p>
|
||||
<div id="docs">
|
||||
<p>See the <a href="hue-saturation.js" target="_blank">hue-saturation.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">hue, saturation, webgl</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="loader.js?id=hue-saturation" type="text/javascript"></script>
|
||||
<script src="../resources/social-links.js" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,71 @@
|
||||
function setResetHueButtonHTML() {
|
||||
resetHue.innerHTML = 'Hue (' + layer.getHue().toFixed(2) + ')';
|
||||
}
|
||||
|
||||
function setResetSaturationButtonHTML() {
|
||||
resetSaturation.innerHTML = 'Saturation (' +
|
||||
layer.getSaturation().toFixed(2) + ')';
|
||||
}
|
||||
|
||||
if (!ol.webgl.SUPPORTED) {
|
||||
var info = document.getElementById('no-webgl');
|
||||
/**
|
||||
* display error message
|
||||
*/
|
||||
info.style.display = '';
|
||||
} else {
|
||||
var layer = new ol.layer.Tile({
|
||||
source: new ol.source.BingMaps({
|
||||
key: 'Ar33pRUvQOdESG8m_T15MUmNz__E1twPo42bFx9jvdDePhX0PNgAcEm44OVTS7tt',
|
||||
style: 'Aerial'
|
||||
})
|
||||
});
|
||||
|
||||
var map = new ol.Map({
|
||||
layers: [layer],
|
||||
renderer: ol.RendererHint.WEBGL,
|
||||
target: 'map',
|
||||
view: new ol.View2D({
|
||||
center: ol.proj.transform([-9.375, 51.483333], 'EPSG:4326', 'EPSG:3857'),
|
||||
zoom: 15
|
||||
})
|
||||
});
|
||||
|
||||
var increaseHue = document.getElementById('increase-hue');
|
||||
var resetHue = document.getElementById('reset-hue');
|
||||
var decreaseHue = document.getElementById('decrease-hue');
|
||||
|
||||
setResetHueButtonHTML();
|
||||
|
||||
increaseHue.addEventListener('click', function() {
|
||||
layer.setHue(layer.getHue() + 0.25);
|
||||
setResetHueButtonHTML();
|
||||
}, false);
|
||||
resetHue.addEventListener('click', function() {
|
||||
layer.setHue(0);
|
||||
setResetHueButtonHTML();
|
||||
}, false);
|
||||
decreaseHue.addEventListener('click', function() {
|
||||
layer.setHue(layer.getHue() - 0.25);
|
||||
setResetHueButtonHTML();
|
||||
}, false);
|
||||
|
||||
var increaseSaturation = document.getElementById('increase-saturation');
|
||||
var resetSaturation = document.getElementById('reset-saturation');
|
||||
var decreaseSaturation = document.getElementById('decrease-saturation');
|
||||
|
||||
setResetSaturationButtonHTML();
|
||||
|
||||
increaseSaturation.addEventListener('click', function() {
|
||||
layer.setSaturation(layer.getSaturation() + 0.25);
|
||||
setResetSaturationButtonHTML();
|
||||
}, false);
|
||||
resetSaturation.addEventListener('click', function() {
|
||||
layer.setSaturation(1);
|
||||
setResetSaturationButtonHTML();
|
||||
}, false);
|
||||
decreaseSaturation.addEventListener('click', function() {
|
||||
layer.setSaturation(Math.max(layer.getSaturation() - 0.25, 0));
|
||||
setResetSaturationButtonHTML();
|
||||
}, false);
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.Overlay');
|
||||
goog.require('ol.RendererHint');
|
||||
goog.require('ol.View2D');
|
||||
goog.require('ol.layer.Tile');
|
||||
goog.require('ol.layer.Vector');
|
||||
goog.require('ol.parser.GeoJSON');
|
||||
goog.require('ol.source.TileJSON');
|
||||
goog.require('ol.source.Vector');
|
||||
goog.require('ol.style.Icon');
|
||||
goog.require('ol.style.Style');
|
||||
@@ -0,0 +1,68 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="chrome=1">
|
||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
|
||||
<link rel="stylesheet" href="../css/ol.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/layout.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
|
||||
<title>Vector Icon Example</title>
|
||||
<style>
|
||||
#map {
|
||||
position: relative;
|
||||
}
|
||||
#popup {
|
||||
padding-bottom: 45px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="navbar navbar-inverse navbar-fixed-top">
|
||||
<div class="navbar-inner">
|
||||
<div class="container">
|
||||
<a class="brand" href="./">OpenLayers 3 Examples</a>
|
||||
<ul class="nav pull-right">
|
||||
<li><iframe class="github-watch-button" src="http://ghbtns.com/github-btn.html?user=openlayers&repo=ol3&type=watch&count=true"
|
||||
allowtransparency="true" frameborder="0" scrolling="0" height="20" width="90"></iframe></li>
|
||||
<li><a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-hashtags="openlayers"> </a></li>
|
||||
<li><div class="g-plusone-wrapper"><div class="g-plusone" data-size="medium" data-annotation="none"></div></div></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container-fluid">
|
||||
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<div id="map" class="map">
|
||||
<div id="popup"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row-fluid">
|
||||
|
||||
<div class="span12">
|
||||
<h4 id="title">Icon example</h4>
|
||||
<p id="shortdesc">Example using an icon to symbolize a point.</p>
|
||||
<div id="docs">
|
||||
<p>See the <a href="icon.js" target="_blank">icon.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">vector, style, icon, marker, popup</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="jquery.min.js" type="text/javascript"></script>
|
||||
<script src="../resources/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
|
||||
<script src="loader.js?id=icon" type="text/javascript"></script>
|
||||
<script src="../resources/social-links.js" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,79 @@
|
||||
var raster = new ol.layer.Tile({
|
||||
source: new ol.source.TileJSON({
|
||||
url: 'http://api.tiles.mapbox.com/v3/mapbox.geography-class.jsonp'
|
||||
})
|
||||
});
|
||||
|
||||
var data = {
|
||||
type: 'FeatureCollection',
|
||||
features: [{
|
||||
type: 'Feature',
|
||||
properties: {
|
||||
name: 'Null Island',
|
||||
population: 4000,
|
||||
rainfall: 500
|
||||
},
|
||||
geometry: {
|
||||
type: 'Point',
|
||||
coordinates: [0, 0]
|
||||
}
|
||||
}]
|
||||
};
|
||||
|
||||
var style = new ol.style.Style({
|
||||
symbolizers: [
|
||||
new ol.style.Icon({
|
||||
url: 'data/icon.png',
|
||||
yOffset: -22
|
||||
})
|
||||
]
|
||||
});
|
||||
|
||||
var vector = new ol.layer.Vector({
|
||||
source: new ol.source.Vector({
|
||||
parser: new ol.parser.GeoJSON(),
|
||||
data: data
|
||||
}),
|
||||
style: style
|
||||
});
|
||||
|
||||
var map = new ol.Map({
|
||||
layers: [raster, vector],
|
||||
renderer: ol.RendererHint.CANVAS,
|
||||
target: 'map',
|
||||
view: new ol.View2D({
|
||||
center: [0, 0],
|
||||
zoom: 3
|
||||
})
|
||||
});
|
||||
|
||||
var element = document.getElementById('popup');
|
||||
|
||||
var popup = new ol.Overlay({
|
||||
element: element
|
||||
});
|
||||
map.addOverlay(popup);
|
||||
|
||||
|
||||
map.on('click', function(evt) {
|
||||
map.getFeatures({
|
||||
pixel: evt.getPixel(),
|
||||
layers: [vector],
|
||||
success: function(layerFeatures) {
|
||||
var feature = layerFeatures[0][0];
|
||||
if (feature) {
|
||||
var geometry = feature.getGeometry();
|
||||
var coord = geometry.getCoordinates();
|
||||
popup.setPosition(coord);
|
||||
$(element).popover({
|
||||
'placement': 'top',
|
||||
'html': true,
|
||||
'content': feature.get('name')
|
||||
});
|
||||
$(element).popover('show');
|
||||
} else {
|
||||
$(element).popover('destroy');
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,216 @@
|
||||
<!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>
|
||||
.example {
|
||||
height: 140px;
|
||||
padding: 3px;
|
||||
background-color: #eee;
|
||||
border-radius: 3px;
|
||||
margin-bottom: 10px;
|
||||
overflow: auto;
|
||||
}
|
||||
.example:hover {
|
||||
background-color: #ddd;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-button {
|
||||
width: 0;
|
||||
height: 0;
|
||||
display: none;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.10),inset 0 -1px 0 rgba(0, 0, 0, 0.07);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-corner {
|
||||
background-color: transparent;
|
||||
}
|
||||
</style>
|
||||
<script type="text/javascript" src="Jugl.js"></script>
|
||||
<script type="text/javascript" src="example-list.js"></script>
|
||||
<script type="text/javascript">
|
||||
var template, target;
|
||||
|
||||
function listExamples(examples) {
|
||||
target.innerHTML = "";
|
||||
var node = template.process({
|
||||
context: {examples: examples},
|
||||
clone: true,
|
||||
parent: target
|
||||
});
|
||||
document.getElementById("count").innerHTML = "(" + examples.length + ")";
|
||||
}
|
||||
|
||||
var timerId;
|
||||
function inputChange() {
|
||||
if (timerId) {
|
||||
window.clearTimeout(timerId);
|
||||
}
|
||||
var text = this.value;
|
||||
timerId = window.setTimeout(function() {
|
||||
filterList(text);
|
||||
}, 500);
|
||||
}
|
||||
|
||||
function filterList(text) {
|
||||
var examples;
|
||||
if (text.length < 2) {
|
||||
examples = info.examples;
|
||||
} else {
|
||||
var words = text.split(/\W+/);
|
||||
var scores = {};
|
||||
for(var i=0; i<words.length; ++i) {
|
||||
var word = words[i].toLowerCase();
|
||||
var dict = info.index[word];
|
||||
var updateScores = function() {
|
||||
for(exIndex in dict) {
|
||||
var count = dict[exIndex];
|
||||
if(scores[exIndex]) {
|
||||
if(scores[exIndex][word]) {
|
||||
scores[exIndex][word] += count;
|
||||
} else {
|
||||
scores[exIndex][word] = count;
|
||||
}
|
||||
} else {
|
||||
scores[exIndex] = {};
|
||||
scores[exIndex][word] = count;
|
||||
}
|
||||
}
|
||||
};
|
||||
if (dict) {
|
||||
updateScores();
|
||||
} else {
|
||||
var r;
|
||||
for (idx in info.index) {
|
||||
r = new RegExp(word);
|
||||
if (r.test(idx)) {
|
||||
dict = info.index[idx];
|
||||
updateScores();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
examples = [];
|
||||
for (var j in scores) {
|
||||
var ex = info.examples[j];
|
||||
ex.score = scores[j];
|
||||
examples.push(ex);
|
||||
}
|
||||
// sort examples by first by number of words matched, then
|
||||
// by word frequency
|
||||
examples.sort(function(a, b) {
|
||||
var cmp;
|
||||
var aWords = 0, bWords = 0;
|
||||
var aScore = 0, bScore = 0;
|
||||
for (var i in a.score) {
|
||||
aScore += a.score[i];
|
||||
aWords += 1;
|
||||
}
|
||||
for (var j in b.score) {
|
||||
bScore += b.score[j];
|
||||
bWords += 1;
|
||||
}
|
||||
if (aWords == bWords) {
|
||||
cmp = bScore - aScore;
|
||||
} else {
|
||||
cmp = bWords - aWords;
|
||||
}
|
||||
return cmp;
|
||||
});
|
||||
}
|
||||
listExamples(examples);
|
||||
}
|
||||
|
||||
function parseQuery() {
|
||||
var params = {};
|
||||
var list = window.location.search.substring(1).split("&");
|
||||
for (var i = 0; i < list.length; ++i) {
|
||||
var pair = list[i].split("=");
|
||||
if (pair.length == 2) {
|
||||
params[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1]);
|
||||
}
|
||||
}
|
||||
if (params["q"]) {
|
||||
var input = document.getElementById("keywords");
|
||||
input.value = params["q"];
|
||||
inputChange.call(input);
|
||||
}
|
||||
}
|
||||
|
||||
window.onload = function() {
|
||||
for (var i = 0; i < info.examples.length; ++i) {
|
||||
info.examples[i].link += window.location.search;
|
||||
}
|
||||
// document.getElementById('keywords').focus();
|
||||
template = new jugl.Template("template");
|
||||
target = document.getElementById("examples");
|
||||
listExamples(info.examples);
|
||||
document.getElementById("keywords").onkeyup = inputChange;
|
||||
parseQuery();
|
||||
};
|
||||
</script>
|
||||
|
||||
<title>OpenLayers 3 Examples</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="navbar navbar-inverse navbar-fixed-top">
|
||||
<div class="navbar-inner">
|
||||
<div class="container">
|
||||
<a class="brand" href="./">OpenLayers 3 Examples</a>
|
||||
<form class="navbar-search pull-left">
|
||||
<input name="q" type="text" id="keywords" class="search-query" placeholder="Search">
|
||||
<span id="count"></span>
|
||||
</form>
|
||||
<ul class="nav pull-right">
|
||||
<li><iframe class="github-watch-button" src="http://ghbtns.com/github-btn.html?user=openlayers&repo=ol3&type=watch&count=true"
|
||||
allowtransparency="true" frameborder="0" scrolling="0" height="20" width="90"></iframe></li>
|
||||
<li><a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-hashtags="openlayers"> </a></li>
|
||||
<li><div class="g-plusone-wrapper"><div class="g-plusone" data-size="medium" data-annotation="none"></div></div></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container-fluid">
|
||||
|
||||
<div id="examples"></div>
|
||||
|
||||
<div style="display: none;">
|
||||
<div id="template">
|
||||
<div class="span4 example" jugl:repeat="example examples">
|
||||
<a jugl:attributes="href example.link" class="mainlink">
|
||||
<strong><span jugl:replace="example.title">title</span></strong>
|
||||
<small jugl:content="'(' + example.example + ')'"></small>
|
||||
</a>
|
||||
<p><div jugl:content="example.shortdesc"></div></p>
|
||||
<p><div jugl:content="example.classes"></div></p>
|
||||
<p><small jugl:content="'tags: ' + example.tags"></small></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="../resources/social-links.js" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Vendored
+4
File diff suppressed because one or more lines are too long
@@ -0,0 +1,13 @@
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.RendererHint');
|
||||
goog.require('ol.View2D');
|
||||
goog.require('ol.expr');
|
||||
goog.require('ol.layer.Tile');
|
||||
goog.require('ol.layer.Vector');
|
||||
goog.require('ol.parser.KML');
|
||||
goog.require('ol.source.Stamen');
|
||||
goog.require('ol.source.Vector');
|
||||
goog.require('ol.style.Fill');
|
||||
goog.require('ol.style.Shape');
|
||||
goog.require('ol.style.Stroke');
|
||||
goog.require('ol.style.Style');
|
||||
@@ -0,0 +1,81 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="chrome=1">
|
||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
|
||||
<link rel="stylesheet" href="../css/ol.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/layout.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
|
||||
<title>Earthquakes in KML</title>
|
||||
<style>
|
||||
#map {
|
||||
position: relative;
|
||||
}
|
||||
#info {
|
||||
position: absolute;
|
||||
height: 1px;
|
||||
width: 1px;
|
||||
z-index: 100;
|
||||
}
|
||||
.tooltip.in {
|
||||
opacity: 1;
|
||||
filter: alpha(opacity=100);
|
||||
}
|
||||
.tooltip.top .tooltip-arrow {
|
||||
border-top-color: white;
|
||||
}
|
||||
.tooltip-inner {
|
||||
border: 2px solid white;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="navbar navbar-inverse navbar-fixed-top">
|
||||
<div class="navbar-inner">
|
||||
<div class="container">
|
||||
<a class="brand" href="./">OpenLayers 3 Examples</a>
|
||||
<ul class="nav pull-right">
|
||||
<li><iframe class="github-watch-button" src="http://ghbtns.com/github-btn.html?user=openlayers&repo=ol3&type=watch&count=true"
|
||||
allowtransparency="true" frameborder="0" scrolling="0" height="20" width="90"></iframe></li>
|
||||
<li><a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-hashtags="openlayers"> </a></li>
|
||||
<li><div class="g-plusone-wrapper"><div class="g-plusone" data-size="medium" data-annotation="none"></div></div></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container-fluid">
|
||||
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<div id="map" class="map"><div id="info"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row-fluid">
|
||||
|
||||
<div class="span12">
|
||||
<h4 id="title">Earthquakes in KML</h4>
|
||||
<p id="shortdesc">Demonstrates the use of a Shape symbolizer to render earthquake locations.</p>
|
||||
<div id="docs">
|
||||
<p>
|
||||
This example parses a KML file and renders the features as a vector layer. The layer is given a <code>ol.style.Style</code> that renders earthquake locations with a size relative to their magnitude. The style uses a <code>ol.style.Shape</code> symbolizer where the <code>size</code> comes from the <code>magnitude</code> attribute on the features.
|
||||
</p>
|
||||
<p>See the <a href="kml-earthquakes.js" target="_blank">kml-earthquakes.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">KML, vector, style</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="jquery.min.js" type="text/javascript"></script>
|
||||
<script src="../resources/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
|
||||
<script src="loader.js?id=kml-earthquakes" type="text/javascript"></script>
|
||||
<script src="../resources/social-links.js" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,67 @@
|
||||
var style = new ol.style.Style({
|
||||
symbolizers: [
|
||||
new ol.style.Shape({
|
||||
size: ol.expr.parse('5 + 20 * (magnitude - 5)'),
|
||||
fill: new ol.style.Fill({
|
||||
color: '#ff9900',
|
||||
opacity: 0.4
|
||||
}),
|
||||
stroke: new ol.style.Stroke({
|
||||
color: '#ffcc00',
|
||||
opacity: 0.2
|
||||
})
|
||||
})
|
||||
]
|
||||
});
|
||||
|
||||
var vector = new ol.layer.Vector({
|
||||
source: new ol.source.Vector({
|
||||
parser: new ol.parser.KML({dimension: 2}),
|
||||
url: 'data/kml/2012_Earthquakes_Mag5.kml'
|
||||
}),
|
||||
style: style
|
||||
});
|
||||
|
||||
var raster = new ol.layer.Tile({
|
||||
source: new ol.source.Stamen({
|
||||
layer: 'toner'
|
||||
})
|
||||
});
|
||||
|
||||
var map = new ol.Map({
|
||||
layers: [raster, vector],
|
||||
renderer: ol.RendererHint.CANVAS,
|
||||
target: 'map',
|
||||
view: new ol.View2D({
|
||||
center: [0, 0],
|
||||
zoom: 2
|
||||
})
|
||||
});
|
||||
|
||||
var info = $('#info');
|
||||
info.tooltip({
|
||||
animation: false,
|
||||
trigger: 'manual'
|
||||
});
|
||||
map.on(['click', 'mousemove'], function(evt) {
|
||||
var pixel = evt.getPixel();
|
||||
info.css({
|
||||
left: pixel[0] + 'px',
|
||||
top: (pixel[1] - 15) + 'px'
|
||||
});
|
||||
map.getFeatures({
|
||||
pixel: pixel,
|
||||
layers: [vector],
|
||||
success: function(layerFeatures) {
|
||||
var feature = layerFeatures[0][0];
|
||||
if (feature) {
|
||||
info.tooltip('hide')
|
||||
.attr('data-original-title', feature.get('name'))
|
||||
.tooltip('fixTitle')
|
||||
.tooltip('show');
|
||||
} else {
|
||||
info.tooltip('hide');
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,8 @@
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.RendererHint');
|
||||
goog.require('ol.View2D');
|
||||
goog.require('ol.layer.Tile');
|
||||
goog.require('ol.layer.Vector');
|
||||
goog.require('ol.parser.KML');
|
||||
goog.require('ol.source.TileWMS');
|
||||
goog.require('ol.source.Vector');
|
||||
@@ -0,0 +1,12 @@
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.RendererHint');
|
||||
goog.require('ol.View2D');
|
||||
goog.require('ol.expr');
|
||||
goog.require('ol.layer.Tile');
|
||||
goog.require('ol.layer.Vector');
|
||||
goog.require('ol.parser.KML');
|
||||
goog.require('ol.source.Stamen');
|
||||
goog.require('ol.source.Vector');
|
||||
goog.require('ol.style.Fill');
|
||||
goog.require('ol.style.Stroke');
|
||||
goog.require('ol.style.Style');
|
||||
@@ -0,0 +1,69 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="chrome=1">
|
||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
|
||||
<link rel="stylesheet" href="../css/ol.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/layout.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
|
||||
<title>Timezones in KML</title>
|
||||
<style>
|
||||
#map {
|
||||
position: relative;
|
||||
}
|
||||
#info {
|
||||
position: absolute;
|
||||
height: 1px;
|
||||
width: 1px;
|
||||
z-index: 100;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="navbar navbar-inverse navbar-fixed-top">
|
||||
<div class="navbar-inner">
|
||||
<div class="container">
|
||||
<a class="brand" href="./">OpenLayers 3 Examples</a>
|
||||
<ul class="nav pull-right">
|
||||
<li><iframe class="github-watch-button" src="http://ghbtns.com/github-btn.html?user=openlayers&repo=ol3&type=watch&count=true"
|
||||
allowtransparency="true" frameborder="0" scrolling="0" height="20" width="90"></iframe></li>
|
||||
<li><a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-hashtags="openlayers"> </a></li>
|
||||
<li><div class="g-plusone-wrapper"><div class="g-plusone" data-size="medium" data-annotation="none"></div></div></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container-fluid">
|
||||
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<div id="map" class="map"><div id="info"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row-fluid">
|
||||
|
||||
<div class="span12">
|
||||
<h4 id="title">Timezones in KML</h4>
|
||||
<p id="shortdesc">Demonstrates rendering timezones from KML.</p>
|
||||
<div id="docs">
|
||||
<p>This example parses a KML file and renders the features as a vector layer. The layer is given a <code>ol.style.Style</code> that fills timezones yellow with an opacity calculated based on the current offset to local noon.</p>
|
||||
<p>See the <a href="kml-timezones.js" target="_blank">kml-timezones.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">KML, vector, style</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="jquery.min.js" type="text/javascript"></script>
|
||||
<script src="../resources/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
|
||||
<script src="loader.js?id=kml-timezones" type="text/javascript"></script>
|
||||
<script src="../resources/social-links.js" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,91 @@
|
||||
/**
|
||||
* Register a function to be used in a symbolizer. Here we want the opacity
|
||||
* of polygons to be based on the offset from local noon. For example, a
|
||||
* timezone where it is currently noon would have an opacity of 0.75. And a
|
||||
* timezone where it is currently midnight would have an opacity of 0. This
|
||||
* doesn't account for daylight savings, so don't use it to plan your vacation.
|
||||
*/
|
||||
ol.expr.register('getOpacity', function() {
|
||||
var feature = this;
|
||||
var offset = 0;
|
||||
var name = feature.get('name'); // e.g. GMT -08:30
|
||||
var match = name.match(/([-+]\d{2}):(\d{2})$/);
|
||||
if (match) {
|
||||
var hours = parseInt(match[1], 10);
|
||||
var minutes = parseInt(match[2], 10);
|
||||
offset = 60 * hours + minutes;
|
||||
}
|
||||
var date = new Date();
|
||||
var local = new Date(date.getTime() +
|
||||
(date.getTimezoneOffset() + offset) * 60000);
|
||||
// offset from local noon (in hours)
|
||||
var delta = Math.abs(12 - local.getHours() + (local.getMinutes() / 60));
|
||||
if (delta > 12) {
|
||||
delta = 24 - delta;
|
||||
}
|
||||
return 0.75 * (1 - delta / 12);
|
||||
});
|
||||
|
||||
var style = new ol.style.Style({
|
||||
symbolizers: [
|
||||
new ol.style.Fill({
|
||||
color: '#ffff33',
|
||||
opacity: ol.expr.parse('getOpacity()')
|
||||
}),
|
||||
new ol.style.Stroke({
|
||||
color: '#ffffff'
|
||||
})
|
||||
]
|
||||
});
|
||||
|
||||
var vector = new ol.layer.Vector({
|
||||
source: new ol.source.Vector({
|
||||
parser: new ol.parser.KML({dimension: 2}),
|
||||
url: 'data/kml/timezones.kml'
|
||||
}),
|
||||
style: style
|
||||
});
|
||||
|
||||
var raster = new ol.layer.Tile({
|
||||
source: new ol.source.Stamen({
|
||||
layer: 'toner'
|
||||
})
|
||||
});
|
||||
|
||||
var map = new ol.Map({
|
||||
layers: [raster, vector],
|
||||
renderer: ol.RendererHint.CANVAS,
|
||||
target: 'map',
|
||||
view: new ol.View2D({
|
||||
center: [0, 0],
|
||||
zoom: 2
|
||||
})
|
||||
});
|
||||
|
||||
var info = $('#info');
|
||||
info.tooltip({
|
||||
animation: false,
|
||||
trigger: 'manual'
|
||||
});
|
||||
map.on(['click', 'mousemove'], function(evt) {
|
||||
var pixel = evt.getPixel();
|
||||
info.css({
|
||||
left: pixel[0] + 'px',
|
||||
top: (pixel[1] - 15) + 'px'
|
||||
});
|
||||
map.getFeatures({
|
||||
pixel: pixel,
|
||||
layers: [vector],
|
||||
success: function(layerFeatures) {
|
||||
var feature = layerFeatures[0][0];
|
||||
if (feature) {
|
||||
info.tooltip('hide')
|
||||
.attr('data-original-title', feature.get('name'))
|
||||
.tooltip('fixTitle')
|
||||
.tooltip('show');
|
||||
} else {
|
||||
info.tooltip('hide');
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
@@ -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>KML example</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="navbar navbar-inverse navbar-fixed-top">
|
||||
<div class="navbar-inner">
|
||||
<div class="container">
|
||||
<a class="brand" href="./">OpenLayers 3 Examples</a>
|
||||
<ul class="nav pull-right">
|
||||
<li><iframe class="github-watch-button" src="http://ghbtns.com/github-btn.html?user=openlayers&repo=ol3&type=watch&count=true"
|
||||
allowtransparency="true" frameborder="0" scrolling="0" height="20" width="90"></iframe></li>
|
||||
<li><a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-hashtags="openlayers"> </a></li>
|
||||
<li><div class="g-plusone-wrapper"><div class="g-plusone" data-size="medium" data-annotation="none"></div></div></li>
|
||||
</ul>
|
||||
</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">KML example</h4>
|
||||
<p id="shortdesc">Example of using the KML parser.</p>
|
||||
<div id="docs">
|
||||
<p>See the <a href="kml.js" target="_blank">kml.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">KML</div>
|
||||
</div>
|
||||
<div class="span4 offset4">
|
||||
<div id="info" class="alert alert-success">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="loader.js?id=kml" type="text/javascript"></script>
|
||||
<script src="../resources/social-links.js" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,46 @@
|
||||
var raster = new ol.layer.Tile({
|
||||
source: new ol.source.TileWMS({
|
||||
url: 'http://vmap0.tiles.osgeo.org/wms/vmap0',
|
||||
crossOrigin: null,
|
||||
params: {
|
||||
'LAYERS': 'basic',
|
||||
'VERSION': '1.1.1',
|
||||
'FORMAT': 'image/jpeg'
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
var vector = new ol.layer.Vector({
|
||||
source: new ol.source.Vector({
|
||||
parser: new ol.parser.KML({
|
||||
maxDepth: 1, dimension: 2, extractStyles: true, extractAttributes: true
|
||||
}),
|
||||
url: 'data/kml/lines.kml'
|
||||
})
|
||||
});
|
||||
|
||||
var map = new ol.Map({
|
||||
layers: [raster, vector],
|
||||
renderer: ol.RendererHint.CANVAS,
|
||||
target: 'map',
|
||||
view: new ol.View2D({
|
||||
projection: 'EPSG:4326',
|
||||
center: [-112.169, 36.099],
|
||||
zoom: 11
|
||||
})
|
||||
});
|
||||
|
||||
map.on(['click', 'mousemove'], function(evt) {
|
||||
map.getFeatures({
|
||||
pixel: evt.getPixel(),
|
||||
layers: [vector],
|
||||
success: function(featuresByLayer) {
|
||||
var features = featuresByLayer[0];
|
||||
var info = [];
|
||||
for (var i = 0, ii = features.length; i < ii; ++i) {
|
||||
info.push(features[i].get('name'));
|
||||
}
|
||||
document.getElementById('info').innerHTML = info.join(', ') || ' ';
|
||||
}
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,9 @@
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.RendererHints');
|
||||
goog.require('ol.View2D');
|
||||
goog.require('ol.dom.Input');
|
||||
goog.require('ol.layer.Group');
|
||||
goog.require('ol.layer.Tile');
|
||||
goog.require('ol.proj');
|
||||
goog.require('ol.source.MapQuestOpenAerial');
|
||||
goog.require('ol.source.TileJSON');
|
||||
@@ -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="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/layout.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
|
||||
<style>
|
||||
#layertree li > span {
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
<title>Layer group example</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="navbar navbar-inverse navbar-fixed-top">
|
||||
<div class="navbar-inner">
|
||||
<div class="container">
|
||||
<a class="brand" href="./">OpenLayers 3 Examples</a>
|
||||
<ul class="nav pull-right">
|
||||
<li><iframe class="github-watch-button" src="http://ghbtns.com/github-btn.html?user=openlayers&repo=ol3&type=watch&count=true"
|
||||
allowtransparency="true" frameborder="0" scrolling="0" height="20" width="90"></iframe></li>
|
||||
<li><a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-hashtags="openlayers"> </a></li>
|
||||
<li><div class="g-plusone-wrapper"><div class="g-plusone" data-size="medium" data-annotation="none"></div></div></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container-fluid">
|
||||
|
||||
<div class="row-fluid">
|
||||
<div class="span6">
|
||||
<div id="map" class="map"></div>
|
||||
|
||||
<h4 id="title">Layer group example</h4>
|
||||
<p id="shortdesc">Example of a map with layer group.</p>
|
||||
<div id="docs">
|
||||
<p>See the <a href="layer-group.js" target="_blank">layer-group.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">tilejson, input, bind, group, layergroup</div>
|
||||
</div>
|
||||
|
||||
<div id="layertree" class="span6">
|
||||
<h5>Click on layer nodes below to change their properties.</h5>
|
||||
<ul>
|
||||
<li><span>OpenAerial layer</span>
|
||||
<fieldset id="layer0">
|
||||
<label class="checkbox" for="visible0">
|
||||
<input id="visible0" class="visible" type="checkbox"/>visibility
|
||||
</label>
|
||||
<label>opacity</label>
|
||||
<input class="opacity" type="range" min="0" max="1" step="0.01"/>
|
||||
<label>hue</label>
|
||||
<input class="hue" type="range" min="-3.141592653589793" max="3.141592653589793" step="0.01"/>
|
||||
<label>saturation</label>
|
||||
<input class="saturation" type="range" min="0" max="5" step="0.01"/>
|
||||
<label>contrast</label>
|
||||
<input class="contrast" type="range" min="0" max="2" step="0.01"/>
|
||||
<label>brightness</label>
|
||||
<input class="brightness" type="range" min="-1" max="1" step="0.01"/>
|
||||
</fieldset>
|
||||
</li>
|
||||
<li><span>Layer group</span>
|
||||
<fieldset id="layer1">
|
||||
<label class="checkbox" for="visible1">
|
||||
<input id="visible1" class="visible" type="checkbox"/>visibility
|
||||
</label>
|
||||
<label>opacity</label>
|
||||
<input class="opacity" type="range" min="0" max="1" step="0.01"/>
|
||||
<label>hue</label>
|
||||
<input class="hue" type="range" min="-3.141592653589793" max="3.141592653589793" step="0.01"/>
|
||||
<label>saturation</label>
|
||||
<input class="saturation" type="range" min="0" max="5" step="0.01"/>
|
||||
<label>contrast</label>
|
||||
<input class="contrast" type="range" min="0" max="2" step="0.01"/>
|
||||
<label>brightness</label>
|
||||
<input class="brightness" type="range" min="-1" max="1" step="0.01"/>
|
||||
</fieldset>
|
||||
<ul>
|
||||
<li><span>Food insecurity layer</span>
|
||||
<fieldset id="layer10">
|
||||
<label class="checkbox" for="visible10">
|
||||
<input id="visible10" class="visible" type="checkbox"/>visibility
|
||||
</label>
|
||||
<label>opacity</label>
|
||||
<input class="opacity" type="range" min="0" max="1" step="0.01"/>
|
||||
<label>hue</label>
|
||||
<input class="hue" type="range" min="-3.141592653589793" max="3.141592653589793" step="0.01"/>
|
||||
<label>saturation</label>
|
||||
<input class="saturation" type="range" min="0" max="5" step="0.01"/>
|
||||
<label>contrast</label>
|
||||
<input class="contrast" type="range" min="0" max="2" step="0.01"/>
|
||||
<label>brightness</label>
|
||||
<input class="brightness" type="range" min="-1" max="1" step="0.01"/>
|
||||
</fieldset>
|
||||
</li>
|
||||
<li><span>World borders layer</span>
|
||||
<fieldset id="layer11">
|
||||
<label class="checkbox" for="visible11">
|
||||
<input id="visible11" class="visible" type="checkbox"/>visibility
|
||||
</label>
|
||||
<label>opacity</label>
|
||||
<input class="opacity" type="range" min="0" max="1" step="0.01"/>
|
||||
<label>hue</label>
|
||||
<input class="hue" type="range" min="-3.141592653589793" max="3.141592653589793" step="0.01"/>
|
||||
<label>saturation</label>
|
||||
<input class="saturation" type="range" min="0" max="5" step="0.01"/>
|
||||
<label>contrast</label>
|
||||
<input class="contrast" type="range" min="0" max="2" step="0.01"/>
|
||||
<label>brightness</label>
|
||||
<input class="brightness" type="range" min="-1" max="1" step="0.01"/>
|
||||
</fieldset>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="jquery.min.js" type="text/javascript"></script>
|
||||
<script src="loader.js?id=layer-group" type="text/javascript"></script>
|
||||
<script src="../resources/social-links.js" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,53 @@
|
||||
var map = new ol.Map({
|
||||
layers: [
|
||||
new ol.layer.Tile({
|
||||
source: new ol.source.MapQuestOpenAerial()
|
||||
}), new ol.layer.Group({
|
||||
layers: [
|
||||
new ol.layer.Tile({
|
||||
source: new ol.source.TileJSON({
|
||||
url: 'http://api.tiles.mapbox.com/v3/' +
|
||||
'mapbox.20110804-hoa-foodinsecurity-3month.jsonp',
|
||||
crossOrigin: 'anonymous'
|
||||
})
|
||||
}),
|
||||
new ol.layer.Tile({
|
||||
source: new ol.source.TileJSON({
|
||||
url: 'http://api.tiles.mapbox.com/v3/' +
|
||||
'mapbox.world-borders-light.jsonp',
|
||||
crossOrigin: 'anonymous'
|
||||
})
|
||||
})
|
||||
]
|
||||
})
|
||||
],
|
||||
renderers: ol.RendererHints.createFromQueryData(),
|
||||
target: 'map',
|
||||
view: new ol.View2D({
|
||||
center: ol.proj.transform([37.40570, 8.81566], 'EPSG:4326', 'EPSG:3857'),
|
||||
zoom: 4
|
||||
})
|
||||
});
|
||||
|
||||
function bindInputs(layerid, layer) {
|
||||
new ol.dom.Input($(layerid + ' .visible')[0])
|
||||
.bindTo('checked', layer, 'visible');
|
||||
$.each(['opacity', 'hue', 'saturation', 'contrast', 'brightness'],
|
||||
function(i, v) {
|
||||
new ol.dom.Input($(layerid + ' .' + v)[0])
|
||||
.bindTo('valueAsNumber', layer, v);
|
||||
}
|
||||
);
|
||||
}
|
||||
map.getLayers().forEach(function(layer, i) {
|
||||
bindInputs('#layer' + i, layer);
|
||||
if (layer instanceof ol.layer.Group) {
|
||||
layer.getLayers().forEach(function(sublayer, j) {
|
||||
bindInputs('#layer' + i + j, sublayer);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
$('#layertree li > span').click(function() {
|
||||
$(this).siblings('fieldset').toggle();
|
||||
}).siblings('fieldset').hide();
|
||||
@@ -0,0 +1,86 @@
|
||||
/**
|
||||
* Loader to add ol.css, ol.js and the example-specific js file to the
|
||||
* documents.
|
||||
*
|
||||
* This loader is used for the hosted examples. It is used in place of the
|
||||
* development loader (examples/loader.js).
|
||||
*
|
||||
* ol.css, ol.js, ol-simple.js, ol-whitespace.js, and ol-deps.js are built
|
||||
* by OL3's build.py script. They are located in the ../build/ directory,
|
||||
* relatively to this script.
|
||||
*
|
||||
* The script must be named loader.js.
|
||||
*
|
||||
* Usage:
|
||||
*
|
||||
* <script src="../loader.js?id=my-demo"></script>
|
||||
*/
|
||||
|
||||
(function() {
|
||||
|
||||
var i, pair;
|
||||
|
||||
var href = window.location.href, start, end, paramsString, pairs,
|
||||
pageParams = {};
|
||||
if (href.indexOf('?') > 0) {
|
||||
start = href.indexOf('?') + 1;
|
||||
end = href.indexOf('#') > 0 ? href.indexOf('#') : href.length;
|
||||
paramsString = href.substring(start, end);
|
||||
pairs = paramsString.split(/[&;]/);
|
||||
for (i = 0; i < pairs.length; ++i) {
|
||||
pair = pairs[i].split('=');
|
||||
if (pair[0]) {
|
||||
pageParams[decodeURIComponent(pair[0])] =
|
||||
decodeURIComponent(pair[1]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var scripts = document.getElementsByTagName('script');
|
||||
var src, index, search, chunks, scriptParams = {};
|
||||
for (i = scripts.length - 1; i >= 0; --i) {
|
||||
src = scripts[i].getAttribute('src');
|
||||
if (~(index = src.indexOf('loader.js?'))) {
|
||||
search = src.substr(index + 10);
|
||||
chunks = search ? search.split('&') : [];
|
||||
for (i = chunks.length - 1; i >= 0; --i) {
|
||||
pair = chunks[i].split('=');
|
||||
if (pair[0]) {
|
||||
scriptParams[decodeURIComponent(pair[0])] =
|
||||
decodeURIComponent(pair[1]);
|
||||
}
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
var oljs = 'ol.js', mode;
|
||||
if ('mode' in pageParams) {
|
||||
mode = pageParams.mode.toLowerCase();
|
||||
if (mode == 'debug') {
|
||||
mode = 'raw';
|
||||
}
|
||||
if (mode != 'advanced' && mode != 'raw') {
|
||||
oljs = 'ol-' + mode + '.js';
|
||||
}
|
||||
}
|
||||
|
||||
// CLOSURE_NO_DEPS has an effect in "raw" and "whitespace" modes only (i.e.
|
||||
// when COMPILED is false). In "raw" mode we use our own deps file
|
||||
// (ol-deps.js), so we set CLOSURE_NO_DEPS to true to prevent Google
|
||||
// Library's base.js script to load deps.js. In "whitespace" mode
|
||||
// no deps file is needed at all, yet base.js will attempt to load deps.js
|
||||
// if CLOSURE_NO_DEPS is not set to true.
|
||||
window.CLOSURE_NO_DEPS = true;
|
||||
|
||||
var scriptId = encodeURIComponent(scriptParams.id);
|
||||
document.write('<link rel="stylesheet" href="../build/ol.css" type="text/css">');
|
||||
if (mode != 'raw') {
|
||||
document.write('<scr' + 'ipt type="text/javascript" src="../build/' + oljs + '"></scr' + 'ipt>');
|
||||
} else {
|
||||
document.write('<scr' + 'ipt type="text/javascript" src="../closure-library/closure/goog/base.js"></scr' + 'ipt>');
|
||||
document.write('<scr' + 'ipt type="text/javascript" src="../build/ol-deps.js"></scr' + 'ipt>');
|
||||
document.write('<scr' + 'ipt type="text/javascript" src="' + scriptId + '-require.js"></scr' + 'ipt>');
|
||||
}
|
||||
document.write('<scr' + 'ipt type="text/javascript" src="' + scriptId + '.js"></scr' + 'ipt>');
|
||||
}());
|
||||
@@ -0,0 +1,6 @@
|
||||
goog.require('ol.Attribution');
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.RendererHints');
|
||||
goog.require('ol.View2D');
|
||||
goog.require('ol.layer.Tile');
|
||||
goog.require('ol.source.OSM');
|
||||
@@ -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>Localized OpenStreetMap example</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="navbar navbar-inverse navbar-fixed-top">
|
||||
<div class="navbar-inner">
|
||||
<div class="container">
|
||||
<a class="brand" href="./">OpenLayers 3 Examples</a>
|
||||
<ul class="nav pull-right">
|
||||
<li><iframe class="github-watch-button" src="http://ghbtns.com/github-btn.html?user=openlayers&repo=ol3&type=watch&count=true"
|
||||
allowtransparency="true" frameborder="0" scrolling="0" height="20" width="90"></iframe></li>
|
||||
<li><a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-hashtags="openlayers"> </a></li>
|
||||
<li><div class="g-plusone-wrapper"><div class="g-plusone" data-size="medium" data-annotation="none"></div></div></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container-fluid">
|
||||
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<div id="map" class="map"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row-fluid">
|
||||
|
||||
<div class="span12">
|
||||
<h4 id="title">Localized OpenStreetMap example</h4>
|
||||
<p id="shortdesc">Example of a localized OpenStreetMap map with a custom tile server and a custom attribution.</p>
|
||||
<div id="docs">
|
||||
<p>See the <a href="localized-openstreetmap.js" target="_blank">localized-openstreetmap.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">localized-openstreetmap, openstreetmap</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="loader.js?id=localized-openstreetmap" type="text/javascript"></script>
|
||||
<script src="../resources/social-links.js" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,23 @@
|
||||
var map = new ol.Map({
|
||||
layers: [
|
||||
new ol.layer.Tile({
|
||||
source: new ol.source.OSM({
|
||||
attributions: [
|
||||
new ol.Attribution({
|
||||
html: 'All maps © ' +
|
||||
'<a href="http://www.opencyclemap.org/">OpenCycleMap</a>'
|
||||
}),
|
||||
ol.source.OSM.DATA_ATTRIBUTION
|
||||
],
|
||||
url: 'http://{a-c}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png'
|
||||
})
|
||||
})
|
||||
],
|
||||
renderers: ol.RendererHints.createFromQueryData(),
|
||||
target: 'map',
|
||||
view: new ol.View2D({
|
||||
maxZoom: 18,
|
||||
center: [-172857, 5977746],
|
||||
zoom: 12
|
||||
})
|
||||
});
|
||||
@@ -0,0 +1,6 @@
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.RendererHints');
|
||||
goog.require('ol.View2D');
|
||||
goog.require('ol.layer.Tile');
|
||||
goog.require('ol.proj');
|
||||
goog.require('ol.source.MapQuestOSM');
|
||||
@@ -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>MapQuest example</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="navbar navbar-inverse navbar-fixed-top">
|
||||
<div class="navbar-inner">
|
||||
<div class="container">
|
||||
<a class="brand" href="./">OpenLayers 3 Examples</a>
|
||||
<ul class="nav pull-right">
|
||||
<li><iframe class="github-watch-button" src="http://ghbtns.com/github-btn.html?user=openlayers&repo=ol3&type=watch&count=true"
|
||||
allowtransparency="true" frameborder="0" scrolling="0" height="20" width="90"></iframe></li>
|
||||
<li><a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-hashtags="openlayers"> </a></li>
|
||||
<li><div class="g-plusone-wrapper"><div class="g-plusone" data-size="medium" data-annotation="none"></div></div></li>
|
||||
</ul>
|
||||
</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">MapQuest example</h4>
|
||||
<p id="shortdesc">Example of a MapQuest map.</p>
|
||||
<div id="docs">
|
||||
<p>See the <a href="mapquest.js" target="_blank">mapquest.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">mapquest</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="loader.js?id=mapquest" type="text/javascript"></script>
|
||||
<script src="../resources/social-links.js" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,14 @@
|
||||
var map = new ol.Map({
|
||||
layers: [
|
||||
new ol.layer.Tile({
|
||||
source: new ol.source.MapQuestOSM()
|
||||
})
|
||||
],
|
||||
renderers: ol.RendererHints.createFromQueryData(),
|
||||
target: 'map',
|
||||
view: new ol.View2D({
|
||||
center: ol.proj.transform(
|
||||
[139.6917, 35.689506], 'EPSG:4326', 'EPSG:3857'),
|
||||
zoom: 9
|
||||
})
|
||||
});
|
||||
@@ -0,0 +1,6 @@
|
||||
goog.require('ol.Geolocation');
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.RendererHints');
|
||||
goog.require('ol.View2D');
|
||||
goog.require('ol.layer.Tile');
|
||||
goog.require('ol.source.BingMaps');
|
||||
@@ -0,0 +1,28 @@
|
||||
<!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">
|
||||
<title>Mobile full screen example</title>
|
||||
<style type="text/css">
|
||||
html, body, .map {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="map" class="map"></div>
|
||||
<script src="loader.js?id=mobile-full-screen" type="text/javascript"></script>
|
||||
|
||||
<div style="display: none;">
|
||||
<div id="title">Mobile full screen example</div>
|
||||
<div id="shortdesc">Example of a full screen map.</div>
|
||||
<div id="tags">fullscreen, bing, geolocation, mobile</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,27 @@
|
||||
var view = new ol.View2D({
|
||||
center: [0, 0],
|
||||
zoom: 2
|
||||
});
|
||||
|
||||
var map = new ol.Map({
|
||||
layers: [
|
||||
new ol.layer.Tile({
|
||||
source: new ol.source.BingMaps({
|
||||
key: 'Ar33pRUvQOdESG8m_T15MUmNz__E1twPo42bFx9jvdDePhX0PNgAcEm44OVTS7tt',
|
||||
style: 'Road'
|
||||
})
|
||||
})
|
||||
],
|
||||
renderers: ol.RendererHints.createFromQueryData(),
|
||||
target: 'map',
|
||||
view: view
|
||||
});
|
||||
|
||||
var geolocation = new ol.Geolocation({
|
||||
tracking: true
|
||||
});
|
||||
geolocation.bindTo('projection', view);
|
||||
geolocation.once('change:position', function() {
|
||||
view.setCenter(geolocation.getPosition());
|
||||
view.setResolution(2.388657133911758);
|
||||
});
|
||||
@@ -0,0 +1,16 @@
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.RendererHint');
|
||||
goog.require('ol.View2D');
|
||||
goog.require('ol.interaction');
|
||||
goog.require('ol.interaction.Modify');
|
||||
goog.require('ol.interaction.Select');
|
||||
goog.require('ol.layer.Tile');
|
||||
goog.require('ol.layer.Vector');
|
||||
goog.require('ol.parser.ogc.GML_v3');
|
||||
goog.require('ol.source.MapQuestOpenAerial');
|
||||
goog.require('ol.source.Vector');
|
||||
goog.require('ol.style.Fill');
|
||||
goog.require('ol.style.Rule');
|
||||
goog.require('ol.style.Shape');
|
||||
goog.require('ol.style.Stroke');
|
||||
goog.require('ol.style.Style');
|
||||
@@ -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>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="./">OpenLayers 3 Examples</a>
|
||||
<ul class="nav pull-right">
|
||||
<li><iframe class="github-watch-button" src="http://ghbtns.com/github-btn.html?user=openlayers&repo=ol3&type=watch&count=true"
|
||||
allowtransparency="true" frameborder="0" scrolling="0" height="20" width="90"></iframe></li>
|
||||
<li><a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-hashtags="openlayers"> </a></li>
|
||||
<li><div class="g-plusone-wrapper"><div class="g-plusone" data-size="medium" data-annotation="none"></div></div></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container-fluid">
|
||||
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<div id="map" class="map"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row-fluid">
|
||||
|
||||
<div class="span12">
|
||||
<h4 id="title">Modify features example</h4>
|
||||
<p id="shortdesc">Example of using the Modify interaction. Select a feature and drag the circle that appears when the cursor gets close to the selected geometry.</p>
|
||||
<div id="docs">
|
||||
<p>See the <a href="modify-features.js" target="_blank">modify-features.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">modify, edit, vector</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="loader.js?id=modify-features" type="text/javascript"></script>
|
||||
<script src="../resources/social-links.js" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,71 @@
|
||||
var raster = new ol.layer.Tile({
|
||||
source: new ol.source.MapQuestOpenAerial()
|
||||
});
|
||||
|
||||
var vector = new ol.layer.Vector({
|
||||
id: 'vector',
|
||||
source: new ol.source.Vector({
|
||||
parser: new ol.parser.ogc.GML_v3(),
|
||||
url: 'data/gml/topp-states-wfs.xml'
|
||||
}),
|
||||
style: new ol.style.Style({
|
||||
rules: [
|
||||
new ol.style.Rule({
|
||||
filter: 'renderIntent("selected")',
|
||||
symbolizers: [
|
||||
new ol.style.Fill({
|
||||
color: '#ffffff',
|
||||
opacity: 0.5
|
||||
}),
|
||||
new ol.style.Stroke({
|
||||
color: '#6666ff',
|
||||
width: 0.5
|
||||
})
|
||||
]
|
||||
}),
|
||||
new ol.style.Rule({
|
||||
filter: 'renderIntent("temporary")',
|
||||
symbolizers: [
|
||||
new ol.style.Shape({
|
||||
fill: new ol.style.Fill({color: '#bada55'}),
|
||||
size: 16
|
||||
})
|
||||
]
|
||||
}),
|
||||
new ol.style.Rule({
|
||||
filter: 'renderIntent("future")',
|
||||
symbolizers: [
|
||||
new ol.style.Shape({
|
||||
fill: new ol.style.Fill({color: '#013'}),
|
||||
size: 16
|
||||
})
|
||||
]
|
||||
})
|
||||
],
|
||||
symbolizers: [
|
||||
new ol.style.Fill({
|
||||
color: '#ffffff',
|
||||
opacity: 0.25
|
||||
}),
|
||||
new ol.style.Stroke({
|
||||
color: '#6666ff'
|
||||
})
|
||||
]
|
||||
})
|
||||
});
|
||||
|
||||
var selectInteraction = new ol.interaction.Select({
|
||||
layerFilter: function(layer) { return layer.get('id') == 'vector'; }
|
||||
});
|
||||
|
||||
var map = new ol.Map({
|
||||
interactions: ol.interaction.defaults().extend(
|
||||
[selectInteraction, new ol.interaction.Modify()]),
|
||||
layers: [raster, vector],
|
||||
renderer: ol.RendererHint.CANVAS,
|
||||
target: 'map',
|
||||
view: new ol.View2D({
|
||||
center: [-11000000, 4600000],
|
||||
zoom: 4
|
||||
})
|
||||
});
|
||||
@@ -0,0 +1,10 @@
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.RendererHints');
|
||||
goog.require('ol.View2D');
|
||||
goog.require('ol.control');
|
||||
goog.require('ol.control.MousePosition');
|
||||
goog.require('ol.coordinate');
|
||||
goog.require('ol.dom.Input');
|
||||
goog.require('ol.layer.Tile');
|
||||
goog.require('ol.proj');
|
||||
goog.require('ol.source.OSM');
|
||||
@@ -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>Mouse position example</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="navbar navbar-inverse navbar-fixed-top">
|
||||
<div class="navbar-inner">
|
||||
<div class="container">
|
||||
<a class="brand" href="./">OpenLayers 3 Examples</a>
|
||||
<ul class="nav pull-right">
|
||||
<li><iframe class="github-watch-button" src="http://ghbtns.com/github-btn.html?user=openlayers&repo=ol3&type=watch&count=true"
|
||||
allowtransparency="true" frameborder="0" scrolling="0" height="20" width="90"></iframe></li>
|
||||
<li><a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-hashtags="openlayers"> </a></li>
|
||||
<li><div class="g-plusone-wrapper"><div class="g-plusone" data-size="medium" data-annotation="none"></div></div></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container-fluid">
|
||||
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<div id="map" class="map"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row-fluid">
|
||||
<div class="span6">
|
||||
<h4 id="title">Mouse position example</h4>
|
||||
<p id="shortdesc">Example of a mouse position control, outside the map.</p>
|
||||
<div id="docs">
|
||||
<p>See the <a href="mouse-position.js" target="_blank">mouse-position.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">mouse-position, openstreetmap</div>
|
||||
<form>
|
||||
<label>Projection </label>
|
||||
<select id="projection">
|
||||
<option value="EPSG:4326">EPSG:4326</option>
|
||||
<option value="EPSG:3857">EPSG:3857</option>
|
||||
</select>
|
||||
<label>Precision </label>
|
||||
<input id="precision" type="number" min="0" max="12" value="4"/>
|
||||
</form>
|
||||
</div>
|
||||
<div class="span6" id="mouse-position"> </div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="loader.js?id=mouse-position" type="text/javascript"></script>
|
||||
<script src="../resources/social-links.js" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,35 @@
|
||||
var mousePositionControl = new ol.control.MousePosition({
|
||||
coordinateFormat: ol.coordinate.createStringXY(4),
|
||||
projection: 'EPSG:4326',
|
||||
// comment the following two lines to have the mouse position
|
||||
// be placed within the map.
|
||||
className: 'custom-mouse-position',
|
||||
target: document.getElementById('mouse-position'),
|
||||
undefinedHTML: ' '
|
||||
});
|
||||
|
||||
var map = new ol.Map({
|
||||
controls: ol.control.defaults().extend([mousePositionControl]),
|
||||
layers: [
|
||||
new ol.layer.Tile({
|
||||
source: new ol.source.OSM()
|
||||
})
|
||||
],
|
||||
renderers: ol.RendererHints.createFromQueryData(),
|
||||
target: 'map',
|
||||
view: new ol.View2D({
|
||||
center: [0, 0],
|
||||
zoom: 2
|
||||
})
|
||||
});
|
||||
|
||||
var projectionSelect = new ol.dom.Input(document.getElementById('projection'));
|
||||
projectionSelect.on('change:value', function() {
|
||||
mousePositionControl.setProjection(ol.proj.get(projectionSelect.getValue()));
|
||||
});
|
||||
|
||||
var precisionInput = new ol.dom.Input(document.getElementById('precision'));
|
||||
precisionInput.on('change:value', function() {
|
||||
var format = ol.coordinate.createStringXY(precisionInput.getValue());
|
||||
mousePositionControl.setCoordinateFormat(format);
|
||||
});
|
||||
@@ -0,0 +1,6 @@
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.RendererHints');
|
||||
goog.require('ol.View2D');
|
||||
goog.require('ol.layer.Tile');
|
||||
goog.require('ol.proj');
|
||||
goog.require('ol.source.OSM');
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user