From d60a6e943bf249de6dac98343db82f85d207cc62 Mon Sep 17 00:00:00 2001 From: Tom Payne Date: Wed, 6 Mar 2013 20:12:04 +0100 Subject: [PATCH 01/24] Don't use ol.Collection in simple example --- examples/simple.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/examples/simple.js b/examples/simple.js index f71042eeb0..d676b0e03a 100644 --- a/examples/simple.js +++ b/examples/simple.js @@ -1,4 +1,3 @@ -goog.require('ol.Collection'); goog.require('ol.Coordinate'); goog.require('ol.Map'); goog.require('ol.RendererHints'); @@ -8,11 +7,11 @@ 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({ From 818b4a9d5e04db0ea1e02eb9e172f7805e66f173 Mon Sep 17 00:00:00 2001 From: Tom Payne Date: Wed, 6 Mar 2013 20:12:43 +0100 Subject: [PATCH 02/24] Remove Bing Maps from two-layers example --- examples/two-layers.html | 4 ++-- examples/two-layers.js | 7 ++----- 2 files changed, 4 insertions(+), 7 deletions(-) diff --git a/examples/two-layers.html b/examples/two-layers.html index 7e0e68044f..6cc9e5b32c 100644 --- a/examples/two-layers.html +++ b/examples/two-layers.html @@ -45,11 +45,11 @@

Two layers example

-

Sync'ed DOM, WebGL and Canvas maps with a Bing Maps base layer and a semi-transparent TileJSON layer.

+

Sync'ed DOM, WebGL and Canvas maps with a OpenStreetMap base layer and a semi-transparent TileJSON layer.

See the two-layers.js source to see how this is done.

-
layers, tilejson, bing, bingmaps
+
layers, tilejson
diff --git a/examples/two-layers.js b/examples/two-layers.js index 2f23647884..d38cb3c10a 100644 --- a/examples/two-layers.js +++ b/examples/two-layers.js @@ -4,16 +4,13 @@ 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.OpenStreetMap'); goog.require('ol.source.TileJSON'); var layers = [ new ol.layer.TileLayer({ - source: new ol.source.BingMaps({ - key: 'AgtFlPYDnymLEe9zJ5PCkghbNiFZE9aAtTy3mPaEnEBXqLHtFuTcKoZ-miMC3w7R', - style: 'Aerial' - }) + source: new ol.source.OpenStreetMap() }), new ol.layer.TileLayer({ source: new ol.source.TileJSON({ From 3e7cd5fffb9e1021553db2859ffcd4aab28eef51 Mon Sep 17 00:00:00 2001 From: Tom Payne Date: Wed, 6 Mar 2013 20:13:45 +0100 Subject: [PATCH 03/24] Add Bing Maps example --- examples/bing-maps.html | 52 +++++++++++++++++++++++++++++++++++++++++ examples/bing-maps.js | 26 +++++++++++++++++++++ 2 files changed, 78 insertions(+) create mode 100644 examples/bing-maps.html create mode 100644 examples/bing-maps.js diff --git a/examples/bing-maps.html b/examples/bing-maps.html new file mode 100644 index 0000000000..1265dac5c3 --- /dev/null +++ b/examples/bing-maps.html @@ -0,0 +1,52 @@ + + + + + + + + + + Bing Maps example + + + +
+
+
+ OpenLayers 3 Examples +
    +
    • +
    • +
+
+
+
+ +
+ +
+
+
+
+
+ +
+ +
+

Bing Maps example

+

Example of a Bing Maps layer.

+
+

See the bing-maps.js source to see how this is done.

+
+
bing, bing-maps
+
+ +
+ +
+ + + + + diff --git a/examples/bing-maps.js b/examples/bing-maps.js new file mode 100644 index 0000000000..d6372fe966 --- /dev/null +++ b/examples/bing-maps.js @@ -0,0 +1,26 @@ +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'); + + +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.transformWithCodes( + new ol.Coordinate(-123.1, 49.25), 'EPSG:4326', 'EPSG:3857'), + zoom: 8 + }) +}); From 99870acd19a2d11d7f8dd97ca0985f3d57bc4ee2 Mon Sep 17 00:00:00 2001 From: Tom Payne Date: Wed, 6 Mar 2013 20:21:07 +0100 Subject: [PATCH 04/24] Add TileJSON example --- examples/tilejson.html | 52 ++++++++++++++++++++++++++++++++++++++++++ examples/tilejson.js | 23 +++++++++++++++++++ 2 files changed, 75 insertions(+) create mode 100644 examples/tilejson.html create mode 100644 examples/tilejson.js diff --git a/examples/tilejson.html b/examples/tilejson.html new file mode 100644 index 0000000000..4e05014695 --- /dev/null +++ b/examples/tilejson.html @@ -0,0 +1,52 @@ + + + + + + + + + + TileJSON example + + + +
+
+
+ OpenLayers 3 Examples +
    +
    • +
    • +
+
+
+
+ +
+ +
+
+
+
+
+ +
+ +
+

TileJSON example

+

Example of a TileJSON layer.

+
+

See the tilejson.js source to see how this is done.

+
+
tilejson
+
+ +
+ +
+ + + + + diff --git a/examples/tilejson.js b/examples/tilejson.js new file mode 100644 index 0000000000..241bc7b1b5 --- /dev/null +++ b/examples/tilejson.js @@ -0,0 +1,23 @@ +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'); + + +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 + }) +}); From 6dab2cd466f6de56a53d99436802b5a158e078e0 Mon Sep 17 00:00:00 2001 From: Tom Payne Date: Wed, 6 Mar 2013 20:33:26 +0100 Subject: [PATCH 05/24] Remove scale line from full screen example --- examples/full-screen.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/examples/full-screen.js b/examples/full-screen.js index aee8ad538b..e425d59244 100644 --- a/examples/full-screen.js +++ b/examples/full-screen.js @@ -11,9 +11,6 @@ var layer = new ol.layer.TileLayer({ source: new ol.source.MapQuestOpenAerial() }); var map = new ol.Map({ - controls: ol.control.defaults({ - scaleLine: true - }), layers: [layer], renderers: ol.RendererHints.createFromQueryData(), target: 'map', From 09b75f804410353db6d0b7145c016b624a985b00 Mon Sep 17 00:00:00 2001 From: Tom Payne Date: Wed, 6 Mar 2013 20:33:56 +0100 Subject: [PATCH 06/24] Don't include scale line in default controls --- examples/epsg-4326.js | 9 ++++----- src/objectliterals.exports | 2 -- src/ol/control/defaults.js | 9 --------- 3 files changed, 4 insertions(+), 16 deletions(-) diff --git a/examples/epsg-4326.js b/examples/epsg-4326.js index d9fb194eb8..ddb389f4c2 100644 --- a/examples/epsg-4326.js +++ b/examples/epsg-4326.js @@ -2,6 +2,7 @@ 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'); @@ -24,13 +25,11 @@ var layers = [ ]; 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], diff --git a/src/objectliterals.exports b/src/objectliterals.exports index 1acfeb2081..61aa26a066 100644 --- a/src/objectliterals.exports +++ b/src/objectliterals.exports @@ -49,8 +49,6 @@ @exportObjectLiteral ol.control.DefaultsOptions @exportObjectLiteralProperty ol.control.DefaultsOptions.attribution boolean|undefined @exportObjectLiteralProperty ol.control.DefaultsOptions.attributionOptions ol.control.AttributionOptions|undefined -@exportObjectLiteralProperty ol.control.DefaultsOptions.scaleLine boolean|undefined -@exportObjectLiteralProperty ol.control.DefaultsOptions.scaleLineOptions ol.control.ScaleLineOptions|undefined @exportObjectLiteralProperty ol.control.DefaultsOptions.zoom boolean|undefined @exportObjectLiteralProperty ol.control.DefaultsOptions.zoomOptions ol.control.ZoomOptions|undefined diff --git a/src/ol/control/defaults.js b/src/ol/control/defaults.js index 6217c59a7a..90980c182b 100644 --- a/src/ol/control/defaults.js +++ b/src/ol/control/defaults.js @@ -2,7 +2,6 @@ goog.provide('ol.control.defaults'); goog.require('goog.array'); goog.require('ol.control.Attribution'); -goog.require('ol.control.ScaleLine'); goog.require('ol.control.Zoom'); @@ -26,14 +25,6 @@ ol.control.defaults = function(opt_options, opt_controls) { controls.push(new ol.control.Attribution(attributionControlOptions)); } - var scaleLineControl = goog.isDef(options.scaleLine) ? - options.scaleLine : false; - if (scaleLineControl) { - var scaleLineOptions = goog.isDef(options.scaleLineOptions) ? - options.scaleLineOptions : undefined; - controls.push(new ol.control.ScaleLine(scaleLineOptions)); - } - var zoomControl = goog.isDef(options.zoom) ? options.zoom : true; if (zoomControl) { From 05c21e6f1c80da2d2e7cedbcdb6e3f56e7a49db7 Mon Sep 17 00:00:00 2001 From: Tom Payne Date: Wed, 6 Mar 2013 20:34:47 +0100 Subject: [PATCH 07/24] Add scale line example --- examples/scale-line.html | 52 ++++++++++++++++++++++++++++++++++++++++ examples/scale-line.js | 29 ++++++++++++++++++++++ 2 files changed, 81 insertions(+) create mode 100644 examples/scale-line.html create mode 100644 examples/scale-line.js diff --git a/examples/scale-line.html b/examples/scale-line.html new file mode 100644 index 0000000000..54d9d6cd42 --- /dev/null +++ b/examples/scale-line.html @@ -0,0 +1,52 @@ + + + + + + + + + + Scale line example + + + +
+
+
+ OpenLayers 3 Examples +
    +
    • +
    • +
+
+
+
+ +
+ +
+
+
+
+
+ +
+ +
+

Scale line example

+

Example of a scale line.

+
+

See the scale-line.js source to see how this is done.

+
+
scale-line, openstreetmap
+
+ +
+ +
+ + + + + diff --git a/examples/scale-line.js b/examples/scale-line.js new file mode 100644 index 0000000000..94dac62e22 --- /dev/null +++ b/examples/scale-line.js @@ -0,0 +1,29 @@ +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'); + + +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 + }) +}); From fe7f112c41ceb007d005f23c00f5e446a3b8ce71 Mon Sep 17 00:00:00 2001 From: Tom Payne Date: Wed, 6 Mar 2013 20:44:52 +0100 Subject: [PATCH 08/24] Remove mouse position control from side-by-side example --- examples/side-by-side.html | 3 --- examples/side-by-side.js | 23 ----------------------- 2 files changed, 26 deletions(-) diff --git a/examples/side-by-side.html b/examples/side-by-side.html index 869eac70d0..7742708316 100644 --- a/examples/side-by-side.html +++ b/examples/side-by-side.html @@ -29,17 +29,14 @@

Canvas

-

WebGL

-

DOM

-
diff --git a/examples/side-by-side.js b/examples/side-by-side.js index 983c8e1528..4e795e2de3 100644 --- a/examples/side-by-side.js +++ b/examples/side-by-side.js @@ -4,8 +4,6 @@ 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'); @@ -27,28 +25,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: ' ' -}); 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: ' ' -}); var webglMap = new ol.Map({ - controls: ol.control.defaults({}, [webglMousePosition]), renderer: ol.RendererHint.WEBGL, target: 'webglMap' }); @@ -58,14 +42,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: ' ' -}); var canvasMap = new ol.Map({ - controls: ol.control.defaults({}, [canvasMousePosition]), renderer: ol.RendererHint.CANVAS, target: 'canvasMap' }); From b07c1cce1fd9db81c8cd58c680de0064606a8ae3 Mon Sep 17 00:00:00 2001 From: Tom Payne Date: Wed, 6 Mar 2013 20:45:08 +0100 Subject: [PATCH 09/24] Add mouse position example --- examples/mouse-position.html | 53 ++++++++++++++++++++++++++++++++++++ examples/mouse-position.js | 32 ++++++++++++++++++++++ 2 files changed, 85 insertions(+) create mode 100644 examples/mouse-position.html create mode 100644 examples/mouse-position.js diff --git a/examples/mouse-position.html b/examples/mouse-position.html new file mode 100644 index 0000000000..9412d00c99 --- /dev/null +++ b/examples/mouse-position.html @@ -0,0 +1,53 @@ + + + + + + + + + + Mouse position example + + + +
+
+
+ OpenLayers 3 Examples +
    +
    • +
    • +
+
+
+
+ +
+ +
+
+
+ +
+
+ +
+ +
+

Mouse position example

+

Example of a mouse position control, outside the map.

+
+

See the mouse-position.js source to see how this is done.

+
+
mouse-position, openstreetmap
+
+ +
+ +
+ + + + + diff --git a/examples/mouse-position.js b/examples/mouse-position.js new file mode 100644 index 0000000000..de89c3a573 --- /dev/null +++ b/examples/mouse-position.js @@ -0,0 +1,32 @@ +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'); + + +var map = new ol.Map({ + controls: ol.control.defaults({}, [ + new ol.control.MousePosition({ + coordinateFormat: ol.Coordinate.toStringHDMS, + projection: ol.projection.getFromCode('EPSG:4326'), + target: document.getElementById('mouse-position'), + undefinedHTML: ' ' + }) + ]), + 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 + }) +}); From 479e7fc8dda1b023a884952cd51d049fd7b07b13 Mon Sep 17 00:00:00 2001 From: Tom Payne Date: Wed, 6 Mar 2013 21:08:06 +0100 Subject: [PATCH 10/24] Make Stamen example prettier --- examples/stamen.html | 4 ++-- examples/stamen.js | 31 ++++++++++++++++--------------- 2 files changed, 18 insertions(+), 17 deletions(-) diff --git a/examples/stamen.html b/examples/stamen.html index 811d378633..930c971209 100644 --- a/examples/stamen.html +++ b/examples/stamen.html @@ -35,11 +35,11 @@

Stamen example

-

Example of a Stamen tile source.

+

Example of a Stamen tile source. Two layers are composed: the watercolor base layer with the terrain labels.

See the stamen.js source to see how this is done.

-
stamen, watercolor
+
stamen, watercolor, terrain-labels, two-layers
diff --git a/examples/stamen.js b/examples/stamen.js index ff505b2364..0cfbaa966a 100644 --- a/examples/stamen.js +++ b/examples/stamen.js @@ -3,27 +3,28 @@ 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'); -var layers = [ - 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.transformWithCodes( + new ol.Coordinate(-122.416667, 37.783333), 'EPSG:4326', 'EPSG:3857'), + zoom: 12 }) }); From 58323bb8fcff3b6d9c737c90ee3a30fc707a24e9 Mon Sep 17 00:00:00 2001 From: Tom Payne Date: Wed, 6 Mar 2013 21:28:59 +0100 Subject: [PATCH 11/24] Add export JPEG example --- examples/export-jpeg.html | 53 +++++++++++++++++++++++++++++++++++++++ examples/export-jpeg.js | 26 +++++++++++++++++++ 2 files changed, 79 insertions(+) create mode 100644 examples/export-jpeg.html create mode 100644 examples/export-jpeg.js diff --git a/examples/export-jpeg.html b/examples/export-jpeg.html new file mode 100644 index 0000000000..cd7b4a4ec3 --- /dev/null +++ b/examples/export-jpeg.html @@ -0,0 +1,53 @@ + + + + + + + + + + Export JPEG example + + + +
+
+
+ OpenLayers 3 Examples +
    +
    • +
    • +
+
+
+
+ +
+ +
+
+
+ Export JPEG +
+
+ +
+ +
+

Export JPEG example

+

Example of exporting a map as a JPEG image.

+
+

See the export-jpeg.js source to see how this is done.

+
+
export-jpeg, openstreetmap
+
+ +
+ +
+ + + + + diff --git a/examples/export-jpeg.js b/examples/export-jpeg.js new file mode 100644 index 0000000000..42655117fd --- /dev/null +++ b/examples/export-jpeg.js @@ -0,0 +1,26 @@ +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'); + + +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); From a686a0a89385f151355bb741e25788642d90664c Mon Sep 17 00:00:00 2001 From: Tom Payne Date: Wed, 6 Mar 2013 21:29:23 +0100 Subject: [PATCH 12/24] Remove two-layers example --- examples/two-layers.html | 62 ---------------------------------------- examples/two-layers.js | 52 --------------------------------- 2 files changed, 114 deletions(-) delete mode 100644 examples/two-layers.html delete mode 100644 examples/two-layers.js diff --git a/examples/two-layers.html b/examples/two-layers.html deleted file mode 100644 index 6cc9e5b32c..0000000000 --- a/examples/two-layers.html +++ /dev/null @@ -1,62 +0,0 @@ - - - - - - - - - - Two layers example - - - -
-
-
- OpenLayers 3 Examples -
    -
    • -
    • -
-
-
-
- -
- -
-
-

Canvas

-
- export map as jpeg -
-
-

WebGL

-
-
-
-

DOM

-
-
-
- -
- -
-

Two layers example

-

Sync'ed DOM, WebGL and Canvas maps with a OpenStreetMap base layer and a semi-transparent TileJSON layer.

-
-

See the two-layers.js source to see how this is done.

-
-
layers, tilejson
-
- -
- -
- - - - - diff --git a/examples/two-layers.js b/examples/two-layers.js deleted file mode 100644 index d38cb3c10a..0000000000 --- a/examples/two-layers.js +++ /dev/null @@ -1,52 +0,0 @@ -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.OpenStreetMap'); -goog.require('ol.source.TileJSON'); - - -var layers = [ - new ol.layer.TileLayer({ - source: new ol.source.OpenStreetMap() - }), - 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); From f942333f48d09adbcf9e49e228fd7cbb81ff9860 Mon Sep 17 00:00:00 2001 From: Tom Payne Date: Thu, 7 Mar 2013 00:46:09 +0100 Subject: [PATCH 13/24] Add MapQuest example --- examples/mapquest.html | 52 ++++++++++++++++++++++++++++++++++++++++++ examples/mapquest.js | 23 +++++++++++++++++++ 2 files changed, 75 insertions(+) create mode 100644 examples/mapquest.html create mode 100644 examples/mapquest.js diff --git a/examples/mapquest.html b/examples/mapquest.html new file mode 100644 index 0000000000..abc7b5057b --- /dev/null +++ b/examples/mapquest.html @@ -0,0 +1,52 @@ + + + + + + + + + + MapQuest example + + + +
+
+
+ OpenLayers 3 Examples +
    +
    • +
    • +
+
+
+
+ +
+ +
+
+
+
+
+ +
+ +
+

MapQuest example

+

Example of a MapQuest map.

+
+

See the mapquest.js source to see how this is done.

+
+
mapquest
+
+ +
+ +
+ + + + + diff --git a/examples/mapquest.js b/examples/mapquest.js new file mode 100644 index 0000000000..5bdc4aa37e --- /dev/null +++ b/examples/mapquest.js @@ -0,0 +1,23 @@ +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'); + + +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.transformWithCodes( + new ol.Coordinate(139.6917, 35.689506), 'EPSG:4326', 'EPSG:3857'), + zoom: 9 + }) +}); From f0466ef9c731c30bd4ab99095e6da7c1a092714e Mon Sep 17 00:00:00 2001 From: Tom Payne Date: Thu, 7 Mar 2013 01:42:14 +0100 Subject: [PATCH 14/24] Add hue/saturation example --- examples/hue-saturation.html | 62 ++++++++++++++++++++++++++++++++++++ examples/hue-saturation.js | 47 +++++++++++++++++++++++++++ 2 files changed, 109 insertions(+) create mode 100644 examples/hue-saturation.html create mode 100644 examples/hue-saturation.js diff --git a/examples/hue-saturation.html b/examples/hue-saturation.html new file mode 100644 index 0000000000..daf15a3013 --- /dev/null +++ b/examples/hue-saturation.html @@ -0,0 +1,62 @@ + + + + + + + + + + Hue/saturation example + + + +
+
+
+ OpenLayers 3 Examples +
    +
    • +
    • +
+
+
+
+ +
+ +
+
+
+
+ + + +
+
+ + + +
+
+
+ +
+ +
+

Hue/saturation example

+

Example of hue/saturation control on the client (WebGL only).

+
+

See the hue-saturation.js source to see how this is done.

+
+
hue, saturation, webgl
+
+ +
+ +
+ + + + + diff --git a/examples/hue-saturation.js b/examples/hue-saturation.js new file mode 100644 index 0000000000..1ece743371 --- /dev/null +++ b/examples/hue-saturation.js @@ -0,0 +1,47 @@ +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'); + + +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 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); From 8ab00689b245336709f51896c8029f6a4f27a616 Mon Sep 17 00:00:00 2001 From: Tom Payne Date: Thu, 7 Mar 2013 01:49:41 +0100 Subject: [PATCH 15/24] Remove hue/saturation from side-by-side example --- examples/side-by-side.html | 2 -- examples/side-by-side.js | 15 --------------- 2 files changed, 17 deletions(-) diff --git a/examples/side-by-side.html b/examples/side-by-side.html index 7742708316..40dfd96f5c 100644 --- a/examples/side-by-side.html +++ b/examples/side-by-side.html @@ -62,8 +62,6 @@
Alt+Shift+drag, r to reset
Brightness/contrast
b/B/c/C keys (WebGL only)
-
Hue/saturation
-
h/H/s/S keys (WebGL only)
Opacity
o/O keys
Visibility
diff --git a/examples/side-by-side.js b/examples/side-by-side.js index 4e795e2de3..ffcccd6ed5 100644 --- a/examples/side-by-side.js +++ b/examples/side-by-side.js @@ -55,8 +55,6 @@ 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); }); @@ -73,12 +71,6 @@ 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() @@ -165,13 +157,6 @@ keyboardInteraction.addCallback('O', function() { 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()); }); From bea6b644afc8eed234a9f9e561217184e39b7aab Mon Sep 17 00:00:00 2001 From: Tom Payne Date: Thu, 7 Mar 2013 01:53:52 +0100 Subject: [PATCH 16/24] Add brightness/contrast example --- examples/brightness-contrast.html | 62 +++++++++++++++++++++++++++++++ examples/brightness-contrast.js | 47 +++++++++++++++++++++++ 2 files changed, 109 insertions(+) create mode 100644 examples/brightness-contrast.html create mode 100644 examples/brightness-contrast.js diff --git a/examples/brightness-contrast.html b/examples/brightness-contrast.html new file mode 100644 index 0000000000..503a48ee27 --- /dev/null +++ b/examples/brightness-contrast.html @@ -0,0 +1,62 @@ + + + + + + + + + + Brightness/contrast example + + + +
+
+
+ OpenLayers 3 Examples +
    +
    • +
    • +
+
+
+
+ +
+ +
+
+
+
+ + + +
+
+ + + +
+
+
+ +
+ +
+

Brightness/contrast example

+

Example of brightness/contrast control on the client (WebGL only).

+
+

See the brightness-contrast.js source to see how this is done.

+
+
brightness, contrast, webgl
+
+ +
+ +
+ + + + + diff --git a/examples/brightness-contrast.js b/examples/brightness-contrast.js new file mode 100644 index 0000000000..fe87f6ccaf --- /dev/null +++ b/examples/brightness-contrast.js @@ -0,0 +1,47 @@ +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'); + + +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); From 50cb6294ee027829264e8bfcc4b522eb01e0c92c Mon Sep 17 00:00:00 2001 From: Tom Payne Date: Thu, 7 Mar 2013 01:54:51 +0100 Subject: [PATCH 17/24] Remove brightness/contrast from side-by-side example --- examples/side-by-side.html | 2 -- examples/side-by-side.js | 15 --------------- 2 files changed, 17 deletions(-) diff --git a/examples/side-by-side.html b/examples/side-by-side.html index 40dfd96f5c..b937863e3d 100644 --- a/examples/side-by-side.html +++ b/examples/side-by-side.html @@ -60,8 +60,6 @@
double-click, Shift+double-click, mouse wheel, +/- keys; Shift+drag
Rotate
Alt+Shift+drag, r to reset
-
Brightness/contrast
-
b/B/c/C keys (WebGL only)
Opacity
o/O keys
Visibility
diff --git a/examples/side-by-side.js b/examples/side-by-side.js index ffcccd6ed5..01d7971372 100644 --- a/examples/side-by-side.js +++ b/examples/side-by-side.js @@ -53,24 +53,9 @@ if (canvasMap !== null) { var keyboardInteraction = new ol.interaction.Keyboard(); keyboardInteraction.addCallback('0', function() { - layer.setBrightness(0); - layer.setContrast(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('j', function() { var bounce = ol.animation.bounce({ resolution: 2 * view.getResolution() From 674eb9b396d0c8731a472ddfa82146fc2e55efe3 Mon Sep 17 00:00:00 2001 From: Tom Payne Date: Thu, 7 Mar 2013 02:56:28 +0100 Subject: [PATCH 18/24] Add animation example --- examples/animation.html | 60 ++++++++++++++++++++ examples/animation.js | 122 ++++++++++++++++++++++++++++++++++++++++ 2 files changed, 182 insertions(+) create mode 100644 examples/animation.html create mode 100644 examples/animation.js diff --git a/examples/animation.html b/examples/animation.html new file mode 100644 index 0000000000..e346fd9310 --- /dev/null +++ b/examples/animation.html @@ -0,0 +1,60 @@ + + + + + + + + + + Animation example + + + +
+
+
+ OpenLayers 3 Examples +
    +
    • +
    • +
+
+
+
+ +
+ +
+
+
+ + + +
+ + + + + +
+ +
+ +
+

Animation example

+

Example animations.

+
+

See the animation.js source to see how this is done.

+
+
animation
+
+ +
+ +
+ + + + + diff --git a/examples/animation.js b/examples/animation.js new file mode 100644 index 0000000000..63a9da3e27 --- /dev/null +++ b/examples/animation.js @@ -0,0 +1,122 @@ +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'); + + +var london = ol.projection.transformWithCodes( + new ol.Coordinate(-0.12755, 51.507222), 'EPSG:4326', 'EPSG:3857'); +var moscow = ol.projection.transformWithCodes( + new ol.Coordinate(37.6178, 55.7517), 'EPSG:4326', 'EPSG:3857'); +var instanbul = ol.projection.transformWithCodes( + new ol.Coordinate(28.9744, 41.0128), 'EPSG:4326', 'EPSG:3857'); +var rome = ol.projection.transformWithCodes( + new ol.Coordinate(12.5, 41.9), 'EPSG:4326', 'EPSG:3857'); +var bern = ol.projection.transformWithCodes( + 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({ + source: map.getView().getView2D().getCenter(), + duration: 2000 + }); + 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({ + source: map.getView().getView2D().getCenter(), + duration: 2000, + easing: ol.easing.elastic + }); + 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({ + source: map.getView().getView2D().getCenter(), + duration: 2000, + easing: ol.easing.bounce + }); + 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); From 3c701067b3a7b74ff72dd72f8a597ba0fa52305e Mon Sep 17 00:00:00 2001 From: Tom Payne Date: Thu, 7 Mar 2013 02:58:00 +0100 Subject: [PATCH 19/24] Remove animations from side-by-side example --- examples/side-by-side.html | 4 -- examples/side-by-side.js | 95 -------------------------------------- 2 files changed, 99 deletions(-) diff --git a/examples/side-by-side.html b/examples/side-by-side.html index b937863e3d..ecdfe499a3 100644 --- a/examples/side-by-side.html +++ b/examples/side-by-side.html @@ -58,14 +58,10 @@
drag, arrow keys
Zoom
double-click, Shift+double-click, mouse wheel, +/- keys; Shift+drag
-
Rotate
-
Alt+Shift+drag, r to reset
Opacity
o/O keys
Visibility
v/V keys
-
Animations
-
j/l/m/x/L/M/X keys
Reset
0 key
diff --git a/examples/side-by-side.js b/examples/side-by-side.js index 01d7971372..5f07324f80 100644 --- a/examples/side-by-side.js +++ b/examples/side-by-side.js @@ -56,83 +56,6 @@ keyboardInteraction.addCallback('0', function() { layer.setOpacity(1); layer.setVisible(true); }); -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); }); @@ -145,22 +68,4 @@ keyboardInteraction.addCallback('r', function() { 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); From d4b58d489fb656a0a672f0906c77f83981b2400e Mon Sep 17 00:00:00 2001 From: Tom Payne Date: Thu, 7 Mar 2013 03:15:19 +0100 Subject: [PATCH 20/24] Correct description in side-by-side example --- examples/side-by-side.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/examples/side-by-side.html b/examples/side-by-side.html index ecdfe499a3..c7544898ae 100644 --- a/examples/side-by-side.html +++ b/examples/side-by-side.html @@ -44,11 +44,11 @@

Side-by-side example

-

The two maps share the same center, resolution, rotation and layers.

+

The three maps, one WebGL, one Canvas, one DOM, share the same center, resolution, rotation and layers.

See the side-by-side.js source to see how this is done.

-
side-by-side, canvas, webgl, dom, sync, object
+
side-by-side, canvas, webgl, dom, canvas, sync, object
From feb03b8cda8c2007402952aab6ea6a58f2a26001 Mon Sep 17 00:00:00 2001 From: Frederic Junod Date: Thu, 7 Mar 2013 10:14:37 +0100 Subject: [PATCH 21/24] Change opacity step value in side-by-side example Avoid rounding issue (0.1 in binary format). fixes #299 --- examples/side-by-side.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/examples/side-by-side.js b/examples/side-by-side.js index 5f07324f80..56e67c1f42 100644 --- a/examples/side-by-side.js +++ b/examples/side-by-side.js @@ -57,10 +57,10 @@ keyboardInteraction.addCallback('0', function() { layer.setVisible(true); }); 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); From 71f06320f6c482a401936c78acd9961ab4e6220c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89ric=20Lemoine?= Date: Thu, 7 Mar 2013 11:59:09 +0100 Subject: [PATCH 22/24] WMS example renamed to wms-tiled --- examples/{wms.html => wms-tiled.html} | 4 ++-- examples/{wms.js => wms-tiled.js} | 0 2 files changed, 2 insertions(+), 2 deletions(-) rename examples/{wms.html => wms-tiled.html} (88%) rename examples/{wms.js => wms-tiled.js} (100%) diff --git a/examples/wms.html b/examples/wms-tiled.html similarity index 88% rename from examples/wms.html rename to examples/wms-tiled.html index 75d0ae3f02..04dc1c40c3 100644 --- a/examples/wms.html +++ b/examples/wms-tiled.html @@ -37,7 +37,7 @@

Tiled WMS example

Example of a tiled WMS layer.

-

See the wms.js source to see how this is done.

+

See the wms-tiled.js source to see how this is done.

wms, tile, tilelayer
@@ -46,7 +46,7 @@ - + diff --git a/examples/wms.js b/examples/wms-tiled.js similarity index 100% rename from examples/wms.js rename to examples/wms-tiled.js From 02cbdde333dd743b5bb8455e99ef2e09ac567eae Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89ric=20Lemoine?= Date: Thu, 7 Mar 2013 12:29:13 +0100 Subject: [PATCH 23/24] Add a single image WMS example --- examples/wms-single-image.html | 52 ++++++++++++++++++++++++++++++++++ examples/wms-single-image.js | 33 +++++++++++++++++++++ 2 files changed, 85 insertions(+) create mode 100644 examples/wms-single-image.html create mode 100644 examples/wms-single-image.js diff --git a/examples/wms-single-image.html b/examples/wms-single-image.html new file mode 100644 index 0000000000..6014aa59bf --- /dev/null +++ b/examples/wms-single-image.html @@ -0,0 +1,52 @@ + + + + + + + + + + Single image WMS example + + + +
+
+
+ OpenLayers 3 Examples +
    +
    • +
    • +
+
+
+
+ +
+ +
+
+
+
+
+ +
+ +
+

Single image WMS example

+

Example of a single image WMS layer.

+
+

See the wms-single-image.js source to see how this is done.

+
+
wms, image
+
+ +
+ +
+ + + + + diff --git a/examples/wms-single-image.js b/examples/wms-single-image.js new file mode 100644 index 0000000000..53fc11e48b --- /dev/null +++ b/examples/wms-single-image.js @@ -0,0 +1,33 @@ +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'); + + +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 + }) +}); From 3c37e6da56cbe3226a7cea32d2e6e3b2b658e5c3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89ric=20Lemoine?= Date: Thu, 7 Mar 2013 12:36:09 +0100 Subject: [PATCH 24/24] Make custom proj example use tile layers only --- examples/wms-custom-proj.js | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/examples/wms-custom-proj.js b/examples/wms-custom-proj.js index a27bd2c6e4..783443e5d3 100644 --- a/examples/wms-custom-proj.js +++ b/examples/wms-custom-proj.js @@ -6,10 +6,8 @@ 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'); @@ -34,14 +32,15 @@ var layers = [ 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( '© ' + '' + 'National parks / geo.admin.ch')], - params: {'LAYERS': 'ch.bafu.schutzgebiete-paerke_nationaler_bedeutung'} + params: {'LAYERS': 'ch.bafu.schutzgebiete-paerke_nationaler_bedeutung'}, + extent: extent }) }) ];