Merge pull request #881 from fredj/examples_css

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

.travis.yml

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

README.md

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

bin/generate-exports.py

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

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

buildcfg/ol-all.json

@@ -7,6 +7,7 @@
     "../build/src/external/externs/types.js",
     "../externs/bingmaps.js",
     "../externs/geojson.js",
+    "../externs/oli.js",
     "../externs/proj4js.js",
     "../externs/tilejson.js"
   ],

buildcfg/ol-simple.json

@@ -16,6 +16,7 @@
     "//json.js",
     "../externs/bingmaps.js",
     "../externs/geojson.js",
+    "../externs/oli.js",
     "../externs/proj4js.js",
     "../externs/tilejson.js"
   ],

buildcfg/ol-whitespace.json

@@ -17,6 +17,7 @@
     "//json.js",
     "../externs/bingmaps.js",
     "../externs/geojson.js",
+    "../externs/oli.js",
     "../externs/proj4js.js",
     "../externs/tilejson.js"
   ],

buildcfg/ol.json

@@ -17,6 +17,7 @@
     "../build/src/external/externs/types.js",
     "../externs/bingmaps.js",
     "../externs/geojson.js",
+    "../externs/oli.js",
     "../externs/proj4js.js",
     "../externs/tilejson.js"
   ],

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

doc/index.md

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

examples/animation.html

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

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

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

examples/bing-maps.js

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

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

examples/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

@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="chrome=1">
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
     <link rel="stylesheet" href="../resources/layout.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
@@ -35,10 +36,11 @@
 
       <div class="row-fluid">
 
-        <div class="span4">
+        <div class="span12">
           <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,87 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="chrome=1">
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
+    <link rel="stylesheet" href="../resources/layout.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
+    <style type="text/css">
+      .rotate-north {
+        position: absolute;
+        top: 65px;
+        left: 8px;
+        background: rgba(255,255,255,0.4);
+        border-radius: 4px;
+        padding: 2px;
+      }
+      .rotate-north a {
+        display: block;
+        color: white;
+        font-size: 16px;
+        font-family: 'Lucida Grande',Verdana,Geneva,Lucida,Arial,Helvetica,sans-serif;
+        font-weight: bold;
+        margin: 1px;
+        text-decoration: none;
+        text-align: center;
+        border-radius: 2px;
+        height: 22px;
+        width: 22px;
+        background: rgba(0,60,136,0.5);
+      }
+      .rotate-north a:hover {
+        background: rgba(0,60,136,0.7);
+      }
+    </style>
+    <title>ol3 custom controls example</title>
+  </head>
+  <body>
+
+    <div class="navbar navbar-inverse navbar-fixed-top">
+      <div class="navbar-inner">
+        <div class="container">
+          <a class="brand" href="./">OpenLayers 3 Examples</a>
+          <ul class="nav pull-right">
+            <li><iframe class="github-watch-button" src="http://ghbtns.com/github-btn.html?user=openlayers&repo=ol3&type=watch&count=true"
+  allowtransparency="true" frameborder="0" scrolling="0" height="20" width="90"></iframe></li>
+            <li><a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-hashtags="openlayers">&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">Custom controls</h4>
+          <p id="shortdesc">This example shows how to create custom controls.</p>
+          <div id="docs">
+            <p>
+              This example creates a "rotate to north" button.
+              See the <a href="custom-controls.js" target="_blank">custom-controls.js
+              source</a> to see how this is done.
+            </p>
+          </div>
+          <div id="tags">
+            custom, control
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <script src="loader.js?id=custom-controls" type="text/javascript"></script>
+    <script src="../resources/social-links.js" type="text/javascript"></script>
+
+  </body>
+
+</html>

examples/custom-controls.js

@@ -0,0 +1,82 @@
+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 rotate to north control.
+//
+
+
+
+/**
+ * @constructor
+ * @extends {ol.control.Control}
+ * @param {Object=} opt_options Control options.
+ */
+app.RotateNorthControl = function(opt_options) {
+
+  var options = opt_options || {};
+
+  var anchor = document.createElement('a');
+  anchor.href = '#rotate-north';
+  anchor.innerHTML = 'N';
+
+  var this_ = this;
+  var handleRotateNorth = function(e) {
+    // prevent #rotate-north anchor from getting appended to the url
+    e.preventDefault();
+    this_.getMap().getView().getView2D().setRotation(0);
+  };
+
+  anchor.addEventListener('click', handleRotateNorth, false);
+  anchor.addEventListener('touchstart', handleRotateNorth, false);
+
+  var element = document.createElement('div');
+  element.className = 'rotate-north ol-unselectable';
+  element.appendChild(anchor);
+
+  ol.control.Control.call(this, {
+    element: element,
+    map: options.map,
+    target: options.target
+  });
+
+};
+ol.inherits(app.RotateNorthControl, ol.control.Control);
+
+
+//
+// Create map, giving it a rotate to north control.
+//
+
+
+var map = new ol.Map({
+  controls: ol.control.defaults({}, [
+    new app.RotateNorthControl()
+  ]),
+  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,
+    rotation: 1
+  })
+});

examples/device-orientation.html

@@ -0,0 +1,63 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="chrome=1">
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
+    <link rel="stylesheet" href="../resources/layout.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
+    <title>Device-Orientation example</title>
+  </head>
+  <body>
+
+    <div class="navbar navbar-inverse navbar-fixed-top">
+      <div class="navbar-inner">
+        <div class="container">
+          <a class="brand" href="./">OpenLayers 3 Examples</a>
+          <ul class="nav pull-right">
+            <li><iframe class="github-watch-button" src="http://ghbtns.com/github-btn.html?user=openlayers&repo=ol3&type=watch&count=true"
+  allowtransparency="true" frameborder="0" scrolling="0" height="20" width="90"></iframe></li>
+            <li><a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-hashtags="openlayers">&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">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,57 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="chrome=1">
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
+    <link rel="stylesheet" href="../resources/layout.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
+    <title>Drag rotate and zoom example</title>
+  </head>
+  <body>
+
+    <div class="navbar navbar-inverse navbar-fixed-top">
+      <div class="navbar-inner">
+        <div class="container">
+          <a class="brand" href="./">OpenLayers 3 Examples</a>
+          <ul class="nav pull-right">
+            <li><iframe class="github-watch-button" src="http://ghbtns.com/github-btn.html?user=openlayers&repo=ol3&type=watch&count=true"
+  allowtransparency="true" frameborder="0" scrolling="0" height="20" width="90"></iframe></li>
+            <li><a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-hashtags="openlayers">&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">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/epsg-4326.html

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

examples/export-map.html

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

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

@@ -0,0 +1,69 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="chrome=1">
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
+    <link rel="stylesheet" href="../resources/layout.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
+    <style>
+      .map:-moz-full-screen {
+        height: 100%;
+      }
+      .map:-webkit-full-screen {
+        height: 100%;
+      }
+      .map:full-screen {
+        height: 100%;
+      }
+    </style>
+    <title>Full screen drag rotate and zoom example</title>
+  </head>
+  <body>
+
+    <div class="navbar navbar-inverse navbar-fixed-top">
+      <div class="navbar-inner">
+        <div class="container">
+          <a class="brand" href="./">OpenLayers 3 Examples</a>
+          <ul class="nav pull-right">
+            <li><iframe class="github-watch-button" src="http://ghbtns.com/github-btn.html?user=openlayers&repo=ol3&type=watch&count=true"
+  allowtransparency="true" frameborder="0" scrolling="0" height="20" width="90"></iframe></li>
+            <li><a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-hashtags="openlayers">&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">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: 'Ar33pRUvQOdESG8m_T15MUmNz__E1twPo42bFx9jvdDePhX0PNgAcEm44OVTS7tt',
+        style: 'Aerial'
+      })
+    })
+  ],
+  // Use the canvas renderer because it's currently the fastest
+  renderer: ol.RendererHint.CANVAS,
+  target: 'map',
+  view: new ol.View2D({
+    center: [-33519607, 5616436],
+    rotation: -Math.PI / 8,
+    zoom: 8
+  })
+});

examples/full-screen.html

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

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

examples/geolocation.html

@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="chrome=1">
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
     <link rel="stylesheet" href="../resources/layout.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
@@ -12,6 +13,9 @@
         font-size: 22px;
         text-shadow: 2px 2px 3px #013;
       }
+      .tooltip-inner {
+        white-space: nowrap;
+      }
     </style>
     <title>Geolocation example</title>
   </head>
@@ -41,17 +45,26 @@
 
       <div class="row-fluid">
 
-        <div class="span4">
+        <div class="span12">
           <h4 id="title">Geolocation example</h4>
+          <label class="checkbox" for="track">
+            <input id="track" type="checkbox"/>track position
+          </label>
+          <p>position accuracy : <code id="accuracy"></code></p>
+          <p>altitude : <code id="altitude"></code></p>
+          <p>altitude accuracy : <code id="altitudeAccuracy"></code></p>
+          <p>heading : <code id="heading"></code></p>
+          <p>speed : <code id="speed"></code></p>
+
           <p id="shortdesc">Example of a geolocation map.</p>
           <div id="docs">
             <p>See the <a href="geolocation.js" target="_blank">geolocation.js source</a> to see how this is done.</p>
           </div>
-          <button id="locate"><i class="icon-screenshot"></i> locate</button>
           <div id="tags">geolocation, openstreetmap</div>
         </div>
-
+        <div class="span4 pull-right">
-      </div>
+          <div id="info" class="alert alert-error" style="display: none;"></div>
+        </div>
 
     </div>
 

examples/geolocation.js

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

examples/gml.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="../css/ol.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
+    <link rel="stylesheet" href="../resources/layout.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
+    <title>GML example</title>
+  </head>
+  <body>
+
+    <div class="navbar navbar-inverse navbar-fixed-top">
+      <div class="navbar-inner">
+        <div class="container">
+          <a class="brand" href="./">OpenLayers 3 Examples</a>
+          <ul class="nav pull-right">
+            <li><iframe class="github-watch-button" src="http://ghbtns.com/github-btn.html?user=openlayers&repo=ol3&type=watch&count=true"
+  allowtransparency="true" frameborder="0" scrolling="0" height="20" width="90"></iframe></li>
+            <li><a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-hashtags="openlayers">&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">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,41 @@
+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.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({
+    parser: new ol.parser.ogc.GML_v3({axisOrientation: 'neu'}),
+    url: 'data/gml/topp-states-wfs.xml'
+  }),
+  style: new ol.style.Style({rules: [
+    new ol.style.Rule({
+      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
+  })
+});

examples/gpx.html

@@ -0,0 +1,60 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="chrome=1">
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
+    <link rel="stylesheet" href="../resources/layout.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
+    <title>GPX example</title>
+  </head>
+  <body>
+
+    <div class="navbar navbar-inverse navbar-fixed-top">
+      <div class="navbar-inner">
+        <div class="container">
+          <a class="brand" href="./">OpenLayers 3 Examples</a>
+          <ul class="nav pull-right">
+            <li><iframe class="github-watch-button" src="http://ghbtns.com/github-btn.html?user=openlayers&repo=ol3&type=watch&count=true"
+  allowtransparency="true" frameborder="0" scrolling="0" height="20" width="90"></iframe></li>
+            <li><a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-hashtags="openlayers">&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 offset4">
+          <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,46 @@
+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.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({
+    parser: new ol.parser.GPX(),
+    url: 'data/gpx/yahoo.xml'
+  }),
+  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;';
+    }
+  });
+});

examples/hue-saturation.html

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

examples/hue-saturation.js

@@ -2,13 +2,13 @@ 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');
 
 
 var layer = new ol.layer.TileLayer({
   source: new ol.source.BingMaps({
-    key: 'AlQLZ0-5yk301_ESrmNLma3LYxEKNSg7w-e_knuRfyYFtld-UFvXVs38NOulku3Q',
+    key: 'Ar33pRUvQOdESG8m_T15MUmNz__E1twPo42bFx9jvdDePhX0PNgAcEm44OVTS7tt',
     style: 'Aerial'
   })
 });
@@ -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/index.html

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

examples/kml-timezones.html

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

examples/kml-timezones.js

@@ -0,0 +1,105 @@
+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.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({
+    parser: new ol.parser.KML({dimension: 2}),
+    url: 'data/kml/timezones.kml'
+  }),
+  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');
+      }
+    }
+  });
+});

examples/kml.html

@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="chrome=1">
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
     <link rel="stylesheet" href="../resources/layout.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
@@ -43,12 +44,16 @@
           </div>
           <div id="tags">KML</div>
         </div>
+        <div class="span4 offset4">
+          <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,9 @@
-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.source.TiledWMS');
 goog.require('ol.source.Vector');
 
@@ -21,30 +19,39 @@ var raster = new ol.layer.TileLayer({
   })
 });
 
-var epsg4326 = ol.projection.get('EPSG:4326');
-
 var vector = new ol.layer.Vector({
   source: new ol.source.Vector({
-    projection: epsg4326
+    parser: new ol.parser.KML({
-  })
+      maxDepth: 1, dimension: 2, extractStyles: true, extractAttributes: true
+    }),
+    url: 'data/kml/lines.kml'
+  }),
+  transformFeatureInfo: function(features) {
+    var info = [];
+    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({
-    projection: epsg4326,
+    projection: 'EPSG:4326',
     center: [-112.169, 36.099],
     zoom: 11
   })
 });
 
-var kml = new ol.parser.KML({
+map.on(['click', 'mousemove'], function(evt) {
-  maxDepth: 1, dimension: 2, extractStyles: true, extractAttributes: true});
+  map.getFeatureInfo({
-
+    pixel: evt.getPixel(),
-$.ajax({
+    layers: [vector],
-  url: 'data/kml/lines.kml'
+    success: function(featureInfo) {
-}).done(function(data) {
+      document.getElementById('info').innerHTML = featureInfo[0] || '&nbsp';
-  vector.parseFeatures(data, kml, epsg4326);
+    }
+  });
 });

examples/loader.js

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

examples/localized-openstreetmap.html

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

examples/mapquest.html

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

examples/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,28 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="chrome=1">
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
+    <title>Mobile full screen example</title>
+    <style type="text/css">
+      html, body, .map {
+        margin: 0;
+        padding: 0;
+        width: 100%;
+        height: 100%;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="map" class="map"></div>
+    <script src="loader.js?id=mobile-full-screen" type="text/javascript"></script>
+
+    <div style="display: none;">
+      <div id="title">Mobile full screen example</div>
+      <div id="shortdesc">Example of a full screen map.</div>
+      <div id="tags">fullscreen, bing, geolocation, mobile</div>
+    </div>
+  </body>
+</html>

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: 'Ar33pRUvQOdESG8m_T15MUmNz__E1twPo42bFx9jvdDePhX0PNgAcEm44OVTS7tt',
+        style: 'Road'
+      })
+    })
+  ],
+  renderers: ol.RendererHints.createFromQueryData(),
+  target: 'map',
+  view: view
+});
+
+var geolocation = new ol.Geolocation({
+  tracking: true
+});
+geolocation.bindTo('projection', view);
+geolocation.once('change:position', function() {
+  view.setCenter(geolocation.getPosition());
+  view.setResolution(2.388657133911758);
+});

examples/mouse-position.html

@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="chrome=1">
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
     <link rel="stylesheet" href="../resources/layout.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
@@ -30,21 +31,28 @@
       <div class="row-fluid">
         <div class="span12">
           <div id="map" class="map"></div>
-          <small id="mouse-position"></small>
         </div>
       </div>
 
       <div class="row-fluid">
-
+        <div class="span6">
-        <div class="span4">
           <h4 id="title">Mouse position example</h4>
           <p id="shortdesc">Example of a mouse position control, outside the map.</p>
           <div id="docs">
             <p>See the <a href="mouse-position.js" target="_blank">mouse-position.js source</a> to see how this is done.</p>
           </div>
           <div id="tags">mouse-position, openstreetmap</div>
+          <form>
+            <label>Projection </label>
+            <select id="projection">
+              <option value="EPSG:4326">EPSG:4326</option>
+              <option value="EPSG:3857">EPSG:3857</option>
+            </select>
+            <label>Precision </label>
+            <input id="precision" type="number" min="0" max="12" value="4"/>
+          </form>
         </div>
-
+        <div class="span6" id="mouse-position">&nbsp;</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/navigation-controls.html

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

examples/navigation-controls.js

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

examples/overlay.html

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

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

examples/preload.js

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

examples/rotation.html

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

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

examples/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.html

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

examples/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/side-by-side.html

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

examples/simple.html

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

examples/stamen.html

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

examples/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.html

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

examples/style-rules.js

@@ -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,87 +34,137 @@ 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')
+    data: {
+      'type': 'FeatureCollection',
+      'features': [{
+        'type': 'Feature',
+        'properties': {
+          'color': '#BADA55',
+          'where': 'inner'
+        },
+        'geometry': {
+          'type': 'LineString',
+          'coordinates': [[-10000000, -10000000], [10000000, 10000000]]
+        }
+      }, {
+        'type': 'Feature',
+        'properties': {
+          'color': '#BADA55',
+          'where': 'inner'
+        },
+        'geometry': {
+          'type': 'LineString',
+          'coordinates': [[-10000000, 10000000], [10000000, -10000000]]
+        }
+      }, {
+        'type': 'Feature',
+        'properties': {
+          'color': '#013',
+          'where': 'outer'
+        },
+        'geometry': {
+          'type': 'LineString',
+          'coordinates': [[-10000000, -10000000], [-10000000, 10000000]]
+        }
+      }, {
+        'type': 'Feature',
+        'properties': {
+          'color': '#013',
+          'where': 'outer'
+        },
+        'geometry': {
+          'type': 'LineString',
+          'coordinates': [[-10000000, 10000000], [10000000, 10000000]]
+        }
+      }, {
+        'type': 'Feature',
+        'properties': {
+          'color': '#013',
+          'where': 'outer'
+        },
+        'geometry': {
+          'type': 'LineString',
+          'coordinates': [[10000000, 10000000], [10000000, -10000000]]
+        }
+      }, {
+        'type': 'Feature',
+        'properties': {
+          'color': '#013',
+          'where': 'outer'
+        },
+        'geometry': {
+          '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]
+        }
+      }]
+    },
+    parser: new ol.parser.GeoJSON(),
+    projection: ol.proj.get('EPSG:3857')
   })
 });
 
-vector.parseFeatures({
-  'type': 'FeatureCollection',
-  'features': [{
-    'type': 'Feature',
-    'properties': {
-      'color': '#BADA55',
-      'where': 'inner'
-    },
-    'geometry': {
-      'type': 'LineString',
-      'coordinates': [[-10000000, -10000000], [10000000, 10000000]]
-    }
-  }, {
-    'type': 'Feature',
-    'properties': {
-      'color': '#BADA55',
-      'where': 'inner'
-    },
-    'geometry': {
-      'type': 'LineString',
-      'coordinates': [[-10000000, 10000000], [10000000, -10000000]]
-    }
-  }, {
-    'type': 'Feature',
-    'properties': {
-      'color': '#013',
-      'where': 'outer'
-    },
-    'geometry': {
-      'type': 'LineString',
-      'coordinates': [[-10000000, -10000000], [-10000000, 10000000]]
-    }
-  }, {
-    'type': 'Feature',
-    'properties': {
-      'color': '#013',
-      'where': 'outer'
-    },
-    'geometry': {
-      'type': 'LineString',
-      'coordinates': [[-10000000, 10000000], [10000000, 10000000]]
-    }
-  }, {
-    'type': 'Feature',
-    'properties': {
-      'color': '#013',
-      'where': 'outer'
-    },
-    'geometry': {
-      'type': 'LineString',
-      'coordinates': [[10000000, 10000000], [10000000, -10000000]]
-    }
-  }, {
-    'type': 'Feature',
-    'properties': {
-      'color': '#013',
-      'where': 'outer'
-    },
-    'geometry': {
-      'type': 'LineString',
-      'coordinates': [[10000000, -10000000], [-10000000, -10000000]]
-    }
-  }]
-}, new ol.parser.GeoJSON(), ol.projection.get('EPSG:3857'));
-
-
 var map = new ol.Map({
   layers: [vector],
   controls: ol.control.defaults({

examples/teleport.html

@@ -0,0 +1,66 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="chrome=1">
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
+    <link rel="stylesheet" href="../resources/layout.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
+    <title>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="span12">
+          <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,56 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="chrome=1">
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
+    <link rel="stylesheet" href="../resources/layout.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
+    <title>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="span12">
+          <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/tilejson.html

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

examples/vector-layer.html

@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="chrome=1">
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
     <link rel="stylesheet" href="../resources/layout.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
@@ -37,12 +38,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 offset4">
+          <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.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')
+    parser: new ol.parser.GeoJSON(),
+    url: 'data/countries.geojson'
   }),
   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,21 +63,12 @@ var map = new ol.Map({
   })
 });
 
-
+map.on(['click', 'mousemove'], function(evt) {
-var geojson = new ol.parser.GeoJSON();
+  map.getFeatureInfo({
-var url = 'data/countries.json';
+    pixel: evt.getPixel(),
-var xhr = new XMLHttpRequest();
+    layers: [vector],
-xhr.open('GET', url, true);
+    success: function(featureInfo) {
-
+      document.getElementById('info').innerHTML = featureInfo[0];
-
+    }
-/**
+  });
- * onload handler for the XHR request.
+});
- */
-xhr.onload = function() {
-  if (xhr.status == 200) {
-    // this is silly to have to tell the layer the destination projection
-    var projection = map.getView().getProjection();
-    vector.parseFeatures(xhr.responseText, geojson, projection);
-  }
-};
-xhr.send();

examples/wms-capabilities.html

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

examples/wms-custom-proj.html

@@ -4,10 +4,11 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="chrome=1">
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
     <link rel="stylesheet" href="../resources/layout.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
-    <title>Tiled WMS with custom projection example</title>
+    <title>Tiled WMS with Proj4js projection example</title>
   </head>
   <body>
 
@@ -35,13 +36,13 @@
 
       <div class="row-fluid">
 
-        <div class="span4">
+        <div class="span12">
-          <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,56 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="chrome=1">
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
+    <link rel="stylesheet" href="../resources/layout.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
+    <title>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="span12">
+          <h4 id="title">WMS without client projection example</h4>
+          <p id="shortdesc">Example of two WMS layers using the projection EPSG:21781, which is unknown to the client.</p>
+          <div id="docs">
+            <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

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

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

examples/wms-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.html

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

examples/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.html

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

examples/wmts-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-from-capabilities.html

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

examples/wmts-ign.html

@@ -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="../css/ol.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
+    <link rel="stylesheet" href="../resources/layout.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
+    <title>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();