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

Updated

Browse Source
This commit is contained in:
Éric Lemoine
2013-03-11 13:35:17 +01:00
parent 849774dceb
commit f150259eee
1189 changed files with 341774 additions and 2001 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
master/examples/anchored-elements-require.js Normal file
View File

@@ -0,0 +1,8 @@
goog.require('ol.AnchoredElement');
goog.require('ol.Coordinate');
goog.require('ol.Map');
goog.require('ol.RendererHints');
goog.require('ol.View2D');
goog.require('ol.layer.TileLayer');
goog.require('ol.projection');
goog.require('ol.source.MapQuestOpenAerial');

17
master/examples/anchored-elements.js
View File

@@ -1,20 +1,9 @@
goog.require('ol.AnchoredElement');
goog.require('ol.Collection');
goog.require('ol.Coordinate');
goog.require('ol.Map');
goog.require('ol.RendererHints');
goog.require('ol.View2D');
goog.require('ol.layer.TileLayer');
goog.require('ol.projection');
goog.require('ol.source.MapQuestOpenAerial');
var layer = new ol.layer.TileLayer({
source: new ol.source.MapQuestOpenAerial()
});
var map = new ol.Map({
layers: new ol.Collection([layer]),
layers: [layer],
renderers: ol.RendererHints.createFromQueryData(),
target: 'map',
view: new ol.View2D({
@@ -26,7 +15,7 @@ var map = new ol.Map({
// Vienna label
var vienna = new ol.AnchoredElement({
map: map,
position: ol.projection.transformWithCodes(
position: ol.projection.transform(
new ol.Coordinate(16.3725, 48.208889), 'EPSG:4326', 'EPSG:3857'),
element: document.getElementById('vienna')
});
@@ -40,7 +29,7 @@ map.addEventListener('click', function(evt) {
var coordinate = evt.getCoordinate();
popup.getElement().innerHTML =
'Welcome to ol3. The location you clicked was<br>' +
ol.Coordinate.toStringHDMS(ol.projection.transformWithCodes(
ol.Coordinate.toStringHDMS(ol.projection.transform(
coordinate, 'EPSG:3857', 'EPSG:4326'));
popup.setPosition(coordinate);
});

9
master/examples/animation-require.js Normal file
View File

@@ -0,0 +1,9 @@
goog.require('ol.Coordinate');
goog.require('ol.Map');
goog.require('ol.RendererHints');
goog.require('ol.View2D');
goog.require('ol.animation');
goog.require('ol.easing');
goog.require('ol.layer.TileLayer');
goog.require('ol.projection');
goog.require('ol.source.OpenStreetMap');

60
master/examples/animation.html Normal file
View File

@@ -0,0 +1,60 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="examples.css" type="text/css">
<link rel="stylesheet" href="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="example-list.html">OpenLayers 3 Examples</a>
<ul class="nav pull-right">
<li><a href="https://github.com/openlayers/ol3"><i class="icon-github"></i></a></li>
<li><a href="https://twitter.com/openlayers"><i class="icon-twitter"></i></a></li>
</ul>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
<button id="rotate-left"><i class="icon-arrow-left"></i></button>
<button>Rotate</button>
<button id="rotate-right"><i class="icon-arrow-right"></i></button>
</div>
<button id="pan-to-london">Pan to London</button>
<button id="elastic-to-moscow">Elastic to Moscow</button>
<button id="bounce-to-instanbul">Bounce to Instanbul</button>
<button id="spin-to-rome">Spin to Rome</button>
<button id="fly-to-bern">Fly to Bern</button>
</div>
<div class="row-fluid">
<div class="span4">
<h4 id="title">Animation example</h4>
<p id="shortdesc">Example animations.</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>
</body>
</html>

111
master/examples/animation.js Normal file
View File

@@ -0,0 +1,111 @@
var london = ol.projection.transform(
new ol.Coordinate(-0.12755, 51.507222), 'EPSG:4326', 'EPSG:3857');
var moscow = ol.projection.transform(
new ol.Coordinate(37.6178, 55.7517), 'EPSG:4326', 'EPSG:3857');
var instanbul = ol.projection.transform(
new ol.Coordinate(28.9744, 41.0128), 'EPSG:4326', 'EPSG:3857');
var rome = ol.projection.transform(
new ol.Coordinate(12.5, 41.9), 'EPSG:4326', 'EPSG:3857');
var bern = ol.projection.transform(
new ol.Coordinate(7.4458, 46.95), 'EPSG:4326', 'EPSG:3857');
var map = new ol.Map({
layers: [
new ol.layer.TileLayer({
source: new ol.source.OpenStreetMap()
})
],
renderers: ol.RendererHints.createFromQueryData(),
target: 'map',
view: new ol.View2D({
center: instanbul,
zoom: 6
})
});
var rotateLeft = document.getElementById('rotate-left');
rotateLeft.addEventListener('click', function() {
var rotateLeft = ol.animation.rotate({
duration: 2000,
rotation: -4 * Math.PI
});
map.addPreRenderFunction(rotateLeft);
}, false);
var rotateRight = document.getElementById('rotate-right');
rotateRight.addEventListener('click', function() {
var rotateRight = ol.animation.rotate({
duration: 2000,
rotation: 4 * Math.PI
});
map.addPreRenderFunction(rotateRight);
}, false);
var panToLondon = document.getElementById('pan-to-london');
panToLondon.addEventListener('click', function() {
var pan = ol.animation.pan({
duration: 2000,
source: map.getView().getView2D().getCenter()
});
map.addPreRenderFunction(pan);
map.getView().getView2D().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: map.getView().getView2D().getCenter()
});
map.addPreRenderFunction(pan);
map.getView().getView2D().setCenter(moscow);
}, false);
var bounceToInstanbul = document.getElementById('bounce-to-instanbul');
bounceToInstanbul.addEventListener('click', function() {
var pan = ol.animation.pan({
duration: 2000,
easing: ol.easing.bounce,
source: map.getView().getView2D().getCenter()
});
map.addPreRenderFunction(pan);
map.getView().getView2D().setCenter(instanbul);
}, 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: map.getView().getView2D().getCenter(),
start: start
});
var rotate = ol.animation.rotate({
duration: duration,
rotation: 2 * Math.PI,
start: start
});
map.addPreRenderFunctions([pan, rotate]);
map.getView().getView2D().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: map.getView().getView2D().getCenter(),
start: start
});
var bounce = ol.animation.bounce({
duration: duration,
resolution: 4 * map.getView().getView2D().getResolution(),
start: start
});
map.addPreRenderFunctions([pan, bounce]);
map.getView().getView2D().setCenter(bern);
}, false);

7
master/examples/bing-maps-require.js Normal file
View File

@@ -0,0 +1,7 @@
goog.require('ol.Coordinate');
goog.require('ol.Map');
goog.require('ol.RendererHints');
goog.require('ol.View2D');
goog.require('ol.layer.TileLayer');
goog.require('ol.projection');
goog.require('ol.source.BingMaps');

52
master/examples/bing-maps.html Normal file
View File

@@ -0,0 +1,52 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="examples.css" type="text/css">
<link rel="stylesheet" href="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="example-list.html">OpenLayers 3 Examples</a>
<ul class="nav pull-right">
<li><a href="https://github.com/openlayers/ol3"><i class="icon-github"></i></a></li>
<li><a href="https://twitter.com/openlayers"><i class="icon-twitter"></i></a></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">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="loader.js?id=bing-maps" type="text/javascript"></script>
</body>
</html>

17
master/examples/bing-maps.js Normal file
View File

@@ -0,0 +1,17 @@
var map = new ol.Map({
layers: [
new ol.layer.TileLayer({
source: new ol.source.BingMaps({
key: 'AgtFlPYDnymLEe9zJ5PCkghbNiFZE9aAtTy3mPaEnEBXqLHtFuTcKoZ-miMC3w7R',
style: 'AerialWithLabels'
})
})
],
renderers: ol.RendererHints.createFromQueryData(),
target: 'map',
view: new ol.View2D({
center: ol.projection.transform(
new ol.Coordinate(-123.1, 49.25), 'EPSG:4326', 'EPSG:3857'),
zoom: 8
})
});

6
master/examples/brightness-contrast-require.js Normal file
View File

@@ -0,0 +1,6 @@
goog.require('ol.Coordinate');
goog.require('ol.Map');
goog.require('ol.RendererHint');
goog.require('ol.View2D');
goog.require('ol.layer.TileLayer');
goog.require('ol.source.MapQuestOpenAerial');

62
master/examples/brightness-contrast.html Normal file
View File

@@ -0,0 +1,62 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="examples.css" type="text/css">
<link rel="stylesheet" href="bootstrap/css/bootstrap-responsive.min.css" type="text/css">
<title>Brightness/contrast example</title>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="example-list.html">OpenLayers 3 Examples</a>
<ul class="nav pull-right">
<li><a href="https://github.com/openlayers/ol3"><i class="icon-github"></i></a></li>
<li><a href="https://twitter.com/openlayers"><i class="icon-twitter"></i></a></li>
</ul>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></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="span4">
<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>
</body>
</html>

39
master/examples/brightness-contrast.js Normal file
View File

@@ -0,0 +1,39 @@
var layer = new ol.layer.TileLayer({
source: new ol.source.MapQuestOpenAerial()
});
var map = new ol.Map({
layers: [layer],
renderer: ol.RendererHint.WEBGL,
target: 'map',
view: new ol.View2D({
center: new ol.Coordinate(0, 0),
zoom: 2
})
});
var increaseBrightness = document.getElementById('increase-brightness');
increaseBrightness.addEventListener('click', function() {
layer.setBrightness(layer.getBrightness() + 0.125);
}, false);
var resetBrightness = document.getElementById('reset-brightness');
resetBrightness.addEventListener('click', function() {
layer.setBrightness(0);
}, false);
var decreaseBrightness = document.getElementById('decrease-brightness');
decreaseBrightness.addEventListener('click', function() {
layer.setBrightness(layer.getBrightness() - 0.125);
}, false);
var increaseContrast = document.getElementById('increase-contrast');
increaseContrast.addEventListener('click', function() {
layer.setContrast(layer.getContrast() + 0.125);
}, false);
var resetContrast = document.getElementById('reset-contrast');
resetContrast.addEventListener('click', function() {
layer.setContrast(1);
}, false);
var decreaseContrast = document.getElementById('decrease-contrast');
decreaseContrast.addEventListener('click', function() {
layer.setContrast(layer.getContrast() - 0.125);
}, false);

9
master/examples/canvas-tiles-require.js Normal file
View File

@@ -0,0 +1,9 @@
goog.require('ol.Coordinate');
goog.require('ol.Map');
goog.require('ol.RendererHint');
goog.require('ol.View2D');
goog.require('ol.layer.TileLayer');
goog.require('ol.projection');
goog.require('ol.source.DebugTileSource');
goog.require('ol.source.OpenStreetMap');
goog.require('ol.tilegrid.XYZ');

22
master/examples/canvas-tiles.js
View File

@@ -1,32 +1,20 @@
goog.require('ol.Collection');
goog.require('ol.Coordinate');
goog.require('ol.Map');
goog.require('ol.RendererHint');
goog.require('ol.View2D');
goog.require('ol.layer.TileLayer');
goog.require('ol.projection');
goog.require('ol.source.DebugTileSource');
goog.require('ol.source.OpenStreetMap');
goog.require('ol.tilegrid.XYZ');
var layers = new ol.Collection([
var layers = [
new ol.layer.TileLayer({
source: new ol.source.OpenStreetMap()
}),
new ol.layer.TileLayer({
source: new ol.source.DebugTileSource({
projection: ol.projection.getFromCode('EPSG:3857'),
projection: 'EPSG:3857',
tileGrid: new ol.tilegrid.XYZ({
maxZoom: 22
})
})
})
]);
];
var webglMap = new ol.Map({
view: new ol.View2D({
center: ol.projection.transformWithCodes(
center: ol.projection.transform(
new ol.Coordinate(-0.1275, 51.507222), 'EPSG:4326', 'EPSG:3857'),
zoom: 10
}),
@@ -43,7 +31,7 @@ domMap.bindTo('layers', webglMap);
domMap.bindTo('view', webglMap);
var canvasMap = new ol.Map({
renderer: ol.RendererHint.DOM,
renderer: ol.RendererHint.CANVAS,
target: 'canvasMap'
});
canvasMap.bindTo('layers', webglMap);

10
master/examples/epsg-4326-require.js Normal file
View File

@@ -0,0 +1,10 @@
goog.require('ol.Coordinate');
goog.require('ol.Map');
goog.require('ol.RendererHint');
goog.require('ol.View2D');
goog.require('ol.control.ScaleLine');
goog.require('ol.control.ScaleLineUnits');
goog.require('ol.control.defaults');
goog.require('ol.layer.TileLayer');
goog.require('ol.projection');
goog.require('ol.source.TiledWMS');

26
master/examples/epsg-4326.js
View File

@@ -1,16 +1,4 @@
goog.require('ol.Collection');
goog.require('ol.Coordinate');
goog.require('ol.Map');
goog.require('ol.RendererHint');
goog.require('ol.View2D');
goog.require('ol.control.ScaleLineUnits');
goog.require('ol.control.defaults');
goog.require('ol.layer.TileLayer');
goog.require('ol.projection');
goog.require('ol.source.TiledWMS');
var layers = new ol.Collection([
var layers = [
new ol.layer.TileLayer({
source: new ol.source.TiledWMS({
url: 'http://vmap0.tiles.osgeo.org/wms/vmap0',
@@ -22,22 +10,20 @@ var layers = new ol.Collection([
}
})
})
]);
];
var map = new ol.Map({
controls: ol.control.defaults({
scaleLine: true,
// FIXME The typecast here is only needed if the example is compiled
scaleLineOptions: /** @type {ol.control.ScaleLineOptions} */ ({
controls: ol.control.defaults({}, [
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: ol.projection.getFromCode('EPSG:4326'),
projection: 'EPSG:4326',
center: new ol.Coordinate(0, 0),
zoom: 2
})

2
master/examples/example-list.js
View File

File diff suppressed because one or more lines are too long

2
master/examples/example-list.xml
View File

File diff suppressed because one or more lines are too long

6
master/examples/export-jpeg-require.js Normal file
View File

@@ -0,0 +1,6 @@
goog.require('ol.Coordinate');
goog.require('ol.Map');
goog.require('ol.RendererHint');
goog.require('ol.View2D');
goog.require('ol.layer.TileLayer');
goog.require('ol.source.OpenStreetMap');

53
master/examples/export-jpeg.html Normal file
View File

@@ -0,0 +1,53 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="examples.css" type="text/css">
<link rel="stylesheet" href="bootstrap/css/bootstrap-responsive.min.css" type="text/css">
<title>Export JPEG example</title>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="example-list.html">OpenLayers 3 Examples</a>
<ul class="nav pull-right">
<li><a href="https://github.com/openlayers/ol3"><i class="icon-github"></i></a></li>
<li><a href="https://twitter.com/openlayers"><i class="icon-twitter"></i></a></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>
</div>
</div>
<div class="row-fluid">
<div class="span4">
<h4 id="title">Export JPEG example</h4>
<p id="shortdesc">Example of exporting a map as a JPEG image.</p>
<div id="docs">
<p>See the <a href="export-jpeg.js" target="_blank">export-jpeg.js source</a> to see how this is done.</p>
</div>
<div id="tags">export-jpeg, openstreetmap</div>
</div>
</div>
</div>
<script src="loader.js?id=export-jpeg" type="text/javascript"></script>
</body>
</html>

18
master/examples/export-jpeg.js Normal file
View File

@@ -0,0 +1,18 @@
var map = new ol.Map({
layers: [
new ol.layer.TileLayer({
source: new ol.source.OpenStreetMap()
})
],
renderer: ol.RendererHint.CANVAS,
target: 'map',
view: new ol.View2D({
center: new ol.Coordinate(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);

7
master/examples/full-screen-require.js Normal file
View File

@@ -0,0 +1,7 @@
goog.require('ol.Coordinate');
goog.require('ol.Map');
goog.require('ol.RendererHints');
goog.require('ol.View2D');
goog.require('ol.control.defaults');
goog.require('ol.layer.TileLayer');
goog.require('ol.source.MapQuestOpenAerial');

15
master/examples/full-screen.js
View File

@@ -1,21 +1,8 @@
goog.require('ol.Collection');
goog.require('ol.Coordinate');
goog.require('ol.Map');
goog.require('ol.RendererHints');
goog.require('ol.View2D');
goog.require('ol.control.defaults');
goog.require('ol.layer.TileLayer');
goog.require('ol.source.MapQuestOpenAerial');
var layer = new ol.layer.TileLayer({
source: new ol.source.MapQuestOpenAerial()
});
var map = new ol.Map({
controls: ol.control.defaults({
scaleLine: true
}),
layers: new ol.Collection([layer]),
layers: [layer],
renderers: ol.RendererHints.createFromQueryData(),
target: 'map',
view: new ol.View2D({

7
master/examples/hue-saturation-require.js Normal file
View File

@@ -0,0 +1,7 @@
goog.require('ol.Coordinate');
goog.require('ol.Map');
goog.require('ol.RendererHint');
goog.require('ol.View2D');
goog.require('ol.layer.TileLayer');
goog.require('ol.projection');
goog.require('ol.source.BingMaps');

62
master/examples/hue-saturation.html Normal file
View File

@@ -0,0 +1,62 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="examples.css" type="text/css">
<link rel="stylesheet" href="bootstrap/css/bootstrap-responsive.min.css" type="text/css">
<title>Hue/saturation example</title>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="example-list.html">OpenLayers 3 Examples</a>
<ul class="nav pull-right">
<li><a href="https://github.com/openlayers/ol3"><i class="icon-github"></i></a></li>
<li><a href="https://twitter.com/openlayers"><i class="icon-twitter"></i></a></li>
</ul>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></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="span4">
<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>
</body>
</html>

43
master/examples/hue-saturation.js Normal file
View File

@@ -0,0 +1,43 @@
var layer = new ol.layer.TileLayer({
source: new ol.source.BingMaps({
key: 'AgtFlPYDnymLEe9zJ5PCkghbNiFZE9aAtTy3mPaEnEBXqLHtFuTcKoZ-miMC3w7R',
style: 'Aerial'
})
});
var map = new ol.Map({
layers: [layer],
renderer: ol.RendererHint.WEBGL,
target: 'map',
view: new ol.View2D({
center: ol.projection.transform(
new ol.Coordinate(-9.375, 51.483333), 'EPSG:4326', 'EPSG:3857'),
zoom: 15
})
});
var increaseHue = document.getElementById('increase-hue');
increaseHue.addEventListener('click', function() {
layer.setHue(layer.getHue() + 0.25);
}, false);
var resetHue = document.getElementById('reset-hue');
resetHue.addEventListener('click', function() {
layer.setHue(0);
}, false);
var decreaseHue = document.getElementById('decrease-hue');
decreaseHue.addEventListener('click', function() {
layer.setHue(layer.getHue() - 0.25);
}, false);
var increaseSaturation = document.getElementById('increase-saturation');
increaseSaturation.addEventListener('click', function() {
layer.setSaturation(layer.getSaturation() + 0.25);
}, false);
var resetSaturation = document.getElementById('reset-saturation');
resetSaturation.addEventListener('click', function() {
layer.setSaturation(1);
}, false);
var decreaseSaturation = document.getElementById('decrease-saturation');
decreaseSaturation.addEventListener('click', function() {
layer.setSaturation(layer.getSaturation() - 0.25);
}, false);

2
master/examples/index.html
View File

@@ -167,7 +167,7 @@
};
</script>
<title>Simple example</title>
<title>OpenLayers 3 Examples</title>
</head>
<body>

4
master/examples/jquery.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

34
master/examples/loader.js
View File

@@ -1,17 +1,15 @@
/**
*
* 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, and ol-whitespace.js are built with
* Plovr/Closure. `build.py build` builds them. They are located in the
* ../build/ directory, relatively to this script.
* 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 should be named loader.js. So it needs to be renamed to
* loader.js from loader_hosted_examples.js.
* The script must be named loader.js.
*
* Usage:
*
@@ -59,17 +57,23 @@
var oljs = 'ol.js', mode;
if ('mode' in pageParams) {
mode = pageParams.mode.toLowerCase();
if (mode != 'advanced') {
if (mode == 'debug') {
mode = 'raw';
}
if (mode != 'advanced' && mode != 'raw') {
oljs = 'ol-' + mode + '.js';
}
}
document.write('<link rel="stylesheet" href="../build/ol.css" '+
'type="text/css">');
document.write('<scr' + 'ipt type="text/javascript" ' +
'src="../build/' + oljs + '">' +
'</scr' + 'ipt>');
document.write('<scr' + 'ipt type="text/javascript" ' +
'src="' + encodeURIComponent(scriptParams.id) + '.js">' +
'</scr' + 'ipt>');
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 {
window.CLOSURE_NO_DEPS = true; // we've got our own deps file
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>');
}());

7
master/examples/mapquest-require.js Normal file
View File

@@ -0,0 +1,7 @@
goog.require('ol.Coordinate');
goog.require('ol.Map');
goog.require('ol.RendererHints');
goog.require('ol.View2D');
goog.require('ol.layer.TileLayer');
goog.require('ol.projection');
goog.require('ol.source.MapQuestOSM');

52
master/examples/mapquest.html Normal file
View File

@@ -0,0 +1,52 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="examples.css" type="text/css">
<link rel="stylesheet" href="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="example-list.html">OpenLayers 3 Examples</a>
<ul class="nav pull-right">
<li><a href="https://github.com/openlayers/ol3"><i class="icon-github"></i></a></li>
<li><a href="https://twitter.com/openlayers"><i class="icon-twitter"></i></a></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">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>
</body>
</html>

14
master/examples/mapquest.js Normal file
View File

@@ -0,0 +1,14 @@
var map = new ol.Map({
layers: [
new ol.layer.TileLayer({
source: new ol.source.MapQuestOSM()
})
],
renderers: ol.RendererHints.createFromQueryData(),
target: 'map',
view: new ol.View2D({
center: ol.projection.transform(
new ol.Coordinate(139.6917, 35.689506), 'EPSG:4326', 'EPSG:3857'),
zoom: 9
})
});

9
master/examples/mouse-position-require.js Normal file
View File

@@ -0,0 +1,9 @@
goog.require('ol.Coordinate');
goog.require('ol.Map');
goog.require('ol.RendererHints');
goog.require('ol.View2D');
goog.require('ol.control.MousePosition');
goog.require('ol.control.defaults');
goog.require('ol.layer.TileLayer');
goog.require('ol.projection');
goog.require('ol.source.OpenStreetMap');

53
master/examples/mouse-position.html Normal file
View File

@@ -0,0 +1,53 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="examples.css" type="text/css">
<link rel="stylesheet" href="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="example-list.html">OpenLayers 3 Examples</a>
<ul class="nav pull-right">
<li><a href="https://github.com/openlayers/ol3"><i class="icon-github"></i></a></li>
<li><a href="https://twitter.com/openlayers"><i class="icon-twitter"></i></a></li>
</ul>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
<small id="mouse-position"></small>
</div>
</div>
<div class="row-fluid">
<div class="span4">
<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>
</div>
</div>
</div>
<script src="loader.js?id=mouse-position" type="text/javascript"></script>
</body>
</html>

21
master/examples/mouse-position.js Normal file
View File

@@ -0,0 +1,21 @@
var map = new ol.Map({
controls: ol.control.defaults({}, [
new ol.control.MousePosition({
coordinateFormat: ol.Coordinate.toStringHDMS,
projection: 'EPSG:4326',
target: document.getElementById('mouse-position'),
undefinedHTML: '&nbsp;'
})
]),
layers: [
new ol.layer.TileLayer({
source: new ol.source.OpenStreetMap()
})
],
renderers: ol.RendererHints.createFromQueryData(),
target: 'map',
view: new ol.View2D({
center: new ol.Coordinate(0, 0),
zoom: 2
})
});

6
master/examples/rotation-require.js Normal file
View File

@@ -0,0 +1,6 @@
goog.require('ol.Coordinate');
goog.require('ol.Map');
goog.require('ol.RendererHints');
goog.require('ol.View2D');
goog.require('ol.layer.TileLayer');
goog.require('ol.source.OpenStreetMap');

52
master/examples/rotation.html Normal file
View File

@@ -0,0 +1,52 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="examples.css" type="text/css">
<link rel="stylesheet" href="bootstrap/css/bootstrap-responsive.min.css" type="text/css">
<title>Rotation example</title>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="example-list.html">OpenLayers 3 Examples</a>
<ul class="nav pull-right">
<li><a href="https://github.com/openlayers/ol3"><i class="icon-github"></i></a></li>
<li><a href="https://twitter.com/openlayers"><i class="icon-twitter"></i></a></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">Rotation example</h4>
<p id="shortdesc">Example of a rotated map. Use <code>Alt</code>+<code>Shift</code>+drag to rotate the map.</p>
<div id="docs">
<p>See the <a href="rotation.js" target="_blank">rotation.js source</a> to see how this is done.</p>
</div>
<div id="tags">rotation, openstreetmap</div>
</div>
</div>
</div>
<script src="loader.js?id=rotation" type="text/javascript"></script>
</body>
</html>

14
master/examples/rotation.js Normal file
View File

@@ -0,0 +1,14 @@
var map = new ol.Map({
layers: [
new ol.layer.TileLayer({
source: new ol.source.OpenStreetMap()
})
],
renderers: ol.RendererHints.createFromQueryData(),
target: 'map',
view: new ol.View2D({
center: new ol.Coordinate(-25860000, 4130000),
rotation: Math.PI / 6,
zoom: 10
})
});

9
master/examples/scale-line-require.js Normal file
View File

@@ -0,0 +1,9 @@
goog.require('ol.Coordinate');
goog.require('ol.Map');
goog.require('ol.RendererHints');
goog.require('ol.View2D');
goog.require('ol.control.ScaleLine');
goog.require('ol.control.ScaleLineUnits');
goog.require('ol.control.defaults');
goog.require('ol.layer.TileLayer');
goog.require('ol.source.OpenStreetMap');

26
master/examples/two-layers.html → master/examples/scale-line.html
View File

@@ -7,7 +7,7 @@
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="examples.css" type="text/css">
<link rel="stylesheet" href="bootstrap/css/bootstrap-responsive.min.css" type="text/css">
<title>Two layers example</title>
<title>Scale line example</title>
</head>
<body>
@@ -26,37 +26,27 @@
<div class="container-fluid">
<div class="row-fluid">
<div class="span4">
<h4>Canvas</h4>
<div id="canvasMap" class="map"></div>
<small><a id="canvas-export" href="#" download="map.jpeg">export map as jpeg</a></small>
</div>
<div class="span4">
<h4>WebGL</h4>
<div id="webglMap" class="map"></div>
</div>
<div class="span4">
<h4>DOM</h4>
<div id="domMap" class="map"></div>
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>
<div class="row-fluid">
<div class="span4">
<h4 id="title">Two layers example</h4>
<p id="shortdesc">Sync'ed DOM, WebGL and Canvas maps with a Bing Maps base layer and a semi-transparent TileJSON layer.</p>
<h4 id="title">Scale line example</h4>
<p id="shortdesc">Example of a scale line.</p>
<div id="docs">
<p>See the <a href="two-layers.js" target="_blank">two-layers.js source</a> to see how this is done.</p>
<p>See the <a href="scale-line.js" target="_blank">scale-line.js source</a> to see how this is done.</p>
</div>
<div id="tags">layers, tilejson, bing, bingmaps</div>
<div id="tags">scale-line, openstreetmap</div>
</div>
</div>
</div>
<script src="loader.js?id=two-layers" type="text/javascript"></script>
<script src="loader.js?id=scale-line" type="text/javascript"></script>
</body>
</html>

18
master/examples/scale-line.js Normal file
View File

@@ -0,0 +1,18 @@
var map = new ol.Map({
controls: ol.control.defaults({}, [
new ol.control.ScaleLine({
units: ol.control.ScaleLineUnits.IMPERIAL
})
]),
layers: [
new ol.layer.TileLayer({
source: new ol.source.OpenStreetMap()
})
],
renderers: ol.RendererHints.createFromQueryData(),
target: 'map',
view: new ol.View2D({
center: new ol.Coordinate(0, 0),
zoom: 2
})
});

8
master/examples/semi-transparent-layer-require.js Normal file
View File

@@ -0,0 +1,8 @@
goog.require('ol.Coordinate');
goog.require('ol.Map');
goog.require('ol.RendererHints');
goog.require('ol.View2D');
goog.require('ol.layer.TileLayer');
goog.require('ol.projection');
goog.require('ol.source.MapQuestOpenAerial');
goog.require('ol.source.TileJSON');

52
master/examples/semi-transparent-layer.html Normal file
View File

@@ -0,0 +1,52 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="examples.css" type="text/css">
<link rel="stylesheet" href="bootstrap/css/bootstrap-responsive.min.css" type="text/css">
<title>Semi-transparent layer example</title>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="example-list.html">OpenLayers 3 Examples</a>
<ul class="nav pull-right">
<li><a href="https://github.com/openlayers/ol3"><i class="icon-github"></i></a></li>
<li><a href="https://twitter.com/openlayers"><i class="icon-twitter"></i></a></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">Semi-transparent layer example</h4>
<p id="shortdesc">Example of a map with a semi-transparent layer.</p>
<div id="docs">
<p>See the <a href="semi-transparent-layer.js" target="_blank">semi-transparent-layer.js source</a> to see how this is done.</p>
</div>
<div id="tags">transparent, mapquest, tilejson</div>
</div>
</div>
</div>
<script src="loader.js?id=semi-transparent-layer" type="text/javascript"></script>
</body>
</html>

19
master/examples/semi-transparent-layer.js Normal file
View File

@@ -0,0 +1,19 @@
var map = new ol.Map({
layers: [
new ol.layer.TileLayer({
source: new ol.source.MapQuestOpenAerial()
}),
new ol.layer.TileLayer({
source: new ol.source.TileJSON({
uri: 'http://api.tiles.mapbox.com/v3/mapbox.va-quake-aug.jsonp'
})
})
],
renderers: ol.RendererHints.createFromQueryData(),
target: 'map',
view: new ol.View2D({
center: ol.projection.transform(
new ol.Coordinate(-77.93255, 37.9555), 'EPSG:4326', 'EPSG:3857'),
zoom: 5
})
});

11
master/examples/side-by-side-require.js Normal file
View File

@@ -0,0 +1,11 @@
goog.require('ol.Collection');
goog.require('ol.Coordinate');
goog.require('ol.Map');
goog.require('ol.RendererHint');
goog.require('ol.View2D');
goog.require('ol.animation');
goog.require('ol.easing');
goog.require('ol.interaction.Keyboard');
goog.require('ol.layer.TileLayer');
goog.require('ol.projection');
goog.require('ol.source.MapQuestOpenAerial');

15
master/examples/side-by-side.html
View File

@@ -29,17 +29,14 @@
<div class="span4">
<h4>Canvas</h4>
<div id="canvasMap" class="map"></div>
<small id="canvasMousePosition"></small>
</div>
<div class="span4">
<h4>WebGL</h4>
<div id="webglMap" class="map"></div>
<small id="webglMousePosition"></small>
</div>
<div class="span4">
<h4>DOM</h4>
<div id="domMap" class="map"></div>
<small id="domMousePosition"></small>
</div>
</div>
@@ -47,11 +44,11 @@
<div class="span4">
<h4 id="title">Side-by-side example</h4>
<p id="shortdesc">The two maps share the same center, resolution, rotation and layers.</p>
<p id="shortdesc">The three maps, one WebGL, one Canvas, one DOM, share the same center, resolution, rotation and layers.</p>
<div id="docs">
<p>See the <a href="side-by-side.js" target="_blank">side-by-side.js source</a> to see how this is done.</p>
</div>
<div id="tags">side-by-side, canvas, webgl, dom, sync, object</div>
<div id="tags">side-by-side, canvas, webgl, dom, canvas, sync, object</div>
</div>
<div class="span8">
@@ -61,18 +58,10 @@
<dd>drag, arrow keys</dd>
<dt>Zoom</dt>
<dd>double-click, <code>Shift</code>+double-click, mouse wheel, <code>+</code>/<code>-</code> keys; <code>Shift</code>+drag</dd>
<dt>Rotate</dt>
<dd><code>Alt+Shift</code>+drag, <code>r</code> to reset</dd>
<dt>Brightness/contrast</dt>
<dd><code>b</code>/<code>B</code>/<code>c</code>/<code>C</code> keys (WebGL only)</dd>
<dt>Hue/saturation</dt>
<dd><code>h</code>/<code>H</code>/<code>s</code>/<code>S</code> keys (WebGL only)</dd>
<dt>Opacity</dt>
<dd><code>o</code>/<code>O</code> keys</dd>
<dt>Visibility</dt>
<dd><code>v</code>/<code>V</code> keys</dd>
<dt>Animations</dt>
<dd><code>j</code>/<code>l</code>/<code>m</code>/<code>x</code>/<code>L</code>/<code>M</code>/<code>X</code> keys</dd>
<dt>Reset</dt>
<dd><code>0</code> key</dd>
</dl>

169
master/examples/side-by-side.js
View File

@@ -1,21 +1,6 @@
goog.require('ol.Collection');
goog.require('ol.Coordinate');
goog.require('ol.Map');
goog.require('ol.RendererHint');
goog.require('ol.View2D');
goog.require('ol.animation');
goog.require('ol.control.MousePosition');
goog.require('ol.control.defaults');
goog.require('ol.easing');
goog.require('ol.interaction.Keyboard');
goog.require('ol.layer.TileLayer');
goog.require('ol.projection');
goog.require('ol.source.MapQuestOpenAerial');
var LONDON = ol.projection.transformWithCodes(
var LONDON = ol.projection.transform(
new ol.Coordinate(-0.12755, 51.507222), 'EPSG:4326', 'EPSG:3857');
var MOSCOW = ol.projection.transformWithCodes(
var MOSCOW = ol.projection.transform(
new ol.Coordinate(37.6178, 55.7517), 'EPSG:4326', 'EPSG:3857');
var layer = new ol.layer.TileLayer({
@@ -27,28 +12,14 @@ var view = new ol.View2D({
zoom: 1
});
var domMousePosition = new ol.control.MousePosition({
coordinateFormat: ol.Coordinate.toStringHDMS,
projection: ol.projection.getFromCode('EPSG:4326'),
target: document.getElementById('domMousePosition'),
undefinedHTML: '&nbsp;'
});
var domMap = new ol.Map({
controls: ol.control.defaults({}, [domMousePosition]),
layers: new ol.Collection([layer]),
renderer: ol.RendererHint.DOM,
target: 'domMap',
view: view
});
var webglMousePosition = new ol.control.MousePosition({
coordinateFormat: ol.Coordinate.toStringHDMS,
projection: ol.projection.getFromCode('EPSG:4326'),
target: document.getElementById('webglMousePosition'),
undefinedHTML: '&nbsp;'
});
var webglMap = new ol.Map({
controls: ol.control.defaults({}, [webglMousePosition]),
renderer: ol.RendererHint.WEBGL,
target: 'webglMap'
});
@@ -58,14 +29,7 @@ if (webglMap !== null) {
}
var canvasMousePosition = new ol.control.MousePosition({
coordinateFormat: ol.Coordinate.toStringHDMS,
projection: ol.projection.getFromCode('EPSG:4326'),
target: document.getElementById('canvasMousePosition'),
undefinedHtml: '&nbsp;'
});
var canvasMap = new ol.Map({
controls: ol.control.defaults({}, [canvasMousePosition]),
renderer: ol.RendererHint.CANVAS,
target: 'canvasMap'
});
@@ -76,144 +40,19 @@ if (canvasMap !== null) {
var keyboardInteraction = new ol.interaction.Keyboard();
keyboardInteraction.addCallback('0', function() {
layer.setBrightness(0);
layer.setContrast(1);
layer.setHue(0);
layer.setSaturation(1);
layer.setOpacity(1);
layer.setVisible(true);
});
keyboardInteraction.addCallback('b', function() {
layer.setBrightness(layer.getBrightness() - 0.1);
});
keyboardInteraction.addCallback('B', function() {
layer.setBrightness(layer.getBrightness() + 0.1);
});
keyboardInteraction.addCallback('c', function() {
layer.setContrast(layer.getContrast() - 0.1);
});
keyboardInteraction.addCallback('C', function() {
// contrast is unbounded, but for this example we clamp to 3
layer.setContrast(Math.min(3, layer.getContrast() + 0.1));
});
keyboardInteraction.addCallback('h', function() {
layer.setHue(layer.getHue() - (Math.PI / 5));
});
keyboardInteraction.addCallback('H', function() {
layer.setHue(layer.getHue() + (Math.PI / 5));
});
keyboardInteraction.addCallback('j', function() {
var bounce = ol.animation.bounce({
resolution: 2 * view.getResolution()
});
domMap.addPreRenderFunction(bounce);
webglMap.addPreRenderFunction(bounce);
canvasMap.addPreRenderFunction(bounce);
});
keyboardInteraction.addCallback('l', function() {
var pan = ol.animation.pan({
source: view.getCenter(),
easing: ol.easing.elastic
});
domMap.addPreRenderFunction(pan);
webglMap.addPreRenderFunction(pan);
canvasMap.addPreRenderFunction(pan);
view.setCenter(LONDON);
});
keyboardInteraction.addCallback('L', function() {
var start = +new Date();
var duration = 5000;
var bounce = ol.animation.bounce({
resolution: 2 * view.getResolution(),
start: start,
duration: duration
});
var pan = ol.animation.pan({
source: view.getCenter(),
start: start,
duration: duration
});
var rotate = ol.animation.rotate({
rotation: 4 * Math.PI,
start: start,
duration: duration
});
var preRenderFunctions = [bounce, pan, rotate];
domMap.addPreRenderFunctions(preRenderFunctions);
webglMap.addPreRenderFunctions(preRenderFunctions);
canvasMap.addPreRenderFunctions(preRenderFunctions);
view.setCenter(LONDON);
});
keyboardInteraction.addCallback('m', function() {
var pan = ol.animation.pan({
source: view.getCenter(),
duration: 1000,
easing: ol.easing.bounce
});
domMap.addPreRenderFunction(pan);
webglMap.addPreRenderFunction(pan);
canvasMap.addPreRenderFunction(pan);
view.setCenter(MOSCOW);
});
keyboardInteraction.addCallback('M', function() {
var start = +new Date();
var duration = 5000;
var bounce = ol.animation.bounce({
resolution: 2 * view.getResolution(),
start: start,
duration: duration
});
var pan = ol.animation.pan({
source: view.getCenter(),
start: start,
duration: duration
});
var rotate = ol.animation.rotate({
rotation: -4 * Math.PI,
start: start,
duration: duration
});
var preRenderFunctions = [bounce, pan, rotate];
domMap.addPreRenderFunctions(preRenderFunctions);
webglMap.addPreRenderFunctions(preRenderFunctions);
canvasMap.addPreRenderFunctions(preRenderFunctions);
view.setCenter(MOSCOW);
});
keyboardInteraction.addCallback('o', function() {
layer.setOpacity(layer.getOpacity() - 0.1);
layer.setOpacity(layer.getOpacity() - 0.125);
});
keyboardInteraction.addCallback('O', function() {
layer.setOpacity(layer.getOpacity() + 0.1);
layer.setOpacity(layer.getOpacity() + 0.125);
});
keyboardInteraction.addCallback('r', function() {
view.setRotation(0);
});
keyboardInteraction.addCallback('s', function() {
layer.setSaturation(layer.getSaturation() - 0.1);
});
keyboardInteraction.addCallback('S', function() {
// saturation is unbounded, but for this example we clamp to 3
layer.setSaturation(Math.min(3, layer.getSaturation() + 0.1));
});
keyboardInteraction.addCallback('vV', function() {
layer.setVisible(!layer.getVisible());
});
keyboardInteraction.addCallback('x', function() {
var rotate = ol.animation.rotate({
rotation: 4 * Math.PI,
duration: 2000
});
domMap.addPreRenderFunction(rotate);
webglMap.addPreRenderFunction(rotate);
canvasMap.addPreRenderFunction(rotate);
});
keyboardInteraction.addCallback('X', function() {
var rotate = ol.animation.rotate({
rotation: -4 * Math.PI,
duration: 2000
});
domMap.addPreRenderFunction(rotate);
webglMap.addPreRenderFunction(rotate);
canvasMap.addPreRenderFunction(rotate);
});
domMap.getInteractions().push(keyboardInteraction);

6
master/examples/simple-require.js Normal file
View File

@@ -0,0 +1,6 @@
goog.require('ol.Coordinate');
goog.require('ol.Map');
goog.require('ol.RendererHints');
goog.require('ol.View2D');
goog.require('ol.layer.TileLayer');
goog.require('ol.source.OpenStreetMap');

13
master/examples/simple.js
View File

@@ -1,18 +1,9 @@
goog.require('ol.Collection');
goog.require('ol.Coordinate');
goog.require('ol.Map');
goog.require('ol.RendererHints');
goog.require('ol.View2D');
goog.require('ol.layer.TileLayer');
goog.require('ol.source.OpenStreetMap');
var map = new ol.Map({
layers: new ol.Collection([
layers: [
new ol.layer.TileLayer({
source: new ol.source.OpenStreetMap()
})
]),
],
renderers: ol.RendererHints.createFromQueryData(),
target: 'map',
view: new ol.View2D({

7
master/examples/stamen-require.js Normal file
View File

@@ -0,0 +1,7 @@
goog.require('ol.Coordinate');
goog.require('ol.Map');
goog.require('ol.RendererHints');
goog.require('ol.View2D');
goog.require('ol.layer.TileLayer');
goog.require('ol.projection');
goog.require('ol.source.Stamen');

4
master/examples/stamen.html
View File

@@ -35,11 +35,11 @@
<div class="span4">
<h4 id="title">Stamen example</h4>
<p id="shortdesc">Example of a Stamen tile source.</p>
<p id="shortdesc">Example of a Stamen tile source. Two layers are composed: the watercolor base layer with the terrain labels.</p>
<div id="docs">
<p>See the <a href="stamen.js" target="_blank">stamen.js source</a> to see how this is done.</p>
</div>
<div id="tags">stamen, watercolor</div>
<div id="tags">stamen, watercolor, terrain-labels, two-layers</div>
</div>
</div>

39
master/examples/stamen.js
View File

@@ -1,30 +1,21 @@
goog.require('ol.Collection');
goog.require('ol.Coordinate');
goog.require('ol.Map');
goog.require('ol.RendererHints');
goog.require('ol.View2D');
goog.require('ol.layer.TileLayer');
goog.require('ol.source.Stamen');
var layers = new ol.Collection([
new ol.layer.TileLayer({
source: new ol.source.Stamen({
layer: 'watercolor'
})
}),
new ol.layer.TileLayer({
source: new ol.source.Stamen({
layer: 'terrain-labels'
})
})
]);
var map = new ol.Map({
layers: layers,
layers: [
new ol.layer.TileLayer({
source: new ol.source.Stamen({
layer: 'watercolor'
})
}),
new ol.layer.TileLayer({
source: new ol.source.Stamen({
layer: 'terrain-labels'
})
})
],
renderers: ol.RendererHints.createFromQueryData(),
target: 'map',
view: new ol.View2D({
center: new ol.Coordinate(0, 0),
zoom: 3
center: ol.projection.transform(
new ol.Coordinate(-122.416667, 37.783333), 'EPSG:4326', 'EPSG:3857'),
zoom: 12
})
});

6
master/examples/tilejson-require.js Normal file
View File

@@ -0,0 +1,6 @@
goog.require('ol.Coordinate');
goog.require('ol.Map');
goog.require('ol.RendererHints');
goog.require('ol.View2D');
goog.require('ol.layer.TileLayer');
goog.require('ol.source.TileJSON');

52
master/examples/tilejson.html Normal file
View File

@@ -0,0 +1,52 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="examples.css" type="text/css">
<link rel="stylesheet" href="bootstrap/css/bootstrap-responsive.min.css" type="text/css">
<title>TileJSON example</title>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="example-list.html">OpenLayers 3 Examples</a>
<ul class="nav pull-right">
<li><a href="https://github.com/openlayers/ol3"><i class="icon-github"></i></a></li>
<li><a href="https://twitter.com/openlayers"><i class="icon-twitter"></i></a></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">TileJSON example</h4>
<p id="shortdesc">Example of a TileJSON layer.</p>
<div id="docs">
<p>See the <a href="tilejson.js" target="_blank">tilejson.js source</a> to see how this is done.</p>
</div>
<div id="tags">tilejson</div>
</div>
</div>
</div>
<script src="loader.js?id=tilejson" type="text/javascript"></script>
</body>
</html>

15
master/examples/tilejson.js Normal file
View File

@@ -0,0 +1,15 @@
var map = new ol.Map({
layers: [
new ol.layer.TileLayer({
source: new ol.source.TileJSON({
uri: 'http://api.tiles.mapbox.com/v3/mapbox.geography-class.jsonp'
})
})
],
renderers: ol.RendererHints.createFromQueryData(),
target: 'map',
view: new ol.View2D({
center: new ol.Coordinate(0, 0),
zoom: 2
})
});

56
master/examples/two-layers.js
View File

@@ -1,56 +0,0 @@
goog.require('ol.Collection');
goog.require('ol.Coordinate');
goog.require('ol.Map');
goog.require('ol.RendererHint');
goog.require('ol.View2D');
goog.require('ol.layer.TileLayer');
goog.require('ol.projection');
goog.require('ol.source.BingMaps');
goog.require('ol.source.TileJSON');
var layers = new ol.Collection([
new ol.layer.TileLayer({
source: new ol.source.BingMaps({
key: 'AgtFlPYDnymLEe9zJ5PCkghbNiFZE9aAtTy3mPaEnEBXqLHtFuTcKoZ-miMC3w7R',
style: 'Aerial'
})
}),
new ol.layer.TileLayer({
source: new ol.source.TileJSON({
uri: 'http://api.tiles.mapbox.com/v3/mapbox.va-quake-aug.jsonp'
})
})
]);
var webglMap = new ol.Map({
layers: layers,
renderer: ol.RendererHint.WEBGL,
target: 'webglMap',
view: new ol.View2D({
center: ol.projection.transformWithCodes(
new ol.Coordinate(-77.93255, 37.9555), 'EPSG:4326', 'EPSG:3857'),
zoom: 5
})
});
var domMap = new ol.Map({
renderer: ol.RendererHint.DOM,
target: 'domMap'
});
domMap.bindTo('layers', webglMap);
domMap.bindTo('view', webglMap);
var canvasMap = new ol.Map({
renderer: ol.RendererHint.CANVAS,
target: 'canvasMap'
});
canvasMap.bindTo('layers', webglMap);
canvasMap.bindTo('view', webglMap);
// Handle clicks on the "canvas-export" element.
var element = document.getElementById('canvas-export');
element.addEventListener('click', function(e) {
e.target.href = canvasMap.getRenderer().getCanvas().toDataURL('image/jpeg');
}, false);

1
master/examples/wms-capabilities-require.js Normal file
View File

@@ -0,0 +1 @@
goog.require('ol.parser.ogc.WMSCapabilities');

2
master/examples/wms-capabilities.js
View File

@@ -1,5 +1,3 @@
goog.require('ol.parser.ogc.WMSCapabilities');
var parser = new ol.parser.ogc.WMSCapabilities(), result;
var url = 'data/ogcsample.xml';

11
master/examples/wms-custom-proj-require.js Normal file
View File

@@ -0,0 +1,11 @@
goog.require('ol.Attribution');
goog.require('ol.Coordinate');
goog.require('ol.Extent');
goog.require('ol.Map');
goog.require('ol.Projection');
goog.require('ol.ProjectionUnits');
goog.require('ol.RendererHints');
goog.require('ol.View2D');
goog.require('ol.layer.TileLayer');
goog.require('ol.projection');
goog.require('ol.source.TiledWMS');

36
master/examples/wms-custom-proj.js
View File

@@ -1,26 +1,13 @@
goog.require('ol.Attribution');
goog.require('ol.Collection');
goog.require('ol.Coordinate');
goog.require('ol.Extent');
goog.require('ol.Map');
goog.require('ol.Projection');
goog.require('ol.ProjectionUnits');
goog.require('ol.RendererHints');
goog.require('ol.View2D');
goog.require('ol.layer.ImageLayer');
goog.require('ol.layer.TileLayer');
goog.require('ol.projection');
goog.require('ol.source.SingleImageWMS');
goog.require('ol.source.TiledWMS');
var epsg21781 = new ol.Projection('EPSG:21781', ol.ProjectionUnits.METERS,
// Validity extent from http://spatialreference.org
new ol.Extent(485869.5728, 76443.1884, 837076.5648, 299941.7864));
var epsg21781 = new ol.Projection({
code: 'EPSG:21781',
units: ol.ProjectionUnits.METERS,
// Validity extent from http://spatialreference.org
extent: new ol.Extent(485869.5728, 76443.1884, 837076.5648, 299941.7864)
});
ol.projection.addProjection(epsg21781);
var extent = new ol.Extent(420000, 30000, 900000, 350000);
var layers = new ol.Collection([
var layers = [
new ol.layer.TileLayer({
source: new ol.source.TiledWMS({
url: 'http://wms.geo.admin.ch/',
@@ -35,17 +22,18 @@ var layers = new ol.Collection([
extent: extent
})
}),
new ol.layer.ImageLayer({
source: new ol.source.SingleImageWMS({
new ol.layer.TileLayer({
source: new ol.source.TiledWMS({
url: 'http://wms.geo.admin.ch/',
attributions: [new ol.Attribution(
'&copy; ' +
'<a href="http://www.geo.admin.ch/internet/geoportal/en/home.html">' +
'National parks / geo.admin.ch</a>')],
params: {'LAYERS': 'ch.bafu.schutzgebiete-paerke_nationaler_bedeutung'}
params: {'LAYERS': 'ch.bafu.schutzgebiete-paerke_nationaler_bedeutung'},
extent: extent
})
})
]);
];
var map = new ol.Map({
layers: layers,

9
master/examples/wms-single-image-require.js Normal file
View File

@@ -0,0 +1,9 @@
goog.require('ol.Coordinate');
goog.require('ol.Extent');
goog.require('ol.Map');
goog.require('ol.RendererHint');
goog.require('ol.View2D');
goog.require('ol.layer.ImageLayer');
goog.require('ol.layer.TileLayer');
goog.require('ol.source.MapQuestOpenAerial');
goog.require('ol.source.SingleImageWMS');

52
master/examples/wms-single-image.html Normal file
View File

@@ -0,0 +1,52 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="examples.css" type="text/css">
<link rel="stylesheet" href="bootstrap/css/bootstrap-responsive.min.css" type="text/css">
<title>Single image WMS example</title>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="example-list.html">OpenLayers 3 Examples</a>
<ul class="nav pull-right">
<li><a href="https://github.com/openlayers/ol3"><i class="icon-github"></i></a></li>
<li><a href="https://twitter.com/openlayers"><i class="icon-twitter"></i></a></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">Single image WMS example</h4>
<p id="shortdesc">Example of a single image WMS layer.</p>
<div id="docs">
<p>See the <a href="wms-single-image.js" target="_blank">wms-single-image.js source</a> to see how this is done.</p>
</div>
<div id="tags">wms, image</div>
</div>
</div>
</div>
<script src="loader.js?id=wms-single-image" type="text/javascript"></script>
</body>
</html>

22
master/examples/wms-single-image.js Normal file
View File

@@ -0,0 +1,22 @@
var layers = [
new ol.layer.TileLayer({
source: new ol.source.MapQuestOpenAerial()
}),
new ol.layer.ImageLayer({
source: new ol.source.SingleImageWMS({
url: 'http://demo.opengeo.org/geoserver/wms',
crossOrigin: null,
params: {'LAYERS': 'topp:states'},
extent: new ol.Extent(-13884991, 2870341, -7455066, 6338219)
})
})
];
var map = new ol.Map({
renderer: ol.RendererHint.CANVAS,
layers: layers,
target: 'map',
view: new ol.View2D({
center: new ol.Coordinate(-10997148, 4569099),
zoom: 4
})
});

8
master/examples/wms-tiled-require.js Normal file
View File

@@ -0,0 +1,8 @@
goog.require('ol.Coordinate');
goog.require('ol.Extent');
goog.require('ol.Map');
goog.require('ol.RendererHint');
goog.require('ol.View2D');
goog.require('ol.layer.TileLayer');
goog.require('ol.source.MapQuestOpenAerial');
goog.require('ol.source.TiledWMS');

4
master/examples/wms.html → master/examples/wms-tiled.html
View File

@@ -37,7 +37,7 @@
<h4 id="title">Tiled WMS example</h4>
<p id="shortdesc">Example of a tiled WMS layer.</p>
<div id="docs">
<p>See the <a href="wms.js" target="_blank">wms.js source</a> to see how this is done.</p>
<p>See the <a href="wms-tiled.js" target="_blank">wms-tiled.js source</a> to see how this is done.</p>
</div>
<div id="tags">wms, tile, tilelayer</div>
</div>
@@ -46,7 +46,7 @@
</div>
<script src="loader.js?id=wms" type="text/javascript"></script>
<script src="loader.js?id=wms-tiled" type="text/javascript"></script>
</body>
</html>

15
master/examples/wms.js → master/examples/wms-tiled.js
View File

@@ -1,15 +1,4 @@
goog.require('ol.Collection');
goog.require('ol.Coordinate');
goog.require('ol.Extent');
goog.require('ol.Map');
goog.require('ol.RendererHint');
goog.require('ol.View2D');
goog.require('ol.layer.TileLayer');
goog.require('ol.source.MapQuestOpenAerial');
goog.require('ol.source.TiledWMS');
var layers = new ol.Collection([
var layers = [
new ol.layer.TileLayer({
source: new ol.source.MapQuestOpenAerial()
}),
@@ -21,7 +10,7 @@ var layers = new ol.Collection([
extent: new ol.Extent(-13884991, 2870341, -7455066, 6338219)
})
})
]);
];
var map = new ol.Map({
renderer: ol.RendererHint.CANVAS,
layers: layers,