Merge pull request #841 from elemoine/fix-ign-example

Fix wmts-ign example when hosted (take 2)

bin/generate-exports.py

@@ -111,7 +111,9 @@ class Class(Exportable):
             lines.append('  }\n')
             lines.append('  goog.base(this, arg);\n')
             lines.append('};\n')
-            lines.append('goog.inherits(%sExport, %s);\n' % (self.name, self.name))
+            lines.append('goog.inherits(\n')
+            lines.append('    %sExport,\n' % (self.name,));
+            lines.append('    %s);\n' % (self.name,));
             lines.append('goog.exportSymbol(\n')
             lines.append('    \'%s\',\n' % (self.name,))
             lines.append('    %s);\n' % (self.export_name(),))
@@ -276,7 +278,7 @@ def main(argv):
                     components = m.group('name').split('.')
                     if re.match(r'[A-Z]', components[-1]):
                         requires.add(name)
-                    elif len(components) > 2:
+                    elif len(components) > 1:
                         requires.add('.'.join(components[:-1]))
                 continue
             raise RuntimeError(line)

bin/loader_hosted_examples.js

@@ -65,12 +65,19 @@
     }
   }
 
+  // CLOSURE_NO_DEPS has an effect in "raw" and "whitespace" modes only (i.e.
+  // when COMPILED is false). In "raw" mode we use our own deps file
+  // (ol-deps.js), so we set CLOSURE_NO_DEPS to true to prevent Google
+  // Library's base.js script to load deps.js. In "whitespace" mode
+  // no deps file is needed at all, yet base.js will attempt to load deps.js
+  // if CLOSURE_NO_DEPS is not set to true.
+  window.CLOSURE_NO_DEPS = true;
+
   var scriptId = encodeURIComponent(scriptParams.id);
   document.write('<link rel="stylesheet" href="../build/ol.css" type="text/css">');
   if (mode != 'raw') {
     document.write('<scr' + 'ipt type="text/javascript" src="../build/' + oljs + '"></scr' + 'ipt>');
   } else {
-    window.CLOSURE_NO_DEPS = true; // we've got our own deps file
     document.write('<scr' + 'ipt type="text/javascript" src="../closure-library/closure/goog/base.js"></scr' + 'ipt>');
     document.write('<scr' + 'ipt type="text/javascript" src="../build/ol-deps.js"></scr' + 'ipt>');
     document.write('<scr' + 'ipt type="text/javascript" src="' + scriptId + '-require.js"></scr' + 'ipt>');

build.py

@@ -309,8 +309,10 @@ def examples_star_json(name, match):
                 '../externs/bingmaps.js',
                 '../externs/bootstrap.js',
                 '../externs/geojson.js',
+                '../externs/oli.js',
                 '../externs/proj4js.js',
                 '../externs/tilejson.js',
+                '../externs/w3c_device_sensor_event.js',
             ],
         })
         with open(t.name, 'w') as f:
@@ -332,8 +334,7 @@ def examples_star_combined_js(name, match):
     return Target(name, action=action, dependencies=dependencies)
 
 
-@target('serve', PLOVR_JAR, INTERNAL_SRC, 'build/test/requireall.js',
+@target('serve', PLOVR_JAR, 'test-deps', 'examples')
-        'examples')
 def serve(t):
     t.run('%(JAVA)s', '-jar', PLOVR_JAR, 'serve', 'buildcfg/ol.json',
           'buildcfg/ol-all.json', EXAMPLES_JSON, 'buildcfg/test.json')
@@ -345,19 +346,35 @@ def serve_precommit(t):
           'buildcfg/ol-all.json', 'buildcfg/test.json')
 
 
-virtual('lint', 'build/lint-timestamp', 'build/check-requires-timestamp',
+virtual('lint', 'build/lint-timestamp', 'build/lint-generated-timestamp',
-        'build/check-whitespace-timestamp')
+        'build/check-requires-timestamp', 'build/check-whitespace-timestamp')
 
 
-@target('build/lint-timestamp', SRC, INTERNAL_SRC, EXTERNAL_SRC, EXAMPLES_SRC,
+@target('build/lint-timestamp', SRC, EXAMPLES_SRC, SPEC, precious=True)
-        SPEC, precious=True)
 def build_lint_src_timestamp(t):
+    t.run('%(GJSLINT)s',
+          '--jslint_error=all',
+          '--strict',
+          t.newer(t.dependencies))
+    t.touch()
+
+
+@target('build/lint-generated-timestamp', INTERNAL_SRC, EXTERNAL_SRC,
+        precious=True)
+def build_lint_generated_timestamp(t):
     limited_doc_files = [
         path
         for path in ifind('externs', 'build/src/external/externs')
         if path.endswith('.js')]
-    t.run('%(GJSLINT)s', '--strict', '--limited_doc_files=%s' %
+    t.run('%(GJSLINT)s',
-          (','.join(limited_doc_files),), t.newer(t.dependencies))
+          '--jslint_error=all',
+          # ignore error for max line length (for these auto-generated sources)
+          '--disable=110',
+          # for a complete list of error codes to allow, see
+          # http://closure-linter.googlecode.com/svn/trunk/closure_linter/errors.py
+          '--limited_doc_files=%s' % (','.join(limited_doc_files),),
+          '--strict',
+          t.newer(t.dependencies))
     t.touch()
 
 
@@ -477,6 +494,7 @@ def build_check_requires_timestamp(t):
         provides = set()
         requires = set()
         uses = set()
+        uses_linenos = {}
         for lineno, line in _strip_comments(open(filename)):
             m = re.match(r'goog.provide\(\'(.*)\'\);', line)
             if m:
@@ -491,6 +509,7 @@ def build_check_requires_timestamp(t):
                     m = provide_re.search(line)
                     if m:
                         uses.add(m.group())
+                        uses_linenos[m.group()] = lineno
                         line = line[:m.start()] + line[m.end():]
                         break
                 else:
@@ -504,9 +523,10 @@ def build_check_requires_timestamp(t):
             uses.discard('ol.renderer.%s.Map' % (m.group(1),))
         missing_requires = uses - requires - provides
         if missing_requires:
-            t.info('%s: missing goog.requires: %s', filename, ', '.join(
+            for missing_require in sorted(missing_requires):
-                sorted(missing_requires)))
+                t.info("%s:%d missing goog.require('%s')" %
-            missing_count += len(missing_requires)
+                       (filename, uses_linenos[missing_require], missing_require))
+                missing_count += 1
     if unused_count or missing_count:
         t.error('%d unused goog.requires, %d missing goog.requires' %
                 (unused_count, missing_count))
@@ -682,7 +702,10 @@ def proj4js_zip(t):
     t.info('downloaded %r', t.name)
 
 
-@target('test', INTERNAL_SRC, PROJ4JS, 'build/test/requireall.js', phony=True)
+virtual('test-deps', INTERNAL_SRC, PROJ4JS, 'build/test/requireall.js')
+
+
+@target('test', 'test-deps', phony=True)
 def test(t):
     t.run('%(PHANTOMJS)s', 'test/mocha-phantomjs.coffee', 'test/ol.html')
 

buildcfg/base.json

@@ -42,19 +42,64 @@
     "//json.js",
     "../externs/bingmaps.js",
     "../externs/geojson.js",
+    "../externs/oli.js",
     "../externs/proj4js.js",
-    "../externs/tilejson.js"
+    "../externs/tilejson.js",
+    "../externs/w3c_device_sensor_event.js"
   ],
 
   "level": "VERBOSE",
 
   "mode": "ADVANCED",
 
+  "name-suffixes-to-strip": [
+    "logger",
+    "logger_"
+  ],
+
   "paths": [
     "../build/src/internal/src",
     "../src"
   ],
 
-  "treat-warnings-as-errors": false
+  "treat-warnings-as-errors": false,
+
+  "type-prefixes-to-strip": [
+    "goog.asserts",
+    "goog.debug.Console",
+    "goog.debug.DebugWindow",
+    "goog.debug.DevCss",
+    "goog.debug.DivConsole",
+    "goog.debug.EntryPointMonitor",
+    "goog.debug.ErrorHandler",
+    "goog.debug.ErrorReporter",
+    "goog.debug.FancyWindow",
+    "goog.debug.Formatter",
+    "goog.debug.FpsDisplay",
+    "goog.debug.GcDiagnostics",
+    "goog.debug.HtmlFormatter",
+    "goog.debug.LogBuffer",
+    "goog.debug.LogManager",
+    "goog.debug.LogRecord",
+    "goog.debug.Logger",
+    "goog.debug.RelativeTimeProvider",
+    "goog.debug.TextFormatter",
+    "goog.debug.Trace",
+    "goog.debug.catchErrors",
+    "goog.debug.deepExpose",
+    "goog.debug.enhanceError",
+    "goog.debug.entryPointRegistry",
+    "goog.debug.errorHandlerWeakDep",
+    "goog.debug.expose",
+    "goog.debug.exposeArray",
+    "goog.debug.exposeException",
+    "goog.debug.getFunctionName",
+    "goog.debug.getStacktrace",
+    "goog.debug.getStacktraceSimple",
+    "goog.debug.logRecordSerializer",
+    "goog.debug.makeWhitespaceVisible",
+    "goog.debug.normalizeErrorObject",
+    "goog.debug.reflect"
+  ]
 
 }

buildcfg/ol-all.json

@@ -7,8 +7,10 @@
     "../build/src/external/externs/types.js",
     "../externs/bingmaps.js",
     "../externs/geojson.js",
+    "../externs/oli.js",
     "../externs/proj4js.js",
-    "../externs/tilejson.js"
+    "../externs/tilejson.js",
+    "../externs/w3c_device_sensor_event.js"
   ],
 
   "inherits": "base.json",

buildcfg/ol-simple.json

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

buildcfg/ol-whitespace.json

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

buildcfg/ol.json

@@ -17,8 +17,10 @@
     "../build/src/external/externs/types.js",
     "../externs/bingmaps.js",
     "../externs/geojson.js",
+    "../externs/oli.js",
     "../externs/proj4js.js",
-    "../externs/tilejson.js"
+    "../externs/tilejson.js",
+    "../externs/w3c_device_sensor_event.js"
   ],
 
   "inherits": "base.json",

css/ol.css

@@ -1,21 +1,27 @@
 .ol-attribution {
   position: absolute;
-  font-size: 10px;
   text-align: right;
   color: #eeeeee;
   bottom: 0;
   right: 0;
   background: rgba(0,60,136,0.3);
   font-family: 'Lucida Grande',Verdana,Geneva,Lucida,Arial,Helvetica,sans-serif;
-  padding: 2px 4px;
+  padding: 6px;
 }
 .ol-attribution a {
   color: white;
   text-decoration: none;
 }
+.ol-attribution ul {
+  margin: 0;
+  padding: 0;
+  font-size: 10px;
+  line-height: 12px;
+}
 .ol-attribution li {
   display: inline;
   list-style: none;
+  line-height: inherit;
 }
 .ol-attribution li:not(:last-child):after {
   content: "\2003";
@@ -81,6 +87,13 @@ a.ol-full-screen-true:after {
   display: inline;
   list-style: none;
 }
+
+.ol-mouse-position {
+  top: 8px;
+  right: 8px;
+  position: absolute;  
+}
+
 .ol-scale-line {
   background: rgba(0,60,136,0.3);
   border-radius: 4px;

examples/animation.html

@@ -30,22 +30,27 @@
       <div class="row-fluid">
         <div class="span12">
           <div id="map" class="map"></div>
-          <button id="rotate-left"><i class="icon-arrow-left"></i></button>
-          <button>Rotate</button>
-          <button id="rotate-right"><i class="icon-arrow-right"></i></button>
         </div>
-        <button id="pan-to-london">Pan to London</button>
+      </div>
-        <button id="elastic-to-moscow">Elastic to Moscow</button>
+
-        <button id="bounce-to-istanbul">Bounce to Istanbul</button>
+      <div class="row-fluid">
-        <button id="spin-to-rome">Spin to Rome</button>
+        <div class="span12">
-        <button id="fly-to-bern">Fly to Bern</button>
+          <button id="rotate-left"><i class="icon-arrow-left"></i></button>
+          <button id="rotate-right"><i class="icon-arrow-right"></i></button>
+          <button id="pan-to-london">Pan to London</button>
+          <button id="elastic-to-moscow">Elastic to Moscow</button>
+          <button id="bounce-to-istanbul">Bounce to Istanbul</button>
+          <button id="spin-to-rome">Spin to Rome</button>
+          <button id="fly-to-bern">Fly to Bern</button>
+          <button id="spiral-to-madrid">Spiral to Madrid</button>
+        </div>
       </div>
 
       <div class="row-fluid">
 
         <div class="span4">
           <h4 id="title">Animation example</h4>
-          <p id="shortdesc">Example animations.</p>
+          <p id="shortdesc">Demonstrates animated pan, zoom, and rotation.</p>
           <div id="docs">
             <p>See the <a href="animation.js" target="_blank">animation.js source</a> to see how this is done.</p>
           </div>

examples/animation.js

@@ -4,20 +4,16 @@ goog.require('ol.View2D');
 goog.require('ol.animation');
 goog.require('ol.easing');
 goog.require('ol.layer.TileLayer');
-goog.require('ol.projection');
+goog.require('ol.proj');
 goog.require('ol.source.OSM');
 
 
-var london = ol.projection.transform(
+var london = ol.proj.transform([-0.12755, 51.507222], 'EPSG:4326', 'EPSG:3857');
-    [-0.12755, 51.507222], 'EPSG:4326', 'EPSG:3857');
+var moscow = ol.proj.transform([37.6178, 55.7517], 'EPSG:4326', 'EPSG:3857');
-var moscow = ol.projection.transform(
+var istanbul = ol.proj.transform([28.9744, 41.0128], 'EPSG:4326', 'EPSG:3857');
-    [37.6178, 55.7517], 'EPSG:4326', 'EPSG:3857');
+var rome = ol.proj.transform([12.5, 41.9], 'EPSG:4326', 'EPSG:3857');
-var istanbul = ol.projection.transform(
+var bern = ol.proj.transform([7.4458, 46.95], 'EPSG:4326', 'EPSG:3857');
-    [28.9744, 41.0128], 'EPSG:4326', 'EPSG:3857');
+var madrid = ol.proj.transform([-3.683333, 40.4], 'EPSG:4326', 'EPSG:3857');
-var rome = ol.projection.transform(
-    [12.5, 41.9], 'EPSG:4326', 'EPSG:3857');
-var bern = ol.projection.transform(
-    [7.4458, 46.95], 'EPSG:4326', 'EPSG:3857');
 
 var view = new ol.View2D({
   // the view's initial state
@@ -37,7 +33,6 @@ var map = new ol.Map({
   view: view
 });
 
-
 var rotateLeft = document.getElementById('rotate-left');
 rotateLeft.addEventListener('click', function() {
   var rotateLeft = ol.animation.rotate({
@@ -123,3 +118,26 @@ flyToBern.addEventListener('click', function() {
   map.addPreRenderFunctions([pan, bounce]);
   view.setCenter(bern);
 }, false);
+
+var spiralToMadrid = document.getElementById('spiral-to-madrid');
+spiralToMadrid.addEventListener('click', function() {
+  var duration = 2000;
+  var start = +new Date();
+  var pan = ol.animation.pan({
+    duration: duration,
+    source: view.getCenter(),
+    start: start
+  });
+  var bounce = ol.animation.bounce({
+    duration: duration,
+    resolution: 2 * view.getResolution(),
+    start: start
+  });
+  var rotate = ol.animation.rotate({
+    duration: duration,
+    rotation: -4 * Math.PI,
+    start: start
+  });
+  map.addPreRenderFunctions([pan, bounce, rotate]);
+  view.setCenter(madrid);
+}, false);

examples/bind-input.html

@@ -37,7 +37,7 @@
 
         <div class="span4">
           <h4 id="title">Bind HTML input example</h4>
-          <p id="shortdesc">Bind an HTML input to an ol object.</p>
+          <p id="shortdesc">Demonstrates two-way binding of HTML input elements to OpenLayers objects.</p>
           <div id="docs">
             <p>See the <a href="bind-input.js" target="_blank">bind-input.js source</a> to see how this is done.</p>
           </div>
@@ -71,7 +71,8 @@
               <legend>View</legend>
               <label>rotation</label>
               <input id="rotation" type="range" min="-3.141592653589793" max="3.141592653589793" step="0.01"/>
-            </fieldset>
+              <label>resolution</label>
+              <input id="resolution" type="number" min="0" step="250"/>
             </fieldset>
           </form>
         </div>

examples/bind-input.js

@@ -39,3 +39,6 @@ brightness.bindTo('value', layer, 'brightness');
 
 var rotation = new ol.dom.Input(document.getElementById('rotation'));
 rotation.bindTo('value', map.getView(), 'rotation');
+
+var resolution = new ol.dom.Input(document.getElementById('resolution'));
+resolution.bindTo('value', map.getView(), 'resolution');

examples/bing-maps.js

@@ -2,7 +2,7 @@ goog.require('ol.Map');
 goog.require('ol.RendererHints');
 goog.require('ol.View2D');
 goog.require('ol.layer.TileLayer');
-goog.require('ol.projection');
+goog.require('ol.proj');
 goog.require('ol.source.BingMaps');
 
 
@@ -23,7 +23,7 @@ var map = new ol.Map({
   renderers: ol.RendererHints.createFromQueryData(),
   target: 'map',
   view: new ol.View2D({
-    center: ol.projection.transform([-123.1, 49.25], 'EPSG:4326', 'EPSG:3857'),
+    center: ol.proj.transform([-123.1, 49.25], 'EPSG:4326', 'EPSG:3857'),
     zoom: 8
   })
 });

examples/brightness-contrast.html

@@ -8,6 +8,14 @@
     <link rel="stylesheet" href="../resources/layout.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
     <title>Brightness/contrast example</title>
+    <style>
+      #reset-brightness {
+        min-width: 138px;
+      }
+      #reset-contrast {
+        min-width: 120px;
+      }
+    </style>
   </head>
   <body>
 

examples/brightness-contrast.js

@@ -20,27 +20,46 @@ var map = new ol.Map({
 });
 
 var increaseBrightness = document.getElementById('increase-brightness');
-increaseBrightness.addEventListener('click', function() {
-  layer.setBrightness(layer.getBrightness() + 0.125);
-}, false);
 var resetBrightness = document.getElementById('reset-brightness');
+var decreaseBrightness = document.getElementById('decrease-brightness');
+
+function setResetBrightnessButtonHTML() {
+  resetBrightness.innerHTML = 'Brightness (' +
+      layer.getBrightness().toFixed(3) + ')';
+}
+setResetBrightnessButtonHTML();
+
+increaseBrightness.addEventListener('click', function() {
+  layer.setBrightness(Math.min(layer.getBrightness() + 0.125, 1));
+  setResetBrightnessButtonHTML();
+}, false);
 resetBrightness.addEventListener('click', function() {
   layer.setBrightness(0);
+  setResetBrightnessButtonHTML();
 }, false);
-var decreaseBrightness = document.getElementById('decrease-brightness');
 decreaseBrightness.addEventListener('click', function() {
-  layer.setBrightness(layer.getBrightness() - 0.125);
+  layer.setBrightness(Math.max(layer.getBrightness() - 0.125, -1));
+  setResetBrightnessButtonHTML();
 }, false);
 
 var increaseContrast = document.getElementById('increase-contrast');
+var resetContrast = document.getElementById('reset-contrast');
+var decreaseContrast = document.getElementById('decrease-contrast');
+
+function setResetContrastButtonHTML() {
+  resetContrast.innerHTML = 'Contrast (' + layer.getContrast().toFixed(3) + ')';
+}
+setResetContrastButtonHTML();
+
 increaseContrast.addEventListener('click', function() {
   layer.setContrast(layer.getContrast() + 0.125);
+  setResetContrastButtonHTML();
 }, false);
-var resetContrast = document.getElementById('reset-contrast');
 resetContrast.addEventListener('click', function() {
   layer.setContrast(1);
+  setResetContrastButtonHTML();
 }, false);
-var decreaseContrast = document.getElementById('decrease-contrast');
 decreaseContrast.addEventListener('click', function() {
-  layer.setContrast(layer.getContrast() - 0.125);
+  layer.setContrast(Math.max(layer.getContrast() - 0.125, 0));
+  setResetContrastButtonHTML();
 }, false);

examples/canvas-tiles.html

@@ -37,8 +37,9 @@
 
         <div class="span4">
           <h4 id="title">Canvas tiles example</h4>
-          <p id="shortdesc">The black grid tiles are generated on the client with an HTML5 canvas. Note that the tile coordinates are ol3 normalized tile coordinates (origin bottom left), not OSM tile coordinates (origin top left).</p>
+          <p id="shortdesc">Renders tiles with coordinates for debugging.</p>
           <div id="docs">
+            <p>The black grid tiles are generated on the client with an HTML5 canvas. Note that the tile coordinates are ol3 normalized tile coordinates (origin bottom left), not OSM tile coordinates (origin top left).</p>
             <p>See the <a href="canvas-tiles.js" target="_blank">canvas-tiles.js source</a> to see how this is done.</p>
           </div>
           <div id="tags">layers, openstreetmap, canvas</div>

examples/canvas-tiles.js

@@ -2,7 +2,7 @@ goog.require('ol.Map');
 goog.require('ol.RendererHints');
 goog.require('ol.View2D');
 goog.require('ol.layer.TileLayer');
-goog.require('ol.projection');
+goog.require('ol.proj');
 goog.require('ol.source.DebugTileSource');
 goog.require('ol.source.OSM');
 goog.require('ol.tilegrid.XYZ');
@@ -25,7 +25,7 @@ var map = new ol.Map({
   renderers: ol.RendererHints.createFromQueryData(),
   target: 'map',
   view: new ol.View2D({
-    center: ol.projection.transform(
+    center: ol.proj.transform(
         [-0.1275, 51.507222], 'EPSG:4326', 'EPSG:3857'),
     zoom: 10
   })

examples/custom-controls.html

@@ -0,0 +1,94 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="chrome=1">
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../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 {
+        position: absolute;
+        top: 65px;
+        left: 8px;
+        background: rgba(255,255,255,0.4);
+        border-radius: 4px;
+        padding: 2px;
+      }
+      .zoom-extent a {
+        display: block;
+        margin: 1px;
+        padding: 0;
+        color: white;
+        font-size: 18px;
+        font-family: 'Lucida Grande',Verdana,Geneva,Lucida,Arial,Helvetica,sans-serif;
+        font-weight: bold;
+        text-decoration: none;
+        text-align: center;
+        height: 22px;
+        width: 22px;
+        line-height: 19px;
+        background: rgba(0,60,136,0.5);
+      }
+      .zoom-extent 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>
+  <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="span4">
+          <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.
+              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">
+            custom, control
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <script src="loader.js?id=custom-controls" type="text/javascript"></script>
+    <script src="../resources/social-links.js" type="text/javascript"></script>
+
+  </body>
+
+</html>

examples/custom-controls.js

@@ -0,0 +1,109 @@
+goog.require('ol');
+goog.require('ol.Map');
+goog.require('ol.RendererHints');
+goog.require('ol.View2D');
+goog.require('ol.control.Control');
+goog.require('ol.control.defaults');
+goog.require('ol.layer.TileLayer');
+goog.require('ol.source.OSM');
+
+
+/**
+ * Define a namespace for the application.
+ */
+window.app = {};
+var app = window.app;
+
+
+//
+// Define zoom extent control.
+//
+
+
+
+/**
+ * @constructor
+ * @extends {ol.control.Control}
+ * @param {Object=} opt_options Control options.
+ */
+app.ZoomExtentControl = function(opt_options) {
+
+  var options = opt_options || {};
+  this.extent_ = options.extent;
+
+  var anchor = document.createElement('a');
+  anchor.href = '#zoom-to';
+  anchor.className = 'zoom-to';
+
+  var this_ = this;
+  var handleZoomTo = function(e) {
+    this_.handleZoomTo(e);
+  };
+
+  anchor.addEventListener('click', handleZoomTo, false);
+  anchor.addEventListener('touchstart', handleZoomTo, false);
+
+  var element = document.createElement('div');
+  element.className = 'zoom-extent ol-unselectable';
+  element.appendChild(anchor);
+
+  ol.control.Control.call(this, {
+    element: element,
+    map: options.map,
+    target: options.target
+  });
+
+};
+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();
+  }
+};
+
+
+//
+// Create map, giving it a zoom extent control.
+//
+
+
+var map = new ol.Map({
+  controls: ol.control.defaults({}, [
+    new app.ZoomExtentControl({
+      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/device-orientation.html

@@ -0,0 +1,62 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="chrome=1">
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
+    <link rel="stylesheet" href="../resources/layout.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
+    <title>Device-Orientation example</title>
+  </head>
+  <body>
+
+    <div class="navbar navbar-inverse navbar-fixed-top">
+      <div class="navbar-inner">
+        <div class="container">
+          <a class="brand" href="./">OpenLayers 3 Examples</a>
+          <ul class="nav pull-right">
+            <li><iframe class="github-watch-button" src="http://ghbtns.com/github-btn.html?user=openlayers&repo=ol3&type=watch&count=true"
+  allowtransparency="true" frameborder="0" scrolling="0" height="20" width="90"></iframe></li>
+            <li><a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-hashtags="openlayers">&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="span4">
+          <h4 id="title">Device orientation example</h4>
+          <label class="checkbox" for="track">
+            <input id="track" type="checkbox"/>track changes
+          </label>
+          <p>&alpha; : <code id="alpha"></code></p>
+          <p>&beta; : <code id="beta"></code></p>
+          <p>&gamma; : <code id="gamma"></code></p>
+          <p>heading : <code id="heading"></code></p>
+          <p id="shortdesc">Listen to DeviceOrientation events</p>
+          <div id="docs">
+            <p>See the <a href="device-orientation.js" target="_blank">device-orientation.js source</a> to see how this is done.</p>
+          </div>
+          <div id="tags">orientation, openstreetmap</div>
+        </div>
+
+      </div>
+
+    </div>
+
+    <script src="loader.js?id=device-orientation" type="text/javascript"></script>
+    <script src="../resources/social-links.js" type="text/javascript"></script>
+
+  </body>
+</html>

examples/device-orientation.js

@@ -0,0 +1,46 @@
+goog.require('ol.DeviceOrientation');
+goog.require('ol.Map');
+goog.require('ol.RendererHints');
+goog.require('ol.View2D');
+goog.require('ol.dom.Input');
+goog.require('ol.layer.TileLayer');
+goog.require('ol.source.OSM');
+
+var map = new ol.Map({
+  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
+  })
+});
+var view = map.getView();
+
+var deviceOrientation = new ol.DeviceOrientation();
+var track = new ol.dom.Input(document.getElementById('track'));
+track.bindTo('checked', deviceOrientation, 'tracking');
+
+deviceOrientation.on('change', function(event) {
+  document.getElementById('alpha').innerHTML = event.target.getAlpha();
+  document.getElementById('beta').innerHTML = event.target.getBeta();
+  document.getElementById('gamma').innerHTML = event.target.getGamma();
+  document.getElementById('heading').innerHTML = event.target.getHeading();
+});
+
+// tilt the map
+deviceOrientation.on(['change:beta', 'change:gamma'], function(event) {
+  var center = view.getCenter();
+  var resolution = view.getResolution();
+  var beta = event.target.getBeta() || 0;
+  var gamma = event.target.getGamma() || 0;
+
+  center[0] -= resolution * gamma * 25;
+  center[1] += resolution * beta * 25;
+
+  view.setCenter(center);
+});

examples/drag-rotate-and-zoom.html

@@ -0,0 +1,56 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="chrome=1">
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
+    <link rel="stylesheet" href="../resources/layout.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
+    <title>Drag rotate and zoom example</title>
+  </head>
+  <body>
+
+    <div class="navbar navbar-inverse navbar-fixed-top">
+      <div class="navbar-inner">
+        <div class="container">
+          <a class="brand" href="./">OpenLayers 3 Examples</a>
+          <ul class="nav pull-right">
+            <li><iframe class="github-watch-button" src="http://ghbtns.com/github-btn.html?user=openlayers&repo=ol3&type=watch&count=true"
+  allowtransparency="true" frameborder="0" scrolling="0" height="20" width="90"></iframe></li>
+            <li><a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-hashtags="openlayers">&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="span4">
+          <h4 id="title">Drag rotate and zoom example</h4>
+          <p id="shortdesc">A single interaction to drag, rotate, and zoom.</p>
+          <div id="docs">
+            <p><code>Shift</code> + Drag to rotate and zoom the map around its center.</p>
+            <p>See the <a href="drag-rotate-and-zoom.js" target="_blank">drag-rotate-and-zoom.js source</a> to see how this is done.</p>
+          </div>
+          <div id="tags">drag, rotate, zoom, interaction</div>
+        </div>
+
+      </div>
+
+    </div>
+
+    <script src="loader.js?id=drag-rotate-and-zoom" type="text/javascript"></script>
+    <script src="../resources/social-links.js" type="text/javascript"></script>
+
+  </body>
+</html>

examples/drag-rotate-and-zoom.js

@@ -0,0 +1,25 @@
+goog.require('ol.Map');
+goog.require('ol.RendererHints');
+goog.require('ol.View2D');
+goog.require('ol.interaction.DragRotateAndZoom');
+goog.require('ol.interaction.defaults');
+goog.require('ol.layer.TileLayer');
+goog.require('ol.source.MapQuestOpenAerial');
+
+
+var map = new ol.Map({
+  interactions: ol.interaction.defaults({}, [
+    new ol.interaction.DragRotateAndZoom()
+  ]),
+  layers: [
+    new ol.layer.TileLayer({
+      source: new ol.source.MapQuestOpenAerial()
+    })
+  ],
+  renderers: ol.RendererHints.createFromQueryData(),
+  target: 'map',
+  view: new ol.View2D({
+    center: [0, 0],
+    zoom: 2
+  })
+});

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

@@ -0,0 +1,68 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="chrome=1">
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
+    <link rel="stylesheet" href="../resources/layout.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
+    <style>
+      .map:-moz-full-screen {
+        height: 100%;
+      }
+      .map:-webkit-full-screen {
+        height: 100%;
+      }
+      .map:full-screen {
+        height: 100%;
+      }
+    </style>
+    <title>Full screen drag rotate and zoom example</title>
+  </head>
+  <body>
+
+    <div class="navbar navbar-inverse navbar-fixed-top">
+      <div class="navbar-inner">
+        <div class="container">
+          <a class="brand" href="./">OpenLayers 3 Examples</a>
+          <ul class="nav pull-right">
+            <li><iframe class="github-watch-button" src="http://ghbtns.com/github-btn.html?user=openlayers&repo=ol3&type=watch&count=true"
+  allowtransparency="true" frameborder="0" scrolling="0" height="20" width="90"></iframe></li>
+            <li><a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-hashtags="openlayers">&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="span4">
+          <h4 id="title">Full screen drag rotate and zoom example</h4>
+          <p id="shortdesc">Example of drag rotate and zoom control with full screen effect.</p>
+          <div id="docs">
+            <p>Hold down <code>Shift</code> + drag to rotate and zoom.  Click the button in the top right corner to go full screen.  Then do the <code>Shift</code> + drag thing again.</p>
+            <p>If there is no button on the map, your browser does not support the <a href="http://caniuse.com/#feat=fullscreen">Full Screen API</a>.</p>
+            <p>See the <a href="full-screen-drag-rotate-and-zoom.js" target="_blank">full-screen-drag-rotate-and-zoom.js source</a> to see how this is done.</p>
+          </div>
+          <div id="tags">full-screen, drag, rotate, zoom, bing, bing-maps</div>
+        </div>
+
+      </div>
+
+    </div>
+
+    <script src="loader.js?id=full-screen-drag-rotate-and-zoom" type="text/javascript"></script>
+    <script src="../resources/social-links.js" type="text/javascript"></script>
+
+  </body>
+</html>

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

@@ -0,0 +1,35 @@
+goog.require('ol.Map');
+goog.require('ol.RendererHint');
+goog.require('ol.View2D');
+goog.require('ol.control.FullScreen');
+goog.require('ol.control.defaults');
+goog.require('ol.interaction.DragRotateAndZoom');
+goog.require('ol.interaction.defaults');
+goog.require('ol.layer.TileLayer');
+goog.require('ol.source.BingMaps');
+
+
+var map = new ol.Map({
+  controls: ol.control.defaults({}, [
+    new ol.control.FullScreen()
+  ]),
+  interactions: ol.interaction.defaults({}, [
+    new ol.interaction.DragRotateAndZoom()
+  ]),
+  layers: [
+    new ol.layer.TileLayer({
+      source: new ol.source.BingMaps({
+        key: 'AlQLZ0-5yk301_ESrmNLma3LYxEKNSg7w-e_knuRfyYFtld-UFvXVs38NOulku3Q',
+        style: 'Aerial'
+      })
+    })
+  ],
+  // Use the canvas renderer because it's currently the fastest
+  renderer: ol.RendererHint.CANVAS,
+  target: 'map',
+  view: new ol.View2D({
+    center: [-33519607, 5616436],
+    rotation: -Math.PI / 8,
+    zoom: 8
+  })
+});

examples/full-screen.html

@@ -48,9 +48,10 @@
 
         <div class="span4">
           <h4 id="title">Full screen control example</h4>
-          <p id="shortdesc">Example of a full screen control.  Click the control in the top right corner to go full screen.  Click it again to exit full screen.</p>
+          <p id="shortdesc">Example of a full screen control.</p>
-          <p>If there is no button on the map, your browser does not support the <a href="http://caniuse.com/#feat=fullscreen">Full Screen API</a>.</p>
           <div id="docs">
+            <p>Click the control in the top right corner to go full screen.  Click it again to exit full screen.</p>
+            <p>If there is no button on the map, your browser does not support the <a href="http://caniuse.com/#feat=fullscreen">Full Screen API</a>.</p>
             <p>See the <a href="full-screen.js" target="_blank">full-screen.js source</a> to see how this is done.</p>
           </div>
           <div id="tags">full-screen, bing, bing-maps</div>

examples/geolocation.html

@@ -12,6 +12,9 @@
         font-size: 22px;
         text-shadow: 2px 2px 3px #013;
       }
+      .tooltip-inner {
+        white-space: nowrap;
+      }
     </style>
     <title>Geolocation example</title>
   </head>
@@ -50,8 +53,9 @@
           <button id="locate"><i class="icon-screenshot"></i> locate</button>
           <div id="tags">geolocation, openstreetmap</div>
         </div>
-
+        <div class="span4 pull-right">
-      </div>
+          <div id="info" class="alert alert-error" style="display: none;"></div>
+        </div>
 
     </div>
 

examples/geolocation.js

@@ -31,11 +31,17 @@ var marker = new ol.Overlay({
 // bind the marker position to the device location.
 marker.bindTo('position', geolocation);
 
-geolocation.addEventListener('accuracy_changed', function() {
+geolocation.on('change:accuracy', function() {
   $(marker.getElement()).tooltip({
     title: this.getAccuracy() + 'm from this point'
   });
 });
+geolocation.on('error', function(error) {
+  var info = document.getElementById('info');
+  info.innerHTML = error.message;
+  info.style.display = '';
+});
+
 
 $('#locate').click(function() {
   geolocation.setTracking(true);

examples/gml.html

@@ -0,0 +1,55 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="chrome=1">
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
+    <link rel="stylesheet" href="../resources/layout.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
+    <title>GML example</title>
+  </head>
+  <body>
+
+    <div class="navbar navbar-inverse navbar-fixed-top">
+      <div class="navbar-inner">
+        <div class="container">
+          <a class="brand" href="./">OpenLayers 3 Examples</a>
+          <ul class="nav pull-right">
+            <li><iframe class="github-watch-button" src="http://ghbtns.com/github-btn.html?user=openlayers&repo=ol3&type=watch&count=true"
+  allowtransparency="true" frameborder="0" scrolling="0" height="20" width="90"></iframe></li>
+            <li><a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-hashtags="openlayers">&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="span4">
+          <h4 id="title">GML example</h4>
+          <p id="shortdesc">Example of using the GML parser.</p>
+          <div id="docs">
+            <p>See the <a href="gml.js" target="_blank">gml.js source</a> to see how this is done.</p>
+          </div>
+          <div id="tags">GML</div>
+        </div>
+
+      </div>
+
+    </div>
+
+    <script src="loader.js?id=gml" type="text/javascript"></script>
+    <script src="../resources/social-links.js" type="text/javascript"></script>
+
+  </body>
+</html>

examples/gml.js

@@ -0,0 +1,60 @@
+goog.require('ol.Map');
+goog.require('ol.RendererHint');
+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');
+goog.require('ol.style.Rule');
+goog.require('ol.style.Style');
+
+var raster = new ol.layer.TileLayer({
+  source: new ol.source.MapQuestOpenAerial()
+});
+
+var vector = new ol.layer.Vector({
+  source: new ol.source.Vector({
+    projection: ol.proj.get('EPSG:4326')
+  }),
+  style: new ol.style.Style({rules: [
+    new ol.style.Rule({
+      symbolizers: [
+        new ol.style.Polygon({
+          strokeColor: '#bada55'
+        })
+      ]
+    })
+  ]})
+});
+
+var map = new ol.Map({
+  layers: [raster, vector],
+  renderer: ol.RendererHint.CANVAS,
+  target: 'map',
+  view: new ol.View2D({
+    center: [-10997171.194994785, 5206335.565590534],
+    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

@@ -0,0 +1,59 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="chrome=1">
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
+    <link rel="stylesheet" href="../resources/layout.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
+    <title>GPX example</title>
+  </head>
+  <body>
+
+    <div class="navbar navbar-inverse navbar-fixed-top">
+      <div class="navbar-inner">
+        <div class="container">
+          <a class="brand" href="./">OpenLayers 3 Examples</a>
+          <ul class="nav pull-right">
+            <li><iframe class="github-watch-button" src="http://ghbtns.com/github-btn.html?user=openlayers&repo=ol3&type=watch&count=true"
+  allowtransparency="true" frameborder="0" scrolling="0" height="20" width="90"></iframe></li>
+            <li><a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-hashtags="openlayers">&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="span4">
+          <h4 id="title">GPX example</h4>
+          <p id="shortdesc">Example of using the GPX parser.</p>
+          <div id="docs">
+            <p>See the <a href="gpx.js" target="_blank">gpx.js source</a> to see how this is done.</p>
+          </div>
+          <div id="tags">GPX</div>
+        </div>
+        <div class="span4 pull-right">
+          <div id="info" class="alert alert-success">
+            &nbsp;
+          </div>
+        </div>
+      </div>
+
+    </div>
+
+    <script src="loader.js?id=gpx" type="text/javascript"></script>
+    <script src="../resources/social-links.js" type="text/javascript"></script>
+
+  </body>
+</html>

examples/gpx.js

@@ -0,0 +1,65 @@
+goog.require('ol.Map');
+goog.require('ol.RendererHint');
+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');
+
+var raster = new ol.layer.TileLayer({
+  source: new ol.source.OSM()
+});
+
+var vector = new ol.layer.Vector({
+  source: new ol.source.Vector({
+    projection: ol.proj.get('EPSG:4326')
+  }),
+  transformFeatureInfo: function(features) {
+    var info = [];
+    for (var i = 0, ii = features.length; i < ii; ++i) {
+      info.push(features[i].get('name') + ': ' + features[i].get('type'));
+    }
+    return info.join(', ');
+  }
+});
+
+var map = new ol.Map({
+  layers: [raster, vector],
+  renderer: ol.RendererHint.CANVAS,
+  target: 'map',
+  view: new ol.View2D({
+    center: [-7916461.9312699, 5226343.9091441],
+    zoom: 11
+  })
+});
+
+map.on(['click', 'mousemove'], function(evt) {
+  map.getFeatureInfo({
+    pixel: evt.getPixel(),
+    layers: [vector],
+    success: function(featureInfo) {
+      document.getElementById('info').innerHTML = featureInfo[0] || '&nbsp;';
+    }
+  });
+});
+
+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

@@ -8,6 +8,14 @@
     <link rel="stylesheet" href="../resources/layout.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
     <title>Hue/saturation example</title>
+    <style>
+      #reset-hue {
+        min-width: 90px;
+      }
+      #reset-saturation {
+        min-width: 124px;
+      }
+    </style>
   </head>
   <body>
 

examples/hue-saturation.js

@@ -2,7 +2,7 @@ goog.require('ol.Map');
 goog.require('ol.RendererHint');
 goog.require('ol.View2D');
 goog.require('ol.layer.TileLayer');
-goog.require('ol.projection');
+goog.require('ol.proj');
 goog.require('ol.source.BingMaps');
 
 
@@ -18,34 +18,52 @@ var map = new ol.Map({
   renderer: ol.RendererHint.WEBGL,
   target: 'map',
   view: new ol.View2D({
-    center: ol.projection.transform(
+    center: ol.proj.transform([-9.375, 51.483333], 'EPSG:4326', 'EPSG:3857'),
-        [-9.375, 51.483333], 'EPSG:4326', 'EPSG:3857'),
     zoom: 15
   })
 });
 
 var increaseHue = document.getElementById('increase-hue');
+var resetHue = document.getElementById('reset-hue');
+var decreaseHue = document.getElementById('decrease-hue');
+
+function setResetHueButtonHTML() {
+  resetHue.innerHTML = 'Hue (' + layer.getHue().toFixed(2) + ')';
+}
+setResetHueButtonHTML();
+
 increaseHue.addEventListener('click', function() {
   layer.setHue(layer.getHue() + 0.25);
+  setResetHueButtonHTML();
 }, false);
-var resetHue = document.getElementById('reset-hue');
 resetHue.addEventListener('click', function() {
   layer.setHue(0);
+  setResetHueButtonHTML();
 }, false);
-var decreaseHue = document.getElementById('decrease-hue');
 decreaseHue.addEventListener('click', function() {
   layer.setHue(layer.getHue() - 0.25);
+  setResetHueButtonHTML();
 }, false);
 
 var increaseSaturation = document.getElementById('increase-saturation');
+var resetSaturation = document.getElementById('reset-saturation');
+var decreaseSaturation = document.getElementById('decrease-saturation');
+
+function setResetSaturationButtonHTML() {
+  resetSaturation.innerHTML = 'Saturation (' +
+      layer.getSaturation().toFixed(2) + ')';
+}
+setResetSaturationButtonHTML();
+
 increaseSaturation.addEventListener('click', function() {
   layer.setSaturation(layer.getSaturation() + 0.25);
+  setResetSaturationButtonHTML();
 }, false);
-var resetSaturation = document.getElementById('reset-saturation');
 resetSaturation.addEventListener('click', function() {
   layer.setSaturation(1);
+  setResetSaturationButtonHTML();
 }, false);
-var decreaseSaturation = document.getElementById('decrease-saturation');
 decreaseSaturation.addEventListener('click', function() {
-  layer.setSaturation(layer.getSaturation() - 0.25);
+  layer.setSaturation(Math.max(layer.getSaturation() - 0.25, 0));
+  setResetSaturationButtonHTML();
 }, false);

examples/kml-timezones.html

@@ -0,0 +1,68 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="chrome=1">
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
+    <link rel="stylesheet" href="../resources/layout.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
+    <title>Timezones in KML</title>
+    <style>
+      #map {
+        position: relative;
+      }
+      #info {
+        position: absolute;
+        height: 1px;
+        width: 1px;
+        z-index: 100;
+      }
+    </style>
+  </head>
+  <body>
+
+    <div class="navbar navbar-inverse navbar-fixed-top">
+      <div class="navbar-inner">
+        <div class="container">
+          <a class="brand" href="./">OpenLayers 3 Examples</a>
+          <ul class="nav pull-right">
+            <li><iframe class="github-watch-button" src="http://ghbtns.com/github-btn.html?user=openlayers&repo=ol3&type=watch&count=true"
+  allowtransparency="true" frameborder="0" scrolling="0" height="20" width="90"></iframe></li>
+            <li><a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-hashtags="openlayers">&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 id="info"></div></div>
+        </div>
+      </div>
+
+      <div class="row-fluid">
+
+        <div class="span4">
+          <h4 id="title">Timezones in KML</h4>
+          <p id="shortdesc">Demonstrates rendering timezones from KML.</p>
+          <div id="docs">
+            <p>This example parses a KML file and renders the features as a vector layer.  The layer is given a <code>ol.style.Style</code> that fills timezones yellow with an opacity calculated based on the current offset to local noon.</p>
+            <p>See the <a href="kml-timezones.js" target="_blank">kml-timezones.js source</a> to see how this is done.</p>
+          </div>
+          <div id="tags">KML, vector, style</div>
+        </div>
+      </div>
+
+    </div>
+
+    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
+    <script src="loader.js?id=kml-timezones" type="text/javascript"></script>
+    <script src="../resources/social-links.js" type="text/javascript"></script>
+
+  </body>
+</html>

examples/kml-timezones.js

@@ -0,0 +1,123 @@
+goog.require('ol.Map');
+goog.require('ol.RendererHint');
+goog.require('ol.View2D');
+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');
+goog.require('ol.style.Rule');
+goog.require('ol.style.Style');
+
+
+/**
+ * Register a function to be used in a symbolizer.  Here we want the opacity
+ * of polygons to be based on the offset from local noon.  For example, a
+ * timezone where it is currently noon would have an opacity of 0.75.  And a
+ * timezone where it is currently midnight would have an opacity of 0.  This
+ * doesn't account for daylight savings, so don't use it to plan your vacation.
+ */
+ol.expr.register('getOpacity', function() {
+  var feature = this;
+  var offset = 0;
+  var name = feature.get('name'); // e.g. GMT -08:30
+  var match = name.match(/([-+]\d{2}):(\d{2})$/);
+  if (match) {
+    var hours = parseInt(match[1], 10);
+    var minutes = parseInt(match[2], 10);
+    offset = 60 * hours + minutes;
+  }
+  var date = new Date();
+  var local = new Date(date.getTime() +
+      (date.getTimezoneOffset() + offset) * 60000);
+  // offset from local noon (in hours)
+  var delta = Math.abs(12 - local.getHours() + (local.getMinutes() / 60));
+  if (delta > 12) {
+    delta = 24 - delta;
+  }
+  return 0.75 * (1 - delta / 12);
+});
+
+var style = new ol.style.Style({rules: [
+  new ol.style.Rule({
+    symbolizers: [
+      new ol.style.Polygon({
+        fillColor: '#ffff33',
+        strokeColor: '#ffffff',
+        opacity: ol.expr.parse('getOpacity()')
+      })
+    ]
+  })
+]});
+
+var vector = new ol.layer.Vector({
+  source: new ol.source.Vector({
+    projection: ol.proj.get('EPSG:4326')
+  }),
+  style: style
+});
+
+var raster = new ol.layer.TileLayer({
+  source: new ol.source.Stamen({
+    layer: 'toner'
+  })
+});
+
+var map = new ol.Map({
+  layers: [raster, vector],
+  renderer: ol.RendererHint.CANVAS,
+  target: 'map',
+  view: new ol.View2D({
+    center: [0, 0],
+    zoom: 2
+  })
+});
+
+var info = $('#info');
+info.tooltip({
+  animation: false,
+  trigger: 'manual'
+});
+map.on(['click', 'mousemove'], function(evt) {
+  var pixel = evt.getPixel();
+  info.css({
+    left: pixel[0] + 'px',
+    top: (pixel[1] - 15) + 'px'
+  });
+  map.getFeatures({
+    pixel: pixel,
+    layers: [vector],
+    success: function(layerFeatures) {
+      var feature = layerFeatures[0][0];
+      if (feature) {
+        info.tooltip('hide')
+            .attr('data-original-title', feature.get('name'))
+            .tooltip('fixTitle')
+            .tooltip('show');
+      } else {
+        info.tooltip('hide');
+      }
+    }
+  });
+});
+
+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

@@ -43,12 +43,16 @@
           </div>
           <div id="tags">KML</div>
         </div>
+        <div class="span4 pull-right">
+          <div id="info" class="alert alert-success">
+            &nbsp;
+          </div>
+        </div>
 
       </div>
 
     </div>
 
-    <script src="jquery.min.js" type="text/javascript"></script>
     <script src="loader.js?id=kml" type="text/javascript"></script>
     <script src="../resources/social-links.js" type="text/javascript"></script>
 

examples/kml.js

@@ -1,11 +1,10 @@
-goog.require('ol.Collection');
 goog.require('ol.Map');
 goog.require('ol.RendererHint');
 goog.require('ol.View2D');
 goog.require('ol.layer.TileLayer');
 goog.require('ol.layer.Vector');
 goog.require('ol.parser.KML');
-goog.require('ol.projection');
+goog.require('ol.proj');
 goog.require('ol.source.TiledWMS');
 goog.require('ol.source.Vector');
 
@@ -21,16 +20,23 @@ var raster = new ol.layer.TileLayer({
   })
 });
 
-var epsg4326 = ol.projection.get('EPSG:4326');
+var epsg4326 = ol.proj.get('EPSG:4326');
 
 var vector = new ol.layer.Vector({
   source: new ol.source.Vector({
     projection: epsg4326
-  })
+  }),
+  transformFeatureInfo: function(features) {
+    var info = [];
+    for (var i = 0, ii = features.length; i < ii; ++i) {
+      info.push(features[i].get('name'));
+    }
+    return info.join(', ');
+  }
 });
 
 var map = new ol.Map({
-  layers: new ol.Collection([raster, vector]),
+  layers: [raster, vector],
   renderer: ol.RendererHint.CANVAS,
   target: 'map',
   view: new ol.View2D({
@@ -43,8 +49,28 @@ var map = new ol.Map({
 var kml = new ol.parser.KML({
   maxDepth: 1, dimension: 2, extractStyles: true, extractAttributes: true});
 
-$.ajax({
+map.on(['click', 'mousemove'], function(evt) {
-  url: 'data/kml/lines.kml'
+  map.getFeatureInfo({
-}).done(function(data) {
+    pixel: evt.getPixel(),
-  vector.parseFeatures(data, kml, epsg4326);
+    layers: [vector],
+    success: function(featureInfo) {
+      document.getElementById('info').innerHTML = featureInfo[0] || '&nbsp';
+    }
+  });
 });
+
+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/mapquest.js

@@ -2,7 +2,7 @@ goog.require('ol.Map');
 goog.require('ol.RendererHints');
 goog.require('ol.View2D');
 goog.require('ol.layer.TileLayer');
-goog.require('ol.projection');
+goog.require('ol.proj');
 goog.require('ol.source.MapQuestOSM');
 
 
@@ -15,7 +15,7 @@ var map = new ol.Map({
   renderers: ol.RendererHints.createFromQueryData(),
   target: 'map',
   view: new ol.View2D({
-    center: ol.projection.transform(
+    center: ol.proj.transform(
         [139.6917, 35.689506], 'EPSG:4326', 'EPSG:3857'),
     zoom: 9
   })

examples/mobile-full-screen.html

@@ -0,0 +1,27 @@
+<!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">
+    <title>Mobile full screen example</title>
+    <style type="text/css">
+      html, body, .map {
+        margin: 0;
+        padding: 0;
+        width: 100%;
+        height: 100%;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="map" class="map"></div>
+    <script src="loader.js?id=mobile-full-screen" type="text/javascript"></script>
+
+    <div style="display: none;">
+      <div id="title">Mobile full screen example</div>
+      <div id="shortdesc">Example of a full screen map.</div>
+      <div id="tags">fullscreen, bing, geolocation, mobile</div>
+    </div>
+  </body>
+</html>

examples/mobile-full-screen.js

@@ -0,0 +1,35 @@
+goog.require('ol.Geolocation');
+goog.require('ol.Map');
+goog.require('ol.RendererHints');
+goog.require('ol.View2D');
+goog.require('ol.layer.TileLayer');
+goog.require('ol.source.BingMaps');
+
+
+var view = new ol.View2D({
+  center: [0, 0],
+  zoom: 2
+});
+
+var map = new ol.Map({
+  layers: [
+    new ol.layer.TileLayer({
+      source: new ol.source.BingMaps({
+        key: 'AlQLZ0-5yk301_ESrmNLma3LYxEKNSg7w-e_knuRfyYFtld-UFvXVs38NOulku3Q',
+        style: 'Road'
+      })
+    })
+  ],
+  renderers: ol.RendererHints.createFromQueryData(),
+  target: 'map',
+  view: view
+});
+
+var geolocation = new ol.Geolocation({
+  tracking: true
+});
+geolocation.bindTo('projection', view);
+geolocation.once('change:position', function() {
+  view.setCenter(geolocation.getPosition());
+  view.setResolution(2.388657133911758);
+});

examples/mouse-position.html

@@ -30,7 +30,6 @@
       <div class="row-fluid">
         <div class="span12">
           <div id="map" class="map"></div>
-          <small id="mouse-position"></small>
         </div>
       </div>
 
@@ -44,7 +43,23 @@
           </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">
+              <option value="EPSG:4326">EPSG:4326</option>
+              <option value="EPSG:3857">EPSG:3857</option>
+            </select>
+            <label>Precision </label>
+            <input id="precision" type="number" min="0" max="12" value="4"/>
+          </form>
+        </div>
       </div>
 
     </div>

examples/mouse-position.js

@@ -4,19 +4,23 @@ goog.require('ol.View2D');
 goog.require('ol.control.MousePosition');
 goog.require('ol.control.defaults');
 goog.require('ol.coordinate');
+goog.require('ol.dom.Input');
 goog.require('ol.layer.TileLayer');
+goog.require('ol.proj');
 goog.require('ol.source.OSM');
 
+var mousePositionControl = new ol.control.MousePosition({
+  coordinateFormat: ol.coordinate.createStringXY(4),
+  projection: 'EPSG:4326',
+  // comment the following two lines to have the mouse position
+  // be placed within the map.
+  className: 'custom-mouse-position',
+  target: document.getElementById('mouse-position'),
+  undefinedHTML: ' '
+});
 
 var map = new ol.Map({
-  controls: ol.control.defaults({}, [
+  controls: ol.control.defaults({}, [mousePositionControl]),
-    new ol.control.MousePosition({
-      coordinateFormat: ol.coordinate.toStringHDMS,
-      projection: 'EPSG:4326',
-      target: document.getElementById('mouse-position'),
-      undefinedHTML: ' '
-    })
-  ]),
   layers: [
     new ol.layer.TileLayer({
       source: new ol.source.OSM()
@@ -29,3 +33,14 @@ var map = new ol.Map({
     zoom: 2
   })
 });
+
+var projectionSelect = new ol.dom.Input(document.getElementById('projection'));
+projectionSelect.on('change:value', function() {
+  mousePositionControl.setProjection(ol.proj.get(projectionSelect.getValue()));
+});
+
+var precisionInput = new ol.dom.Input(document.getElementById('precision'));
+precisionInput.on('change:value', function() {
+  var format = ol.coordinate.createStringXY(precisionInput.getValue());
+  mousePositionControl.setCoordinateFormat(format);
+});

examples/overlay.html

@@ -49,9 +49,10 @@
 
         <div class="span4">
           <h4 id="title">Overlay example</h4>
-          <p id="shortdesc">Demonstrates overlays. The popups are created using
+          <p id="shortdesc">Demonstrates overlays.</p>
-            <a href="http://twitter.github.com/bootstrap/javascript.html#popovers">Popovers</a> from Bootstrap.</p>
           <div id="docs">
+            <p>The popups are created using
+              <a href="http://twitter.github.com/bootstrap/javascript.html#popovers">Popovers</a> from Bootstrap.</p>
             <p>See the <a href="overlay.js" target="_blank">overlay.js source</a> to see how this is done.</p>
           </div>
           <div id="tags">overlay, popup, bootstrap, popover, mapquest, openaerial</div>

examples/overlay.js

@@ -4,7 +4,7 @@ goog.require('ol.RendererHints');
 goog.require('ol.View2D');
 goog.require('ol.coordinate');
 goog.require('ol.layer.TileLayer');
-goog.require('ol.projection');
+goog.require('ol.proj');
 goog.require('ol.source.MapQuestOpenAerial');
 
 
@@ -25,7 +25,7 @@ var map = new ol.Map({
 // Vienna label
 var vienna = new ol.Overlay({
   map: map,
-  position: ol.projection.transform(
+  position: ol.proj.transform(
       [16.3725, 48.208889], 'EPSG:4326', 'EPSG:3857'),
   element: document.getElementById('vienna')
 });
@@ -38,7 +38,7 @@ var popup = new ol.Overlay({
 map.on('click', function(evt) {
   var element = popup.getElement();
   var coordinate = evt.getCoordinate();
-  var hdms = ol.coordinate.toStringHDMS(ol.projection.transform(
+  var hdms = ol.coordinate.toStringHDMS(ol.proj.transform(
       coordinate, 'EPSG:3857', 'EPSG:4326'));
 
   $(element).popover('destroy');

examples/preload.html

@@ -40,8 +40,9 @@
 
         <div class="span4">
           <h4 id="title">Preload example</h4>
-          <p id="shortdesc">Example of tile preloading.  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 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>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/rotation.html

@@ -37,8 +37,9 @@
 
         <div class="span4">
           <h4 id="title">Rotation example</h4>
-          <p id="shortdesc">Example of a rotated map.  Use <code>Alt</code>+<code>Shift</code>+drag to rotate the map.</p>
+          <p id="shortdesc">Example of a rotated map.</p>
           <div id="docs">
+            <p>Use <code>Alt</code>+<code>Shift</code>+drag to rotate the map.</p>
             <p>See the <a href="rotation.js" target="_blank">rotation.js source</a> to see how this is done.</p>
           </div>
           <div id="tags">rotation, openstreetmap</div>

examples/scale-line.html

@@ -30,6 +30,11 @@
       <div class="row-fluid">
         <div class="span12">
           <div id="map" class="map"></div>
+          <select id="units">
+            <option value="degrees">degrees</option>
+            <option value="imperial">imperial</option>
+            <option value="metric">metric</option>
+          </select>
         </div>
       </div>
 

examples/scale-line.js

@@ -2,17 +2,17 @@ goog.require('ol.Map');
 goog.require('ol.RendererHints');
 goog.require('ol.View2D');
 goog.require('ol.control.ScaleLine');
-goog.require('ol.control.ScaleLineUnits');
 goog.require('ol.control.defaults');
+goog.require('ol.dom.Input');
 goog.require('ol.layer.TileLayer');
 goog.require('ol.source.OSM');
 
 
+var scaleLineControl = new ol.control.ScaleLine();
+
 var map = new ol.Map({
   controls: ol.control.defaults({}, [
-    new ol.control.ScaleLine({
+    scaleLineControl
-      units: ol.control.ScaleLineUnits.IMPERIAL
-    })
   ]),
   layers: [
     new ol.layer.TileLayer({
@@ -26,3 +26,7 @@ var map = new ol.Map({
     zoom: 2
   })
 });
+
+
+var unitsSelect = new ol.dom.Input(document.getElementById('units'));
+unitsSelect.bindTo('value', scaleLineControl, 'units');

examples/semi-transparent-layer.js

@@ -2,7 +2,7 @@ goog.require('ol.Map');
 goog.require('ol.RendererHints');
 goog.require('ol.View2D');
 goog.require('ol.layer.TileLayer');
-goog.require('ol.projection');
+goog.require('ol.proj');
 goog.require('ol.source.MapQuestOpenAerial');
 goog.require('ol.source.TileJSON');
 
@@ -22,8 +22,7 @@ var map = new ol.Map({
   renderers: ol.RendererHints.createFromQueryData(),
   target: 'map',
   view: new ol.View2D({
-    center: ol.projection.transform(
+    center: ol.proj.transform([-77.93255, 37.9555], 'EPSG:4326', 'EPSG:3857'),
-        [-77.93255, 37.9555], 'EPSG:4326', 'EPSG:3857'),
     zoom: 5
   })
 });

examples/stamen.js

@@ -2,7 +2,7 @@ goog.require('ol.Map');
 goog.require('ol.RendererHints');
 goog.require('ol.View2D');
 goog.require('ol.layer.TileLayer');
-goog.require('ol.projection');
+goog.require('ol.proj');
 goog.require('ol.source.Stamen');
 
 
@@ -22,7 +22,7 @@ var map = new ol.Map({
   renderers: ol.RendererHints.createFromQueryData(),
   target: 'map',
   view: new ol.View2D({
-    center: ol.projection.transform(
+    center: ol.proj.transform(
         [-122.416667, 37.783333], 'EPSG:4326', 'EPSG:3857'),
     zoom: 12
   })

examples/style-rules.js

@@ -1,36 +1,32 @@
-goog.require('ol.Collection');
-goog.require('ol.Expression');
 goog.require('ol.Map');
 goog.require('ol.RendererHint');
 goog.require('ol.View2D');
 goog.require('ol.control.defaults');
-goog.require('ol.filter.Filter');
+goog.require('ol.expr');
 goog.require('ol.layer.Vector');
 goog.require('ol.parser.GeoJSON');
-goog.require('ol.projection');
+goog.require('ol.proj');
 goog.require('ol.source.Vector');
 goog.require('ol.style.Line');
 goog.require('ol.style.Rule');
+goog.require('ol.style.Shape');
 goog.require('ol.style.Style');
+goog.require('ol.style.Text');
 
 
 var style = new ol.style.Style({rules: [
   new ol.style.Rule({
-    filter: new ol.filter.Filter(function(feature) {
+    filter: 'where == "outer"',
-      return feature.get('where') == 'outer';
-    }),
     symbolizers: [
       new ol.style.Line({
-        strokeColor: new ol.Expression('color'),
+        strokeColor: ol.expr.parse('color'),
         strokeWidth: 4,
         opacity: 1
       })
     ]
   }),
   new ol.style.Rule({
-    filter: new ol.filter.Filter(function(feature) {
+    filter: 'where == "inner"',
-      return feature.get('where') == 'inner';
-    }),
     symbolizers: [
       new ol.style.Line({
         strokeColor: '#013',
@@ -38,18 +34,33 @@ var style = new ol.style.Style({rules: [
         opacity: 1
       }),
       new ol.style.Line({
-        strokeColor: new ol.Expression('color'),
+        strokeColor: ol.expr.parse('color'),
         strokeWidth: 2,
         opacity: 1
       })
     ]
+  }),
+  new ol.style.Rule({
+    filter: 'geometryType("point")',
+    symbolizers: [
+      new ol.style.Shape({
+        size: 40,
+        fillColor: '#013'
+      }),
+      new ol.style.Text({
+        color: '#bada55',
+        text: ol.expr.parse('label'),
+        fontFamily: 'Calibri,sans-serif',
+        fontSize: 14
+      })
+    ]
   })
 ]});
 
 var vector = new ol.layer.Vector({
   style: style,
   source: new ol.source.Vector({
-    projection: ol.projection.get('EPSG:3857')
+    projection: ol.proj.get('EPSG:3857')
   })
 });
 
@@ -115,8 +126,44 @@ vector.parseFeatures({
       'type': 'LineString',
       'coordinates': [[10000000, -10000000], [-10000000, -10000000]]
     }
+  }, {
+    'type': 'Feature',
+    'properties': {
+      'label': 'South'
+    },
+    'geometry': {
+      'type': 'Point',
+      'coordinates': [0, -6000000]
+    }
+  }, {
+    'type': 'Feature',
+    'properties': {
+      'label': 'West'
+    },
+    'geometry': {
+      'type': 'Point',
+      'coordinates': [-6000000, 0]
+    }
+  }, {
+    'type': 'Feature',
+    'properties': {
+      'label': 'North'
+    },
+    'geometry': {
+      'type': 'Point',
+      'coordinates': [0, 6000000]
+    }
+  }, {
+    'type': 'Feature',
+    'properties': {
+      'label': 'East'
+    },
+    'geometry': {
+      'type': 'Point',
+      'coordinates': [6000000, 0]
+    }
   }]
-}, new ol.parser.GeoJSON(), ol.projection.get('EPSG:3857'));
+}, new ol.parser.GeoJSON(), ol.proj.get('EPSG:3857'));
 
 
 var map = new ol.Map({

examples/teleport.html

@@ -0,0 +1,65 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="chrome=1">
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../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>Teleport 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="span8">
+          <div id="map1" class="map"></div>
+        </div>
+        <div class="span4">
+          <div id="map2" class="map"></div>
+        </div>
+      </div>
+
+      <div class="row-fluid">
+        <div class="span12">
+          <a id="teleport" href="#" class="btn">Teleport</a>
+        </div>
+      </div>
+
+      <div class="row-fluid">
+
+        <div class="span6">
+          <h4 id="title">Teleport example</h4>
+          <p id="shortdesc">Example of moving a map from one target to another.</p>
+          <div id="docs">
+            <p>Click on the Teleport button below the map to move the map from one target to another.</p>
+            <p>See the <a href="teleport.js" target="_blank">teleport.js source</a> to see how this is done.</p>
+          </div>
+          <div id="tags">teleport, openstreetmap</div>
+        </div>
+
+      </div>
+
+    </div>
+
+    <script src="loader.js?id=teleport" type="text/javascript"></script>
+    <script src="../resources/social-links.js" type="text/javascript"></script>
+
+  </body>
+</html>

examples/teleport.js

@@ -0,0 +1,28 @@
+goog.require('ol.Map');
+goog.require('ol.RendererHints');
+goog.require('ol.View2D');
+goog.require('ol.layer.TileLayer');
+goog.require('ol.source.OSM');
+
+
+var map = new ol.Map({
+  layers: [
+    new ol.layer.TileLayer({
+      source: new ol.source.OSM()
+    })
+  ],
+  renderers: ol.RendererHints.createFromQueryData(),
+  view: new ol.View2D({
+    center: [0, 0],
+    zoom: 2
+  })
+});
+
+map.setTarget('map1');
+
+var teleportButton = document.getElementById('teleport');
+
+teleportButton.addEventListener('click', function() {
+  var target = map.getTarget().id === 'map1' ? 'map2' : 'map1';
+  map.setTarget(target);
+}, false);

examples/ten-thousand-points.html

@@ -0,0 +1,55 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="chrome=1">
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
+    <link rel="stylesheet" href="../resources/layout.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
+    <title>Ten thousand points example</title>
+  </head>
+  <body>
+
+    <div class="navbar navbar-inverse navbar-fixed-top">
+      <div class="navbar-inner">
+        <div class="container">
+          <a class="brand" href="example-list.html">OpenLayers 3 Examples</a>
+          <ul class="nav pull-right">
+            <li><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="span4">
+          <h4 id="title">Ten thousand points example</h4>
+          <p id="shortdesc">Example of a map with ten thousand points.</p>
+          <div id="docs">
+            <p>See the <a href="ten-thousand-points.js" target="_blank">ten-thousand-points.js source</a> to see how this is done.</p>
+          </div>
+          <div id="tags">points, vector, openstreetmap</div>
+        </div>
+
+      </div>
+
+    </div>
+
+    <script src="loader.js?id=ten-thousand-points" type="text/javascript"></script>
+    <script src="../resources/social-links.js" type="text/javascript"></script>
+
+  </body>
+</html>

examples/ten-thousand-points.js

@@ -0,0 +1,68 @@
+goog.require('ol.Map');
+goog.require('ol.RendererHint');
+goog.require('ol.View2D');
+goog.require('ol.control.MousePosition');
+goog.require('ol.control.defaults');
+goog.require('ol.geom2.LineStringCollection');
+goog.require('ol.geom2.PointCollection');
+goog.require('ol.layer.TileLayer');
+goog.require('ol.layer.VectorLayer2');
+goog.require('ol.source.OSM');
+goog.require('ol.source.VectorSource2');
+
+
+// WARNING
+// This example is an experimental testbed for WebGL vector work.  The function
+// calls used here are internal and low-level and are not representative of the
+// final API.
+
+
+var pointCollection = ol.geom2.PointCollection.createEmpty(101 * 101);
+var i, j, x, y;
+for (i = 0; i < 101; ++i) {
+  for (j = 0; j < 101; ++j) {
+    x = 20000000 * (i - 50) / 50;
+    y = 20000000 * (j - 50) / 50;
+    pointCollection.add([x, y]);
+  }
+}
+
+var k = 1000000;
+var lineStringCollection = ol.geom2.LineStringCollection.pack([
+  [[-20 * k, -20 * k], [20 * k, 20 * k]],
+  [[-20 * k, 20 * k], [20 * k, -20 * k]],
+  [[0 * k, 15 * k],
+   [10 * k, 5 * k],
+   [5 * k, 5 * k],
+   [5 * k, -15 * k],
+   [-5 * k, -15 * k],
+   [-5 * k, 5 * k],
+   [-10 * k, 5 * k],
+   [0 * k, 15 * k]]
+]);
+
+var map = new ol.Map({
+  controls: ol.control.defaults({}, [
+    new ol.control.MousePosition({
+      undefinedHTML: '&nbsp;'
+    })
+  ]),
+  layers: [
+    new ol.layer.TileLayer({
+      source: new ol.source.OSM()
+    }),
+    new ol.layer.VectorLayer2({
+      source: new ol.source.VectorSource2({
+        lineStringCollections: [lineStringCollection],
+        projection: 'EPSG:3857',
+        pointCollections: [pointCollection]
+      })
+    })
+  ],
+  renderer: ol.RendererHint.WEBGL,
+  target: 'map',
+  view: new ol.View2D({
+    center: [0, 0],
+    zoom: 0
+  })
+});

examples/vector-layer.html

@@ -37,12 +37,17 @@
 
         <div class="span4">
           <h4 id="title">Vector layer example</h4>
-          <p id="shortdesc">Example of a vector layer.</p>
+          <p id="shortdesc">Example of a countries vector layer with country information on hover and country labels at higher zoom levels.</p>
           <div id="docs">
             <p>See the <a href="vector-layer.js" target="_blank">vector-layer.js source</a> to see how this is done.</p>
           </div>
           <div id="tags">vector, geojson, style</div>
         </div>
+        <div class="span4 pull-right">
+          <div id="info" class="alert alert-success">
+            &nbsp;
+          </div>
+        </div>
 
       </div>
 

examples/vector-layer.js

@@ -1,25 +1,31 @@
-goog.require('ol.Collection');
 goog.require('ol.Map');
 goog.require('ol.RendererHint');
 goog.require('ol.View2D');
+goog.require('ol.expr');
 goog.require('ol.layer.TileLayer');
 goog.require('ol.layer.Vector');
 goog.require('ol.parser.GeoJSON');
-goog.require('ol.projection');
+goog.require('ol.proj');
 goog.require('ol.source.MapQuestOpenAerial');
 goog.require('ol.source.Vector');
 goog.require('ol.style.Polygon');
 goog.require('ol.style.Rule');
 goog.require('ol.style.Style');
+goog.require('ol.style.Text');
 
 
 var raster = new ol.layer.TileLayer({
   source: new ol.source.MapQuestOpenAerial()
 });
 
+// TODO: discuss scale dependent rules
+ol.expr.register('resolution', function() {
+  return map.getView().getView2D().getResolution();
+});
+
 var vector = new ol.layer.Vector({
   source: new ol.source.Vector({
-    projection: ol.projection.get('EPSG:4326')
+    projection: ol.proj.get('EPSG:4326')
   }),
   style: new ol.style.Style({rules: [
     new ol.style.Rule({
@@ -28,12 +34,27 @@ var vector = new ol.layer.Vector({
           strokeColor: '#bada55'
         })
       ]
+    }),
+    new ol.style.Rule({
+      filter: 'resolution() < 5000',
+      symbolizers: [
+        new ol.style.Text({
+          color: '#bada55',
+          text: ol.expr.parse('name'),
+          fontFamily: 'Calibri,sans-serif',
+          fontSize: 12
+        })
+      ]
     })
-  ]})
+  ]}),
+  transformFeatureInfo: function(features) {
+    return features.length > 0 ?
+        features[0].getFeatureId() + ': ' + features[0].get('name') : '&nbsp;';
+  }
 });
 
 var map = new ol.Map({
-  layers: new ol.Collection([raster, vector]),
+  layers: [raster, vector],
   renderer: ol.RendererHint.CANVAS,
   target: 'map',
   view: new ol.View2D({
@@ -42,9 +63,19 @@ var map = new ol.Map({
   })
 });
 
+map.on(['click', 'mousemove'], function(evt) {
+  map.getFeatureInfo({
+    pixel: evt.getPixel(),
+    layers: [vector],
+    success: function(featureInfo) {
+      document.getElementById('info').innerHTML = featureInfo[0];
+    }
+  });
+});
+
 
 var geojson = new ol.parser.GeoJSON();
-var url = 'data/countries.json';
+var url = 'data/countries.geojson';
 var xhr = new XMLHttpRequest();
 xhr.open('GET', url, true);
 

examples/wms-custom-proj.html

@@ -7,7 +7,7 @@
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
     <link rel="stylesheet" href="../resources/layout.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
-    <title>Tiled WMS with custom projection example</title>
+    <title>Tiled WMS with Proj4js projection example</title>
   </head>
   <body>
 
@@ -36,12 +36,12 @@
       <div class="row-fluid">
 
         <div class="span4">
-          <h4 id="title">Tiled WMS with custom projection example</h4>
+          <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">
             <p>See the <a href="wms-custom-proj.js" target="_blank">wms-custom-proj.js source</a> to see how this is done.</p>
           </div>
-          <div id="tags">wms, tile, tilelayer, projection</div>
+          <div id="tags">wms, tile, tilelayer, proj4js, projection</div>
         </div>
 
       </div>

examples/wms-custom-proj.js

@@ -1,5 +1,4 @@
 goog.require('ol.Attribution');
-goog.require('ol.Extent');
 goog.require('ol.Map');
 goog.require('ol.RendererHints');
 goog.require('ol.View2D');
@@ -7,16 +6,16 @@ goog.require('ol.control.ScaleLine');
 goog.require('ol.control.ScaleLineUnits');
 goog.require('ol.control.defaults');
 goog.require('ol.layer.TileLayer');
-goog.require('ol.projection');
+goog.require('ol.proj');
 goog.require('ol.source.TiledWMS');
 
 
-var projection = ol.projection.configureProj4jsProjection({
+var projection = ol.proj.configureProj4jsProjection({
   code: 'EPSG:21781',
-  extent: new ol.Extent(485869.5728, 76443.1884, 837076.5648, 299941.7864)
+  extent: [485869.5728, 837076.5648, 76443.1884, 299941.7864]
 });
 
-var extent = new ol.Extent(420000, 30000, 900000, 350000);
+var extent = [420000, 900000, 30000, 350000];
 var layers = [
   new ol.layer.TileLayer({
     source: new ol.source.TiledWMS({

examples/wms-no-proj.html

@@ -0,0 +1,55 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="chrome=1">
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
+    <link rel="stylesheet" href="../resources/layout.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
+    <title>WMS without client projection 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="span4">
+          <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">
+            <p>See the <a href="wms-no-proj.js" target="_blank">wms-no-proj.js source</a> to see how this is done.</p>
+          </div>
+          <div id="tags">wms, projection</div>
+        </div>
+
+      </div>
+
+    </div>
+
+    <script src="loader.js?id=wms-no-proj" type="text/javascript"></script>
+    <script src="../resources/social-links.js" type="text/javascript"></script>
+
+  </body>
+</html>

examples/wms-no-proj.js

@@ -0,0 +1,58 @@
+goog.require('ol.Attribution');
+goog.require('ol.Map');
+goog.require('ol.Projection');
+goog.require('ol.ProjectionUnits');
+goog.require('ol.RendererHints');
+goog.require('ol.View2D');
+goog.require('ol.layer.ImageLayer');
+goog.require('ol.layer.TileLayer');
+goog.require('ol.source.SingleImageWMS');
+goog.require('ol.source.TiledWMS');
+
+
+var layers = [
+  new ol.layer.TileLayer({
+    source: new ol.source.TiledWMS({
+      attributions: [new ol.Attribution(
+          '© ' +
+          '<a href="http://www.geo.admin.ch/internet/geoportal/en/home.html">' +
+          'Pixelmap 1:1000000 / geo.admin.ch</a>')],
+      crossOrigin: 'anonymous',
+      params: {
+        'LAYERS': 'ch.swisstopo.pixelkarte-farbe-pk1000.noscale',
+        'FORMAT': 'image/jpeg'
+      },
+      url: 'http://wms.geo.admin.ch/'
+    })
+  }),
+  new ol.layer.ImageLayer({
+    source: new ol.source.SingleImageWMS({
+      attributions: [new ol.Attribution(
+          '&copy; ' +
+          '<a href="http://www.geo.admin.ch/internet/geoportal/en/home.html">' +
+          'National parks / geo.admin.ch</a>')],
+      crossOrigin: 'anonymous',
+      params: {'LAYERS': 'ch.bafu.schutzgebiete-paerke_nationaler_bedeutung'},
+      url: 'http://wms.geo.admin.ch/'
+    })
+  })
+];
+
+// A minimal projection object is configured with only the SRS code and the map
+// units. No client side coordinate transforms are possible with such a
+// projection object.
+var projection = new ol.Projection({
+  code: 'EPSG:21781',
+  units: ol.ProjectionUnits.METERS
+});
+
+var map = new ol.Map({
+  layers: layers,
+  renderers: ol.RendererHints.createFromQueryData(),
+  target: 'map',
+  view: new ol.View2D({
+    center: [660000, 190000],
+    projection: projection,
+    zoom: 9
+  })
+});

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

@@ -37,8 +37,9 @@
 
         <div class="span4">
           <h4 id="title">Single image WMS with custom projection example</h4>
-          <p id="shortdesc">Example of two single image WMS layers (Pixelmap 1:1'000'000 and national parks) using the projection EPSG:21781.</p>
+          <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>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-custom-proj.js

@@ -1,19 +1,18 @@
 goog.require('ol.Attribution');
-goog.require('ol.Extent');
 goog.require('ol.Map');
 goog.require('ol.RendererHints');
 goog.require('ol.View2D');
 goog.require('ol.layer.ImageLayer');
-goog.require('ol.projection');
+goog.require('ol.proj');
 goog.require('ol.source.SingleImageWMS');
 
 
-var projection = ol.projection.configureProj4jsProjection({
+var projection = ol.proj.configureProj4jsProjection({
   code: 'EPSG:21781',
-  extent: new ol.Extent(485869.5728, 76443.1884, 837076.5648, 299941.7864)
+  extent: [485869.5728, 837076.5648, 76443.1884, 299941.7864]
 });
 
-var extent = new ol.Extent(420000, 30000, 900000, 350000);
+var extent = [420000, 900000, 30000, 350000];
 var layers = [
   new ol.layer.ImageLayer({
     source: new ol.source.SingleImageWMS({

examples/wms-single-image.js

@@ -1,4 +1,3 @@
-goog.require('ol.Extent');
 goog.require('ol.Map');
 goog.require('ol.RendererHint');
 goog.require('ol.View2D');
@@ -16,7 +15,7 @@ var layers = [
     source: new ol.source.SingleImageWMS({
       url: 'http://demo.opengeo.org/geoserver/wms',
       params: {'LAYERS': 'topp:states'},
-      extent: new ol.Extent(-13884991, 2870341, -7455066, 6338219)
+      extent: [-13884991, -7455066, 2870341, 6338219]
     })
   })
 ];

examples/wms-tiled.js

@@ -1,4 +1,3 @@
-goog.require('ol.Extent');
 goog.require('ol.Map');
 goog.require('ol.RendererHint');
 goog.require('ol.View2D');
@@ -15,7 +14,7 @@ var layers = [
     source: new ol.source.TiledWMS({
       url: 'http://demo.opengeo.org/geoserver/wms',
       params: {'LAYERS': 'topp:states', 'TILED': true},
-      extent: new ol.Extent(-13884991, 2870341, -7455066, 6338219)
+      extent: [-13884991, -7455066, 2870341, 6338219]
     })
   })
 ];

examples/wmts-capabilities.js

@@ -1,7 +1,7 @@
 goog.require('ol.parser.ogc.WMTSCapabilities');
-goog.require('ol.projection.addCommonProjections');
+goog.require('ol.proj.addCommonProjections');
 
-ol.projection.addCommonProjections();
+ol.proj.addCommonProjections();
 Proj4js.defs['EPSG:31256'] = '+proj=tmerc +lat_0=0 ' +
     '+lon_0=16.33333333333333 +k=1 +x_0=0 +y_0=-5000000 +ellps=bessel ' +
     '+towgs84=577.326,90.129,463.919,5.137,1.474,5.297,2.4232 ' +

examples/wmts-ign.html

@@ -0,0 +1,64 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="chrome=1">
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../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>IGN WMTS example</title>
+    <style>
+      .ol-logo ul li {
+        margin-right: 3px;
+      }
+    </style>
+  </head>
+  <body>
+
+    <div class="navbar navbar-inverse navbar-fixed-top">
+      <div class="navbar-inner">
+        <div class="container">
+          <a class="brand" href="./">OpenLayers 3 Examples</a>
+          <ul class="nav pull-right">
+            <li><iframe class="github-watch-button" src="http://ghbtns.com/github-btn.html?user=openlayers&repo=ol3&type=watch&count=true"
+  allowtransparency="true" frameborder="0" scrolling="0" height="20" width="90"></iframe></li>
+            <li><a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-hashtags="openlayers">&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">IGN WMTS example</h4>
+          <p id="shortdesc">Demonstrates displaying IGN (France) WMTS layers.</p>
+          <div id="docs">
+            <p>In this example two IGN WMTS layers are displayed: <em>Ortho imagery and Cadastral parcels.</em>.
+            For more information on IGN's WMTS service see the
+            <a href="http://professionnels.ign.fr/api-sig">IGN Géoportail API web page</a> (french).</p>
+            <p>See the <a href="wmts-ign.js" target="_blank">wmts-ign.js source</a> to see how this is done.</p>
+          </div>
+          <div id="tags">french, ign, geoportail, wmts</div>
+        </div>
+
+      </div>
+
+    </div>
+
+    <script src="http://cdnjs.cloudflare.com/ajax/libs/proj4js/1.1.0/proj4js-compressed.js" type="text/javascript"></script>
+    <script src="loader.js?id=wmts-ign" type="text/javascript"></script>
+    <script src="../resources/social-links.js" type="text/javascript"></script>
+
+  </body>
+</html>

examples/wmts-ign.js

@@ -0,0 +1,83 @@
+goog.require('ol.Attribution');
+goog.require('ol.Map');
+goog.require('ol.RendererHint');
+goog.require('ol.View2D');
+goog.require('ol.layer.TileLayer');
+goog.require('ol.parser.ogc.WMTSCapabilities');
+goog.require('ol.source.WMTS');
+
+
+// The WMTS Capabilities document includes IGNF:WGS84G as a supported
+// CRS. We include the Proj4js definition of that projection to prevent
+// Proj4js from requesting that definition from spatialreference.org.
+
+Proj4js.defs['IGNF:WGS84G'] = '+title=World Geodetic System 1984 ' +
+    '+proj=longlat +towgs84=0.0000,0.0000,0.0000,0.0000,0.0000,0.0000,' +
+    '0.000000 +a=6378137.0000 +rf=298.2572221010000 +units=m +no_defs <>';
+
+// API key valid for "localhost" and "ol3js.org". Expiration date
+// is 21/06/2014.
+var key = 'crrypaoz7j1ifbalcobnumb0';
+
+var map = new ol.Map({
+  renderer: ol.RendererHint.CANVAS,
+  target: 'map'
+});
+
+var xhr = new XMLHttpRequest();
+
+// data/IGNWMTSCapabilities.xml downloaded from
+// http://wxs.ign.fr/cle/geoportail/wmts?SERVICE=WMTS&REQUEST=GetCapabilities
+// Stored locally because of the Same Origin Policy.
+xhr.open('GET', 'data/IGNWMTSCapabilities.xml', true);
+
+
+/**
+ * onload handler for the XHR request.
+ */
+xhr.onload = function() {
+  if (xhr.status == 200) {
+    var parser = new ol.parser.ogc.WMTSCapabilities();
+    var capabilities = parser.read(xhr.responseXML);
+
+    var wmtsUrl = 'http://wxs.ign.fr/' + key + '/geoportail/wmts';
+
+    var layerIdentifiers = [
+      'ORTHOIMAGERY.ORTHOPHOTOS',
+      'CADASTRALPARCELS.PARCELS'
+    ];
+    var layerLogos = [
+      'http://gpp3-wxs.ign.fr/static/logos/PLANETOBSERVER/PLANETOBSERVER.gif',
+      'http://gpp3-wxs.ign.fr/static/logos/IGN/IGN.gif'
+    ];
+
+    var attribution = new ol.Attribution(
+        '<a href="http://www.geoportail.fr/" target="_blank">' +
+        '<img src="http://api.ign.fr/geoportail/api/js/latest/' +
+        'theme/geoportal/img/logo_gp.gif"></a>');
+
+    var sourceOptions;
+    var source;
+    var layer;
+    var i;
+
+    for (i = 0; i < layerIdentifiers.length; ++i) {
+      sourceOptions = ol.source.WMTS.optionsFromCapabilities(
+          capabilities, layerIdentifiers[i]);
+      // we need to set the URL because it must include the key.
+      sourceOptions.urls = [wmtsUrl];
+      sourceOptions.attributions = [attribution];
+      sourceOptions.logo = layerLogos[i];
+      source = new ol.source.WMTS(sourceOptions);
+      layer = new ol.layer.TileLayer({source: source});
+      map.addLayer(layer);
+    }
+
+    var view = new ol.View2D();
+    view.fitExtent([257596.65942095537, 262082.55751844167,
+      6250898.984085131, 6251854.446938695], map.getSize());
+    map.setView(view);
+  }
+};
+
+xhr.send();

examples/wmts.js

@@ -1,17 +1,17 @@
-goog.require('ol.Extent');
 goog.require('ol.Map');
 goog.require('ol.RendererHint');
 goog.require('ol.View2D');
+goog.require('ol.extent');
 goog.require('ol.layer.TileLayer');
-goog.require('ol.projection');
+goog.require('ol.proj');
 goog.require('ol.source.OSM');
 goog.require('ol.source.WMTS');
 goog.require('ol.tilegrid.WMTS');
 
 
-var projection = ol.projection.get('EPSG:900913');
+var projection = ol.proj.get('EPSG:900913');
 var projectionExtent = projection.getExtent();
-var size = projectionExtent.getWidth() / 256;
+var size = ol.extent.getWidth(projectionExtent) / 256;
 var resolutions = new Array(26);
 var matrixIds = new Array(26);
 for (var z = 0; z < 26; ++z) {
@@ -34,12 +34,12 @@ var map = new ol.Map({
         format: 'image/png',
         projection: projection,
         tileGrid: new ol.tilegrid.WMTS({
-          origin: projectionExtent.getTopLeft(),
+          origin: ol.extent.getTopLeft(projectionExtent),
           resolutions: resolutions,
           matrixIds: matrixIds
         }),
         style: '_null',
-        extent: new ol.Extent(-13682835, 5204068, -13667473, 5221690)
+        extent: [-13682835, -13667473, 5204068, 5221690]
       })
     })
   ],

externs/oli.js

@@ -0,0 +1,29 @@
+/**
+ * @externs
+ */
+
+
+/**
+ * @type {Object}
+ */
+var oli;
+
+
+/**
+ * @interface
+ */
+oli.control.Control = function() {};
+
+
+/**
+ * @param {ol.MapEvent} mapEvent Map event.
+ * @return {undefined} Undefined.
+ */
+oli.control.Control.prototype.handleMapPostrender = function(mapEvent) {};
+
+
+/**
+ * @param {ol.Map} map Map.
+ * @return {undefined} Undefined.
+ */
+oli.control.Control.prototype.setMap = function(map) {};

externs/proj4js.js

@@ -76,6 +76,12 @@ Proj4js.Proj.prototype.units;
 Proj4js.Proj.prototype.srsCode;
 
 
+/**
+ * @type {number}
+ */
+Proj4js.Proj.prototype.to_meter;
+
+
 /**
  * @nosideeffects
  * @param {Proj4js.Proj} source

externs/w3c_device_sensor_event.js

@@ -0,0 +1,89 @@
+/*
+ * 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;

resources/layout.css

@@ -6,6 +6,7 @@ body {
 .map {
   height: 400px;
   width: 100%;
+  background: url(textured_paper.jpeg) repeat;
 }
 .ol-attribution {
   max-width: 50%;

src/goog.exports

@@ -1 +0,0 @@
-@exportSymbol goog.require goog.nullFunction

src/objectliterals.jsdoc

@@ -1,13 +1,55 @@
+/**
+ * @typedef {Object} ol.DeviceOrientationOptions
+ * @property {boolean|undefined} tracking Tracking.
+ */
+
+/**
+ * @typedef {Object} ol.GeolocationOptions
+ * @property {boolean|undefined} tracking Tracking.
+ * @property {GeolocationPositionOptions|undefined} trackingOptions Tracking options.
+ * @property {ol.ProjectionLike} projection Projection.
+ */
+
+/**
+ * @typedef {Object} ol.GetFeatureInfoOptions
+ * @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
+ *     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
+ *     `ol.Map#getLayers()` if no `layers` were provided.
+ * @property {function(Object)|undefined} error Callback for unsuccessful
+ *     queries. Note that queries with no matching features trigger the success
+ *     callback, not the error callback.
+ */
+
+/**
+ * @typedef {Object} ol.GetFeaturesOptions
+ * @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 layers will be queried if not provided.
+ * @property {function(Array.<Array.<ol.Feature|undefined>>)} success Callback
+ *     for successful queries. The passed argument is the resulting features for
+ *     each layer, with array indices being the same as in the passed `layers`
+ *     array or in the layer collection as returned from `ol.Map#getLayers()` if
+ *     no layers were provided.
+ * @property {function(Object)|undefined} error Callback for unsuccessful
+ *     queries. Note that queries with no matching features trigger the success
+ *     callback, not the error callback.
+ */
+
 /**
  * Object literal with config options for the map.
  * @typedef {Object} ol.MapOptions
- * @property {Array.<ol.control.Control>|undefined} controls Controls initially
+ * @property {ol.Collection|Array.<ol.control.Control>|undefined} controls
- *     added to the map.
+ *     Controls initially added to the map.
  * @property {ol.Collection|undefined} interactions Interactions.
  * @property {Array.<ol.layer.Layer>|ol.Collection|undefined} layers Layers.
  * @property {ol.RendererHint|undefined} renderer Renderer.
  * @property {Array.<ol.RendererHint>|undefined} renderers Renderers.
- * @property {Element|string} target The container for the map.
+ * @property {Element|string|undefined} target The container for the map.
  * @property {ol.IView|undefined} view The map's view. Currently
  *     {@link ol.View2D} is available as view.
  */
@@ -26,7 +68,7 @@
  * Object literal with config options for the Proj4js projection.
  * @typedef {Object} ol.Proj4jsProjectionOptions
  * @property {string} code The SRS identifier code, e.g. 'EPSG:31256'.
- * @property {ol.Extent} extent The validity extent for the SRS.
+ * @property {ol.Extent|undefined} extent The validity extent for the SRS.
  * @property {boolean|undefined} global Whether the projection is valid for the
  *     whole globe. Default is false.
  */
@@ -36,7 +78,7 @@
  * @typedef {Object} ol.ProjectionOptions
  * @property {string} code The SRS identifier code, e.g. 'EPSG:4326'.
  * @property {ol.ProjectionUnits} units Units.
- * @property {ol.Extent} extent The validity extent for the SRS.
+ * @property {ol.Extent|undefined} extent The validity extent for the SRS.
  * @property {string|undefined} axisOrientation The axis orientation as
  *     specified in Proj4. The default is 'enu'.
  * @property {boolean|undefined} global Whether the projection is valid for the
@@ -97,10 +139,18 @@
 
 /**
  * @typedef {Object} ol.control.AttributionOptions
+ * @property {string|undefined} className Class name.
  * @property {ol.Map|undefined} map Map.
  * @property {Element|undefined} target Target.
  */
 
+ /**
+  * @typedef {Object} ol.control.ControlOptions
+  * @property {Element|undefined} element Element.
+  * @property {ol.Map|undefined} map Map.
+  * @property {Element|undefined} target Target.
+  */
+
 /**
  * @typedef {Object} ol.control.DefaultsOptions
  * @property {boolean|undefined} attribution Attribution.
@@ -114,6 +164,7 @@
 
 /**
  * @typedef {Object} ol.control.FullScreenOptions
+ * @property {string|undefined} className Class name.
  * @property {boolean|undefined} keys Full keyboard access.
  * @property {ol.Map|undefined} map Map.
  * @property {Element|undefined} target Target.
@@ -121,12 +172,14 @@
 
 /**
  * @typedef {Object} ol.control.LogoOptions
+ * @property {string|undefined} className Class name.
  * @property {ol.Map|undefined} map Map.
  * @property {Element|undefined} target Target.
  */
 
 /**
  * @typedef {Object} ol.control.MousePositionOptions
+ * @property {string|undefined} className Class name.
  * @property {ol.CoordinateFormatType|undefined} coordinateFormat Coordinate
  *     format.
  * @property {ol.Map|undefined} map Map.
@@ -137,6 +190,7 @@
 
 /**
  * @typedef {Object} ol.control.ScaleLineOptions
+ * @property {string|undefined} className Class name.
  * @property {ol.Map|undefined} map Map.
  * @property {number|undefined} minWidth Minimum width in pixels.
  * @property {Element|undefined} target Target.
@@ -145,6 +199,7 @@
 
 /**
  * @typedef {Object} ol.control.ZoomOptions
+ * @property {string|undefined} className Class name.
  * @property {number|undefined} delta Delta.
  * @property {ol.Map|undefined} map Map.
  * @property {Element|undefined} target Target.
@@ -152,14 +207,44 @@
 
 /**
  * @typedef {Object} ol.control.ZoomSliderOptions
+ * @property {string|undefined} className Class name.
  * @property {ol.Map|undefined} map Map.
  * @property {number|undefined} maxResolution Maximum resolution.
  * @property {number|undefined} minResolution Minimum resolution.
  */
 
+/**
+ * @typedef {Object} ol.interaction.DoubleClickZoomOptions
+ * @property {number|undefined} delta The zoom delta applied on each double
+ *    click.
+ */
+
+/**
+ * @typedef {Object} ol.interaction.DragPanOptions
+ * @property {ol.Kinetic|undefined} kinetic Kinetic.
+ * @property {ol.interaction.ConditionType|undefined} condition Conditon.
+ */
+
+/**
+ * @typedef {Object} ol.interaction.DragRotateOptions
+ * @property {ol.interaction.ConditionType|undefined} condition Condition.
+ */
+
+/**
+ * @typedef {Object} ol.interaction.DragRotateAndZoomOptions
+ * @property {ol.interaction.ConditionType|undefined} condition Condition.
+ */
+
+/**
+ * @typedef {Object} ol.interaction.DragZoomOptions
+ * @property {ol.interaction.ConditionType|undefined} condition Condition.
+ */
+
 /**
  * Interactions for the map. Default is true for all options.
  * @typedef {Object} ol.interaction.DefaultsOptions
+ * @property {boolean|undefined} altShiftDragRotate Whether Alt-Shift-drag
+ *     rotate is desired.
  * @property {boolean|undefined} doubleClickZoom Whether double click zoom is
  *     desired.
  * @property {boolean|undefined} dragPan Whether drag-pan is desired.
@@ -173,18 +258,31 @@
  *     desired.
  * @property {boolean|undefined} touchRotate Whether touch rotate is desired.
  * @property {boolean|undefined} touchZoom Whether touch zoom is desired.
+ * @property {number|undefined} zoomDelta Zoom delta.
  */
 
 /**
  * @typedef {Object} ol.interaction.KeyboardPanOptions
+ * @property {ol.interaction.ConditionType|undefined} condition Condition.
  * @property {number|undefined} pixelDelta Pixel delta
  */
 
 /**
  * @typedef {Object} ol.interaction.KeyboardZoomOptions
+ * @property {ol.interaction.ConditionType|undefined} condition Condition.
  * @property {number|undefined} delta Delta.
  */
 
+/**
+ * @typedef {Object} ol.interaction.TouchPanOptions
+ * @property {ol.Kinetic|undefined} kinetic Kinetic.
+ */
+
+/**
+ * @typedef {Object} ol.interaction.TouchRotateOptions
+ * @property {number|undefined} threshold Minimal angle to start a rotation.
+ */
+
 /**
  * @typedef {Object} ol.layer.LayerOptions
  * @property {number|undefined} brightness Brightness.
@@ -210,12 +308,88 @@
 
 /**
  * @typedef {Object} ol.layer.VectorLayerOptions
+ * @property {function(Array.<ol.Feature>):string|undefined} transformFeatureInfo
+ *     Function to render an array of
+ *     features into feature info markup. If not provided, a comma separated
+ *     list of the unique ids of the resulting features will be returned.
  * @property {number|undefined} opacity Opacity. 0-1. Default is 1.
  * @property {ol.source.Source} source Source for this layer.
  * @property {ol.style.Style|undefined} style Style.
  * @property {boolean|undefined} visible Visibility. Default is true (visible).
  */
 
+/**
+ * @typedef {Object} ol.parser.KMLOptions
+ * @property {number|undefined} dimension Create geometries with `dimension`
+ *     dimensions. Default is 3.
+ * @property {boolean|undefined} extractAttributes Should we extract attributes
+ *     from the KML? Default is `true´.
+ * @property {boolean|undefined} extractStyles Should we extract styles from the
+ *     KML? Default is `false`.
+ * @property {number|undefined} maxDepth Maximum depth to follow network links.
+ *     Default is 0, which means we don't follow network links at all.
+ * @property {Array.<string>|undefined} trackAttributes Track attributes to
+ *     parse.
+ */
+
+/**
+ * @typedef {Object} ol.parser.GMLOptions
+ * @property {string|undefined} axisOrientation The axis orientation as
+ *     specified in Proj4. The default is 'enu'.
+ * @property {boolean|undefined} curve Write gml:Curve instead of
+ *     gml:LineString elements. This also affects the elements in multi-part
+ *     geometries. Default is `false´. This only applies to GML version 3.
+ * @property {boolean|undefined} extractAttributes Should we extract attributes
+ *     from the GML? Default is `true´.
+ * @property {string|undefined} featureNS The feature namespace. If not set it
+ *     will be automatically configured from the GML.
+ * @property {Array.<string>|string|undefined} featureType The local
+ *     (without prefix) feature typeName(s).
+ * @property {string|undefined} geometryName Name of geometry element.
+ *     Defaults to `geometry´. If null, it will be set on <read> when the
+ *     first geometry is parsed.
+ * @property {boolean|undefined} multiCurve Write gml:MultiCurve instead of
+ *     gml:MultiLineString. Since the latter is deprecated in GML 3, the
+ *     default is `true´. This only applies to GML version 3.
+ * @property {boolean|undefined} multiSurface Write gml:multiSurface instead
+ *     of gml:MultiPolygon. Since the latter is deprecated in GML 3, the
+ *     default is `true´. This only applies to GML version 3.
+ * @property {string|undefined} schemaLocation Optional schemaLocation to use
+ *     when writing out the GML, this will override the default provided.
+ * @property {string|undefined} srsName URI for spatial reference system.
+ *     This is optional for single part geometries and mandatory for
+ *     collections and multis. If set, the srsName attribute will be written
+ *     for all geometries. Default is null.
+ * @property {boolean|undefined} surface Write gml:Surface instead of
+ *     gml:Polygon elements. This also affects the elements in multi-part
+ *     geometries. Default is `false´. This only applies to GML version 3.
+ */
+
+/**
+ * @typedef {Object} ol.parser.GPXOptions
+ * @property {string|undefined} creator The creator attribute to be added to
+ *     the written GPX files. Defaults to `OpenLayers´.
+ * @property {string|undefined} defaultDesc Default description for the
+ *     waypoints/tracks in the case where the feature has no 'description'
+ *     attribute. Default is 'No description available'.
+ * @property {boolean|undefined} extractAttributes Should we extract attributes
+ *     from the GPX? Default is `true´.
+ * @property {boolean|undefined} extractWaypoints Extract waypoints from GPX.
+ *     Default is `true´.
+ * @property {boolean|undefined} extractTracks Extract tracks from GPX.
+ *     Default is `true´.
+ * @property {boolean|undefined} extractRoutes Extract routes from GPX.
+ *     Default is `true´.
+ */
+
+/**
+ * @typedef {Object} ol.parser.GPXWriteOptions
+ * @property {Array.<ol.Feature>|ol.Feature} features The features to write
+ *     out.
+ * @property {Object|undefined} metadata Metadata key/value pair with keys:
+ *     name, desc and author.
+ */
+
 /**
  * @typedef {Object} ol.source.BingMapsOptions
  * @property {string|undefined} culture Culture.
@@ -312,6 +486,17 @@
  *     of `url` when the WMS supports multiple urls for GetMap requests.
  */
 
+/**
+ * @typedef {Object} ol.source.VectorSource2Options
+ * @property {Array.<ol.Attribution>|undefined} attributions Attributions.
+ * @property {ol.Extent|undefined} extent Extent.
+ * @property {Array.<ol.geom2.LineStringCollection>|undefined}
+ *    lineStringCollections Line string collections.
+ * @property {Array.<ol.geom2.PointCollection>|undefined} pointCollections
+ *    Point collections.
+ * @property {ol.ProjectionLike} projection Projection.
+ */
+
 /**
  * @typedef {Object} ol.source.WMTSOptions
  * @property {Array.<ol.Attribution>|undefined} attributions Attributions.
@@ -319,7 +504,7 @@
  *     requeests.
  * @property {ol.Extent|undefined} extent Extent.
  * @property {ol.tilegrid.WMTS} tileGrid Tile grid.
- * @property {ol.Projection|undefined} projection Projection.
+ * @property {ol.ProjectionLike} projection Projection.
  * @property {ol.source.WMTSRequestEncoding|undefined} requestEncoding Request
  *     encoding.
  * @property {string} layer Layer.
@@ -334,53 +519,54 @@
 
 /**
  * @typedef {Object} ol.style.IconOptions
- * @property {string|ol.Expression} url Icon image url.
+ * @property {string|ol.expr.Expression} url Icon image url.
- * @property {number|ol.Expression|undefined} width Width of the icon in pixels.
+ * @property {number|ol.expr.Expression|undefined} width Width of the icon
- *     Default is the width of the icon image.
+ *     in pixels.  Default is the width of the icon image.
- * @property {number|ol.Expression|undefined} height Height of the icon in
+ * @property {number|ol.expr.Expression|undefined} height Height of the
- *     pixels. Default is the height of the icon image.
+ *     icon in pixels. Default is the height of the icon image.
- * @property {number|ol.Expression|undefined} opacity Icon opacity (0-1).
+ * @property {number|ol.expr.Expression|undefined} opacity Icon opacity
- * @property {number|ol.Expression|undefined} rotation Rotation in degrees
+ *     (0-1).
- *     (0-360).
+ * @property {number|ol.expr.Expression|undefined} rotation Rotation in
+ *     degrees (0-360).
  */
 
 /**
  * @typedef {Object} ol.style.LineOptions
- * @property {string|ol.Expression|undefined} strokeColor Stroke color as hex
+ * @property {string|ol.expr.Expression|undefined} strokeColor Stroke
- *     color code.
+ *     color as hex color code.
- * @property {number|ol.Expression|undefined} strokeWidth Stroke width in
+ * @property {number|ol.expr.Expression|undefined} strokeWidth Stroke
- *     pixels.
+ *     width in pixels.
- * @property {number|ol.Expression|undefined} opacity Opacity (0-1).
+ * @property {number|ol.expr.Expression|undefined} opacity Opacity (0-1).
  */
 
 /**
  * @typedef {Object} ol.style.PolygonOptions
- * @property {string|ol.Expression|undefined} fillColor Fill color as hex color
+ * @property {string|ol.expr.Expression|undefined} fillColor Fill color as
- *     code.
+ *     hex color code.
- * @property {string|ol.Expression|undefined} strokeColor Stroke color as hex
+ * @property {string|ol.expr.Expression|undefined} strokeColor Stroke
- *     color code.
+ *     color as hex color code.
- * @property {number|ol.Expression|undefined} strokeWidth Stroke width in
+ * @property {number|ol.expr.Expression|undefined} strokeWidth Stroke
- *     pixels.
+ *     width in pixels.
- * @property {number|ol.Expression|undefined} opacity Opacity (0-1).
+ * @property {number|ol.expr.Expression|undefined} opacity Opacity (0-1).
  */
 
 /**
  * @typedef {Object} ol.style.RuleOptions
- * @property {ol.filter.Filter|undefined} filter Filter.
+ * @property {ol.expr.Expression|string|undefined} filter Filter.
  * @property {Array.<ol.style.Symbolizer>|undefined} symbolizers Symbolizers.
  */
 
 /**
  * @typedef {Object} ol.style.ShapeOptions
  * @property {ol.style.ShapeType|undefined} type Type.
- * @property {number|ol.Expression|undefined} size Size in pixels.
+ * @property {number|ol.expr.Expression|undefined} size Size in pixels.
- * @property {string|ol.Expression|undefined} fillColor Fill color as hex color
+ * @property {string|ol.expr.Expression|undefined} fillColor Fill color as
- *     code.
+ *     hex color code.
- * @property {string|ol.Expression|undefined} strokeColor Stroke color as hex
+ * @property {string|ol.expr.Expression|undefined} strokeColor Stroke
- *     color code.
+ *     color as hex color code.
- * @property {number|ol.Expression|undefined} strokeWidth Stroke width in
+ * @property {number|ol.expr.Expression|undefined} strokeWidth Stroke
- *     pixels.
+ *     width in pixels.
- * @property {number|ol.Expression|undefined} opacity Opacity (0-1).
+ * @property {number|ol.expr.Expression|undefined} opacity Opacity (0-1).
  */
 
 /**
@@ -388,8 +574,18 @@
  * @property {Array.<ol.style.Rule>} rules Rules.
  */
 
+/**
+ * @typedef {Object} ol.style.TextOptions
+ * @property {string|ol.expr.Expression|undefined} color Color.
+ * @property {string|ol.expr.Expression|undefined} fontFamily Font family.
+ * @property {number|ol.expr.Expression|undefined} fontSize Font size in pixels.
+ * @property {string|ol.expr.Expression} text Text for the label.
+ * @property {number|ol.expr.Expression|undefined} opacity Opacity (0-1).
+ */
+
 /**
  * @typedef {Object} ol.tilegrid.TileGridOptions
+ * @property {number|undefined} minZoom Minimum zoom.
  * @property {ol.Coordinate|undefined} origin Origin.
  * @property {Array.<ol.Coordinate>|undefined} origins Origins.
  * @property {!Array.<number>} resolutions Resolutions.

src/ol/animation.exports

@@ -1,5 +1,4 @@
-@exportSymbol ol.animation
+@exportSymbol ol.animation.bounce
-@exportProperty ol.animation.bounce
+@exportSymbol ol.animation.pan
-@exportProperty ol.animation.pan
+@exportSymbol ol.animation.rotate
-@exportProperty ol.animation.rotate
+@exportSymbol ol.animation.zoom
-@exportProperty ol.animation.zoom

src/ol/animation.js

@@ -17,22 +17,27 @@ ol.animation.bounce = function(options) {
   var duration = goog.isDef(options.duration) ? options.duration : 1000;
   var easing = goog.isDef(options.easing) ?
       options.easing : ol.easing.upAndDown;
-  return function(map, frameState) {
+  return (
-    if (frameState.time < start) {
+      /**
-      frameState.animate = true;
+       * @param {ol.Map} map Map.
-      frameState.viewHints[ol.ViewHint.ANIMATING] += 1;
+       * @param {?ol.FrameState} frameState Frame state.
-      return true;
+       */
-    } else if (frameState.time < start + duration) {
+      function(map, frameState) {
-      var delta = easing((frameState.time - start) / duration);
+        if (frameState.time < start) {
-      var deltaResolution = resolution - frameState.view2DState.resolution;
+          frameState.animate = true;
-      frameState.animate = true;
+          frameState.viewHints[ol.ViewHint.ANIMATING] += 1;
-      frameState.view2DState.resolution += delta * deltaResolution;
+          return true;
-      frameState.viewHints[ol.ViewHint.ANIMATING] += 1;
+        } else if (frameState.time < start + duration) {
-      return true;
+          var delta = easing((frameState.time - start) / duration);
-    } else {
+          var deltaResolution = resolution - frameState.view2DState.resolution;
-      return false;
+          frameState.animate = true;
-    }
+          frameState.view2DState.resolution += delta * deltaResolution;
-  };
+          frameState.viewHints[ol.ViewHint.ANIMATING] += 1;
+          return true;
+        } else {
+          return false;
+        }
+      });
 };
 
 
@@ -48,24 +53,29 @@ ol.animation.pan = function(options) {
   var duration = goog.isDef(options.duration) ? options.duration : 1000;
   var easing = goog.isDef(options.easing) ?
       options.easing : ol.easing.inAndOut;
-  return function(map, frameState) {
+  return (
-    if (frameState.time < start) {
+      /**
-      frameState.animate = true;
+       * @param {ol.Map} map Map.
-      frameState.viewHints[ol.ViewHint.ANIMATING] += 1;
+       * @param {?ol.FrameState} frameState Frame state.
-      return true;
+       */
-    } else if (frameState.time < start + duration) {
+      function(map, frameState) {
-      var delta = 1 - easing((frameState.time - start) / duration);
+        if (frameState.time < start) {
-      var deltaX = sourceX - frameState.view2DState.center[0];
+          frameState.animate = true;
-      var deltaY = sourceY - frameState.view2DState.center[1];
+          frameState.viewHints[ol.ViewHint.ANIMATING] += 1;
-      frameState.animate = true;
+          return true;
-      frameState.view2DState.center[0] += delta * deltaX;
+        } else if (frameState.time < start + duration) {
-      frameState.view2DState.center[1] += delta * deltaY;
+          var delta = 1 - easing((frameState.time - start) / duration);
-      frameState.viewHints[ol.ViewHint.ANIMATING] += 1;
+          var deltaX = sourceX - frameState.view2DState.center[0];
-      return true;
+          var deltaY = sourceY - frameState.view2DState.center[1];
-    } else {
+          frameState.animate = true;
-      return false;
+          frameState.view2DState.center[0] += delta * deltaX;
-    }
+          frameState.view2DState.center[1] += delta * deltaY;
-  };
+          frameState.viewHints[ol.ViewHint.ANIMATING] += 1;
+          return true;
+        } else {
+          return false;
+        }
+      });
 };
 
 
@@ -80,23 +90,28 @@ ol.animation.rotate = function(options) {
   var easing = goog.isDef(options.easing) ?
       options.easing : ol.easing.inAndOut;
 
-  return function(map, frameState) {
+  return (
-    if (frameState.time < start) {
+      /**
-      frameState.animate = true;
+       * @param {ol.Map} map Map.
-      frameState.viewHints[ol.ViewHint.ANIMATING] += 1;
+       * @param {?ol.FrameState} frameState Frame state.
-      return true;
+       */
-    } else if (frameState.time < start + duration) {
+      function(map, frameState) {
-      var delta = 1 - easing((frameState.time - start) / duration);
+        if (frameState.time < start) {
-      var deltaRotation =
+          frameState.animate = true;
-          sourceRotation - frameState.view2DState.rotation;
+          frameState.viewHints[ol.ViewHint.ANIMATING] += 1;
-      frameState.animate = true;
+          return true;
-      frameState.view2DState.rotation += delta * deltaRotation;
+        } else if (frameState.time < start + duration) {
-      frameState.viewHints[ol.ViewHint.ANIMATING] += 1;
+          var delta = 1 - easing((frameState.time - start) / duration);
-      return true;
+          var deltaRotation =
-    } else {
+              sourceRotation - frameState.view2DState.rotation;
-      return false;
+          frameState.animate = true;
-    }
+          frameState.view2DState.rotation += delta * deltaRotation;
-  };
+          frameState.viewHints[ol.ViewHint.ANIMATING] += 1;
+          return true;
+        } else {
+          return false;
+        }
+      });
 };
 
 
@@ -110,21 +125,26 @@ ol.animation.zoom = function(options) {
   var duration = goog.isDef(options.duration) ? options.duration : 1000;
   var easing = goog.isDef(options.easing) ?
       options.easing : ol.easing.inAndOut;
-  return function(map, frameState) {
+  return (
-    if (frameState.time < start) {
+      /**
-      frameState.animate = true;
+       * @param {ol.Map} map Map.
-      frameState.viewHints[ol.ViewHint.ANIMATING] += 1;
+       * @param {?ol.FrameState} frameState Frame state.
-      return true;
+       */
-    } else if (frameState.time < start + duration) {
+      function(map, frameState) {
-      var delta = 1 - easing((frameState.time - start) / duration);
+        if (frameState.time < start) {
-      var deltaResolution =
+          frameState.animate = true;
-          sourceResolution - frameState.view2DState.resolution;
+          frameState.viewHints[ol.ViewHint.ANIMATING] += 1;
-      frameState.animate = true;
+          return true;
-      frameState.view2DState.resolution += delta * deltaResolution;
+        } else if (frameState.time < start + duration) {
-      frameState.viewHints[ol.ViewHint.ANIMATING] += 1;
+          var delta = 1 - easing((frameState.time - start) / duration);
-      return true;
+          var deltaResolution =
-    } else {
+              sourceResolution - frameState.view2DState.resolution;
-      return false;
+          frameState.animate = true;
-    }
+          frameState.view2DState.resolution += delta * deltaResolution;
-  };
+          frameState.viewHints[ol.ViewHint.ANIMATING] += 1;
+          return true;
+        } else {
+          return false;
+        }
+      });
 };

src/ol/attribution.js

@@ -5,9 +5,23 @@ goog.require('ol.TileRange');
 
 
 /**
+ * Create a new attribution to be associated with a layer source.
+ *
+ * Example:
+ *
+ *     source: new ol.source.OSM({
+ *       attributions: [
+ *       new ol.Attribution(
+ *         'All maps © ' +
+ *         '<a href="http://www.opencyclemap.org/">OpenCycleMap</a>'),
+ *       ol.source.OSM.DATA_ATTRIBUTION
+ *     ],
+ *     ..
+ *
  * @constructor
- * @param {string} html HTML.
+ * @param {string} html The markup to use for display of the attribution.
- * @param {Object.<string, Array.<ol.TileRange>>=} opt_tileRanges Tile ranges.
+ * @param {Object.<string, Array.<ol.TileRange>>=} opt_tileRanges Tile ranges
+ *     (FOR INTERNAL USE ONLY).
  */
 ol.Attribution = function(html, opt_tileRanges) {
 
@@ -42,13 +56,13 @@ ol.Attribution.prototype.intersectsAnyTileRange = function(tileRanges) {
   if (goog.isNull(this.tileRanges_)) {
     return true;
   }
-  var i, tileRange, z;
+  var i, ii, tileRange, z;
   for (z in tileRanges) {
     if (!(z in this.tileRanges_)) {
       continue;
     }
     tileRange = tileRanges[z];
-    for (i = 0; i < this.tileRanges_[z].length; ++i) {
+    for (i = 0, ii = this.tileRanges_[z].length; i < ii; ++i) {
       if (this.tileRanges_[z][i].intersects(tileRange)) {
         return true;
       }

src/ol/collection.js

@@ -53,6 +53,7 @@ ol.CollectionProperty = {
 
 
 /**
+ * A mutable MVC Array.
  * @constructor
  * @extends {ol.Object}
  * @param {Array=} opt_array Array.
@@ -87,16 +88,20 @@ ol.Collection.prototype.clear = function() {
  * @param {Array} arr Array.
  */
 ol.Collection.prototype.extend = function(arr) {
-  var i;
+  var i, ii;
-  for (i = 0; i < arr.length; ++i) {
+  for (i = 0, ii = arr.length; i < ii; ++i) {
     this.push(arr[i]);
   }
 };
 
 
 /**
- * @param {Function} f Function.
+ * Iterate over each element, calling the provided callback.
- * @param {Object=} opt_obj Object.
+ * @param {Function} f The function to call for every element. This function
+ *     takes 3 arguments (the element, the index and the array). The return
+ *     value is ignored.
+ * @param {Object=} opt_obj The object to be used as the value of 'this'
+ *     within f.
  */
 ol.Collection.prototype.forEach = function(f, opt_obj) {
   goog.array.forEach(this.array_, f, opt_obj);
@@ -112,6 +117,7 @@ ol.Collection.prototype.getArray = function() {
 
 
 /**
+ * Get the element at the provided index.
  * @param {number} index Index.
  * @return {*} Element.
  */
@@ -121,6 +127,7 @@ ol.Collection.prototype.getAt = function(index) {
 
 
 /**
+ * Get the length of this collection.
  * @return {number} Length.
  */
 ol.Collection.prototype.getLength = function() {
@@ -129,6 +136,7 @@ ol.Collection.prototype.getLength = function() {
 
 
 /**
+ * Insert an element at the provided index.
  * @param {number} index Index.
  * @param {*} elem Element.
  */
@@ -141,6 +149,7 @@ ol.Collection.prototype.insertAt = function(index, elem) {
 
 
 /**
+ * Remove the last element of the collection.
  * @return {*} Element.
  */
 ol.Collection.prototype.pop = function() {
@@ -149,6 +158,7 @@ ol.Collection.prototype.pop = function() {
 
 
 /**
+ * Insert the provided element at the end of the collection.
  * @param {*} elem Element.
  * @return {number} Length.
  */
@@ -165,9 +175,10 @@ ol.Collection.prototype.push = function(elem) {
  * @return {*} The removed element or undefined if elem was not found.
  */
 ol.Collection.prototype.remove = function(elem) {
-  var i;
+  var arr = this.array_;
-  for (i = 0; i < this.array_.length; ++i) {
+  var i, ii;
-    if (this.array_[i] === elem) {
+  for (i = 0, ii = arr.length; i < ii; ++i) {
+    if (arr[i] === elem) {
       return this.removeAt(i);
     }
   }
@@ -176,6 +187,7 @@ ol.Collection.prototype.remove = function(elem) {
 
 
 /**
+ * Remove the element at the provided index.
  * @param {number} index Index.
  * @return {*} Value.
  */
@@ -190,6 +202,7 @@ ol.Collection.prototype.removeAt = function(index) {
 
 
 /**
+ * Set the element at the provided index.
  * @param {number} index Index.
  * @param {*} elem Element.
  */

src/ol/control/attributioncontrol.js

@@ -3,21 +3,22 @@
 goog.provide('ol.control.Attribution');
 
 goog.require('goog.array');
-goog.require('goog.asserts');
 goog.require('goog.dom');
 goog.require('goog.dom.TagName');
 goog.require('goog.object');
 goog.require('goog.style');
 goog.require('ol.Attribution');
 goog.require('ol.FrameState');
-goog.require('ol.TileRange');
 goog.require('ol.control.Control');
 goog.require('ol.css');
-goog.require('ol.source.Source');
 
 
 
 /**
+ * Create a new attribution control to show all the attributions associated
+ * with the layer sources in the map. A default map has this control included.
+ * By default it will show in the bottom right portion of the map, but it can
+ * be changed by using a css selector for .ol-attribution.
  * @constructor
  * @extends {ol.control.Control}
  * @param {ol.control.AttributionOptions=} opt_options Attribution options.
@@ -32,8 +33,10 @@ ol.control.Attribution = function(opt_options) {
    */
   this.ulElement_ = goog.dom.createElement(goog.dom.TagName.UL);
 
+  var className = goog.isDef(options.className) ?
+      options.className : 'ol-attribution';
   var element = goog.dom.createDom(goog.dom.TagName.DIV, {
-    'class': 'ol-attribution ' + ol.css.CLASS_UNSELECTABLE
+    'class': className + ' ' + ol.css.CLASS_UNSELECTABLE
   }, this.ulElement_);
 
   goog.base(this, {
@@ -65,37 +68,45 @@ goog.inherits(ol.control.Attribution, ol.control.Control);
 
 
 /**
- * @param {?Object.<string, Object.<string, ol.TileRange>>} usedTiles Used
+ * @param {?ol.FrameState} frameState Frame state.
- *     tiles.
+ * @return {Array.<Object.<string, ol.Attribution>>} Attributions.
- * @param {Object.<string, ol.source.Source>} sources Sources.
- * @return {Object.<string, ol.Attribution>} Attributions.
  */
-ol.control.Attribution.prototype.getTileSourceAttributions =
+ol.control.Attribution.prototype.getSourceAttributions =
-    function(usedTiles, sources) {
+    function(frameState) {
+  var i, ii, j, jj, tileRanges, source, sourceAttribution,
+      sourceAttributionKey, sourceAttributions, sourceKey;
+  var layers = frameState.layersArray;
   /** @type {Object.<string, ol.Attribution>} */
-  var attributions = {};
+  var attributions = goog.object.clone(frameState.attributions);
-  var i, tileRanges, tileSource, tileSourceAttribution,
+  /** @type {Object.<string, ol.Attribution>} */
-      tileSourceAttributionKey, tileSourceAttributions, tileSourceKey, z;
+  var hiddenAttributions = {};
-  for (tileSourceKey in usedTiles) {
+  for (i = 0, ii = layers.length; i < ii; i++) {
-    goog.asserts.assert(tileSourceKey in sources);
+    source = layers[i].getSource();
-    tileSource = sources[tileSourceKey];
+    sourceKey = goog.getUid(source).toString();
-    tileSourceAttributions = tileSource.getAttributions();
+    sourceAttributions = source.getAttributions();
-    if (goog.isNull(tileSourceAttributions)) {
+    if (goog.isNull(sourceAttributions)) {
       continue;
     }
-    tileRanges = usedTiles[tileSourceKey];
+    for (j = 0, jj = sourceAttributions.length; j < jj; j++) {
-    for (i = 0; i < tileSourceAttributions.length; ++i) {
+      sourceAttribution = sourceAttributions[j];
-      tileSourceAttribution = tileSourceAttributions[i];
+      sourceAttributionKey = goog.getUid(sourceAttribution).toString();
-      tileSourceAttributionKey = goog.getUid(tileSourceAttribution).toString();
+      if (sourceAttributionKey in attributions) {
-      if (tileSourceAttributionKey in attributions) {
         continue;
       }
-      if (tileSourceAttribution.intersectsAnyTileRange(tileRanges)) {
+      tileRanges = frameState.usedTiles[sourceKey];
-        attributions[tileSourceAttributionKey] = tileSourceAttribution;
+      if (goog.isDef(tileRanges) &&
+          sourceAttribution.intersectsAnyTileRange(tileRanges)) {
+        if (sourceAttributionKey in hiddenAttributions) {
+          delete hiddenAttributions[sourceAttributionKey];
+        }
+        attributions[sourceAttributionKey] = sourceAttribution;
+      }
+      else {
+        hiddenAttributions[sourceAttributionKey] = sourceAttribution;
       }
     }
   }
-  return attributions;
+  return [attributions, hiddenAttributions];
 };
 
 
@@ -121,64 +132,54 @@ ol.control.Attribution.prototype.updateElement_ = function(frameState) {
     return;
   }
 
-  var map = this.getMap();
+  var attributions = this.getSourceAttributions(frameState);
-
-  /** @type {Object.<string, boolean>} */
-  var attributionsToRemove = {};
-  /** @type {Object.<string, ol.source.Source>} */
-  var sources = {};
-  var layers = map.getLayers();
-  if (goog.isDef(layers)) {
-    layers.forEach(function(layer) {
-      var source = layer.getSource();
-      sources[goog.getUid(source).toString()] = source;
-      var attributions = source.getAttributions();
-      if (!goog.isNull(attributions)) {
-        var attribution, i;
-        for (i = 0; i < attributions.length; ++i) {
-          attribution = attributions[i];
-          attributionKey = goog.getUid(attribution).toString();
-          attributionsToRemove[attributionKey] = true;
-        }
-      }
-    });
-  }
-
   /** @type {Object.<string, ol.Attribution>} */
-  var attributions = goog.object.clone(frameState.attributions);
+  var visibleAttributions = attributions[0];
-  var tileSourceAttributions = this.getTileSourceAttributions(
+  /** @type {Object.<string, ol.Attribution>} */
-      frameState.usedTiles, sources);
+  var hiddenAttributions = attributions[1];
-  goog.object.extend(attributions, tileSourceAttributions);
 
-  /** @type {Array.<number>} */
+  var attributionElement, attributionKey;
-  var attributionKeys =
+  for (attributionKey in this.attributionElements_) {
-      goog.array.map(goog.object.getKeys(attributions), Number);
+    if (attributionKey in visibleAttributions) {
-  goog.array.sort(attributionKeys);
-  var i, attributionElement, attributionKey;
-  for (i = 0; i < attributionKeys.length; ++i) {
-    attributionKey = attributionKeys[i].toString();
-    if (attributionKey in this.attributionElements_) {
       if (!this.attributionElementRenderedVisible_[attributionKey]) {
         goog.style.showElement(this.attributionElements_[attributionKey], true);
         this.attributionElementRenderedVisible_[attributionKey] = true;
       }
-    } else {
+      delete visibleAttributions[attributionKey];
-      attributionElement = goog.dom.createElement(goog.dom.TagName.LI);
-      attributionElement.innerHTML = attributions[attributionKey].getHTML();
-      goog.dom.appendChild(this.ulElement_, attributionElement);
-      this.attributionElements_[attributionKey] = attributionElement;
-      this.attributionElementRenderedVisible_[attributionKey] = true;
     }
-    delete attributionsToRemove[attributionKey];
+    else if (attributionKey in hiddenAttributions) {
+      if (this.attributionElementRenderedVisible_[attributionKey]) {
+        goog.style.showElement(
+            this.attributionElements_[attributionKey], false);
+        delete this.attributionElementRenderedVisible_[attributionKey];
+      }
+      delete hiddenAttributions[attributionKey];
+    }
+    else {
+      goog.dom.removeNode(this.attributionElements_[attributionKey]);
+      delete this.attributionElements_[attributionKey];
+      delete this.attributionElementRenderedVisible_[attributionKey];
+    }
+  }
+  for (attributionKey in visibleAttributions) {
+    attributionElement = goog.dom.createElement(goog.dom.TagName.LI);
+    attributionElement.innerHTML =
+        visibleAttributions[attributionKey].getHTML();
+    goog.dom.appendChild(this.ulElement_, attributionElement);
+    this.attributionElements_[attributionKey] = attributionElement;
+    this.attributionElementRenderedVisible_[attributionKey] = true;
+  }
+  for (attributionKey in hiddenAttributions) {
+    attributionElement = goog.dom.createElement(goog.dom.TagName.LI);
+    attributionElement.innerHTML =
+        hiddenAttributions[attributionKey].getHTML();
+    goog.style.showElement(attributionElement, false);
+    goog.dom.appendChild(this.ulElement_, attributionElement);
+    this.attributionElements_[attributionKey] = attributionElement;
   }
 
-  for (attributionKey in attributionsToRemove) {
+  var renderVisible =
-    goog.dom.removeNode(this.attributionElements_[attributionKey]);
+      !goog.object.isEmpty(this.attributionElementRenderedVisible_);
-    delete this.attributionElements_[attributionKey];
-    delete this.attributionElementRenderedVisible_[attributionKey];
-  }
-
-  var renderVisible = !goog.array.isEmpty(attributionKeys);
   if (this.renderedVisible_ != renderVisible) {
     goog.style.showElement(this.element, renderVisible);
     this.renderedVisible_ = renderVisible;

src/ol/control/control.exports

@@ -0,0 +1,4 @@
+@exportClass ol.control.Control ol.control.ControlOptions
+@exportProperty ol.control.Control.prototype.handleMapPostrender
+@exportProperty ol.control.Control.prototype.getMap
+@exportProperty ol.control.Control.prototype.setMap

src/ol/control/control.js

@@ -1,28 +1,20 @@
 goog.provide('ol.control.Control');
-goog.provide('ol.control.ControlOptions');
 
-goog.require('goog.Disposable');
 goog.require('goog.array');
 goog.require('goog.dom');
 goog.require('goog.events');
 goog.require('ol.MapEventType');
-
+goog.require('ol.Object');
-
-/**
- * @typedef {{element: (Element|undefined),
- *            map: (ol.Map|undefined),
- *            target: (Element|undefined)}}
- */
-ol.control.ControlOptions;
 
 
 
 /**
- * A thing which is painted over the map to provide a means for interaction
+ * Something to be painted over the map to provide a means for interaction
- * (buttons) of show annotations (status bars).
+ * (buttons) or to show annotations (status bars).
  *
  * @constructor
- * @extends {goog.Disposable}
+ * @extends {ol.Object}
+ * @implements {oli.control.Control}
  * @param {ol.control.ControlOptions} options Control options.
  */
 ol.control.Control = function(options) {
@@ -58,7 +50,7 @@ ol.control.Control = function(options) {
   }
 
 };
-goog.inherits(ol.control.Control, goog.Disposable);
+goog.inherits(ol.control.Control, ol.Object);
 
 
 /**
@@ -71,6 +63,7 @@ ol.control.Control.prototype.disposeInternal = function() {
 
 
 /**
+ * Get the map associated with this control.
  * @return {ol.Map} Map.
  */
 ol.control.Control.prototype.getMap = function() {
@@ -79,16 +72,18 @@ ol.control.Control.prototype.getMap = function() {
 
 
 /**
+ * Function called on each map render. Executes in a requestAnimationFrame
+ * callback. Can be implemented in sub-classes to re-render the control's
+ * UI.
  * @param {ol.MapEvent} mapEvent Map event.
  */
-ol.control.Control.prototype.handleMapPostrender = goog.nullFunction;
+ol.control.Control.prototype.handleMapPostrender = function(mapEvent) {};
 
 
 /**
- * Removes the control from its current map and attaches it to the new map.
+ * Remove the control from its current map and attach it to the new map.
- * Subtypes might also wish set up event handlers to get notified about changes
+ * Subclasses may set up event handlers to get notified about changes to
- * to the map here.
+ * the map here.
- *
  * @param {ol.Map} map Map.
  */
 ol.control.Control.prototype.setMap = function(map) {
@@ -104,7 +99,8 @@ ol.control.Control.prototype.setMap = function(map) {
     var target = goog.isDef(this.target_) ?
         this.target_ : map.getOverlayContainer();
     goog.dom.appendChild(target, this.element);
-    if (this.handleMapPostrender !== goog.nullFunction) {
+    if (this.handleMapPostrender !==
+        ol.control.Control.prototype.handleMapPostrender) {
       this.listenerKeys.push(goog.events.listen(map,
           ol.MapEventType.POSTRENDER, this.handleMapPostrender, false, this));
     }

src/ol/control/controldefaults.js

@@ -1,6 +1,6 @@
 goog.provide('ol.control.defaults');
 
-goog.require('goog.array');
+goog.require('ol.Collection');
 goog.require('ol.control.Attribution');
 goog.require('ol.control.Logo');
 goog.require('ol.control.Zoom');
@@ -9,14 +9,13 @@ goog.require('ol.control.Zoom');
 /**
  * @param {ol.control.DefaultsOptions=} opt_options Defaults options.
  * @param {Array.<ol.control.Control>=} opt_controls Additional controls.
- * @return {Array.<ol.control.Control>} Controls.
+ * @return {ol.Collection} Controls.
  */
 ol.control.defaults = function(opt_options, opt_controls) {
 
   var options = goog.isDef(opt_options) ? opt_options : {};
 
-  /** @type {Array.<ol.control.Control>} */
+  var controls = new ol.Collection();
-  var controls = [];
 
   var attributionControl = goog.isDef(options.attribution) ?
       options.attribution : true;
@@ -43,7 +42,7 @@ ol.control.defaults = function(opt_options, opt_controls) {
   }
 
   if (goog.isDef(opt_controls)) {
-    goog.array.extend(controls, opt_controls);
+    controls.extend(opt_controls);
   }
 
   return controls;

src/ol/control/dragboxcontrol.js

@@ -4,12 +4,12 @@ goog.require('goog.asserts');
 goog.require('goog.dom');
 goog.require('goog.dom.TagName');
 goog.require('goog.events');
+goog.require('goog.math.Size');
 goog.require('goog.style');
 goog.require('ol.Coordinate');
 goog.require('ol.MapBrowserEvent');
 goog.require('ol.MapBrowserEvent.EventType');
 goog.require('ol.Pixel');
-goog.require('ol.Size');
 goog.require('ol.control.Control');
 
 
@@ -59,8 +59,9 @@ ol.control.DragBox.prototype.setMap = function(map) {
   if (!goog.isNull(map)) {
     this.startPixel_ = map.getPixelFromCoordinate(this.startCoordinate_);
     goog.asserts.assert(goog.isDef(this.startPixel_));
-    goog.style.setPosition(this.element, this.startPixel_);
+    goog.style.setPosition(this.element,
-    goog.style.setBorderBoxSize(this.element, new ol.Size(0, 0));
+        this.startPixel_[0], this.startPixel_[1]);
+    goog.style.setBorderBoxSize(this.element, new goog.math.Size(0, 0));
     this.listenerKeys.push(goog.events.listen(
         map, ol.MapBrowserEvent.EventType.DRAG, this.updateBox_, false, this));
   }
@@ -76,10 +77,10 @@ ol.control.DragBox.prototype.updateBox_ = function(mapBrowserEvent) {
   var coordinate = mapBrowserEvent.getCoordinate();
   goog.asserts.assert(goog.isDef(coordinate));
   var currentPixel = map.getPixelFromCoordinate(coordinate);
-  goog.style.setPosition(this.element, new ol.Pixel(
+  goog.style.setPosition(this.element,
-      Math.min(currentPixel.x, this.startPixel_.x),
+      Math.min(currentPixel[0], this.startPixel_[0]),
-      Math.min(currentPixel.y, this.startPixel_.y)));
+      Math.min(currentPixel[1], this.startPixel_[1]));
-  goog.style.setBorderBoxSize(this.element, new ol.Size(
+  goog.style.setBorderBoxSize(this.element, new goog.math.Size(
-      Math.abs(currentPixel.x - this.startPixel_.x),
+      Math.abs(currentPixel[0] - this.startPixel_[0]),
-      Math.abs(currentPixel.y - this.startPixel_.y)));
+      Math.abs(currentPixel[1] - this.startPixel_[1])));
 };

src/ol/control/fullscreencontrol.js

@@ -14,6 +14,17 @@ goog.require('ol.css');
 
 
 /**
+ * Provides a button that when clicked fills up the full screen with the map.
+ * When in full screen mode, a close button is shown to exit full screen mode.
+ *
+ * Example:
+ *
+ *     var map = new ol.Map({
+ *       controls: ol.control.defaults({}, [
+ *         new ol.control.FullScreen()
+ *       ]),
+ *       ...
+ *
  * @constructor
  * @extends {ol.control.Control}
  * @param {ol.control.FullScreenOptions=} opt_options Options.
@@ -26,7 +37,8 @@ ol.control.FullScreen = function(opt_options) {
    * @private
    * @type {string}
    */
-  this.cssClassName_ = 'ol-full-screen';
+  this.cssClassName_ = goog.isDef(options.className) ?
+      options.className : 'ol-full-screen';
 
   var aElement = goog.dom.createDom(goog.dom.TagName.A, {
     'href': '#fullScreen',
@@ -78,7 +90,7 @@ ol.control.FullScreen.prototype.handleClick_ = function(browserEvent) {
     goog.dom.fullscreen.exitFullScreen();
   } else {
     var element = map.getTarget();
-    goog.asserts.assert(!goog.isNull(element));
+    goog.asserts.assert(goog.isDefAndNotNull(element));
     if (this.keys_) {
       goog.dom.fullscreen.requestFullScreenWithKeys(element);
     } else {

src/ol/control/logocontrol.js

@@ -11,6 +11,10 @@ goog.require('ol.css');
 
 
 /**
+ * Shows a logo for all the layer sources in the map that have a logo
+ * associated with them, such as Bing. This control is part of a default map.
+ * By default it will show in the bottom-left portion of the map, but it can
+ * be styled by using a css selector for .ol-logo.
  * @constructor
  * @extends {ol.control.Control}
  * @param {ol.control.LogoOptions=} opt_options Logo options.
@@ -25,8 +29,10 @@ ol.control.Logo = function(opt_options) {
    */
   this.ulElement_ = goog.dom.createElement(goog.dom.TagName.UL);
 
+  var className = goog.isDef(options.className) ? options.className : 'ol-logo';
+
   var element = goog.dom.createDom(goog.dom.TagName.DIV, {
-    'class': 'ol-logo ' + ol.css.CLASS_UNSELECTABLE
+    'class': className + ' ' + ol.css.CLASS_UNSELECTABLE
   }, this.ulElement_);
 
   goog.base(this, {

src/ol/control/mousepositioncontrol.js

@@ -10,15 +10,38 @@ goog.require('goog.events');
 goog.require('goog.events.EventType');
 goog.require('goog.style');
 goog.require('ol.CoordinateFormatType');
+goog.require('ol.Object');
 goog.require('ol.Pixel');
 goog.require('ol.Projection');
 goog.require('ol.TransformFunction');
 goog.require('ol.control.Control');
-goog.require('ol.projection');
+goog.require('ol.proj');
+
+
+/**
+ * @enum {string}
+ */
+ol.control.MousePositionProperty = {
+  PROJECTION: 'projection',
+  COORDINATE_FORMAT: 'coordinateFormat'
+};
 
 
 
 /**
+ * Create a new control to show the position of the mouse in the map's
+ * projection (or any other supplied projection). By default the control is
+ * shown in the top right corner of the map but this can be changed by using
+ * a css selector .ol-mouse-position.
+ *
+ * Example:
+ *
+ *     var map = new ol.Map({
+ *       controls: ol.control.defaults({}, [
+ *         new ol.control.MousePosition({projection: ol.proj.get('EPSG:4326')})
+ *       ]),
+ *       ...
+ *
  * @constructor
  * @extends {ol.control.Control}
  * @param {ol.control.MousePositionOptions=} opt_options Mouse position options.
@@ -27,8 +50,11 @@ ol.control.MousePosition = function(opt_options) {
 
   var options = goog.isDef(opt_options) ? opt_options : {};
 
+  var className = goog.isDef(options.className) ?
+      options.className : 'ol-mouse-position';
+
   var element = goog.dom.createDom(goog.dom.TagName.DIV, {
-    'class': 'ol-mouse-position'
+    'class': className
   });
 
   goog.base(this, {
@@ -37,17 +63,16 @@ ol.control.MousePosition = function(opt_options) {
     target: options.target
   });
 
-  /**
+  goog.events.listen(this,
-   * @private
+      ol.Object.getChangeEventType(ol.control.MousePositionProperty.PROJECTION),
-   * @type {ol.Projection}
+      this.handleProjectionChanged_, false, this);
-   */
-  this.projection_ = ol.projection.get(options.projection);
 
-  /**
+  if (goog.isDef(options.coordinateFormat)) {
-   * @private
+    this.setCoordinateFormat(options.coordinateFormat);
-   * @type {ol.CoordinateFormatType|undefined}
+  }
-   */
+  if (goog.isDef(options.projection)) {
-  this.coordinateFormat_ = options.coordinateFormat;
+    this.setProjection(ol.proj.get(options.projection));
+  }
 
   /**
    * @private
@@ -70,15 +95,9 @@ ol.control.MousePosition = function(opt_options) {
 
   /**
    * @private
-   * @type {ol.TransformFunction}
+   * @type {?ol.TransformFunction}
    */
-  this.transform_ = ol.projection.identityTransform;
+  this.transform_ = null;
-
-  /**
-   * @private
-   * @type {ol.Projection}
-   */
-  this.renderedProjection_ = null;
 
   /**
    * @private
@@ -98,12 +117,49 @@ ol.control.MousePosition.prototype.handleMapPostrender = function(mapEvent) {
   if (goog.isNull(frameState)) {
     this.mapProjection_ = null;
   } else {
-    this.mapProjection_ = frameState.view2DState.projection;
+    if (this.mapProjection_ != frameState.view2DState.projection) {
+      this.mapProjection_ = frameState.view2DState.projection;
+      this.transform_ = null;
+    }
   }
   this.updateHTML_(this.lastMouseMovePixel_);
 };
 
 
+/**
+ * @private
+ */
+ol.control.MousePosition.prototype.handleProjectionChanged_ = function() {
+  this.transform_ = null;
+};
+
+
+/**
+ * @return {ol.CoordinateFormatType|undefined} projection.
+ */
+ol.control.MousePosition.prototype.getCoordinateFormat = function() {
+  return /** @type {ol.CoordinateFormatType|undefined} */ (
+      this.get(ol.control.MousePositionProperty.COORDINATE_FORMAT));
+};
+goog.exportProperty(
+    ol.control.MousePosition.prototype,
+    'getCoordinateFormat',
+    ol.control.MousePosition.prototype.getCoordinateFormat);
+
+
+/**
+ * @return {ol.Projection|undefined} projection.
+ */
+ol.control.MousePosition.prototype.getProjection = function() {
+  return /** @type {ol.Projection|undefined} */ (
+      this.get(ol.control.MousePositionProperty.PROJECTION));
+};
+goog.exportProperty(
+    ol.control.MousePosition.prototype,
+    'getProjection',
+    ol.control.MousePosition.prototype.getProjection);
+
+
 /**
  * @param {goog.events.BrowserEvent} browserEvent Browser event.
  * @protected
@@ -112,9 +168,8 @@ ol.control.MousePosition.prototype.handleMouseMove = function(browserEvent) {
   var map = this.getMap();
   var eventPosition = goog.style.getRelativePosition(
       browserEvent, map.getViewport());
-  var pixel = new ol.Pixel(eventPosition.x, eventPosition.y);
+  this.lastMouseMovePixel_ = [eventPosition.x, eventPosition.y];
-  this.updateHTML_(pixel);
+  this.updateHTML_(this.lastMouseMovePixel_);
-  this.lastMouseMovePixel_ = pixel;
 };
 
 
@@ -145,28 +200,53 @@ ol.control.MousePosition.prototype.setMap = function(map) {
 };
 
 
+/**
+ * @param {ol.CoordinateFormatType} format Coordinate format.
+ */
+ol.control.MousePosition.prototype.setCoordinateFormat = function(format) {
+  this.set(ol.control.MousePositionProperty.COORDINATE_FORMAT, format);
+};
+goog.exportProperty(
+    ol.control.MousePosition.prototype,
+    'setCoordinateFormat',
+    ol.control.MousePosition.prototype.setCoordinateFormat);
+
+
+/**
+ * @param {ol.Projection} projection Projection.
+ */
+ol.control.MousePosition.prototype.setProjection = function(projection) {
+  this.set(ol.control.MousePositionProperty.PROJECTION, projection);
+};
+goog.exportProperty(
+    ol.control.MousePosition.prototype,
+    'setProjection',
+    ol.control.MousePosition.prototype.setProjection);
+
+
 /**
  * @param {?ol.Pixel} pixel Pixel.
  * @private
  */
 ol.control.MousePosition.prototype.updateHTML_ = function(pixel) {
   var html = this.undefinedHTML_;
-  if (!goog.isNull(pixel)) {
+  if (!goog.isNull(pixel) && !goog.isNull(this.mapProjection_)) {
-    if (this.renderedProjection_ != this.mapProjection_) {
+    if (goog.isNull(this.transform_)) {
-      if (!goog.isNull(this.projection_)) {
+      var projection = this.getProjection();
-        this.transform_ = ol.projection.getTransformFromProjections(
+      if (goog.isDef(projection)) {
-            this.mapProjection_, this.projection_);
+        this.transform_ = ol.proj.getTransformFromProjections(
+            this.mapProjection_, projection);
       } else {
-        this.transform_ = ol.projection.identityTransform;
+        this.transform_ = ol.proj.identityTransform;
       }
-      this.renderedProjection_ = this.mapProjection_;
     }
     var map = this.getMap();
     var coordinate = map.getCoordinateFromPixel(pixel);
     if (!goog.isNull(coordinate)) {
       this.transform_(coordinate, coordinate);
-      if (goog.isDef(this.coordinateFormat_)) {
+      var coordinateFormat = this.getCoordinateFormat();
-        html = this.coordinateFormat_(coordinate);
+      if (goog.isDef(coordinateFormat)) {
+        html = coordinateFormat(coordinate);
       } else {
         html = coordinate.toString();
       }

src/ol/control/scalelinecontrol.js

@@ -1,21 +1,32 @@
 goog.provide('ol.control.ScaleLine');
+goog.provide('ol.control.ScaleLineProperty');
 goog.provide('ol.control.ScaleLineUnits');
 
 goog.require('goog.array');
 goog.require('goog.asserts');
 goog.require('goog.dom');
 goog.require('goog.dom.TagName');
+goog.require('goog.events');
 goog.require('goog.math');
 goog.require('goog.style');
-goog.require('ol.FrameState');
+goog.require('ol.Object');
 goog.require('ol.ProjectionUnits');
 goog.require('ol.TransformFunction');
+goog.require('ol.View2DState');
 goog.require('ol.control.Control');
 goog.require('ol.css');
-goog.require('ol.projection');
+goog.require('ol.proj');
 goog.require('ol.sphere.NORMAL');
 
 
+/**
+ * @enum {string}
+ */
+ol.control.ScaleLineProperty = {
+  UNITS: 'units'
+};
+
+
 /**
  * @enum {string}
  */
@@ -30,6 +41,18 @@ ol.control.ScaleLineUnits = {
 
 
 /**
+ * Create a control to help users estimate distances on a map.
+ *
+ * Example:
+ *
+ *     var map = new ol.Map({
+ *       controls: ol.control.defaults({}, [
+ *         new ol.control.ScaleLine({
+ *           units: ol.control.ScaleLineUnits.IMPERIAL
+ *         })
+ *       ]),
+ *       ...
+ *
  * @constructor
  * @extends {ol.control.Control}
  * @param {ol.control.ScaleLineOptions=} opt_options Scale line options.
@@ -38,12 +61,15 @@ ol.control.ScaleLine = function(opt_options) {
 
   var options = opt_options || {};
 
+  var className = goog.isDef(options.className) ?
+      options.className : 'ol-scale-line';
+
   /**
    * @private
    * @type {Element}
    */
   this.innerElement_ = goog.dom.createDom(goog.dom.TagName.DIV, {
-    'class': 'ol-scale-line-inner'
+    'class': className + '-inner'
   });
 
   /**
@@ -51,22 +77,21 @@ ol.control.ScaleLine = function(opt_options) {
    * @type {Element}
    */
   this.element_ = goog.dom.createDom(goog.dom.TagName.DIV, {
-    'class': 'ol-scale-line ' + ol.css.CLASS_UNSELECTABLE
+    'class': className + ' ' + ol.css.CLASS_UNSELECTABLE
   }, this.innerElement_);
 
+  /**
+   * @private
+   * @type {?ol.View2DState}
+   */
+  this.view2DState_ = null;
+
   /**
    * @private
    * @type {number}
    */
   this.minWidth_ = goog.isDef(options.minWidth) ? options.minWidth : 64;
 
-  /**
-   * @private
-   * @type {ol.control.ScaleLineUnits}
-   */
-  this.units_ = goog.isDef(options.units) ?
-      options.units : ol.control.ScaleLineUnits.METRIC;
-
   /**
    * @private
    * @type {boolean}
@@ -77,7 +102,7 @@ ol.control.ScaleLine = function(opt_options) {
    * @private
    * @type {number|undefined}
    */
-  this.renderedWidth_;
+  this.renderedWidth_ = undefined;
 
   /**
    * @private
@@ -97,6 +122,12 @@ ol.control.ScaleLine = function(opt_options) {
     target: options.target
   });
 
+  goog.events.listen(
+      this, ol.Object.getChangeEventType(ol.control.ScaleLineProperty.UNITS),
+      this.handleUnitsChanged_, false, this);
+
+  this.setUnits(options.units || ol.control.ScaleLineUnits.METRIC);
+
 };
 goog.inherits(ol.control.ScaleLine, ol.control.Control);
 
@@ -108,21 +139,60 @@ goog.inherits(ol.control.ScaleLine, ol.control.Control);
 ol.control.ScaleLine.LEADING_DIGITS = [1, 2, 5];
 
 
+/**
+ * @return {ol.control.ScaleLineUnits|undefined} units.
+ */
+ol.control.ScaleLine.prototype.getUnits = function() {
+  return /** @type {ol.control.ScaleLineUnits|undefined} */ (
+      this.get(ol.control.ScaleLineProperty.UNITS));
+};
+goog.exportProperty(
+    ol.control.ScaleLine.prototype,
+    'getUnits',
+    ol.control.ScaleLine.prototype.getUnits);
+
+
 /**
  * @inheritDoc
  */
 ol.control.ScaleLine.prototype.handleMapPostrender = function(mapEvent) {
-  this.updateElement_(mapEvent.frameState);
+  var frameState = mapEvent.frameState;
+  if (goog.isNull(frameState)) {
+    this.view2DState_ = null;
+  } else {
+    this.view2DState_ = frameState.view2DState;
+  }
+  this.updateElement_();
 };
 
 
 /**
- * @param {?ol.FrameState} frameState Frame state.
  * @private
  */
-ol.control.ScaleLine.prototype.updateElement_ = function(frameState) {
+ol.control.ScaleLine.prototype.handleUnitsChanged_ = function() {
+  this.updateElement_();
+};
 
-  if (goog.isNull(frameState)) {
+
+/**
+ * @param {ol.control.ScaleLineUnits} units Units.
+ */
+ol.control.ScaleLine.prototype.setUnits = function(units) {
+  this.set(ol.control.ScaleLineProperty.UNITS, units);
+};
+goog.exportProperty(
+    ol.control.ScaleLine.prototype,
+    'setUnits',
+    ol.control.ScaleLine.prototype.setUnits);
+
+
+/**
+ * @private
+ */
+ol.control.ScaleLine.prototype.updateElement_ = function() {
+  var view2DState = this.view2DState_;
+
+  if (goog.isNull(view2DState)) {
     if (this.renderedVisible_) {
       goog.style.showElement(this.element_, false);
       this.renderedVisible_ = false;
@@ -130,7 +200,6 @@ ol.control.ScaleLine.prototype.updateElement_ = function(frameState) {
     return;
   }
 
-  var view2DState = frameState.view2DState;
   var center = view2DState.center;
   var projection = view2DState.projection;
   var pointResolution =
@@ -138,9 +207,10 @@ ol.control.ScaleLine.prototype.updateElement_ = function(frameState) {
   var projectionUnits = projection.getUnits();
 
   var cosLatitude;
+  var units = this.getUnits();
   if (projectionUnits == ol.ProjectionUnits.DEGREES &&
-      (this.units_ == ol.control.ScaleLineUnits.METRIC ||
+      (units == ol.control.ScaleLineUnits.METRIC ||
-       this.units_ == ol.control.ScaleLineUnits.IMPERIAL)) {
+       units == ol.control.ScaleLineUnits.IMPERIAL)) {
 
     // Convert pointResolution from degrees to meters
     this.toEPSG4326_ = null;
@@ -150,12 +220,12 @@ ol.control.ScaleLine.prototype.updateElement_ = function(frameState) {
 
   } else if ((projectionUnits == ol.ProjectionUnits.FEET ||
       projectionUnits == ol.ProjectionUnits.METERS) &&
-      this.units_ == ol.control.ScaleLineUnits.DEGREES) {
+      units == ol.control.ScaleLineUnits.DEGREES) {
 
     // Convert pointResolution from meters or feet to degrees
     if (goog.isNull(this.toEPSG4326_)) {
-      this.toEPSG4326_ = ol.projection.getTransformFromProjections(
+      this.toEPSG4326_ = ol.proj.getTransformFromProjections(
-          projection, ol.projection.get('EPSG:4326'));
+          projection, ol.proj.get('EPSG:4326'));
     }
     cosLatitude = Math.cos(goog.math.toRadians(this.toEPSG4326_(center)[1]));
     var radius = ol.sphere.NORMAL.radius;
@@ -166,21 +236,19 @@ ol.control.ScaleLine.prototype.updateElement_ = function(frameState) {
     projectionUnits = ol.ProjectionUnits.DEGREES;
 
   } else {
-
     this.toEPSG4326_ = null;
-
   }
 
   goog.asserts.assert(
-      ((this.units_ == ol.control.ScaleLineUnits.METRIC ||
+      ((units == ol.control.ScaleLineUnits.METRIC ||
-        this.units_ == ol.control.ScaleLineUnits.IMPERIAL) &&
+        units == ol.control.ScaleLineUnits.IMPERIAL) &&
        projectionUnits == ol.ProjectionUnits.METERS) ||
-      (this.units_ == ol.control.ScaleLineUnits.DEGREES &&
+      (units == ol.control.ScaleLineUnits.DEGREES &&
        projectionUnits == ol.ProjectionUnits.DEGREES));
 
   var nominalCount = this.minWidth_ * pointResolution;
   var suffix = '';
-  if (this.units_ == ol.control.ScaleLineUnits.DEGREES) {
+  if (units == ol.control.ScaleLineUnits.DEGREES) {
     if (nominalCount < 1 / 60) {
       suffix = '\u2033'; // seconds
       pointResolution *= 3600;
@@ -190,7 +258,7 @@ ol.control.ScaleLine.prototype.updateElement_ = function(frameState) {
     } else {
       suffix = '\u00b0'; // degrees
     }
-  } else if (this.units_ == ol.control.ScaleLineUnits.IMPERIAL) {
+  } else if (units == ol.control.ScaleLineUnits.IMPERIAL) {
     if (nominalCount < 0.9144) {
       suffix = 'in';
       pointResolution /= 0.0254;
@@ -201,10 +269,10 @@ ol.control.ScaleLine.prototype.updateElement_ = function(frameState) {
       suffix = 'mi';
       pointResolution /= 1609.344;
     }
-  } else if (this.units_ == ol.control.ScaleLineUnits.NAUTICAL) {
+  } else if (units == ol.control.ScaleLineUnits.NAUTICAL) {
     pointResolution /= 1852;
     suffix = 'nm';
-  } else if (this.units_ == ol.control.ScaleLineUnits.METRIC) {
+  } else if (units == ol.control.ScaleLineUnits.METRIC) {
     if (nominalCount < 1) {
       suffix = 'mm';
       pointResolution *= 1000;
@@ -214,7 +282,7 @@ ol.control.ScaleLine.prototype.updateElement_ = function(frameState) {
       suffix = 'km';
       pointResolution /= 1000;
     }
-  } else if (this.units_ == ol.control.ScaleLineUnits.US) {
+  } else if (units == ol.control.ScaleLineUnits.US) {
     if (nominalCount < 0.9144) {
       suffix = 'in';
       pointResolution *= 39.37;

src/ol/control/zoomcontrol.js

@@ -20,6 +20,9 @@ ol.control.ZOOM_DURATION = 250;
 
 
 /**
+ * Create a new control with 2 buttons, one for zoom in and one for zoom out.
+ * This control is part of the default controls of a map. To style this control
+ * use css selectors .ol-zoom-in and .ol-zoom-out.
  * @constructor
  * @extends {ol.control.Control}
  * @param {ol.control.ZoomOptions=} opt_options Zoom options.
@@ -28,9 +31,11 @@ ol.control.Zoom = function(opt_options) {
 
   var options = goog.isDef(opt_options) ? opt_options : {};
 
+  var className = goog.isDef(options.className) ? options.className : 'ol-zoom';
+
   var inElement = goog.dom.createDom(goog.dom.TagName.A, {
     'href': '#zoomIn',
-    'class': 'ol-zoom-in'
+    'class': className + '-in'
   });
   goog.events.listen(inElement, [
     goog.events.EventType.TOUCHEND,
@@ -39,14 +44,14 @@ ol.control.Zoom = function(opt_options) {
 
   var outElement = goog.dom.createDom(goog.dom.TagName.A, {
     'href': '#zoomOut',
-    'class': 'ol-zoom-out'
+    'class': className + '-out'
   });
   goog.events.listen(outElement, [
     goog.events.EventType.TOUCHEND,
     goog.events.EventType.CLICK
   ], this.handleOut_, false, this);
 
-  var cssClasses = 'ol-zoom ' + ol.css.CLASS_UNSELECTABLE;
+  var cssClasses = className + ' ' + ol.css.CLASS_UNSELECTABLE;
   var element = goog.dom.createDom(goog.dom.TagName.DIV, cssClasses, inElement,
       outElement);
 

src/ol/control/zoomslidercontrol.js

@@ -29,19 +29,29 @@ ol.control.ZOOMSLIDER_ANIMATION_DURATION = 200;
 
 
 /**
+ * A slider type of control for zooming.
+ *
+ * Example:
+ *
+ *     var zoomslider = new ol.control.ZoomSlider({
+ *       map: map
+ *     });
+ *
  * @constructor
  * @extends {ol.control.Control}
- * @param {ol.control.ZoomSliderOptions} options Zoom slider options.
+ * @param {ol.control.ZoomSliderOptions=} opt_options Zoom slider options.
  */
-ol.control.ZoomSlider = function(options) {
+ol.control.ZoomSlider = function(opt_options) {
+
+  var options = goog.isDef(opt_options) ? opt_options : {};
 
   /**
    * Will hold the current resolution of the view.
    *
-   * @type {number}
+   * @type {number|undefined}
    * @private
    */
-  this.currentResolution_;
+  this.currentResolution_ = undefined;
 
   /**
    * The direction of the slider. Will be determined from actual display of the
@@ -58,17 +68,23 @@ ol.control.ZoomSlider = function(options) {
    */
   this.draggerListenerKeys_ = null;
 
-  var elem = this.createDom_();
+  var className = goog.isDef(options.className) ?
-  this.dragger_ = this.createDraggable_(elem);
+      options.className : 'ol-zoomslider';
+  var sliderCssCls = className + ' ' + ol.css.CLASS_UNSELECTABLE;
+  var thumbCssCls = className + '-thumb' + ' ' + ol.css.CLASS_UNSELECTABLE;
+  var element = goog.dom.createDom(goog.dom.TagName.DIV, sliderCssCls,
+      goog.dom.createDom(goog.dom.TagName.DIV, thumbCssCls));
+
+  this.dragger_ = this.createDraggable_(element);
 
   // FIXME currently only a do nothing function is bound.
-  goog.events.listen(elem, [
+  goog.events.listen(element, [
     goog.events.EventType.TOUCHEND,
     goog.events.EventType.CLICK
   ], this.handleContainerClick_, false, this);
 
   goog.base(this, {
-    element: elem,
+    element: element,
     map: options.map
   });
 };
@@ -86,23 +102,6 @@ ol.control.ZoomSlider.direction = {
 };
 
 
-/**
- * The CSS class that we'll give the zoomslider container.
- *
- * @const {string}
- */
-ol.control.ZoomSlider.CSS_CLASS_CONTAINER = 'ol-zoomslider';
-
-
-/**
- * The CSS class that we'll give the zoomslider thumb.
- *
- * @const {string}
- */
-ol.control.ZoomSlider.CSS_CLASS_THUMB =
-    ol.control.ZoomSlider.CSS_CLASS_CONTAINER + '-thumb';
-
-
 /**
  * @inheritDoc
  */
@@ -299,24 +298,3 @@ ol.control.ZoomSlider.prototype.createDraggable_ = function(elem) {
   ];
   return dragger;
 };
-
-
-/**
- * Setup the DOM-structure we need for the zoomslider.
- *
- * @param {Element=} opt_elem The element for the slider.
- * @return {Element} The correctly set up DOMElement.
- * @private
- */
-ol.control.ZoomSlider.prototype.createDom_ = function(opt_elem) {
-  var elem,
-      sliderCssCls = ol.control.ZoomSlider.CSS_CLASS_CONTAINER + ' ' +
-          ol.css.CLASS_UNSELECTABLE,
-      thumbCssCls = ol.control.ZoomSlider.CSS_CLASS_THUMB + ' ' +
-          ol.css.CLASS_UNSELECTABLE;
-
-  elem = goog.dom.createDom(goog.dom.TagName.DIV, sliderCssCls,
-      goog.dom.createDom(goog.dom.TagName.DIV, thumbCssCls));
-
-  return elem;
-};

src/ol/coordinate.exports

@@ -1,4 +1,3 @@
-@exportSymbol ol.coordinate
 @exportSymbol ol.coordinate.createStringXY
 @exportSymbol ol.coordinate.toStringHDMS
 @exportSymbol ol.coordinate.toStringXY

src/ol/coordinate.js

@@ -12,7 +12,8 @@ ol.CoordinateFormatType;
 
 
 /**
- * @typedef {Array.<number>}
+ * An array representing a coordinate.
+ * @typedef {Array.<number>} ol.Coordinate
  */
 ol.Coordinate;
 
@@ -34,9 +35,14 @@ ol.coordinate.add = function(coordinate, delta) {
  * @return {ol.CoordinateFormatType} Coordinate format.
  */
 ol.coordinate.createStringXY = function(opt_precision) {
-  return function(coordinate) {
+  return (
-    return ol.coordinate.toStringXY(coordinate, opt_precision);
+      /**
-  };
+       * @param {ol.Coordinate|undefined} coordinate Coordinate.
+       * @return {string} String XY.
+       */
+      function(coordinate) {
+        return ol.coordinate.toStringXY(coordinate, opt_precision);
+      });
 };
 
 
@@ -84,6 +90,18 @@ ol.coordinate.scale = function(coordinate, s) {
 };
 
 
+/**
+ * @param {ol.Coordinate} coord1 First coordinate.
+ * @param {ol.Coordinate} coord2 Second coordinate.
+ * @return {number} Squared distance between coord1 and coord2.
+ */
+ol.coordinate.squaredDistance = function(coord1, coord2) {
+  var dx = coord1[0] - coord2[0];
+  var dy = coord1[1] - coord2[1];
+  return dx * dx + dy * dy;
+};
+
+
 /**
  * @param {ol.Coordinate|undefined} coordinate Coordinate.
  * @return {string} Hemisphere, degrees, minutes and seconds.