Merge pull request #881 from fredj/examples_css

examples: don't inject ol.css from loader.js

.travis.yml

@@ -1,5 +1,6 @@
 before_install:
   - "sudo pip install http://closure-linter.googlecode.com/files/closure_linter-latest.tar.gz"
+  - "sudo pip install regex"
   - "git clone --depth=50 https://github.com/jsdoc3/jsdoc build/jsdoc"
   - "git clone https://code.google.com/p/glsl-unit/ build/glsl-unit"
 

README.md

@@ -2,8 +2,8 @@
 
 [![Travis CI Status](https://secure.travis-ci.org/openlayers/ol3.png)](http://travis-ci.org/#!/openlayers/ol3)
 
-Welcome to OpenLayers 3!
+Welcome to [OpenLayers 3](http://ol3js.org/)!
 
-To see OpenLayers 3 in action you can look at the live examples on
-http://openlayers.github.io/ol3/master/examples/.  If you want to contribute
-to OpenLayers 3 please read the [CONTRIBUTING](CONTRIBUTING.md) page.
+Check out the [hosted examples](http://ol3js.org/en/master/examples/) or poke around the evolving [API docs](http://ol3js.org/en/master/apidoc/).
+
+Please see our guide on [contributing](CONTRIBUTING.md) if you're interested in getting involved.

bin/generate-exports.py

@@ -92,7 +92,7 @@ class Class(Exportable):
             lines.append(' */\n')
             lines.append('%s = function(options) {\n' % (self.export_name(),))
             lines.append('  /** @type {%s} */\n' % (self.object_literal.name,))
-            lines.append('  var arg;\n');
+            lines.append('  var arg = /** @type {%s} */ (options);\n' % (self.object_literal.name,));
             lines.append('  if (goog.isDefAndNotNull(options)) {\n')
             # FIXME: we modify the user's options object
             lines.append(''.join(
@@ -103,12 +103,8 @@ class Class(Exportable):
                              {'o': o, 'base': b.name, 'ctor': k.export_name(),
                               'extern': ol.extern_name()} \
                                      for o, ol, k, b in self.nested_options()))
-            lines.append('    arg = {')
-            lines.extend(','.join('\n      %s: options.%s' % (key, key) for key in sorted(self.object_literal.prop_types.keys())))
-            lines.append('\n    };\n')
-            lines.append('  } else {\n')
-            lines.append('    arg = /** @type {%s} */ (options);\n' % (self.object_literal.name,))
-            lines.append('  }\n')
+            lines.extend('\n'.join('    arg.%s = options.%s;' % (key, key) for key in sorted(self.object_literal.prop_types.keys())))
+            lines.append('\n  }\n')
             lines.append('  goog.base(this, arg);\n')
             lines.append('};\n')
             lines.append('goog.inherits(\n')

build.py

@@ -5,7 +5,7 @@ import gzip
 import json
 import os
 import os.path
-import re
+import regex as re
 import shutil
 import sys
 
@@ -72,6 +72,9 @@ if sys.platform == 'win32':
 else:
     variables.GIT = 'git'
     variables.GJSLINT = 'gjslint'
+    if sys.platform == 'darwin':
+        variables.JAVA = '/Library/Internet Plug-Ins/JavaAppletPlugin.plugin/Contents/Home/bin/java'
+    else:
         variables.JAVA = 'java'
     variables.JAR = 'jar'
     variables.JSDOC = 'jsdoc'
@@ -142,8 +145,8 @@ SRC = [path
        if path.endswith('.js')
        if path not in SHADER_SRC]
 
-PLOVR_JAR = 'build/plovr-eba786b34df9.jar'
-PLOVR_JAR_MD5 = '20eac8ccc4578676511cf7ccbfc65100'
+PLOVR_JAR = 'build/plovr-2013-rc3.jar'
+PLOVR_JAR_MD5 = '8690b431a7c257b8849ae7d0fa979537'
 
 PROJ4JS = 'build/proj4js/lib/proj4js-combined.js'
 PROJ4JS_ZIP = 'build/proj4js-1.1.0.zip'
@@ -312,7 +315,6 @@ def examples_star_json(name, match):
                 '../externs/oli.js',
                 '../externs/proj4js.js',
                 '../externs/tilejson.js',
-                '../externs/w3c_device_sensor_event.js',
             ],
         })
         with open(t.name, 'w') as f:
@@ -569,25 +571,11 @@ virtual('plovr', PLOVR_JAR)
 @target(PLOVR_JAR, clean=False)
 def plovr_jar(t):
     t.info('downloading %r', t.name)
-    t.download('https://plovr.googlecode.com/files/' +
+    t.download('http://plovr.com/' +
                os.path.basename(PLOVR_JAR), md5=PLOVR_JAR_MD5)
     t.info('downloaded %r', t.name)
 
 
-@target('gh-pages', 'host-examples', 'doc', phony=True)
-def gh_pages(t):
-    with t.tempdir() as tempdir:
-        t.run('%(GIT)s', 'clone', '--branch', 'gh-pages',
-              'git@github.com:openlayers/ol3.git', tempdir)
-        with t.chdir(tempdir):
-            t.rm_rf('%(BRANCH)s')
-        t.cp_r('build/gh-pages/%(BRANCH)s', tempdir + '/%(BRANCH)s')
-        with t.chdir(tempdir):
-            t.run('%(GIT)s', 'add', '--all', '%(BRANCH)s')
-            t.run('%(GIT)s', 'commit', '--message', 'Updated')
-            t.run('%(GIT)s', 'push', 'origin', 'gh-pages')
-
-
 virtual('doc', 'build/jsdoc-%(BRANCH)s-timestamp' % vars(variables))
 
 
@@ -596,7 +584,7 @@ virtual('doc', 'build/jsdoc-%(BRANCH)s-timestamp' % vars(variables))
         SRC, SHADER_SRC, ifind('doc/template'))
 def jsdoc_BRANCH_timestamp(t):
     t.run('%(JSDOC)s', '-c', 'doc/conf.json', 'src', 'doc/index.md',
-          '-d', 'build/gh-pages/%(BRANCH)s/apidoc')
+          '-d', 'build/hosted/%(BRANCH)s/apidoc')
     t.touch()
 
 
@@ -634,15 +622,15 @@ def split_example_file(example, dst_dir):
 
 @target('host-resources', phony=True)
 def host_resources(t):
-    resources_dir = 'build/gh-pages/%(BRANCH)s/resources'
+    resources_dir = 'build/hosted/%(BRANCH)s/resources'
     t.rm_rf(resources_dir)
     t.cp_r('resources', resources_dir)
 
 
 @target('host-examples', 'build', 'host-resources', 'examples', phony=True)
 def host_examples(t):
-    examples_dir = 'build/gh-pages/%(BRANCH)s/examples'
-    build_dir = 'build/gh-pages/%(BRANCH)s/build'
+    examples_dir = 'build/hosted/%(BRANCH)s/examples'
+    build_dir = 'build/hosted/%(BRANCH)s/build'
     t.rm_rf(examples_dir)
     t.makedirs(examples_dir)
     t.rm_rf(build_dir)
@@ -657,25 +645,25 @@ def host_examples(t):
     t.cp('examples/index.html', 'examples/example-list.js',
          'examples/example-list.xml', 'examples/Jugl.js',
          'examples/jquery.min.js', examples_dir)
-    t.rm_rf('build/gh-pages/%(BRANCH)s/closure-library')
-    t.makedirs('build/gh-pages/%(BRANCH)s/closure-library')
-    with t.chdir('build/gh-pages/%(BRANCH)s/closure-library'):
+    t.rm_rf('build/hosted/%(BRANCH)s/closure-library')
+    t.makedirs('build/hosted/%(BRANCH)s/closure-library')
+    with t.chdir('build/hosted/%(BRANCH)s/closure-library'):
         t.run('%(JAR)s', 'xf', '../../../../' + PLOVR_JAR, 'closure')
         t.run('%(JAR)s', 'xf', '../../../../' + PLOVR_JAR, 'third_party')
-    t.rm_rf('build/gh-pages/%(BRANCH)s/ol')
-    t.makedirs('build/gh-pages/%(BRANCH)s/ol')
-    t.cp_r('src/ol', 'build/gh-pages/%(BRANCH)s/ol/ol')
+    t.rm_rf('build/hosted/%(BRANCH)s/ol')
+    t.makedirs('build/hosted/%(BRANCH)s/ol')
+    t.cp_r('src/ol', 'build/hosted/%(BRANCH)s/ol/ol')
     t.run('%(PYTHON)s', 'bin/closure/depswriter.py',
           '--root_with_prefix', 'src ../../../ol',
-          '--root', 'build/gh-pages/%(BRANCH)s/closure-library/closure/goog',
-          '--root_with_prefix', 'build/gh-pages/%(BRANCH)s/closure-library/'
+          '--root', 'build/hosted/%(BRANCH)s/closure-library/closure/goog',
+          '--root_with_prefix', 'build/hosted/%(BRANCH)s/closure-library/'
           'third_party ../../third_party',
-          '--output_file', 'build/gh-pages/%(BRANCH)s/build/ol-deps.js')
+          '--output_file', 'build/hosted/%(BRANCH)s/build/ol-deps.js')
 
 
 @target('check-examples', 'host-examples', phony=True)
 def check_examples(t):
-    examples = ['build/gh-pages/%(BRANCH)s/' + e for e in EXAMPLES]
+    examples = ['build/hosted/%(BRANCH)s/' + e for e in EXAMPLES]
     all_examples = \
         [e + '?mode=raw' for e in examples] + \
         [e + '?mode=whitespace' for e in examples] + \

buildcfg/base.json

@@ -44,8 +44,7 @@
     "../externs/geojson.js",
     "../externs/oli.js",
     "../externs/proj4js.js",
-    "../externs/tilejson.js",
-    "../externs/w3c_device_sensor_event.js"
+    "../externs/tilejson.js"
   ],
 
   "level": "VERBOSE",
@@ -99,7 +98,8 @@
     "goog.debug.logRecordSerializer",
     "goog.debug.makeWhitespaceVisible",
     "goog.debug.normalizeErrorObject",
-    "goog.debug.reflect"
+    "goog.debug.reflect",
+    "goog.log"
   ]
 
 }

buildcfg/ol-all.json

@@ -9,8 +9,7 @@
     "../externs/geojson.js",
     "../externs/oli.js",
     "../externs/proj4js.js",
-    "../externs/tilejson.js",
-    "../externs/w3c_device_sensor_event.js"
+    "../externs/tilejson.js"
   ],
 
   "inherits": "base.json",

buildcfg/ol-simple.json

@@ -18,8 +18,7 @@
     "../externs/geojson.js",
     "../externs/oli.js",
     "../externs/proj4js.js",
-    "../externs/tilejson.js",
-    "../externs/w3c_device_sensor_event.js"
+    "../externs/tilejson.js"
   ],
 
   "inherits": "ol.json",

buildcfg/ol-whitespace.json

@@ -19,8 +19,7 @@
     "../externs/geojson.js",
     "../externs/oli.js",
     "../externs/proj4js.js",
-    "../externs/tilejson.js",
-    "../externs/w3c_device_sensor_event.js"
+    "../externs/tilejson.js"
   ],
 
   "inherits": "ol.json",

buildcfg/ol.json

@@ -19,8 +19,7 @@
     "../externs/geojson.js",
     "../externs/oli.js",
     "../externs/proj4js.js",
-    "../externs/tilejson.js",
-    "../externs/w3c_device_sensor_event.js"
+    "../externs/tilejson.js"
   ],
 
   "inherits": "base.json",

css/ol.css

@@ -202,3 +202,43 @@ a.ol-full-screen-true:after {
   height: 20px;
   width: 24px;
 }
+.ol-zoom-extent {
+  position: absolute;
+  background: rgba(255,255,255,0.4);
+  border-radius: 4px;
+  left: 8px;
+  padding: 2px;
+  top: 65px;
+}
+@media print {
+  .ol-zoom-extent {
+    display: none;
+  }
+}
+.ol-zoom-extent a {
+  display: block;
+  margin: 1px;
+  padding: 0;
+  color: white;
+  font-size: 16px;
+  font-family: 'Lucida Grande',Verdana,Geneva,Lucida,Arial,Helvetica,sans-serif;
+  font-weight: bold;
+  text-decoration: none;
+  text-align: center;
+  height: 22px;
+  width: 22px;
+  background-color: rgba(0, 60, 136, 0.5);
+  border-radius: 2px;
+}
+.ol-touch .ol-zoom-extent a {
+  font-size: 20px;
+  height: 30px;
+  width: 30px;
+  line-height: 26px;
+}
+.ol-zoom-extent a:hover {
+  background-color: rgba(0, 60, 136, 0.7);
+}
+.ol-zoom-extent a:after {
+    content: "E";
+}

doc/index.md

@@ -1,5 +1,5 @@
-Finding your way round
-----------------------
+Finding your way around
+-----------------------
 See the class list to the right and especially take a look at {@link ol.Map} and {@link ol.layer.Layer} because those are the central objects.
 
 In general every use of OpenLayers starts by initializing a map, then adding the required layers. Controls and interactions can be added to change the behavior of the map.

examples/animation.html

@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="chrome=1">
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
     <link rel="stylesheet" href="../resources/layout.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
@@ -48,7 +49,7 @@
 
       <div class="row-fluid">
 
-        <div class="span4">
+        <div class="span12">
           <h4 id="title">Animation example</h4>
           <p id="shortdesc">Demonstrates animated pan, zoom, and rotation.</p>
           <div id="docs">

examples/bind-input.html

@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="chrome=1">
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
     <link rel="stylesheet" href="../resources/layout.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">

examples/bing-maps.html

@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="chrome=1">
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
     <link rel="stylesheet" href="../resources/layout.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
@@ -41,7 +42,7 @@
 
       <div class="row-fluid">
 
-        <div class="span4">
+        <div class="span12">
           <h4 id="title">Bing Maps example</h4>
           <p id="shortdesc">Example of a Bing Maps layer.</p>
           <div id="docs">

examples/bing-maps.js

@@ -13,7 +13,7 @@ for (var i = 0; i < styles.length; ++i) {
     visible: false,
     preload: Infinity,
     source: new ol.source.BingMaps({
-      key: 'AlQLZ0-5yk301_ESrmNLma3LYxEKNSg7w-e_knuRfyYFtld-UFvXVs38NOulku3Q',
+      key: 'Ar33pRUvQOdESG8m_T15MUmNz__E1twPo42bFx9jvdDePhX0PNgAcEm44OVTS7tt',
       style: styles[i]
     })
   }));

examples/brightness-contrast.html

@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="chrome=1">
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
     <link rel="stylesheet" href="../resources/layout.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
@@ -53,7 +54,7 @@
 
       <div class="row-fluid">
 
-        <div class="span4">
+        <div class="span12">
           <h4 id="title">Brightness/contrast example</h4>
           <p id="shortdesc">Example of brightness/contrast control on the client (WebGL only).</p>
           <div id="docs">

examples/canvas-tiles.html

@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="chrome=1">
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
     <link rel="stylesheet" href="../resources/layout.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
@@ -35,7 +36,7 @@
 
       <div class="row-fluid">
 
-        <div class="span4">
+        <div class="span12">
           <h4 id="title">Canvas tiles example</h4>
           <p id="shortdesc">Renders tiles with coordinates for debugging.</p>
           <div id="docs">

examples/custom-controls.html

@@ -4,11 +4,12 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="chrome=1">
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
     <link rel="stylesheet" href="../resources/layout.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
     <style type="text/css">
-      .zoom-extent {
+      .rotate-north {
         position: absolute;
         top: 65px;
         left: 8px;
@@ -16,30 +17,23 @@
         border-radius: 4px;
         padding: 2px;
       }
-      .zoom-extent a {
+      .rotate-north a {
         display: block;
-        margin: 1px;
-        padding: 0;
         color: white;
-        font-size: 18px;
+        font-size: 16px;
         font-family: 'Lucida Grande',Verdana,Geneva,Lucida,Arial,Helvetica,sans-serif;
         font-weight: bold;
+        margin: 1px;
         text-decoration: none;
         text-align: center;
+        border-radius: 2px;
         height: 22px;
         width: 22px;
-        line-height: 19px;
         background: rgba(0,60,136,0.5);
       }
-      .zoom-extent a:hover {
+      .rotate-north a:hover {
         background: rgba(0,60,136,0.7);
       }
-      .zoom-to {
-        border-radius: 2px 2px 0 0;
-      }
-      .zoom-to:before {
-        content: "E";
-      }
     </style>
     <title>ol3 custom controls example</title>
   </head>
@@ -68,15 +62,14 @@
       </div>
 
       <div class="row-fluid">
-        <div class="span4">
+        <div class="span12">
           <h4 id="title">Custom controls</h4>
           <p id="shortdesc">This example shows how to create custom controls.</p>
           <div id="docs">
             <p>
-              This example creates a "zoom to extent" button.
+              This example creates a "rotate to north" button.
               See the <a href="custom-controls.js" target="_blank">custom-controls.js
               source</a> to see how this is done.
-              Per default, the zoom extent control use the map projection extent.
             </p>
           </div>
           <div id="tags">

examples/custom-controls.js

@@ -16,7 +16,7 @@ var app = window.app;
 
 
 //
-// Define zoom extent control.
+// Define rotate to north control.
 //
 
 
@@ -26,25 +26,26 @@ var app = window.app;
  * @extends {ol.control.Control}
  * @param {Object=} opt_options Control options.
  */
-app.ZoomExtentControl = function(opt_options) {
+app.RotateNorthControl = function(opt_options) {
 
   var options = opt_options || {};
-  this.extent_ = options.extent;
 
   var anchor = document.createElement('a');
-  anchor.href = '#zoom-to';
-  anchor.className = 'zoom-to';
+  anchor.href = '#rotate-north';
+  anchor.innerHTML = 'N';
 
   var this_ = this;
-  var handleZoomTo = function(e) {
-    this_.handleZoomTo(e);
+  var handleRotateNorth = function(e) {
+    // prevent #rotate-north anchor from getting appended to the url
+    e.preventDefault();
+    this_.getMap().getView().getView2D().setRotation(0);
   };
 
-  anchor.addEventListener('click', handleZoomTo, false);
-  anchor.addEventListener('touchstart', handleZoomTo, false);
+  anchor.addEventListener('click', handleRotateNorth, false);
+  anchor.addEventListener('touchstart', handleRotateNorth, false);
 
   var element = document.createElement('div');
-  element.className = 'zoom-extent ol-unselectable';
+  element.className = 'rotate-north ol-unselectable';
   element.appendChild(anchor);
 
   ol.control.Control.call(this, {
@@ -54,46 +55,17 @@ app.ZoomExtentControl = function(opt_options) {
   });
 
 };
-ol.inherits(app.ZoomExtentControl, ol.control.Control);
-
-
-/**
- * @param {Event} e Browser event.
- */
-app.ZoomExtentControl.prototype.handleZoomTo = function(e) {
-  // prevent #zoomTo anchor from getting appended to the url
-  e.preventDefault();
-
-  var map = this.getMap();
-  var view = map.getView();
-  view.fitExtent(this.extent_, map.getSize());
-};
-
-
-/**
- * Overload setMap to use the view projection's validity extent
- * if no extent was passed to the constructor.
- * @param {ol.Map} map Map.
- */
-app.ZoomExtentControl.prototype.setMap = function(map) {
-  ol.control.Control.prototype.setMap.call(this, map);
-  if (map && !this.extent_) {
-    this.extent_ = map.getView().getProjection().getExtent();
-  }
-};
+ol.inherits(app.RotateNorthControl, ol.control.Control);
 
 
 //
-// Create map, giving it a zoom extent control.
+// Create map, giving it a rotate to north control.
 //
 
 
 var map = new ol.Map({
   controls: ol.control.defaults({}, [
-    new app.ZoomExtentControl({
-      extent: [813079.7791264898, 848966.9639063801,
-               5929220.284081122, 5936863.986909639]
-    })
+    new app.RotateNorthControl()
   ]),
   layers: [
     new ol.layer.TileLayer({
@@ -104,6 +76,7 @@ var map = new ol.Map({
   target: 'map',
   view: new ol.View2D({
     center: [0, 0],
-    zoom: 2
+    zoom: 2,
+    rotation: 1
   })
 });

examples/device-orientation.html

@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="chrome=1">
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
     <link rel="stylesheet" href="../resources/layout.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
@@ -35,7 +36,7 @@
 
       <div class="row-fluid">
 
-        <div class="span4">
+        <div class="span12">
           <h4 id="title">Device orientation example</h4>
           <label class="checkbox" for="track">
             <input id="track" type="checkbox"/>track changes

examples/drag-rotate-and-zoom.html

@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="chrome=1">
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
     <link rel="stylesheet" href="../resources/layout.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
@@ -35,7 +36,7 @@
 
       <div class="row-fluid">
 
-        <div class="span4">
+        <div class="span12">
           <h4 id="title">Drag rotate and zoom example</h4>
           <p id="shortdesc">A single interaction to drag, rotate, and zoom.</p>
           <div id="docs">

examples/epsg-4326.html

@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="chrome=1">
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
     <link rel="stylesheet" href="../resources/layout.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
@@ -35,7 +36,7 @@
 
       <div class="row-fluid">
 
-        <div class="span4">
+        <div class="span12">
           <h4 id="title">EPSG:4326 example</h4>
           <p id="shortdesc">Example of a map in EPSG:4326.</p>
           <div id="docs">

examples/export-map.html

@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="chrome=1">
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
     <link rel="stylesheet" href="../resources/layout.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
@@ -37,7 +38,7 @@
 
       <div class="row-fluid">
 
-        <div class="span4">
+        <div class="span12">
           <h4 id="title">Export map example</h4>
           <p id="shortdesc">Example of exporting a map as a JPEG or PNG image.</p>
           <div id="docs">

examples/full-screen-drag-rotate-and-zoom.html

@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="chrome=1">
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
     <link rel="stylesheet" href="../resources/layout.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
@@ -46,7 +47,7 @@
 
       <div class="row-fluid">
 
-        <div class="span4">
+        <div class="span12">
           <h4 id="title">Full screen drag rotate and zoom example</h4>
           <p id="shortdesc">Example of drag rotate and zoom control with full screen effect.</p>
           <div id="docs">

examples/full-screen-drag-rotate-and-zoom.js

@@ -19,7 +19,7 @@ var map = new ol.Map({
   layers: [
     new ol.layer.TileLayer({
       source: new ol.source.BingMaps({
-        key: 'AlQLZ0-5yk301_ESrmNLma3LYxEKNSg7w-e_knuRfyYFtld-UFvXVs38NOulku3Q',
+        key: 'Ar33pRUvQOdESG8m_T15MUmNz__E1twPo42bFx9jvdDePhX0PNgAcEm44OVTS7tt',
         style: 'Aerial'
       })
     })

examples/full-screen.html

@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="chrome=1">
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
     <link rel="stylesheet" href="../resources/layout.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
@@ -46,7 +47,7 @@
 
       <div class="row-fluid">
 
-        <div class="span4">
+        <div class="span12">
           <h4 id="title">Full screen control example</h4>
           <p id="shortdesc">Example of a full screen control.</p>
           <div id="docs">

examples/full-screen.js

@@ -19,7 +19,7 @@ var map = new ol.Map({
   layers: [
     new ol.layer.TileLayer({
       source: new ol.source.BingMaps({
-        key: 'AlQLZ0-5yk301_ESrmNLma3LYxEKNSg7w-e_knuRfyYFtld-UFvXVs38NOulku3Q',
+        key: 'Ar33pRUvQOdESG8m_T15MUmNz__E1twPo42bFx9jvdDePhX0PNgAcEm44OVTS7tt',
         style: 'Aerial'
       })
     })

examples/geolocation.html

@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="chrome=1">
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
     <link rel="stylesheet" href="../resources/layout.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
@@ -44,13 +45,21 @@
 
       <div class="row-fluid">
 
-        <div class="span4">
+        <div class="span12">
           <h4 id="title">Geolocation example</h4>
+          <label class="checkbox" for="track">
+            <input id="track" type="checkbox"/>track position
+          </label>
+          <p>position accuracy : <code id="accuracy"></code></p>
+          <p>altitude : <code id="altitude"></code></p>
+          <p>altitude accuracy : <code id="altitudeAccuracy"></code></p>
+          <p>heading : <code id="heading"></code></p>
+          <p>speed : <code id="speed"></code></p>
+
           <p id="shortdesc">Example of a geolocation map.</p>
           <div id="docs">
             <p>See the <a href="geolocation.js" target="_blank">geolocation.js source</a> to see how this is done.</p>
           </div>
-          <button id="locate"><i class="icon-screenshot"></i> locate</button>
           <div id="tags">geolocation, openstreetmap</div>
         </div>
         <div class="span4 pull-right">

examples/geolocation.js

@@ -3,6 +3,7 @@ goog.require('ol.Map');
 goog.require('ol.Overlay');
 goog.require('ol.RendererHints');
 goog.require('ol.View2D');
+goog.require('ol.dom.Input');
 goog.require('ol.layer.TileLayer');
 goog.require('ol.source.OSM');
 
@@ -24,6 +25,17 @@ var map = new ol.Map({
 var geolocation = new ol.Geolocation();
 geolocation.bindTo('projection', map.getView());
 
+var track = new ol.dom.Input(document.getElementById('track'));
+track.bindTo('checked', geolocation, 'tracking');
+
+geolocation.on('change', function() {
+  $('#accuracy').text(geolocation.getAccuracy() + ' [m]');
+  $('#altitude').text(geolocation.getAltitude() + ' [m]');
+  $('#altitudeAccuracy').text(geolocation.getAltitudeAccuracy() + ' [m]');
+  $('#heading').text(geolocation.getHeading() + ' [rad]');
+  $('#speed').text(geolocation.getSpeed() + ' [m/s]');
+});
+
 var marker = new ol.Overlay({
   map: map,
   element: /** @type {Element} */ ($('<i/>').addClass('icon-flag').get(0))
@@ -41,8 +53,3 @@ geolocation.on('error', function(error) {
   info.innerHTML = error.message;
   info.style.display = '';
 });
-
-
-$('#locate').click(function() {
-  geolocation.setTracking(true);
-});

examples/gml.html

@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="chrome=1">
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
     <link rel="stylesheet" href="../resources/layout.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
@@ -35,7 +36,7 @@
 
       <div class="row-fluid">
 
-        <div class="span4">
+        <div class="span12">
           <h4 id="title">GML example</h4>
           <p id="shortdesc">Example of using the GML parser.</p>
           <div id="docs">

examples/gml.js

@@ -4,7 +4,6 @@ goog.require('ol.View2D');
 goog.require('ol.layer.TileLayer');
 goog.require('ol.layer.Vector');
 goog.require('ol.parser.ogc.GML_v3');
-goog.require('ol.proj');
 goog.require('ol.source.MapQuestOpenAerial');
 goog.require('ol.source.Vector');
 goog.require('ol.style.Polygon');
@@ -17,7 +16,8 @@ var raster = new ol.layer.TileLayer({
 
 var vector = new ol.layer.Vector({
   source: new ol.source.Vector({
-    projection: ol.proj.get('EPSG:4326')
+    parser: new ol.parser.ogc.GML_v3({axisOrientation: 'neu'}),
+    url: 'data/gml/topp-states-wfs.xml'
   }),
   style: new ol.style.Style({rules: [
     new ol.style.Rule({
@@ -39,22 +39,3 @@ var map = new ol.Map({
     zoom: 4
   })
 });
-
-var gml = new ol.parser.ogc.GML_v3({axisOrientation: 'neu'});
-
-var url = 'data/gml/topp-states-wfs.xml';
-var xhr = new XMLHttpRequest();
-xhr.open('GET', url, true);
-
-
-/**
- * onload handler for the XHR request.
- */
-xhr.onload = function() {
-  if (xhr.status == 200) {
-    // this is silly to have to tell the layer the destination projection
-    var projection = map.getView().getProjection();
-    vector.parseFeatures(xhr.responseText, gml, projection);
-  }
-};
-xhr.send();

examples/gpx.html

@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="chrome=1">
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
     <link rel="stylesheet" href="../resources/layout.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
@@ -43,7 +44,7 @@
           </div>
           <div id="tags">GPX</div>
         </div>
-        <div class="span4 pull-right">
+        <div class="span4 offset4">
           <div id="info" class="alert alert-success">
             &nbsp;
           </div>

examples/gpx.js

@@ -4,7 +4,6 @@ goog.require('ol.View2D');
 goog.require('ol.layer.TileLayer');
 goog.require('ol.layer.Vector');
 goog.require('ol.parser.GPX');
-goog.require('ol.proj');
 goog.require('ol.source.OSM');
 goog.require('ol.source.Vector');
 
@@ -14,7 +13,8 @@ var raster = new ol.layer.TileLayer({
 
 var vector = new ol.layer.Vector({
   source: new ol.source.Vector({
-    projection: ol.proj.get('EPSG:4326')
+    parser: new ol.parser.GPX(),
+    url: 'data/gpx/yahoo.xml'
   }),
   transformFeatureInfo: function(features) {
     var info = [];
@@ -44,22 +44,3 @@ map.on(['click', 'mousemove'], function(evt) {
     }
   });
 });
-
-var gpx = new ol.parser.GPX();
-
-var url = 'data/gpx/yahoo.xml';
-var xhr = new XMLHttpRequest();
-xhr.open('GET', url, true);
-
-
-/**
- * onload handler for the XHR request.
- */
-xhr.onload = function() {
-  if (xhr.status == 200) {
-    // this is silly to have to tell the layer the destination projection
-    var projection = map.getView().getProjection();
-    vector.parseFeatures(xhr.responseText, gpx, projection);
-  }
-};
-xhr.send();

examples/hue-saturation.html

@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="chrome=1">
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
     <link rel="stylesheet" href="../resources/layout.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
@@ -53,7 +54,7 @@
 
       <div class="row-fluid">
 
-        <div class="span4">
+        <div class="span12">
           <h4 id="title">Hue/saturation example</h4>
           <p id="shortdesc">Example of hue/saturation control on the client (WebGL only).</p>
           <div id="docs">

examples/hue-saturation.js

@@ -8,7 +8,7 @@ goog.require('ol.source.BingMaps');
 
 var layer = new ol.layer.TileLayer({
   source: new ol.source.BingMaps({
-    key: 'AlQLZ0-5yk301_ESrmNLma3LYxEKNSg7w-e_knuRfyYFtld-UFvXVs38NOulku3Q',
+    key: 'Ar33pRUvQOdESG8m_T15MUmNz__E1twPo42bFx9jvdDePhX0PNgAcEm44OVTS7tt',
     style: 'Aerial'
   })
 });

examples/index.html

@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="chrome=1">
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
     <link rel="stylesheet" href="../resources/layout.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">

examples/kml-timezones.html

@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="chrome=1">
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
     <link rel="stylesheet" href="../resources/layout.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
@@ -46,7 +47,7 @@
 
       <div class="row-fluid">
 
-        <div class="span4">
+        <div class="span12">
           <h4 id="title">Timezones in KML</h4>
           <p id="shortdesc">Demonstrates rendering timezones from KML.</p>
           <div id="docs">

examples/kml-timezones.js

@@ -5,7 +5,6 @@ goog.require('ol.expr');
 goog.require('ol.layer.TileLayer');
 goog.require('ol.layer.Vector');
 goog.require('ol.parser.KML');
-goog.require('ol.proj');
 goog.require('ol.source.Stamen');
 goog.require('ol.source.Vector');
 goog.require('ol.style.Polygon');
@@ -55,7 +54,8 @@ var style = new ol.style.Style({rules: [
 
 var vector = new ol.layer.Vector({
   source: new ol.source.Vector({
-    projection: ol.proj.get('EPSG:4326')
+    parser: new ol.parser.KML({dimension: 2}),
+    url: 'data/kml/timezones.kml'
   }),
   style: style
 });
@@ -103,21 +103,3 @@ map.on(['click', 'mousemove'], function(evt) {
     }
   });
 });
-
-var kml = new ol.parser.KML({dimension: 2});
-
-var url = 'data/kml/timezones.kml';
-var xhr = new XMLHttpRequest();
-xhr.open('GET', url, true);
-
-
-/**
- * onload handler for the XHR request.
- */
-xhr.onload = function() {
-  if (xhr.status == 200) {
-    var projection = map.getView().getProjection();
-    vector.parseFeatures(xhr.responseText, kml, projection);
-  }
-};
-xhr.send();

examples/kml.html

@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="chrome=1">
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
     <link rel="stylesheet" href="../resources/layout.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
@@ -43,7 +44,7 @@
           </div>
           <div id="tags">KML</div>
         </div>
-        <div class="span4 pull-right">
+        <div class="span4 offset4">
           <div id="info" class="alert alert-success">
             &nbsp;
           </div>

examples/kml.js

@@ -4,7 +4,6 @@ goog.require('ol.View2D');
 goog.require('ol.layer.TileLayer');
 goog.require('ol.layer.Vector');
 goog.require('ol.parser.KML');
-goog.require('ol.proj');
 goog.require('ol.source.TiledWMS');
 goog.require('ol.source.Vector');
 
@@ -20,11 +19,12 @@ var raster = new ol.layer.TileLayer({
   })
 });
 
-var epsg4326 = ol.proj.get('EPSG:4326');
-
 var vector = new ol.layer.Vector({
   source: new ol.source.Vector({
-    projection: epsg4326
+    parser: new ol.parser.KML({
+      maxDepth: 1, dimension: 2, extractStyles: true, extractAttributes: true
+    }),
+    url: 'data/kml/lines.kml'
   }),
   transformFeatureInfo: function(features) {
     var info = [];
@@ -40,15 +40,12 @@ var map = new ol.Map({
   renderer: ol.RendererHint.CANVAS,
   target: 'map',
   view: new ol.View2D({
-    projection: epsg4326,
+    projection: 'EPSG:4326',
     center: [-112.169, 36.099],
     zoom: 11
   })
 });
 
-var kml = new ol.parser.KML({
-  maxDepth: 1, dimension: 2, extractStyles: true, extractAttributes: true});
-
 map.on(['click', 'mousemove'], function(evt) {
   map.getFeatureInfo({
     pixel: evt.getPixel(),
@@ -58,19 +55,3 @@ map.on(['click', 'mousemove'], function(evt) {
     }
   });
 });
-
-var url = 'data/kml/lines.kml';
-var xhr = new XMLHttpRequest();
-xhr.open('GET', url, true);
-
-
-/**
- * onload handler for the XHR request.
- */
-xhr.onload = function() {
-  if (xhr.status == 200) {
-    // this is silly to have to tell the layer the destination projection
-    vector.parseFeatures(xhr.responseText, kml, epsg4326);
-  }
-};
-xhr.send();

examples/loader.js

@@ -1,14 +1,14 @@
 
 
 /**
- * Loader to add the plovr generated script and ol.css to the document.
+ * Loader to add the plovr generated script to the document.
  *
  * The following default values may be overridden with query string
  * parameters:
  *
  *     * hostname - the current hostname (window.location.hostname)
  *     * port - 9810
- *     * mode - ADVANCED
+ *     * mode - RAW
  *     * id - id param in loader.js query string; defaults to 'ol' if not set
  *
  * Usage:
@@ -20,7 +20,7 @@
   var params = {
     hostname: window.location.hostname,
     port: '9810',
-    mode: 'ADVANCED',
+    mode: 'RAW',
     id: 'ol'
   };
   if (window.location.protocol === 'file:' && !params.hostname) {
@@ -59,8 +59,6 @@
     pairs.push(encodeURIComponent(key) + '=' + encodeURIComponent(params[key]));
   }
 
-  document.write('<link rel="stylesheet" href="../css/ol.css" ' +
-                 'type="text/css">');
   var url = 'http://' + host + '/compile?' + pairs.join('&');
   document.write('<script type="text/javascript" src="' + url + '"></script>');
 }());

examples/localized-openstreetmap.html

@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="chrome=1">
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
     <link rel="stylesheet" href="../resources/layout.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
@@ -35,7 +36,7 @@
 
       <div class="row-fluid">
 
-        <div class="span4">
+        <div class="span12">
           <h4 id="title">Localized OpenStreetMap example</h4>
           <p id="shortdesc">Example of a localized OpenStreetMap map with a custom tile server and a custom attribution.</p>
           <div id="docs">

examples/mapquest.html

@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="chrome=1">
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
     <link rel="stylesheet" href="../resources/layout.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
@@ -35,7 +36,7 @@
 
       <div class="row-fluid">
 
-        <div class="span4">
+        <div class="span12">
           <h4 id="title">MapQuest example</h4>
           <p id="shortdesc">Example of a MapQuest map.</p>
           <div id="docs">

examples/mobile-full-screen.html

@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="chrome=1">
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
     <title>Mobile full screen example</title>
     <style type="text/css">
       html, body, .map {

examples/mobile-full-screen.js

@@ -15,7 +15,7 @@ var map = new ol.Map({
   layers: [
     new ol.layer.TileLayer({
       source: new ol.source.BingMaps({
-        key: 'AlQLZ0-5yk301_ESrmNLma3LYxEKNSg7w-e_knuRfyYFtld-UFvXVs38NOulku3Q',
+        key: 'Ar33pRUvQOdESG8m_T15MUmNz__E1twPo42bFx9jvdDePhX0PNgAcEm44OVTS7tt',
         style: 'Road'
       })
     })

examples/mouse-position.html

@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="chrome=1">
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
     <link rel="stylesheet" href="../resources/layout.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
@@ -34,22 +35,13 @@
       </div>
 
       <div class="row-fluid">
-
-        <div class="span4">
+        <div class="span6">
           <h4 id="title">Mouse position example</h4>
           <p id="shortdesc">Example of a mouse position control, outside the map.</p>
           <div id="docs">
             <p>See the <a href="mouse-position.js" target="_blank">mouse-position.js source</a> to see how this is done.</p>
           </div>
           <div id="tags">mouse-position, openstreetmap</div>
-        </div>
-        <div class="span8 pull-right">
-          <div id="mouse-position">&nbsp;</div>
-        </div>
-      </div>
-
-      <div class="row-fluid">
-        <div class="span8">
           <form>
             <label>Projection </label>
             <select id="projection">
@@ -60,6 +52,7 @@
             <input id="precision" type="number" min="0" max="12" value="4"/>
           </form>
         </div>
+        <div class="span6" id="mouse-position">&nbsp;</div>
       </div>
 
     </div>

examples/navigation-controls.html

@@ -0,0 +1,61 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="chrome=1">
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
+    <link rel="stylesheet" href="../resources/layout.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
+    <title>Navigation controls example</title>
+  </head>
+  <body>
+
+    <div class="navbar navbar-inverse navbar-fixed-top">
+      <div class="navbar-inner">
+        <div class="container">
+          <a class="brand" href="./">OpenLayers 3 Examples</a>
+          <ul class="nav pull-right">
+            <li><iframe class="github-watch-button" src="http://ghbtns.com/github-btn.html?user=openlayers&repo=ol3&type=watch&count=true"
+  allowtransparency="true" frameborder="0" scrolling="0" height="20" width="90"></iframe></li>
+            <li><a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-hashtags="openlayers">&nbsp;</a></li>
+            <li><div class="g-plusone-wrapper"><div class="g-plusone" data-size="medium" data-annotation="none"></div></div></li>
+          </ul>
+        </div>
+      </div>
+    </div>
+
+    <div class="container-fluid">
+
+      <div class="row-fluid">
+        <div class="span12">
+          <div id="map" class="map"></div>
+        </div>
+      </div>
+
+      <div class="row-fluid">
+
+        <div class="span12">
+          <h4 id="title">Navigation controls example</h4>
+          <p id="shortdesc">Shows how to add navigation controls.</p>
+            The following navigation controls are added to the map:
+            <ul>
+              <li><code>ol.control.Zoom</code> (added by default)</li>
+              <li><code>ol.control.ZoomToExtent</code></li>
+            </ul>
+          <div id="docs">
+            <p>See the <a href="navigation-controls.js" target="_blank">navigation-controls.js source</a> to see how this is done.</p>
+          </div>
+          <div id="tags">control, navigation, extent</div>
+        </div>
+
+      </div>
+
+    </div>
+
+    <script src="loader.js?id=navigation-controls" type="text/javascript"></script>
+    <script src="../resources/social-links.js" type="text/javascript"></script>
+
+  </body>
+</html>

examples/navigation-controls.js

@@ -0,0 +1,32 @@
+goog.require('ol.Map');
+goog.require('ol.RendererHints');
+goog.require('ol.View2D');
+goog.require('ol.control.ZoomToExtent');
+goog.require('ol.control.defaults');
+goog.require('ol.layer.TileLayer');
+goog.require('ol.source.OSM');
+
+
+var map = new ol.Map({
+  controls: ol.control.defaults({}, [
+    new ol.control.ZoomToExtent({
+      extent: [
+        813079.7791264898,
+        848966.9639063801,
+        5929220.284081122,
+        5936863.986909639
+      ]
+    })
+  ]),
+  layers: [
+    new ol.layer.TileLayer({
+      source: new ol.source.OSM()
+    })
+  ],
+  renderers: ol.RendererHints.createFromQueryData(),
+  target: 'map',
+  view: new ol.View2D({
+    center: [0, 0],
+    zoom: 2
+  })
+});

examples/overlay.html

@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="chrome=1">
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
     <link rel="stylesheet" href="../resources/layout.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
@@ -47,7 +48,7 @@
 
       <div class="row-fluid">
 
-        <div class="span4">
+        <div class="span12">
           <h4 id="title">Overlay example</h4>
           <p id="shortdesc">Demonstrates overlays.</p>
           <div id="docs">

examples/preload.html

@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="chrome=1">
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
     <link rel="stylesheet" href="../resources/layout.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
@@ -38,11 +39,11 @@
 
       <div class="row-fluid">
 
-        <div class="span4">
+        <div class="span12">
           <h4 id="title">Preload example</h4>
           <p id="shortdesc">Example of tile preloading.</p>
           <div id="docs">
-            <p>Low resolution tiles for the map are preloaded, the map on the right does not use any preloading.  Try zooming out and panning to see the difference.</p>
+            <p>The map on the left preloads low resolution tiles.  The map on the right does not use any preloading.  Try zooming out and panning to see the difference.</p>
             <p>See the <a href="preload.js" target="_blank">preload.js source</a> to see how this is done.</p>
           </div>
           <div id="tags">preload, bing</div>

examples/preload.js

@@ -10,7 +10,7 @@ var map1 = new ol.Map({
     new ol.layer.TileLayer({
       preload: Infinity,
       source: new ol.source.BingMaps({
-        key: 'AlQLZ0-5yk301_ESrmNLma3LYxEKNSg7w-e_knuRfyYFtld-UFvXVs38NOulku3Q',
+        key: 'Ar33pRUvQOdESG8m_T15MUmNz__E1twPo42bFx9jvdDePhX0PNgAcEm44OVTS7tt',
         style: 'Aerial'
       })
     })

examples/rotation.html

@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="chrome=1">
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
     <link rel="stylesheet" href="../resources/layout.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
@@ -35,7 +36,7 @@
 
       <div class="row-fluid">
 
-        <div class="span4">
+        <div class="span12">
           <h4 id="title">Rotation example</h4>
           <p id="shortdesc">Example of a rotated map.</p>
           <div id="docs">

examples/scale-line.html

@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="chrome=1">
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
     <link rel="stylesheet" href="../resources/layout.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
@@ -40,7 +41,7 @@
 
       <div class="row-fluid">
 
-        <div class="span4">
+        <div class="span12">
           <h4 id="title">Scale line example</h4>
           <p id="shortdesc">Example of a scale line.</p>
           <div id="docs">

examples/semi-transparent-layer.html

@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="chrome=1">
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
     <link rel="stylesheet" href="../resources/layout.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
@@ -35,7 +36,7 @@
 
       <div class="row-fluid">
 
-        <div class="span4">
+        <div class="span12">
           <h4 id="title">Semi-transparent layer example</h4>
           <p id="shortdesc">Example of a map with a semi-transparent layer.</p>
           <div id="docs">

examples/side-by-side.html

@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="chrome=1">
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
     <link rel="stylesheet" href="../resources/layout.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
@@ -44,7 +45,7 @@
 
       <div class="row-fluid">
 
-        <div class="span4">
+        <div class="span12">
           <h4 id="title">Side-by-side example</h4>
           <p id="shortdesc">The three maps, one WebGL, one Canvas, one DOM, share the same center, resolution, rotation and layers.</p>
           <div id="docs">

examples/simple.html

@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="chrome=1">
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
     <link rel="stylesheet" href="../resources/layout.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
@@ -35,7 +36,7 @@
 
       <div class="row-fluid">
 
-        <div class="span4">
+        <div class="span12">
           <h4 id="title">Simple example</h4>
           <p id="shortdesc">Example of a simple map.</p>
           <div id="docs">

examples/stamen.html

@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="chrome=1">
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
     <link rel="stylesheet" href="../resources/layout.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
@@ -35,7 +36,7 @@
 
       <div class="row-fluid">
 
-        <div class="span4">
+        <div class="span12">
           <h4 id="title">Stamen example</h4>
           <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">

examples/style-rules.html

@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="chrome=1">
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
     <link rel="stylesheet" href="../resources/layout.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
@@ -35,7 +36,7 @@
 
       <div class="row-fluid">
 
-        <div class="span4">
+        <div class="span12">
           <h4 id="title">Style with rules example</h4>
           <p id="shortdesc">Draws features with rule based styles.</p>
           <div id="docs">

examples/style-rules.js

@@ -60,11 +60,7 @@ var style = new ol.style.Style({rules: [
 var vector = new ol.layer.Vector({
   style: style,
   source: new ol.source.Vector({
-    projection: ol.proj.get('EPSG:3857')
-  })
-});
-
-vector.parseFeatures({
+    data: {
       'type': 'FeatureCollection',
       'features': [{
         'type': 'Feature',
@@ -163,8 +159,11 @@ vector.parseFeatures({
           'coordinates': [6000000, 0]
         }
       }]
-}, new ol.parser.GeoJSON(), ol.proj.get('EPSG:3857'));
-
+    },
+    parser: new ol.parser.GeoJSON(),
+    projection: ol.proj.get('EPSG:3857')
+  })
+});
 
 var map = new ol.Map({
   layers: [vector],

examples/teleport.html

@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="chrome=1">
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
     <link rel="stylesheet" href="../resources/layout.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
@@ -44,7 +45,7 @@
 
       <div class="row-fluid">
 
-        <div class="span6">
+        <div class="span12">
           <h4 id="title">Teleport example</h4>
           <p id="shortdesc">Example of moving a map from one target to another.</p>
           <div id="docs">

examples/ten-thousand-points.html

@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="chrome=1">
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
     <link rel="stylesheet" href="../resources/layout.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
@@ -35,7 +36,7 @@
 
       <div class="row-fluid">
 
-        <div class="span4">
+        <div class="span12">
           <h4 id="title">Ten thousand points example</h4>
           <p id="shortdesc">Example of a map with ten thousand points.</p>
           <div id="docs">

examples/tilejson.html

@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="chrome=1">
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
     <link rel="stylesheet" href="../resources/layout.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
@@ -35,7 +36,7 @@
 
       <div class="row-fluid">
 
-        <div class="span4">
+        <div class="span12">
           <h4 id="title">TileJSON example</h4>
           <p id="shortdesc">Example of a TileJSON layer.</p>
           <div id="docs">

examples/vector-layer.html

@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="chrome=1">
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
     <link rel="stylesheet" href="../resources/layout.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
@@ -43,7 +44,7 @@
           </div>
           <div id="tags">vector, geojson, style</div>
         </div>
-        <div class="span4 pull-right">
+        <div class="span4 offset4">
           <div id="info" class="alert alert-success">
             &nbsp;
           </div>

examples/vector-layer.js

@@ -5,7 +5,6 @@ goog.require('ol.expr');
 goog.require('ol.layer.TileLayer');
 goog.require('ol.layer.Vector');
 goog.require('ol.parser.GeoJSON');
-goog.require('ol.proj');
 goog.require('ol.source.MapQuestOpenAerial');
 goog.require('ol.source.Vector');
 goog.require('ol.style.Polygon');
@@ -25,7 +24,8 @@ ol.expr.register('resolution', function() {
 
 var vector = new ol.layer.Vector({
   source: new ol.source.Vector({
-    projection: ol.proj.get('EPSG:4326')
+    parser: new ol.parser.GeoJSON(),
+    url: 'data/countries.geojson'
   }),
   style: new ol.style.Style({rules: [
     new ol.style.Rule({
@@ -72,22 +72,3 @@ map.on(['click', 'mousemove'], function(evt) {
     }
   });
 });
-
-
-var geojson = new ol.parser.GeoJSON();
-var url = 'data/countries.geojson';
-var xhr = new XMLHttpRequest();
-xhr.open('GET', url, true);
-
-
-/**
- * onload handler for the XHR request.
- */
-xhr.onload = function() {
-  if (xhr.status == 200) {
-    // this is silly to have to tell the layer the destination projection
-    var projection = map.getView().getProjection();
-    vector.parseFeatures(xhr.responseText, geojson, projection);
-  }
-};
-xhr.send();

examples/wms-capabilities.html

@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="chrome=1">
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
     <link rel="stylesheet" href="../resources/layout.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">

examples/wms-custom-proj.html

@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="chrome=1">
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
     <link rel="stylesheet" href="../resources/layout.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
@@ -35,7 +36,7 @@
 
       <div class="row-fluid">
 
-        <div class="span4">
+        <div class="span12">
           <h4 id="title">Tiled WMS with Proj4js projection example</h4>
           <p id="shortdesc">Example of two tiled WMS layers (Pixelmap 1:1'000'000 and national parks) using the projection EPSG:21781.</p>
           <div id="docs">

examples/wms-no-proj.html

@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="chrome=1">
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
     <link rel="stylesheet" href="../resources/layout.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
@@ -35,7 +36,7 @@
 
       <div class="row-fluid">
 
-        <div class="span4">
+        <div class="span12">
           <h4 id="title">WMS without client projection example</h4>
           <p id="shortdesc">Example of two WMS layers using the projection EPSG:21781, which is unknown to the client.</p>
           <div id="docs">

examples/wms-single-image-custom-proj.html

@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="chrome=1">
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
     <link rel="stylesheet" href="../resources/layout.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
@@ -35,11 +36,11 @@
 
       <div class="row-fluid">
 
-        <div class="span4">
+        <div class="span12">
           <h4 id="title">Single image WMS with custom projection example</h4>
           <p id="shortdesc">Example of two single image WMS layers.</p>
           <div id="docs">
-            <p id="shortdesc">Pixelmap 1:1'000'000 with National Parks overlay using the projection EPSG:21781.</p>
+            <p>Pixelmap 1:1'000'000 with National Parks overlay using the projection EPSG:21781.</p>
             <p>See the <a href="wms-single-image-custom-proj.js" target="_blank">wms-single-image-custom-proj.js source</a> to see how this is done.</p>
           </div>
           <div id="tags">wms, single image, projection</div>

examples/wms-single-image.html

@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="chrome=1">
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
     <link rel="stylesheet" href="../resources/layout.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
@@ -35,7 +36,7 @@
 
       <div class="row-fluid">
 
-        <div class="span4">
+        <div class="span12">
           <h4 id="title">Single image WMS example</h4>
           <p id="shortdesc">Example of a single image WMS layer.</p>
           <div id="docs">

examples/wms-tiled.html

@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="chrome=1">
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
     <link rel="stylesheet" href="../resources/layout.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
@@ -35,7 +36,7 @@
 
       <div class="row-fluid">
 
-        <div class="span4">
+        <div class="span12">
           <h4 id="title">Tiled WMS example</h4>
           <p id="shortdesc">Example of a tiled WMS layer.</p>
           <div id="docs">

examples/wmts-capabilities.html

@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="chrome=1">
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
     <link rel="stylesheet" href="../resources/layout.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">

examples/wmts-from-capabilities.html

@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="chrome=1">
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
     <link rel="stylesheet" href="../resources/layout.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
@@ -35,7 +36,7 @@
 
       <div class="row-fluid">
 
-        <div class="span4">
+        <div class="span12">
           <h4 id="title">WMTS from capabilities example</h4>
           <p id="shortdesc">Example of a WMTS source built from a WMTS getCapabilities response.</p>
           <div id="docs">

examples/wmts-ign.html

@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="chrome=1">
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
     <link rel="stylesheet" href="../resources/layout.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">

examples/wmts.html

@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="chrome=1">
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
     <link rel="stylesheet" href="../resources/layout.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
@@ -35,7 +36,7 @@
 
       <div class="row-fluid">
 
-        <div class="span4">
+        <div class="span12">
           <h4 id="title">WMTS example</h4>
           <p id="shortdesc">Example of a WMTS source.</p>
           <div id="docs">

examples/zoomslider.html

@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="chrome=1">
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
     <link rel="stylesheet" href="../resources/layout.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
@@ -96,7 +97,7 @@
 
       <div class="row-fluid">
 
-        <div class="span4">
+        <div class="span12">
           <h4 id="title">ZoomSlider control</h4>
           <p id="shortdesc">Example of various ZoomSlider controls.</p>
           <div id="docs">

externs/w3c_device_sensor_event.js

@@ -1,89 +0,0 @@
-/*
- * Copyright 2013 The Closure Compiler Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/**
- * @fileoverview Definitions for W3C's device orientation and device motion
- *  events specification.
- *  This file depends on w3c_event.js.
- *  The whole file has been partially type annotated.
- *  Created from http://dev.w3.org/geo/api/spec-source-orientation.
- *
- * @externs
- */
-
-/**
- * @constructor
- * @extends {Event}
- */
-function DeviceOrientationEvent() {}
-
-/** @type {?number} */
-DeviceOrientationEvent.prototype.alpha;
-
-/** @type {?number} */
-DeviceOrientationEvent.prototype.beta;
-
-/** @type {?number} */
-DeviceOrientationEvent.prototype.gamma;
-
-/** @type {boolean} */
-DeviceOrientationEvent.prototype.absolute;
-
-/**
- * @constructor
- */
-function DeviceAcceleration() {}
-
-/** @type {?number} */
-DeviceAcceleration.prototype.x;
-
-/** @type {?number} */
-DeviceAcceleration.prototype.y;
-
-/** @type {?number} */
-DeviceAcceleration.prototype.z;
-
-/**
- * @constructor
- */
-function DeviceRotationRate() {}
-
-/** @type {?number} */
-DeviceOrientationEvent.prototype.alpha;
-
-/** @type {?number} */
-DeviceOrientationEvent.prototype.beta;
-
-/** @type {?number} */
-DeviceOrientationEvent.prototype.gamma;
-
-/**
- * @constructor
- * @extends {Event}
- */
-function DeviceMotionEvent() {}
-
-/** @type {?DeviceAcceleration} */
-DeviceMotionEvent.prototype.acceleration;
-
-/** @type {?DeviceAcceleration} */
-DeviceMotionEvent.prototype.accelerationIncludingGravity;
-
-/** @type {?DeviceRotationRate} */
-DeviceMotionEvent.prototype.rotationRate;
-
-/** @type {?number} */
-DeviceMotionEvent.prototype.interval;

src/objectliterals.jsdoc

@@ -15,7 +15,7 @@
  * @property {ol.Pixel} pixel Pixel coordinate relative to the map viewport.
  * @property {Array.<ol.layer.Layer>|undefined} layers Layers to restrict the
  *     query to. All map layers will be queried if not provided.
- * @property {function(Array.<string|undefined>)} success Callback for
+ * @property {function(Array.<Array.<string|undefined>>)} success Callback for
  *     successful queries. The passed argument is the resulting feature
  *     information for each layer, with array indices being the same as in the
  *     passed `layers` array or in the layer collection as returned from
@@ -88,58 +88,70 @@
 /**
  * Object literal with config options for the view.
  * @typedef {Object} ol.View2DOptions
- * @property {ol.Coordinate|undefined} center The view center in map projection.
- * @property {number|undefined} maxResolution The maximum resolution in map
- *     units per pixel.
- * @property {number|undefined} maxZoom The maximum zoom level for this view.
- *     Zoom level 0 uses the `maxResolution`; subsequent zoom levels are
- *     calculated by dividing the previous resolution by `zoomFactor`.
- * @property {ol.ProjectionLike} projection The map projection.
+ * @property {ol.Coordinate|undefined} center The initial center for the view.
+ *     The coordinate system for the center is specified with the `projection`
+ *     option.
+ * @property {number|undefined} maxResolution The maximum resolution used to
+ *     determine the resolution constraint. It is used together with `maxZoom`
+ *     and `zoomFactor`. If unspecified it is calculated in such a way that the
+ *     projection's validity extent fits in a 256x256 px tile. If the projection
+ *     is Spherical Mercator (the default) then `maxResolution` defaults to
+ *     40075016.68557849 / 256 = 156543.03392804097.
+ * @property {number|undefined} maxZoom The maximum zoom level used to determine
+ *     the resolution constraint. It is used together with `maxResolution` and
+ *     `zoomFactor`. Default is 28.
+ * @property {ol.ProjectionLike} projection The projection. Default is
+ *     `EPSG:3857` (Spherical Mercator).
  * @property {number|undefined} resolution The initial resolution for the view.
- * @property {Array.<number>|undefined} resolutions The resolutions for this
- *     view. If configured, this is equivalent to specifying `maxResolution` and
- *     `maxZoom`.
- * @property {number|undefined} rotation Initial rotation of the view.
- * @property {number|undefined} zoom Initial zoom level of the view.
- * @property {number|undefined} zoomFactor Factor to calculate resolutions for
- *     zoom levels. Default is 2.
+ *     The units are `projection` units per pixel (e.g. meters per pixel).
+ * @property {Array.<number>|undefined} resolutions Resolutions to determine the
+ *     resolution constraint. If set the `maxResolution`, `maxZoom` and
+ *     `zoomFactor` options are ignored.
+ * @property {number|undefined} rotation The initial rotation for the view
+ *     in radians (positive rotation clockwise).
+ * @property {number|undefined} zoom Zoom level used to calculate the initial
+ *     resolution for the view. The initial resolution is determined using the
+ *     `ol.View2D#constrainResolution` method.
+ * @property {number|undefined} zoomFactor The zoom factor used to determine the
+ *     resolution constraint. It is together with `maxResolution` and `maxZoom`.
+ *     Default is 2.
  */
 
 /**
  * @typedef {Object} ol.animation.BounceOptions
  * @property {number} resolution Resolution.
- * @property {number|undefined} start Start.
- * @property {number|undefined} duration Duration.
+ * @property {number|undefined} start The start time of the animation. Default is immediately.
+ * @property {number|undefined} duration The duration of the animation in milliseconds.
  * @property {function(number):number|undefined} easing Easing function.
  */
 
 /**
  * @typedef {Object} ol.animation.PanOptions
  * @property {ol.Coordinate} source Source.
- * @property {number|undefined} start Start.
- * @property {number|undefined} duration Duration.
+ * @property {number|undefined} start The start time of the animation. Default is immediately.
+ * @property {number|undefined} duration The duration of the animation in milliseconds.
  * @property {function(number):number|undefined} easing Easing function.
  */
 
 /**
  * @typedef {Object} ol.animation.RotateOptions
  * @property {number} rotation Rotation.
- * @property {number|undefined} start Start.
- * @property {number|undefined} duration Duration.
+ * @property {number|undefined} start The start time of the animation. Default is immediately.
+ * @property {number|undefined} duration The duration of the animation in milliseconds.
  * @property {function(number):number|undefined} easing Easing function.
  */
 
 /**
  * @typedef {Object} ol.animation.ZoomOptions
  * @property {number} resolution number Resolution.
- * @property {number|undefined} start Start.
- * @property {number|undefined} duration Duration.
+ * @property {number|undefined} start The start time of the animation. Default is immediately.
+ * @property {number|undefined} duration The duration of the animation in milliseconds.
  * @property {function(number):number|undefined} easing Easing function.
  */
 
 /**
  * @typedef {Object} ol.control.AttributionOptions
- * @property {string|undefined} className Class name.
+ * @property {string|undefined} className CSS class name. Default is 'ol-attribution'.
  * @property {ol.Map|undefined} map Map.
  * @property {Element|undefined} target Target.
  */
@@ -164,7 +176,7 @@
 
 /**
  * @typedef {Object} ol.control.FullScreenOptions
- * @property {string|undefined} className Class name.
+ * @property {string|undefined} className CSS class name. Default is 'ol-full-screen'.
  * @property {boolean|undefined} keys Full keyboard access.
  * @property {ol.Map|undefined} map Map.
  * @property {Element|undefined} target Target.
@@ -172,25 +184,26 @@
 
 /**
  * @typedef {Object} ol.control.LogoOptions
- * @property {string|undefined} className Class name.
+ * @property {string|undefined} className CSS class name. Default is 'ol-logo'.
  * @property {ol.Map|undefined} map Map.
  * @property {Element|undefined} target Target.
  */
 
 /**
  * @typedef {Object} ol.control.MousePositionOptions
- * @property {string|undefined} className Class name.
+ * @property {string|undefined} className CSS class name. Default is 'ol-mouse-position'.
  * @property {ol.CoordinateFormatType|undefined} coordinateFormat Coordinate
  *     format.
  * @property {ol.Map|undefined} map Map.
  * @property {ol.ProjectionLike} projection Projection.
  * @property {Element|undefined} target Target.
  * @property {string|undefined} undefinedHTML Markup for undefined coordinates.
+ *     Default is '' (empty string).
  */
 
 /**
  * @typedef {Object} ol.control.ScaleLineOptions
- * @property {string|undefined} className Class name.
+ * @property {string|undefined} className CSS Class name. Default is 'ol-scale-line'.
  * @property {ol.Map|undefined} map Map.
  * @property {number|undefined} minWidth Minimum width in pixels.
  * @property {Element|undefined} target Target.
@@ -199,20 +212,29 @@
 
 /**
  * @typedef {Object} ol.control.ZoomOptions
- * @property {string|undefined} className Class name.
- * @property {number|undefined} delta Delta.
+ * @property {string|undefined} className CSS class name. Default is 'ol-zoom'.
+ * @property {number|undefined} delta The zoom delta applied on each click.
  * @property {ol.Map|undefined} map Map.
  * @property {Element|undefined} target Target.
  */
 
 /**
  * @typedef {Object} ol.control.ZoomSliderOptions
- * @property {string|undefined} className Class name.
+ * @property {string|undefined} className CSS class name.
  * @property {ol.Map|undefined} map Map.
  * @property {number|undefined} maxResolution Maximum resolution.
  * @property {number|undefined} minResolution Minimum resolution.
  */
 
+/**
+ * @typedef {Object} ol.control.ZoomToExtentOptions
+ * @property {string|undefined} className Class name.
+ * @property {ol.Map|undefined} map Map.
+ * @property {Element|undefined} target Target.
+ * @property {ol.Extent|undefined} extent The extent to zoom to. If
+ *     undefined the validity extent of the view projection is used.
+ */
+
 /**
  * @typedef {Object} ol.interaction.DoubleClickZoomOptions
  * @property {number|undefined} delta The zoom delta applied on each double
@@ -486,6 +508,20 @@
  *     of `url` when the WMS supports multiple urls for GetMap requests.
  */
 
+/**
+ * @typedef {Object} ol.source.VectorOptions
+ * @property {Array.<ol.Attribution>|undefined} attributions Attributions.
+ * @property {Object|string|undefined} data Data to parse.
+ * @property {ol.Extent|undefined} extent Extent.
+ * @property {string|undefined} logo Logo.
+ * @property {ol.parser.Parser} parser Parser instance to parse data
+ *     provided as `data` or fetched from `url`.
+ * @property {ol.ProjectionLike|undefined} projection Projection. EPSG:4326
+ *     is assumed if not defined. TODO: Get projection from the parser instead
+ *     of assuming EPSG:4326.
+ * @property {string|undefined} url Server url providing the vector data.
+ */
+
 /**
  * @typedef {Object} ol.source.VectorSource2Options
  * @property {Array.<ol.Attribution>|undefined} attributions Attributions.

src/ol/array.js

@@ -10,7 +10,13 @@ goog.require('goog.asserts');
  * @return {number} Index.
  */
 ol.array.binaryFindNearest = function(arr, target) {
-  var index = goog.array.binarySearch(arr, target, function(a, b) {
+  var index = goog.array.binarySearch(arr, target,
+      /**
+       * @param {number} a A.
+       * @param {number} b B.
+       * @return {number} b minus a.
+       */
+      function(a, b) {
         return b - a;
       });
   if (index >= 0) {

src/ol/control/attributioncontrol.js

@@ -126,7 +126,7 @@ ol.control.Attribution.prototype.updateElement_ = function(frameState) {
 
   if (goog.isNull(frameState)) {
     if (this.renderedVisible_) {
-      goog.style.showElement(this.element, false);
+      goog.style.setElementShown(this.element, false);
       this.renderedVisible_ = false;
     }
     return;
@@ -142,14 +142,15 @@ ol.control.Attribution.prototype.updateElement_ = function(frameState) {
   for (attributionKey in this.attributionElements_) {
     if (attributionKey in visibleAttributions) {
       if (!this.attributionElementRenderedVisible_[attributionKey]) {
-        goog.style.showElement(this.attributionElements_[attributionKey], true);
+        goog.style.setElementShown(
+            this.attributionElements_[attributionKey], true);
         this.attributionElementRenderedVisible_[attributionKey] = true;
       }
       delete visibleAttributions[attributionKey];
     }
     else if (attributionKey in hiddenAttributions) {
       if (this.attributionElementRenderedVisible_[attributionKey]) {
-        goog.style.showElement(
+        goog.style.setElementShown(
             this.attributionElements_[attributionKey], false);
         delete this.attributionElementRenderedVisible_[attributionKey];
       }
@@ -173,7 +174,7 @@ ol.control.Attribution.prototype.updateElement_ = function(frameState) {
     attributionElement = goog.dom.createElement(goog.dom.TagName.LI);
     attributionElement.innerHTML =
         hiddenAttributions[attributionKey].getHTML();
-    goog.style.showElement(attributionElement, false);
+    goog.style.setElementShown(attributionElement, false);
     goog.dom.appendChild(this.ulElement_, attributionElement);
     this.attributionElements_[attributionKey] = attributionElement;
   }
@@ -181,7 +182,7 @@ ol.control.Attribution.prototype.updateElement_ = function(frameState) {
   var renderVisible =
       !goog.object.isEmpty(this.attributionElementRenderedVisible_);
   if (this.renderedVisible_ != renderVisible) {
-    goog.style.showElement(this.element, renderVisible);
+    goog.style.setElementShown(this.element, renderVisible);
     this.renderedVisible_ = renderVisible;
   }
 

src/ol/control/logocontrol.js

@@ -73,7 +73,7 @@ ol.control.Logo.prototype.updateElement_ = function(frameState) {
 
   if (goog.isNull(frameState)) {
     if (this.renderedVisible_) {
-      goog.style.showElement(this.element, false);
+      goog.style.setElementShown(this.element, false);
       this.renderedVisible_ = false;
     }
     return;
@@ -104,7 +104,7 @@ ol.control.Logo.prototype.updateElement_ = function(frameState) {
 
   var renderVisible = !goog.object.isEmpty(logos);
   if (this.renderedVisible_ != renderVisible) {
-    goog.style.showElement(this.element, renderVisible);
+    goog.style.setElementShown(this.element, renderVisible);
     this.renderedVisible_ = renderVisible;
   }
 

src/ol/control/scalelinecontrol.js

@@ -194,7 +194,7 @@ ol.control.ScaleLine.prototype.updateElement_ = function() {
 
   if (goog.isNull(view2DState)) {
     if (this.renderedVisible_) {
-      goog.style.showElement(this.element_, false);
+      goog.style.setElementShown(this.element_, false);
       this.renderedVisible_ = false;
     }
     return;
@@ -322,7 +322,7 @@ ol.control.ScaleLine.prototype.updateElement_ = function() {
   }
 
   if (!this.renderedVisible_) {
-    goog.style.showElement(this.element_, true);
+    goog.style.setElementShown(this.element_, true);
     this.renderedVisible_ = true;
   }
 

src/ol/control/zoomcontrol.js

@@ -33,6 +33,8 @@ ol.control.Zoom = function(opt_options) {
 
   var className = goog.isDef(options.className) ? options.className : 'ol-zoom';
 
+  var delta = goog.isDef(options.delta) ? options.delta : 1;
+
   var inElement = goog.dom.createDom(goog.dom.TagName.A, {
     'href': '#zoomIn',
     'class': className + '-in'
@@ -40,7 +42,7 @@ ol.control.Zoom = function(opt_options) {
   goog.events.listen(inElement, [
     goog.events.EventType.TOUCHEND,
     goog.events.EventType.CLICK
-  ], this.handleIn_, false, this);
+  ], goog.partial(ol.control.Zoom.prototype.zoomByDelta_, delta), false, this);
 
   var outElement = goog.dom.createDom(goog.dom.TagName.A, {
     'href': '#zoomOut',
@@ -49,7 +51,7 @@ ol.control.Zoom = function(opt_options) {
   goog.events.listen(outElement, [
     goog.events.EventType.TOUCHEND,
     goog.events.EventType.CLICK
-  ], this.handleOut_, false, this);
+  ], goog.partial(ol.control.Zoom.prototype.zoomByDelta_, -delta), false, this);
 
   var cssClasses = className + ' ' + ol.css.CLASS_UNSELECTABLE;
   var element = goog.dom.createDom(goog.dom.TagName.DIV, cssClasses, inElement,
@@ -61,46 +63,17 @@ ol.control.Zoom = function(opt_options) {
     target: options.target
   });
 
-  /**
-   * @type {number}
-   * @private
-   */
-  this.delta_ = goog.isDef(options.delta) ? options.delta : 1;
-
 };
 goog.inherits(ol.control.Zoom, ol.control.Control);
 
 
 /**
+ * @param {number} delta Zoom delta.
  * @param {goog.events.BrowserEvent} browserEvent The browser event to handle.
  * @private
  */
-ol.control.Zoom.prototype.handleIn_ = function(browserEvent) {
-  // prevent #zoomIn anchor from getting appended to the url
-  browserEvent.preventDefault();
-  var map = this.getMap();
-  map.requestRenderFrame();
-  // FIXME works for View2D only
-  var view = map.getView().getView2D();
-  var currentResolution = view.getResolution();
-  if (goog.isDef(currentResolution)) {
-    map.addPreRenderFunction(ol.animation.zoom({
-      resolution: currentResolution,
-      duration: ol.control.ZOOM_DURATION,
-      easing: ol.easing.easeOut
-    }));
-  }
-  var resolution = view.constrainResolution(currentResolution, this.delta_);
-  view.setResolution(resolution);
-};
-
-
-/**
- * @param {goog.events.BrowserEvent} browserEvent The browser event to handle.
- * @private
- */
-ol.control.Zoom.prototype.handleOut_ = function(browserEvent) {
-  // prevent #zoomOut anchor from getting appended to the url
+ol.control.Zoom.prototype.zoomByDelta_ = function(delta, browserEvent) {
+  // prevent the anchor from getting appended to the url
   browserEvent.preventDefault();
   var map = this.getMap();
   // FIXME works for View2D only
@@ -112,7 +85,7 @@ ol.control.Zoom.prototype.handleOut_ = function(browserEvent) {
       duration: ol.control.ZOOM_DURATION,
       easing: ol.easing.easeOut
     }));
+    var newResolution = view.constrainResolution(currentResolution, delta);
+    view.setResolution(newResolution);
   }
-  var resolution = view.constrainResolution(currentResolution, -this.delta_);
-  view.setResolution(resolution);
 };

src/ol/control/zoomslidercontrol.js

@@ -62,6 +62,13 @@ ol.control.ZoomSlider = function(opt_options) {
    */
   this.direction_ = ol.control.ZoomSlider.direction.VERTICAL;
 
+  /**
+   * Whether the slider is initialized.
+   * @type {boolean}
+   * @private
+   */
+  this.sliderInitialized_ = false;
+
   /**
    * @private
    * @type {Array.<?number>}
@@ -107,11 +114,8 @@ ol.control.ZoomSlider.direction = {
  */
 ol.control.ZoomSlider.prototype.setMap = function(map) {
   goog.base(this, 'setMap', map);
-  this.initSlider_();
-  var resolution = map.getView().getView2D().getResolution();
-  if (goog.isDef(resolution)) {
-    this.currentResolution_ = resolution;
-    this.positionThumbForResolution_(resolution);
+  if (!goog.isNull(map)) {
+    map.render();
   }
 };
 
@@ -147,6 +151,7 @@ ol.control.ZoomSlider.prototype.initSlider_ = function() {
     limits = new goog.math.Rect(0, 0, 0, h);
   }
   this.dragger_.setLimits(limits);
+  this.sliderInitialized_ = true;
 };
 
 
@@ -154,6 +159,14 @@ ol.control.ZoomSlider.prototype.initSlider_ = function() {
  * @inheritDoc
  */
 ol.control.ZoomSlider.prototype.handleMapPostrender = function(mapEvent) {
+  if (goog.isNull(mapEvent.frameState)) {
+    return;
+  }
+  goog.asserts.assert(
+      goog.isDefAndNotNull(mapEvent.frameState.view2DState));
+  if (!this.sliderInitialized_) {
+    this.initSlider_();
+  }
   var res = mapEvent.frameState.view2DState.resolution;
   if (res !== this.currentResolution_) {
     this.currentResolution_ = res;

src/ol/control/zoomtoextentcontrol.exports

@@ -0,0 +1 @@
+@exportClass ol.control.ZoomToExtent ol.control.ZoomToExtentOptions

src/ol/control/zoomtoextentcontrol.js

@@ -0,0 +1,68 @@
+// FIXME works for View2D only
+
+goog.provide('ol.control.ZoomToExtent');
+
+goog.require('goog.dom');
+goog.require('goog.dom.TagName');
+goog.require('goog.events');
+goog.require('goog.events.EventType');
+goog.require('ol.control.Control');
+goog.require('ol.css');
+
+
+
+/**
+ * Create a control that adds a button, which, when pressed, changes
+ * the map view to a specific extent. To style this control use the
+ * css selector .ol-zoom-extent.
+ * @constructor
+ * @extends {ol.control.Control}
+ * @param {ol.control.ZoomToExtentOptions=} opt_options Options.
+ */
+ol.control.ZoomToExtent = function(opt_options) {
+  var options = goog.isDef(opt_options) ? opt_options : {};
+
+  /**
+   * @type {ol.Extent}
+   * @private
+   */
+  this.extent_ = goog.isDef(options.extent) ? options.extent : null;
+
+  var className = goog.isDef(options.className) ? options.className :
+      'ol-zoom-extent';
+
+  var element = goog.dom.createDom(goog.dom.TagName.DIV, {
+    'class': className + ' ' + ol.css.CLASS_UNSELECTABLE
+  });
+  var button = goog.dom.createDom(goog.dom.TagName.A, {
+    'href': '#zoomExtent'
+  });
+  goog.dom.appendChild(element, button);
+
+  goog.events.listen(element, [
+    goog.events.EventType.TOUCHEND,
+    goog.events.EventType.CLICK
+  ], this.handleZoomToExtent_, false, this);
+
+  goog.base(this, {
+    element: element,
+    map: options.map,
+    target: options.target
+  });
+};
+goog.inherits(ol.control.ZoomToExtent, ol.control.Control);
+
+
+/**
+ * @param {goog.events.BrowserEvent} browserEvent Browser event.
+ * @private
+ */
+ol.control.ZoomToExtent.prototype.handleZoomToExtent_ = function(browserEvent) {
+  // prevent #zoomExtent anchor from getting appended to the url
+  browserEvent.preventDefault();
+  var map = this.getMap();
+  var view = map.getView().getView2D();
+  var extent = goog.isNull(this.extent_) ?
+      view.getProjection().getExtent() : this.extent_;
+  view.fitExtent(extent, map.getSize());
+};

src/ol/deviceorientation.js

@@ -33,7 +33,7 @@ ol.DeviceOrientation = function(opt_options) {
 
   /**
    * @private
-   * @type {?number}
+   * @type {goog.events.Key}
    */
   this.listenerKey_ = null;
 

src/ol/extent.js

@@ -215,7 +215,9 @@ ol.extent.getForView2DAndSize =
   var dy = resolution * size[1] / 2;
   var cosRotation = Math.cos(rotation);
   var sinRotation = Math.sin(rotation);
+  /** @type {Array.<number>} */
   var xs = [-dx, -dx, dx, dx];
+  /** @type {Array.<number>} */
   var ys = [-dy, dy, -dy, dy];
   var i, x, y;
   for (i = 0; i < 4; ++i) {

src/ol/geom/linearring.js

@@ -27,6 +27,42 @@ ol.geom.LinearRing = function(coordinates, opt_shared) {
 goog.inherits(ol.geom.LinearRing, ol.geom.LineString);
 
 
+/**
+ * Determine if a vertex array representing a linear ring is in clockwise
+ * order.
+ *
+ * This method comes from Green's Theorem and was mentioned in an answer to a
+ * a Stack Overflow question (http://tinyurl.com/clockwise-method).
+ *
+ * Note that calculating the cross product for each pair of edges could be
+ * avoided by first finding the lowest, rightmost vertex.  See OGR's
+ * implementation for an example of this.
+ * https://github.com/OSGeo/gdal/blob/trunk/gdal/ogr/ogrlinearring.cpp
+ *
+ * @param {ol.geom.VertexArray} coordinates Linear ring coordinates.
+ * @return {boolean} The coordinates are in clockwise order.
+ */
+ol.geom.LinearRing.isClockwise = function(coordinates) {
+  var length = coordinates.length;
+  var edge = 0;
+
+  var last = coordinates[length - 1];
+  var x1 = last[0];
+  var y1 = last[1];
+
+  var x2, y2, coord;
+  for (var i = 0; i < length; ++i) {
+    coord = coordinates[i];
+    x2 = coord[0];
+    y2 = coord[1];
+    edge += (x2 - x1) * (y2 + y1);
+    x1 = x2;
+    y1 = y2;
+  }
+  return edge > 0;
+};
+
+
 /**
  * @inheritDoc
  */

src/ol/geom/polygon.js

@@ -10,6 +10,12 @@ goog.require('ol.geom.VertexArray');
 
 
 /**
+ * Create a polygon from an array of vertex arrays.  Coordinates for the
+ * exterior ring will be forced to clockwise order.  Coordinates for any
+ * interior rings will be forced to counter-clockwise order.  In cases where
+ * the opposite winding order occurs in the passed vertex arrays, they will
+ * be modified in place.
+ *
  * @constructor
  * @extends {ol.geom.Geometry}
  * @param {Array.<ol.geom.VertexArray>} coordinates Array of rings.  First
@@ -40,8 +46,21 @@ ol.geom.Polygon = function(coordinates, opt_shared) {
    * @type {Array.<ol.geom.LinearRing>}
    */
   this.rings = new Array(numRings);
+  var ringCoords;
   for (var i = 0; i < numRings; ++i) {
-    this.rings[i] = new ol.geom.LinearRing(coordinates[i], vertices);
+    ringCoords = coordinates[i];
+    if (i === 0) {
+      // force exterior ring to be clockwise
+      if (!ol.geom.LinearRing.isClockwise(ringCoords)) {
+        ringCoords.reverse();
+      }
+    } else {
+      // force interior rings to be counter-clockwise
+      if (ol.geom.LinearRing.isClockwise(ringCoords)) {
+        ringCoords.reverse();
+      }
+    }
+    this.rings[i] = new ol.geom.LinearRing(ringCoords, vertices);
   }
 
   /**

src/ol/geom2/linestringcollection.js

@@ -87,7 +87,7 @@ ol.geom2.LineStringCollection.pack =
     goog.asserts.assert(unpackedLineStrings[i].length > 1);
     start = offset;
     offset = ol.geom2.packPoints(arr, offset, unpackedLineStrings[i], dim);
-    ranges[/** @type {string} */ (start)] = offset;
+    ranges[start + ''] = offset;
   }
   goog.asserts.assert(offset <= capacity);
   var buf = new ol.structs.Buffer(arr, offset);
@@ -103,7 +103,7 @@ ol.geom2.LineStringCollection.prototype.add = function(lineString) {
   var n = lineString.length * this.dim;
   var offset = this.buf.allocate(n);
   goog.asserts.assert(offset != -1);
-  this.ranges[/** @type {string} */ (offset)] = offset + n;
+  this.ranges[offset + ''] = offset + n;
   ol.geom2.packPoints(this.buf.getArray(), offset, lineString, this.dim);
   return offset;
 };
@@ -115,7 +115,7 @@ ol.geom2.LineStringCollection.prototype.add = function(lineString) {
  */
 ol.geom2.LineStringCollection.prototype.get = function(offset) {
   goog.asserts.assert(offset in this.ranges);
-  var range = this.ranges[/** @type {string} */ (offset)];
+  var range = this.ranges[offset + ''];
   return ol.geom2.unpackPoints(
       this.buf.getArray(), offset, range, this.dim);
 };
@@ -165,9 +165,9 @@ ol.geom2.LineStringCollection.prototype.getIndices = function() {
  */
 ol.geom2.LineStringCollection.prototype.remove = function(offset) {
   goog.asserts.assert(offset in this.ranges);
-  var range = this.ranges[/** @type {string} */ (offset)];
+  var range = this.ranges[offset + ''];
   this.buf.remove(range - offset, offset);
-  delete this.ranges[/** @type {string} */ (offset)];
+  delete this.ranges[offset + ''];
 };
 
 
@@ -179,7 +179,7 @@ ol.geom2.LineStringCollection.prototype.remove = function(offset) {
 ol.geom2.LineStringCollection.prototype.set = function(offset, lineString) {
   var dim = this.dim;
   goog.asserts.assert(offset in this.ranges);
-  var range = this.ranges[/** @type {string} */ (offset)];
+  var range = this.ranges[offset + ''];
   if (lineString.length * dim == range - offset) {
     ol.geom2.packPoints(this.buf.getArray(), offset, lineString, dim);
     this.buf.markDirty(range - offset, offset);

src/ol/image.js

@@ -34,6 +34,8 @@ ol.ImageState = {
  */
 ol.Image = function(extent, resolution, src, crossOrigin, attributions) {
 
+  goog.base(this);
+
   /**
    * @private
    * @type {Array.<ol.Attribution>}

src/ol/interaction/doubleclickzoominteraction.js

@@ -41,6 +41,7 @@ goog.inherits(ol.interaction.DoubleClickZoom, ol.interaction.Interaction);
  */
 ol.interaction.DoubleClickZoom.prototype.handleMapBrowserEvent =
     function(mapBrowserEvent) {
+  var stopEvent = false;
   var browserEvent = mapBrowserEvent.browserEvent;
   if (mapBrowserEvent.type == ol.MapBrowserEvent.EventType.DBLCLICK &&
       mapBrowserEvent.isMouseActionButton()) {
@@ -52,6 +53,7 @@ ol.interaction.DoubleClickZoom.prototype.handleMapBrowserEvent =
     ol.interaction.Interaction.zoomByDelta(map, view, delta, anchor,
         ol.interaction.DOUBLECLICKZOOM_ANIMATION_DURATION);
     mapBrowserEvent.preventDefault();
-    mapBrowserEvent.stopOtherInteractions();
+    stopEvent = true;
   }
+  return !stopEvent;
 };

src/ol/interaction/draginteraction.js

@@ -95,8 +95,9 @@ ol.interaction.Drag.prototype.handleMapBrowserEvent =
     function(mapBrowserEvent) {
   var map = mapBrowserEvent.map;
   if (!map.isDef()) {
-    return;
+    return true;
   }
+  var stopEvent = false;
   var view = map.getView();
   var browserEvent = mapBrowserEvent.browserEvent;
   if (mapBrowserEvent.type == ol.MapBrowserEvent.EventType.DOWN) {
@@ -132,7 +133,8 @@ ol.interaction.Drag.prototype.handleMapBrowserEvent =
       view.setHint(ol.ViewHint.INTERACTING, 1);
       this.dragging_ = true;
       mapBrowserEvent.preventDefault();
-      mapBrowserEvent.stopOtherInteractions();
+      stopEvent = true;
     }
   }
+  return !stopEvent;
 };

src/ol/interaction/interaction.js

@@ -17,6 +17,9 @@ ol.interaction.Interaction = function() {
 
 /**
  * @param {ol.MapBrowserEvent} mapBrowserEvent Map browser event.
+ * @return {boolean} Whether the map browser event should continue
+ *     through the chain of interactions. false means stop, true
+ *     means continue.
  */
 ol.interaction.Interaction.prototype.handleMapBrowserEvent =
     goog.abstractMethod;

src/ol/interaction/keyboardpaninteraction.js

@@ -52,6 +52,7 @@ goog.inherits(ol.interaction.KeyboardPan, ol.interaction.Interaction);
  */
 ol.interaction.KeyboardPan.prototype.handleMapBrowserEvent =
     function(mapBrowserEvent) {
+  var stopEvent = false;
   if (mapBrowserEvent.type == goog.events.KeyHandler.EventType.KEY) {
     var keyEvent = /** @type {goog.events.KeyEvent} */
         (mapBrowserEvent.browserEvent);
@@ -81,7 +82,8 @@ ol.interaction.KeyboardPan.prototype.handleMapBrowserEvent =
       ol.interaction.Interaction.pan(
           map, view, delta, ol.interaction.KEYBOARD_PAN_DURATION);
       mapBrowserEvent.preventDefault();
-      mapBrowserEvent.stopOtherInteractions();
+      stopEvent = true;
     }
   }
+  return !stopEvent;
 };

src/ol/interaction/keyboardzoominteraction.js

@@ -49,6 +49,7 @@ goog.inherits(ol.interaction.KeyboardZoom, ol.interaction.Interaction);
  */
 ol.interaction.KeyboardZoom.prototype.handleMapBrowserEvent =
     function(mapBrowserEvent) {
+  var stopEvent = false;
   if (mapBrowserEvent.type == goog.events.KeyHandler.EventType.KEY) {
     var keyEvent = /** @type {goog.events.KeyEvent} */
         (mapBrowserEvent.browserEvent);
@@ -63,7 +64,8 @@ ol.interaction.KeyboardZoom.prototype.handleMapBrowserEvent =
       ol.interaction.Interaction.zoomByDelta(map, view, delta, undefined,
           ol.interaction.KEYBOARD_ZOOM_DURATION);
       mapBrowserEvent.preventDefault();
-      mapBrowserEvent.stopOtherInteractions();
+      stopEvent = true;
     }
   }
+  return !stopEvent;
 };

src/ol/interaction/mousewheelzoominteraction.js

@@ -70,7 +70,7 @@ goog.inherits(ol.interaction.MouseWheelZoom, ol.interaction.Interaction);
  */
 ol.interaction.MouseWheelZoom.prototype.handleMapBrowserEvent =
     function(mapBrowserEvent) {
-
+  var stopEvent = false;
   if (mapBrowserEvent.type ==
       goog.events.MouseWheelHandler.EventType.MOUSEWHEEL) {
     var map = mapBrowserEvent.map;
@@ -93,8 +93,9 @@ ol.interaction.MouseWheelZoom.prototype.handleMapBrowserEvent =
         goog.bind(this.doZoom_, this, map), timeLeft);
 
     mapBrowserEvent.preventDefault();
-    mapBrowserEvent.stopOtherInteractions();
+    stopEvent = true;
   }
+  return !stopEvent;
 };
 
 

src/ol/interaction/touchinteraction.js

@@ -126,4 +126,5 @@ ol.interaction.Touch.prototype.handleMapBrowserEvent =
     }
     this.handled_ = handled;
   }
+  return true;
 };

src/ol/kinetic.js

@@ -108,10 +108,15 @@ ol.Kinetic.prototype.pan = function(source) {
   var initialVelocity = this.initialVelocity_;
   var minVelocity = this.minVelocity_;
   var duration = this.getDuration_();
-  var easingFunction = function(t) {
+  var easingFunction = (
+      /**
+       * @param {number} t T.
+       * @return {number} Easing.
+       */
+      function(t) {
         return initialVelocity * (Math.exp((decay * t) * duration) - 1) /
             (minVelocity - initialVelocity);
-  };
+      });
   return ol.animation.pan({
     source: source,
     duration: duration,

src/ol/layer/layer.exports

@@ -0,0 +1,2 @@
+@exportSymbol ol.layer.Layer
+@exportProperty ol.layer.Layer.prototype.getSource