Merge pull request #1056 from openlayers/doc

Basic docs

.gitignore

@@ -3,3 +3,4 @@
 /examples/*.html.png
 /examples/example-list.js
 /examples/example-list.xml
+/node_modules/

.travis.yml

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

README.md

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

apidoc/conf.json

@@ -1,8 +1,7 @@
 {
     "opts": {
         "recurse": true,
-        "template": "doc/template",
-        "tutorials": "doc/tutorials"
+        "template": "apidoc/template"
     },
     "tags": {
         "allowUnknownTags": true
@@ -13,8 +12,8 @@
     },
     "plugins": [
         "plugins/markdown",
-        "doc/plugins/inheritdoc",
-        "doc/plugins/exports"
+        "apidoc/plugins/inheritdoc",
+        "apidoc/plugins/exports"
     ],
     "markdown": {
         "parser": "gfm"

apidoc/index.md

@@ -1,12 +1,14 @@
-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.
 
 Projections
 -----------
-A {@link ol.Projection} defines which point on earth is represented by a pair of coordinates. Coordinates within OpenLayers can be used in various projections where some common projections are always supported, others can be used via Proj4js.
+A {@link ol.proj.Projection} defines which point on earth is represented by a pair of coordinates.
+Coordinates within OpenLayers can be used in various projections where some common projections are always supported,
+others can be used via [Proj4js](http://trac.osgeo.org/proj4js/).
 
 Maps and Layers
 ---------------
@@ -14,4 +16,5 @@ A map in OpenLayers is essentially a staple of layers that is viewed from the to
 
 Contributing
 ------------
-See CONTRIBUTING.md for instructions on building and tesing OpenLayers. The file does also describe how to commit your changes to OpenLayers.
+See [CONTRIBUTING.md](https://github.com/openlayers/ol3/blob/master/CONTRIBUTING.md) for instructions
+on building and testing OpenLayers. The file does also describes how to commit your changes to OpenLayers.

apidoc/template/tmpl/layout.tmpl

@@ -21,13 +21,7 @@
 <div class="navbar navbar-inverse navbar-fixed-top">
   <div class="navbar-inner">
     <div class="container">
-      <a class="brand" href="./">OpenLayers 3 API Documentation - <?js= title ?></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>
+      <a class="brand" href="/"><img src="../resources/logo.png"> OpenLayers 3</a>
     </div>
   </div>
 </div>
@@ -47,6 +41,5 @@ allowtransparency="true" frameborder="0" scrolling="0" height="20" width="90"></
 </footer>
 
 <script> prettyPrint(); </script>
-<script src="../resources/social-links.js" type="text/javascript"></script>
 </body>
 </html>

bin/generate-exports.py

@@ -1,7 +1,5 @@
 #!/usr/bin/env python
 
-from collections import defaultdict
-from itertools import ifilter
 from operator import attrgetter
 from optparse import OptionParser
 import re
@@ -92,7 +90,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 +101,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(','.join('\n      %s: options.%s' % (key, key) for key in sorted(self.object_literal.prop_types.keys())))
-            lines.append('\n    };\n')
-            lines.append('  } else {\n')
-            lines.append('    arg = /** @type {%s} */ (options);\n' % (self.object_literal.name,))
-            lines.append('  }\n')
+            lines.extend('\n'.join('    arg.%s = options.%s;' % (key, key) for key in sorted(self.object_literal.prop_types.keys())))
+            lines.append('\n  }\n')
             lines.append('  goog.base(this, arg);\n')
             lines.append('};\n')
-            lines.append('goog.inherits(%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(),))
@@ -122,11 +118,84 @@ class Class(Exportable):
         return '%sExport' % self.name
 
 
+class Function(Exportable):
+
+    def __init__(self, name, object_literal, return_type, objects):
+        Exportable.__init__(self, name)
+        self.object_literal = object_literal
+        self.return_type = return_type
+        self.objects = objects
+
+    __repr__ = simplerepr
+
+    def property_object_literal(self, object_literal, prop):
+        prop_object_literal = None
+        types = object_literal.prop_types[prop].split('|')
+        for t in types:
+            if t in self.objects:
+                o = self.objects[t]
+                if isinstance(o, ObjectLiteral):
+                    if prop_object_literal:
+                        raise RuntimeError('Multiple "literal" types found for '
+                            'option %s.%s: %s, %s.' %
+                            (object_literal.name, prop,
+                             prop_object_literal.name, o.name))
+                    prop_object_literal = o
+        return prop_object_literal
+
+    def recursive_export(self, lines, prop, object_literal, local_var=None, depth=1):
+        indent = '  ' * depth
+        if not local_var:
+            local_var = prop.split('.')[-1]
+        lines.append('%s/** @type {%s} */\n' % (indent, object_literal.name))
+        lines.append('%svar %s =\n' % (indent, local_var))
+        lines.append('%s    /** @type {%s} */\n' % (indent, object_literal.name))
+        lines.append('%s    (%s);\n' % (indent, prop))
+        lines.append('%sif (goog.isDefAndNotNull(%s)) {\n' % (indent, prop))
+        for key in sorted(object_literal.prop_types.keys()):
+            prop_object_literal = self.property_object_literal(object_literal, key)
+            if prop_object_literal:
+                lv = self.recursive_export(lines, '%s.%s' % (prop, key),
+                    prop_object_literal, depth=depth + 1)
+                lines.append('%s  %s.%s =\n%s      %s;\n' %
+                    (indent, local_var, key, indent, lv))
+            else:
+                lines.append('%s  %s.%s =\n%s      %s.%s;\n' %
+                    (indent, local_var, key, indent, prop, key))
+        lines.append('%s}\n' % (indent,))
+        return local_var
+
+    def export(self):
+        lines = []
+        local_var = 'arg'
+        lines.append('\n\n')
+        lines.append('/**\n')
+        lines.append(' * @param {%s} options Options.\n' % (self.object_literal.extern_name(),))
+        if self.return_type:
+            lines.append(' * @return {%s} Return value.\n' % (self.return_type,))
+        lines.append(' */\n')
+        lines.append('%s = function(options) {\n' % (self.export_name(),))
+        self.recursive_export(lines, 'options', self.object_literal,
+            local_var=local_var)
+        if self.return_type:
+            lines.append('  return %s(%s);\n' % (self.name, local_var))
+        else:
+            lines.append('  %s(arg);\n' % (self.name,))
+        lines.append('};\n')
+        lines.append('goog.exportSymbol(\n')
+        lines.append('    \'%s\',\n' % (self.name,))
+        lines.append('    %s);\n' % (self.export_name(),))
+        return ''.join(lines)
+
+    def export_name(self):
+        return '%sExport' % self.name
+
 class ObjectLiteral(Exportable):
 
-    def __init__(self, name):
+    def __init__(self, name, objects):
         Exportable.__init__(self, name)
         self.prop_types = {}
+        self.objects = objects
 
     __repr__ = simplerepr
 
@@ -140,7 +209,12 @@ class ObjectLiteral(Exportable):
         for prop in sorted(self.prop_types.keys()):
             lines.append('\n\n')
             lines.append('/**\n')
-            lines.append(' * @type {%s}\n' % (self.prop_types[prop],))
+            prop_types = self.prop_types[prop].split('|')
+            for i, t in enumerate(prop_types):
+                if t in self.objects and isinstance(self.objects[t], ObjectLiteral):
+                    prop_types[i] = self.objects[t].extern_name()
+            prop_types = '|'.join(prop_types)
+            lines.append(' * @type {%s}\n' % (prop_types,))
             lines.append(' */\n')
             lines.append('%s.prototype.%s;\n' % (self.extern_name(), prop))
         return ''.join(lines)
@@ -223,10 +297,10 @@ def main(argv):
                     name = m.group('name')
                     if name in objects:
                         raise RuntimeError(line)  # Name already defined
-                    object_literal = ObjectLiteral(name)
+                    object_literal = ObjectLiteral(name, objects)
                     objects[name] = object_literal
                     continue
-                m = re.match(r'\*\s*@property\s*{(?P<type>.*)}\s*(?P<prop>\S+)', line)
+                m = re.match(r'\*\s*@property\s*{(?P<type>.*?)}\s*(?P<prop>\S+)', line)
                 if m:
                     assert object_literal is not None
                     prop = m.group('prop')
@@ -264,6 +338,23 @@ def main(argv):
                     objects[name] = symbol
                 symbol.props.add(prop)
                 continue
+            m = re.match(r'@exportFunction\s+(?P<name>\S+)(?:\s+(?P<object_literal_name>\S+))?(?:\s+(?P<return_type>\S+))?\Z', line)
+            if m:
+                name = m.group('name')
+                if name in objects:
+                    raise RuntimeError(line)  # Name already defined
+                object_literal_name = m.group('object_literal_name')
+                if object_literal_name not in objects:
+                    raise RuntimeError(line)
+                object_literal = objects[object_literal_name]
+                if not isinstance(object_literal, ObjectLiteral):
+                    raise RuntimeError(line)
+                return_type = m.group('return_type')
+                function  = Function(name, object_literal, return_type, objects)
+                objects[name] = function
+                # The require should only be for the namespace, not the function
+                requires.add('.'.join(name.split('.')[0:-1]))
+                continue
             m = re.match(r'@exportSymbol\s+(?P<name>\S+)(?:\s+(?P<export_as>\S+))?\Z', line)
             if m:
                 name = m.group('name')
@@ -276,7 +367,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_MD5 = '20eac8ccc4578676511cf7ccbfc65100'
+PLOVR_JAR = 'build/plovr-81ed862.jar'
+PLOVR_JAR_MD5 = '1c752daaf11ad6220b298e7d2ee2b87d'
 
 PROJ4JS = 'build/proj4js/lib/proj4js-combined.js'
 PROJ4JS_ZIP = 'build/proj4js-1.1.0.zip'
@@ -164,7 +167,7 @@ virtual('default', 'build')
 
 
 virtual('integration-test', 'lint', 'build', 'build-all',
-        'test', 'build-examples', 'check-examples', 'doc')
+        'test', 'build-examples', 'check-examples', 'apidoc')
 
 
 virtual('build', 'build/ol.css', 'build/ol.js',
@@ -309,8 +312,11 @@ def examples_star_json(name, match):
                 '../externs/bingmaps.js',
                 '../externs/bootstrap.js',
                 '../externs/geojson.js',
+                '../externs/topojson.js',
+                '../externs/oli.js',
                 '../externs/proj4js.js',
                 '../externs/tilejson.js',
+                '../externs/closure-compiler.js',
             ],
         })
         with open(t.name, 'w') as f:
@@ -332,8 +338,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',
-        'examples')
+@target('serve', PLOVR_JAR, 'test-deps', '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 +350,35 @@ def serve_precommit(t):
           'buildcfg/ol-all.json', 'buildcfg/test.json')
 
 
-virtual('lint', 'build/lint-timestamp', 'build/check-requires-timestamp',
-        'build/check-whitespace-timestamp')
+virtual('lint', 'build/lint-timestamp', 'build/lint-generated-timestamp',
+        'build/check-requires-timestamp', 'build/check-whitespace-timestamp')
 
 
-@target('build/lint-timestamp', SRC, INTERNAL_SRC, EXTERNAL_SRC, EXAMPLES_SRC,
-        SPEC, precious=True)
+@target('build/lint-timestamp', SRC, EXAMPLES_SRC, 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' %
-          (','.join(limited_doc_files),), t.newer(t.dependencies))
+    t.run('%(GJSLINT)s',
+          '--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()
 
 
@@ -439,17 +460,23 @@ def build_check_requires_timestamp(t):
             self.children = {}
 
         def _build_re(self, key):
-            if len(self.children) == 1:
+            if key == '*':
+                assert len(self.children) == 0
+                # We want to match `.doIt` but not `.SomeClass` or `.more.stuff`
+                return '(?=\\.[a-z]\\w*\\b(?!\\.))'
+            elif len(self.children) == 1:
                 child_key, child = next(self.children.iteritems())
-                child_re = '\\.' + child._build_re(child_key)
+                child_re = child._build_re(child_key)
+                if child_key != '*':
+                    child_re = '\\.' + child_re
                 if self.present:
                     return key + '(' + child_re + ')?'
                 else:
                     return key + child_re
             elif self.children:
-                children_re = '(?:\\.(?:' + '|'.join(
-                    self.children[k]._build_re(k)
-                    for k in sorted(self.children.keys())) + '))'
+                children_re = '(?:' + '|'.join(
+                    ('\\.' if k != '*' else '') + self.children[k]._build_re(k)
+                    for k in sorted(self.children.keys())) + ')'
                 if self.present:
                     return key + children_re + '?'
                 else:
@@ -467,7 +494,14 @@ def build_check_requires_timestamp(t):
             if component not in node.children:
                 node.children[component] = Node()
             node = node.children[component]
-        node.present = True
+        if component[0].islower():
+            # We've arrived at a namespace provide like `ol.foo`.
+            # In this case, we want to match uses like `ol.foo.doIt()` but
+            # not match things like `new ol.foo.SomeClass()`.
+            # For this purpose, we use the special wildcard key for the child.
+            node.children['*'] = Node()
+        else:
+            node.present = True
     provide_res = [child.build_re(key)
                    for key, child in root.children.iteritems()]
     missing_count = 0
@@ -477,6 +511,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 +526,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 +540,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(
-                sorted(missing_requires)))
-            missing_count += len(missing_requires)
+            for missing_require in sorted(missing_requires):
+                t.info("%s:%d missing goog.require('%s')" %
+                       (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))
@@ -554,29 +591,15 @@ def plovr_jar(t):
     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))
+virtual('apidoc', 'build/jsdoc-%(BRANCH)s-timestamp' % vars(variables))
 
 
 @target('build/jsdoc-%(BRANCH)s-timestamp' % vars(variables), 'host-resources',
         'build/src/external/src/exports.js', 'build/src/external/src/types.js',
-        SRC, SHADER_SRC, ifind('doc/template'))
+        SRC, SHADER_SRC, ifind('apidoc/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')
+    t.run('%(JSDOC)s', '-c', 'apidoc/conf.json', 'src', 'apidoc/index.md',
+          '-d', 'build/hosted/%(BRANCH)s/apidoc')
     t.touch()
 
 
@@ -614,15 +637,15 @@ def split_example_file(example, dst_dir):
 
 @target('host-resources', phony=True)
 def host_resources(t):
-    resources_dir = 'build/gh-pages/%(BRANCH)s/resources'
+    resources_dir = 'build/hosted/%(BRANCH)s/resources'
     t.rm_rf(resources_dir)
     t.cp_r('resources', resources_dir)
 
 
 @target('host-examples', 'build', 'host-resources', 'examples', phony=True)
 def host_examples(t):
-    examples_dir = 'build/gh-pages/%(BRANCH)s/examples'
-    build_dir = 'build/gh-pages/%(BRANCH)s/build'
+    examples_dir = 'build/hosted/%(BRANCH)s/examples'
+    build_dir = 'build/hosted/%(BRANCH)s/build'
     t.rm_rf(examples_dir)
     t.makedirs(examples_dir)
     t.rm_rf(build_dir)
@@ -637,30 +660,27 @@ def host_examples(t):
     t.cp('examples/index.html', 'examples/example-list.js',
          'examples/example-list.xml', 'examples/Jugl.js',
          'examples/jquery.min.js', examples_dir)
-    t.rm_rf('build/gh-pages/%(BRANCH)s/closure-library')
-    t.makedirs('build/gh-pages/%(BRANCH)s/closure-library')
-    with t.chdir('build/gh-pages/%(BRANCH)s/closure-library'):
+    t.rm_rf('build/hosted/%(BRANCH)s/closure-library')
+    t.makedirs('build/hosted/%(BRANCH)s/closure-library')
+    with t.chdir('build/hosted/%(BRANCH)s/closure-library'):
         t.run('%(JAR)s', 'xf', '../../../../' + PLOVR_JAR, 'closure')
         t.run('%(JAR)s', 'xf', '../../../../' + PLOVR_JAR, 'third_party')
-    t.rm_rf('build/gh-pages/%(BRANCH)s/ol')
-    t.makedirs('build/gh-pages/%(BRANCH)s/ol')
-    t.cp_r('src/ol', 'build/gh-pages/%(BRANCH)s/ol/ol')
+    t.rm_rf('build/hosted/%(BRANCH)s/ol')
+    t.makedirs('build/hosted/%(BRANCH)s/ol')
+    t.cp_r('src/ol', 'build/hosted/%(BRANCH)s/ol/ol')
     t.run('%(PYTHON)s', 'bin/closure/depswriter.py',
           '--root_with_prefix', 'src ../../../ol',
-          '--root', 'build/gh-pages/%(BRANCH)s/closure-library/closure/goog',
-          '--root_with_prefix', 'build/gh-pages/%(BRANCH)s/closure-library/'
+          '--root', 'build/hosted/%(BRANCH)s/closure-library/closure/goog',
+          '--root_with_prefix', 'build/hosted/%(BRANCH)s/closure-library/'
           'third_party ../../third_party',
-          '--output_file', 'build/gh-pages/%(BRANCH)s/build/ol-deps.js')
+          '--output_file', 'build/hosted/%(BRANCH)s/build/ol-deps.js')
 
 
 @target('check-examples', 'host-examples', phony=True)
 def check_examples(t):
-    examples = ['build/gh-pages/%(BRANCH)s/' + e for e in EXAMPLES]
+    examples = ['build/hosted/%(BRANCH)s/' + e for e in EXAMPLES]
     all_examples = \
-        [e + '?mode=raw' for e in examples] + \
-        [e + '?mode=whitespace' for e in examples] + \
-        [e + '?mode=simple' for e in examples] + \
-        examples
+        [e + '?mode=advanced' for e in examples]
     for example in all_examples:
         t.run('%(PHANTOMJS)s', 'bin/check-example.js', example)
 
@@ -682,9 +702,12 @@ 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')
+    t.run('%(PHANTOMJS)s', 'test/mocha-phantomjs.js', 'test/ol.html')
 
 
 @target('fixme', phony=True)
@@ -732,5 +755,50 @@ def check_dependencies(t):
     print 'For certain targets all above programs need to be present.'
 
 
+@target('help')
+def display_help(t):
+    print '''
+build.py - The OpenLayers 3 build script.
+
+Usage:
+  ./build.py [options] [target]                         (on Unix-based machines)
+  <python-executable.exe> build.py [options] [target]   (on Windows machines)
+
+There is one option:
+  -c               - Cleans up the repository from previous builds.
+
+The most common targets are:
+  serve            - Serves files through plovr, usually on port 9810.
+  lint             - Runs gjslint on all sourcefiles to enforce specific syntax.
+  build            - Builds singlefile versions of OpenLayers JavaScript and
+                     CSS. This is also the default build target which runs when
+                     no target is specified.
+  test             - Runs the testsuite and displays the results.
+  check            - Runs the lint-target, builds some OpenLayers files, and
+                     then runs test. Many developers call this target often
+                     while working on the code.
+  help             - Shows this help.
+
+Other less frequently used targets are:
+  apidoc           - Builds the API-Documentation using JSDoc3.
+  integration-test - Builds all examples in various modes and usually tales a
+                     long time to finish. This target calls the following
+                     targets: lint, build, build-all, test, build-examples,
+                     check-examples and apidoc.
+  reallyclean      - Remove untracked files from the repository.
+  checkdeps        - Checks whether all required development software is
+                     installed on your machine.
+  fixme            - Will print a list of parts of the code that are marked
+                     with either TODO or FIXME.
+  todo             - is an alias for the fixme-target
+  plovr            - Fetches the required plovr.jar. Usually called by other
+                     targets that depend on plovr.
+
+If no target is given, the build-target will be executed.
+
+The above list is not complete, please see the sourceode for not-mentioned and
+only seldomly called targets.
+    '''
+
 if __name__ == '__main__':
     main()

buildcfg/base.json

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

buildcfg/ol-all.json

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

buildcfg/ol-simple.json

@@ -16,8 +16,11 @@
     "//json.js",
     "../externs/bingmaps.js",
     "../externs/geojson.js",
+    "../externs/topojson.js",
+    "../externs/oli.js",
     "../externs/proj4js.js",
-    "../externs/tilejson.js"
+    "../externs/tilejson.js",
+    "../externs/closure-compiler.js"
   ],
 
   "inherits": "ol.json",

buildcfg/ol-whitespace.json

@@ -17,8 +17,11 @@
     "//json.js",
     "../externs/bingmaps.js",
     "../externs/geojson.js",
+    "../externs/topojson.js",
+    "../externs/oli.js",
     "../externs/proj4js.js",
-    "../externs/tilejson.js"
+    "../externs/tilejson.js",
+    "../externs/closure-compiler.js"
   ],
 
   "inherits": "ol.json",

buildcfg/ol.json

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

css/ol.css

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

@@ -0,0 +1,12 @@
+---
+title: Documentation
+layout: doc.hbs
+---
+
+# Documentation
+
+If you're eager to get your first OpenLayers 3 map on a page, dive into the [quick start](quickstart.html).
+
+For a more in-depth overview of OpenLayers 3 core concepts, check out the [tutorials](tutorials/).
+
+Find additional reference material in the [API docs](../apidoc).

doc/quickstart.hbs

@@ -0,0 +1,132 @@
+---
+title: Quick Start
+layout: doc.hbs
+---
+
+# Quick Start
+
+## Put a map on a page
+
+Below you'll find a complete working example.  Create a new file, copy in the contents below, and open in a browser:
+
+```xml
+<!doctype html>
+<html lang="en">
+  <head>
+    <link rel="stylesheet" href="http://ol3js.org/en/{{ latest }}/build/ol.css" type="text/css">
+    <style>
+      .map {
+        height: 400px;
+        width: 100%;
+      }
+    </style>
+    <script src="http://ol3js.org/en/{{ latest }}/build/ol.js" type="text/javascript"></script>
+    <title>OpenLayers 3 example</title>
+  </head>
+  <body>
+    <h2>My Map</h2>
+    <div id="map" class="map"></div>
+    <script type="text/javascript">
+      var map = new ol.Map({
+        target: 'map',
+        layers: [
+          new ol.layer.Tile({
+            source: new ol.source.MapQuestOpenAerial()
+          })
+        ],
+        view: new ol.View2D({
+          center: ol.proj.transform([37.41, 8.82], 'EPSG:4326', 'EPSG:3857'),
+          zoom: 4
+        })
+      });
+    </script>
+  </body>
+</html>
+```
+
+## Understanding what is going on
+
+To include a map a web page you will need 3 things:
+
+ 1. Include OpenLayers
+ 2. `<div>` map container
+ 3. JavaScript to create a simple map
+
+### Include OpenLayers
+
+```xml
+  <script src="http://ol3js.org/en/{{ latest }}/build/ol.js" type="text/javascript"></script>
+```
+
+The first part is to include the JavaScript library. For the purpose of this tutorial, here we simply point to the ol3js.org website to get the whole library. In a production environment, we would build a custom version of the library including only the module needed for our application.
+
+
+### `<div>` to contain the map
+
+```xml
+  <div id="map" class="map"></div>
+```
+
+The map in the application is contained in a [`<div>` HTML element](http://en.wikipedia.org/wiki/Span_and_div). Through this `<div>` the map properties like width, height and border can be controlled through CSS. Here's the CSS element used to make the map 400 pixels high and as wide as the browser window.
+
+```xml
+  <style>
+    .map {
+      height: 400px; width: 100%;
+    }
+  </style>
+```
+
+### JavaScript to create a simple map
+
+```js
+  var map = new ol.Map({
+    target: 'map',
+    layers: [
+      new ol.layer.Tile({
+        source: new ol.source.MapQuestOpenAerial()
+      })
+    ],
+    view: new ol.View2D({
+      center: ol.proj.transform([37.41, 8.82], 'EPSG:4326', 'EPSG:3857'),
+      zoom: 4
+    })
+  });
+```
+
+With this JavaScript code, a map object is created with a MapQuest Open Aerial layer zoomed on the African East coast. Let's break this down:
+
+The following line creates an OpenLayers `Map` object. Just by itself, this does nothing since there's no layers or interaction attached to it.
+
+```js
+  var map = new ol.Map({ ... });
+```
+
+To attach the map object to the `<div>`, the map object takes a `target` into arguments. The value is the `id` of the `<div>`:
+
+```js
+    target: 'map'
+```
+
+The `layers: [ ... ]` array is used to define the list of layers available in the map. The first and only layer right now is a tiled layer:
+
+```js
+    layers: [
+      new ol.layer.Tile({
+        source: new ol.source.MapQuestOpenAerial()
+      })
+    ]
+```
+
+Layers in OpenLayers 3 are defined with a type (Image, Tile or Vector) which contains a source. The source is the protocol used to get the map tiles. You can consult the list of [available layer sources here](/en/{{ latest }}/apidoc/ol.source.html)
+
+The next part of the `Map` object is the `View`. The view allow to specify the center, resolution, and rotation of the map. Right now, only `View2D` is supported, but other views should be available at some point. The simplest way to define a view is to define a center point and a zoom level. Note that zoom level 0 is zoomed out.
+
+```js
+    view: new ol.View2D({
+      center: ol.proj.transform([37.41, 8.82], 'EPSG:4326', 'EPSG:3857'),
+      zoom: 4
+    })
+```
+
+You will notice that the `center` specified is in lat/lon coordinates (EPSG:4326). Since the only layer we use is in Spherical Mercator projection (EPSG:3857), we can reproject them on the fly to be able to zoom the map on the right coordinates.

doc/tutorials/concepts.hbs

@@ -0,0 +1,73 @@
+---
+title: Basic Concepts
+layout: doc.hbs
+---
+
+# Basic Concepts
+
+## Map
+The core component of OpenLayers 3 is the map (`ol.Map`). It is rendered to a `target` container (e.g. a `div` element on the web page that contains the map). All map properties can either be configured at construction time, or by using setter methods, e.g. `setTarget()`.
+
+```xml
+<div id="map" style="width: 100%, height: 400px"></div>
+<script>
+  var map = new ol.Map({target: 'map'});
+</script>
+```
+
+## View
+`ol.Map` is not responsible for things like center, zoom level and projection of the map. Instead, these are properties of an `ol.View` instance - typically an `ol.View2D` for 2D maps. The reason for this abstraction is the idea of instantly switching e.g. between a 2D and a tilted 3D view, without the need to maintain two copies of the `layers`.
+
+```js
+  map.setView(new ol.View2D({
+    center: [0, 0],
+    zoom: 2
+  }));
+```
+
+An `ol.View2D` also has a `projection`. The projection determines the coordinate system of the `center` and the units for map resolution calculations. If not specified (like in the above snippet), the default projection is Spherical Mercator (EPSG:3857), with meters as map units.
+
+The `zoom` option is a convenient way to specify the map resolution. The available zoom levels are determined by `maxZoom` (default: 28), `zoomFactor` (default: 2) and `maxResolution` (default is calculated in such a way that the projection's validity extent fits in a 256x256 pixel tile). Starting at zoom level 0 with a resolution of `maxResolution` units per pixel, subsequent zoom levels are calculated by dividing the previous zoom level's resolution by `zoomFactor`, until zoom level `maxZoom` is reached.
+
+
+## Source
+To get remote data for a layer, OpenLayers 3 uses `ol.source.Source` subclasses. These are available for free and commercial map tile services like OpenStreetMap or Bing, for OGC sources like WMS or WMTS, and for vector data in formats like GeoJSON or KML.
+
+```js
+  var osmSource = new ol.source.OSM();
+```
+
+## Layer
+A layer is a visual representation of data from a `source`. OpenLayers 3 has three basic types of layers: `ol.layer.Tile`, `ol.layer.Image` and `ol.layer.Vector`.
+
+`ol.layer.Tile` is for layer sources that provide pre-rendered, tiled images in grids that are organized by zoom levels for specific resolutions.
+
+`ol.layer.Image` is for server rendered images that are available for arbitrary extents and resolutions.
+
+`ol.layer.Vector` is for vector data that is rendered client-side.
+
+```js
+  var osmLayer = new ol.layer.Tile({source: osmSource});
+  map.addLayer(osmLayer);
+```
+
+## Putting it all together
+
+
+The above snippets can be conflated to a self contained map configuration with view and layers:
+
+```xml
+<div id="map" style="width: 100%, height: 400px"></div>
+<script>
+  new ol.Map({
+    layers: [
+      new ol.layer.Tile({source: new ol.source.OSM()})
+    ],
+    view: new ol.View2D({
+      center: [0, 0],
+      zoom: 2
+    }),
+    target: 'map'
+  });
+</script>
+```

doc/tutorials/index.hbs

@@ -0,0 +1,8 @@
+---
+title: Tutorials
+layout: doc.hbs
+---
+
+# Tutorials
+
+We'll be putting together a more comprehensive set of tutorials here.  For now, you can take a look at the [basic concepts](concepts.html) tutorial.  Stay tuned for more!

doc/tutorials/ol3.json

@@ -1,3 +0,0 @@
-{
-    "title": "OpenLayers 3 Architecture"
-}

doc/tutorials/ol3.md

@@ -1,274 +0,0 @@
-CLASS HIERARCHY
-===============
-
-```
-goog.math.Coordinate  // Simple 2D point
-|
-+- TileCoord
-
-goog.math.Box
-|
-+- Extent // The extent of a single object in two dimensions, projection not stored
-|
-+- TileBounds  // A range of tiles in two dimensions, integer coordinates, z not stored
-
-
-Projection
-
-
-goog.events.EventTarget
-|
-+- MVCObject
-|  |
-|  +- Camera
-|  |
-|  +- Control
-|  |  |
-|  |  +- ?
-|  |
-|  +- Layer
-|  |  |
-|  |  +- TileLayer
-|  |  |  |
-|  |  |  +- TMSTileLayer
-|  |  |  |
-|  |  |  +- WMTSTileLayer
-|  |  |  |
-|  |  |  +- XYZTileLayer / OSMTileLayer
-|  |  |
-|  |  +- VectorLayer
-|  |  |
-|  |  +- ImageLayer
-|  |
-|  +- LayerRenderer
-|  |
-|  +- LayerRendererOptions
-|  |
-|  +- Map
-|  |
-|  +- MapRenderer
-|  |  |
-|  |  +- HTMLMapRenderer
-|  |  |
-|  |  +- WebGLMapRenderer
-|  |
-|  +- MVCArray
-|  |  |
-|  |  +- ControlArray
-|  |  |
-|  |  +- LayerViewArray
-|
-|  +- TileQueue
-|
-+- Tile
-```
-
-
-Layer renderer hierarchy
-------------------------
-
-```
-goog.events.EventTarget
-|
-+- MVCObject
-   |
-   +- LayerRenderer
-      |
-      +- SingleTileLayerRenderer
-      |  |
-      |  +- HTMLSingleTileLayerRenderer
-      |  |
-      |  +- WebGLSingleTileLayerRenderer
-      |
-      +- TileLayerRenderer
-      |  |
-      |  +- HTMLTileLayerRenderer
-      |  |
-      |  +- WebGLTileLayerRenderer
-      |
-      +- VectorLayerRenderer
-      |  |
-      |  +- HTMLVectorLayerRenderer
-      |  |  |
-      |  |  +- SVGHTMLVectorLayerRenderer
-      |  |  |
-      |  |  +- Canvas2DHTMLVectorLayerRenderer
-      |  |  |
-      |  |  +- VMLHTMLVectorLayerRenderer
-      |  |
-      |  +- WebGLVectorLayerRenderer
-```
-
-
-OBJECT PROPERTIES AND METHODS
-=============================
-
-Notation:
-
-- `property type`  property with type, trailing ? indicates unsure, getters and setters are assumed to exist.
-- `f(args) -> type`  function taking args returning type.
-- `f(args) -> type = something`  f is a trivial wrapper around something.
-- `fires 'x'`  fires events of type 'x'.
-
-Principles:
-
-- All non-trivial objects inherit from `MVCObject`.
-- All non-trivial collections are either `MVCArrays` or a child class thereof.
-- Resolutions are `Array.<number>`, infinitely scalable resources (e.g. vectore layers) have resolutions == null.
-
-```
-MVCObject
-  as Google Maps MVCObject
-  freeze()
-  unfreeze()
-
-TileCoord
-  clone() -> TileCoord
-  getHash() -> number
-
-TileBounds
-  forEachTileCoord(z, function(tileCoord))
-
-Tile
-  tileCoord TileCoord
-  url string
-  state UNLOADED | LOADING | LOADED
-  fires 'loaded' // when loaded
-  fires 'aborted'  // when loading is aborted
-
-Camera
-   position goog.math.Coordinate
-   resolution number
-   rotation number
-
-Layer
-   projections Array.<Projection>
-   extent Extent
-   getResolutions() -> Array.<number>|null
-   fires 'change' // when data changes
-
-LayerArray
-   getResolutions() -> Array.<number>|null
-   getMaxResolution() = this.getResolutions()[0] | null
-
-LayerRendererOptions
-   layer Layer
-   visible boolean
-   opacity number
-   brightness number
-   color number
-   hue number
-   saturation number
-
-Map
-   projection Projection
-   renderer Renderer
-   layers LayerArray
-   addLayer(layer) = layers.push(layer)
-   getExtent() -> Extent
-   getMaxResolution() = layers.getMaxResolution()
-
-TileGrid
-   resolutions Array.<number>
-   extent ol.Extent
-   xEast boolean
-   ySouth boolean
-   origin(s) Coord|Array.<Coord>
-   tileSize goog.math.Size
-   forEachTileCoordChild(tileCoord, function(z, TileBounds))
-   forEachTileCoordParent(tileCoord, function(z, TileBounds))
-   getExtentTileBounds(z, extent) -> TileBounds
-   getTileCoord(coordinate) -> TileCoord
-   getTileCoordCenter(tileCoord) -> goog.math.Coordinate
-   getTileCoordExtent(tileCoord) -> ol.Extent
-   getTileCoordResolution(tileCoord) -> number
-   getZForResolution(resolution) -> number
-
-TileLayer
-   tileGrid TileGrid
-   tileUrl function(tileCoord) -> string
-   getTileCoordUrl(tileCoord) -> string = this.tileUrl(tileCoord)
-
-TileQueue
-   camera Camera  // or maybe MVCArray.<Camera> ?
-   getTileCoordPriority(tileCoord) -> number  // private
-   enqueueTile(Tile)
-
-VectorLayer
-   forEachFeature(resolution, extent, projection, function(Feature))
-
-Renderer
-   target HTMLDivElement
-   map Map
-   camera Camera
-   getCapabilities() -> Array.<string>  // maybe ?
-```
-
-Questions:
-
-- Store tile layer extent in TileLayer or in TileGrid?  (not clear)
-
-Two concepts: tile coordinate system range and and available data extent.
-TileGrid extent is range (or validity extent) of the tile coordinate system.
-TileLayer extent is the available data extent. A particular TileGrid may range
-from 0,0 to 10,10. My cache may conform to that grid but I may only have tiles
-ranging from 2,2 to 8,8. When you need to wrap multiple worlds, you pay
-attention to the TileGrid extent. When you need to decide whether or not to
-bother requesting a tile, you pay attention to the TileLayer extent.
-
-- Who determines "best" resolution?  (static function?)
-
-
-Todo: if tile layer extent stored in TileLayer rather than TileGrid then extent
-will occasionally need to be passed to TileGrid functions for cropping.
-
-DESIGN ASSERTIONS
-=================
-
-Map
-
-- A map has a renderer (the map renderer).
-- A map has a camera.
-- Multiple maps can share the same camera.
-- A map has a layer list.
-
-Layer 
-
-- A layer can have multiple projections (the supported projections).
-- A layer advertizes the projections it supports.
-- A layer returns no data if asked data for an unsupported projection.
-
-LayerRendererOptions
-
-- A layer renderer options object stores view-related states for a layer.
-- Options include visibility, opacity, saturation, hue, etc.
-- A layer renderer options object has a layer.
-- Multiple layer renderer options can share the same layer.
-- In other words a layer can be viewed in different manners.
-
-Renderer
-
-- The map renderer responds to events.
-- The map renderer receives events from the camera.
-- The map renderer creates layer renderers.
-
-Control
-
-- A control may listen to map events.
-- A control may listen to camera events.
-- A map navigation control acts on the camera.
-
-MVC
-
-- Types can be described in MVC terms.
-- Models don't know what rendering means.
-- Maps are models.
-- Layers are models.
-- Layer views are models (sorry!).
-- Cameras are models.
-- Layer lists are collections.
-- Renderers are views.
-- Controls are views or controllers or both.
-- An attribution control is a view.
-- A map navigation control is a controller.
-- A zoom slider control is both a view and a controller.

examples/accessible.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>Accessibility example</title>
+    <style>
+      a.accesskey {
+        color: #FFFFFF;
+      }
+    </style>
+  </head>
+  <body>
+
+    <div class="navbar navbar-inverse navbar-fixed-top">
+      <div class="navbar-inner">
+        <div class="container">
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>          
+        </div>
+      </div>
+    </div>
+
+    <div class="container-fluid">
+
+      <div class="row-fluid">
+        <div class="span12">
+          <a class="accesskey" onclick="document.getElementById('map').focus(); return false;" accesskey="1" href="">Go to map</a>
+          <div id="map" class="map" tabindex="0"></div>
+          <a class="zoom" accesskey="i" href="javascript: void map.getView().setZoom(map.getView().getZoom() + 1);">Zoom in</a>
+          <a class="zoom" accesskey="o" href="javascript: void map.getView().setZoom(map.getView().getZoom() - 1);">Zoom out</a>
+        </div>
+      </div>
+
+      <div class="row-fluid">
+
+        <div class="span12">
+          <h4 id="title">Accessibility example</h4>
+          <p id="shortdesc">Example of an accessible map.</p>
+          <div id="docs">
+            <p>This page's <code>map</code> element has its <code>tabindex</code> attribute set to <code>"0"</code>. That makes is focusable. To focus the map element you can either navigate to it using the "tab" key, or use the <a href="http://en.wikipedia.org/wiki/Access_key">Access Key</a> "1" (alt+1 or ctrl+alt+1) which provides a direct access. When the <code>map</code> element is focused the + and - keys can be used to zoom in and out, and the arrow keys can be used to pan.</p>
+            <p>When clicked the "Zoom in" and "Zoom out" links below the map zoom the map in and out, respectively. You can navigate to the links using the "tab" key, and press the "enter" key to trigger the zooming action. The Access Keys "i" and "o" can also be used, as a direct access to the actions of "Zoom in" and "Zoom out" links.</p>
+            <p>See the source of the page to see how this done.</p>
+          </div>
+          <div id="tags">accessibility, tabindex</div>
+        </div>
+
+      </div>
+
+    </div>
+
+    <script src="loader.js?id=accessible" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
+
+  </body>
+</html>

examples/accessible.js

@@ -0,0 +1,20 @@
+goog.require('ol.Map');
+goog.require('ol.RendererHints');
+goog.require('ol.View2D');
+goog.require('ol.layer.Tile');
+goog.require('ol.source.OSM');
+
+
+var map = new ol.Map({
+  layers: [
+    new ol.layer.Tile({
+      source: new ol.source.OSM()
+    })
+  ],
+  renderers: ol.RendererHints.createFromQueryData(),
+  target: 'map',
+  view: new ol.View2D({
+    center: [0, 0],
+    zoom: 2
+  })
+});

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">
@@ -14,13 +15,7 @@
     <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>
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>          
         </div>
       </div>
     </div>
@@ -30,22 +25,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>
-        <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>
+      </div>
+
+      <div class="row-fluid">
+        <div class="span12">
+          <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>
@@ -57,7 +57,7 @@
     </div>
 
     <script src="loader.js?id=animation" type="text/javascript"></script>
-    <script src="../resources/social-links.js" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
 
   </body>
 </html>

examples/animation.js

@@ -3,21 +3,17 @@ goog.require('ol.RendererHints');
 goog.require('ol.View2D');
 goog.require('ol.animation');
 goog.require('ol.easing');
-goog.require('ol.layer.TileLayer');
-goog.require('ol.projection');
+goog.require('ol.layer.Tile');
+goog.require('ol.proj');
 goog.require('ol.source.OSM');
 
 
-var london = ol.projection.transform(
-    [-0.12755, 51.507222], 'EPSG:4326', 'EPSG:3857');
-var moscow = ol.projection.transform(
-    [37.6178, 55.7517], 'EPSG:4326', 'EPSG:3857');
-var istanbul = ol.projection.transform(
-    [28.9744, 41.0128], '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 london = ol.proj.transform([-0.12755, 51.507222], 'EPSG:4326', 'EPSG:3857');
+var moscow = ol.proj.transform([37.6178, 55.7517], 'EPSG:4326', 'EPSG:3857');
+var istanbul = ol.proj.transform([28.9744, 41.0128], 'EPSG:4326', 'EPSG:3857');
+var rome = ol.proj.transform([12.5, 41.9], 'EPSG:4326', 'EPSG:3857');
+var bern = ol.proj.transform([7.4458, 46.95], 'EPSG:4326', 'EPSG:3857');
+var madrid = ol.proj.transform([-3.683333, 40.4], 'EPSG:4326', 'EPSG:3857');
 
 var view = new ol.View2D({
   // the view's initial state
@@ -27,7 +23,7 @@ var view = new ol.View2D({
 
 var map = new ol.Map({
   layers: [
-    new ol.layer.TileLayer({
+    new ol.layer.Tile({
       preload: 4,
       source: new ol.source.OSM()
     })
@@ -37,14 +33,13 @@ var map = new ol.Map({
   view: view
 });
 
-
 var rotateLeft = document.getElementById('rotate-left');
 rotateLeft.addEventListener('click', function() {
   var rotateLeft = ol.animation.rotate({
     duration: 2000,
     rotation: -4 * Math.PI
   });
-  map.addPreRenderFunction(rotateLeft);
+  map.beforeRender(rotateLeft);
 }, false);
 var rotateRight = document.getElementById('rotate-right');
 rotateRight.addEventListener('click', function() {
@@ -52,7 +47,7 @@ rotateRight.addEventListener('click', function() {
     duration: 2000,
     rotation: 4 * Math.PI
   });
-  map.addPreRenderFunction(rotateRight);
+  map.beforeRender(rotateRight);
 }, false);
 
 
@@ -62,7 +57,7 @@ panToLondon.addEventListener('click', function() {
     duration: 2000,
     source: view.getCenter()
   });
-  map.addPreRenderFunction(pan);
+  map.beforeRender(pan);
   view.setCenter(london);
 }, false);
 
@@ -73,7 +68,7 @@ elasticToMoscow.addEventListener('click', function() {
     easing: ol.easing.elastic,
     source: view.getCenter()
   });
-  map.addPreRenderFunction(pan);
+  map.beforeRender(pan);
   view.setCenter(moscow);
 }, false);
 
@@ -84,7 +79,7 @@ bounceToIstanbul.addEventListener('click', function() {
     easing: ol.easing.bounce,
     source: view.getCenter()
   });
-  map.addPreRenderFunction(pan);
+  map.beforeRender(pan);
   view.setCenter(istanbul);
 }, false);
 
@@ -102,7 +97,7 @@ spinToRome.addEventListener('click', function() {
     rotation: 2 * Math.PI,
     start: start
   });
-  map.addPreRenderFunctions([pan, rotate]);
+  map.beforeRender(pan, rotate);
   view.setCenter(rome);
 }, false);
 
@@ -120,6 +115,29 @@ flyToBern.addEventListener('click', function() {
     resolution: 4 * view.getResolution(),
     start: start
   });
-  map.addPreRenderFunctions([pan, bounce]);
+  map.beforeRender(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.beforeRender(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">
@@ -14,13 +15,7 @@
     <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>
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>          
         </div>
       </div>
     </div>
@@ -37,9 +32,14 @@
 
         <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 id="no-webgl" class="alert alert-warning" style="display: none">
+              <h4>Warning!</h4>
+              A browser that supports <a href="http://get.webgl.org/">WebGL</a> is required to change the
+              <strong>hue</strong>, <strong>saturation</strong>, <strong>contrast</strong> and <strong>brightness</strong>.
+            </div>
           </div>
           <div id="tags">input, bind, openstreetmap</div>
         </div>
@@ -54,13 +54,13 @@
               <label>opacity</label>
               <input id="opacity" type="range" min="0" max="1" step="0.01"/>
               <label>hue</label>
-              <input id="hue" type="range" min="-3.141592653589793" max="3.141592653589793" step="0.01"/>
+              <input id="hue" class="webgl" type="range" min="-3.141592653589793" max="3.141592653589793" step="0.01"/>
               <label>saturation</label>
-              <input id="saturation" type="range" min="0" max="5" step="0.01"/>
+              <input id="saturation" class="webgl" type="range" min="0" max="5" step="0.01"/>
               <label>contrast</label>
-              <input id="contrast" type="range" min="0" max="2" step="0.01"/>
+              <input id="contrast" class="webgl" type="range" min="0" max="2" step="0.01"/>
               <label>brightness</label>
-              <input id="brightness" type="range" min="-1" max="1" step="0.01"/>
+              <input id="brightness" class="webgl" type="range" min="-1" max="1" step="0.01"/>
             </fieldset>
           </form>
         </div>
@@ -71,7 +71,8 @@
               <legend>View</legend>
               <label>rotation</label>
               <input id="rotation" type="range" min="-3.141592653589793" max="3.141592653589793" step="0.01"/>
-            </fieldset>
+              <label>resolution</label>
+              <input id="resolution" type="number" min="0" step="250"/>
             </fieldset>
           </form>
         </div>
@@ -81,7 +82,7 @@
     </div>
 
     <script src="loader.js?id=bind-input" type="text/javascript"></script>
-    <script src="../resources/social-links.js" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
 
   </body>
 </html>

examples/bind-input.js

@@ -2,10 +2,24 @@ 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.layer.Tile');
 goog.require('ol.source.OSM');
+goog.require('ol.webgl');
 
-var layer = new ol.layer.TileLayer({
+
+if (!ol.webgl.SUPPORTED) {
+  var inputs = document.getElementsByClassName('webgl');
+  for (var i = 0, len = inputs.length; i < len; i++) {
+    inputs[i].disabled = true;
+  }
+  var info = document.getElementById('no-webgl');
+  /**
+   * display warning message
+   */
+  info.style.display = '';
+}
+
+var layer = new ol.layer.Tile({
   source: new ol.source.OSM()
 });
 var map = new ol.Map({
@@ -22,20 +36,23 @@ var visible = new ol.dom.Input(document.getElementById('visible'));
 visible.bindTo('checked', layer, 'visible');
 
 var opacity = new ol.dom.Input(document.getElementById('opacity'));
-opacity.bindTo('value', layer, 'opacity');
+opacity.bindTo('valueAsNumber', layer, 'opacity');
 
 var hue = new ol.dom.Input(document.getElementById('hue'));
-hue.bindTo('value', layer, 'hue');
+hue.bindTo('valueAsNumber', layer, 'hue');
 
 var saturation = new ol.dom.Input(document.getElementById('saturation'));
-saturation.bindTo('value', layer, 'saturation');
+saturation.bindTo('valueAsNumber', layer, 'saturation');
 
 var contrast = new ol.dom.Input(document.getElementById('contrast'));
-contrast.bindTo('value', layer, 'contrast');
+contrast.bindTo('valueAsNumber', layer, 'contrast');
 
 var brightness = new ol.dom.Input(document.getElementById('brightness'));
-brightness.bindTo('value', layer, 'brightness');
+brightness.bindTo('valueAsNumber', layer, 'brightness');
 
 
 var rotation = new ol.dom.Input(document.getElementById('rotation'));
-rotation.bindTo('value', map.getView(), 'rotation');
+rotation.bindTo('valueAsNumber', map.getView(), 'rotation');
+
+var resolution = new ol.dom.Input(document.getElementById('resolution'));
+resolution.bindTo('valueAsNumber', 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">
@@ -14,13 +15,7 @@
     <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>
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>          
         </div>
       </div>
     </div>
@@ -41,7 +36,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">
@@ -56,7 +51,7 @@
 
     <script src="jquery.min.js" type="text/javascript"></script>
     <script src="loader.js?id=bing-maps" type="text/javascript"></script>
-    <script src="../resources/social-links.js" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
 
   </body>
 </html>

examples/bing-maps.js

@@ -1,19 +1,19 @@
 goog.require('ol.Map');
 goog.require('ol.RendererHints');
 goog.require('ol.View2D');
-goog.require('ol.layer.TileLayer');
-goog.require('ol.projection');
+goog.require('ol.layer.Tile');
+goog.require('ol.proj');
 goog.require('ol.source.BingMaps');
 
 
 var styles = ['Road', 'Aerial', 'AerialWithLabels'];
 var layers = [];
 for (var i = 0; i < styles.length; ++i) {
-  layers.push(new ol.layer.TileLayer({
+  layers.push(new ol.layer.Tile({
     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,23 +4,26 @@
     <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>
 
     <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>
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>          
         </div>
       </div>
     </div>
@@ -30,6 +33,11 @@
       <div class="row-fluid">
         <div class="span12">
           <div id="map" class="map"></div>
+
+          <div id="no-webgl" class="alert alert-error" style="display: none">
+            This example requires a browser that supports <a href="http://get.webgl.org/">WebGL</a>.
+          </div>
+
           <div class="btn-group">
             <button id="increase-brightness"><i class="icon-plus"></i></button>
             <button id="reset-brightness">Brightness</button>
@@ -45,7 +53,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">
@@ -59,7 +67,7 @@
     </div>
 
     <script src="loader.js?id=brightness-contrast" type="text/javascript"></script>
-    <script src="../resources/social-links.js" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
 
   </body>
 </html>

examples/brightness-contrast.js

@@ -1,46 +1,76 @@
 goog.require('ol.Map');
 goog.require('ol.RendererHint');
 goog.require('ol.View2D');
-goog.require('ol.layer.TileLayer');
+goog.require('ol.layer.Tile');
 goog.require('ol.source.MapQuestOpenAerial');
+goog.require('ol.webgl');
 
 
-var layer = new ol.layer.TileLayer({
-  source: new ol.source.MapQuestOpenAerial()
-});
+function setResetBrightnessButtonHTML() {
+  resetBrightness.innerHTML = 'Brightness (' +
+      layer.getBrightness().toFixed(3) + ')';
+}
 
-var map = new ol.Map({
-  layers: [layer],
-  renderer: ol.RendererHint.WEBGL,
-  target: 'map',
-  view: new ol.View2D({
-    center: [0, 0],
-    zoom: 2
-  })
-});
+function setResetContrastButtonHTML() {
+  resetContrast.innerHTML = 'Contrast (' + layer.getContrast().toFixed(3) + ')';
+}
 
-var increaseBrightness = document.getElementById('increase-brightness');
-increaseBrightness.addEventListener('click', function() {
-  layer.setBrightness(layer.getBrightness() + 0.125);
-}, false);
-var resetBrightness = document.getElementById('reset-brightness');
-resetBrightness.addEventListener('click', function() {
-  layer.setBrightness(0);
-}, false);
-var decreaseBrightness = document.getElementById('decrease-brightness');
-decreaseBrightness.addEventListener('click', function() {
-  layer.setBrightness(layer.getBrightness() - 0.125);
-}, false);
+if (!ol.webgl.SUPPORTED) {
+  var info = document.getElementById('no-webgl');
+  /**
+   * display error message
+   */
+  info.style.display = '';
+} else {
+  var layer = new ol.layer.Tile({
+    source: new ol.source.MapQuestOpenAerial()
+  });
 
-var increaseContrast = document.getElementById('increase-contrast');
-increaseContrast.addEventListener('click', function() {
-  layer.setContrast(layer.getContrast() + 0.125);
-}, false);
-var resetContrast = document.getElementById('reset-contrast');
-resetContrast.addEventListener('click', function() {
-  layer.setContrast(1);
-}, false);
-var decreaseContrast = document.getElementById('decrease-contrast');
-decreaseContrast.addEventListener('click', function() {
-  layer.setContrast(layer.getContrast() - 0.125);
-}, false);
+  var map = new ol.Map({
+    layers: [layer],
+    renderer: ol.RendererHint.WEBGL,
+    target: 'map',
+    view: new ol.View2D({
+      center: [0, 0],
+      zoom: 2
+    })
+  });
+
+  var increaseBrightness = document.getElementById('increase-brightness');
+  var resetBrightness = document.getElementById('reset-brightness');
+  var decreaseBrightness = document.getElementById('decrease-brightness');
+
+  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);
+  decreaseBrightness.addEventListener('click', function() {
+    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');
+
+  setResetContrastButtonHTML();
+
+  increaseContrast.addEventListener('click', function() {
+    layer.setContrast(layer.getContrast() + 0.125);
+    setResetContrastButtonHTML();
+  }, false);
+  resetContrast.addEventListener('click', function() {
+    layer.setContrast(1);
+    setResetContrastButtonHTML();
+  }, false);
+  decreaseContrast.addEventListener('click', function() {
+    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">
@@ -14,13 +15,7 @@
     <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>
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>          
         </div>
       </div>
     </div>
@@ -35,10 +30,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>
@@ -49,7 +45,7 @@
     </div>
 
     <script src="loader.js?id=canvas-tiles" type="text/javascript"></script>
-    <script src="../resources/social-links.js" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
 
   </body>
 </html>

examples/canvas-tiles.js

@@ -1,20 +1,20 @@
 goog.require('ol.Map');
 goog.require('ol.RendererHints');
 goog.require('ol.View2D');
-goog.require('ol.layer.TileLayer');
-goog.require('ol.projection');
-goog.require('ol.source.DebugTileSource');
+goog.require('ol.layer.Tile');
+goog.require('ol.proj');
 goog.require('ol.source.OSM');
+goog.require('ol.source.TileDebug');
 goog.require('ol.tilegrid.XYZ');
 
 
 var map = new ol.Map({
   layers: [
-    new ol.layer.TileLayer({
+    new ol.layer.Tile({
       source: new ol.source.OSM()
     }),
-    new ol.layer.TileLayer({
-      source: new ol.source.DebugTileSource({
+    new ol.layer.Tile({
+      source: new ol.source.TileDebug({
         projection: 'EPSG:3857',
         tileGrid: new ol.tilegrid.XYZ({
           maxZoom: 22
@@ -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,90 @@
+<!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;
+      }
+      .ol-touch .rotate-north {
+        top: 80px;
+      }
+      .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);
+      }
+      .ol-touch .rotate-north a {
+        font-size: 20px;
+        height: 30px;
+        width: 30px;
+        line-height: 26px;
+      }
+      .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="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>          
+        </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/example-behaviour.js" type="text/javascript"></script>
+
+  </body>
+
+</html>

examples/custom-controls.js

@@ -0,0 +1,81 @@
+goog.require('ol');
+goog.require('ol.Map');
+goog.require('ol.RendererHints');
+goog.require('ol.View2D');
+goog.require('ol.control');
+goog.require('ol.control.Control');
+goog.require('ol.layer.Tile');
+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,
+    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().extend([
+    new app.RotateNorthControl()
+  ]),
+  layers: [
+    new ol.layer.Tile({
+      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,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>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="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>          
+        </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/example-behaviour.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.Tile');
+goog.require('ol.source.OSM');
+
+var map = new ol.Map({
+  layers: [
+    new ol.layer.Tile({
+      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,51 @@
+<!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="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>          
+        </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/example-behaviour.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');
+goog.require('ol.interaction.DragRotateAndZoom');
+goog.require('ol.layer.Tile');
+goog.require('ol.source.MapQuestOpenAerial');
+
+
+var map = new ol.Map({
+  interactions: ol.interaction.defaults().extend([
+    new ol.interaction.DragRotateAndZoom()
+  ]),
+  layers: [
+    new ol.layer.Tile({
+      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">
@@ -14,13 +15,7 @@
     <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>
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>          
         </div>
       </div>
     </div>
@@ -35,7 +30,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">
@@ -49,7 +44,7 @@
     </div>
 
     <script src="loader.js?id=epsg-4326" type="text/javascript"></script>
-    <script src="../resources/social-links.js" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
 
   </body>
 </html>

examples/epsg-4326.js

@@ -1,16 +1,16 @@
 goog.require('ol.Map');
 goog.require('ol.RendererHint');
 goog.require('ol.View2D');
+goog.require('ol.control');
 goog.require('ol.control.ScaleLine');
 goog.require('ol.control.ScaleLineUnits');
-goog.require('ol.control.defaults');
-goog.require('ol.layer.TileLayer');
-goog.require('ol.source.TiledWMS');
+goog.require('ol.layer.Tile');
+goog.require('ol.source.TileWMS');
 
 
 var layers = [
-  new ol.layer.TileLayer({
-    source: new ol.source.TiledWMS({
+  new ol.layer.Tile({
+    source: new ol.source.TileWMS({
       url: 'http://vmap0.tiles.osgeo.org/wms/vmap0',
       params: {
         'VERSION': '1.1.1',
@@ -22,7 +22,7 @@ var layers = [
 ];
 
 var map = new ol.Map({
-  controls: ol.control.defaults({}, [
+  controls: ol.control.defaults().extend([
     new ol.control.ScaleLine({
       units: ol.control.ScaleLineUnits.DEGREES
     })

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">
@@ -14,13 +15,7 @@
     <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>
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>          
         </div>
       </div>
     </div>
@@ -30,6 +25,10 @@
       <div class="row-fluid">
         <div class="span12">
           <div id="map" class="map"></div>
+          <div id="no-download" class="alert alert-error" style="display: none">
+            This example requires a browser that supports the
+            <a href="http://caniuse.com/#feat=download">link download</a> attribute.
+          </div>
           <a id="export-jpeg" class="btn" download="map.jpeg"><i class="icon-download"></i> Export JPEG</a>
           <a id="export-png" class="btn" download="map.png"><i class="icon-download"></i> Export PNG</a>
         </div>
@@ -37,7 +36,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">
@@ -51,7 +50,7 @@
     </div>
 
     <script src="loader.js?id=export-map" type="text/javascript"></script>
-    <script src="../resources/social-links.js" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
 
   </body>
 </html>

examples/export-map.js

@@ -1,13 +1,13 @@
 goog.require('ol.Map');
 goog.require('ol.RendererHint');
 goog.require('ol.View2D');
-goog.require('ol.layer.TileLayer');
+goog.require('ol.layer.Tile');
 goog.require('ol.source.OSM');
 
 
 var map = new ol.Map({
   layers: [
-    new ol.layer.TileLayer({
+    new ol.layer.Tile({
       source: new ol.source.OSM()
     })
   ],
@@ -20,11 +20,20 @@ var map = new ol.Map({
 });
 
 var exportJPEGElement = document.getElementById('export-jpeg');
-exportJPEGElement.addEventListener('click', function(e) {
-  e.target.href = map.getRenderer().getCanvas().toDataURL('image/jpeg');
-}, false);
-
 var exportPNGElement = document.getElementById('export-png');
-exportPNGElement.addEventListener('click', function(e) {
-  e.target.href = map.getRenderer().getCanvas().toDataURL('image/png');
-}, false);
+
+if ('download' in exportJPEGElement && 'download' in exportPNGElement) {
+  exportJPEGElement.addEventListener('click', function(e) {
+    e.target.href = map.getRenderer().getCanvas().toDataURL('image/jpeg');
+  }, false);
+
+  exportPNGElement.addEventListener('click', function(e) {
+    e.target.href = map.getRenderer().getCanvas().toDataURL('image/png');
+  }, false);
+} else {
+  var info = document.getElementById('no-download');
+  /**
+   * display error message
+   */
+  info.style.display = '';
+}

examples/full-screen-drag-rotate-and-zoom.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">
+    <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="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>          
+        </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/example-behaviour.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');
+goog.require('ol.control.FullScreen');
+goog.require('ol.interaction');
+goog.require('ol.interaction.DragRotateAndZoom');
+goog.require('ol.layer.Tile');
+goog.require('ol.source.BingMaps');
+
+
+var map = new ol.Map({
+  controls: ol.control.defaults().extend([
+    new ol.control.FullScreen()
+  ]),
+  interactions: ol.interaction.defaults().extend([
+    new ol.interaction.DragRotateAndZoom()
+  ]),
+  layers: [
+    new ol.layer.Tile({
+      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">
@@ -25,13 +26,7 @@
     <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>
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>          
         </div>
       </div>
     </div>
@@ -46,11 +41,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>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 id="shortdesc">Example of a full screen control.</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>
@@ -61,7 +57,7 @@
     </div>
 
     <script src="loader.js?id=full-screen" type="text/javascript"></script>
-    <script src="../resources/social-links.js" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
 
   </body>
 </html>

examples/full-screen.js

@@ -1,9 +1,9 @@
 goog.require('ol.Map');
 goog.require('ol.RendererHints');
 goog.require('ol.View2D');
+goog.require('ol.control');
 goog.require('ol.control.FullScreen');
-goog.require('ol.control.defaults');
-goog.require('ol.layer.TileLayer');
+goog.require('ol.layer.Tile');
 goog.require('ol.source.BingMaps');
 
 
@@ -13,13 +13,13 @@ var view = new ol.View2D({
 });
 
 var map = new ol.Map({
-  controls: ol.control.defaults({}, [
+  controls: ol.control.defaults().extend([
     new ol.control.FullScreen()
   ]),
   layers: [
-    new ol.layer.TileLayer({
+    new ol.layer.Tile({
       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>
@@ -20,13 +24,7 @@
     <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>
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>          
         </div>
       </div>
     </div>
@@ -41,24 +39,33 @@
 
       <div class="row-fluid">
 
-        <div class="span4">
+        <div class="span8">
           <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>
+        <div class="span4 pull-right">
+          <div id="info" class="alert alert-error" style="display: none;"></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=geolocation" type="text/javascript"></script>
-    <script src="../resources/social-links.js" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
 
   </body>
 </html>

examples/geolocation.js

@@ -3,13 +3,14 @@ goog.require('ol.Map');
 goog.require('ol.Overlay');
 goog.require('ol.RendererHints');
 goog.require('ol.View2D');
-goog.require('ol.layer.TileLayer');
+goog.require('ol.dom.Input');
+goog.require('ol.layer.Tile');
 goog.require('ol.source.OSM');
 
 
 var map = new ol.Map({
   layers: [
-    new ol.layer.TileLayer({
+    new ol.layer.Tile({
       source: new ol.source.OSM()
     })
   ],
@@ -24,19 +25,31 @@ 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))
 });
+map.addOverlay(marker);
 // 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'
   });
 });
-
-$('#locate').click(function() {
-  geolocation.setTracking(true);
+geolocation.on('error', function(error) {
+  var info = document.getElementById('info');
+  info.innerHTML = error.message;
+  info.style.display = '';
 });

examples/getfeatureinfo.html

@@ -0,0 +1,55 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="chrome=1">
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../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>Get feature info example</title>
+  </head>
+  <body>
+
+    <div class="navbar navbar-inverse navbar-fixed-top">
+      <div class="navbar-inner">
+        <div class="container">
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>          
+        </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">GetFeatureInfo example</h4>
+          <p id="shortdesc">Example of a WMS layer and a vector layer, both configured to provide feature information on click.</p>
+          <div id="docs">
+            <p>See the <a href="getfeatureinfo.js" target="_blank">getfeatureinfo.js source</a> to see how this is done.</p>
+          </div>
+          <div id="tags">getfeatureinfo</div>
+        </div>
+        <div class="span4 offset4">
+          <div id="info" class="alert alert-success">
+            &nbsp;
+          </div>
+        </div>
+
+      </div>
+
+    </div>
+
+    <script src="loader.js?id=getfeatureinfo" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
+
+  </body>
+</html>

examples/getfeatureinfo.js

@@ -0,0 +1,56 @@
+goog.require('ol.Map');
+goog.require('ol.RendererHint');
+goog.require('ol.View2D');
+goog.require('ol.layer.Tile');
+goog.require('ol.layer.Vector');
+goog.require('ol.parser.GeoJSON');
+goog.require('ol.source.TileWMS');
+goog.require('ol.source.Vector');
+goog.require('ol.style.Stroke');
+goog.require('ol.style.Style');
+
+
+var wms = new ol.layer.Tile({
+  source: new ol.source.TileWMS({
+    url: 'http://demo.opengeo.org/geoserver/wms',
+    params: {'LAYERS': 'ne:ne'}
+  })
+});
+
+var vector = new ol.layer.Vector({
+  source: new ol.source.Vector({
+    parser: new ol.parser.GeoJSON(),
+    url: 'data/countries.geojson'
+  }),
+  style: new ol.style.Style({
+    symbolizers: [
+      new ol.style.Stroke({
+        color: '#33cc66',
+        width: 2
+      })
+    ]
+  }),
+  transformFeatureInfo: function(features) {
+    return features.length > 0 ?
+        features[0].getId() + ': ' + features[0].get('name') : ' ';
+  }
+});
+
+var map = new ol.Map({
+  layers: [wms, vector],
+  renderer: ol.RendererHint.CANVAS,
+  target: 'map',
+  view: new ol.View2D({
+    center: [0, 0],
+    zoom: 1
+  })
+});
+
+map.on('click', function(evt) {
+  map.getFeatureInfo({
+    pixel: evt.getPixel(),
+    success: function(featureInfoByLayer) {
+      document.getElementById('info').innerHTML = featureInfoByLayer.join('');
+    }
+  });
+});

examples/gml.html

@@ -0,0 +1,50 @@
+<!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="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>          
+        </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/example-behaviour.js" type="text/javascript"></script>
+
+  </body>
+</html>

examples/gml.js

@@ -0,0 +1,43 @@
+goog.require('ol.Map');
+goog.require('ol.RendererHint');
+goog.require('ol.View2D');
+goog.require('ol.layer.Tile');
+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.Fill');
+goog.require('ol.style.Stroke');
+goog.require('ol.style.Style');
+
+var raster = new ol.layer.Tile({
+  source: new ol.source.MapQuestOpenAerial()
+});
+
+var vector = new ol.layer.Vector({
+  source: new ol.source.Vector({
+    parser: new ol.parser.ogc.GML_v3(),
+    url: 'data/gml/topp-states-wfs.xml'
+  }),
+  style: new ol.style.Style({
+    symbolizers: [
+      new ol.style.Fill({
+        color: '#ffffff',
+        opacity: 0.25
+      }),
+      new ol.style.Stroke({
+        color: '#6666ff'
+      })
+    ]
+  })
+});
+
+var map = new ol.Map({
+  layers: [raster, vector],
+  renderer: ol.RendererHint.CANVAS,
+  target: 'map',
+  view: new ol.View2D({
+    center: [-10997171, 4658434],
+    zoom: 4
+  })
+});

examples/gpx.html

@@ -0,0 +1,54 @@
+<!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="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>          
+        </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/example-behaviour.js" type="text/javascript"></script>
+
+  </body>
+</html>

examples/gpx.js

@@ -0,0 +1,44 @@
+goog.require('ol.Map');
+goog.require('ol.RendererHint');
+goog.require('ol.View2D');
+goog.require('ol.layer.Tile');
+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.Tile({
+  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'
+  })
+});
+
+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.getFeatures({
+    pixel: evt.getPixel(),
+    layers: [vector],
+    success: function(featuresByLayer) {
+      var features = featuresByLayer[0];
+      var info = [];
+      for (var i = 0, ii = features.length; i < ii; ++i) {
+        info.push(features[i].get('name') + ': ' + features[i].get('type'));
+      }
+      document.getElementById('info').innerHTML = info.join(', ') || '&nbsp;';
+    }
+  });
+});

examples/hue-saturation.html

@@ -4,23 +4,26 @@
     <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>
 
     <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>
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>          
         </div>
       </div>
     </div>
@@ -30,6 +33,11 @@
       <div class="row-fluid">
         <div class="span12">
           <div id="map" class="map"></div>
+
+          <div id="no-webgl" class="alert alert-error" style="display: none">
+            This example requires a browser that supports <a href="http://get.webgl.org/">WebGL</a>.
+          </div>
+
           <div class="btn-group">
             <button id="increase-hue"><i class="icon-plus"></i></button>
             <button id="reset-hue">Hue</button>
@@ -45,7 +53,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">
@@ -59,7 +67,7 @@
     </div>
 
     <script src="loader.js?id=hue-saturation" type="text/javascript"></script>
-    <script src="../resources/social-links.js" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
 
   </body>
 </html>

examples/hue-saturation.js

@@ -1,51 +1,80 @@
 goog.require('ol.Map');
 goog.require('ol.RendererHint');
 goog.require('ol.View2D');
-goog.require('ol.layer.TileLayer');
-goog.require('ol.projection');
+goog.require('ol.layer.Tile');
+goog.require('ol.proj');
 goog.require('ol.source.BingMaps');
+goog.require('ol.webgl');
 
 
-var layer = new ol.layer.TileLayer({
-  source: new ol.source.BingMaps({
-    key: 'AlQLZ0-5yk301_ESrmNLma3LYxEKNSg7w-e_knuRfyYFtld-UFvXVs38NOulku3Q',
-    style: 'Aerial'
-  })
-});
+function setResetHueButtonHTML() {
+  resetHue.innerHTML = 'Hue (' + layer.getHue().toFixed(2) + ')';
+}
 
-var map = new ol.Map({
-  layers: [layer],
-  renderer: ol.RendererHint.WEBGL,
-  target: 'map',
-  view: new ol.View2D({
-    center: ol.projection.transform(
-        [-9.375, 51.483333], 'EPSG:4326', 'EPSG:3857'),
-    zoom: 15
-  })
-});
+function setResetSaturationButtonHTML() {
+  resetSaturation.innerHTML = 'Saturation (' +
+      layer.getSaturation().toFixed(2) + ')';
+}
 
-var increaseHue = document.getElementById('increase-hue');
-increaseHue.addEventListener('click', function() {
-  layer.setHue(layer.getHue() + 0.25);
-}, false);
-var resetHue = document.getElementById('reset-hue');
-resetHue.addEventListener('click', function() {
-  layer.setHue(0);
-}, false);
-var decreaseHue = document.getElementById('decrease-hue');
-decreaseHue.addEventListener('click', function() {
-  layer.setHue(layer.getHue() - 0.25);
-}, false);
+if (!ol.webgl.SUPPORTED) {
+  var info = document.getElementById('no-webgl');
+  /**
+   * display error message
+   */
+  info.style.display = '';
+} else {
+  var layer = new ol.layer.Tile({
+    source: new ol.source.BingMaps({
+      key: 'Ar33pRUvQOdESG8m_T15MUmNz__E1twPo42bFx9jvdDePhX0PNgAcEm44OVTS7tt',
+      style: 'Aerial'
+    })
+  });
 
-var increaseSaturation = document.getElementById('increase-saturation');
-increaseSaturation.addEventListener('click', function() {
-  layer.setSaturation(layer.getSaturation() + 0.25);
-}, false);
-var resetSaturation = document.getElementById('reset-saturation');
-resetSaturation.addEventListener('click', function() {
-  layer.setSaturation(1);
-}, false);
-var decreaseSaturation = document.getElementById('decrease-saturation');
-decreaseSaturation.addEventListener('click', function() {
-  layer.setSaturation(layer.getSaturation() - 0.25);
-}, false);
+  var map = new ol.Map({
+    layers: [layer],
+    renderer: ol.RendererHint.WEBGL,
+    target: 'map',
+    view: new ol.View2D({
+      center: ol.proj.transform([-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');
+
+  setResetHueButtonHTML();
+
+  increaseHue.addEventListener('click', function() {
+    layer.setHue(layer.getHue() + 0.25);
+    setResetHueButtonHTML();
+  }, false);
+  resetHue.addEventListener('click', function() {
+    layer.setHue(0);
+    setResetHueButtonHTML();
+  }, false);
+  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');
+
+  setResetSaturationButtonHTML();
+
+  increaseSaturation.addEventListener('click', function() {
+    layer.setSaturation(layer.getSaturation() + 0.25);
+    setResetSaturationButtonHTML();
+  }, false);
+  resetSaturation.addEventListener('click', function() {
+    layer.setSaturation(1);
+    setResetSaturationButtonHTML();
+  }, false);
+  decreaseSaturation.addEventListener('click', function() {
+    layer.setSaturation(Math.max(layer.getSaturation() - 0.25, 0));
+    setResetSaturationButtonHTML();
+  }, false);
+}

examples/icon.html

@@ -0,0 +1,62 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="chrome=1">
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../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>Vector Icon Example</title>
+    <style>
+      #map {
+        position: relative;
+      }
+      #popup {
+        padding-bottom: 45px;
+      }
+    </style>
+  </head>
+  <body>
+
+    <div class="navbar navbar-inverse navbar-fixed-top">
+      <div class="navbar-inner">
+        <div class="container">
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>          
+        </div>
+      </div>
+    </div>
+
+    <div class="container-fluid">
+
+      <div class="row-fluid">
+        <div class="span12">
+          <div id="map" class="map">
+            <div id="popup"></div>
+          </div>
+        </div>        
+      </div>
+
+      <div class="row-fluid">
+
+        <div class="span12">
+          <h4 id="title">Icon example</h4>
+          <p id="shortdesc">Example using an icon to symbolize a point.</p>
+          <div id="docs">
+            <p>See the <a href="icon.js" target="_blank">icon.js source</a> to see how this is done.</p>
+          </div>
+          <div id="tags">vector, style, icon, marker, popup</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=icon" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
+
+  </body>
+</html>

examples/icon.js

@@ -0,0 +1,92 @@
+goog.require('ol.Map');
+goog.require('ol.Overlay');
+goog.require('ol.RendererHint');
+goog.require('ol.View2D');
+goog.require('ol.layer.Tile');
+goog.require('ol.layer.Vector');
+goog.require('ol.parser.GeoJSON');
+goog.require('ol.source.TileJSON');
+goog.require('ol.source.Vector');
+goog.require('ol.style.Icon');
+goog.require('ol.style.Style');
+
+
+var raster = new ol.layer.Tile({
+  source: new ol.source.TileJSON({
+    url: 'http://api.tiles.mapbox.com/v3/mapbox.geography-class.jsonp'
+  })
+});
+
+var data = {
+  type: 'FeatureCollection',
+  features: [{
+    type: 'Feature',
+    properties: {
+      name: 'Null Island',
+      population: 4000,
+      rainfall: 500
+    },
+    geometry: {
+      type: 'Point',
+      coordinates: [0, 0]
+    }
+  }]
+};
+
+var style = new ol.style.Style({
+  symbolizers: [
+    new ol.style.Icon({
+      url: 'data/icon.png',
+      yOffset: -22
+    })
+  ]
+});
+
+var vector = new ol.layer.Vector({
+  source: new ol.source.Vector({
+    parser: new ol.parser.GeoJSON(),
+    data: data
+  }),
+  style: style
+});
+
+var map = new ol.Map({
+  layers: [raster, vector],
+  renderer: ol.RendererHint.CANVAS,
+  target: 'map',
+  view: new ol.View2D({
+    center: [0, 0],
+    zoom: 3
+  })
+});
+
+var element = document.getElementById('popup');
+
+var popup = new ol.Overlay({
+  element: element
+});
+map.addOverlay(popup);
+
+
+map.on('click', function(evt) {
+  map.getFeatures({
+    pixel: evt.getPixel(),
+    layers: [vector],
+    success: function(layerFeatures) {
+      var feature = layerFeatures[0][0];
+      if (feature) {
+        var geometry = feature.getGeometry();
+        var coord = geometry.getCoordinates();
+        popup.setPosition(coord);
+        $(element).popover({
+          'placement': 'top',
+          'html': true,
+          'content': feature.get('name')
+        });
+        $(element).popover('show');
+      } else {
+        $(element).popover('destroy');
+      }
+    }
+  });
+});

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">
@@ -19,6 +20,9 @@
       .example:hover {
         background-color: #ddd;
       }
+      .navbar-search.pull-left {
+        padding: 5px;
+      }
 
       ::-webkit-scrollbar {
         width: 8px;
@@ -174,17 +178,11 @@
     <div class="navbar navbar-inverse navbar-fixed-top">
       <div class="navbar-inner">
         <div class="container">
-          <a class="brand" href="./">OpenLayers 3 Examples</a>
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
           <form class="navbar-search pull-left">
             <input name="q" type="text" id="keywords" class="search-query" placeholder="Search">
             <span id="count"></span>
           </form>
-          <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>
@@ -208,8 +206,5 @@
       </div>
 
     </div>
-
-    <script src="../resources/social-links.js" type="text/javascript"></script>
-
   </body>
 </html>

examples/kml-earthquakes.html

@@ -0,0 +1,75 @@
+<!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>Earthquakes in KML</title>
+    <style>
+      #map {
+        position: relative;
+      }
+      #info {
+        position: absolute;
+        height: 1px;
+        width: 1px;
+        z-index: 100;
+      }
+      .tooltip.in {
+        opacity: 1;
+        filter: alpha(opacity=100);
+      }
+      .tooltip.top .tooltip-arrow {
+        border-top-color: white;
+      }
+      .tooltip-inner {
+        border: 2px solid white;
+      }
+    </style>
+  </head>
+  <body>
+
+    <div class="navbar navbar-inverse navbar-fixed-top">
+      <div class="navbar-inner">
+        <div class="container">
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>          
+        </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">Earthquakes in KML</h4>
+          <p id="shortdesc">Demonstrates the use of a Shape symbolizer to render earthquake locations.</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 renders earthquake locations with a size relative to their magnitude.  The style uses a <code>ol.style.Shape</code> symbolizer where the <code>size</code> comes from the <code>magnitude</code> attribute on the features.
+            </p>
+            <p>See the <a href="kml-earthquakes.js" target="_blank">kml-earthquakes.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-earthquakes" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
+
+  </body>
+</html>

examples/kml-earthquakes.js

@@ -0,0 +1,83 @@
+goog.require('ol.Map');
+goog.require('ol.RendererHint');
+goog.require('ol.View2D');
+goog.require('ol.expr');
+goog.require('ol.layer.Tile');
+goog.require('ol.layer.Vector');
+goog.require('ol.parser.KML');
+goog.require('ol.source.Stamen');
+goog.require('ol.source.Vector');
+goog.require('ol.style.Fill');
+goog.require('ol.style.Shape');
+goog.require('ol.style.Stroke');
+goog.require('ol.style.Style');
+
+
+
+var style = new ol.style.Style({
+  symbolizers: [
+    new ol.style.Shape({
+      size: ol.expr.parse('5 + 20 * (magnitude - 5)'),
+      fill: new ol.style.Fill({
+        color: '#ff9900',
+        opacity: 0.4
+      }),
+      stroke: new ol.style.Stroke({
+        color: '#ffcc00',
+        opacity: 0.2
+      })
+    })
+  ]
+});
+
+var vector = new ol.layer.Vector({
+  source: new ol.source.Vector({
+    parser: new ol.parser.KML({dimension: 2}),
+    url: 'data/kml/2012_Earthquakes_Mag5.kml'
+  }),
+  style: style
+});
+
+var raster = new ol.layer.Tile({
+  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-timezones.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>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="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>          
+        </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/example-behaviour.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.Tile');
+goog.require('ol.layer.Vector');
+goog.require('ol.parser.KML');
+goog.require('ol.source.Stamen');
+goog.require('ol.source.Vector');
+goog.require('ol.style.Fill');
+goog.require('ol.style.Stroke');
+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({
+  symbolizers: [
+    new ol.style.Fill({
+      color: '#ffff33',
+      opacity: ol.expr.parse('getOpacity()')
+    }),
+    new ol.style.Stroke({
+      color: '#ffffff'
+    })
+  ]
+});
+
+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.Tile({
+  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">
@@ -14,13 +15,7 @@
     <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>
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>          
         </div>
       </div>
     </div>
@@ -43,14 +38,18 @@
           </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>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
 
   </body>
 </html>

examples/kml.js

@@ -1,16 +1,14 @@
-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.Tile');
 goog.require('ol.layer.Vector');
 goog.require('ol.parser.KML');
-goog.require('ol.projection');
-goog.require('ol.source.TiledWMS');
+goog.require('ol.source.TileWMS');
 goog.require('ol.source.Vector');
 
-var raster = new ol.layer.TileLayer({
-  source: new ol.source.TiledWMS({
+var raster = new ol.layer.Tile({
+  source: new ol.source.TileWMS({
     url: 'http://vmap0.tiles.osgeo.org/wms/vmap0',
     crossOrigin: null,
     params: {
@@ -21,30 +19,37 @@ 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'
   })
 });
 
 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({
-  maxDepth: 1, dimension: 2, extractStyles: true, extractAttributes: true});
-
-$.ajax({
-  url: 'data/kml/lines.kml'
-}).done(function(data) {
-  vector.parseFeatures(data, kml, epsg4326);
+map.on(['click', 'mousemove'], function(evt) {
+  map.getFeatures({
+    pixel: evt.getPixel(),
+    layers: [vector],
+    success: function(featuresByLayer) {
+      var features = featuresByLayer[0];
+      var info = [];
+      for (var i = 0, ii = features.length; i < ii; ++i) {
+        info.push(features[i].get('name'));
+      }
+      document.getElementById('info').innerHTML = info.join(', ') || '&nbsp';
+    }
+  });
 });

examples/layer-group.html

@@ -0,0 +1,125 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="chrome=1">
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
+    <link rel="stylesheet" href="../resources/layout.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
+    <style>
+      #layertree li > span {
+        cursor: pointer;
+      }
+    </style>
+    <title>Layer group example</title>
+  </head>
+  <body>
+
+    <div class="navbar navbar-inverse navbar-fixed-top">
+      <div class="navbar-inner">
+        <div class="container">
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>          
+        </div>
+      </div>
+    </div>
+
+    <div class="container-fluid">
+
+      <div class="row-fluid">
+        <div class="span6">
+          <div id="map" class="map"></div>
+
+          <h4 id="title">Layer group example</h4>
+          <p id="shortdesc">Example of a map with layer group.</p>
+          <div id="docs">
+            <p>See the <a href="layer-group.js" target="_blank">layer-group.js source</a> to see how this is done.</p>
+          </div>
+          <div id="tags">tilejson, input, bind, group, layergroup</div>
+        </div>
+
+        <div id="layertree" class="span6">
+          <h5>Click on layer nodes below to change their properties.</h5>
+              <ul>
+                <li><span>OpenAerial layer</span>
+                  <fieldset id="layer0">
+                    <label class="checkbox" for="visible0">
+                      <input id="visible0" class="visible" type="checkbox"/>visibility
+                    </label>
+                    <label>opacity</label>
+                    <input class="opacity" type="range" min="0" max="1" step="0.01"/>
+                    <label>hue</label>
+                    <input class="hue" type="range" min="-3.141592653589793" max="3.141592653589793" step="0.01"/>
+                    <label>saturation</label>
+                    <input class="saturation" type="range" min="0" max="5" step="0.01"/>
+                    <label>contrast</label>
+                    <input class="contrast" type="range" min="0" max="2" step="0.01"/>
+                    <label>brightness</label>
+                    <input class="brightness" type="range" min="-1" max="1" step="0.01"/>
+                  </fieldset>
+                </li>
+                <li><span>Layer group</span>
+                  <fieldset id="layer1">
+                    <label class="checkbox" for="visible1">
+                      <input id="visible1" class="visible" type="checkbox"/>visibility
+                    </label>
+                    <label>opacity</label>
+                    <input class="opacity" type="range" min="0" max="1" step="0.01"/>
+                    <label>hue</label>
+                    <input class="hue" type="range" min="-3.141592653589793" max="3.141592653589793" step="0.01"/>
+                    <label>saturation</label>
+                    <input class="saturation" type="range" min="0" max="5" step="0.01"/>
+                    <label>contrast</label>
+                    <input class="contrast" type="range" min="0" max="2" step="0.01"/>
+                    <label>brightness</label>
+                    <input class="brightness" type="range" min="-1" max="1" step="0.01"/>
+                  </fieldset>
+                  <ul>
+                    <li><span>Food insecurity layer</span>
+                      <fieldset id="layer10">
+                        <label class="checkbox" for="visible10">
+                          <input id="visible10" class="visible" type="checkbox"/>visibility
+                        </label>
+                        <label>opacity</label>
+                        <input class="opacity" type="range" min="0" max="1" step="0.01"/>
+                        <label>hue</label>
+                        <input class="hue" type="range" min="-3.141592653589793" max="3.141592653589793" step="0.01"/>
+                        <label>saturation</label>
+                        <input class="saturation" type="range" min="0" max="5" step="0.01"/>
+                        <label>contrast</label>
+                        <input class="contrast" type="range" min="0" max="2" step="0.01"/>
+                        <label>brightness</label>
+                        <input class="brightness" type="range" min="-1" max="1" step="0.01"/>
+                      </fieldset>
+                    </li>
+                    <li><span>World borders layer</span>
+                      <fieldset id="layer11">
+                        <label class="checkbox" for="visible11">
+                          <input id="visible11" class="visible" type="checkbox"/>visibility
+                        </label>
+                        <label>opacity</label>
+                        <input class="opacity" type="range" min="0" max="1" step="0.01"/>
+                        <label>hue</label>
+                        <input class="hue" type="range" min="-3.141592653589793" max="3.141592653589793" step="0.01"/>
+                        <label>saturation</label>
+                        <input class="saturation" type="range" min="0" max="5" step="0.01"/>
+                        <label>contrast</label>
+                        <input class="contrast" type="range" min="0" max="2" step="0.01"/>
+                        <label>brightness</label>
+                        <input class="brightness" type="range" min="-1" max="1" step="0.01"/>
+                      </fieldset>
+                    </li>
+                  </ul>
+                </li>
+              </ul>
+
+      </div>
+
+    </div>
+
+    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="loader.js?id=layer-group" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
+
+  </body>
+</html>