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

Test canvas size with an untainted canvas

.gitignore

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

.jshintrc

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

.travis.yml

@@ -1,7 +1,11 @@
 before_install:
-  - "sudo pip install http://closure-linter.googlecode.com/files/closure_linter-latest.tar.gz"
+  - "sudo pip install -r requirements.txt"
   - "git clone --depth=50 https://github.com/jsdoc3/jsdoc build/jsdoc"
-  - "git clone https://code.google.com/p/glsl-unit/ build/glsl-unit"
+  - "cd build/jsdoc"
+  - "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"

AUTHORS.md

@@ -33,6 +33,7 @@ OpenLayers contributors:
 * Gregers Rygg
 * Tim Schaub
 * Christopher Schmidt
+* Tobias Schwinger
 * Cameron Shorter
 * Pedro Simonetti
 * Paul Spencer

README.md

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

apidoc/conf.json

@@ -0,0 +1,41 @@
+{
+    "opts": {
+        "recurse": true,
+        "template": "apidoc/template"
+    },
+    "tags": {
+        "allowUnknownTags": true
+    },
+    "source": {
+        "includePattern": ".+\\.js(doc)?$",
+        "excludePattern": "(^|\\/|\\\\)_",
+        "exclude": [
+            "src/googx/dom/fullscreen.js"
+        ],
+        "include": [
+            "src"
+        ]
+    },
+    "plugins": [
+        "plugins/markdown",
+        "apidoc/plugins/inheritdoc",
+        "apidoc/plugins/exports",
+        "apidoc/plugins/todo",
+        "apidoc/plugins/observable",
+        "apidoc/plugins/stability"
+    ],
+    "markdown": {
+        "parser": "gfm"
+    },
+    "stability": {
+      "levels": ["deprecated","experimental","unstable","stable","frozen","locked"]
+    },
+    "templates": {
+        "cleverLinks": false,
+        "monospaceLinks": false,
+        "default": {
+            "outputSourceFiles": true
+        }
+    },
+    "jsVersion": 180
+}

apidoc/index.md

@@ -0,0 +1,20 @@
+Finding your way around
+-----------------------
+See the class list to the right and especially take a look at {@link ol.Map} and {@link ol.layer.Layer} because those are the central objects.
+
+In general every use of OpenLayers starts by initializing a map, then adding the required layers. Controls and interactions can be added to change the behavior of the map.
+
+Projections
+-----------
+A {@link ol.proj.Projection} defines which point on earth is represented by a pair of coordinates.
+Coordinates within OpenLayers can be used in various projections where some common projections are always supported,
+others can be used via [Proj4js](http://trac.osgeo.org/proj4js/).
+
+Maps and Layers
+---------------
+A map in OpenLayers is essentially a staple of layers that is viewed from the top. Layers are responsible for retrieving data and displaying it.
+
+Contributing
+------------
+See [CONTRIBUTING.md](https://github.com/openlayers/ol3/blob/master/CONTRIBUTING.md) for instructions
+on building and testing OpenLayers. The file does also describe how to commit your changes to OpenLayers.

apidoc/plugins/exports.js

@@ -0,0 +1,118 @@
+/*
+ * 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;
+  var syms = source.match(/goog\.exportSymbol\([^\)]*\)/g);
+  if (syms) {
+    i = 0; ii = syms.length;
+    for (; i < ii; ++i) {
+      symbol = syms[i].match(/'([^']*)'/)[1];
+      api.push(symbol);
+    }
+  }
+  var props = source.match(/goog\.exportProperty\([^\)]*\)/g);
+  if (props) {
+    i = 0; ii = props.length;
+    for (; i < ii; ++i) {
+      property = props[i].match(/[^,]*,[^,]*,\r?\n? *([^\)]*)\)/)[1]
+          .replace('.prototype.', '#');
+      api.push(property);
+    }
+  }
+}
+
+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 = {
+  
+  beforeParse: function(e) {
+    if (/\.js$/.test(e.filename)) {
+      collectExports(e.source);
+    }
+  },
+  
+  newDoclet: function(e) {
+    var i, ii, j, jj;
+    if (e.doclet.meta.filename == "objectliterals.jsdoc" && e.doclet.properties) {
+      for (i = 0, ii = e.doclet.properties.length; i < ii; ++i) {
+        if (e.doclet.properties[i].type && e.doclet.properties[i].type.names) {
+          for (j = 0, jj = e.doclet.properties[i].type.names.length; j < jj; ++j) {
+            if (e.doclet.properties[i].type.names[j].indexOf('ol') == 0) {
+              if (api.indexOf(e.doclet.properties[i].type.names[j]) === -1) {
+                api.push(e.doclet.properties[i].type.names[j]);
+              }
+            }
+          }
+        }
+      }
+    }
+    if (api.indexOf(e.doclet.longname) > -1) {
+      var names, name;
+      var params = e.doclet.params;
+      if (params) {
+        for (i = 0, ii = params.length; i < ii; ++i) {
+          names = params[i].type.names;
+          if (names) {
+            for (j = 0, jj=names.length; j < jj; ++j) {
+              name = names[j];
+              if (unexported.indexOf(name) === -1) {
+                unexported.push(name);
+              }
+            }
+          }
+        }
+      }
+      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);
+        }
+      }
+    }
+  }
+
+};

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

@@ -0,0 +1,32 @@
+var util = require('util');
+exports.defineTags = function(dictionary) {
+  dictionary.defineTag('observable', {
+    mustHaveValue: true,
+    canHaveType: true,
+    canHaveName: true,
+    onTagged: function(doclet, tag) {
+      if (!doclet.observables) {
+        doclet.observables = [];
+      }
+      var description = tag.value.description;
+      var readonly = description.split(' ').shift() === 'readonly';
+      if (readonly) {
+        description = description.split(' ').slice(1).join(' ');
+      }
+      doclet.observables.push({
+        name: tag.value.name,
+        type: {
+          names: tag.value.type.names
+        },
+        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/stability.js

@@ -0,0 +1,20 @@
+var conf = env.conf.stability;
+var defaultLevels = ["deprecated","experimental","unstable","stable","frozen","locked"];
+var levels = conf.levels || defaultLevels;
+var util = require('util');
+exports.defineTags = function(dictionary) {
+  dictionary.defineTag('stability', {
+    mustHaveValue: true,
+    canHaveType: false,
+    canHaveName: true,
+    onTagged: function(doclet, tag) {
+      var level = tag.text;
+      if (levels.indexOf(level) >=0) {
+        doclet.stability = level;
+      } else {
+        var errorText = util.format('Invalid stability level (%s) in %s line %s', tag.text, doclet.meta.filename, doclet.meta.lineno);
+        require('jsdoc/util/error').handle( new Error(errorText) );
+      }
+    }
+  })
+};

apidoc/plugins/todo.js

@@ -0,0 +1,34 @@
+var util = require('util');
+exports.defineTags = function(dictionary) {
+  dictionary.defineTag('todo', {
+    mustHaveValue: true,
+    canHaveType: true,
+    canHaveName: true,
+    onTagged: function(doclet, tag) {
+      var parts = tag.text.split(' ');
+      if (parts[0] === 'stability') {
+        doclet.stability = parts.slice(1).join(' ');
+      } else if (parts[0] === 'observable') {
+        if (!doclet.observables) {
+          doclet.observables = [];
+        }
+        var readonly = parts.length > 3 && parts[3] === 'readonly';
+        var description = (readonly ? parts.slice(4) : parts.slice(3)).join(' ');
+        doclet.observables.push({
+          name: parts[1],
+          type: {
+            names: tag.value.type.names
+          },
+          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/static/styles/ol.css

@@ -0,0 +1,39 @@
+a:visited {
+  color: #08c;
+}
+
+.stability {
+  padding: 8px 35px 8px 14px;
+  margin-bottom: 20px;
+  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+  color: #333;
+  background-color: #fcfcfc;
+  border: 1px solid #ccc;
+  -webkit-border-radius: 4px;
+     -moz-border-radius: 4px;
+          border-radius: 4px;
+}
+
+.stability-deprecated {
+  color: #b94a48;
+  background-color: #f2dede;
+  border-color: #eed3d7;
+}
+
+.stability-experimental {
+  color: #c09853;
+  background-color: #fcf8e3;
+  border-color: #fbeed5;
+}
+
+.stability-unstable {
+  color: #3a87ad;
+  background-color: #d9edf7;
+  border-color: #bce8f1;
+}
+
+.stability-stable, .stability-locked {
+  color: #468847;
+  background-color: #dff0d8;
+  border-color: #d6e9c6;
+}

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) { ?>
@@ -92,6 +91,27 @@
         <?js }); ?></dl>
     <?js } ?>
     
+    <?js
+        var observables = doc.observables;
+        if (observables && observables.length && observables.forEach) {
+    ?>
+        <h3 class="subsection-title">Observable Properties</h3>
+        <dl><?js= self.partial('observables.tmpl', observables) ?></dl>
+
+    <?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/layout.tmpl

@@ -14,6 +14,7 @@
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
     <link rel="stylesheet" href="../resources/layout.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
+    <link type="text/css" rel="stylesheet" href="styles/ol.css">
 </head>
 
 <body>
@@ -21,13 +22,7 @@
 <div class="navbar navbar-inverse navbar-fixed-top">
   <div class="navbar-inner">
     <div class="container">
-      <a class="brand" href="./">OpenLayers 3 API Documentation - <?js= title ?></a>
-      <ul class="nav pull-right">
-        <li><iframe class="github-watch-button" src="http://ghbtns.com/github-btn.html?user=openlayers&repo=ol3&type=watch&count=true"
-allowtransparency="true" frameborder="0" scrolling="0" height="20" width="90"></iframe></li>
-        <li><a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-hashtags="openlayers">&nbsp;</a></li>
-        <li><div class="g-plusone-wrapper"><div class="g-plusone" data-size="medium" data-annotation="none"></div></div></li>
-      </ul>
+      <a class="brand" href="/"><img src="../resources/logo.png"> OpenLayers 3</a>
     </div>
   </div>
 </div>
@@ -47,6 +42,5 @@ allowtransparency="true" frameborder="0" scrolling="0" height="20" width="90"></
 </footer>
 
 <script> prettyPrint(); </script>
-<script src="../resources/social-links.js" type="text/javascript"></script>
 </body>
 </html>

apidoc/template/tmpl/members.tmpl

@@ -2,6 +2,8 @@
 <dt class="<?js= data.access ?>">
     <h4 class="name" id="<?js= id ?>"><?js= data.attribs + name + data.signature ?></h4>
     
+    <?js= this.partial('stability.tmpl', data) ?>
+
     <?js if (data.summary) { ?>
     <p class="summary"><?js= summary ?></p>
     <?js } ?>

apidoc/template/tmpl/method.tmpl

@@ -5,6 +5,8 @@ var self = this;
 <dt>
     <h4 class="name" id="<?js= id ?>"><?js= data.attribs + (kind == 'class'? 'new ':'') + name + data.signature ?></h4>
     
+    <?js= this.partial('stability.tmpl', data) ?>
+
     <?js if (data.summary) { ?>
     <p class="summary"><?js= summary ?></p>
     <?js } ?>

apidoc/template/tmpl/observables.tmpl

@@ -0,0 +1,37 @@
+<?js
+    var props = obj;
+?>
+
+<table class="props">
+    <thead>
+  <tr>
+    <th>Name</th>
+    <th>Type</th>
+    <th>Settable</th>
+    <th><a href="ol.ObjectEvent.html">ol.ObjectEvent</a> type</th>
+    <th class="last">Description</th>
+  </tr>
+  </thead>
+
+  <tbody>
+  <?js
+      var self = this;
+      props.forEach(function(prop) {
+        if (!prop) { return; }
+        var setter = prop.readonly ? 'no' : 'yes';
+  ?>
+
+    <tr>
+      <td class="name"><code><?js= prop.name ?></code></td>
+      <td class="type">
+      <?js if (prop.type && prop.type.names) {?>
+      <?js= self.partial('type.tmpl', prop.type.names) ?>
+      <?js } ?>
+      </td>
+      <td class="setter"><?js= setter ?></td>
+      <td class="event"><code>change:<?js= prop.name.toLowerCase() ?></code></td>
+      <td class="description last"><?js= prop.description ?></td>
+    </tr>
+    <?js }); ?>
+  </tbody>
+</table>

apidoc/template/tmpl/params.tmpl

@@ -97,7 +97,7 @@
                 </td>
             <?js } ?>
             
-            <td class="description last"><?js= (param.optional ? "(Optional) " : "") + param.description ?><?js if (param.subparams) { ?>
+            <td class="description last"><?js= param.description ?><?js if (param.subparams) { ?>
                 <h6>Properties</h6>
                 <?js= self.partial('params.tmpl', param.subparams) ?>
             <?js } ?></td>

apidoc/template/tmpl/stability.tmpl

@@ -0,0 +1,9 @@
+<?js
+var data = obj;
+var self = this;
+
+if (data.stability) { ?>
+<div class="stability stability-<?js= stability ?>">Stability: <?js= data.stability ?></div>
+<?js } else { ?>
+<div class="stability">Stability: not documented</div>
+<?js } ?>

bin/combine-examples.py

@@ -0,0 +1,27 @@
+#!/usr/bin/python
+
+import re
+import sys
+
+
+def main(argv):
+    examples = {}
+    requires = set()
+    for filename in argv[1:]:
+        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):
+        sys.stdout.write(require)
+    for filename in sorted(examples.keys()):
+        sys.stdout.write('// ' + filename + '\n')
+        sys.stdout.write('(function(){\n')
+        for line in examples[filename]:
+            sys.stdout.write(line)
+        sys.stdout.write('})();\n')
+
+
+if __name__ == '__main__':
+    sys.exit(main(sys.argv))

bin/generate-exports.py

@@ -1,7 +1,5 @@
 #!/usr/bin/env python
 
-from collections import defaultdict
-from itertools import ifilter
 from operator import attrgetter
 from optparse import OptionParser
 import re
@@ -31,104 +29,12 @@ class Exportable(object):
         return ''
 
 
-class Class(Exportable):
-
-    def __init__(self, name, object_literal, objects):
-        Exportable.__init__(self, name)
-        self.object_literal = object_literal
-        self.objects = objects
-        self.props = set()
-
-    __repr__ = simplerepr
-
-    def nested_options(self):
-        def get_class_by_object_literal_name(name):
-            for k, o in self.objects.iteritems():
-                if isinstance(o, Class) and o.object_literal.name == name:
-                    return o
-            return None
-
-        for option in sorted(self.object_literal.prop_types.keys()):
-            types = self.object_literal.prop_types[option].split('|')
-            base, object_literal = None, None
-            for t in types:
-                if t in self.objects:
-                    o = self.objects[t]
-                    if isinstance(o, (Class, Symbol)):
-                        if base:
-                            raise RuntimeError('Multiple "class" types found for '
-                                'option %s.%s: %s, %s.' %
-                                (self.object_literal.name, option,
-                                 base.name, o.name))
-                        base = o
-                    elif isinstance(o, ObjectLiteral):
-                        if object_literal:
-                            raise RuntimeError('Multiple "literal" types found for '
-                                'option %s.%s: %s, %s.' %
-                                (self.object_literal.name, option,
-                                 object_literal.name, o.name))
-                        object_literal = o
-            if object_literal:
-                if not base:
-                    raise RuntimeError('%s "literal" type found for option %s.%s, '
-                        'but no "class" type.' %
-                        (object_literal.name, self.object_literal.name, option))
-                klass = get_class_by_object_literal_name(object_literal.name)
-                if not klass:
-                    raise RuntimeError('No constructor taking a %s found.' %
-                        object_literal.name)
-                yield option, object_literal, klass, base
-
-    def export(self):
-        lines = []
-        if self.object_literal is None:
-            lines.append('\n\ngoog.exportSymbol(\n    \'%s\',\n    %s);\n' % (self.name, self.name))
-        else:
-            lines.append('\n\n\n')
-            lines.append('/**\n')
-            lines.append(' * @constructor\n')
-            lines.append(' * @extends {%s}\n' % (self.name,))
-            lines.append(' * @param {%s} options Options.\n' % (self.object_literal.extern_name(),))
-            lines.append(' */\n')
-            lines.append('%s = function(options) {\n' % (self.export_name(),))
-            lines.append('  /** @type {%s} */\n' % (self.object_literal.name,))
-            lines.append('  var arg;\n');
-            lines.append('  if (goog.isDefAndNotNull(options)) {\n')
-            # FIXME: we modify the user's options object
-            lines.append(''.join(
-                         '    if (!(options.%(o)s instanceof %(base)s)) {\n'
-                         '      options.%(o)s = new %(ctor)s(\n'
-                         '          /** @type {%(extern)s} */ (options.%(o)s));\n'
-                         '    }\n' %
-                             {'o': o, 'base': b.name, 'ctor': k.export_name(),
-                              'extern': ol.extern_name()} \
-                                     for o, ol, k, b in self.nested_options()))
-            lines.append('    arg = {')
-            lines.extend(','.join('\n      %s: options.%s' % (key, key) for key in sorted(self.object_literal.prop_types.keys())))
-            lines.append('\n    };\n')
-            lines.append('  } else {\n')
-            lines.append('    arg = /** @type {%s} */ (options);\n' % (self.object_literal.name,))
-            lines.append('  }\n')
-            lines.append('  goog.base(this, arg);\n')
-            lines.append('};\n')
-            lines.append('goog.inherits(\n')
-            lines.append('    %sExport,\n' % (self.name,));
-            lines.append('    %s);\n' % (self.name,));
-            lines.append('goog.exportSymbol(\n')
-            lines.append('    \'%s\',\n' % (self.name,))
-            lines.append('    %s);\n' % (self.export_name(),))
-        lines.extend('goog.exportProperty(\n    %s,\n    \'%s\',\n    %s.%s);\n' % (self.name, prop, self.name, prop) for prop in sorted(self.props))
-        return ''.join(lines)
-
-    def export_name(self):
-        return '%sExport' % self.name
-
-
 class ObjectLiteral(Exportable):
 
-    def __init__(self, name):
+    def __init__(self, name, objects):
         Exportable.__init__(self, name)
         self.prop_types = {}
+        self.objects = objects
 
     __repr__ = simplerepr
 
@@ -142,13 +48,18 @@ class ObjectLiteral(Exportable):
         for prop in sorted(self.prop_types.keys()):
             lines.append('\n\n')
             lines.append('/**\n')
-            lines.append(' * @type {%s}\n' % (self.prop_types[prop],))
+            prop_types = self.prop_types[prop].split('|')
+            for i, t in enumerate(prop_types):
+                if t in self.objects and isinstance(self.objects[t], ObjectLiteral):
+                    prop_types[i] = self.objects[t].extern_name()
+            prop_types = '|'.join(prop_types)
+            lines.append(' * @type {%s}\n' % (prop_types,))
             lines.append(' */\n')
             lines.append('%s.prototype.%s;\n' % (self.extern_name(), prop))
         return ''.join(lines)
 
     def extern_name(self):
-        return re.sub(r'ol\.(\S+)', r'olx.\1Extern', self.name)
+        return re.sub(r'(olx\.\S+)', r'\1Extern', self.name)
 
     def extern_namespace(self):
         return '.'.join(self.extern_name().split('.')[:-1]) or None
@@ -174,10 +85,9 @@ class ObjectLiteral(Exportable):
 
 class Symbol(Exportable):
 
-    def __init__(self, name, export_symbol, export_as=None):
+    def __init__(self, name, export_symbol):
         Exportable.__init__(self, name)
         self.export_symbol = export_symbol
-        self.export_as = export_as or self.name
         self.props = set()
 
     __repr__ = simplerepr
@@ -185,7 +95,7 @@ class Symbol(Exportable):
     def export(self):
         lines = []
         if self.export_symbol:
-            lines.append('\n\ngoog.exportSymbol(\n    \'%s\',\n    %s);\n' % (self.name, self.export_as))
+            lines.append('\n\ngoog.exportSymbol(\n    \'%s\',\n    %s);\n' % (self.name, self.name))
         lines.extend('goog.exportProperty(\n    %s,\n    \'%s\',\n    %s.%s);\n' % (self.name, prop, self.name, prop) for prop in sorted(self.props))
         return ''.join(lines)
 
@@ -203,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
@@ -225,10 +135,10 @@ def main(argv):
                     name = m.group('name')
                     if name in objects:
                         raise RuntimeError(line)  # Name already defined
-                    object_literal = ObjectLiteral(name)
+                    object_literal = ObjectLiteral(name, objects)
                     objects[name] = object_literal
                     continue
-                m = re.match(r'\*\s*@property\s*{(?P<type>.*)}\s*(?P<prop>\S+)', line)
+                m = re.match(r'\*\s*@property\s*{(?P<type>.*?)}\s*(?P<prop>\S+)', line)
                 if m:
                     assert object_literal is not None
                     prop = m.group('prop')
@@ -238,18 +148,6 @@ def main(argv):
                     object_literal.prop_types[prop] = type
                     continue
                 continue
-            m = re.match(r'@exportClass\s+(?P<name>\S+)(?:\s+(?P<object_literal_name>\S+))?\Z', line)
-            if m:
-                name = m.group('name')
-                if name in objects:
-                    raise RuntimeError(line)  # Name already defined
-                object_literal_name = m.group('object_literal_name')
-                object_literal = objects[object_literal_name]
-                if not isinstance(object_literal, ObjectLiteral):
-                    raise RuntimeError(line)  # Undefined object literal
-                klass = Class(name, object_literal, objects)
-                objects[name] = klass
-                continue
             m = re.match(r'@exportProperty\s+(?P<prop>\S+)\Z', line)
             if m:
                 components = m.group('prop').split('.')
@@ -266,27 +164,24 @@ def main(argv):
                     objects[name] = symbol
                 symbol.props.add(prop)
                 continue
-            m = re.match(r'@exportSymbol\s+(?P<name>\S+)(?:\s+(?P<export_as>\S+))?\Z', line)
+            m = re.match(r'@exportSymbol\s+(?P<name>\S+)\Z', line)
             if m:
                 name = m.group('name')
                 if name in objects:
                     raise RuntimeError(line)  # Name already defined
-                export_as = m.group('export_as')
-                symbol = Symbol(name, True, export_as)
+                symbol = Symbol(name, True)
                 objects[name] = symbol
-                if not export_as:
-                    components = m.group('name').split('.')
-                    if re.match(r'[A-Z]', components[-1]):
-                        requires.add(name)
-                    elif len(components) > 1:
-                        requires.add('.'.join(components[:-1]))
+                components = m.group('name').split('.')
+                if re.match(r'[A-Z]', components[-1]):
+                    requires.add(name)
+                else:
+                    requires.add('.'.join(components[:-1]))
                 continue
             raise RuntimeError(line)
 
     objects = sorted(objects.values(), key=attrgetter('name'))
 
     if options.exports:
-        requires.update(obj.name for obj in objects if isinstance(obj, Class))
         if requires:
             for require in sorted(requires):
                 sys.stdout.write('goog.require(\'%s\');\n' % (require,))
@@ -309,6 +204,7 @@ def main(argv):
             else:
                 sys.stdout.write('var %s;\n' % (namespace,))
         for object_literal in object_literals:
+            sys.stdout.write(object_literal.typedef())
             sys.stdout.write(object_literal.extern())
 
     if options.typedef:

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

bin/pyglslunit.py

@@ -0,0 +1,121 @@
+#!/usr/bin/python
+
+from optparse import OptionParser
+import re
+import sys
+
+import pystache
+
+
+ESCAPE_SEQUENCE = {
+        '\\': '\\\\',
+        '\n': '\\n',
+        '\t': '\\t'
+        }
+
+
+def js_escape(s):
+    return ''.join(ESCAPE_SEQUENCE.get(c, c) for c in s)
+
+
+def glsl_compress(s, shortNames):
+    # strip leading whitespace
+    s = re.sub(r'\A\s+', '', s)
+    # strip trailing whitespace
+    s = re.sub(r'\s+\Z', '', s)
+    # strip multi-line comments
+    s = re.sub(r'/\*.*?\*/', '', s)
+    # strip single line comments
+    s = re.sub(r'//.*?\n', '', s)
+    # replace multiple whitespace with a single space
+    s = re.sub(r'\s+', ' ', s)
+    # remove whitespace between non-word tokens
+    s = re.sub(r'(\S)\s+([^\w])', r'\1\2', s)
+    s = re.sub(r'([^\w])\s+(\S)', r'\1\2', s)
+    # replace original names with short names
+    for originalName, shortName in shortNames.items():
+        s = s.replace(originalName, shortName)
+    return s
+
+
+def main(argv):
+    option_parser = OptionParser()
+    option_parser.add_option('--input')
+    option_parser.add_option('--output')
+    option_parser.add_option('--template')
+    options, args = option_parser.parse_args(argv[1:])
+
+    context = {}
+    nextShortName = ord('a')
+    shortNames = {}
+
+    common, vertex, fragment = [], [], []
+    attributes, uniforms, varyings = {}, {}, {}
+    block = None
+    for line in open(options.input, 'rU'):
+        if line.startswith('//!'):
+            m = re.match(r'//!\s+NAMESPACE=(\S+)\s*\Z', line)
+            if m:
+                context['namespace'] = m.group(1)
+                continue
+            m = re.match(r'//!\s+CLASS=(\S+)\s*\Z', line)
+            if m:
+                context['className'] = m.group(1)
+                continue
+            m = re.match(r'//!\s+COMMON\s*\Z', line)
+            if m:
+                block = common
+                continue
+            m = re.match(r'//!\s+VERTEX\s*\Z', line)
+            if m:
+                block = vertex
+                continue
+            m = re.match(r'//!\s+FRAGMENT\s*\Z', line)
+            if m:
+                block = fragment
+                continue
+        else:
+            if block is None:
+                assert line.rstrip() == ''
+            else:
+                block.append(line)
+            m = re.match(r'attribute\s+\S+\s+(\S+);\s*\Z', line)
+            if m:
+                attribute = m.group(1)
+                if attribute not in attributes:
+                    shortName = chr(nextShortName)
+                    nextShortName += 1
+                    attributes[attribute] = {'originalName': attribute, 'shortName': shortName}
+                    shortNames[attribute] = shortName
+            m = re.match(r'uniform\s+\S+\s+(\S+);\s*\Z', line)
+            if m:
+                uniform = m.group(1)
+                if uniform not in uniforms:
+                    shortName = chr(nextShortName)
+                    nextShortName += 1
+                    uniforms[uniform] = {'originalName': uniform, 'shortName': shortName}
+                    shortNames[uniform] = shortName
+            m = re.match(r'varying\s+\S+\s+(\S+);\s*\Z', line)
+            if m:
+                varying = m.group(1)
+                if varying not in varyings:
+                    shortName = chr(nextShortName)
+                    nextShortName += 1
+                    shortNames[varying] = shortName
+
+    context['getOriginalFragmentSource'] = js_escape(''.join(common + fragment))
+    context['getOriginalVertexSource'] = js_escape(''.join(common + vertex))
+    context['getFragmentSource'] = glsl_compress(''.join(common + fragment), shortNames)
+    context['getVertexSource'] = glsl_compress(''.join(common + vertex), shortNames)
+    context['getAttributes'] = [attributes[a] for a in sorted(attributes.keys())]
+    context['getUniforms'] = [uniforms[u] for u in sorted(uniforms.keys())]
+
+    if options.output and options.output != '-':
+        output = open(options.output, 'wb')
+    else:
+        output = sys.stdout
+    output.write(pystache.render(open(options.template, 'rb').read(), context))
+
+
+if __name__ == '__main__':
+    sys.exit(main(sys.argv))

build.py

@@ -4,7 +4,7 @@ from cStringIO import StringIO
 import gzip
 import json
 import os
-import os.path
+import glob
 import re
 import shutil
 import sys
@@ -14,78 +14,77 @@ 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'
 
-TEMPLATE_GLSL_COMPILER_JS = 'build/glsl-unit/bin/template_glsl_compiler.js'
-
 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')
@@ -93,8 +92,7 @@ EXPORTS = [path
 
 EXTERNAL_SRC = [
     'build/src/external/externs/types.js',
-    'build/src/external/src/exports.js',
-    'build/src/external/src/types.js']
+    'build/src/external/src/exports.js']
 
 EXAMPLES = [path
             for path in ifind('examples')
@@ -106,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'
@@ -142,8 +139,12 @@ SRC = [path
        if path.endswith('.js')
        if path not in SHADER_SRC]
 
-PLOVR_JAR = 'build/plovr-eba786b34df9.jar'
-PLOVR_JAR_MD5 = '20eac8ccc4578676511cf7ccbfc65100'
+LIBTESS_JS_SRC = [path
+                   for path in ifind('src/libtess.js')
+                   if path.endswith('.js')]
+
+PLOVR_JAR = 'build/plovr-81ed862.jar'
+PLOVR_JAR_MD5 = '1c752daaf11ad6220b298e7d2ee2b87d'
 
 PROJ4JS = 'build/proj4js/lib/proj4js-combined.js'
 PROJ4JS_ZIP = 'build/proj4js-1.1.0.zip'
@@ -151,27 +152,30 @@ PROJ4JS_ZIP_MD5 = '17caad64cf6ebc6e6fe62f292b134897'
 
 
 def report_sizes(t):
-    t.info('uncompressed: %d bytes', os.stat(t.name).st_size)
     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()
-    t.info('  compressed: %d bytes', len(stringio.getvalue()))
+    rawsize = os.stat(t.name).st_size
+    gzipsize = len(stringio.getvalue())
+    savings = '{0:.2%}'.format((rawsize - gzipsize)/float(rawsize))
+    t.info('uncompressed: %8d bytes', rawsize)
+    t.info('  compressed: %8d bytes, (saved %s)', gzipsize, savings)
 
 
 virtual('default', 'build')
 
 
-virtual('integration-test', 'lint', 'build', 'build-all',
-        'test', 'build-examples', 'check-examples', 'doc')
+virtual('integration-test', 'lint', 'jshint', 'build', 'build-all',
+        'test', 'build/examples/all.combined.js', 'check-examples', 'apidoc')
 
 
 virtual('build', 'build/ol.css', 'build/ol.js',
         'build/ol-simple.js', 'build/ol-whitespace.js')
 
 
-virtual('check', 'lint', 'build/ol.css', 'build/ol-all.js', 'test')
+virtual('check', 'lint', 'jshint', 'build/ol-all.js', 'test')
 
 
 virtual('todo', 'fixme')
@@ -183,35 +187,40 @@ def build_ol_css(t):
 
 
 @target('build/ol.js', PLOVR_JAR, SRC, EXTERNAL_SRC, SHADER_SRC,
-        'buildcfg/base.json', 'buildcfg/ol.json')
+        LIBTESS_JS_SRC, 'buildcfg/base.json', 'buildcfg/ol.json')
 def build_ol_js(t):
-    t.output('%(JAVA)s', '-jar', PLOVR_JAR, 'build', 'buildcfg/ol.json')
+    t.output('%(JAVA)s', '-server', '-XX:+TieredCompilation', '-jar',
+            PLOVR_JAR, 'build', 'buildcfg/ol.json')
     report_sizes(t)
 
 
 @target('build/ol-simple.js', PLOVR_JAR, SRC, INTERNAL_SRC, SHADER_SRC,
-        'buildcfg/base.json', 'buildcfg/ol.json', 'buildcfg/ol-simple.json')
+        LIBTESS_JS_SRC, 'buildcfg/base.json', 'buildcfg/ol.json',
+        'buildcfg/ol-simple.json')
 def build_ol_simple_js(t):
-    t.output('%(JAVA)s', '-jar', PLOVR_JAR, 'build', 'buildcfg/ol-simple.json')
+    t.output('%(JAVA)s', '-server', '-XX:+TieredCompilation', '-jar',
+            PLOVR_JAR, 'build', 'buildcfg/ol-simple.json')
     report_sizes(t)
 
 
 @target('build/ol-whitespace.js', PLOVR_JAR, SRC, INTERNAL_SRC, SHADER_SRC,
-        'buildcfg/base.json', 'buildcfg/ol.json',
+        LIBTESS_JS_SRC, 'buildcfg/base.json', 'buildcfg/ol.json',
         'buildcfg/ol-whitespace.json')
 def build_ol_whitespace_js(t):
-    t.output('%(JAVA)s', '-jar', PLOVR_JAR,
-             'build', 'buildcfg/ol-whitespace.json')
+    t.output('%(JAVA)s', '-server', '-XX:+TieredCompilation', '-jar',
+            PLOVR_JAR, 'build', 'buildcfg/ol-whitespace.json')
     report_sizes(t)
 
 
 virtual('build-all', 'build/ol-all.js')
 
 
-@target('build/ol-all.js', PLOVR_JAR, SRC, INTERNAL_SRC, SHADER_SRC,
-        'buildcfg/base.json', 'buildcfg/ol-all.json')
+@target('build/ol-all.js', PLOVR_JAR, SRC, EXTERNAL_SRC, INTERNAL_SRC,
+        SHADER_SRC, LIBTESS_JS_SRC, 'buildcfg/base.json',
+        'buildcfg/ol-all.json')
 def build_ol_all_js(t):
-    t.output('%(JAVA)s', '-jar', PLOVR_JAR, 'build', 'buildcfg/ol-all.json')
+    t.output('%(JAVA)s', '-server', '-XX:+TieredCompilation', '-jar',
+            PLOVR_JAR, 'build', 'buildcfg/ol-all.json')
 
 
 @target('build/src/external/externs/types.js', 'bin/generate-exports.py',
@@ -228,39 +237,32 @@ def build_src_external_src_exports_js(t):
              '--exports', 'src/objectliterals.jsdoc', EXPORTS)
 
 
-@target('build/src/external/src/types.js', 'bin/generate-exports.py',
-        'src/objectliterals.jsdoc')
-def build_src_external_src_types_js(t):
-    t.output('%(PYTHON)s', 'bin/generate-exports.py',
-             '--typedef', 'src/objectliterals.jsdoc')
-
-
-if os.path.exists(TEMPLATE_GLSL_COMPILER_JS):
-    for glsl_src in GLSL_SRC:
-        def shader_src_helper(glsl_src):
-            @target(glsl_src.replace('.glsl', 'shader.js'), glsl_src,
-                    'src/ol/webgl/shader.mustache')
-            def shader_src(t):
-                t.run('%(NODE)s', TEMPLATE_GLSL_COMPILER_JS,
-                      '--input', glsl_src,
-                      '--template', 'src/ol/webgl/shader.mustache',
-                      '--output', t.name)
-        shader_src_helper(glsl_src)
+for glsl_src in GLSL_SRC:
+    def shader_src_helper(glsl_src):
+        @target(glsl_src.replace('.glsl', 'shader.js'), glsl_src,
+                'src/ol/webgl/shader.mustache', 'bin/pyglslunit.py')
+        def shader_src(t):
+            t.run('%(PYTHON)s', 'bin/pyglslunit.py',
+                  '--input', glsl_src,
+                  '--template', 'src/ol/webgl/shader.mustache',
+                  '--output', t.name)
+    shader_src_helper(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,))
 
 
-@target('build/src/internal/src/requireall.js', SRC, SHADER_SRC)
+@target('build/src/internal/src/requireall.js', SRC, SHADER_SRC,
+        LIBTESS_JS_SRC)
 def build_src_internal_src_requireall_js(t):
     _build_require_list(t.dependencies, t.name)
 
@@ -277,7 +279,8 @@ def build_src_internal_types_js(t):
              '--typedef', 'src/objectliterals.jsdoc')
 
 
-virtual('build-examples', 'examples', EXAMPLES_COMBINED)
+virtual('build-examples', 'examples', 'build/examples/all.combined.js',
+        EXAMPLES_COMBINED)
 
 
 virtual('examples', 'examples/example-list.xml', EXAMPLES_JSON)
@@ -293,6 +296,20 @@ def examples_examples_list_js(t):
     t.run('%(PYTHON)s', 'bin/exampleparser.py', 'examples', 'examples')
 
 
+@target('build/examples/all.combined.js', 'build/examples/all.js', PLOVR_JAR,
+        SRC, INTERNAL_SRC, SHADER_SRC, LIBTESS_JS_SRC,
+        'buildcfg/base.json', 'build/examples/all.json')
+def build_examples_all_combined_js(t):
+    t.output('%(JAVA)s', '-server', '-XX:+TieredCompilation', '-jar',
+            PLOVR_JAR, 'build', 'buildcfg/examples-all.json')
+    report_sizes(t)
+
+
+@target('build/examples/all.js', EXAMPLES_SRC)
+def build_examples_all_js(t):
+    t.output('%(PYTHON)s', 'bin/combine-examples.py', t.dependencies)
+
+
 @rule(r'\Abuild/examples/(?P<id>.*).json\Z')
 def examples_star_json(name, match):
     def action(t):
@@ -304,18 +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/oli.js',
                 '../externs/proj4js.js',
                 '../externs/tilejson.js',
-                '../externs/w3c_device_sensor_event.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)
@@ -324,10 +343,11 @@ def examples_star_json(name, match):
 @rule(r'\Abuild/examples/(?P<id>.*).combined.js\Z')
 def examples_star_combined_js(name, match):
     def action(t):
-        t.output('%(JAVA)s', '-jar', PLOVR_JAR, 'build',
-                 'build/examples/%(id)s.json' % match.groupdict())
+        t.output('%(JAVA)s', '-server', '-XX:+TieredCompilation', '-jar',
+                PLOVR_JAR, 'build', 'build/examples/%(id)s.json' %
+                match.groupdict())
         report_sizes(t)
-    dependencies = [PLOVR_JAR, SRC, INTERNAL_SRC, SHADER_SRC,
+    dependencies = [PLOVR_JAR, SRC, INTERNAL_SRC, SHADER_SRC, LIBTESS_JS_SRC,
                     'buildcfg/base.json',
                     'examples/%(id)s.js' % match.groupdict(),
                     'build/examples/%(id)s.json' % match.groupdict()]
@@ -347,13 +367,15 @@ def serve_precommit(t):
 
 
 virtual('lint', 'build/lint-timestamp', 'build/lint-generated-timestamp',
-        'build/check-requires-timestamp', 'build/check-whitespace-timestamp')
+        'build/lint-libtess.js-timestamp', 'build/check-requires-timestamp',
+        'build/check-whitespace-timestamp')
 
 
 @target('build/lint-timestamp', SRC, EXAMPLES_SRC, SPEC, precious=True)
 def build_lint_src_timestamp(t):
     t.run('%(GJSLINT)s',
           '--jslint_error=all',
+          '--custom_jsdoc_tags=event,fires,todo,function',
           '--strict',
           t.newer(t.dependencies))
     t.touch()
@@ -370,6 +392,7 @@ def build_lint_generated_timestamp(t):
           '--jslint_error=all',
           # ignore error for max line length (for these auto-generated sources)
           '--disable=110',
+          '--custom_jsdoc_tags=todo',
           # for a complete list of error codes to allow, see
           # http://closure-linter.googlecode.com/svn/trunk/closure_linter/errors.py
           '--limited_doc_files=%s' % (','.join(limited_doc_files),),
@@ -378,6 +401,25 @@ def build_lint_generated_timestamp(t):
     t.touch()
 
 
+@target('build/lint-libtess.js-timestamp', LIBTESS_JS_SRC, precious=True)
+def build_lint_libtess_js_timestamp(t):
+    t.run('%(GJSLINT)s',
+          '--jslint_error=all',
+          '--disable=110',
+          '--strict',
+          t.newer(t.dependencies))
+    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
@@ -402,7 +444,7 @@ def _strip_comments(lines):
 
 
 @target('build/check-requires-timestamp', SRC, INTERNAL_SRC, EXTERNAL_SRC,
-        EXAMPLES_SRC, SHADER_SRC, SPEC)
+        EXAMPLES_SRC, SHADER_SRC, LIBTESS_JS_SRC, SPEC)
 def build_check_requires_timestamp(t):
     from zipfile import ZipFile
     unused_count = 0
@@ -416,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))
@@ -425,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:
@@ -456,17 +498,23 @@ def build_check_requires_timestamp(t):
             self.children = {}
 
         def _build_re(self, key):
-            if len(self.children) == 1:
+            if key == '*':
+                assert len(self.children) == 0
+                # We want to match `.doIt` but not `.SomeClass` or `.more.stuff`
+                return '(?=\\.[a-z]\\w*\\b(?!\\.))'
+            elif len(self.children) == 1:
                 child_key, child = next(self.children.iteritems())
-                child_re = '\\.' + child._build_re(child_key)
+                child_re = child._build_re(child_key)
+                if child_key != '*':
+                    child_re = '\\.' + child_re
                 if self.present:
                     return key + '(' + child_re + ')?'
                 else:
                     return key + child_re
             elif self.children:
-                children_re = '(?:\\.(?:' + '|'.join(
-                    self.children[k]._build_re(k)
-                    for k in sorted(self.children.keys())) + '))'
+                children_re = '(?:' + '|'.join(
+                    ('\\.' if k != '*' else '') + self.children[k]._build_re(k)
+                    for k in sorted(self.children.keys())) + ')'
                 if self.present:
                     return key + children_re + '?'
                 else:
@@ -484,7 +532,14 @@ def build_check_requires_timestamp(t):
             if component not in node.children:
                 node.children[component] = Node()
             node = node.children[component]
-        node.present = True
+        if component[0].islower():
+            # We've arrived at a namespace provide like `ol.foo`.
+            # In this case, we want to match uses like `ol.foo.doIt()` but
+            # not match things like `new ol.foo.SomeClass()`.
+            # For this purpose, we use the special wildcard key for the child.
+            node.children['*'] = Node()
+        else:
+            node.present = True
     provide_res = [child.build_re(key)
                    for key, child in root.children.iteritems()]
     missing_count = 0
@@ -495,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))
@@ -534,17 +589,21 @@ def build_check_requires_timestamp(t):
 
 
 @target('build/check-whitespace-timestamp', SRC, INTERNAL_SRC, EXTERNAL_SRC,
-        EXAMPLES_SRC, SPEC, EXPORTS, JSDOC_SRC,
+        EXAMPLES_SRC, SPEC, EXPORTS, JSDOC_SRC, LIBTESS_JS_SRC,
         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
@@ -574,34 +633,20 @@ def plovr_jar(t):
     t.info('downloaded %r', t.name)
 
 
-@target('gh-pages', 'host-examples', 'doc', phony=True)
-def gh_pages(t):
-    with t.tempdir() as tempdir:
-        t.run('%(GIT)s', 'clone', '--branch', 'gh-pages',
-              'git@github.com:openlayers/ol3.git', tempdir)
-        with t.chdir(tempdir):
-            t.rm_rf('%(BRANCH)s')
-        t.cp_r('build/gh-pages/%(BRANCH)s', tempdir + '/%(BRANCH)s')
-        with t.chdir(tempdir):
-            t.run('%(GIT)s', 'add', '--all', '%(BRANCH)s')
-            t.run('%(GIT)s', 'commit', '--message', 'Updated')
-            t.run('%(GIT)s', 'push', 'origin', 'gh-pages')
-
-
-virtual('doc', 'build/jsdoc-%(BRANCH)s-timestamp' % vars(variables))
+virtual('apidoc', 'build/jsdoc-%(BRANCH)s-timestamp' % vars(variables))
 
 
 @target('build/jsdoc-%(BRANCH)s-timestamp' % vars(variables), 'host-resources',
-        'build/src/external/src/exports.js', 'build/src/external/src/types.js',
-        SRC, SHADER_SRC, ifind('doc/template'))
+        'build/src/external/src/exports.js', SRC, SHADER_SRC,
+        ifind('apidoc/template'))
 def jsdoc_BRANCH_timestamp(t):
-    t.run('%(JSDOC)s', '-c', 'doc/conf.json', 'src', 'doc/index.md',
-          '-d', 'build/gh-pages/%(BRANCH)s/apidoc')
+    t.run('%(JSDOC)s', '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 = []
@@ -619,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()
@@ -634,53 +679,56 @@ def split_example_file(example, dst_dir):
 
 @target('host-resources', phony=True)
 def host_resources(t):
-    resources_dir = 'build/gh-pages/%(BRANCH)s/resources'
+    resources_dir = 'build/hosted/%(BRANCH)s/resources'
     t.rm_rf(resources_dir)
     t.cp_r('resources', resources_dir)
 
 
 @target('host-examples', 'build', 'host-resources', 'examples', phony=True)
 def host_examples(t):
-    examples_dir = 'build/gh-pages/%(BRANCH)s/examples'
-    build_dir = 'build/gh-pages/%(BRANCH)s/build'
+    examples_dir = 'build/hosted/%(BRANCH)s/examples'
+    build_dir = 'build/hosted/%(BRANCH)s/build'
+    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)
-    t.rm_rf('build/gh-pages/%(BRANCH)s/closure-library')
-    t.makedirs('build/gh-pages/%(BRANCH)s/closure-library')
-    with t.chdir('build/gh-pages/%(BRANCH)s/closure-library'):
+    t.rm_rf('build/hosted/%(BRANCH)s/closure-library')
+    t.makedirs('build/hosted/%(BRANCH)s/closure-library')
+    with t.chdir('build/hosted/%(BRANCH)s/closure-library'):
         t.run('%(JAR)s', 'xf', '../../../../' + PLOVR_JAR, 'closure')
         t.run('%(JAR)s', 'xf', '../../../../' + PLOVR_JAR, 'third_party')
-    t.rm_rf('build/gh-pages/%(BRANCH)s/ol')
-    t.makedirs('build/gh-pages/%(BRANCH)s/ol')
-    t.cp_r('src/ol', 'build/gh-pages/%(BRANCH)s/ol/ol')
+    t.rm_rf('build/hosted/%(BRANCH)s/ol')
+    t.makedirs('build/hosted/%(BRANCH)s/ol')
+    t.cp_r('src/ol', 'build/hosted/%(BRANCH)s/ol/ol')
     t.run('%(PYTHON)s', 'bin/closure/depswriter.py',
           '--root_with_prefix', 'src ../../../ol',
-          '--root', 'build/gh-pages/%(BRANCH)s/closure-library/closure/goog',
-          '--root_with_prefix', 'build/gh-pages/%(BRANCH)s/closure-library/'
+          '--root', 'build/hosted/%(BRANCH)s/closure-library/closure/goog',
+          '--root_with_prefix', 'build/hosted/%(BRANCH)s/closure-library/'
           'third_party ../../third_party',
-          '--output_file', 'build/gh-pages/%(BRANCH)s/build/ol-deps.js')
+          '--output_file', 'build/hosted/%(BRANCH)s/build/ol-deps.js')
 
 
 @target('check-examples', 'host-examples', phony=True)
 def check_examples(t):
-    examples = ['build/gh-pages/%(BRANCH)s/' + e for e in EXAMPLES]
+    examples = ['build/hosted/%(BRANCH)s/' + e
+                for e in EXAMPLES
+                if not open(e.replace('.html', '.js'), 'rU').readline().startswith('// NOCOMPILE')]
     all_examples = \
-        [e + '?mode=raw' for e in examples] + \
-        [e + '?mode=whitespace' for e in examples] + \
-        [e + '?mode=simple' for e in examples] + \
-        examples
+        [e + '?mode=advanced' for e in examples]
     for example in all_examples:
         t.run('%(PHANTOMJS)s', 'bin/check-example.js', example)
 
@@ -707,7 +755,7 @@ virtual('test-deps', INTERNAL_SRC, PROJ4JS, 'build/test/requireall.js')
 
 @target('test', 'test-deps', phony=True)
 def test(t):
-    t.run('%(PHANTOMJS)s', 'test/mocha-phantomjs.coffee', 'test/ol.html')
+    t.run('%(PHANTOMJS)s', 'test/mocha-phantomjs.js', 'test/ol.html')
 
 
 @target('fixme', phony=True)
@@ -755,5 +803,50 @@ def check_dependencies(t):
     print 'For certain targets all above programs need to be present.'
 
 
+@target('help')
+def display_help(t):
+    print '''
+build.py - The OpenLayers 3 build script.
+
+Usage:
+  ./build.py [options] [target]                         (on Unix-based machines)
+  <python-executable.exe> build.py [options] [target]   (on Windows machines)
+
+There is one option:
+  -c               - Cleans up the repository from previous builds.
+
+The most common targets are:
+  serve            - Serves files through plovr, usually on port 9810.
+  lint             - Runs gjslint on all sourcefiles to enforce specific syntax.
+  build            - Builds singlefile versions of OpenLayers JavaScript and
+                     CSS. This is also the default build target which runs when
+                     no target is specified.
+  test             - Runs the testsuite and displays the results.
+  check            - Runs the lint-target, builds some OpenLayers files, and
+                     then runs test. Many developers call this target often
+                     while working on the code.
+  help             - Shows this help.
+
+Other less frequently used targets are:
+  apidoc           - Builds the API-Documentation using JSDoc3.
+  integration-test - Builds all examples in various modes and usually takes a
+                     long time to finish. This target calls the following
+                     targets: lint, build, build-all, test, build-examples,
+                     check-examples and apidoc.
+  reallyclean      - Remove untracked files from the repository.
+  checkdeps        - Checks whether all required development software is
+                     installed on your machine.
+  fixme            - Will print a list of parts of the code that are marked
+                     with either TODO or FIXME.
+  todo             - 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.
+
+If no target is given, the build-target will be executed.
+
+The above list is not complete, please see the source code for not-mentioned
+and only seldomly called targets.
+    '''
+
 if __name__ == '__main__':
     main()

buildcfg/base.json

@@ -6,7 +6,10 @@
     "accessControls": "ERROR",
     "ambiguousFunctionDecl": "ERROR",
     "checkDebuggerStatement": "WARNING",
+    "checkEventfulObjectDisposal": "ERROR",
+    "checkProvides": "ERROR",
     "checkRegExp": "ERROR",
+    "checkStructDictInheritance": "ERROR",
     "checkTypes": "ERROR",
     "checkVars": "ERROR",
     "const": "ERROR",
@@ -14,20 +17,25 @@
     "deprecated": "ERROR",
     "duplicate": "ERROR",
     "duplicateMessage": "ERROR",
+    "es3": "ERROR",
     "es5Strict": "ERROR",
     "externsValidation": "ERROR",
     "fileoverviewTags": "ERROR",
     "globalThis": "ERROR",
     "internetExplorerChecks": "ERROR",
     "invalidCasts": "ERROR",
+    "misplacedTypeAnnotation": "ERROR",
     "missingProperties": "ERROR",
     "nonStandardJsDocs": "ERROR",
     "strictModuleDepCheck": "ERROR",
+    "suspiciousCode": "ERROR",
     "typeInvalidation": "ERROR",
+    "tweakValidation": "ERROR",
     "undefinedNames": "ERROR",
     "undefinedVars": "ERROR",
     "unknownDefines": "ERROR",
     "uselessCode": "ERROR",
+    "violatedModuleDep": "ERROR",
     "visibility": "ERROR"
   },
 
@@ -39,13 +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/w3c_device_sensor_event.js"
+    "../externs/topojson.js",
+    "../externs/vbarray.js"
   ],
 
   "level": "VERBOSE",
@@ -99,7 +108,8 @@
     "goog.debug.logRecordSerializer",
     "goog.debug.makeWhitespaceVisible",
     "goog.debug.normalizeErrorObject",
-    "goog.debug.reflect"
+    "goog.debug.reflect",
+    "goog.log"
   ]
 
 }

buildcfg/examples-all.json

@@ -0,0 +1,21 @@
+{
+    "externs": [
+        "//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/vbarray.js"
+    ], 
+    "id": "simple", 
+    "inherits": "base.json", 
+    "inputs": [
+        "../build/examples/all.js", 
+        "../build/src/internal/src/types.js"
+    ]
+}

buildcfg/ol-all.json

@@ -3,21 +3,21 @@
   "id": "ol-all",
 
   "externs": [
-    "//json.js",
     "../build/src/external/externs/types.js",
     "../externs/bingmaps.js",
+    "../externs/closure-compiler.js",
     "../externs/geojson.js",
     "../externs/oli.js",
     "../externs/proj4js.js",
     "../externs/tilejson.js",
-    "../externs/w3c_device_sensor_event.js"
+    "../externs/topojson.js",
+    "../externs/vbarray.js"
   ],
 
   "inherits": "base.json",
 
   "inputs": [
     "../build/src/internal/src/requireall.js",
-    "../build/src/internal/src/types.js",
     "../build/src/external/src/exports.js"
   ]
 

buildcfg/ol-simple.json

@@ -13,20 +13,22 @@
   "id": "ol-simple",
 
   "externs": [
-    "//json.js",
+    "../build/src/external/externs/types.js",
     "../externs/bingmaps.js",
+    "../externs/closure-compiler.js",
     "../externs/geojson.js",
     "../externs/oli.js",
     "../externs/proj4js.js",
     "../externs/tilejson.js",
-    "../externs/w3c_device_sensor_event.js"
+    "../externs/topojson.js",
+    "../externs/vbarray.js"
   ],
 
   "inherits": "ol.json",
 
   "inputs": [
     "../build/src/internal/src/requireall.js",
-    "../build/src/internal/src/types.js"
+    "../build/src/external/src/exports.js"
   ],
 
   "mode": "SIMPLE",

buildcfg/ol-whitespace.json

@@ -14,28 +14,28 @@
   "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/w3c_device_sensor_event.js"
+    "../externs/topojson.js",
+    "../externs/vbarray.js"
   ],
 
   "inherits": "ol.json",
 
   "inputs": [
-    "../build/src/internal/src/requireall.js",
-    "../build/src/internal/src/types.js"
+    "../build/src/internal/src/requireall.js"
   ],
 
   "mode": "WHITESPACE",
 
-  // Note: we can't have a (function(){%output%})() output wrapper with
-  // WHITESPACE and SIMPLE modes. See this link for explanations:
-  // https://groups.google.com/forum/#!topic/plovr/gQyZEa2NpsU
-  "output-wrapper": "%output%",
+  "output-wrapper": [
+    "var CLOSURE_NO_DEPS = true;\n",
+    "%output%"
+  ],
 
   "pretty-print": true
 }

buildcfg/ol.json

@@ -13,24 +13,24 @@
   "css-output-file": "../build/ol.css",
 
   "externs": [
-    "//json.js",
     "../build/src/external/externs/types.js",
     "../externs/bingmaps.js",
+    "../externs/closure-compiler.js",
     "../externs/geojson.js",
     "../externs/oli.js",
     "../externs/proj4js.js",
     "../externs/tilejson.js",
-    "../externs/w3c_device_sensor_event.js"
+    "../externs/topojson.js",
+    "../externs/vbarray.js"
   ],
 
   "inherits": "base.json",
 
   "inputs": [
-    "../build/src/external/src/exports.js",
-    "../build/src/external/src/types.js"
+    "../build/src/external/src/exports.js"
   ],
 
-  "output-wrapper": "(function(){%output%})();",
+  "output-wrapper": "// OpenLayers 3. see http://ol3js.org/\n(function(){%output%})();",
 
   "paths": [
     "../src"

css/ol.css

@@ -1,17 +1,19 @@
 .ol-attribution {
   position: absolute;
   text-align: right;
-  color: #eeeeee;
   bottom: 0;
   right: 0;
-  background: rgba(0,60,136,0.3);
-  font-family: 'Lucida Grande',Verdana,Geneva,Lucida,Arial,Helvetica,sans-serif;
   padding: 6px;
+  color: #000000;
+  color: rgba(238,238,238,1);
+  background: rgba(0,60,136,0.3);
 }
 .ol-attribution a {
-  color: white;
   text-decoration: none;
+  color: #7b98bc;
+  color: rgba(255,255,255,1);
 }
+
 .ol-attribution ul {
   margin: 0;
   padding: 0;
@@ -26,54 +28,12 @@
 .ol-attribution li:not(:last-child):after {
   content: "\2003";
 }
-.ol-dragbox {
-  position: absolute;
-  border: 2px solid red;
-}
-.ol-full-screen {
-  background: rgba(255,255,255,0.4);
-  border-radius: 4px;
-  padding: 2px;
-  position: absolute;
-  right: 8px;
-  top: 8px;
-}
-@media print {
-  .ol-full-screen {
-    display: none;
-  }
-}
-.ol-full-screen a {
-  background: rgba(0,60,136,0.5);
-  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;
-}
-a.ol-full-screen-false:after {
-  content: "\2194";
-}
-a.ol-full-screen-true:after {
-  content: "\00d7";
+.ol-attribution-bing-tos {
+  float:right;
+  padding-top: 2px;
+  white-space: nowrap;
 }
 
-.ol-full-screen div {
-  border-radius: 2px;
-}
-.ol-full-screen div a {
-  border-radius: 2px;
-}
-.ol-full-screen a:hover {
-  background: rgba(0,60,136,0.7);
-}
 .ol-logo {
   bottom: 0;
   left: 0;
@@ -82,6 +42,7 @@ a.ol-full-screen-true:after {
 }
 .ol-logo ul {
   margin: 0;
+  padding: 0;
 }
 .ol-logo ul li {
   display: inline;
@@ -91,10 +52,11 @@ a.ol-full-screen-true:after {
 .ol-mouse-position {
   top: 8px;
   right: 8px;
-  position: absolute;  
+  position: absolute;
 }
 
 .ol-scale-line {
+  background: #95b9e6;
   background: rgba(0,60,136,0.3);
   border-radius: 4px;
   bottom: 8px;
@@ -107,7 +69,6 @@ a.ol-full-screen-true:after {
   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;
@@ -124,81 +85,201 @@ a.ol-full-screen-true:after {
   user-select: none;
   -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;
-  background: rgba(255,255,255,0.4);
+  background-color: #eee;
+  background-color: rgba(255,255,255,0.4);
   border-radius: 4px;
   padding: 2px;
 }
+.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;
-  background: rgba(0,60,136,0.5);
+  height: 1.375em;
+  width: 1.375em;
+  line-height: .4em;
+  background-color: #7b98bc;
+  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 {
-  background: rgba(0,60,136,0.7);
+.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;
+  background-color: #4c6079;
+  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-in:before {
-  content: "+";
-}
-
 .ol-zoom-out {
   border-radius: 0 0 2px 2px;
 }
-.ol-zoom-out:before {
-  content: "\2212";
+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;
+  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-thumb {
   position: absolute;
   display: block;
-  padding: 0;
-  margin: 2px;
+  background: #7b98bc;
   background: rgba(0,60,136,0.5);
   border-radius: 2px;
   outline: none;
   overflow: hidden;
-  height: 20px;
-  width: 24px;
+  cursor: pointer;
+
+  font-size: 1.14em;
+  height: 1em;
+  width: 1.375em;
+  margin: 3px;
+  padding: 0;
+}
+.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;
 }

doc/conf.json

@@ -1,30 +0,0 @@
-{
-    "opts": {
-        "recurse": true,
-        "template": "doc/template",
-        "tutorials": "doc/tutorials"
-    },
-    "tags": {
-        "allowUnknownTags": true
-    },
-    "source": {
-        "includePattern": ".+\\.js(doc)?$",
-        "excludePattern": "(^|\\/|\\\\)_"
-    },
-    "plugins": [
-        "plugins/markdown",
-        "doc/plugins/inheritdoc",
-        "doc/plugins/exports"
-    ],
-    "markdown": {
-        "parser": "gfm"
-    },
-    "templates": {
-        "cleverLinks": false,
-        "monospaceLinks": false,
-        "default": {
-            "outputSourceFiles": true
-        }
-    },
-    "jsVersion": 180
-}

doc/index.hbs

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

doc/index.md

@@ -1,17 +0,0 @@
-Finding your way round
-----------------------
-See the class list to the right and especially take a look at {@link ol.Map} and {@link ol.layer.Layer} because those are the central objects.
-
-In general every use of OpenLayers starts by initializing a map, then adding the required layers. Controls and interactions can be added to change the behavior of the map.
-
-Projections
------------
-A {@link ol.Projection} defines which point on earth is represented by a pair of coordinates. Coordinates within OpenLayers can be used in various projections where some common projections are always supported, others can be used via Proj4js.
-
-Maps and Layers
----------------
-A map in OpenLayers is essentially a staple of layers that is viewed from the top. Layers are responsible for retieving data and displaying it.
-
-Contributing
-------------
-See CONTRIBUTING.md for instructions on building and tesing OpenLayers. The file does also describe how to commit your changes to OpenLayers.

doc/plugins/exports.js

@@ -1,94 +0,0 @@
-/*
- * 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.
- */
-
-var api = [];
-
-function collectExports(source) {
-  var i, ii, symbol, property;
-  var syms = source.match(/goog\.exportSymbol\([^\)]*\)/g);
-  if (syms) {
-    i = 0; ii = syms.length;
-    for (; i < ii; ++i) {
-      symbol = syms[i].match(/'([^']*)'/)[1];
-      api.push(symbol);
-    }
-  }
-  var props = source.match(/goog\.exportProperty\([^\)]*\)/g);
-  if (props) {
-    i = 0; ii = props.length;
-    for (; i < ii; ++i) {
-      property = props[i].match(/[^,]*,[^,]*,\r?\n? *([^\)]*)\)/)[1]
-          .replace('.prototype.', '#');
-      api.push(property);
-    }
-  }
-}
-
-var encoding = env.conf.encoding || 'utf8';
-var fs = require('jsdoc/fs');
-collectExports(fs.readFileSync('build/src/external/src/exports.js', encoding));
-collectExports(fs.readFileSync('build/src/external/src/types.js', encoding));
-
-
-exports.handlers = {
-  
-  beforeParse: function(e) {
-    if (/\.js$/.test(e.filename)) {
-      collectExports(e.source);
-    }
-  },
-  
-  newDoclet: function(e) {
-    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) {
-        for (var i = 0, ii = params.length; i < ii; ++i) {
-          names = params[i].type.names;
-          if (names) {
-            for (var j = 0, jj=names.length; j < jj; ++j) {
-              name = names[j];
-              if (api.indexOf(name) === -1) {
-                api.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);
-          }
-        }
-      }
-    }
-  }
-}
-
-exports.nodeVisitor = {
-
-  visitNode: function(node, e, parser, currentSourceName) {
-    // filter out non-API symbols before the addDocletRef finisher is called
-    e.finishers.unshift(filter);
-  }
-};

doc/quickstart.hbs

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

doc/tutorials/concepts.hbs

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

doc/tutorials/index.hbs

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

doc/tutorials/ol3.json

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

doc/tutorials/ol3.md

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

examples/accessible.html

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

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

examples/animation.html

@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="chrome=1">
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
     <link rel="stylesheet" href="../resources/layout.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
@@ -14,13 +15,7 @@
     <div class="navbar navbar-inverse navbar-fixed-top">
       <div class="navbar-inner">
         <div class="container">
-          <a class="brand" href="./">OpenLayers 3 Examples</a>
-          <ul class="nav pull-right">
-            <li><iframe class="github-watch-button" src="http://ghbtns.com/github-btn.html?user=openlayers&repo=ol3&type=watch&count=true"
-  allowtransparency="true" frameborder="0" scrolling="0" height="20" width="90"></iframe></li>
-            <li><a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-hashtags="openlayers">&nbsp;</a></li>
-            <li><div class="g-plusone-wrapper"><div class="g-plusone" data-size="medium" data-annotation="none"></div></div></li>
-          </ul>
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
         </div>
       </div>
     </div>
@@ -48,7 +43,7 @@
 
       <div class="row-fluid">
 
-        <div class="span4">
+        <div class="span12">
           <h4 id="title">Animation example</h4>
           <p id="shortdesc">Demonstrates animated pan, zoom, and rotation.</p>
           <div id="docs">
@@ -61,8 +56,9 @@
 
     </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=animation" type="text/javascript"></script>
-    <script src="../resources/social-links.js" type="text/javascript"></script>
 
   </body>
 </html>

examples/animation.js

@@ -1,9 +1,8 @@
 goog.require('ol.Map');
-goog.require('ol.RendererHints');
 goog.require('ol.View2D');
 goog.require('ol.animation');
 goog.require('ol.easing');
-goog.require('ol.layer.TileLayer');
+goog.require('ol.layer.Tile');
 goog.require('ol.proj');
 goog.require('ol.source.OSM');
 
@@ -23,12 +22,12 @@ var view = new ol.View2D({
 
 var map = new ol.Map({
   layers: [
-    new ol.layer.TileLayer({
+    new ol.layer.Tile({
       preload: 4,
       source: new ol.source.OSM()
     })
   ],
-  renderers: ol.RendererHints.createFromQueryData(),
+  renderer: exampleNS.getRendererFromQueryString(),
   target: 'map',
   view: view
 });
@@ -39,7 +38,7 @@ rotateLeft.addEventListener('click', function() {
     duration: 2000,
     rotation: -4 * Math.PI
   });
-  map.addPreRenderFunction(rotateLeft);
+  map.beforeRender(rotateLeft);
 }, false);
 var rotateRight = document.getElementById('rotate-right');
 rotateRight.addEventListener('click', function() {
@@ -47,7 +46,7 @@ rotateRight.addEventListener('click', function() {
     duration: 2000,
     rotation: 4 * Math.PI
   });
-  map.addPreRenderFunction(rotateRight);
+  map.beforeRender(rotateRight);
 }, false);
 
 
@@ -55,9 +54,9 @@ var panToLondon = document.getElementById('pan-to-london');
 panToLondon.addEventListener('click', function() {
   var pan = ol.animation.pan({
     duration: 2000,
-    source: view.getCenter()
+    source: /** @type {ol.Coordinate} */ (view.getCenter())
   });
-  map.addPreRenderFunction(pan);
+  map.beforeRender(pan);
   view.setCenter(london);
 }, false);
 
@@ -66,9 +65,9 @@ elasticToMoscow.addEventListener('click', function() {
   var pan = ol.animation.pan({
     duration: 2000,
     easing: ol.easing.elastic,
-    source: view.getCenter()
+    source: /** @type {ol.Coordinate} */ (view.getCenter())
   });
-  map.addPreRenderFunction(pan);
+  map.beforeRender(pan);
   view.setCenter(moscow);
 }, false);
 
@@ -77,9 +76,9 @@ bounceToIstanbul.addEventListener('click', function() {
   var pan = ol.animation.pan({
     duration: 2000,
     easing: ol.easing.bounce,
-    source: view.getCenter()
+    source: /** @type {ol.Coordinate} */ (view.getCenter())
   });
-  map.addPreRenderFunction(pan);
+  map.beforeRender(pan);
   view.setCenter(istanbul);
 }, false);
 
@@ -89,7 +88,7 @@ spinToRome.addEventListener('click', function() {
   var start = +new Date();
   var pan = ol.animation.pan({
     duration: duration,
-    source: view.getCenter(),
+    source: /** @type {ol.Coordinate} */ (view.getCenter()),
     start: start
   });
   var rotate = ol.animation.rotate({
@@ -97,7 +96,7 @@ spinToRome.addEventListener('click', function() {
     rotation: 2 * Math.PI,
     start: start
   });
-  map.addPreRenderFunctions([pan, rotate]);
+  map.beforeRender(pan, rotate);
   view.setCenter(rome);
 }, false);
 
@@ -107,7 +106,7 @@ flyToBern.addEventListener('click', function() {
   var start = +new Date();
   var pan = ol.animation.pan({
     duration: duration,
-    source: view.getCenter(),
+    source: /** @type {ol.Coordinate} */ (view.getCenter()),
     start: start
   });
   var bounce = ol.animation.bounce({
@@ -115,7 +114,7 @@ flyToBern.addEventListener('click', function() {
     resolution: 4 * view.getResolution(),
     start: start
   });
-  map.addPreRenderFunctions([pan, bounce]);
+  map.beforeRender(pan, bounce);
   view.setCenter(bern);
 }, false);
 
@@ -125,7 +124,7 @@ spiralToMadrid.addEventListener('click', function() {
   var start = +new Date();
   var pan = ol.animation.pan({
     duration: duration,
-    source: view.getCenter(),
+    source: /** @type {ol.Coordinate} */ (view.getCenter()),
     start: start
   });
   var bounce = ol.animation.bounce({
@@ -138,6 +137,6 @@ spiralToMadrid.addEventListener('click', function() {
     rotation: -4 * Math.PI,
     start: start
   });
-  map.addPreRenderFunctions([pan, bounce, rotate]);
+  map.beforeRender(pan, bounce, rotate);
   view.setCenter(madrid);
 }, false);

examples/bind-input.html

@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="chrome=1">
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
     <link rel="stylesheet" href="../resources/layout.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
@@ -14,13 +15,7 @@
     <div class="navbar navbar-inverse navbar-fixed-top">
       <div class="navbar-inner">
         <div class="container">
-          <a class="brand" href="./">OpenLayers 3 Examples</a>
-          <ul class="nav pull-right">
-            <li><iframe class="github-watch-button" src="http://ghbtns.com/github-btn.html?user=openlayers&repo=ol3&type=watch&count=true"
-  allowtransparency="true" frameborder="0" scrolling="0" height="20" width="90"></iframe></li>
-            <li><a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-hashtags="openlayers">&nbsp;</a></li>
-            <li><div class="g-plusone-wrapper"><div class="g-plusone" data-size="medium" data-annotation="none"></div></div></li>
-          </ul>
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
         </div>
       </div>
     </div>
@@ -40,6 +35,11 @@
           <p id="shortdesc">Demonstrates two-way binding of HTML input elements to OpenLayers objects.</p>
           <div id="docs">
             <p>See the <a href="bind-input.js" target="_blank">bind-input.js source</a> to see how this is done.</p>
+            <div id="no-webgl" class="alert alert-warning" style="display: none">
+              <h4>Warning!</h4>
+              A browser that supports <a href="http://get.webgl.org/">WebGL</a> is required to change the
+              <strong>hue</strong>, <strong>saturation</strong>, <strong>contrast</strong> and <strong>brightness</strong>.
+            </div>
           </div>
           <div id="tags">input, bind, openstreetmap</div>
         </div>
@@ -54,13 +54,13 @@
               <label>opacity</label>
               <input id="opacity" type="range" min="0" max="1" step="0.01"/>
               <label>hue</label>
-              <input id="hue" type="range" min="-3.141592653589793" max="3.141592653589793" step="0.01"/>
+              <input id="hue" class="webgl" type="range" min="-3.141592653589793" max="3.141592653589793" step="0.01"/>
               <label>saturation</label>
-              <input id="saturation" type="range" min="0" max="5" step="0.01"/>
+              <input id="saturation" class="webgl" type="range" min="0" max="5" step="0.01"/>
               <label>contrast</label>
-              <input id="contrast" type="range" min="0" max="2" step="0.01"/>
+              <input id="contrast" class="webgl" type="range" min="0" max="2" step="0.01"/>
               <label>brightness</label>
-              <input id="brightness" type="range" min="-1" max="1" step="0.01"/>
+              <input id="brightness" class="webgl" type="range" min="-1" max="1" step="0.01"/>
             </fieldset>
           </form>
         </div>
@@ -81,8 +81,9 @@
 
     </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=bind-input" type="text/javascript"></script>
-    <script src="../resources/social-links.js" type="text/javascript"></script>
 
   </body>
 </html>

examples/bind-input.js

@@ -1,44 +1,65 @@
+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.TileLayer');
+goog.require('ol.layer.Tile');
 goog.require('ol.source.OSM');
 
-var layer = new ol.layer.TileLayer({
+
+if (!ol.BrowserFeature.HAS_WEBGL) {
+  var inputs = document.getElementsByClassName('webgl');
+  for (var i = 0, len = inputs.length; i < len; i++) {
+    inputs[i].disabled = true;
+  }
+  var info = document.getElementById('no-webgl');
+  /**
+   * display warning message
+   */
+  info.style.display = '';
+}
+
+var layer = new ol.layer.Tile({
   source: new ol.source.OSM()
 });
+
+var view = new ol.View2D({
+  center: [0, 0],
+  zoom: 2
+});
+
 var map = new ol.Map({
   layers: [layer],
-  renderers: ol.RendererHints.createFromQueryData(),
+  renderer: exampleNS.getRendererFromQueryString(),
   target: 'map',
-  view: new ol.View2D({
-    center: [0, 0],
-    zoom: 2
-  })
+  view: view
 });
 
 var visible = new ol.dom.Input(document.getElementById('visible'));
 visible.bindTo('checked', layer, 'visible');
 
 var opacity = new ol.dom.Input(document.getElementById('opacity'));
-opacity.bindTo('value', layer, 'opacity');
+opacity.bindTo('value', layer, 'opacity')
+    .transform(parseFloat, String);
 
 var hue = new ol.dom.Input(document.getElementById('hue'));
-hue.bindTo('value', layer, 'hue');
+hue.bindTo('value', layer, 'hue')
+    .transform(parseFloat, String);
 
 var saturation = new ol.dom.Input(document.getElementById('saturation'));
-saturation.bindTo('value', layer, 'saturation');
+saturation.bindTo('value', layer, 'saturation')
+    .transform(parseFloat, String);
 
 var contrast = new ol.dom.Input(document.getElementById('contrast'));
-contrast.bindTo('value', layer, 'contrast');
+contrast.bindTo('value', layer, 'contrast')
+    .transform(parseFloat, String);
 
 var brightness = new ol.dom.Input(document.getElementById('brightness'));
-brightness.bindTo('value', layer, 'brightness');
+brightness.bindTo('value', layer, 'brightness')
+    .transform(parseFloat, String);
 
 
 var rotation = new ol.dom.Input(document.getElementById('rotation'));
-rotation.bindTo('value', map.getView(), 'rotation');
+rotation.bindTo('value', view, 'rotation').transform(parseFloat, String);
 
 var resolution = new ol.dom.Input(document.getElementById('resolution'));
-resolution.bindTo('value', map.getView(), 'resolution');
+resolution.bindTo('value', view, 'resolution').transform(parseFloat, String);

examples/bing-maps.html

@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="chrome=1">
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
     <link rel="stylesheet" href="../resources/layout.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
@@ -14,13 +15,7 @@
     <div class="navbar navbar-inverse navbar-fixed-top">
       <div class="navbar-inner">
         <div class="container">
-          <a class="brand" href="./">OpenLayers 3 Examples</a>
-          <ul class="nav pull-right">
-            <li><iframe class="github-watch-button" src="http://ghbtns.com/github-btn.html?user=openlayers&repo=ol3&type=watch&count=true"
-  allowtransparency="true" frameborder="0" scrolling="0" height="20" width="90"></iframe></li>
-            <li><a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-hashtags="openlayers">&nbsp;</a></li>
-            <li><div class="g-plusone-wrapper"><div class="g-plusone" data-size="medium" data-annotation="none"></div></div></li>
-          </ul>
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
         </div>
       </div>
     </div>
@@ -35,13 +30,15 @@
             <option value="Aerial">Aerial</option>
             <option value="AerialWithLabels" selected>Aerial with labels</option>
             <option value="Road">Road</option>
+            <option value="collinsBart">Collins Bart</option>
+            <option value="ordnanceSurvey">Ordnance Survey</option>
           </select>
         </div>
       </div>
 
       <div class="row-fluid">
 
-        <div class="span4">
+        <div class="span12">
           <h4 id="title">Bing Maps example</h4>
           <p id="shortdesc">Example of a Bing Maps layer.</p>
           <div id="docs">
@@ -55,8 +52,8 @@
     </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=bing-maps" type="text/javascript"></script>
-    <script src="../resources/social-links.js" type="text/javascript"></script>
 
   </body>
 </html>

examples/bing-maps.js

@@ -1,36 +1,42 @@
 goog.require('ol.Map');
-goog.require('ol.RendererHints');
 goog.require('ol.View2D');
-goog.require('ol.layer.TileLayer');
-goog.require('ol.proj');
+goog.require('ol.layer.Tile');
 goog.require('ol.source.BingMaps');
 
 
-var styles = ['Road', 'Aerial', 'AerialWithLabels'];
+var styles = [
+  'Road',
+  'Aerial',
+  'AerialWithLabels',
+  'collinsBart',
+  'ordnanceSurvey'
+];
 var layers = [];
-for (var i = 0; i < styles.length; ++i) {
-  layers.push(new ol.layer.TileLayer({
+var i, ii;
+for (i = 0, ii = styles.length; i < ii; ++i) {
+  layers.push(new ol.layer.Tile({
     visible: false,
     preload: Infinity,
     source: new ol.source.BingMaps({
-      key: 'AlQLZ0-5yk301_ESrmNLma3LYxEKNSg7w-e_knuRfyYFtld-UFvXVs38NOulku3Q',
-      style: styles[i]
+      key: 'Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3',
+      imagerySet: styles[i]
     })
   }));
 }
 var map = new ol.Map({
   layers: layers,
-  renderers: ol.RendererHints.createFromQueryData(),
+  renderer: exampleNS.getRendererFromQueryString(),
   target: 'map',
   view: new ol.View2D({
-    center: ol.proj.transform([-123.1, 49.25], 'EPSG:4326', 'EPSG:3857'),
-    zoom: 8
+    center: [-6655.5402445057125, 6709968.258934638],
+    zoom: 13
   })
 });
 
 $('#layer-select').change(function() {
   var style = $(this).find(':selected').val();
-  for (var i = 0; i < layers.length; ++i) {
+  var i, ii;
+  for (i = 0, ii = layers.length; i < ii; ++i) {
     layers[i].setVisible(styles[i] == style);
   }
 });

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,13 +23,7 @@
     <div class="navbar navbar-inverse navbar-fixed-top">
       <div class="navbar-inner">
         <div class="container">
-          <a class="brand" href="./">OpenLayers 3 Examples</a>
-          <ul class="nav pull-right">
-            <li><iframe class="github-watch-button" src="http://ghbtns.com/github-btn.html?user=openlayers&repo=ol3&type=watch&count=true"
-  allowtransparency="true" frameborder="0" scrolling="0" height="20" width="90"></iframe></li>
-            <li><a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-hashtags="openlayers">&nbsp;</a></li>
-            <li><div class="g-plusone-wrapper"><div class="g-plusone" data-size="medium" data-annotation="none"></div></div></li>
-          </ul>
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
         </div>
       </div>
     </div>
@@ -38,6 +33,11 @@
       <div class="row-fluid">
         <div class="span12">
           <div id="map" class="map"></div>
+
+          <div id="no-webgl" class="alert alert-error" style="display: none">
+            This example requires a browser that supports <a href="http://get.webgl.org/">WebGL</a>.
+          </div>
+
           <div class="btn-group">
             <button id="increase-brightness"><i class="icon-plus"></i></button>
             <button id="reset-brightness">Brightness</button>
@@ -53,7 +53,7 @@
 
       <div class="row-fluid">
 
-        <div class="span4">
+        <div class="span12">
           <h4 id="title">Brightness/contrast example</h4>
           <p id="shortdesc">Example of brightness/contrast control on the client (WebGL only).</p>
           <div id="docs">
@@ -66,8 +66,9 @@
 
     </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=brightness-contrast" type="text/javascript"></script>
-    <script src="../resources/social-links.js" type="text/javascript"></script>
 
   </body>
 </html>

examples/brightness-contrast.js

@@ -1,65 +1,75 @@
+goog.require('ol.BrowserFeature');
 goog.require('ol.Map');
-goog.require('ol.RendererHint');
 goog.require('ol.View2D');
-goog.require('ol.layer.TileLayer');
-goog.require('ol.source.MapQuestOpenAerial');
+goog.require('ol.layer.Tile');
+goog.require('ol.source.MapQuest');
 
 
-var layer = new ol.layer.TileLayer({
-  source: new ol.source.MapQuestOpenAerial()
-});
-
-var map = new ol.Map({
-  layers: [layer],
-  renderer: ol.RendererHint.WEBGL,
-  target: 'map',
-  view: new ol.View2D({
-    center: [0, 0],
-    zoom: 2
-  })
-});
-
-var increaseBrightness = document.getElementById('increase-brightness');
-var resetBrightness = document.getElementById('reset-brightness');
-var decreaseBrightness = document.getElementById('decrease-brightness');
-
 function setResetBrightnessButtonHTML() {
   resetBrightness.innerHTML = 'Brightness (' +
       layer.getBrightness().toFixed(3) + ')';
 }
-setResetBrightnessButtonHTML();
-
-increaseBrightness.addEventListener('click', function() {
-  layer.setBrightness(Math.min(layer.getBrightness() + 0.125, 1));
-  setResetBrightnessButtonHTML();
-}, false);
-resetBrightness.addEventListener('click', function() {
-  layer.setBrightness(0);
-  setResetBrightnessButtonHTML();
-}, false);
-decreaseBrightness.addEventListener('click', function() {
-  layer.setBrightness(Math.max(layer.getBrightness() - 0.125, -1));
-  setResetBrightnessButtonHTML();
-}, false);
-
-var increaseContrast = document.getElementById('increase-contrast');
-var resetContrast = document.getElementById('reset-contrast');
-var decreaseContrast = document.getElementById('decrease-contrast');
 
 function setResetContrastButtonHTML() {
   resetContrast.innerHTML = 'Contrast (' + layer.getContrast().toFixed(3) + ')';
 }
-setResetContrastButtonHTML();
 
-increaseContrast.addEventListener('click', function() {
-  layer.setContrast(layer.getContrast() + 0.125);
+if (!ol.BrowserFeature.HAS_WEBGL) {
+  var info = document.getElementById('no-webgl');
+  /**
+   * display error message
+   */
+  info.style.display = '';
+} else {
+  var layer = new ol.layer.Tile({
+    source: new ol.source.MapQuest({layer: 'sat'})
+  });
+
+  var map = new ol.Map({
+    layers: [layer],
+    renderer: 'webgl',
+    target: 'map',
+    view: new ol.View2D({
+      center: [0, 0],
+      zoom: 2
+    })
+  });
+
+  var increaseBrightness = document.getElementById('increase-brightness');
+  var resetBrightness = document.getElementById('reset-brightness');
+  var decreaseBrightness = document.getElementById('decrease-brightness');
+
+  setResetBrightnessButtonHTML();
+
+  increaseBrightness.addEventListener('click', function() {
+    layer.setBrightness(Math.min(layer.getBrightness() + 0.125, 1));
+    setResetBrightnessButtonHTML();
+  }, false);
+  resetBrightness.addEventListener('click', function() {
+    layer.setBrightness(0);
+    setResetBrightnessButtonHTML();
+  }, false);
+  decreaseBrightness.addEventListener('click', function() {
+    layer.setBrightness(Math.max(layer.getBrightness() - 0.125, -1));
+    setResetBrightnessButtonHTML();
+  }, false);
+
+  var increaseContrast = document.getElementById('increase-contrast');
+  var resetContrast = document.getElementById('reset-contrast');
+  var decreaseContrast = document.getElementById('decrease-contrast');
+
   setResetContrastButtonHTML();
-}, false);
-resetContrast.addEventListener('click', function() {
-  layer.setContrast(1);
-  setResetContrastButtonHTML();
-}, false);
-decreaseContrast.addEventListener('click', function() {
-  layer.setContrast(Math.max(layer.getContrast() - 0.125, 0));
-  setResetContrastButtonHTML();
-}, false);
+
+  increaseContrast.addEventListener('click', function() {
+    layer.setContrast(layer.getContrast() + 0.125);
+    setResetContrastButtonHTML();
+  }, false);
+  resetContrast.addEventListener('click', function() {
+    layer.setContrast(1);
+    setResetContrastButtonHTML();
+  }, false);
+  decreaseContrast.addEventListener('click', function() {
+    layer.setContrast(Math.max(layer.getContrast() - 0.125, 0));
+    setResetContrastButtonHTML();
+  }, false);
+}

examples/canvas-tiles.html

@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="chrome=1">
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
     <link rel="stylesheet" href="../resources/layout.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
@@ -14,13 +15,7 @@
     <div class="navbar navbar-inverse navbar-fixed-top">
       <div class="navbar-inner">
         <div class="container">
-          <a class="brand" href="./">OpenLayers 3 Examples</a>
-          <ul class="nav pull-right">
-            <li><iframe class="github-watch-button" src="http://ghbtns.com/github-btn.html?user=openlayers&repo=ol3&type=watch&count=true"
-  allowtransparency="true" frameborder="0" scrolling="0" height="20" width="90"></iframe></li>
-            <li><a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-hashtags="openlayers">&nbsp;</a></li>
-            <li><div class="g-plusone-wrapper"><div class="g-plusone" data-size="medium" data-annotation="none"></div></div></li>
-          </ul>
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
         </div>
       </div>
     </div>
@@ -35,7 +30,7 @@
 
       <div class="row-fluid">
 
-        <div class="span4">
+        <div class="span12">
           <h4 id="title">Canvas tiles example</h4>
           <p id="shortdesc">Renders tiles with coordinates for debugging.</p>
           <div id="docs">
@@ -49,8 +44,9 @@
 
     </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=canvas-tiles" type="text/javascript"></script>
-    <script src="../resources/social-links.js" type="text/javascript"></script>
 
   </body>
 </html>

examples/canvas-tiles.js

@@ -1,20 +1,19 @@
 goog.require('ol.Map');
-goog.require('ol.RendererHints');
 goog.require('ol.View2D');
-goog.require('ol.layer.TileLayer');
+goog.require('ol.layer.Tile');
 goog.require('ol.proj');
-goog.require('ol.source.DebugTileSource');
 goog.require('ol.source.OSM');
+goog.require('ol.source.TileDebug');
 goog.require('ol.tilegrid.XYZ');
 
 
 var map = new ol.Map({
   layers: [
-    new ol.layer.TileLayer({
+    new ol.layer.Tile({
       source: new ol.source.OSM()
     }),
-    new ol.layer.TileLayer({
-      source: new ol.source.DebugTileSource({
+    new ol.layer.Tile({
+      source: new ol.source.TileDebug({
         projection: 'EPSG:3857',
         tileGrid: new ol.tilegrid.XYZ({
           maxZoom: 22
@@ -22,7 +21,7 @@ var map = new ol.Map({
       })
     })
   ],
-  renderers: 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,11 +4,12 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="chrome=1">
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
     <link rel="stylesheet" href="../resources/layout.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
     <style type="text/css">
-      .zoom-extent {
+      .rotate-north {
         position: absolute;
         top: 65px;
         left: 8px;
@@ -16,30 +17,32 @@
         border-radius: 4px;
         padding: 2px;
       }
-      .zoom-extent a {
+      .ol-touch .rotate-north {
+        top: 80px;
+      }
+      .rotate-north a {
         display: block;
-        margin: 1px;
-        padding: 0;
         color: white;
-        font-size: 18px;
+        font-size: 16px;
         font-family: 'Lucida Grande',Verdana,Geneva,Lucida,Arial,Helvetica,sans-serif;
         font-weight: bold;
+        margin: 1px;
         text-decoration: none;
         text-align: center;
+        border-radius: 2px;
         height: 22px;
         width: 22px;
-        line-height: 19px;
         background: rgba(0,60,136,0.5);
       }
-      .zoom-extent a:hover {
+      .ol-touch .rotate-north a {
+        font-size: 20px;
+        height: 30px;
+        width: 30px;
+        line-height: 26px;
+      }
+      .rotate-north a:hover {
         background: rgba(0,60,136,0.7);
       }
-      .zoom-to {
-        border-radius: 2px 2px 0 0;
-      }
-      .zoom-to:before {
-        content: "E";
-      }
     </style>
     <title>ol3 custom controls example</title>
   </head>
@@ -48,13 +51,7 @@
     <div class="navbar navbar-inverse navbar-fixed-top">
       <div class="navbar-inner">
         <div class="container">
-          <a class="brand" href="./">OpenLayers 3 Examples</a>
-          <ul class="nav pull-right">
-            <li><iframe class="github-watch-button" src="http://ghbtns.com/github-btn.html?user=openlayers&repo=ol3&type=watch&count=true"
-  allowtransparency="true" frameborder="0" scrolling="0" height="20" width="90"></iframe></li>
-            <li><a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-hashtags="openlayers">&nbsp;</a></li>
-            <li><div class="g-plusone-wrapper"><div class="g-plusone" data-size="medium" data-annotation="none"></div></div></li>
-          </ul>
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
         </div>
       </div>
     </div>
@@ -68,15 +65,14 @@
       </div>
 
       <div class="row-fluid">
-        <div class="span4">
+        <div class="span12">
           <h4 id="title">Custom controls</h4>
           <p id="shortdesc">This example shows how to create custom controls.</p>
           <div id="docs">
             <p>
-              This example creates a "zoom to extent" button.
+              This example creates a "rotate to north" button.
               See the <a href="custom-controls.js" target="_blank">custom-controls.js
               source</a> to see how this is done.
-              Per default, the zoom extent control use the map projection extent.
             </p>
           </div>
           <div id="tags">
@@ -86,8 +82,9 @@
       </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=custom-controls" type="text/javascript"></script>
-    <script src="../resources/social-links.js" type="text/javascript"></script>
 
   </body>
 

examples/custom-controls.js

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

examples/d3.html

@@ -0,0 +1,54 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="chrome=1">
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
+    <link rel="stylesheet" href="../resources/layout.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
+    <title>d3 integration 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">d3 integration example</h4>
+          <p id="shortdesc">Example of using ol3 and d3 together.</p>
+          <div id="docs">
+            <p>The example loads TopoJSON geometries and uses d3 (<code>d3.geo.path</code>) to render these geometries to a canvas element that is then used as the image of an ol3 image layer.</p>
+            <p>See the <a href="d3.js" target="_blank">d3.js source</a> to see how this is done.</p>
+          </div>
+          <div id="tags">d3</div>
+        </div>
+
+      </div>
+
+    </div>
+
+    <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="../resources/example-behaviour.js" type="text/javascript"></script>
+    <script src="loader.js?id=d3" type="text/javascript"></script>
+
+  </body>
+</html>

examples/d3.js

@@ -0,0 +1,96 @@
+// NOCOMPILE
+// this example uses d3 for which we don't have an externs file.
+goog.require('ol');
+goog.require('ol.Map');
+goog.require('ol.View2D');
+goog.require('ol.extent');
+goog.require('ol.layer.Image');
+goog.require('ol.layer.Tile');
+goog.require('ol.proj');
+goog.require('ol.source.ImageCanvas');
+goog.require('ol.source.Stamen');
+
+
+var map = new ol.Map({
+  layers: [
+    new ol.layer.Tile({
+      source: new ol.source.Stamen({
+        layer: 'watercolor'
+      })
+    })
+  ],
+  target: 'map',
+  view: new ol.View2D({
+    center: ol.proj.transform([-97, 38], 'EPSG:4326', 'EPSG:3857'),
+    zoom: 4
+  })
+});
+
+
+/**
+ * Load the topojson data and create an ol.layer.Image for that data.
+ */
+d3.json('data/topojson/us.json', function(error, us) {
+  var features = topojson.feature(us, us.objects.counties);
+
+  /**
+   * This function uses d3 to render the topojson features to a canvas.
+   * @param {ol.Extent} extent Extent.
+   * @param {number} resolution Resolution.
+   * @param {number} pixelRatio Pixel ratio.
+   * @param {ol.Size} size Size.
+   * @param {ol.proj.Projection} projection Projection.
+   * @return {HTMLCanvasElement}
+   */
+  var canvasFunction = function(extent, resolution, pixelRatio,
+      size, projection) {
+    var canvasWidth = size[0];
+    var canvasHeight = size[1];
+
+    var canvas = d3.select(document.createElement('canvas'));
+    canvas.attr('width', canvasWidth).attr('height', canvasHeight);
+
+    var context = canvas.node().getContext('2d');
+
+    var d3Projection = d3.geo.mercator().scale(1).translate([0, 0]);
+    var d3Path = d3.geo.path().projection(d3Projection);
+
+    var pixelBounds = d3Path.bounds(features);
+    var pixelBoundsWidth = pixelBounds[1][0] - pixelBounds[0][0];
+    var pixelBoundsHeight = pixelBounds[1][1] - pixelBounds[0][1];
+
+    var geoBounds = d3.geo.bounds(features);
+    var geoBoundsLeftBottom = ol.proj.transform(
+        geoBounds[0], 'EPSG:4326', projection);
+    var geoBoundsRightTop = ol.proj.transform(
+        geoBounds[1], 'EPSG:4326', projection);
+    var geoBoundsWidth = geoBoundsRightTop[0] - geoBoundsLeftBottom[0];
+    if (geoBoundsWidth < 0) {
+      geoBoundsWidth += ol.extent.getWidth(projection.getExtent());
+    }
+    var geoBoundsHeight = geoBoundsRightTop[1] - geoBoundsLeftBottom[1];
+
+    var widthResolution = geoBoundsWidth / pixelBoundsWidth;
+    var heightResolution = geoBoundsHeight / pixelBoundsHeight;
+    var r = Math.max(widthResolution, heightResolution);
+    var scale = r / (resolution / pixelRatio);
+
+    var center = ol.proj.transform(ol.extent.getCenter(extent),
+        projection, 'EPSG:4326');
+    d3Projection.scale(scale).center(center)
+        .translate([canvasWidth / 2, canvasHeight / 2]);
+    d3Path = d3Path.projection(d3Projection).context(context);
+    d3Path(features);
+    context.stroke();
+
+    return canvas[0][0];
+  };
+
+  var layer = new ol.layer.Image({
+    source: new ol.source.ImageCanvas({
+      canvasFunction: canvasFunction,
+      projection: 'EPSG:3857'
+    })
+  });
+  map.addLayer(layer);
+});

examples/data/WMTSCapabilities.xml

@@ -179,140 +179,6 @@
 			<ResourceURL format="image/png" template="http://maps4.wien.gv.at/wmts/beschriftung/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.png" resourceType="tile"/>
 			<ResourceURL format="image/png" template="http://maps.wien.gv.at/wmts/beschriftung/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.png" resourceType="tile"/>
 		</Layer>
-		<TileMatrixSet>
-			<ows:Identifier>viennagis31256</ows:Identifier>
-			<ows:BoundingBox crs="urn:ogc:def:crs:EPSG::31256">
-				<ows:LowerCorner>-11500 330500</ows:LowerCorner>
-				<ows:UpperCorner>18500 354000</ows:UpperCorner>
-			</ows:BoundingBox>
-			<ows:SupportedCRS>urn:ogc:def:crs:EPSG::31256</ows:SupportedCRS>
-			<TileMatrix>
-				<ows:Identifier>0</ows:Identifier>
-				<ScaleDenominator>500000.0</ScaleDenominator>
-				<TopLeftCorner>355000.0 -13500.0</TopLeftCorner>
-				<TileWidth>256</TileWidth>
-				<TileHeight>256</TileHeight>
-				<MatrixWidth>2</MatrixWidth>
-				<MatrixHeight>1</MatrixHeight>
-			</TileMatrix>
-			<TileMatrix>
-				<ows:Identifier>1</ows:Identifier>
-				<ScaleDenominator>250000.0</ScaleDenominator>
-				<TopLeftCorner>355000.0 -13500.0</TopLeftCorner>
-				<TileWidth>256</TileWidth>
-				<TileHeight>256</TileHeight>
-				<MatrixWidth>3</MatrixWidth>
-				<MatrixHeight>2</MatrixHeight>
-			</TileMatrix>
-			<TileMatrix>
-				<ows:Identifier>2</ows:Identifier>
-				<ScaleDenominator>125000.0</ScaleDenominator>
-				<TopLeftCorner>355000.0 -13500.0</TopLeftCorner>
-				<TileWidth>256</TileWidth>
-				<TileHeight>256</TileHeight>
-				<MatrixWidth>5</MatrixWidth>
-				<MatrixHeight>3</MatrixHeight>
-			</TileMatrix>
-			<TileMatrix>
-				<ows:Identifier>3</ows:Identifier>
-				<ScaleDenominator>64000.0</ScaleDenominator>
-				<TopLeftCorner>355000.0 -13500.0</TopLeftCorner>
-				<TileWidth>256</TileWidth>
-				<TileHeight>256</TileHeight>
-				<MatrixWidth>9</MatrixWidth>
-				<MatrixHeight>6</MatrixHeight>
-			</TileMatrix>
-			<TileMatrix>
-				<ows:Identifier>4</ows:Identifier>
-				<ScaleDenominator>32000.0</ScaleDenominator>
-				<TopLeftCorner>355000.0 -13500.0</TopLeftCorner>
-				<TileWidth>256</TileWidth>
-				<TileHeight>256</TileHeight>
-				<MatrixWidth>17</MatrixWidth>
-				<MatrixHeight>12</MatrixHeight>
-			</TileMatrix>
-			<TileMatrix>
-				<ows:Identifier>5</ows:Identifier>
-				<ScaleDenominator>16000.0</ScaleDenominator>
-				<TopLeftCorner>355000.0 -13500.0</TopLeftCorner>
-				<TileWidth>256</TileWidth>
-				<TileHeight>256</TileHeight>
-				<MatrixWidth>33</MatrixWidth>
-				<MatrixHeight>24</MatrixHeight>
-			</TileMatrix>
-			<TileMatrix>
-				<ows:Identifier>6</ows:Identifier>
-				<ScaleDenominator>8000.0</ScaleDenominator>
-				<TopLeftCorner>355000.0 -13500.0</TopLeftCorner>
-				<TileWidth>256</TileWidth>
-				<TileHeight>256</TileHeight>
-				<MatrixWidth>66</MatrixWidth>
-				<MatrixHeight>47</MatrixHeight>
-			</TileMatrix>
-			<TileMatrix>
-				<ows:Identifier>7</ows:Identifier>
-				<ScaleDenominator>5000.0</ScaleDenominator>
-				<TopLeftCorner>355000.0 -13500.0</TopLeftCorner>
-				<TileWidth>256</TileWidth>
-				<TileHeight>256</TileHeight>
-				<MatrixWidth>105</MatrixWidth>
-				<MatrixHeight>74</MatrixHeight>
-			</TileMatrix>
-			<TileMatrix>
-				<ows:Identifier>8</ows:Identifier>
-				<ScaleDenominator>4000.0</ScaleDenominator>
-				<TopLeftCorner>355000.0 -13500.0</TopLeftCorner>
-				<TileWidth>256</TileWidth>
-				<TileHeight>256</TileHeight>
-				<MatrixWidth>132</MatrixWidth>
-				<MatrixHeight>93</MatrixHeight>
-			</TileMatrix>
-			<TileMatrix>
-				<ows:Identifier>9</ows:Identifier>
-				<ScaleDenominator>3000.0</ScaleDenominator>
-				<TopLeftCorner>355000.0 -13500.0</TopLeftCorner>
-				<TileWidth>256</TileWidth>
-				<TileHeight>256</TileHeight>
-				<MatrixWidth>175</MatrixWidth>
-				<MatrixHeight>124</MatrixHeight>
-			</TileMatrix>
-			<TileMatrix>
-				<ows:Identifier>10</ows:Identifier>
-				<ScaleDenominator>2000.0</ScaleDenominator>
-				<TopLeftCorner>355000.0 -13500.0</TopLeftCorner>
-				<TileWidth>256</TileWidth>
-				<TileHeight>256</TileHeight>
-				<MatrixWidth>263</MatrixWidth>
-				<MatrixHeight>185</MatrixHeight>
-			</TileMatrix>
-			<TileMatrix>
-				<ows:Identifier>11</ows:Identifier>
-				<ScaleDenominator>1500.0</ScaleDenominator>
-				<TopLeftCorner>355000.0 -13500.0</TopLeftCorner>
-				<TileWidth>256</TileWidth>
-				<TileHeight>256</TileHeight>
-				<MatrixWidth>350</MatrixWidth>
-				<MatrixHeight>247</MatrixHeight>
-			</TileMatrix>
-			<TileMatrix>
-				<ows:Identifier>12</ows:Identifier>
-				<ScaleDenominator>1000.0</ScaleDenominator>
-				<TopLeftCorner>355000.0 -13500.0</TopLeftCorner>
-				<TileWidth>256</TileWidth>
-				<TileHeight>256</TileHeight>
-				<MatrixWidth>525</MatrixWidth>
-				<MatrixHeight>370</MatrixHeight>
-			</TileMatrix>
-			<TileMatrix>
-				<ows:Identifier>13</ows:Identifier>
-				<ScaleDenominator>500.0</ScaleDenominator>
-				<TopLeftCorner>355000.0 -13500.0</TopLeftCorner>
-				<TileWidth>256</TileWidth>
-				<TileHeight>256</TileHeight>
-				<MatrixWidth>1049</MatrixWidth>
-				<MatrixHeight>739</MatrixHeight>
-			</TileMatrix>
-		</TileMatrixSet>
 		<TileMatrixSet>
 			<!-- -180 85.05112878 -->
 			<ows:Identifier>google3857</ows:Identifier>

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/data/kml/lines.kml

@@ -1,275 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<kml xmlns="http://earth.google.com/kml/2.0">
-  <Document>
-    <name>KML Samples</name>
-    <open>1</open>
-    <description>Unleash your creativity with the help of these examples!</description>
-    <Style id="downArrowIcon">
-      <IconStyle>
-        <Icon>
-          <href>http://maps.google.com/mapfiles/kml/pal4/icon28.png</href>
-        </Icon>
-      </IconStyle>
-    </Style>
-    <Style id="globeIcon">
-      <IconStyle>
-        <Icon>
-          <href>http://maps.google.com/mapfiles/kml/pal3/icon19.png</href>
-        </Icon>
-      </IconStyle>
-      <LineStyle>
-        <width>2</width>
-      </LineStyle>
-    </Style>
-    <Style id="transPurpleLineGreenPoly">
-      <LineStyle>
-        <color>7fff00ff</color>
-        <width>4</width>
-      </LineStyle>
-      <PolyStyle>
-        <color>7f00ff00</color>
-      </PolyStyle>
-    </Style>
-    <Style id="yellowLineGreenPoly">
-      <LineStyle>
-        <color>7f00ffff</color>
-        <width>4</width>
-      </LineStyle>
-      <PolyStyle>
-        <color>7f00ff00</color>
-      </PolyStyle>
-    </Style>
-    <Style id="thickBlackLine">
-      <LineStyle>
-        <color>87000000</color>
-        <width>10</width>
-      </LineStyle>
-    </Style>
-    <Style id="redLineBluePoly">
-      <LineStyle>
-        <color>ff0000ff</color>
-      </LineStyle>
-      <PolyStyle>
-        <color>ffff0000</color>
-      </PolyStyle>
-    </Style>
-    <Style id="blueLineRedPoly">
-      <LineStyle>
-        <color>ffff0000</color>
-      </LineStyle>
-      <PolyStyle>
-        <color>ff0000ff</color>
-      </PolyStyle>
-    </Style>
-    <Style id="transRedPoly">
-      <LineStyle>
-        <width>1.5</width>
-      </LineStyle>
-      <PolyStyle>
-        <color>7d0000ff</color>
-      </PolyStyle>
-    </Style>
-    <Style id="transBluePoly">
-      <LineStyle>
-        <width>1.5</width>
-      </LineStyle>
-      <PolyStyle>
-        <color>7dff0000</color>
-      </PolyStyle>
-    </Style>
-    <Style id="transGreenPoly">
-      <LineStyle>
-        <width>1.5</width>
-      </LineStyle>
-      <PolyStyle>
-        <color>7d00ff00</color>
-      </PolyStyle>
-    </Style>
-    <Style id="transYellowPoly">
-      <LineStyle>
-        <width>1.5</width>
-      </LineStyle>
-      <PolyStyle>
-        <color>7d00ffff</color>
-      </PolyStyle>
-    </Style>
-    <Style id="noDrivingDirections">
-      <BalloonStyle>
-        <text><![CDATA[
-          <b>$[name]</b>
-          <br /><br />
-          $[description]
-        ]]></text>
-      </BalloonStyle>
-    </Style>
-    <Folder>
-      <name>Paths</name>
-      <visibility>0</visibility>
-      <description>Examples of paths. Note that the tessellate tag is by default
-        set to 0. If you want to create tessellated lines, they must be authored
-        (or edited) directly in KML.</description>
-      <Placemark>
-        <name>Tessellated</name>
-        <visibility>0</visibility>
-        <description><![CDATA[If the <tessellate> tag has a value of 1, the line will contour to the underlying terrain]]></description>
-        <LookAt>
-          <longitude>-112.0822680013139</longitude>
-          <latitude>36.09825589333556</latitude>
-          <altitude>0</altitude>
-          <range>2889.145007690472</range>
-          <tilt>62.04855796276328</tilt>
-          <heading>103.8120432044965</heading>
-        </LookAt>
-        <LineString>
-          <tessellate>1</tessellate>
-          <coordinates> -112.0814237830345,36.10677870477137,0
-            -112.0870267752693,36.0905099328766,0 </coordinates>
-        </LineString>
-      </Placemark>
-      <Placemark>
-        <name>Untessellated</name>
-        <visibility>0</visibility>
-        <description><![CDATA[If the <tessellate> tag has a value of 0, the line follow a simple straight-line path from point to point]]></description>
-        <LookAt>
-          <longitude>-112.0822680013139</longitude>
-          <latitude>36.09825589333556</latitude>
-          <altitude>0</altitude>
-          <range>2889.145007690472</range>
-          <tilt>62.04855796276328</tilt>
-          <heading>103.8120432044965</heading>
-        </LookAt>
-        <LineString>
-          <tessellate>0</tessellate>
-          <coordinates> -112.080622229595,36.10673460007995,0
-            -112.085242575315,36.09049598612422,0 </coordinates>
-        </LineString>
-      </Placemark>
-      <Placemark>
-        <name>Absolute</name>
-        <visibility>0</visibility>
-        <description>Transparent purple line</description>
-        <LookAt>
-          <longitude>-112.2719329043177</longitude>
-          <latitude>36.08890633450894</latitude>
-          <altitude>0</altitude>
-          <range>2569.386744398339</range>
-          <tilt>44.60763714063257</tilt>
-          <heading>-106.8161545998597</heading>
-        </LookAt>
-        <styleUrl>#transPurpleLineGreenPoly</styleUrl>
-        <LineString>
-          <tessellate>1</tessellate>
-          <altitudeMode>absolute</altitudeMode>
-          <coordinates> -112.265654928602,36.09447672602546,2357
-            -112.2660384528238,36.09342608838671,2357
-            -112.2668139013453,36.09251058776881,2357
-            -112.2677826834445,36.09189827357996,2357
-            -112.2688557510952,36.0913137941187,2357
-            -112.2694810717219,36.0903677207521,2357
-            -112.2695268555611,36.08932171487285,2357
-            -112.2690144567276,36.08850916060472,2357
-            -112.2681528815339,36.08753813597956,2357
-            -112.2670588176031,36.08682685262568,2357
-            -112.2657374587321,36.08646312301303,2357 </coordinates>
-        </LineString>
-      </Placemark>
-      <Placemark>
-        <name>Absolute Extruded</name>
-        <visibility>0</visibility>
-        <description>Transparent green wall with yellow outlines</description>
-        <LookAt>
-          <longitude>-112.2643334742529</longitude>
-          <latitude>36.08563154742419</latitude>
-          <altitude>0</altitude>
-          <range>4451.842204068102</range>
-          <tilt>44.61038665812578</tilt>
-          <heading>-125.7518698668815</heading>
-        </LookAt>
-        <styleUrl>#yellowLineGreenPoly</styleUrl>
-        <LineString>
-          <extrude>1</extrude>
-          <tessellate>1</tessellate>
-          <altitudeMode>absolute</altitudeMode>
-          <coordinates> -112.2550785337791,36.07954952145647,2357
-            -112.2549277039738,36.08117083492122,2357
-            -112.2552505069063,36.08260761307279,2357
-            -112.2564540158376,36.08395660588506,2357
-            -112.2580238976449,36.08511401044813,2357
-            -112.2595218489022,36.08584355239394,2357
-            -112.2608216347552,36.08612634548589,2357
-            -112.262073428656,36.08626019085147,2357
-            -112.2633204928495,36.08621519860091,2357
-            -112.2644963846444,36.08627897945274,2357
-            -112.2656969554589,36.08649599090644,2357 </coordinates>
-        </LineString>
-      </Placemark>
-      <Placemark>
-        <name>Relative</name>
-        <visibility>0</visibility>
-        <description>Black line (10 pixels wide), height tracks terrain</description>
-        <LookAt>
-          <longitude>-112.2580438551384</longitude>
-          <latitude>36.1072674824385</latitude>
-          <altitude>0</altitude>
-          <range>2927.61105910266</range>
-          <tilt>44.61324882043339</tilt>
-          <heading>4.947421249553717</heading>
-        </LookAt>
-        <styleUrl>#thickBlackLine</styleUrl>
-        <LineString>
-          <tessellate>1</tessellate>
-          <altitudeMode>relativeToGround</altitudeMode>
-          <coordinates> -112.2532845153347,36.09886943729116,645
-            -112.2540466121145,36.09919570465255,645
-            -112.254734666947,36.09984998366178,645
-            -112.255493345654,36.10051310621746,645
-            -112.2563157098468,36.10108441943419,645
-            -112.2568033076439,36.10159722088088,645
-            -112.257494011321,36.10204323542867,645
-            -112.2584106072308,36.10229131995655,645
-            -112.2596588987972,36.10240001286358,645
-            -112.2610581199487,36.10213176873407,645
-            -112.2626285262793,36.10157011437219,645 </coordinates>
-        </LineString>
-      </Placemark>
-      <Placemark>
-        <name>Relative Extruded</name>
-        <visibility>0</visibility>
-        <description>Opaque blue walls with red outline, height tracks terrain</description>
-        <LookAt>
-          <longitude>-112.2683594333433</longitude>
-          <latitude>36.09884362144909</latitude>
-          <altitude>0</altitude>
-          <range>2184.193522571467</range>
-          <tilt>44.60855445139561</tilt>
-          <heading>-72.24271551768405</heading>
-        </LookAt>
-        <styleUrl>#redLineBluePoly</styleUrl>
-        <LineString>
-          <extrude>1</extrude>
-          <tessellate>1</tessellate>
-          <altitudeMode>relativeToGround</altitudeMode>
-          <coordinates> -112.2656634181359,36.09445214722695,630
-            -112.2652238941097,36.09520916122063,630
-            -112.2645079986395,36.09580763864907,630
-            -112.2638827428817,36.09628572284063,630
-            -112.2635746835406,36.09679275951239,630
-            -112.2635711822407,36.09740038871899,630
-            -112.2640296531825,36.09804913435539,630
-            -112.264327720538,36.09880337400301,630
-            -112.2642436562271,36.09963644790288,630
-            -112.2639148687042,36.10055381117246,630
-            -112.2626894973474,36.10149062823369,630 </coordinates>
-        </LineString>
-      </Placemark>
-		<Placemark>
-			<name>Blue Icon</name>
-			<description>Just another blue icon.</description>
-			<styleUrl>data/kml/styles.kml#blueIcons</styleUrl>
-			<Point>
-				<coordinates>-112.292238941097,36.09520916122063,630</coordinates>
-			</Point>
-		</Placemark>
-    </Folder>
-  </Document>
-</kml>

examples/data/kml/styles.kml

@@ -1,21 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!--
-
-This file contains styles referenced by other KML files in this project.
-http://kml-samples.googlecode.com/svn/trunk/kml/Style/styles.kml
-
--->  
-<kml xmlns="http://earth.google.com/kml/2.1">
-<Document id="globalStyles">
-
-  <Style id="blueIcons">
-    <IconStyle>
-      <color>ffff0000</color>
-      <Icon>
-        <href>http://maps.google.com/mapfiles/kml/shapes/sunny.png</href>
-      </Icon>  
-    </IconStyle>
-  </Style>
-
-</Document>
-</kml>

examples/data/sld/countries.sld

@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<sld:StyledLayerDescriptor xmlns="http://www.opengis.net/sld" xmlns:sld="http://www.opengis.net/sld" xmlns:ogc="http://www.opengis.net/ogc" xmlns:gml="http://www.opengis.net/gml" version="1.0.0">
+  <sld:NamedLayer>
+    <sld:Name>countries</sld:Name>
+    <sld:UserStyle>
+      <sld:Name>countries</sld:Name>
+      <sld:Title>A sample style for countries</sld:Title>
+      <sld:IsDefault>1</sld:IsDefault>
+      <sld:Abstract>A sample style for countries</sld:Abstract>
+      <sld:FeatureTypeStyle>
+        <sld:Name>name</sld:Name>
+        <sld:Rule>
+          <sld:Name>Sample</sld:Name>
+          <sld:Title>Sample</sld:Title>
+          <sld:PolygonSymbolizer>
+            <sld:Fill>
+              <sld:CssParameter name="fill">#ff0000</sld:CssParameter>
+              <sld:CssParameter name="fill-opacity">0.6</sld:CssParameter>
+            </sld:Fill>
+            <sld:Stroke>
+              <sld:CssParameter name="stroke">#00FF00</sld:CssParameter>
+              <sld:CssParameter name="stroke-opacity">0.5</sld:CssParameter>
+              <sld:CssParameter name="stroke-width">4</sld:CssParameter>
+            </sld:Stroke>
+          </sld:PolygonSymbolizer>
+        </sld:Rule>
+        <sld:Rule>  
+          <sld:MaxScaleDenominator>20000000</sld:MaxScaleDenominator>
+          <sld:TextSymbolizer>
+            <sld:Label>
+              <ogc:PropertyName>name</ogc:PropertyName>
+            </sld:Label>
+            <sld:Font>
+              <sld:CssParameter name="font-family">Arial</sld:CssParameter>
+              <sld:CssParameter name="font-size">10</sld:CssParameter>
+              <sld:CssParameter name="font-style">Normal</sld:CssParameter>
+            </sld:Font>
+          </sld:TextSymbolizer>          
+        </sld:Rule>
+      </sld:FeatureTypeStyle>
+    </sld:UserStyle>
+  </sld:NamedLayer>
+</sld:StyledLayerDescriptor>