Merge pull request #1955 from ahocevar/canvas-no-taint

Test canvas size with an untainted canvas

.jshintrc

@@ -0,0 +1,4 @@
+{
+	"-W030": true,
+	"-W083": true
+}

.travis.yml

@@ -5,6 +5,7 @@ before_install:
   - "git fetch origin refs/tags/v3.2.2:refs/tags/v3.2.2"
   - "git checkout tags/v3.2.2"
   - "cd ../.."
+  - "npm install"
 
 before_script:
   - "./build.py plovr"

README.md

@@ -4,7 +4,7 @@
 
 Welcome to [OpenLayers 3](http://ol3js.org/)!
 
-Check out the [hosted examples](http://ol3js.org/en/master/examples/) or poke around the evolving [API docs](http://ol3js.org/en/master/apidoc/).
+Check out the [hosted examples](http://ol3js.org/en/master/examples/), the [workshop](http://ol3js.org/ol3-workshop/) or poke around the evolving [API docs](http://ol3js.org/en/master/apidoc/).
 
 Please don't ask questions in the github issue tracker but use [the mailing list](https://groups.google.com/forum/#!forum/ol3-dev) instead.
 

apidoc/conf.json

@@ -8,7 +8,13 @@
     },
     "source": {
         "includePattern": ".+\\.js(doc)?$",
-        "excludePattern": "(^|\\/|\\\\)_"
+        "excludePattern": "(^|\\/|\\\\)_",
+        "exclude": [
+            "src/googx/dom/fullscreen.js"
+        ],
+        "include": [
+            "src"
+        ]
     },
     "plugins": [
         "plugins/markdown",

apidoc/plugins/exports.js

@@ -1,10 +1,13 @@
 /*
- * This plugin parses goog.exportSymbol and goog.exportProperty calls to build
- * a list of API symbols and properties. Everything else is marked undocumented,
- * which will remove it from the docs.
+ * This plugin parses externs/oli.js as well as goog.exportSymbol and
+ * goog.exportProperty calls to build a list of API symbols and properties.
+ * Unexported modules linked from @param or @fires will be marked unexported,
+ * and the documentation will not contain the constructor. Everything else is
+ * marked undocumented, which will remove it from the docs.
  */
 
 var api = [];
+var unexported = [];
 
 function collectExports(source) {
   var i, ii, symbol, property;
@@ -27,9 +30,22 @@ function collectExports(source) {
   }
 }
 
+function collectOliExports(source) {
+  var oli = source.match(/[^\{]oli\.([^;^ ]*);? ?/g);
+  if (oli) {
+    i = 0; ii = oli.length;
+    for (; i < ii; ++i) {
+      property = 'ol.' + oli[i].match(/oli.([^;]*)/)[1]
+          .replace('.prototype.', '#');
+      unexported.push(property);
+    }
+  }
+}
+
 var encoding = env.conf.encoding || 'utf8';
 var fs = require('jsdoc/fs');
 collectExports(fs.readFileSync('build/src/external/src/exports.js', encoding));
+collectOliExports(fs.readFileSync('externs/oli.js', encoding));
 
 
 exports.handlers = {
@@ -56,7 +72,6 @@ exports.handlers = {
       }
     }
     if (api.indexOf(e.doclet.longname) > -1) {
-      // Add params of API symbols to the API
       var names, name;
       var params = e.doclet.params;
       if (params) {
@@ -65,43 +80,39 @@ exports.handlers = {
           if (names) {
             for (j = 0, jj=names.length; j < jj; ++j) {
               name = names[j];
-              if (api.indexOf(name) === -1) {
-                api.push(name);
+              if (unexported.indexOf(name) === -1) {
+                unexported.push(name);
               }
             }
           }
         }
       }
-    }
-  }
-  
-};
-
-
-function filter(e) {
-  if (e.doclet) {
-    var fqn = e.doclet.longname;
-    if (fqn) {
-      e.doclet.undocumented = (api.indexOf(fqn) === -1);
-      // Remove parents that are not part of the API
-      var parent;
-      var parents = e.doclet.augments;
-      if (parents) {
-        for (var i = parents.length - 1; i >= 0; --i) {
-          parent = parents[i];
-          if (api.indexOf(parent) === -1) {
-            parents.splice(i, 1);
+      var links = e.doclet.comment.match(/\{@link ([^\}]*)\}/g);
+      if (links) {
+        for (i=0, ii=links.length; i < ii; ++i) {
+          var link = links[i].match(/\{@link (.*)\}/)[1];
+          if (unexported.indexOf(link) === -1) {
+            unexported.push(link);
           }
         }
       }
     }
+  },
+  
+  parseComplete: function(e) {
+    for (var j = e.doclets.length - 1; j >= 0; --j) {
+      var doclet = e.doclets[j];
+      if (doclet.kind == 'namespace' || doclet.kind == 'event' || doclet.fires) {
+        continue;
+      }
+      var fqn = doclet.longname;
+      if (fqn) {
+        doclet.unexported = (api.indexOf(fqn) === -1 && unexported.indexOf(fqn) !== -1);
+        if (api.indexOf(fqn) === -1 && unexported.indexOf(fqn) === -1) {
+          e.doclets.splice(j, 1);
+        }
+      }
+    }
   }
-}
 
-exports.nodeVisitor = {
-
-  visitNode: function(node, e, parser, currentSourceName) {
-    // filter out non-API symbols before the addDocletRef finisher is called
-    e.finishers.unshift(filter);
-  }
 };

apidoc/plugins/inheritdoc.js

@@ -1,5 +1,5 @@
 /*
- * This is a hack to prevent inheritDoc and override tags from entirely removing
+ * This is a hack to prevent inheritDoc tags from entirely removing
  * documentation of the method that inherits the documentation.
  *
  * TODO: Remove this hack when https://github.com/jsdoc3/jsdoc/issues/53
@@ -8,7 +8,7 @@
 exports.nodeVisitor = {
 
   visitNode: function(node, e, parser, currentSourceName) {
-    if (/@(inheritDoc|override)(\n|\r)/.test(e.comment)) {
+    if (/@(inheritDoc)(\n|\r)/.test(e.comment)) {
       e.preventDefault = true;
     }
   }

apidoc/plugins/observable.js

@@ -21,6 +21,12 @@ exports.defineTags = function(dictionary) {
         description: description,
         readonly: readonly
       });
+      if (!doclet.fires) {
+        doclet.fires = [];
+      }
+      if (doclet.fires.indexOf('{@link ol.ObjectEvent} ol.event:ObjectEvent') === -1) {
+        doclet.fires.push('{@link ol.ObjectEvent} ol.event:ObjectEvent');
+      }
     }
   });
 };

apidoc/plugins/todo.js

@@ -22,6 +22,12 @@ exports.defineTags = function(dictionary) {
           description: description,
           readonly: readonly
         });
+        if (!doclet.fires) {
+          doclet.fires = [];
+        }
+        if (doclet.fires.indexOf('{@link ol.ObjectEvent} ol.event:ObjectEvent') === -1) {
+          doclet.fires.push('{@link ol.ObjectEvent} ol.event:ObjectEvent');
+        }
       }
     }
   });

apidoc/template/static/styles/jsdoc-default.css

@@ -211,7 +211,7 @@ dt.tag-source, dd.tag-source {
 
 .description {
 	margin-bottom: 1em;
-	margin-left: -16px;
+	margin-left: 0px;
 	margin-top: 1em;
 }
 

apidoc/template/tmpl/container.tmpl

@@ -27,8 +27,7 @@
     <?js if (doc.kind === 'module' && doc.module) { ?>
         <?js= self.partial('method.tmpl', doc.module) ?>
     <?js } ?>
-    
-    <?js if (doc.kind === 'class') { ?>
+    <?js if (!doc.unexported && doc.kind === 'class') { ?>
         <?js= self.partial('method.tmpl', doc) ?>
     <?js } else { ?>
         <?js if (doc.description) { ?>
@@ -101,6 +100,18 @@
 
     <?js } ?>
 
+    <?js
+        var events = doc.events;
+        if (events && events.length && events.forEach) {
+    ?>
+        <h3 class="subsection-title">Events</h3>
+        <?js if (observables && observables.length) { ?>
+        <p>These events are available in addition to the <b>Observable Properties</b> events listed above.</p>
+        <?js } ?>
+        <dl><?js= self.partial('events.tmpl', events) ?></dl>
+
+    <?js } ?>
+
     <?js
         var members = self.find({kind: 'member', memberof: title === 'Globals'? {isUndefined: true} : doc.longname});
         if (members && members.length && members.forEach) { 

apidoc/template/tmpl/observables.tmpl

@@ -8,7 +8,7 @@
     <th>Name</th>
     <th>Type</th>
     <th>Settable</th>
-    <th>Event</th>
+    <th><a href="ol.ObjectEvent.html">ol.ObjectEvent</a> type</th>
     <th class="last">Description</th>
   </tr>
   </thead>

bin/combine-examples.py

@@ -8,19 +8,19 @@ def main(argv):
     examples = {}
     requires = set()
     for filename in argv[1:]:
-        lines = open(filename).readlines()
+        lines = open(filename, 'rU').readlines()
         if len(lines) > 0 and lines[0].startswith('// NOCOMPILE'):
             continue
         requires.update(line for line in lines if line.startswith('goog.require'))
         examples[filename] = [line for line in lines if not line.startswith('goog.require')]
     for require in sorted(requires):
-        print require,
+        sys.stdout.write(require)
     for filename in sorted(examples.keys()):
-        print '// ', filename
-        print '(function(){'
+        sys.stdout.write('// ' + filename + '\n')
+        sys.stdout.write('(function(){\n')
         for line in examples[filename]:
-            print line,
-        print '})();'
+            sys.stdout.write(line)
+        sys.stdout.write('})();\n')
 
 
 if __name__ == '__main__':

bin/generate-exports.py

@@ -113,7 +113,7 @@ def main(argv):
     for arg in args:
         in_comment = False
         object_literal = None
-        for line in open(arg):
+        for line in open(arg, 'rU'):
             line = line.strip()
             if not line:
                 continue

bin/loader_hosted_examples.js

@@ -5,7 +5,7 @@
  * This loader is used for the hosted examples. It is used in place of the
  * development loader (examples/loader.js).
  *
- * ol.css, ol.js, ol-simple.js, ol-whitespace.js, and ol-deps.js are built
+ * ol.js, ol-simple.js, ol-whitespace.js, and ol-deps.js are built
  * by OL3's build.py script. They are located in the ../build/ directory,
  * relatively to this script.
  *
@@ -66,7 +66,6 @@
   }
 
   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 {

bin/pyglslunit.py

@@ -52,7 +52,7 @@ def main(argv):
     common, vertex, fragment = [], [], []
     attributes, uniforms, varyings = {}, {}, {}
     block = None
-    for line in open(options.input):
+    for line in open(options.input, 'rU'):
         if line.startswith('//!'):
             m = re.match(r'//!\s+NAMESPACE=(\S+)\s*\Z', line)
             if m:
@@ -111,10 +111,10 @@ def main(argv):
     context['getUniforms'] = [uniforms[u] for u in sorted(uniforms.keys())]
 
     if options.output and options.output != '-':
-        output = open(options.output, 'w')
+        output = open(options.output, 'wb')
     else:
         output = sys.stdout
-    output.write(pystache.render(open(options.template).read(), context))
+    output.write(pystache.render(open(options.template, 'rb').read(), context))
 
 
 if __name__ == '__main__':

build.py

@@ -4,8 +4,8 @@ from cStringIO import StringIO
 import gzip
 import json
 import os
-import os.path
-import regex as re
+import glob
+import re
 import shutil
 import sys
 
@@ -14,68 +14,68 @@ from pake import ifind, main, output, rule, target, variables, virtual, which
 
 
 if sys.platform == 'win32':
-    """ windows_defaults assumes that jsdoc was installed at a specific place
-        (C:\jsdoc). It also fixes a certain version (1.9.0) of phantomjs which
-        might not anymore be proposed on
-        http://code.google.com/p/phantomjs/downloads/list"""
 
-    windows_defaults = {
-        'ProgramFiles': os.environ.get('ProgramFiles', 'C:\\Program Files'),
-        'Python27': os.environ.get('SystemDrive', 'C:') + '\\Python27',
-        'jsdoc': os.environ.get('SystemDrive', 'C:') + '\\jsdoc3',
-        'phantomjs': (os.environ.get('SystemDrive', 'C:') +
-                      '\\phantomjs-1.9.0-windows')
+    win = {
+        'GIT': 'git.exe',
+        'GJSLINT': 'gjslint.exe',
+        'JAVA': 'java.exe',
+        'JAR': 'jar.exe',
+        'JSDOC': 'jsdoc.cmd',
+        'JSHINT': './node_modules/.bin/jshint',
+        'PYTHON': 'python.exe',
+        'PHANTOMJS': 'phantomjs.cmd'
     }
 
-    if which('git.exe'):
-        variables.GIT = 'git.exe'
-    else:
-        variables.GIT = os.path.join(windows_defaults['ProgramFiles'],
-                                     'Git', 'bin', 'git.exe')
+    sys_dir = os.environ.get('SYSTEMDRIVE')
+    program_files = os.environ.get('PROGRAMFILES')
+    java_home = os.environ.get('JAVA_HOME')
 
-    if which('gjslint.exe'):
-        variables.GJSLINT = 'gjslint.exe'
-    else:
-        variables.GJSLINT = os.path.join(windows_defaults['Python27'],
-                                         'Scripts', 'gjslint.exe')
+    if not java_home:
+        # Following lines choose sensible defaults to guess JAVA_HOME in
+        # 32/64bit Program Files folder opting for the most current version.
+        search_term = os.path.join(sys_dir, os.sep, 'Program Files*', 'Java', 'jdk*')
+        found_jdks = sorted(glob.glob(search_term), key=lambda x: x[-8:])
+        if found_jdks:
+            java_home = found_jdks[-1]
 
-    if which('java.exe'):
-        variables.JAVA = 'java.exe'
-    else:
-        variables.JAVA = os.path.join(windows_defaults['ProgramFiles'],
-                                      'Java', 'jre7', 'bin', 'java.exe')
+    if java_home:
+        if not which(win['JAVA']):
+            win['JAVA'] = os.path.join(java_home, 'bin', 'java.exe')
+        if not which(win['JAR']):
+            win['JAR'] = os.path.join(java_home, 'bin', 'jar.exe')
+    elif not which(win['JAVA']):
+        win['JAVA'] = os.path.join(program_files,
+                                   'Java', 'jre7', 'bin', 'java.exe')
 
-    if which('jar.exe'):
-        variables.JAR = 'jar.exe'
-    else:
-        variables.JAR = os.path.join(windows_defaults['ProgramFiles'],
-                                     'Java', 'jdk1.7.0_17', 'bin', 'jar.exe')
+    if not which(win['GIT']):
+        win['GIT'] = os.path.join(program_files, 'Git', 'cmd', 'git.exe')
+    if not which(win['GIT']):
+        win['GIT'] = os.path.join(program_files, 'Git', 'bin', 'git.exe')
 
-    if which('jsdoc.cmd'):
-        variables.JSDOC = 'jsdoc.cmd'
-    else:
-        variables.JSDOC = os.path.join(windows_defaults['jsdoc'],
-                                       'jsdoc.cmd')
+    if not which(win['PYTHON']):
+        win['PYTHON'] = os.path.join(sys_dir, 'Python27', 'python.exe')
 
-    if which('python.exe'):
-        variables.PYTHON = 'python.exe'
-    else:
-        variables.PYTHON = os.path.join(windows_defaults['Python27'],
-                                        'python.exe')
+    if not which(win['GJSLINT']):
+        win['GJSLINT'] = os.path.join(sys_dir, 'Python27', 'Scripts', 'gjslint.exe')
 
-    if which('phantomjs.exe'):
-        variables.PHANTOMJS = 'phantomjs.exe'
-    else:
-        variables.PHANTOMJS = os.path.join(windows_defaults['phantomjs'],
-                                           'phantomjs.exe')
+    if not which(win['PHANTOMJS']):
+        win['PHANTOMJS'] = 'phantomjs.exe'
+    if not which(win['PHANTOMJS']):
+        win['PHANTOMJS'] = os.path.join(sys_dir, 'phantomjs-1.9.7-windows', 'phantomjs.exe')
+
+    if not which(win['JSDOC']):
+        win['JSDOC'] = os.path.join(program_files, 'jsdoc3', 'jsdoc.cmd')
+
+    for program, path in win.iteritems():
+        setattr(variables, program, path)
 
 else:
     variables.GIT = 'git'
     variables.GJSLINT = 'gjslint'
+    variables.JSHINT = './node_modules/.bin/jshint'
     variables.JAVA = 'java'
     variables.JAR = 'jar'
     variables.JSDOC = 'jsdoc'
-    variables.NODE = 'node'
     variables.PYTHON = 'python'
     variables.PHANTOMJS = 'phantomjs'
 
@@ -83,7 +83,8 @@ variables.BRANCH = output(
     '%(GIT)s', 'rev-parse', '--abbrev-ref', 'HEAD').strip()
 
 EXECUTABLES = [variables.GIT, variables.GJSLINT, variables.JAVA, variables.JAR,
-               variables.JSDOC, variables.PYTHON, variables.PHANTOMJS]
+               variables.JSDOC, variables.JSHINT, variables.PYTHON,
+               variables.PHANTOMJS]
 
 EXPORTS = [path
            for path in ifind('src')
@@ -103,7 +104,6 @@ EXAMPLES_SRC = [path
                 if path.endswith('.js')
                 if not path.endswith('.combined.js')
                 if not path.startswith('examples/bootstrap')
-                if not path.startswith('examples/font-awesome')
                 if path != 'examples/Jugl.js'
                 if path != 'examples/jquery.min.js'
                 if path != 'examples/loader.js'
@@ -154,7 +154,7 @@ PROJ4JS_ZIP_MD5 = '17caad64cf6ebc6e6fe62f292b134897'
 def report_sizes(t):
     stringio = StringIO()
     gzipfile = gzip.GzipFile(t.name, 'w', 9, stringio)
-    with open(t.name) as f:
+    with open(t.name, 'rb') as f:
         shutil.copyfileobj(f, gzipfile)
     gzipfile.close()
     rawsize = os.stat(t.name).st_size
@@ -167,7 +167,7 @@ def report_sizes(t):
 virtual('default', 'build')
 
 
-virtual('integration-test', 'lint', 'build', 'build-all',
+virtual('integration-test', 'lint', 'jshint', 'build', 'build-all',
         'test', 'build/examples/all.combined.js', 'check-examples', 'apidoc')
 
 
@@ -175,7 +175,7 @@ virtual('build', 'build/ol.css', 'build/ol.js',
         'build/ol-simple.js', 'build/ol-whitespace.js')
 
 
-virtual('check', 'lint', 'build/ol-all.js', 'test')
+virtual('check', 'lint', 'jshint', 'build/ol-all.js', 'test')
 
 
 virtual('todo', 'fixme')
@@ -252,11 +252,11 @@ for glsl_src in GLSL_SRC:
 def _build_require_list(dependencies, output_file_name):
     requires = set()
     for dependency in dependencies:
-        for line in open(dependency):
+        for line in open(dependency, 'rU'):
             match = re.match(r'goog\.provide\(\'(.*)\'\);', line)
             if match:
                 requires.add(match.group(1))
-    with open(output_file_name, 'w') as f:
+    with open(output_file_name, 'wb') as f:
         for require in sorted(requires):
             f.write('goog.require(\'%s\');\n' % (require,))
 
@@ -307,7 +307,7 @@ def build_examples_all_combined_js(t):
 
 @target('build/examples/all.js', EXAMPLES_SRC)
 def build_examples_all_js(t):
-    t.output('bin/combine-examples.py', t.dependencies)
+    t.output('%(PYTHON)s', 'bin/combine-examples.py', t.dependencies)
 
 
 @rule(r'\Abuild/examples/(?P<id>.*).json\Z')
@@ -321,19 +321,20 @@ def examples_star_json(name, match):
                 '../build/src/internal/src/types.js',
             ],
             'externs': [
-                '//json.js',
                 '//jquery-1.7.js',
                 '../externs/bingmaps.js',
                 '../externs/bootstrap.js',
+                '../externs/closure-compiler.js',
+                '../externs/example.js',
                 '../externs/geojson.js',
-                '../externs/topojson.js',
                 '../externs/oli.js',
                 '../externs/proj4js.js',
                 '../externs/tilejson.js',
-                '../externs/closure-compiler.js',
+                '../externs/topojson.js',
+                '../externs/vbarray.js',
             ],
         })
-        with open(t.name, 'w') as f:
+        with open(t.name, 'wb') as f:
             f.write(content)
     dependencies = [__file__, 'buildcfg/base.json']
     return Target(name, action=action, dependencies=dependencies)
@@ -374,7 +375,7 @@ virtual('lint', 'build/lint-timestamp', 'build/lint-generated-timestamp',
 def build_lint_src_timestamp(t):
     t.run('%(GJSLINT)s',
           '--jslint_error=all',
-          '--custom_jsdoc_tags=todo',
+          '--custom_jsdoc_tags=event,fires,todo,function',
           '--strict',
           t.newer(t.dependencies))
     t.touch()
@@ -410,6 +411,15 @@ def build_lint_libtess_js_timestamp(t):
     t.touch()
 
 
+virtual('jshint', 'build/jshint-timestamp')
+
+
+@target('build/jshint-timestamp', SRC, EXAMPLES_SRC, SPEC, precious=True)
+def build_jshint_timestamp(t):
+    t.run(variables.JSHINT, '--verbose', t.newer(t.dependencies))
+    t.touch()
+
+
 def _strip_comments(lines):
     # FIXME this is a horribe hack, we should use a proper JavaScript parser
     # here
@@ -448,7 +458,7 @@ def build_check_requires_timestamp(t):
             # the generated regular expression to exceed Python's limits
             if zi.filename.startswith('closure/goog/i18n/'):
                 continue
-            for line in zf.open(zi):
+            for line in zf.open(zi, 'rU'):
                 m = re.match(r'goog.provide\(\'(.*)\'\);', line)
                 if m:
                     all_provides.add(m.group(1))
@@ -457,7 +467,7 @@ def build_check_requires_timestamp(t):
             continue
         require_linenos = {}
         uses = set()
-        lines = open(filename).readlines()
+        lines = open(filename, 'rU').readlines()
         for lineno, line in _strip_comments(lines):
             m = re.match(r'goog.provide\(\'(.*)\'\);', line)
             if m:
@@ -540,7 +550,7 @@ def build_check_requires_timestamp(t):
         requires = set()
         uses = set()
         uses_linenos = {}
-        for lineno, line in _strip_comments(open(filename)):
+        for lineno, line in _strip_comments(open(filename, 'rU')):
             m = re.match(r'goog.provide\(\'(.*)\'\);', line)
             if m:
                 provides.add(m.group(1))
@@ -583,13 +593,17 @@ def build_check_requires_timestamp(t):
         precious=True)
 def build_check_whitespace_timestamp(t):
     CR_RE = re.compile(r'\r')
+    LEADING_WHITESPACE_RE = re.compile(r'\s+')
     TRAILING_WHITESPACE_RE = re.compile(r'\s+\n\Z')
     NO_NEWLINE_RE = re.compile(r'[^\n]\Z')
     ALL_WHITESPACE_RE = re.compile(r'\s+\Z')
     errors = 0
     for filename in sorted(t.newer(t.dependencies)):
         whitespace = False
-        for lineno, line in enumerate(open(filename)):
+        for lineno, line in enumerate(open(filename, 'rU')):
+            if lineno == 0 and LEADING_WHITESPACE_RE.match(line):
+                t.info('%s:%d: leading whitespace', filename, lineno + 1)
+                errors += 1
             if CR_RE.search(line):
                 t.info('%s:%d: carriage return character in line', filename, lineno + 1)
                 errors += 1
@@ -623,16 +637,16 @@ 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('apidoc/template'))
+        'build/src/external/src/exports.js', SRC, SHADER_SRC,
+        ifind('apidoc/template'))
 def jsdoc_BRANCH_timestamp(t):
-    t.run('%(JSDOC)s', '-c', 'apidoc/conf.json', 'src', 'apidoc/index.md',
+    t.run('%(JSDOC)s', 'apidoc/index.md', '-c', 'apidoc/conf.json',
           '-d', 'build/hosted/%(BRANCH)s/apidoc')
     t.touch()
 
 
 def split_example_file(example, dst_dir):
-    lines = open(example).readlines()
+    lines = open(example, 'rU').readlines()
 
     target_lines = []
     target_require_lines = []
@@ -650,11 +664,11 @@ def split_example_file(example, dst_dir):
                 target_lines.append(line)
 
     target = open(
-        os.path.join(dst_dir, os.path.basename(example)), 'w')
+        os.path.join(dst_dir, os.path.basename(example)), 'wb')
     target_require = open(
         os.path.join(dst_dir, os.path.basename(example)
           .replace('.js', '-require.js')),
-        'w')
+        'wb')
 
     target.writelines(target_lines)
     target.close()
@@ -674,17 +688,21 @@ def host_resources(t):
 def host_examples(t):
     examples_dir = 'build/hosted/%(BRANCH)s/examples'
     build_dir = 'build/hosted/%(BRANCH)s/build'
+    css_dir = 'build/hosted/%(BRANCH)s/css'
     t.rm_rf(examples_dir)
     t.makedirs(examples_dir)
     t.rm_rf(build_dir)
     t.makedirs(build_dir)
+    t.rm_rf(css_dir)
+    t.makedirs(css_dir)
     t.cp(EXAMPLES, examples_dir)
     for example in [path.replace('.html', '.js') for path in EXAMPLES]:
         split_example_file(example, examples_dir % vars(variables))
     t.cp_r('examples/data', examples_dir + '/data')
     t.cp('bin/loader_hosted_examples.js', examples_dir + '/loader.js')
     t.cp('build/ol.js', 'build/ol-simple.js', 'build/ol-whitespace.js',
-         'build/ol.css', build_dir)
+         build_dir)
+    t.cp('build/ol.css', css_dir)
     t.cp('examples/index.html', 'examples/example-list.js',
          'examples/example-list.xml', 'examples/Jugl.js',
          'examples/jquery.min.js', examples_dir)
@@ -708,7 +726,7 @@ def host_examples(t):
 def check_examples(t):
     examples = ['build/hosted/%(BRANCH)s/' + e
                 for e in EXAMPLES
-                if not open(e.replace('.html', '.js')).readline().startswith('// NOCOMPILE')]
+                if not open(e.replace('.html', '.js'), 'rU').readline().startswith('// NOCOMPILE')]
     all_examples = \
         [e + '?mode=advanced' for e in examples]
     for example in all_examples:
@@ -820,7 +838,7 @@ Other less frequently used targets are:
                      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
+  todo             - This is an alias for the fixme-target (see above).
   plovr            - Fetches the required plovr.jar. Usually called by other
                      targets that depend on plovr.
 

buildcfg/base.json

@@ -47,14 +47,14 @@
   "disambiguate-properties": true,
 
   "externs": [
-    "//json.js",
     "../externs/bingmaps.js",
     "../externs/closure-compiler.js",
     "../externs/geojson.js",
     "../externs/oli.js",
     "../externs/proj4js.js",
     "../externs/tilejson.js",
-    "../externs/topojson.js"
+    "../externs/topojson.js",
+    "../externs/vbarray.js"
   ],
 
   "level": "VERBOSE",

buildcfg/examples-all.json

@@ -1,15 +1,16 @@
 {
     "externs": [
-        "//json.js", 
         "//jquery-1.7.js", 
         "../externs/bingmaps.js", 
         "../externs/bootstrap.js", 
         "../externs/closure-compiler.js",
+        "../externs/example.js",
         "../externs/geojson.js", 
         "../externs/oli.js", 
         "../externs/proj4js.js", 
         "../externs/tilejson.js", 
-        "../externs/topojson.js"
+        "../externs/topojson.js",
+        "../externs/vbarray.js"
     ], 
     "id": "simple", 
     "inherits": "base.json", 

buildcfg/ol-all.json

@@ -3,7 +3,6 @@
   "id": "ol-all",
 
   "externs": [
-    "//json.js",
     "../build/src/external/externs/types.js",
     "../externs/bingmaps.js",
     "../externs/closure-compiler.js",
@@ -11,7 +10,8 @@
     "../externs/oli.js",
     "../externs/proj4js.js",
     "../externs/tilejson.js",
-    "../externs/topojson.js"
+    "../externs/topojson.js",
+    "../externs/vbarray.js"
   ],
 
   "inherits": "base.json",

buildcfg/ol-simple.json

@@ -13,7 +13,6 @@
   "id": "ol-simple",
 
   "externs": [
-    "//json.js",
     "../build/src/external/externs/types.js",
     "../externs/bingmaps.js",
     "../externs/closure-compiler.js",
@@ -21,7 +20,8 @@
     "../externs/oli.js",
     "../externs/proj4js.js",
     "../externs/tilejson.js",
-    "../externs/topojson.js"
+    "../externs/topojson.js",
+    "../externs/vbarray.js"
   ],
 
   "inherits": "ol.json",

buildcfg/ol-whitespace.json

@@ -14,14 +14,14 @@
   "disambiguate-properties": false,
 
   "externs": [
-    "//json.js",
     "../externs/bingmaps.js",
     "../externs/closure-compiler.js",
     "../externs/geojson.js",
     "../externs/oli.js",
     "../externs/proj4js.js",
     "../externs/tilejson.js",
-    "../externs/topojson.js"
+    "../externs/topojson.js",
+    "../externs/vbarray.js"
   ],
 
   "inherits": "ol.json",

buildcfg/ol.json

@@ -13,7 +13,6 @@
   "css-output-file": "../build/ol.css",
 
   "externs": [
-    "//json.js",
     "../build/src/external/externs/types.js",
     "../externs/bingmaps.js",
     "../externs/closure-compiler.js",
@@ -21,7 +20,8 @@
     "../externs/oli.js",
     "../externs/proj4js.js",
     "../externs/tilejson.js",
-    "../externs/topojson.js"
+    "../externs/topojson.js",
+    "../externs/vbarray.js"
   ],
 
   "inherits": "base.json",

css/ol.css

@@ -3,28 +3,15 @@
   text-align: right;
   bottom: 0;
   right: 0;
-  font-family: 'Lucida Grande',Verdana,Geneva,Lucida,Arial,Helvetica,sans-serif;
   padding: 6px;
+  color: #000000;
+  color: rgba(238,238,238,1);
+  background: rgba(0,60,136,0.3);
 }
 .ol-attribution a {
   text-decoration: none;
-}
-
-/* rgba is not supported on IE <= 8, fall back to black text so that it's readable */
-.ol-attribution {
-  color: #000000;
-}
-.ol-attribution:not([ie8andbelow]) {
-  color: #eeeeee;
-  background: rgba(0,60,136,0.3);
-}
-
-/* white links are unreadable on IE <= 8 with no background, fall back to blue links */
-.ol-attribution a {
   color: #7b98bc;
-}
-.ol-attribution a:not([ie8andbelow]) {
-  color: white;
+  color: rgba(255,255,255,1);
 }
 
 .ol-attribution ul {
@@ -46,65 +33,7 @@
   padding-top: 2px;
   white-space: nowrap;
 }
-.ol-full-screen {
-  /* IE <= 8 doesn't support rgba, fall back to a light grey */
-  background: #eee;
-  border-radius: 4px;
-  padding: 2px;
-  position: absolute;
-  right: 8px;
-  top: 8px;
-}
-.ol-full-screen:not([ie8andbelow]) {
-  /* IE <= 8 doesn't support rgba, fall back to a light grey */
-  background: rgba(255,255,255,0.4);
-}
-@media print {
-  .ol-full-screen {
-    display: none;
-  }
-}
-.ol-full-screen a {
-  /* IE <= 8 doesn't support rgba, fall back to a light blue */
-  background: #7b98bc;
-  color: white;
-  display: block;
-  font-family: 'Lucida Grande',Verdana,Geneva,Lucida,Arial,Helvetica,sans-serif;
-  font-size: 18px;
-  font-weight: bold;
-  height: 22px;
-  line-height: 19px;
-  margin: 1px;
-  padding: 0;
-  text-align: center;
-  text-decoration: none;
-  width: 22px;
-}
-.ol-full-screen a:not([ie8andbelow]) {
-  /* IE <= 8 doesn't support rgba, fall back to a light blue */
-  background: rgba(0,60,136,0.5);
-}
-a.ol-full-screen-false:after {
-  content: "\2194";
-}
-a.ol-full-screen-true:after {
-  content: "\00d7";
-}
 
-.ol-full-screen div {
-  border-radius: 2px;
-}
-.ol-full-screen div a {
-  border-radius: 2px;
-}
-.ol-full-screen a:hover {
-  /* IE <= 8 doesn't support rgba, fall back to a light blue */
-  background: #4c6079;
-}
-.ol-full-screen a:hover:not([ie8andbelow]) {
-  /* IE <= 8 doesn't support rgba, fall back to a light blue */
-  background: rgba(0,60,136,0.7);
-}
 .ol-logo {
   bottom: 0;
   left: 0;
@@ -127,24 +56,19 @@ a.ol-full-screen-true:after {
 }
 
 .ol-scale-line {
-  /* IE <= 8 doesn't support rgba, fall back to a light blue */
   background: #95b9e6;
+  background: rgba(0,60,136,0.3);
   border-radius: 4px;
   bottom: 8px;
   left: 8px;
   padding: 2px;
   position: absolute;
 }
-.ol-scale-line:not([ie8andbelow]) {
-  /* IE <= 8 doesn't support rgba, fall back to a light blue */
-  background: rgba(0,60,136,0.3);
-}
 .ol-scale-line-inner {
   border: 1px solid #eeeeee;
   border-top: none;
   color: #eeeeee;
   font-size: 10px;
-  font-family: 'Lucida Grande',Verdana,Geneva,Lucida,Arial,Helvetica,sans-serif;
   text-align: center;
   margin: 1px;
   padding: 0px 2px;
@@ -162,157 +86,200 @@ a.ol-full-screen-true:after {
   -webkit-tap-highlight-color: rgba(0,0,0,0);
 }
 
-.ol-zoom {
+.ol-zoom,
+.ol-zoom-extent,
+.ol-full-screen {
   position: absolute;
-  top: 8px;
-  left: 8px;
-  /* IE <= 8 doesn't support rgba, fall back to a light grey */
   background-color: #eee;
+  background-color: rgba(255,255,255,0.4);
   border-radius: 4px;
   padding: 2px;
 }
-/* IE <= 8 doesn't support rgba, fall back to a light grey */
-.ol-zoom:not([ie8andbelow]) {
-  background-color: rgba(255,255,255,0.4);
+.ol-zoom:hover,
+.ol-zoom-extent:hover,
+.ol-full-screen:hover {
+  background-color: rgba(255,255,255,0.6);
+}
+.ol-zoom {
+  top: .5em;
+  left: .5em;
+}
+.ol-zoom-extent {
+  top: 4.643em;
+  left: .5em;
+}
+.ol-full-screen {
+  right: .5em;
+  top: .5em;
 }
 @media print {
-  .ol-zoom {
+  .ol-zoom,
+  .ol-zoom-extent,
+  .ol-full-screen {
     display: none;
   }
 }
 
-.ol-zoom a {
+.ol-zoom button,
+.ol-zoom-extent button,
+.ol-full-screen button {
   display: block;
   margin: 1px;
   padding: 0;
   color: white;
-  font-size: 18px;
-  font-family: 'Lucida Grande',Verdana,Geneva,Lucida,Arial,Helvetica,sans-serif;
+  font-size: 1.14em;
   font-weight: bold;
   text-decoration: none;
   text-align: center;
-  height: 22px;
-  width: 22px;
-  line-height: 19px;
-  /* IE <= 8 doesn't support rgba, fall back to a light blue */
+  height: 1.375em;
+  width: 1.375em;
+  line-height: .4em;
   background-color: #7b98bc;
-}
-.ol-zoom a:not([ie8andbelow]) {
-  /* IE <= 8 doesn't support rgba, fall back to a light blue */
   background-color: rgba(0,60,136,0.5);
+  border: none;
 }
-.ol-touch .ol-zoom a {
-  font-size: 20px;
-  height: 30px;
-  width: 30px;
-  line-height: 26px;
+.ol-zoom button::-moz-focus-inner,
+.ol-zoom-extent button::-moz-focus-inner,
+.ol-full-screen button::-moz-focus-inner {
+  border: none;
+  padding: 0;
 }
-.ol-zoom a:hover {
-  color: #fff;
+.ol-zoom-extent button {
+  line-height: 1.4em;
+}
+.ol-touch .ol-zoom button,
+.ol-touch .ol-full-screen button,
+.ol-touch .ol-zoom-extent button {
+  font-size: 1.5em;
+}
+.ol-touch .ol-zoom-extent {
+  top: 5.5em;
+}
+.ol-zoom button:hover,
+.ol-zoom button:focus,
+.ol-zoom-extent button:hover,
+.ol-zoom-extent button:focus,
+.ol-full-screen button:hover,
+.ol-full-screen button:focus {
   text-decoration: none;
-  /* IE <= 8 doesn't support rgba, fall back to a lighter blue */
   background-color: #4c6079;
-}
-.ol-zoom a:hover:not([ie8andbelow]) {
-  /* IE <= 8 doesn't support rgba, fall back to a lighter blue */
   background-color: rgba(0,60,136,0.7);
 }
-
+.ol-zoom-extent button:after {
+    content: "E";
+}
 .ol-zoom-in {
   border-radius: 2px 2px 0 0;
 }
-
 .ol-zoom-out {
   border-radius: 0 0 2px 2px;
 }
+button.ol-full-screen-false:after {
+  content: "\2194";
+}
+button.ol-full-screen-true:after {
+  content: "\00d7";
+}
+
+/* invisible but not hidden */
+.ol-has-tooltip [role=tooltip] {
+  position: absolute;
+  clip: rect(1px 1px 1px 1px); /* < IE8 */
+  clip: rect(1px, 1px, 1px, 1px);
+  padding: 0;
+  border: 0;
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+  font-weight: normal;
+  font-size: 14px;
+  text-shadow: 0 0 2px #fff;
+}
+
+/* show a tooltip offset to below and right */
+.ol-has-tooltip:hover [role=tooltip], .ol-has-tooltip:focus [role=tooltip] {
+  -moz-box-sizing: content-box;
+  -webkit-box-sizing: content-box;
+  box-sizing: content-box;
+  clip: auto;
+  padding: 0 .4em;
+  font-size: .8em;
+  height: 1.2em;
+  width: auto;
+  line-height: 1.2em;
+  z-index: 1100;
+  max-height: 100px;
+  white-space: nowrap;
+  display: inline-block;
+  background: #FFF;
+  background: rgba(255,255,255,0.6);
+  color: #000;
+  border: 3px solid rgba(255,255,255,0);
+  border-left-width: 0;
+  border-radius: 0 4px 4px 0;
+  bottom: .3em;
+  left: 2.2em;
+}
+.ol-touch .ol-has-tooltip:hover [role=tooltip],
+.ol-touch .ol-has-tooltip:focus [role=tooltip] {
+  display: none;
+}
+.ol-zoom .ol-has-tooltip:hover [role=tooltip],
+.ol-zoom .ol-has-tooltip:focus [role=tooltip] {
+  top: 1.1em;
+}
+.ol-full-screen .ol-has-tooltip:hover [role=tooltip],
+.ol-full-screen .ol-has-tooltip:focus [role=tooltip] {
+  right: 2.2em;
+  left: auto;
+  border-radius: 4px 0 0 4px;
+}
 
 .ol-zoomslider {
   position: absolute;
-  top: 67px;
-  left: 8px;
-  /* IE <= 8 doesn't support rgba, fall back to a light grey */
+  top: 4.5em;
+  left: .5em;
+
   background: #eee;
+  background: rgba(255, 255, 255, 0.4);
   border-radius: 4px;
-  width: 28px;
-  height: 200px;
   outline: none;
   overflow: hidden;
-  padding: 0;
+  
+  width: 1.5675em;
+  height: 200px;
+  padding: 3px;
   margin: 0;
 }
-.ol-zoomslider:not([ie8andbelow]) {
-  /* IE <= 8 doesn't support rgba, fall back to a light grey */
-  background: rgba(255, 255, 255, 0.4);
-}
 .ol-zoomslider-thumb {
   position: absolute;
   display: block;
-  padding: 0;
-  margin: 2px;
-  /* IE <= 8 doesn't support rgba, fall back to a lighter blue */
   background: #7b98bc;
+  background: rgba(0,60,136,0.5);
   border-radius: 2px;
   outline: none;
   overflow: hidden;
-  height: 20px;
-  width: 24px;
-}
-.ol-zoomslider-thumb:not([ie8andbelow]) {
-  /* IE <= 8 doesn't support rgba, fall back to a lighter blue */
-  background: rgba(0,60,136,0.5);
-}
-.ol-zoom-extent {
-  position: absolute;
-  /* IE <= 8 doesn't support rgba, fall back to a light grey */
-  background: #eee;
-  border-radius: 4px;
-  left: 8px;
-  padding: 2px;
-  top: 65px;
-}
-.ol-zoom-extent:not([ie8andbelow]) {
-  /* IE <= 8 doesn't support rgba, fall back to a light grey */
-  background: rgba(255,255,255,0.4);
-}
-@media print {
-  .ol-zoom-extent {
-    display: none;
-  }
-}
-.ol-zoom-extent a {
-  display: block;
-  margin: 1px;
+  cursor: pointer;
+
+  font-size: 1.14em;
+  height: 1em;
+  width: 1.375em;
+  margin: 3px;
   padding: 0;
-  color: white;
-  font-size: 16px;
+}
+.ol-touch .ol-zoomslider {
+  top: 5.5em;
+  width: 2.052em;
+}
+.ol-touch .ol-zoomslider-thumb {
+  width: 1.8em;
+}
+
+.ol-zoom-extent button,
+.ol-attribution,
+.ol-full-screen button,
+.ol-scale-line-inner,
+.ol-zoom button,
+.ol-has-tooltip [role=tooltip] {
   font-family: 'Lucida Grande',Verdana,Geneva,Lucida,Arial,Helvetica,sans-serif;
-  font-weight: bold;
-  text-decoration: none;
-  text-align: center;
-  height: 22px;
-  width: 22px;
-  /* IE <= 8 doesn't support rgba, fall back to a lighter blue */
-  background-color: #7b98bc;
-  border-radius: 2px;
-}
-.ol-zoom-extent a:not([ie8andbelow]) {
-  /* IE <= 8 doesn't support rgba, fall back to a lighter blue */
-  background-color: rgba(0, 60, 136, 0.5);
-}
-.ol-touch .ol-zoom-extent a {
-  font-size: 20px;
-  height: 30px;
-  width: 30px;
-  line-height: 26px;
-}
-.ol-zoom-extent a:hover {
-  /* IE <= 8 doesn't support rgba, fall back to a lighter blue */
-  background-color: #4c6079;
-}
-.ol-zoom-extent a:hover:not([ie8andbelow]) {
-  /* IE <= 8 doesn't support rgba, fall back to a lighter blue */
-  background-color: rgba(0, 60, 136, 0.7);
-}
-.ol-zoom-extent a:after {
-    content: "E";
 }

doc/quickstart.hbs

@@ -5,6 +5,10 @@ layout: doc.hbs
 
 # Quick Start
 
+## Workshop
+
+Make sure to also check out the [OpenLayers 3 workshop](http://ol3js.org/ol3-workshop/).
+
 ## 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:
@@ -13,7 +17,7 @@ Below you'll find a complete working example.  Create a new file, copy in the co
 <!doctype html>
 <html lang="en">
   <head>
-    <link rel="stylesheet" href="http://ol3js.org/en/{{ latest }}/build/ol.css" type="text/css">
+    <link rel="stylesheet" href="http://ol3js.org/en/{{ latest }}/css/ol.css" type="text/css">
     <style>
       .map {
         height: 400px;
@@ -72,7 +76,8 @@ The map in the application is contained in a [`<div>` HTML element](http://en.wi
 ```xml
   <style>
     .map {
-      height: 400px; width: 100%;
+      height: 400px;
+      width: 100%;
     }
   </style>
 ```

examples/accessible.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,7 +20,7 @@
     <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>         
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
         </div>
       </div>
     </div>
@@ -53,8 +54,8 @@
     </div>
 
     <script src="jquery.min.js" type="text/javascript"></script>
-    <script src="loader.js?id=accessible" type="text/javascript"></script>
     <script src="../resources/example-behaviour.js" type="text/javascript"></script>
+    <script src="loader.js?id=accessible" type="text/javascript"></script>
 
   </body>
 </html>

examples/accessible.js

@@ -1,5 +1,4 @@
 goog.require('ol.Map');
-goog.require('ol.RendererHints');
 goog.require('ol.View2D');
 goog.require('ol.layer.Tile');
 goog.require('ol.source.OSM');
@@ -11,7 +10,7 @@ var map = new ol.Map({
       source: new ol.source.OSM()
     })
   ],
-  renderer: ol.RendererHints.createFromQueryData(),
+  renderer: exampleNS.getRendererFromQueryString(),
   target: 'map',
   view: new ol.View2D({
     center: [0, 0],

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,7 +15,7 @@
     <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>         
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
         </div>
       </div>
     </div>
@@ -56,8 +57,8 @@
     </div>
 
     <script src="jquery.min.js" type="text/javascript"></script>
-    <script src="loader.js?id=animation" type="text/javascript"></script>
     <script src="../resources/example-behaviour.js" type="text/javascript"></script>
+    <script src="loader.js?id=animation" type="text/javascript"></script>
 
   </body>
 </html>

examples/animation.js

@@ -1,5 +1,4 @@
 goog.require('ol.Map');
-goog.require('ol.RendererHints');
 goog.require('ol.View2D');
 goog.require('ol.animation');
 goog.require('ol.easing');
@@ -28,7 +27,7 @@ var map = new ol.Map({
       source: new ol.source.OSM()
     })
   ],
-  renderer: ol.RendererHints.createFromQueryData(),
+  renderer: exampleNS.getRendererFromQueryString(),
   target: 'map',
   view: view
 });

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,7 +15,7 @@
     <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>         
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
         </div>
       </div>
     </div>
@@ -81,8 +82,8 @@
     </div>
 
     <script src="jquery.min.js" type="text/javascript"></script>
-    <script src="loader.js?id=bind-input" type="text/javascript"></script>
     <script src="../resources/example-behaviour.js" type="text/javascript"></script>
+    <script src="loader.js?id=bind-input" type="text/javascript"></script>
 
   </body>
 </html>

examples/bind-input.js

@@ -1,6 +1,5 @@
 goog.require('ol.BrowserFeature');
 goog.require('ol.Map');
-goog.require('ol.RendererHints');
 goog.require('ol.View2D');
 goog.require('ol.dom.Input');
 goog.require('ol.layer.Tile');
@@ -30,7 +29,7 @@ var view = new ol.View2D({
 
 var map = new ol.Map({
   layers: [layer],
-  renderer: ol.RendererHints.createFromQueryData(),
+  renderer: exampleNS.getRendererFromQueryString(),
   target: 'map',
   view: view
 });

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,7 +15,7 @@
     <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>        
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
         </div>
       </div>
     </div>
@@ -51,8 +52,8 @@
     </div>
 
     <script src="jquery.min.js" type="text/javascript"></script>
-    <script src="loader.js?id=bing-maps" type="text/javascript"></script>
     <script src="../resources/example-behaviour.js" type="text/javascript"></script>
+    <script src="loader.js?id=bing-maps" type="text/javascript"></script>
 
   </body>
 </html>

examples/bing-maps.js

@@ -1,5 +1,4 @@
 goog.require('ol.Map');
-goog.require('ol.RendererHints');
 goog.require('ol.View2D');
 goog.require('ol.layer.Tile');
 goog.require('ol.source.BingMaps');
@@ -26,7 +25,7 @@ for (i = 0, ii = styles.length; i < ii; ++i) {
 }
 var map = new ol.Map({
   layers: layers,
-  renderer: ol.RendererHints.createFromQueryData(),
+  renderer: exampleNS.getRendererFromQueryString(),
   target: 'map',
   view: new ol.View2D({
     center: [-6655.5402445057125, 6709968.258934638],

examples/brightness-contrast.html

@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="chrome=1">
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
     <link rel="stylesheet" href="../resources/layout.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
@@ -22,7 +23,7 @@
     <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>         
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
         </div>
       </div>
     </div>
@@ -66,8 +67,8 @@
     </div>
 
     <script src="jquery.min.js" type="text/javascript"></script>
-    <script src="loader.js?id=brightness-contrast" type="text/javascript"></script>
     <script src="../resources/example-behaviour.js" type="text/javascript"></script>
+    <script src="loader.js?id=brightness-contrast" type="text/javascript"></script>
 
   </body>
 </html>

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,7 +15,7 @@
     <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>         
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
         </div>
       </div>
     </div>
@@ -44,8 +45,8 @@
     </div>
 
     <script src="jquery.min.js" type="text/javascript"></script>
-    <script src="loader.js?id=canvas-tiles" type="text/javascript"></script>
     <script src="../resources/example-behaviour.js" type="text/javascript"></script>
+    <script src="loader.js?id=canvas-tiles" type="text/javascript"></script>
 
   </body>
 </html>

examples/canvas-tiles.js

@@ -1,5 +1,4 @@
 goog.require('ol.Map');
-goog.require('ol.RendererHints');
 goog.require('ol.View2D');
 goog.require('ol.layer.Tile');
 goog.require('ol.proj');
@@ -22,7 +21,7 @@ var map = new ol.Map({
       })
     })
   ],
-  renderer: ol.RendererHints.createFromQueryData(),
+  renderer: exampleNS.getRendererFromQueryString(),
   target: 'map',
   view: new ol.View2D({
     center: ol.proj.transform(

examples/center.html

@@ -0,0 +1,135 @@
+<!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>
+      .mapcontainer {
+        position: relative;
+        margin-bottom: 20px;
+      }
+      .map {
+        width: 1000px;
+        height: 600px;
+      }
+      div.ol-zoom {
+        top: 178px;
+        left: 158px;
+      }
+      div.ol-logo {
+        left: 150px;
+        bottom: 30px;
+      }
+      div.ol-attribution {
+        bottom: 30px;
+        right: 50px;
+      }
+      .padding-top {
+        position: absolute;
+        top: 0;
+        left: 0px;
+        width: 1000px;
+        height: 170px;
+        background: rgba(255, 255, 255, 0.5);
+      }
+      .padding-left {
+        position: absolute;
+        top: 170px;
+        left: 0;
+        width: 150px;
+        height: 400px;
+        background: rgba(255, 255, 255, 0.5);
+      }
+      .padding-right {
+        position: absolute;
+        top: 170px;
+        left: 950px;
+        width: 50px;
+        height: 400px;
+        background: rgba(255, 255, 255, 0.5);
+      }
+      .padding-bottom {
+        position: absolute;
+        top: 570px;
+        left: 0px;
+        width: 1000px;
+        height: 30px;
+        background: rgba(255, 255, 255, 0.5);
+      }
+      .center {
+        position: absolute;
+        border: solid 1px black;
+        top: 490px;
+        left: 560px;
+        width: 20px;
+        height: 20px;
+      }
+    </style>
+    <title>Advanced View Positioning 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 mapcontainer">
+          <div id="map" class="map"></div>
+          <div class="padding-top"></div>
+          <div class="padding-left"></div>
+          <div class="padding-right"></div>
+          <div class="padding-bottom"></div>
+          <div class="center"></div>
+        </div>
+      </div>
+
+      <div class="row-fluid">
+        <div class="span12">
+          <button id="zoomtoswitzerlandbest">Zoom to Switzerland</button> (best fit),<br/>
+          <button id="zoomtoswitzerlandconstrained">Zoom to Switzerland</button> (respect resolution constraint).<br/>
+          <button id="zoomtoswitzerlandnearest">Zoom to Switzerland</button> (nearest),<br/>
+          <button id="zoomtolausanne">Zoom to Lausanne</button> (with min resolution),<br/>
+          <button id="centerlausanne">Center on Lausanne</button>
+        </div>
+      </div>
+
+      <div class="row-fluid">
+
+        <div class="span12">
+          <h4 id="title">Advanced View Positioning example</h4>
+          <p id="shortdesc">This example demonstrates how a map's view can be
+            adjusted so a geometry or coordinate is positioned at a specific
+            pixel location. The map above has top, right, bottom, and left
+            padding applied inside the viewport. The view's <code>fitGeometry</code> method
+            is used to fit a geometry in the view with the same padding. The
+            view's <code>centerOn</code> method is used to position a coordinate (Lausanne)
+            at a specific pixel location (the center of the black box).</p>
+          <div id="docs">
+            <p>Use <code>Alt</code>+<code>Shift</code>+drag to rotate the map.</p>
+            <p>See the <a href="center.js" target="_blank">center.js source</a> to see how this is done.</p>
+          </div>
+          <div id="tags">center, rotation, openstreetmap</div>
+        </div>
+
+      </div>
+
+    </div>
+
+    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="loader.js?id=center" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
+
+  </body>
+</html>

examples/center.js

@@ -0,0 +1,127 @@
+goog.require('ol.Map');
+goog.require('ol.View2D');
+goog.require('ol.geom.Point');
+goog.require('ol.geom.SimpleGeometry');
+goog.require('ol.layer.Tile');
+goog.require('ol.layer.Vector');
+goog.require('ol.source.GeoJSON');
+goog.require('ol.source.OSM');
+goog.require('ol.style.Circle');
+goog.require('ol.style.Fill');
+goog.require('ol.style.Stroke');
+goog.require('ol.style.Style');
+
+var source = new ol.source.GeoJSON({
+  projection: 'EPSG:3857',
+  url: 'data/geojson/switzerland.geojson'
+});
+var style = new ol.style.Style({
+  fill: new ol.style.Fill({
+    color: 'rgba(255, 255, 255, 0.6)'
+  }),
+  stroke: new ol.style.Stroke({
+    color: '#319FD3',
+    width: 1
+  }),
+  image: new ol.style.Circle({
+    radius: 5,
+    fill: new ol.style.Fill({
+      color: 'rgba(255, 255, 255, 0.6)'
+    }),
+    stroke: new ol.style.Stroke({
+      color: '#319FD3',
+      width: 1
+    })
+  })
+});
+var vectorLayer = new ol.layer.Vector({
+  source: source,
+  style: style
+});
+var view = new ol.View2D({
+  center: [0, 0],
+  zoom: 1
+});
+var map = new ol.Map({
+  layers: [
+    new ol.layer.Tile({
+      source: new ol.source.OSM()
+    }),
+    vectorLayer
+  ],
+  target: 'map',
+  view: view
+});
+
+var zoomtoswitzerlandbest = document.getElementById('zoomtoswitzerlandbest');
+zoomtoswitzerlandbest.addEventListener('click', function() {
+  var feature = source.getFeatures()[0];
+  var polygon = /** @type {ol.geom.SimpleGeometry} */ (feature.getGeometry());
+  var size = /** @type {ol.Size} */ (map.getSize());
+  view.fitGeometry(
+      polygon,
+      size,
+      {
+        padding: [170, 50, 30, 150],
+        constrainResolution: false
+      }
+  );
+}, false);
+
+var zoomtoswitzerlandconstrained =
+    document.getElementById('zoomtoswitzerlandconstrained');
+zoomtoswitzerlandconstrained.addEventListener('click', function() {
+  var feature = source.getFeatures()[0];
+  var polygon = /** @type {ol.geom.SimpleGeometry} */ (feature.getGeometry());
+  var size = /** @type {ol.Size} */ (map.getSize());
+  view.fitGeometry(
+      polygon,
+      size,
+      {
+        padding: [170, 50, 30, 150]
+      }
+  );
+}, false);
+
+var zoomtoswitzerlandnearest =
+    document.getElementById('zoomtoswitzerlandnearest');
+zoomtoswitzerlandnearest.addEventListener('click', function() {
+  var feature = source.getFeatures()[0];
+  var polygon = /** @type {ol.geom.SimpleGeometry} */ (feature.getGeometry());
+  var size = /** @type {ol.Size} */ (map.getSize());
+  view.fitGeometry(
+      polygon,
+      size,
+      {
+        padding: [170, 50, 30, 150],
+        nearest: true
+      }
+  );
+}, false);
+
+var zoomtolausanne = document.getElementById('zoomtolausanne');
+zoomtolausanne.addEventListener('click', function() {
+  var feature = source.getFeatures()[1];
+  var point = /** @type {ol.geom.SimpleGeometry} */ (feature.getGeometry());
+  var size = /** @type {ol.Size} */ (map.getSize());
+  view.fitGeometry(
+      point,
+      size,
+      {
+        padding: [170, 50, 30, 150],
+        minResolution: 50
+      }
+  );
+}, false);
+
+var centerlausanne = document.getElementById('centerlausanne');
+centerlausanne.addEventListener('click', function() {
+  var feature = source.getFeatures()[1];
+  var point = /** @type {ol.geom.Point} */ (feature.getGeometry());
+  var size = /** @type {ol.Size} */ (map.getSize());
+  view.centerOn(
+      point.getCoordinates(),
+      size,
+      [570, 500]
+  );
+}, false);

examples/custom-controls.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">
@@ -50,7 +51,7 @@
     <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>         
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
         </div>
       </div>
     </div>
@@ -82,8 +83,8 @@
     </div>
 
     <script src="jquery.min.js" type="text/javascript"></script>
-    <script src="loader.js?id=custom-controls" type="text/javascript"></script>
     <script src="../resources/example-behaviour.js" type="text/javascript"></script>
+    <script src="loader.js?id=custom-controls" type="text/javascript"></script>
 
   </body>
 

examples/custom-controls.js

@@ -1,6 +1,5 @@
 goog.require('ol');
 goog.require('ol.Map');
-goog.require('ol.RendererHints');
 goog.require('ol.View2D');
 goog.require('ol.control');
 goog.require('ol.control.Control');
@@ -71,7 +70,7 @@ var map = new ol.Map({
       source: new ol.source.OSM()
     })
   ],
-  renderer: ol.RendererHints.createFromQueryData(),
+  renderer: exampleNS.getRendererFromQueryString(),
   target: 'map',
   view: new ol.View2D({
     center: [0, 0],

examples/d3.html

@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="chrome=1">
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
     <link rel="stylesheet" href="../resources/layout.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
@@ -46,8 +47,8 @@
     <script src="jquery.min.js" type="text/javascript"></script>
     <script src="http://d3js.org/d3.v3.min.js"></script>
     <script src="http://d3js.org/topojson.v1.min.js"></script>
-    <script src="loader.js?id=d3" type="text/javascript"></script>
     <script src="../resources/example-behaviour.js" type="text/javascript"></script>
+    <script src="loader.js?id=d3" type="text/javascript"></script>
 
   </body>
 </html>

examples/d3.js

@@ -19,7 +19,6 @@ var map = new ol.Map({
       })
     })
   ],
-  renderer: 'canvas',
   target: 'map',
   view: new ol.View2D({
     center: ol.proj.transform([-97, 38], 'EPSG:4326', 'EPSG:3857'),

examples/data/geojson/line-samples.geojson

@@ -0,0 +1,16 @@
+{
+"type": "FeatureCollection",
+"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
+                                                                                
+"features": [
+{ "type": "Feature", "properties": { "name": "Roussel" }, "geometry": { "type": "LineString", "coordinates": [ [ -74.317812426119204, 48.287712285170407 ], [ -73.965445435101188, 48.287712285170407 ] ] } },
+{ "type": "Feature", "properties": { "name": "de la Grande-Décharge Sud" }, "geometry": { "type": "LineString", "coordinates": [ [ -72.890274359943689, 47.66777849648031 ], [ -73.03935270229745, 47.552045722357249 ], [ -73.03483517677158, 47.743778832463107 ], [ -72.750231068641639, 47.749854072477497 ], [ -72.754748594167509, 47.552045722357249 ] ] } },
+{ "type": "Feature", "properties": { "name": "du Saguenay Ouest" }, "geometry": { "type": "LineString", "coordinates": [ [ -73.007730023616347, 48.07082744644633 ], [ -72.894791885469544, 47.889388912080449 ], [ -72.727643441012276, 48.082900678850329 ], [ -72.560494996555022, 47.895447137861773 ] ] } },
+{ "type": "Feature", "properties": { "name": "Saint-Anicet" }, "geometry": { "type": "LineString", "coordinates": [ [ -72.985142395986983, 48.338787334581873 ], [ -72.980624870461128, 48.161307640513321 ], [ -72.885756834417805, 48.164320903012829 ], [ -72.894791885469544, 48.338787334581873 ] ] } },
+{ "type": "Feature", "properties": { "name": "Saint-Remy-en-Bouzemont-Saint-Genest-et-Isson" }, "geometry": { "type": "LineString", "coordinates": [ [ -73.459482576203527, 47.53679865861892 ], [ -73.454965050677686, 47.719470781160837 ] ] } },
+{ "type": "Feature", "properties": { "name": "Sainte-Geneviève" }, "geometry": { "type": "LineString", "coordinates": [ [ -73.716981531178234, 47.889388912080449 ], [ -73.423342371996569, 48.091953743979651 ], [ -73.242641350961676, 47.883329977544491 ], [ -73.685358852497131, 47.862118125007399 ] ] } },
+{ "type": "Feature", "properties": { "name": "de Lombard" }, "geometry": { "type": "LineString", "coordinates": [ [ -73.631148546186679, 48.323770568268507 ], [ -73.626631020660795, 48.185408784389622 ], [ -73.55435061224685, 48.188420630879783 ], [ -73.55435061224685, 48.320766684325278 ], [ -73.473035152781165, 48.317762623483489 ], [ -73.482070203832905, 48.19745510840756 ], [ -73.400754744367205, 48.206487993065075 ], [ -73.396237218841335, 48.323770568268507 ], [ -73.301369182798027, 48.317762623483489 ], [ -73.319439284901506, 48.191432300378096 ] ] } },
+{ "type": "Feature", "properties": { "name": "de la Grande-Baie Sud" }, "geometry": { "type": "LineString", "coordinates": [ [ -74.439785615317746, 47.564240180362376 ], [ -74.227461915601779, 47.716431476953346 ], [ -74.055795945618627, 47.552045722357249 ], [ -73.879612450109633, 47.710352336655504 ] ] } },
+{ "type": "Feature", "properties": { "name": "de Tadoussac" }, "geometry": { "type": "LineString", "coordinates": [ [ -74.313294900593348, 48.091953743979651 ], [ -74.313294900593348, 47.880300244488787 ], [ -73.974480486152942, 47.877270334238752 ], [ -73.978998011678812, 48.076864416783366 ] ] } }
+]
+}

examples/data/geojson/point-samples.geojson

@@ -0,0 +1,16 @@
+{
+"type": "FeatureCollection",
+"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
+                                                                                
+"features": [
+{ "type": "Feature", "properties": { "name": "Saguenay (Arrondissement Latterière)" }, "geometry": { "type": "Point", "coordinates": [ -75.849253579389796, 47.6434349837781 ] } },
+{ "type": "Feature", "properties": { "name": "Canton Tremblay" }, "geometry": { "type": "Point", "coordinates": [ -75.840218528338056, 47.971115165183342 ] } },
+{ "type": "Feature", "properties": { "name": "Saint-Félix-d'Otis" }, "geometry": { "type": "Point", "coordinates": [ -75.849253579389796, 48.278693733790902 ] } },
+{ "type": "Feature", "properties": { "name": "La Baie" }, "geometry": { "type": "Point", "coordinates": [ -74.792152606335762, 47.649521925935176 ] } },
+{ "type": "Feature", "properties": { "name": "Saint-David-de-Falardeau" }, "geometry": { "type": "Point", "coordinates": [ -74.801187657387501, 47.977163824275436 ] } },
+{ "type": "Feature", "properties": { "name": "Saint-Honoré-de-Chicoutimi" }, "geometry": { "type": "Point", "coordinates": [ -74.792152606335762, 48.284706278302295 ] } },
+{ "type": "Feature", "properties": { "name": "Alma" }, "geometry": { "type": "Point", "coordinates": [ -75.298115465233423, 47.6434349837781 ] } },
+{ "type": "Feature", "properties": { "name": "Jonquière" }, "geometry": { "type": "Point", "coordinates": [ -75.298115465233423, 47.971115165183342 ] } },
+{ "type": "Feature", "properties": { "name": "Chicoutimi" }, "geometry": { "type": "Point", "coordinates": [ -75.289080414181669, 48.284706278302295 ] } }
+]
+}

examples/data/geojson/polygon-samples.geojson

@@ -0,0 +1,16 @@
+{
+"type": "FeatureCollection",
+"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
+                                                                                
+"features": [
+{ "type": "Feature", "properties": { "name": "Parc de la Colline" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -72.357206347890767, 47.72858763003908 ], [ -71.86027854004486, 47.527648291638172 ], [ -72.37075892446839, 47.539848426151735 ], [ -72.357206347890767, 47.72858763003908 ] ] ] } },
+{ "type": "Feature", "properties": { "name": "Centre Paul-Étienne Simard" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -72.357206347890767, 48.013440900213297 ], [ -72.239750684218109, 48.013440900213297 ], [ -72.253303260795718, 47.856056000888501 ], [ -72.027426984502114, 47.856056000888501 ], [ -72.036462035553868, 48.013440900213297 ], [ -71.905453795303586, 48.01646283861713 ], [ -71.891901218725963, 47.801464984333364 ], [ -72.361723873416651, 47.810567474765456 ], [ -72.357206347890767, 48.013440900213297 ] ] ] } },
+{ "type": "Feature", "properties": { "name": "Loisirs Rivière du Moulin" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -72.194575428959382, 48.33278115872843 ], [ -72.018391933450374, 48.33278115872843 ], [ -71.846725963467236, 48.251628525276693 ], [ -71.950629050562299, 48.107038644740094 ], [ -72.203610480011122, 48.107038644740094 ], [ -72.397864077623623, 48.221539261269051 ], [ -72.194575428959382, 48.33278115872843 ] ] ] } },
+{ "type": "Feature", "properties": { "name": "L'Étoile-du-Nord" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -71.589227008492543, 47.649521925935176 ], [ -71.525981651130337, 47.734664642855655 ], [ -71.48532392139748, 47.649521925935169 ], [ -71.295587849310877, 47.637347332276697 ], [ -71.462736293768117, 47.585573652777313 ], [ -71.390455885354172, 47.475766052599219 ], [ -71.535016702182091, 47.552045722357242 ], [ -71.702165146639345, 47.491030857179695 ], [ -71.616332161647762, 47.591667334264848 ], [ -71.787998131630914, 47.655608158761908 ], [ -71.589227008492543, 47.649521925935176 ] ] ] } },
+{ "type": "Feature", "properties": { "name": "Loisirs Lavoie et St-Jean-Baptiste" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -71.729270299794578, 48.010418784700107 ], [ -71.291070323784993, 48.004374022337799 ], [ -71.291070323784993, 47.777183877693901 ], [ -71.729270299794578, 47.786290622064854 ], [ -71.729270299794578, 48.010418784700107 ] ] ] } },
+{ "type": "Feature", "properties": { "name": "Loisirs Diamant" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -71.693130095587605, 48.341790157179155 ], [ -71.286552798259123, 48.344792802893032 ], [ -71.449183717190522, 48.224548983994914 ], [ -71.277517747207369, 48.070827446446337 ], [ -71.751857927423927, 48.085918544287573 ], [ -71.507911549026844, 48.21551928490868 ], [ -71.693130095587605, 48.341790157179155 ] ] ] } },
+{ "type": "Feature", "properties": { "name": "Sydenham" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -71.051641470913779, 47.710352336655504 ], [ -70.911598179611758, 47.710352336655504 ], [ -70.925150756189367, 47.619080121567436 ], [ -70.712827056473373, 47.616034965734443 ], [ -70.721862107525112, 47.448278226184989 ], [ -70.857387873301292, 47.448278226184989 ], [ -70.852870347775408, 47.552045722357249 ], [ -71.056158996439635, 47.552045722357249 ], [ -71.051641470913779, 47.710352336655504 ] ] ] } },
+{ "type": "Feature", "properties": { "name": "Saint-Luc" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -71.110369302750115, 47.798430466372736 ], [ -70.902563128560018, 47.983211774835986 ], [ -70.699274479895777, 47.789325849015306 ], [ -71.110369302750115, 47.798430466372736 ] ] ] } },
+{ "type": "Feature", "properties": { "name": "Loisirs du Fjord du Saguenay" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -70.988396113551573, 48.32977780546792 ], [ -70.812212618042579, 48.32977780546792 ], [ -70.807695092516681, 48.209498600656133 ], [ -70.631511597007702, 48.209498600656147 ], [ -70.636029122533571, 48.079882636349602 ], [ -71.146509506957088, 48.082900678850329 ], [ -71.151027032482972, 48.212509031269981 ], [ -70.983878588025689, 48.209498600656133 ], [ -70.988396113551573, 48.32977780546792 ] ] ] } }
+]
+}

examples/data/geojson/switzerland.geojson

@@ -0,0 +1,4 @@
+{"type":"FeatureCollection","features":[
+{"type":"Feature","id":"CHE","properties":{"name":"Switzerland"},"geometry":{"type":"Polygon","coordinates":[[[9.594226,47.525058],[9.632932,47.347601],[9.47997,47.10281],[9.932448,46.920728],[10.442701,46.893546],[10.363378,46.483571],[9.922837,46.314899],[9.182882,46.440215],[8.966306,46.036932],[8.489952,46.005151],[8.31663,46.163642],[7.755992,45.82449],[7.273851,45.776948],[6.843593,45.991147],[6.5001,46.429673],[6.022609,46.27299],[6.037389,46.725779],[6.768714,47.287708],[6.736571,47.541801],[7.192202,47.449766],[7.466759,47.620582],[8.317301,47.61358],[8.522612,47.830828],[9.594226,47.525058]]]}},
+{"type":"Feature","id":"LSNE","properties":{"name":"Lausanne"},"geometry":{"type":"Point","coordinates":[6.6339863,46.5193823]}}
+]}

examples/data/geolocation-orientation.json

@@ -0,0 +1,729 @@
+{
+  "data": [{
+    "coords": {
+      "speed": 1.7330950498580933,
+      "accuracy": 5,
+      "altitudeAccuracy": 8,
+      "altitude": 238,
+      "longitude": 5.868668798362713,
+      "heading": 67.5,
+      "latitude": 45.64444874417562
+    },
+    "timestamp": 1394788264972
+  }, {
+    "coords": {
+      "speed": 1.9535436630249023,
+      "accuracy": 5,
+      "altitudeAccuracy": 8,
+      "altitude": 238,
+      "longitude": 5.868715401744348,
+      "heading": 69.609375,
+      "latitude": 45.64446391542036
+    },
+    "timestamp": 1394788266115
+  }, {
+    "coords": {
+      "speed": 2.1882569789886475,
+      "accuracy": 10,
+      "altitudeAccuracy": 8,
+      "altitude": 238,
+      "longitude": 5.868768962105614,
+      "heading": 67.5,
+      "latitude": 45.644484995906836
+    },
+    "timestamp": 1394788267107
+  }, {
+    "coords": {
+      "speed": 2.4942498207092285,
+      "accuracy": 5,
+      "altitudeAccuracy": 6,
+      "altitude": 237,
+      "longitude": 5.868825791409117,
+      "heading": 68.5546875,
+      "latitude": 45.64450435810316
+    },
+    "timestamp": 1394788267959
+  }, {
+    "coords": {
+      "speed": 2.7581217288970947,
+      "accuracy": 5,
+      "altitudeAccuracy": 6,
+      "altitude": 237,
+      "longitude": 5.868881698703271,
+      "heading": 69.609375,
+      "latitude": 45.64452149909515
+    },
+    "timestamp": 1394788268964
+  }, {
+    "coords": {
+      "speed": 3.3746347427368164,
+      "accuracy": 5,
+      "altitudeAccuracy": 6,
+      "altitude": 236,
+      "longitude": 5.868938528006774,
+      "heading": 70.3125,
+      "latitude": 45.644536712249405
+    },
+    "timestamp": 1394788270116
+  }, {
+    "coords": {
+      "speed": 3.597411870956421,
+      "accuracy": 5,
+      "altitudeAccuracy": 6,
+      "altitude": 236,
+      "longitude": 5.868992004549009,
+      "heading": 74.8828125,
+      "latitude": 45.644547943999655
+    },
+    "timestamp": 1394788271158
+  }, {
+    "coords": {
+      "speed": 3.6382505893707275,
+      "accuracy": 5,
+      "altitudeAccuracy": 6,
+      "altitude": 236,
+      "longitude": 5.869038775568706,
+      "heading": 73.828125,
+      "latitude": 45.64456005584974
+    },
+    "timestamp": 1394788271893
+  }, {
+    "coords": {
+      "speed": 3.65671443939209,
+      "accuracy": 5,
+      "altitudeAccuracy": 6,
+      "altitude": 236,
+      "longitude": 5.869091162463528,
+      "heading": 73.4765625,
+      "latitude": 45.644572335337884
+    },
+    "timestamp": 1394788272903
+  }, {
+    "coords": {
+      "speed": 3.7153592109680176,
+      "accuracy": 5,
+      "altitudeAccuracy": 6,
+      "altitude": 236,
+      "longitude": 5.869144219910604,
+      "heading": 73.125,
+      "latitude": 45.64458671030182
+    },
+    "timestamp": 1394788273914
+  }, {
+    "coords": {
+      "speed": 3.8041043281555176,
+      "accuracy": 5,
+      "altitudeAccuracy": 4,
+      "altitude": 236,
+      "longitude": 5.869205072527629,
+      "heading": 72.421875,
+      "latitude": 45.64460313883204
+    },
+    "timestamp": 1394788274901
+  }, {
+    "coords": {
+      "speed": 3.9588162899017334,
+      "accuracy": 5,
+      "altitudeAccuracy": 4,
+      "altitude": 236,
+      "longitude": 5.869268858810765,
+      "heading": 72.421875,
+      "latitude": 45.64461990263838
+    },
+    "timestamp": 1394788276140
+  }, {
+    "coords": {
+      "speed": 4.152309417724609,
+      "accuracy": 5,
+      "altitudeAccuracy": 4,
+      "altitude": 235,
+      "longitude": 5.869351252918941,
+      "heading": 78.046875,
+      "latitude": 45.64466122542102
+    },
+    "timestamp": 1394788276948
+  }, {
+    "coords": {
+      "speed": 4.49971866607666,
+      "accuracy": 5,
+      "altitudeAccuracy": 6,
+      "altitude": 236,
+      "longitude": 5.869433479389054,
+      "heading": 79.8046875,
+      "latitude": 45.64467040360499
+    },
+    "timestamp": 1394788277892
+  }, {
+    "coords": {
+      "speed": 4.824056148529053,
+      "accuracy": 5,
+      "altitudeAccuracy": 6,
+      "altitude": 235,
+      "longitude": 5.869504055013758,
+      "heading": 91.40625,
+      "latitude": 45.64466089014489
+    },
+    "timestamp": 1394788279211
+  }, {
+    "coords": {
+      "speed": 5.269814491271973,
+      "accuracy": 10,
+      "altitudeAccuracy": 6,
+      "altitude": 235,
+      "longitude": 5.869575049733621,
+      "heading": 91.40625,
+      "latitude": 45.64465967476893
+    },
+    "timestamp": 1394788279898
+  }, {
+    "coords": {
+      "speed": 5.4861016273498535,
+      "accuracy": 5,
+      "altitudeAccuracy": 6,
+      "altitude": 235,
+      "longitude": 5.86963213049422,
+      "heading": 95.2734375,
+      "latitude": 45.64465091568012
+    },
+    "timestamp": 1394788280935
+  }, {
+    "coords": {
+      "speed": 5.380503177642822,
+      "accuracy": 5,
+      "altitudeAccuracy": 6,
+      "altitude": 235,
+      "longitude": 5.869714859878523,
+      "heading": 75.5859375,
+      "latitude": 45.64468792178262
+    },
+    "timestamp": 1394788281930
+  }, {
+    "coords": {
+      "speed": 5.276519775390625,
+      "accuracy": 5,
+      "altitudeAccuracy": 6,
+      "altitude": 234,
+      "longitude": 5.869746124377353,
+      "heading": 55.1953125,
+      "latitude": 45.64467706721801
+    },
+    "timestamp": 1394788282909
+  }, {
+    "coords": {
+      "speed": 5.212399482727051,
+      "accuracy": 5,
+      "altitudeAccuracy": 6,
+      "altitude": 232,
+      "longitude": 5.8697939850444625,
+      "heading": 49.5703125,
+      "latitude": 45.64467899505574
+    },
+    "timestamp": 1394788284221
+  }, {
+    "coords": {
+      "speed": 5.174651622772217,
+      "accuracy": 5,
+      "altitudeAccuracy": 6,
+      "altitude": 232,
+      "longitude": 5.869789123540623,
+      "heading": 18.984375,
+      "latitude": 45.64469378911484
+    },
+    "timestamp": 1394788284924
+  }, {
+    "coords": {
+      "speed": 5.211904525756836,
+      "accuracy": 5,
+      "altitudeAccuracy": 4,
+      "altitude": 232,
+      "longitude": 5.869806222623093,
+      "heading": 10.1953125,
+      "latitude": 45.64473896757294
+    },
+    "timestamp": 1394788286251
+  }, {
+    "coords": {
+      "speed": 5.254780292510986,
+      "accuracy": 5,
+      "altitudeAccuracy": 4,
+      "altitude": 233,
+      "longitude": 5.86982952431391,
+      "heading": 18.6328125,
+      "latitude": 45.64478381075491
+    },
+    "timestamp": 1394788286927
+  }, {
+    "coords": {
+      "speed": 5.329030513763428,
+      "accuracy": 5,
+      "altitudeAccuracy": 4,
+      "altitude": 232,
+      "longitude": 5.869875792419417,
+      "heading": 33.75,
+      "latitude": 45.644830078860416
+    },
+    "timestamp": 1394788288221
+  }, {
+    "coords": {
+      "speed": 5.384955883026123,
+      "accuracy": 5,
+      "altitudeAccuracy": 4,
+      "altitude": 232,
+      "longitude": 5.869927508761985,
+      "heading": 46.7578125,
+      "latitude": 45.64486025371183
+    },
+    "timestamp": 1394788288935
+  }, {
+    "coords": {
+      "speed": 5.309582233428955,
+      "accuracy": 5,
+      "altitudeAccuracy": 4,
+      "altitude": 232,
+      "longitude": 5.869972854858143,
+      "heading": 47.109375,
+      "latitude": 45.644890596201314
+    },
+    "timestamp": 1394788290178
+  }, {
+    "coords": {
+      "speed": 5.250724792480469,
+      "accuracy": 5,
+      "altitudeAccuracy": 6,
+      "altitude": 231,
+      "longitude": 5.870029265066488,
+      "heading": 46.40625,
+      "latitude": 45.644932673355235
+    },
+    "timestamp": 1394788290890
+  }, {
+    "coords": {
+      "speed": 5.3057990074157715,
+      "accuracy": 5,
+      "altitudeAccuracy": 6,
+      "altitude": 231,
+      "longitude": 5.870077712466819,
+      "heading": 39.375,
+      "latitude": 45.644970224281444
+    },
+    "timestamp": 1394788291884
+  }, {
+    "coords": {
+      "speed": 5.431822299957275,
+      "accuracy": 5,
+      "altitudeAccuracy": 6,
+      "altitude": 231,
+      "longitude": 5.870133116846783,
+      "heading": 43.59375,
+      "latitude": 45.6450097449549
+    },
+    "timestamp": 1394788292885
+  }, {
+    "coords": {
+      "speed": 5.542125225067139,
+      "accuracy": 5,
+      "altitudeAccuracy": 6,
+      "altitude": 231,
+      "longitude": 5.870186509569986,
+      "heading": 43.59375,
+      "latitude": 45.645047421609654
+    },
+    "timestamp": 1394788294100
+  }, {
+    "coords": {
+      "speed": 5.647174835205078,
+      "accuracy": 5,
+      "altitudeAccuracy": 6,
+      "altitude": 231,
+      "longitude": 5.870246104901535,
+      "heading": 42.890625,
+      "latitude": 45.645093647805645
+    },
+    "timestamp": 1394788295157
+  }, {
+    "coords": {
+      "speed": 5.735793590545654,
+      "accuracy": 5,
+      "altitudeAccuracy": 6,
+      "altitude": 230,
+      "longitude": 5.870298156520231,
+      "heading": 42.5390625,
+      "latitude": 45.64514368776758
+    },
+    "timestamp": 1394788296124
+  }, {
+    "coords": {
+      "speed": 5.809989929199219,
+      "accuracy": 5,
+      "altitudeAccuracy": 6,
+      "altitude": 230,
+      "longitude": 5.870346436282499,
+      "heading": 43.59375,
+      "latitude": 45.64519154843469
+    },
+    "timestamp": 1394788296960
+  }, {
+    "coords": {
+      "speed": 5.877871036529541,
+      "accuracy": 5,
+      "altitudeAccuracy": 6,
+      "altitude": 228,
+      "longitude": 5.87034755932109,
+      "heading": 42.75193405151367,
+      "latitude": 45.645270362475216
+    },
+    "timestamp": 1394788298177
+  }, {
+    "coords": {
+      "speed": 5.937166690826416,
+      "accuracy": 5,
+      "altitudeAccuracy": 6,
+      "altitude": 228,
+      "longitude": 5.870402806867787,
+      "heading": 42.75193405151367,
+      "latitude": 45.645312142096095
+    },
+    "timestamp": 1394788298898
+  }, {
+    "coords": {
+      "speed": 6.071393966674805,
+      "accuracy": 5,
+      "altitudeAccuracy": 6,
+      "altitude": 229,
+      "longitude": 5.870464520921814,
+      "heading": 43.183074951171875,
+      "latitude": 45.64535851937182
+    },
+    "timestamp": 1394788299897
+  }, {
+    "coords": {
+      "speed": 6.329115390777588,
+      "accuracy": 5,
+      "altitudeAccuracy": 6,
+      "altitude": 230,
+      "longitude": 5.8705368384107715,
+      "heading": 43.183074951171875,
+      "latitude": 45.645412389093565
+    },
+    "timestamp": 1394788300957
+  }, {
+    "coords": {
+      "speed": 6.581554889678955,
+      "accuracy": 5,
+      "altitudeAccuracy": 6,
+      "altitude": 229,
+      "longitude": 5.870600162706978,
+      "heading": 43.183074951171875,
+      "latitude": 45.64545955929912
+    },
+    "timestamp": 1394788302211
+  }, {
+    "coords": {
+      "speed": 6.605470180511475,
+      "accuracy": 5,
+      "altitudeAccuracy": 6,
+      "altitude": 230,
+      "longitude": 5.870657211053185,
+      "heading": 43.183074951171875,
+      "latitude": 45.64550205482465
+    },
+    "timestamp": 1394788302917
+  }, {
+    "coords": {
+      "speed": 6.623170375823975,
+      "accuracy": 5,
+      "altitudeAccuracy": 4,
+      "altitude": 229,
+      "longitude": 5.870713613403495,
+      "heading": 43.183074951171875,
+      "latitude": 45.64554406917767
+    },
+    "timestamp": 1394788303929
+  }, {
+    "coords": {
+      "speed": 6.645580768585205,
+      "accuracy": 5,
+      "altitudeAccuracy": 4,
+      "altitude": 229,
+      "longitude": 5.870773011629353,
+      "heading": 43.183074951171875,
+      "latitude": 45.64558831489415
+    },
+    "timestamp": 1394788304902
+  }, {
+    "coords": {
+      "speed": 6.663600444793701,
+      "accuracy": 5,
+      "altitudeAccuracy": 4,
+      "altitude": 229,
+      "longitude": 5.87083890910435,
+      "heading": 43.183074951171875,
+      "latitude": 45.645637401898654
+    },
+    "timestamp": 1394788306035
+  }, {
+    "coords": {
+      "speed": 6.664675712585449,
+      "accuracy": 5,
+      "altitudeAccuracy": 6,
+      "altitude": 229,
+      "longitude": 5.870890033475007,
+      "heading": 43.183074951171875,
+      "latitude": 45.64567548463474
+    },
+    "timestamp": 1394788307080
+  }, {
+    "coords": {
+      "speed": 6.6489081382751465,
+      "accuracy": 5,
+      "altitudeAccuracy": 6,
+      "altitude": 228,
+      "longitude": 5.870943189474929,
+      "heading": 43.183074951171875,
+      "latitude": 45.645715080460064
+    },
+    "timestamp": 1394788308211
+  }, {
+    "coords": {
+      "speed": 6.551820755004883,
+      "accuracy": 5,
+      "altitudeAccuracy": 6,
+      "altitude": 228,
+      "longitude": 5.871005613698799,
+      "heading": 43.183074951171875,
+      "latitude": 45.64576158014743
+    },
+    "timestamp": 1394788308904
+  }, {
+    "coords": {
+      "speed": 6.467689514160156,
+      "accuracy": 5,
+      "altitudeAccuracy": 6,
+      "altitude": 229,
+      "longitude": 5.871058030061249,
+      "heading": 43.183074951171875,
+      "latitude": 45.64580062501799
+    },
+    "timestamp": 1394788310161
+  }, {
+    "coords": {
+      "speed": 6.3997955322265625,
+      "accuracy": 5,
+      "altitudeAccuracy": 6,
+      "altitude": 229,
+      "longitude": 5.871062579208228,
+      "heading": 43.183074951171875,
+      "latitude": 45.64580401381376
+    },
+    "timestamp": 1394788310957
+  }, {
+    "coords": {
+      "speed": 5.799798488616943,
+      "accuracy": 5,
+      "altitudeAccuracy": 6,
+      "altitude": 230,
+      "longitude": 5.8710817079554545,
+      "heading": 43.183074951171875,
+      "latitude": 45.64581826277647
+    },
+    "timestamp": 1394788312036
+  }, {
+    "coords": {
+      "speed": 4.424941062927246,
+      "accuracy": 5,
+      "altitudeAccuracy": 6,
+      "altitude": 230,
+      "longitude": 5.871121835629857,
+      "heading": 175.4296875,
+      "latitude": 45.645828271551544
+    },
+    "timestamp": 1394788312951
+  }, {
+    "coords": {
+      "speed": 4.3496222496032715,
+      "accuracy": 5,
+      "altitudeAccuracy": 6,
+      "altitude": 231,
+      "longitude": 5.8710026017471595,
+      "heading": 176.484375,
+      "latitude": 45.645752236602775
+    },
+    "timestamp": 1394788315227
+  }, {
+    "coords": {
+      "speed": 5.076380252838135,
+      "accuracy": 5,
+      "altitudeAccuracy": 6,
+      "altitude": 232,
+      "longitude": 5.871189236646398,
+      "heading": 176.1328125,
+      "latitude": 45.64553692475487
+    },
+    "timestamp": 1394788316970
+  }, {
+    "coords": {
+      "speed": 5.102786064147949,
+      "accuracy": 5,
+      "altitudeAccuracy": 6,
+      "altitude": 231,
+      "longitude": 5.871200384577616,
+      "heading": 171.2109375,
+      "latitude": 45.64548554368843
+    },
+    "timestamp": 1394788317965
+  }, {
+    "coords": {
+      "speed": 4.705626964569092,
+      "accuracy": 5,
+      "altitudeAccuracy": 6,
+      "altitude": 231,
+      "longitude": 5.871210945775612,
+      "heading": 164.1796875,
+      "latitude": 45.645453105723156
+    },
+    "timestamp": 1394788318956
+  }, {
+    "coords": {
+      "speed": 4.378190040588379,
+      "accuracy": 5,
+      "altitudeAccuracy": 6,
+      "altitude": 231,
+      "longitude": 5.87124749087344,
+      "heading": 126.2109375,
+      "latitude": 45.645433282522156
+    },
+    "timestamp": 1394788320197
+  }, {
+    "coords": {
+      "speed": 4.208680152893066,
+      "accuracy": 5,
+      "altitudeAccuracy": 6,
+      "altitude": 233,
+      "longitude": 5.871283365419014,
+      "heading": 125.859375,
+      "latitude": 45.6454103999265
+    },
+    "timestamp": 1394788320894
+  }, {
+    "coords": {
+      "speed": 4.072604179382324,
+      "accuracy": 5,
+      "altitudeAccuracy": 6,
+      "altitude": 233,
+      "longitude": 5.871314043184622,
+      "heading": 103.359375,
+      "latitude": 45.645410819021656
+    },
+    "timestamp": 1394788322169
+  }, {
+    "coords": {
+      "speed": 3.7680623531341553,
+      "accuracy": 5,
+      "altitudeAccuracy": 6,
+      "altitude": 234,
+      "longitude": 5.871355114510163,
+      "heading": 92.4609375,
+      "latitude": 45.645418111277415
+    },
+    "timestamp": 1394788322898
+  }, {
+    "coords": {
+      "speed": 3.537794351577759,
+      "accuracy": 10,
+      "altitudeAccuracy": 6,
+      "altitude": 234,
+      "longitude": 5.871393922721847,
+      "heading": 92.4609375,
+      "latitude": 45.64541693781097
+    },
+    "timestamp": 1394788323968
+  }, {
+    "coords": {
+      "speed": 3.3741507530212402,
+      "accuracy": 10,
+      "altitudeAccuracy": 6,
+      "altitude": 234,
+      "longitude": 5.8714455552453835,
+      "heading": 75.5859375,
+      "latitude": 45.645444011358215
+    },
+    "timestamp": 1394788324896
+  }, {
+    "coords": {
+      "speed": 3.3729660511016846,
+      "accuracy": 10,
+      "altitudeAccuracy": 6,
+      "altitude": 235,
+      "longitude": 5.87150791660498,
+      "heading": 70.3125,
+      "latitude": 45.64547209073384
+    },
+    "timestamp": 1394788325971
+  }, {
+    "coords": {
+      "speed": 3.463883876800537,
+      "accuracy": 10,
+      "altitudeAccuracy": 6,
+      "altitude": 235,
+      "longitude": 5.871554352348551,
+      "heading": 70.3125,
+      "latitude": 45.64548374157925
+    },
+    "timestamp": 1394788327122
+  }, {
+    "coords": {
+      "speed": 3.5247886180877686,
+      "accuracy": 10,
+      "altitudeAccuracy": 6,
+      "altitude": 235,
+      "longitude": 5.871567260479435,
+      "heading": 67.1484375,
+      "latitude": 45.645496733529164
+    },
+    "timestamp": 1394788328164
+  }, {
+    "coords": {
+      "speed": 3.455146551132202,
+      "accuracy": 10,
+      "altitudeAccuracy": 6,
+      "altitude": 235,
+      "longitude": 5.871608583262071,
+      "heading": 68.90625,
+      "latitude": 45.64550293613751
+    },
+    "timestamp": 1394788328985
+  }, {
+    "coords": {
+      "speed": 3.382997989654541,
+      "accuracy": 10,
+      "altitudeAccuracy": 8,
+      "altitude": 236,
+      "longitude": 5.871640518313154,
+      "heading": 78.75,
+      "latitude": 45.6454965658911
+    },
+    "timestamp": 1394788329900
+  }, {
+    "coords": {
+      "speed": 3.242330312728882,
+      "accuracy": 10,
+      "altitudeAccuracy": 8,
+      "altitude": 236,
+      "longitude": 5.871667759498462,
+      "heading": 92.4609375,
+      "latitude": 45.64548562750746
+    },
+    "timestamp": 1394788331120
+  }, {
+    "coords": {
+      "speed": 3.074465274810791,
+      "accuracy": 10,
+      "altitudeAccuracy": 8,
+      "altitude": 236,
+      "longitude": 5.871691312646374,
+      "heading": 110.0390625,
+      "latitude": 45.645468402696444
+    },
+    "timestamp": 1394788332219
+  }]
+}

examples/device-orientation.html

@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="chrome=1">
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
     <link rel="stylesheet" href="../resources/layout.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
@@ -14,7 +15,7 @@
     <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>         
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
         </div>
       </div>
     </div>
@@ -50,8 +51,8 @@
     </div>
 
     <script src="jquery.min.js" type="text/javascript"></script>
-    <script src="loader.js?id=device-orientation" type="text/javascript"></script>
     <script src="../resources/example-behaviour.js" type="text/javascript"></script>
+    <script src="loader.js?id=device-orientation" type="text/javascript"></script>
 
   </body>
 </html>

examples/device-orientation.js

@@ -1,6 +1,5 @@
 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');
@@ -16,7 +15,7 @@ var map = new ol.Map({
       source: new ol.source.OSM()
     })
   ],
-  renderer: ol.RendererHints.createFromQueryData(),
+  renderer: exampleNS.getRendererFromQueryString(),
   target: 'map',
   view: view
 });
@@ -25,12 +24,11 @@ var deviceOrientation = new ol.DeviceOrientation();
 var track = new ol.dom.Input(document.getElementById('track'));
 track.bindTo('checked', deviceOrientation, 'tracking');
 
-deviceOrientation.on('propertychange', function(event) {
-  // event.key is the changed property name
-  var element = document.getElementById(event.key);
-  if (element) {
-    element.innerHTML = deviceOrientation.get(event.key);
-  }
+deviceOrientation.on('change', function(event) {
+  $('#alpha').text(deviceOrientation.getAlpha() + ' [rad]');
+  $('#beta').text(deviceOrientation.getBeta() + ' [rad]');
+  $('#gamma').text(deviceOrientation.getGamma() + ' [rad]');
+  $('#heading').text(deviceOrientation.getHeading() + ' [rad]');
 });
 
 // tilt the map

examples/drag-and-drop-image-vector.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,7 +15,7 @@
     <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>         
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
         </div>
       </div>
     </div>
@@ -31,7 +32,7 @@
 
         <div class="span4">
           <h4 id="title">Drag-and-Drop image vector example</h4>
-          <p id="shortdesc">Example of using the drag-and-drop interaction with a <code>ol.source.ImageVector</code>. Drag and drop GPX, GeoJSON, IGC, KML, or TopoJSON files on to the map. Each file is rendered to an image on the client.</p>
+          <p id="shortdesc">Example of using the drag-and-drop interaction with a ol.source.ImageVector. Drag and drop GPX, GeoJSON, IGC, KML, or TopoJSON files on to the map. Each file is rendered to an image on the client.</p>
           <div id="docs">
             <p>See the <a href="drag-and-drop-image-vector.js" target="_blank">drag-and-drop-image-vector.js source</a> to see how this is done.</p>
           </div>
@@ -48,8 +49,8 @@
     </div>
 
     <script src="jquery.min.js" type="text/javascript"></script>
-    <script src="loader.js?id=drag-and-drop-image-vector" type="text/javascript"></script>
     <script src="../resources/example-behaviour.js" type="text/javascript"></script>
+    <script src="loader.js?id=drag-and-drop-image-vector" type="text/javascript"></script>
 
   </body>
 </html>

examples/drag-and-drop-image-vector.js

@@ -1,5 +1,4 @@
 goog.require('ol.Map');
-goog.require('ol.RendererHints');
 goog.require('ol.View2D');
 goog.require('ol.format.GPX');
 goog.require('ol.format.GeoJSON');
@@ -105,7 +104,7 @@ var map = new ol.Map({
       })
     })
   ],
-  renderer: ol.RendererHints.createFromQueryData(),
+  renderer: exampleNS.getRendererFromQueryString(),
   target: 'map',
   view: new ol.View2D({
     center: [0, 0],
@@ -150,6 +149,6 @@ $(map.getViewport()).on('mousemove', function(evt) {
   displayFeatureInfo(pixel);
 });
 
-map.on('singleclick', function(evt) {
+map.on('click', function(evt) {
   displayFeatureInfo(evt.pixel);
 });

examples/drag-and-drop.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,7 +15,7 @@
     <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>         
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
         </div>
       </div>
     </div>
@@ -48,8 +49,8 @@
     </div>
 
     <script src="jquery.min.js" type="text/javascript"></script>
-    <script src="loader.js?id=drag-and-drop" type="text/javascript"></script>
     <script src="../resources/example-behaviour.js" type="text/javascript"></script>
+    <script src="loader.js?id=drag-and-drop" type="text/javascript"></script>
 
   </body>
 </html>

examples/drag-and-drop.js

@@ -103,7 +103,6 @@ var map = new ol.Map({
       })
     })
   ],
-  renderer: 'canvas',
   target: 'map',
   view: new ol.View2D({
     center: [0, 0],
@@ -146,6 +145,6 @@ $(map.getViewport()).on('mousemove', function(evt) {
   displayFeatureInfo(pixel);
 });
 
-map.on('singleclick', function(evt) {
+map.on('click', function(evt) {
   displayFeatureInfo(evt.pixel);
 });

examples/drag-rotate-and-zoom.html

@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="chrome=1">
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
     <link rel="stylesheet" href="../resources/layout.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
@@ -14,7 +15,7 @@
     <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>         
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
         </div>
       </div>
     </div>
@@ -44,8 +45,8 @@
     </div>
 
     <script src="jquery.min.js" type="text/javascript"></script>
-    <script src="loader.js?id=drag-rotate-and-zoom" type="text/javascript"></script>
     <script src="../resources/example-behaviour.js" type="text/javascript"></script>
+    <script src="loader.js?id=drag-rotate-and-zoom" type="text/javascript"></script>
 
   </body>
 </html>

examples/drag-rotate-and-zoom.js

@@ -1,5 +1,4 @@
 goog.require('ol.Map');
-goog.require('ol.RendererHints');
 goog.require('ol.View2D');
 goog.require('ol.interaction');
 goog.require('ol.interaction.DragRotateAndZoom');
@@ -16,7 +15,7 @@ var map = new ol.Map({
       source: new ol.source.MapQuest({layer: 'sat'})
     })
   ],
-  renderer: ol.RendererHints.createFromQueryData(),
+  renderer: exampleNS.getRendererFromQueryString(),
   target: 'map',
   view: new ol.View2D({
     center: [0, 0],

examples/draw-features.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,7 +15,7 @@
     <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>         
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
         </div>
       </div>
     </div>
@@ -31,7 +32,7 @@
 
         <div class="span12">
           <h4 id="title">Draw features example</h4>
-          <p id="shortdesc">Example of using the <code>ol.interaction.Draw</code> interaction.</p>
+          <p id="shortdesc">Example of using the ol.interaction.Draw interaction.</p>
           <form class="form-inline">
             <label>Geometry type &nbsp;</label>
               <select id="type">
@@ -52,8 +53,8 @@
     </div>
 
     <script src="jquery.min.js" type="text/javascript"></script>
-    <script src="loader.js?id=draw-features" type="text/javascript"></script>
     <script src="../resources/example-behaviour.js" type="text/javascript"></script>
+    <script src="loader.js?id=draw-features" type="text/javascript"></script>
 
   </body>
 </html>

examples/draw-features.js

@@ -38,7 +38,6 @@ var vector = new ol.layer.Vector({
 
 var map = new ol.Map({
   layers: [raster, vector],
-  renderer: 'canvas',
   target: 'map',
   view: new ol.View2D({
     center: [-11000000, 4600000],

examples/dynamic-data.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,7 +15,7 @@
     <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>         
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
         </div>
       </div>
     </div>
@@ -43,8 +44,8 @@
     </div>
 
     <script src="jquery.min.js" type="text/javascript"></script>
-    <script src="loader.js?id=dynamic-data" type="text/javascript"></script>
     <script src="../resources/example-behaviour.js" type="text/javascript"></script>
+    <script src="loader.js?id=dynamic-data" type="text/javascript"></script>
 
   </body>
 </html>

examples/dynamic-data.js

@@ -14,7 +14,6 @@ var map = new ol.Map({
       source: new ol.source.MapQuest({layer: 'sat'})
     })
   ],
-  renderer: 'canvas',
   target: 'map',
   view: new ol.View2D({
     center: [0, 0],
@@ -48,6 +47,6 @@ map.on('postcompose', function(event) {
   vectorContext.setImageStyle(imageStyle);
   vectorContext.drawMultiPointGeometry(
       new ol.geom.MultiPoint(coordinates), null);
-  map.requestRenderFrame();
+  map.render();
 });
-map.requestRenderFrame();
+map.render();

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,7 +15,7 @@
     <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>         
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
         </div>
       </div>
     </div>
@@ -43,8 +44,8 @@
     </div>
 
     <script src="jquery.min.js" type="text/javascript"></script>
-    <script src="loader.js?id=epsg-4326" type="text/javascript"></script>
     <script src="../resources/example-behaviour.js" type="text/javascript"></script>
+    <script src="loader.js?id=epsg-4326" type="text/javascript"></script>
 
   </body>
 </html>

examples/epsg-4326.js

@@ -26,8 +26,6 @@ var map = new ol.Map({
     })
   ]),
   layers: layers,
-  // The OSgeo server does not set cross origin headers, so we cannot use WebGL
-  renderer: ['canvas', 'dom'],
   target: 'map',
   view: new ol.View2D({
     projection: 'EPSG:4326',

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,7 +15,7 @@
     <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>         
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
         </div>
       </div>
     </div>
@@ -48,8 +49,8 @@
     </div>
 
     <script src="jquery.min.js" type="text/javascript"></script>
-    <script src="loader.js?id=export-map" type="text/javascript"></script>
     <script src="../resources/example-behaviour.js" type="text/javascript"></script>
+    <script src="loader.js?id=export-map" type="text/javascript"></script>
 
   </body>
 </html>

examples/export-map.js

@@ -10,7 +10,6 @@ var map = new ol.Map({
       source: new ol.source.OSM()
     })
   ],
-  renderer: 'canvas',
   target: 'map',
   view: new ol.View2D({
     center: [0, 0],

examples/fractal.html

@@ -0,0 +1,64 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="chrome=1">
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../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>Fractal Example</title>
+    <style>
+      .map {
+        background: whitesmoke;
+      }
+      #depth {
+        width: 100px;
+      }
+    </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>
+        </div>
+      </div>
+
+      <div class="row-fluid">
+
+        <div class="span12">
+          <h4 id="title">Fractal Example</h4>
+          <p id="shortdesc">Example of a fractal.</p>
+          <label for="depth">
+            depth:&nbsp;
+            <input id="depth" type="range" min="0" max="9" step="1" value="5">
+            &nbsp;(<span id="count">#</span> points)
+          </label>
+          <div id="docs">
+            <p>See the <a href="fractal.js" target="_blank">fractal.js source</a> to see how this is done.</p>
+          </div>
+          <div id="tags">fractal, vector</div>
+        </div>
+
+      </div>
+
+    </div>
+
+    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
+    <script src="loader.js?id=fractal" type="text/javascript"></script>
+
+  </body>
+</html>

examples/fractal.js

@@ -0,0 +1,124 @@
+goog.require('ol.Feature');
+goog.require('ol.Map');
+goog.require('ol.View2D');
+goog.require('ol.geom.LineString');
+goog.require('ol.layer.Vector');
+goog.require('ol.source.Vector');
+
+var radius = 10e6;
+var cos30 = Math.cos(Math.PI / 6);
+var sin30 = Math.sin(Math.PI / 6);
+var rise = radius * sin30;
+var run = radius * cos30;
+
+var triangle = new ol.geom.LineString([
+  [0, radius], [run, -rise], [-run, -rise], [0, radius]
+]);
+
+var feature = new ol.Feature(triangle);
+
+var layer = new ol.layer.Vector({
+  source: new ol.source.Vector({
+    features: [feature]
+  })
+});
+
+var map = new ol.Map({
+  layers: [layer],
+  target: 'map',
+  view: new ol.View2D({
+    center: [0, 0],
+    zoom: 1
+  })
+});
+
+function makeFractal(depth) {
+  var geometry = /** @type {ol.geom.LineString} */ (triangle.clone());
+  var graph = coordsToGraph(geometry.getCoordinates());
+  for (var i = 0; i < depth; ++i) {
+    var node = graph;
+    while (node.next) {
+      var next = node.next;
+      injectNodes(node);
+      node = next;
+    }
+  }
+  var coordinates = graphToCoords(graph);
+  document.getElementById('count').innerHTML = coordinates.length;
+  geometry.setCoordinates(coordinates);
+  feature.setGeometry(geometry);
+}
+
+function injectNodes(startNode) {
+  var endNode = startNode.next;
+
+  var start = startNode.point;
+  var end = startNode.next.point;
+  var dx = end[0] - start[0];
+  var dy = end[1] - start[1];
+
+  // first point at 1/3 along the segment
+  var firstNode = {
+    point: [start[0] + dx / 3, start[1] + dy / 3]
+  };
+
+  // second point at peak of _/\_
+  var r = Math.sqrt(dx * dx + dy * dy) / (2 * cos30);
+  var a = Math.atan2(dy, dx) + Math.PI / 6;
+  var secondNode = {
+    point: [start[0] + r * Math.cos(a), start[1] + r * Math.sin(a)]
+  };
+
+  // third point at 2/3 along the segment
+  var thirdNode = {
+    point: [end[0] - dx / 3, end[1] - dy / 3]
+  };
+
+  startNode.next = firstNode;
+  firstNode.next = secondNode;
+  secondNode.next = thirdNode;
+  thirdNode.next = endNode;
+}
+
+
+function coordsToGraph(coordinates) {
+  var graph = {
+    point: coordinates[0]
+  };
+  var length = coordinates.length;
+  for (var level = 0, node = graph; level < length - 1; ++level) {
+    node.next = {
+      point: coordinates[level + 1]
+    };
+    node = node.next;
+  }
+  return graph;
+}
+
+function graphToCoords(graph) {
+  var coordinates = [graph.point];
+  for (var node = graph, i = 1; node.next; node = node.next, ++i) {
+    coordinates[i] = node.next.point;
+  }
+  return coordinates;
+}
+
+var depthInput = document.getElementById('depth');
+
+function update() {
+  makeFractal(Number(depthInput.value));
+}
+
+var updateTimer;
+
+
+/**
+ * Regenerate fractal on depth change.  Change events are debounced so updates
+ * only occur every 200ms.
+ */
+depthInput.onchange = function() {
+  window.clearTimeout(updateTimer);
+  updateTimer = window.setTimeout(update, 200);
+};
+
+update();

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

@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="chrome=1">
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
     <link rel="stylesheet" href="../resources/layout.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
@@ -25,7 +26,7 @@
     <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>         
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
         </div>
       </div>
     </div>
@@ -56,8 +57,8 @@
     </div>
 
     <script src="jquery.min.js" type="text/javascript"></script>
-    <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>
+    <script src="loader.js?id=full-screen-drag-rotate-and-zoom" type="text/javascript"></script>
 
   </body>
 </html>

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

@@ -24,7 +24,6 @@ var map = new ol.Map({
     })
   ],
   // Use the canvas renderer because it's currently the fastest
-  renderer: 'canvas',
   target: 'map',
   view: new ol.View2D({
     center: [-33519607, 5616436],

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">
@@ -14,6 +15,9 @@
       .map:-webkit-full-screen {
         height: 100%;
       }
+      .map:-ms-fullscreen {
+        height: 100%;
+      }
       .map:full-screen {
         height: 100%;
       }
@@ -25,7 +29,7 @@
     <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>         
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
         </div>
       </div>
     </div>
@@ -56,8 +60,8 @@
     </div>
 
     <script src="jquery.min.js" type="text/javascript"></script>
-    <script src="loader.js?id=full-screen" type="text/javascript"></script>
     <script src="../resources/example-behaviour.js" type="text/javascript"></script>
+    <script src="loader.js?id=full-screen" type="text/javascript"></script>
 
   </body>
 </html>

examples/full-screen.js

@@ -1,5 +1,4 @@
 goog.require('ol.Map');
-goog.require('ol.RendererHints');
 goog.require('ol.View2D');
 goog.require('ol.control');
 goog.require('ol.control.FullScreen');
@@ -24,7 +23,7 @@ var map = new ol.Map({
       })
     })
   ],
-  renderer: ol.RendererHints.createFromQueryData(),
+  renderer: exampleNS.getRendererFromQueryString(),
   target: 'map',
   view: view
 });

examples/geojson.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,7 +15,7 @@
     <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>         
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
         </div>
       </div>
     </div>
@@ -43,8 +44,8 @@
     </div>
 
     <script src="jquery.min.js" type="text/javascript"></script>
-    <script src="loader.js?id=geojson" type="text/javascript"></script>
     <script src="../resources/example-behaviour.js" type="text/javascript"></script>
+    <script src="loader.js?id=geojson" type="text/javascript"></script>
 
   </body>
 </html>

examples/geojson.js

@@ -187,7 +187,6 @@ var map = new ol.Map({
     }),
     vectorLayer
   ],
-  renderer: 'canvas',
   target: 'map',
   view: new ol.View2D({
     center: [0, 0],

examples/geolocation-orientation.html

@@ -0,0 +1,53 @@
+<!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>Mobile Geolocation Tracking with Orientation</title>
+    <style type="text/css">
+      html, body, .map {
+        margin: 0;
+        padding: 0;
+        width: 100%;
+        height: 100%;
+      }
+      #info {
+          position: absolute;
+          font-size: 0.7em;
+          top: 10px;
+          right: 10px;
+          background-color: lightgrey;
+          padding: 4px;
+      }
+      .button {
+          position: absolute;
+          bottom: 40px;
+          left: 10px;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="map" class="map"></div>
+    <div id="info"></div>
+    <img id="geolocation_marker" src="data/geolocation_marker.png" />
+    <div class="button">
+        <button id="geolocate">Geolocate Me!</button>
+        <button id="simulate">Simulate</button>
+    </div>
+
+    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
+    <script src="loader.js?id=geolocation-orientation" type="text/javascript"></script>
+
+    <div style="display: none;">
+      <div id="title">Geolocation tracking with orientation example</div>
+      <div id="shortdesc">Example of a geolocated and oriented map.</div>
+      <div id="tags">fullscreen, geolocation, orientation, mobile</div>
+    </div>
+  </body>
+</html>

examples/geolocation-orientation.js

@@ -0,0 +1,222 @@
+goog.require('ol.Geolocation');
+goog.require('ol.Map');
+goog.require('ol.Overlay');
+goog.require('ol.View2D');
+goog.require('ol.geom.LineString');
+goog.require('ol.layer.Tile');
+goog.require('ol.proj');
+goog.require('ol.source.OSM');
+
+// creating the view
+var view = new ol.View2D({
+  center: ol.proj.transform([5.8713, 45.6452], 'EPSG:4326', 'EPSG:3857'),
+  zoom: 19
+});
+
+// creating the map
+var map = new ol.Map({
+  layers: [
+    new ol.layer.Tile({
+      source: new ol.source.OSM()
+    })
+  ],
+  target: 'map',
+  view: view
+});
+
+// Geolocation marker
+var markerEl = document.getElementById('geolocation_marker');
+var marker = new ol.Overlay({
+  positioning: 'center-center',
+  element: markerEl,
+  stopEvent: false
+});
+map.addOverlay(marker);
+
+// LineString to store the different geolocation positions. This LineString
+// is time aware.
+// The Z dimension is actually used to store the rotation (heading).
+var positions = new ol.geom.LineString([], 'XYZM');
+
+// Geolocation Control
+var geolocation = new ol.Geolocation(/** @type {olx.GeolocationOptions} */ ({
+  trackingOptions: {
+    maximumAge: 10000,
+    enableHighAccuracy: true,
+    timeout: 600000
+  }
+}));
+geolocation.bindTo('projection', view);
+
+var deltaMean = 500; // the geolocation sampling period mean in ms
+
+// Listen to position changes
+geolocation.on('change', function(evt) {
+  var position = geolocation.getPosition();
+  var accuracy = geolocation.getAccuracy();
+  var heading = geolocation.getHeading() || 0;
+  var speed = geolocation.getSpeed() || 0;
+  var m = Date.now();
+
+  addPosition(position, heading, m, speed);
+
+  var coords = positions.getCoordinates();
+  var len = coords.length;
+  if (len >= 2) {
+    deltaMean = (coords[len - 1][3] - coords[0][3]) / (len - 1);
+  }
+
+  var html = [
+    'Position: ' + position[0].toFixed(2) + ', ' + position[1].toFixed(2),
+    'Accuracy: ' + accuracy,
+    'Heading: ' + Math.round(radToDeg(heading)) + '°',
+    'Speed: ' + (speed * 3.6).toFixed(1) + ' km/h',
+    'Delta: ' + Math.round(deltaMean) + 'ms'
+  ].join('<br />');
+  document.getElementById('info').innerHTML = html;
+});
+
+geolocation.on('error', function() {
+  alert('geolocation error');
+  // FIXME we should remove the coordinates in positions
+});
+
+// convert radians to degrees
+function radToDeg(rad) {
+  return rad * 360 / (Math.PI * 2);
+}
+// convert degrees to radians
+function degToRad(deg) {
+  return deg * Math.PI * 2 / 360;
+}
+// modulo for negative values
+function mod(n) {
+  return ((n % (2 * Math.PI)) + (2 * Math.PI)) % (2 * Math.PI);
+}
+
+function addPosition(position, heading, m, speed) {
+  var x = position[0];
+  var y = position[1];
+  var fCoords = positions.getCoordinates();
+  var previous = fCoords[fCoords.length - 1];
+  var prevHeading = previous && previous[2];
+  if (prevHeading) {
+    var headingDiff = heading - mod(prevHeading);
+
+    // force the rotation change to be less than 180°
+    if (Math.abs(headingDiff) > Math.PI) {
+      var sign = (headingDiff >= 0) ? 1 : -1;
+      headingDiff = - sign * (2 * Math.PI - Math.abs(headingDiff));
+    }
+    heading = prevHeading + headingDiff;
+  }
+  positions.appendCoordinate([x, y, heading, m]);
+
+  // only keep the 20 last coordinates
+  positions.setCoordinates(positions.getCoordinates().slice(-20));
+
+  // FIXME use speed instead
+  if (heading && speed) {
+    markerEl.src = 'data/geolocation_marker_heading.png';
+  } else {
+    markerEl.src = 'data/geolocation_marker.png';
+  }
+}
+
+var previousM = 0;
+// change center and rotation before render
+map.beforeRender(function(map, frameState) {
+  if (frameState !== null) {
+    // use sampling period to get a smooth transition
+    var m = frameState.time - deltaMean * 1.5;
+    m = Math.max(m, previousM);
+    previousM = m;
+    // interpolate position along positions LineString
+    var c = positions.getCoordinateAtM(m, true);
+    var view = frameState.view2DState;
+    if (c) {
+      view.center = getCenterWithHeading(c, -c[2], view.resolution);
+      view.rotation = -c[2];
+      marker.setPosition(c);
+    }
+  }
+  return true; // Force animation to continue
+});
+
+// recenters the view by putting the given coordinates at 3/4 from the top or
+// the screen
+function getCenterWithHeading(position, rotation, resolution) {
+  var size = map.getSize();
+  var height = size[1];
+
+  return [
+    position[0] - Math.sin(rotation) * height * resolution * 1 / 4,
+    position[1] + Math.cos(rotation) * height * resolution * 1 / 4
+  ];
+}
+
+// postcompose callback
+function render() {
+  map.render();
+}
+
+// geolocate device
+var geolocateBtn = document.getElementById('geolocate');
+geolocateBtn.addEventListener('click', function() {
+  geolocation.setTracking(true); // Start position tracking
+
+  map.on('postcompose', render);
+  map.render();
+
+  disableButtons();
+}, false);
+
+// simulate device move
+var simulationData;
+$.getJSON('data/geolocation-orientation.json', function(data) {
+  simulationData = data.data;
+});
+var simulateBtn = document.getElementById('simulate');
+simulateBtn.addEventListener('click', function() {
+  var coordinates = simulationData;
+
+  var first = coordinates.shift();
+  simulatePositionChange(first);
+
+  var prevDate = first.timestamp;
+  function geolocate() {
+    var position = coordinates.shift();
+    if (!position) {
+      return;
+    }
+    var newDate = position.timestamp;
+    simulatePositionChange(position);
+    window.setTimeout(function() {
+      prevDate = newDate;
+      geolocate();
+    }, (newDate - prevDate) / 0.5);
+  }
+  geolocate();
+
+  map.on('postcompose', render);
+  map.render();
+
+  disableButtons();
+}, false);
+
+function simulatePositionChange(position) {
+  var coords = position.coords;
+  geolocation.set('accuracy', coords.accuracy);
+  geolocation.set('heading', degToRad(coords.heading));
+  var position_ = [coords.longitude, coords.latitude];
+  var projectedPosition = ol.proj.transform(position_, 'EPSG:4326',
+      'EPSG:3857');
+  geolocation.set('position', projectedPosition);
+  geolocation.set('speed', coords.speed);
+  geolocation.dispatchChangeEvent();
+}
+
+function disableButtons() {
+  geolocateBtn.disabled = 'disabled';
+  simulateBtn.disabled = 'disabled';
+}

examples/geolocation.html

@@ -4,18 +4,10 @@
     <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>
-      .icon-flag {
-        font-size: 22px;
-        text-shadow: 2px 2px 3px #013;
-      }
-      .tooltip-inner {
-        white-space: nowrap;
-      }
-    </style>
     <title>Geolocation example</title>
   </head>
   <body>
@@ -23,7 +15,7 @@
     <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>         
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
         </div>
       </div>
     </div>
@@ -62,9 +54,8 @@
     </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/example-behaviour.js" type="text/javascript"></script>
+    <script src="loader.js?id=geolocation" type="text/javascript"></script>
 
   </body>
 </html>

examples/geolocation.js

@@ -1,13 +1,10 @@
-// FIXME use an ol.geom.Circle to display a circle with accuracy
-// FIXME this circle will need to compensate for the pointResolution of the
-// FIXME EPSG:3857 projection
-
+goog.require('ol.Feature');
+goog.require('ol.FeatureOverlay');
 goog.require('ol.Geolocation');
 goog.require('ol.Map');
-goog.require('ol.Overlay');
-goog.require('ol.RendererHints');
 goog.require('ol.View2D');
 goog.require('ol.dom.Input');
+goog.require('ol.geom.Point');
 goog.require('ol.layer.Tile');
 goog.require('ol.source.OSM');
 
@@ -23,7 +20,6 @@ var map = new ol.Map({
       source: new ol.source.OSM()
     })
   ],
-  renderer: ol.RendererHints.createFromQueryData(),
   target: 'map',
   view: view
 });
@@ -34,7 +30,8 @@ geolocation.bindTo('projection', view);
 var track = new ol.dom.Input(document.getElementById('track'));
 track.bindTo('checked', geolocation, 'tracking');
 
-geolocation.on('propertychange', function() {
+// update the HTML page when the position changes.
+geolocation.on('change', function() {
   $('#accuracy').text(geolocation.getAccuracy() + ' [m]');
   $('#altitude').text(geolocation.getAltitude() + ' [m]');
   $('#altitudeAccuracy').text(geolocation.getAltitudeAccuracy() + ' [m]');
@@ -42,22 +39,23 @@ geolocation.on('propertychange', function() {
   $('#speed').text(geolocation.getSpeed() + ' [m/s]');
 });
 
-var marker = new ol.Overlay({
-  element: /** @type {Element} */ ($('<i/>').addClass('icon-flag').get(0)),
-  positioning: 'bottom-left',
-  stopEvent: false
-});
-map.addOverlay(marker);
-// bind the marker position to the device location.
-marker.bindTo('position', geolocation);
-
-geolocation.on('change:accuracy', function() {
-  $(marker.getElement()).tooltip({
-    title: this.getAccuracy() + 'm from this point'
-  });
-});
+// handle geolocation error.
 geolocation.on('error', function(error) {
   var info = document.getElementById('info');
   info.innerHTML = error.message;
   info.style.display = '';
 });
+
+var accuracyFeature = new ol.Feature();
+accuracyFeature.bindTo('geometry', geolocation, 'accuracyGeometry');
+
+var positionFeature = new ol.Feature();
+positionFeature.bindTo('geometry', geolocation, 'position')
+    .transform(function() {}, function(coordinates) {
+      return coordinates ? new ol.geom.Point(coordinates) : null;
+    });
+
+var featuresOverlay = new ol.FeatureOverlay({
+  map: map,
+  features: [accuracyFeature, positionFeature]
+});

examples/getfeatureinfo.html

@@ -5,6 +5,7 @@
     <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="../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">
@@ -15,7 +16,7 @@
     <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>          
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
         </div>
       </div>
     </div>
@@ -49,8 +50,8 @@
     </div>
 
     <script src="jquery.min.js" type="text/javascript"></script>
-    <script src="loader.js?id=getfeatureinfo" type="text/javascript"></script>
     <script src="../resources/example-behaviour.js" type="text/javascript"></script>
+    <script src="loader.js?id=getfeatureinfo" type="text/javascript"></script>
 
   </body>
 </html>

examples/getfeatureinfo.js

@@ -23,7 +23,6 @@ var viewProjection = /** @type {ol.proj.Projection} */
 
 var map = new ol.Map({
   layers: [wmsLayer],
-  renderer: 'canvas',
   target: 'map',
   view: view
 });

examples/google-map.html

@@ -5,6 +5,7 @@
     <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="../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,10 @@
     div.ol-logo {
       left: 65px;
     }
+    div.fill {
+      width: 100%;
+      height: 100%;
+    }
     </style>
     <script src="http://maps.google.com/maps/api/js?v=3&amp;sensor=false"></script>
     <title>Google Maps integration example</title>
@@ -21,7 +26,7 @@
     <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>          
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
         </div>
       </div>
     </div>
@@ -30,7 +35,10 @@
 
       <div class="row-fluid">
         <div class="span12">
-          <div id="map" class="map"></div>
+          <div id="map" class="map">
+            <div id="gmap" class="fill"></div>
+            <div id="olmap" class="fill"></div>
+          </div>
         </div>
       </div>
 
@@ -50,8 +58,8 @@
     </div>
 
     <script src="jquery.min.js" type="text/javascript"></script>
-    <script src="loader.js?id=google-map" type="text/javascript"></script>
     <script src="../resources/example-behaviour.js" type="text/javascript"></script>
+    <script src="loader.js?id=google-map" type="text/javascript"></script>
 
   </body>
 </html>

examples/google-map.js

@@ -12,9 +12,7 @@ goog.require('ol.style.Stroke');
 goog.require('ol.style.Style');
 
 
-var gmap = new google.maps.Map(document.getElementById('map'), {
-  center: new google.maps.LatLng(0, 0),
-  zoom: 1,
+var gmap = new google.maps.Map(document.getElementById('gmap'), {
   disableDefaultUI: true,
   keyboardShortcuts: false,
   draggable: false,
@@ -23,52 +21,44 @@ var gmap = new google.maps.Map(document.getElementById('map'), {
   streetViewControl: false
 });
 
-var olmap = document.createElement('div');
-olmap.style['width'] = '100%';
-olmap.style['height'] = '100%';
-gmap.controls[google.maps.ControlPosition.TOP_LEFT].push(olmap);
-
-google.maps.event.addListenerOnce(gmap, 'tilesloaded', function() {
-  var vector = new ol.layer.Vector({
-    source: new ol.source.GeoJSON({
-      url: 'data/geojson/countries.geojson',
-      projection: 'EPSG:3857'
-    }),
-    style: new ol.style.Style({
-      fill: new ol.style.Fill({
-        color: 'rgba(255, 255, 255, 0.6)'
-      }),
-      stroke: new ol.style.Stroke({
-        color: '#319FD3',
-        width: 1
-      })
-    })
-  });
-
-  var center = gmap.getCenter();
-  var map = new ol.Map({
-    layers: [vector],
-    interactions: ol.interaction.defaults({
-      altShiftDragRotate: false,
-      dragPan: false,
-      touchRotate: false
-    }).extend([new ol.interaction.DragPan({kinetic: false})]),
-    renderer: 'canvas',
-    target: olmap,
-    view: new ol.View2D({
-      center: ol.proj.transform([center.lng(), center.lat()],
-          'EPSG:4326', 'EPSG:3857'),
-      zoom: gmap.getZoom()
-    })
-  });
-
-  var view = map.getView().getView2D();
-  view.on('change:center', function() {
-    var center = ol.proj.transform(view.getCenter(),
-        'EPSG:3857', 'EPSG:4326');
-    gmap.setCenter(new google.maps.LatLng(center[1], center[0]));
-  });
-  view.on('change:resolution', function() {
-    gmap.setZoom(view.getZoom());
-  });
+var view = new ol.View2D();
+view.on('change:center', function() {
+  var center = ol.proj.transform(view.getCenter(), 'EPSG:3857', 'EPSG:4326');
+  gmap.setCenter(new google.maps.LatLng(center[1], center[0]));
 });
+view.on('change:resolution', function() {
+  gmap.setZoom(view.getZoom());
+});
+
+var vector = new ol.layer.Vector({
+  source: new ol.source.GeoJSON({
+    url: 'data/geojson/countries.geojson',
+    projection: 'EPSG:3857'
+  }),
+  style: new ol.style.Style({
+    fill: new ol.style.Fill({
+      color: 'rgba(255, 255, 255, 0.6)'
+    }),
+    stroke: new ol.style.Stroke({
+      color: '#319FD3',
+      width: 1
+    })
+  })
+});
+
+var olMapDiv = document.getElementById('olmap');
+var map = new ol.Map({
+  layers: [vector],
+  interactions: ol.interaction.defaults({
+    altShiftDragRotate: false,
+    pan: false,
+    rotate: false
+  }).extend([new ol.interaction.DragPan({kinetic: false})]),
+  target: olMapDiv,
+  view: view
+});
+view.setCenter([0, 0]);
+view.setZoom(1);
+
+olMapDiv.parentNode.removeChild(olMapDiv);
+gmap.controls[google.maps.ControlPosition.TOP_LEFT].push(olMapDiv);

examples/gpx.html

@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="chrome=1">
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
     <link rel="stylesheet" href="../resources/layout.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
@@ -14,7 +15,7 @@
     <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>         
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
         </div>
       </div>
     </div>
@@ -48,8 +49,8 @@
     </div>
 
     <script src="jquery.min.js" type="text/javascript"></script>
-    <script src="loader.js?id=gpx" type="text/javascript"></script>
     <script src="../resources/example-behaviour.js" type="text/javascript"></script>
+    <script src="loader.js?id=gpx" type="text/javascript"></script>
 
   </body>
 </html>

examples/gpx.js

@@ -55,7 +55,6 @@ var vector = new ol.layer.Vector({
 
 var map = new ol.Map({
   layers: [raster, vector],
-  renderer: 'canvas',
   target: document.getElementById('map'),
   view: new ol.View2D({
     center: [-7916041.528716288, 5228379.045749711],
@@ -87,6 +86,6 @@ $(map.getViewport()).on('mousemove', function(evt) {
   displayFeatureInfo(pixel);
 });
 
-map.on('singleclick', function(evt) {
+map.on('click', function(evt) {
   displayFeatureInfo(evt.pixel);
 });

examples/heatmap-earthquakes.html

@@ -0,0 +1,52 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="chrome=1">
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
+    <link rel="stylesheet" href="../resources/layout.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
+    <title>Earthquakes heatmap</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 id="info"></div></div>
+        </div>
+      </div>
+
+      <div class="row-fluid">
+
+        <div class="span12">
+          <h4 id="title">Earthquakes heatmap</h4>
+          <p id="shortdesc">Demonstrates the use of a heatmap layer.</p>
+          <div id="docs">
+            <p>
+              This example parses a KML file and renders the features as a <code>ol.layer.Heatmap</code> layer.
+            </p>
+            <p>See the <a href="heatmap-earthquakes.js" target="_blank">heatmap-earthquakes.js source</a> to see how this is done.</p>
+          </div>
+          <div id="tags">heatmap, kml, vector, style</div>
+        </div>
+      </div>
+
+    </div>
+
+    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="loader.js?id=heatmap-earthquakes" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
+
+  </body>
+</html>

examples/heatmap-earthquakes.js

@@ -0,0 +1,39 @@
+goog.require('ol.Map');
+goog.require('ol.View2D');
+goog.require('ol.layer.Heatmap');
+goog.require('ol.layer.Tile');
+goog.require('ol.source.KML');
+goog.require('ol.source.Stamen');
+
+
+var vector = new ol.layer.Heatmap({
+  source: new ol.source.KML({
+    projection: 'EPSG:3857',
+    url: 'data/kml/2012_Earthquakes_Mag5.kml'
+  }),
+  radius: 5
+});
+
+vector.getSource().on('addfeature', function(event) {
+  // 2012_Earthquakes_Mag5.kml stores the magnitude of each earthquake in a
+  // standards-violating <magnitude> tag in each Placemark.  We extract it from
+  // the Placemark's name instead.
+  var name = event.feature.get('name');
+  var magnitude = parseFloat(name.substr(2));
+  event.feature.set('weight', magnitude - 5);
+});
+
+var raster = new ol.layer.Tile({
+  source: new ol.source.Stamen({
+    layer: 'toner'
+  })
+});
+
+var map = new ol.Map({
+  layers: [raster, vector],
+  target: 'map',
+  view: new ol.View2D({
+    center: [0, 0],
+    zoom: 2
+  })
+});

examples/hue-saturation.html

@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="chrome=1">
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
     <link rel="stylesheet" href="../resources/layout.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
@@ -22,7 +23,7 @@
     <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>         
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
         </div>
       </div>
     </div>
@@ -66,8 +67,8 @@
     </div>
 
     <script src="jquery.min.js" type="text/javascript"></script>
-    <script src="loader.js?id=hue-saturation" type="text/javascript"></script>
     <script src="../resources/example-behaviour.js" type="text/javascript"></script>
+    <script src="loader.js?id=hue-saturation" type="text/javascript"></script>
 
   </body>
 </html>

examples/icon.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">
@@ -22,7 +23,7 @@
     <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>         
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
         </div>
       </div>
     </div>
@@ -34,7 +35,7 @@
           <div id="map" class="map">
             <div id="popup"></div>
           </div>
-        </div>       
+        </div>
       </div>
 
       <div class="row-fluid">
@@ -54,8 +55,8 @@
 
     <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>
+    <script src="loader.js?id=icon" type="text/javascript"></script>
 
   </body>
 </html>

examples/icon.js

@@ -23,6 +23,7 @@ var iconStyle = new ol.style.Style({
     anchor: [0.5, 46],
     anchorXUnits: 'fraction',
     anchorYUnits: 'pixels',
+    opacity: 0.75,
     src: 'data/icon.png'
   }))
 });
@@ -45,7 +46,6 @@ var rasterLayer = new ol.layer.Tile({
 
 var map = new ol.Map({
   layers: [rasterLayer, vectorLayer],
-  renderer: 'canvas',
   target: document.getElementById('map'),
   view: new ol.View2D({
     center: [0, 0],
@@ -63,7 +63,7 @@ var popup = new ol.Overlay({
 map.addOverlay(popup);
 
 // display popup on click
-map.on('singleclick', function(evt) {
+map.on('click', function(evt) {
   var feature = map.forEachFeatureAtPixel(evt.pixel,
       function(feature, layer) {
         return feature;

examples/igc.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,7 +15,7 @@
     <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>         
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
         </div>
       </div>
     </div>
@@ -31,10 +32,12 @@
 
         <div class="span4">
           <h4 id="title">IGC example</h4>
-          <p id="shortdesc">Example of tracks recorded from multiple paraglider flights on the same day, read from an IGC file. The five tracks contain a total of 49,707 unique coordinates. Zoom in to see more detail. The background layer is from <a href="http://www.opencyclemap.org/">OpenCycleMap</a>.</p>
+          <p id="shortdesc">Example of tracks recorded from multiple paraglider flights on the same day, read from an IGC file.</p>
           <div id="docs">
+            <p>The five tracks contain a total of 49,707 unique coordinates. Zoom in to see more detail. The background layer is from <a href="http://www.opencyclemap.org/">OpenCycleMap</a>.</p>
             <p>See the <a href="igc.js" target="_blank">igc.js source</a> to see how this is done.</p>
           </div>
+          <input id="time" type="range" value="0" steps="1"></input>
           <div id="tags">complex-geometry, closest-feature, igc, opencyclemap</div>
         </div>
         <div class="span4 offset4">
@@ -48,8 +51,8 @@
     </div>
 
     <script src="jquery.min.js" type="text/javascript"></script>
-    <script src="loader.js?id=igc" type="text/javascript"></script>
     <script src="../resources/example-behaviour.js" type="text/javascript"></script>
+    <script src="loader.js?id=igc" type="text/javascript"></script>
 
   </body>
 </html>

examples/igc.js

@@ -1,4 +1,6 @@
 goog.require('ol.Attribution');
+goog.require('ol.Feature');
+goog.require('ol.FeatureOverlay');
 goog.require('ol.Map');
 goog.require('ol.View2D');
 goog.require('ol.geom.LineString');
@@ -8,6 +10,7 @@ goog.require('ol.layer.Vector');
 goog.require('ol.source.IGC');
 goog.require('ol.source.OSM');
 goog.require('ol.style.Circle');
+goog.require('ol.style.Fill');
 goog.require('ol.style.Stroke');
 goog.require('ol.style.Style');
 
@@ -47,6 +50,19 @@ var vectorSource = new ol.source.IGC({
   ]
 });
 
+var time = {
+  start: Infinity,
+  stop: -Infinity,
+  duration: 0
+};
+vectorSource.on('addfeature', function(event) {
+  var geometry = event.feature.getGeometry();
+  time.start = Math.min(time.start, geometry.getFirstCoordinate()[2]);
+  time.stop = Math.max(time.stop, geometry.getLastCoordinate()[2]);
+  time.duration = time.stop - time.start;
+});
+
+
 var map = new ol.Map({
   layers: [
     new ol.layer.Tile({
@@ -66,7 +82,6 @@ var map = new ol.Map({
       style: styleFunction
     })
   ],
-  renderer: 'canvas',
   target: 'map',
   view: new ol.View2D({
     center: [703365.7089403362, 5714629.865071137],
@@ -102,7 +117,7 @@ var displaySnap = function(coordinate) {
       line.setCoordinates(coordinates);
     }
   }
-  map.requestRenderFrame();
+  map.render();
 };
 
 $(map.getViewport()).on('mousemove', function(evt) {
@@ -110,7 +125,7 @@ $(map.getViewport()).on('mousemove', function(evt) {
   displaySnap(coordinate);
 });
 
-map.on('singleclick', function(evt) {
+map.on('click', function(evt) {
   displaySnap(evt.coordinate);
 });
 
@@ -137,3 +152,34 @@ map.on('postcompose', function(evt) {
     vectorContext.drawLineStringGeometry(line);
   }
 });
+
+var featureOverlay = new ol.FeatureOverlay({
+  map: map,
+  style: new ol.style.Style({
+    image: new ol.style.Circle({
+      radius: 5,
+      fill: new ol.style.Fill({
+        color: 'rgba(255,0,0,0.9)'
+      }),
+      stroke: null
+    })
+  })
+});
+
+$('#time').on('input', function(event) {
+  var value = parseInt($(this).val(), 10) / 100;
+  var m = time.start + (time.duration * value);
+  vectorSource.forEachFeature(function(feature) {
+    var geometry = /** @type {ol.geom.LineString} */ (feature.getGeometry());
+    var coordinate = geometry.getCoordinateAtM(m, true);
+    var highlight = feature.get('highlight');
+    if (highlight === undefined) {
+      highlight = new ol.Feature(new ol.geom.Point(coordinate));
+      feature.set('highlight', highlight);
+      featureOverlay.addFeature(highlight);
+    } else {
+      highlight.getGeometry().setCoordinates(coordinate);
+    }
+  });
+  map.render();
+});

examples/image-filter.html

@@ -0,0 +1,65 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="chrome=1">
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
+    <link rel="stylesheet" href="../resources/layout.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
+    <title>Image Filter 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">Image filter example</h4>
+          <p id="shortdesc">Apply a filter to imagery</p>
+          <select id="kernel" name="kernel">
+            <option>none</option>
+            <option selected>sharpen</option>
+            <option value="sharpenless">sharpen less</option>
+            <option>blur</option>
+            <option>shadow</option>
+            <option>emboss</option>
+            <option value="edge">edge detect</option>
+          </select>
+          <div id="docs">
+            <p>
+              Layer rendering can be manipulated in <code>precompose</code> and <code>postcompose</code> event listeners.
+              These listeners get an event with a reference to the Canvas rendering context.
+              In this example, the <code>postcompose</code> listener applies a filter to the image data.
+            </p>
+            <p>See the <a href="image-filter.js" target="_blank">image-filter.js source</a> for details on how this is done.</p>
+          </div>
+          <div id="tags">filter, image manipulation</div>
+        </div>
+
+      </div>
+
+    </div>
+
+    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
+    <script src="loader.js?id=image-filter" type="text/javascript"></script>
+
+  </body>
+</html>

examples/image-filter.js

@@ -0,0 +1,146 @@
+goog.require('ol.Map');
+goog.require('ol.View2D');
+goog.require('ol.layer.Tile');
+goog.require('ol.proj');
+goog.require('ol.source.BingMaps');
+
+var key = 'Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3';
+
+var imagery = new ol.layer.Tile({
+  source: new ol.source.BingMaps({key: key, imagerySet: 'Aerial'})
+});
+
+var map = new ol.Map({
+  layers: [imagery],
+  target: 'map',
+  view: new ol.View2D({
+    center: ol.proj.transform([-120, 50], 'EPSG:4326', 'EPSG:3857'),
+    zoom: 6
+  })
+});
+
+var kernels = {
+  none: [
+    0, 0, 0,
+    0, 1, 0,
+    0, 0, 0
+  ],
+  sharpen: [
+    0, -1, 0,
+    -1, 5, -1,
+    0, -1, 0
+  ],
+  sharpenless: [
+    0, -1, 0,
+    -1, 10, -1,
+    0, -1, 0
+  ],
+  blur: [
+    1, 1, 1,
+    1, 1, 1,
+    1, 1, 1
+  ],
+  shadow: [
+    1, 2, 1,
+    0, 1, 0,
+    -1, -2, -1
+  ],
+  emboss: [
+    -2, 1, 0,
+    -1, 1, 1,
+    0, 1, 2
+  ],
+  edge: [
+    0, 1, 0,
+    1, -4, 1,
+    0, 1, 0
+  ]
+};
+
+function normalize(kernel) {
+  var len = kernel.length;
+  var normal = new Array(len);
+  var i, sum = 0;
+  for (i = 0; i < len; ++i) {
+    sum += kernel[i];
+  }
+  if (sum <= 0) {
+    normal.normalized = false;
+    sum = 1;
+  } else {
+    normal.normalized = true;
+  }
+  for (i = 0; i < len; ++i) {
+    normal[i] = kernel[i] / sum;
+  }
+  return normal;
+}
+
+var select = document.getElementById('kernel');
+var selectedKernel = normalize(kernels[select.value]);
+
+
+/**
+ * Update the kernel and re-render on change.
+ */
+select.onchange = function() {
+  selectedKernel = normalize(kernels[select.value]);
+  map.render();
+};
+
+
+/**
+ * Apply a filter on "postcompose" events.
+ * @param {ol.render.Event} event Render event.
+ */
+imagery.on('postcompose', function(event) {
+  convolve(event.context, selectedKernel);
+});
+
+
+/**
+ * Apply a convolution kernel to canvas.  This works for any size kernel, but
+ * performance starts degrading above 3 x 3.
+ * @param {CanvasRenderingContext2D} context Canvas 2d context.
+ * @param {Array.<number>} kernel Kernel.
+ */
+function convolve(context, kernel) {
+  var canvas = context.canvas;
+  var width = canvas.width;
+  var height = canvas.height;
+
+  var size = Math.sqrt(kernel.length);
+  var half = Math.floor(size / 2);
+
+  var inputData = context.getImageData(0, 0, width, height).data;
+
+  var output = context.createImageData(width, height);
+  var outputData = output.data;
+
+  for (var pixelY = 0; pixelY < height; ++pixelY) {
+    var pixelsAbove = pixelY * width;
+    for (var pixelX = 0; pixelX < width; ++pixelX) {
+      var r = 0, g = 0, b = 0, a = 0;
+      for (var kernelY = 0; kernelY < size; ++kernelY) {
+        for (var kernelX = 0; kernelX < size; ++kernelX) {
+          var weight = kernel[kernelY * size + kernelX];
+          var neighborY = Math.min(
+              height - 1, Math.max(0, pixelY + kernelY - half));
+          var neighborX = Math.min(
+              width - 1, Math.max(0, pixelX + kernelX - half));
+          var inputIndex = (neighborY * width + neighborX) * 4;
+          r += inputData[inputIndex] * weight;
+          g += inputData[inputIndex + 1] * weight;
+          b += inputData[inputIndex + 2] * weight;
+          a += inputData[inputIndex + 3] * weight;
+        }
+      }
+      var outputIndex = (pixelsAbove + pixelX) * 4;
+      outputData[outputIndex] = r;
+      outputData[outputIndex + 1] = g;
+      outputData[outputIndex + 2] = b;
+      outputData[outputIndex + 3] = kernel.normalized ? a : 255;
+    }
+  }
+  context.putImageData(output, 0, 0);
+}

examples/image-vector-layer.html

@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="chrome=1">
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
     <link rel="stylesheet" href="../resources/layout.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
@@ -14,7 +15,7 @@
     <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>         
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
         </div>
       </div>
     </div>
@@ -51,8 +52,8 @@
     </div>
 
     <script src="jquery.min.js" type="text/javascript"></script>
-    <script src="loader.js?id=image-vector-layer" type="text/javascript"></script>
     <script src="../resources/example-behaviour.js" type="text/javascript"></script>
+    <script src="loader.js?id=image-vector-layer" type="text/javascript"></script>
 
   </body>
 </html>

examples/image-vector-layer.js

@@ -34,7 +34,6 @@ var map = new ol.Map({
       })
     })
   ],
-  renderer: 'canvas',
   target: 'map',
   view: new ol.View2D({
     center: [0, 0],
@@ -86,6 +85,6 @@ $(map.getViewport()).on('mousemove', function(evt) {
   displayFeatureInfo(pixel);
 });
 
-map.on('singleclick', function(evt) {
+map.on('click', function(evt) {
   displayFeatureInfo(evt.pixel);
 });

examples/index.html

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

examples/kml-earthquakes.html

@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="chrome=1">
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
     <link rel="stylesheet" href="../resources/layout.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
@@ -35,7 +36,7 @@
     <div class="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>         
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
         </div>
       </div>
     </div>
@@ -67,8 +68,8 @@
 
     <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>
+    <script src="loader.js?id=kml-earthquakes" type="text/javascript"></script>
 
   </body>
 </html>

examples/kml-earthquakes.js

@@ -53,7 +53,6 @@ var raster = new ol.layer.Tile({
 
 var map = new ol.Map({
   layers: [raster, vector],
-  renderer: 'canvas',
   target: 'map',
   view: new ol.View2D({
     center: [0, 0],
@@ -89,6 +88,6 @@ $(map.getViewport()).on('mousemove', function(evt) {
   displayFeatureInfo(map.getEventPixel(evt.originalEvent));
 });
 
-map.on('singleclick', function(evt) {
+map.on('click', function(evt) {
   displayFeatureInfo(evt.pixel);
 });

examples/kml-timezones.html

@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="chrome=1">
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
     <link rel="stylesheet" href="../resources/layout.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
@@ -25,7 +26,7 @@
     <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>         
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
         </div>
       </div>
     </div>
@@ -55,8 +56,8 @@
 
     <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>
+    <script src="loader.js?id=kml-timezones" type="text/javascript"></script>
 
   </body>
 </html>

examples/kml-timezones.js

@@ -60,7 +60,6 @@ var raster = new ol.layer.Tile({
 
 var map = new ol.Map({
   layers: [raster, vector],
-  renderer: 'canvas',
   target: 'map',
   view: new ol.View2D({
     center: [0, 0],
@@ -96,6 +95,6 @@ $(map.getViewport()).on('mousemove', function(evt) {
   displayFeatureInfo(map.getEventPixel(evt.originalEvent));
 });
 
-map.on('singleclick', function(evt) {
+map.on('click', function(evt) {
   displayFeatureInfo(evt.pixel);
 });

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,7 +15,7 @@
     <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>         
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
         </div>
       </div>
     </div>
@@ -48,8 +49,8 @@
     </div>
 
     <script src="jquery.min.js" type="text/javascript"></script>
-    <script src="loader.js?id=kml" type="text/javascript"></script>
     <script src="../resources/example-behaviour.js" type="text/javascript"></script>
+    <script src="loader.js?id=kml" type="text/javascript"></script>
 
   </body>
 </html>

examples/kml.js

@@ -21,7 +21,6 @@ var vector = new ol.layer.Vector({
 
 var map = new ol.Map({
   layers: [raster, vector],
-  renderer: 'canvas',
   target: document.getElementById('map'),
   view: new ol.View2D({
     center: [876970.8463461736, 5859807.853963373],
@@ -53,6 +52,6 @@ $(map.getViewport()).on('mousemove', function(evt) {
   displayFeatureInfo(pixel);
 });
 
-map.on('singleclick', function(evt) {
+map.on('click', function(evt) {
   displayFeatureInfo(evt.pixel);
 });