Merge pull request #1690 from tschaub/style

Accept a style option and provide setStyle and getStyle methods.

.gitignore

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

.travis.yml

@@ -1,7 +1,10 @@
 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 ../.."
 
 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/) 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

@@ -1,8 +1,7 @@
 {
     "opts": {
         "recurse": true,
-        "template": "doc/template",
-        "tutorials": "doc/tutorials"
+        "template": "apidoc/template"
     },
     "tags": {
         "allowUnknownTags": true
@@ -13,12 +12,18 @@
     },
     "plugins": [
         "plugins/markdown",
-        "doc/plugins/inheritdoc",
-        "doc/plugins/exports"
+        "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,

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

@@ -30,7 +30,6 @@ function collectExports(source) {
 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 = {
@@ -42,15 +41,29 @@ exports.handlers = {
   },
   
   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) {
       // 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) {
+        for (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) {
+            for (j = 0, jj=names.length; j < jj; ++j) {
               name = names[j];
               if (api.indexOf(name) === -1) {
                 api.push(name);

apidoc/plugins/observable.js

@@ -0,0 +1,26 @@
+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
+      });
+    }
+  });
+};

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,28 @@
+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
+        });
+      }
+    }
+  });
+};

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

@@ -92,6 +92,15 @@
         <?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 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>Event</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).readlines()
+        if len(lines) > 0 and lines[0].startswith('// NOCOMPILE'):
+            continue
+        requires.update(line for line in lines if line.startswith('goog.require'))
+        examples[filename] = [line for line in lines if not line.startswith('goog.require')]
+    for require in sorted(requires):
+        print require,
+    for filename in sorted(examples.keys()):
+        print '// ', filename
+        print '(function(){'
+        for line in examples[filename]:
+            print line,
+        print '})();'
+
+
+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,102 +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(%sExport, %s);\n' % (self.name, 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
 
@@ -140,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
@@ -172,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
@@ -183,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)
 
@@ -223,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')
@@ -236,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('.')
@@ -264,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) > 2:
-                        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,))
@@ -307,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/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):
+        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, 'w')
+    else:
+        output = sys.stdout
+    output.write(pystache.render(open(options.template).read(), context))
+
+
+if __name__ == '__main__':
+    sys.exit(main(sys.argv))

build.py

@@ -5,7 +5,7 @@ import gzip
 import json
 import os
 import os.path
-import re
+import regex as re
 import shutil
 import sys
 
@@ -79,8 +79,6 @@ else:
     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()
 
@@ -93,8 +91,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')
@@ -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:
         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')
+        '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', '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,24 +237,16 @@ 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):
@@ -260,7 +261,8 @@ def _build_require_list(dependencies, output_file_name):
             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('bin/combine-examples.py', t.dependencies)
+
+
 @rule(r'\Abuild/examples/(?P<id>.*).json\Z')
 def examples_star_json(name, match):
     def action(t):
@@ -309,8 +326,11 @@ def examples_star_json(name, match):
                 '../externs/bingmaps.js',
                 '../externs/bootstrap.js',
                 '../externs/geojson.js',
+                '../externs/topojson.js',
+                '../externs/oli.js',
                 '../externs/proj4js.js',
                 '../externs/tilejson.js',
+                '../externs/closure-compiler.js',
             ],
         })
         with open(t.name, 'w') as f:
@@ -322,18 +342,18 @@ 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()]
     return Target(name, action=action, dependencies=dependencies)
 
 
-@target('serve', PLOVR_JAR, INTERNAL_SRC, 'build/test/requireall.js',
-        'examples')
+@target('serve', PLOVR_JAR, 'test-deps', 'examples')
 def serve(t):
     t.run('%(JAVA)s', '-jar', PLOVR_JAR, 'serve', 'buildcfg/ol.json',
           'buildcfg/ol-all.json', EXAMPLES_JSON, 'buildcfg/test.json')
@@ -345,19 +365,48 @@ def serve_precommit(t):
           'buildcfg/ol-all.json', 'buildcfg/test.json')
 
 
-virtual('lint', 'build/lint-timestamp', 'build/check-requires-timestamp',
+virtual('lint', 'build/lint-timestamp', 'build/lint-generated-timestamp',
+        'build/lint-libtess.js-timestamp', 'build/check-requires-timestamp',
         'build/check-whitespace-timestamp')
 
 
-@target('build/lint-timestamp', SRC, INTERNAL_SRC, EXTERNAL_SRC, EXAMPLES_SRC,
-        SPEC, precious=True)
+@target('build/lint-timestamp', SRC, EXAMPLES_SRC, SPEC, precious=True)
 def build_lint_src_timestamp(t):
+    t.run('%(GJSLINT)s',
+          '--jslint_error=all',
+          '--custom_jsdoc_tags=todo',
+          '--strict',
+          t.newer(t.dependencies))
+    t.touch()
+
+
+@target('build/lint-generated-timestamp', INTERNAL_SRC, EXTERNAL_SRC,
+        precious=True)
+def build_lint_generated_timestamp(t):
     limited_doc_files = [
         path
         for path in ifind('externs', 'build/src/external/externs')
         if path.endswith('.js')]
-    t.run('%(GJSLINT)s', '--strict', '--limited_doc_files=%s' %
-          (','.join(limited_doc_files),), t.newer(t.dependencies))
+    t.run('%(GJSLINT)s',
+          '--jslint_error=all',
+          # ignore error for max line length (for these auto-generated sources)
+          '--disable=110',
+          '--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),),
+          '--strict',
+          t.newer(t.dependencies))
+    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()
 
 
@@ -385,7 +434,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
@@ -439,17 +488,23 @@ def build_check_requires_timestamp(t):
             self.children = {}
 
         def _build_re(self, key):
-            if len(self.children) == 1:
+            if key == '*':
+                assert len(self.children) == 0
+                # We want to match `.doIt` but not `.SomeClass` or `.more.stuff`
+                return '(?=\\.[a-z]\\w*\\b(?!\\.))'
+            elif len(self.children) == 1:
                 child_key, child = next(self.children.iteritems())
-                child_re = '\\.' + child._build_re(child_key)
+                child_re = child._build_re(child_key)
+                if child_key != '*':
+                    child_re = '\\.' + child_re
                 if self.present:
                     return key + '(' + child_re + ')?'
                 else:
                     return key + child_re
             elif self.children:
-                children_re = '(?:\\.(?:' + '|'.join(
-                    self.children[k]._build_re(k)
-                    for k in sorted(self.children.keys())) + '))'
+                children_re = '(?:' + '|'.join(
+                    ('\\.' if k != '*' else '') + self.children[k]._build_re(k)
+                    for k in sorted(self.children.keys())) + ')'
                 if self.present:
                     return key + children_re + '?'
                 else:
@@ -467,7 +522,14 @@ def build_check_requires_timestamp(t):
             if component not in node.children:
                 node.children[component] = Node()
             node = node.children[component]
-        node.present = True
+        if component[0].islower():
+            # We've arrived at a namespace provide like `ol.foo`.
+            # In this case, we want to match uses like `ol.foo.doIt()` but
+            # not match things like `new ol.foo.SomeClass()`.
+            # For this purpose, we use the special wildcard key for the child.
+            node.children['*'] = Node()
+        else:
+            node.present = True
     provide_res = [child.build_re(key)
                    for key, child in root.children.iteritems()]
     missing_count = 0
@@ -477,6 +539,7 @@ def build_check_requires_timestamp(t):
         provides = set()
         requires = set()
         uses = set()
+        uses_linenos = {}
         for lineno, line in _strip_comments(open(filename)):
             m = re.match(r'goog.provide\(\'(.*)\'\);', line)
             if m:
@@ -491,6 +554,7 @@ def build_check_requires_timestamp(t):
                     m = provide_re.search(line)
                     if m:
                         uses.add(m.group())
+                        uses_linenos[m.group()] = lineno
                         line = line[:m.start()] + line[m.end():]
                         break
                 else:
@@ -504,9 +568,10 @@ def build_check_requires_timestamp(t):
             uses.discard('ol.renderer.%s.Map' % (m.group(1),))
         missing_requires = uses - requires - provides
         if missing_requires:
-            t.info('%s: missing goog.requires: %s', filename, ', '.join(
-                sorted(missing_requires)))
-            missing_count += len(missing_requires)
+            for missing_require in sorted(missing_requires):
+                t.info("%s:%d missing goog.require('%s')" %
+                       (filename, uses_linenos[missing_require], missing_require))
+                missing_count += 1
     if unused_count or missing_count:
         t.error('%d unused goog.requires, %d missing goog.requires' %
                 (unused_count, missing_count))
@@ -514,7 +579,7 @@ 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')
@@ -554,29 +619,15 @@ def plovr_jar(t):
     t.info('downloaded %r', t.name)
 
 
-@target('gh-pages', 'host-examples', 'doc', phony=True)
-def gh_pages(t):
-    with t.tempdir() as tempdir:
-        t.run('%(GIT)s', 'clone', '--branch', 'gh-pages',
-              'git@github.com:openlayers/ol3.git', tempdir)
-        with t.chdir(tempdir):
-            t.rm_rf('%(BRANCH)s')
-        t.cp_r('build/gh-pages/%(BRANCH)s', tempdir + '/%(BRANCH)s')
-        with t.chdir(tempdir):
-            t.run('%(GIT)s', 'add', '--all', '%(BRANCH)s')
-            t.run('%(GIT)s', 'commit', '--message', 'Updated')
-            t.run('%(GIT)s', 'push', 'origin', 'gh-pages')
-
-
-virtual('doc', 'build/jsdoc-%(BRANCH)s-timestamp' % vars(variables))
+virtual('apidoc', 'build/jsdoc-%(BRANCH)s-timestamp' % vars(variables))
 
 
 @target('build/jsdoc-%(BRANCH)s-timestamp' % vars(variables), 'host-resources',
         'build/src/external/src/exports.js', 'build/src/external/src/types.js',
-        SRC, SHADER_SRC, ifind('doc/template'))
+        SRC, SHADER_SRC, ifind('apidoc/template'))
 def jsdoc_BRANCH_timestamp(t):
-    t.run('%(JSDOC)s', '-c', 'doc/conf.json', 'src', 'doc/index.md',
-          '-d', 'build/gh-pages/%(BRANCH)s/apidoc')
+    t.run('%(JSDOC)s', '-c', 'apidoc/conf.json', 'src', 'apidoc/index.md',
+          '-d', 'build/hosted/%(BRANCH)s/apidoc')
     t.touch()
 
 
@@ -614,15 +665,15 @@ def split_example_file(example, dst_dir):
 
 @target('host-resources', phony=True)
 def host_resources(t):
-    resources_dir = 'build/gh-pages/%(BRANCH)s/resources'
+    resources_dir = 'build/hosted/%(BRANCH)s/resources'
     t.rm_rf(resources_dir)
     t.cp_r('resources', resources_dir)
 
 
 @target('host-examples', 'build', 'host-resources', 'examples', phony=True)
 def host_examples(t):
-    examples_dir = 'build/gh-pages/%(BRANCH)s/examples'
-    build_dir = 'build/gh-pages/%(BRANCH)s/build'
+    examples_dir = 'build/hosted/%(BRANCH)s/examples'
+    build_dir = 'build/hosted/%(BRANCH)s/build'
     t.rm_rf(examples_dir)
     t.makedirs(examples_dir)
     t.rm_rf(build_dir)
@@ -637,30 +688,29 @@ def host_examples(t):
     t.cp('examples/index.html', 'examples/example-list.js',
          'examples/example-list.xml', 'examples/Jugl.js',
          'examples/jquery.min.js', examples_dir)
-    t.rm_rf('build/gh-pages/%(BRANCH)s/closure-library')
-    t.makedirs('build/gh-pages/%(BRANCH)s/closure-library')
-    with t.chdir('build/gh-pages/%(BRANCH)s/closure-library'):
+    t.rm_rf('build/hosted/%(BRANCH)s/closure-library')
+    t.makedirs('build/hosted/%(BRANCH)s/closure-library')
+    with t.chdir('build/hosted/%(BRANCH)s/closure-library'):
         t.run('%(JAR)s', 'xf', '../../../../' + PLOVR_JAR, 'closure')
         t.run('%(JAR)s', 'xf', '../../../../' + PLOVR_JAR, 'third_party')
-    t.rm_rf('build/gh-pages/%(BRANCH)s/ol')
-    t.makedirs('build/gh-pages/%(BRANCH)s/ol')
-    t.cp_r('src/ol', 'build/gh-pages/%(BRANCH)s/ol/ol')
+    t.rm_rf('build/hosted/%(BRANCH)s/ol')
+    t.makedirs('build/hosted/%(BRANCH)s/ol')
+    t.cp_r('src/ol', 'build/hosted/%(BRANCH)s/ol/ol')
     t.run('%(PYTHON)s', 'bin/closure/depswriter.py',
           '--root_with_prefix', 'src ../../../ol',
-          '--root', 'build/gh-pages/%(BRANCH)s/closure-library/closure/goog',
-          '--root_with_prefix', 'build/gh-pages/%(BRANCH)s/closure-library/'
+          '--root', 'build/hosted/%(BRANCH)s/closure-library/closure/goog',
+          '--root_with_prefix', 'build/hosted/%(BRANCH)s/closure-library/'
           'third_party ../../third_party',
-          '--output_file', 'build/gh-pages/%(BRANCH)s/build/ol-deps.js')
+          '--output_file', 'build/hosted/%(BRANCH)s/build/ol-deps.js')
 
 
 @target('check-examples', 'host-examples', phony=True)
 def check_examples(t):
-    examples = ['build/gh-pages/%(BRANCH)s/' + e for e in EXAMPLES]
+    examples = ['build/hosted/%(BRANCH)s/' + e
+                for e in EXAMPLES
+                if not open(e.replace('.html', '.js')).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)
 
@@ -682,9 +732,12 @@ def proj4js_zip(t):
     t.info('downloaded %r', t.name)
 
 
-@target('test', INTERNAL_SRC, PROJ4JS, 'build/test/requireall.js', phony=True)
+virtual('test-deps', INTERNAL_SRC, PROJ4JS, 'build/test/requireall.js')
+
+
+@target('test', 'test-deps', phony=True)
 def test(t):
-    t.run('%(PHANTOMJS)s', 'test/mocha-phantomjs.coffee', 'test/ol.html')
+    t.run('%(PHANTOMJS)s', 'test/mocha-phantomjs.js', 'test/ol.html')
 
 
 @target('fixme', phony=True)
@@ -732,5 +785,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             - is an alias for the fixme-target
+  plovr            - Fetches the required plovr.jar. Usually called by other
+                     targets that depend on plovr.
+
+If no target is given, the build-target will be executed.
+
+The above list is not complete, please see the 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"
   },
 
@@ -41,20 +49,67 @@
   "externs": [
     "//json.js",
     "../externs/bingmaps.js",
+    "../externs/closure-compiler.js",
     "../externs/geojson.js",
+    "../externs/oli.js",
     "../externs/proj4js.js",
-    "../externs/tilejson.js"
+    "../externs/tilejson.js",
+    "../externs/topojson.js"
   ],
 
   "level": "VERBOSE",
 
   "mode": "ADVANCED",
 
+  "name-suffixes-to-strip": [
+    "logger",
+    "logger_"
+  ],
+
   "paths": [
     "../build/src/internal/src",
     "../src"
   ],
 
-  "treat-warnings-as-errors": false
+  "treat-warnings-as-errors": false,
+
+  "type-prefixes-to-strip": [
+    "goog.asserts",
+    "goog.debug.Console",
+    "goog.debug.DebugWindow",
+    "goog.debug.DevCss",
+    "goog.debug.DivConsole",
+    "goog.debug.EntryPointMonitor",
+    "goog.debug.ErrorHandler",
+    "goog.debug.ErrorReporter",
+    "goog.debug.FancyWindow",
+    "goog.debug.Formatter",
+    "goog.debug.FpsDisplay",
+    "goog.debug.GcDiagnostics",
+    "goog.debug.HtmlFormatter",
+    "goog.debug.LogBuffer",
+    "goog.debug.LogManager",
+    "goog.debug.LogRecord",
+    "goog.debug.Logger",
+    "goog.debug.RelativeTimeProvider",
+    "goog.debug.TextFormatter",
+    "goog.debug.Trace",
+    "goog.debug.catchErrors",
+    "goog.debug.deepExpose",
+    "goog.debug.enhanceError",
+    "goog.debug.entryPointRegistry",
+    "goog.debug.errorHandlerWeakDep",
+    "goog.debug.expose",
+    "goog.debug.exposeArray",
+    "goog.debug.exposeException",
+    "goog.debug.getFunctionName",
+    "goog.debug.getStacktrace",
+    "goog.debug.getStacktraceSimple",
+    "goog.debug.logRecordSerializer",
+    "goog.debug.makeWhitespaceVisible",
+    "goog.debug.normalizeErrorObject",
+    "goog.debug.reflect",
+    "goog.log"
+  ]
 
 }

buildcfg/examples-all.json

@@ -0,0 +1,20 @@
+{
+    "externs": [
+        "//json.js", 
+        "//jquery-1.7.js", 
+        "../externs/bingmaps.js", 
+        "../externs/bootstrap.js", 
+        "../externs/closure-compiler.js",
+        "../externs/geojson.js", 
+        "../externs/oli.js", 
+        "../externs/proj4js.js", 
+        "../externs/tilejson.js", 
+        "../externs/topojson.js"
+    ], 
+    "id": "simple", 
+    "inherits": "base.json", 
+    "inputs": [
+        "../build/examples/all.js", 
+        "../build/src/internal/src/types.js"
+    ]
+}

buildcfg/ol-all.json

@@ -6,16 +6,18 @@
     "//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/tilejson.js",
+    "../externs/topojson.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

@@ -14,17 +14,21 @@
 
   "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/tilejson.js",
+    "../externs/topojson.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

@@ -16,24 +16,26 @@
   "externs": [
     "//json.js",
     "../externs/bingmaps.js",
+    "../externs/closure-compiler.js",
     "../externs/geojson.js",
+    "../externs/oli.js",
     "../externs/proj4js.js",
-    "../externs/tilejson.js"
+    "../externs/tilejson.js",
+    "../externs/topojson.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

@@ -16,19 +16,21 @@
     "//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/tilejson.js",
+    "../externs/topojson.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,44 +1,72 @@
 .ol-attribution {
   position: absolute;
-  font-size: 10px;
   text-align: right;
-  color: #eeeeee;
   bottom: 0;
   right: 0;
-  background: rgba(0,60,136,0.3);
   font-family: 'Lucida Grande',Verdana,Geneva,Lucida,Arial,Helvetica,sans-serif;
-  padding: 2px 4px;
+  padding: 6px;
 }
 .ol-attribution a {
-  color: white;
   text-decoration: none;
 }
+
+/* rgba is not supported on IE <= 8, fall back to black text so that it's readable */
+.ol-attribution {
+  color: #000000;
+}
+.ol-attribution:not([ie8andbelow]) {
+  color: #eeeeee;
+  background: rgba(0,60,136,0.3);
+}
+
+/* white links are unreadable on IE <= 8 with no background, fall back to blue links */
+.ol-attribution a {
+  color: #7b98bc;
+}
+.ol-attribution a:not([ie8andbelow]) {
+  color: white;
+}
+
+.ol-attribution ul {
+  margin: 0;
+  padding: 0;
+  font-size: 10px;
+  line-height: 12px;
+}
 .ol-attribution li {
   display: inline;
   list-style: none;
+  line-height: inherit;
 }
 .ol-attribution li:not(:last-child):after {
   content: "\2003";
 }
-.ol-dragbox {
-  position: absolute;
-  border: 2px solid red;
+.ol-attribution-bing-tos {
+  float:right;
+  padding-top: 2px;
+  white-space: nowrap;
 }
 .ol-full-screen {
-  background: rgba(255,255,255,0.4);
+  /* IE <= 8 doesn't support rgba, fall back to a light grey */
+  background: #eee;
   border-radius: 4px;
   padding: 2px;
   position: absolute;
   right: 8px;
   top: 8px;
 }
+.ol-full-screen:not([ie8andbelow]) {
+  /* IE <= 8 doesn't support rgba, fall back to a light grey */
+  background: rgba(255,255,255,0.4);
+}
 @media print {
   .ol-full-screen {
     display: none;
   }
 }
 .ol-full-screen a {
-  background: rgba(0,60,136,0.5);
+  /* IE <= 8 doesn't support rgba, fall back to a light blue */
+  background: #7b98bc;
   color: white;
   display: block;
   font-family: 'Lucida Grande',Verdana,Geneva,Lucida,Arial,Helvetica,sans-serif;
@@ -52,6 +80,10 @@
   text-decoration: none;
   width: 22px;
 }
+.ol-full-screen a:not([ie8andbelow]) {
+  /* IE <= 8 doesn't support rgba, fall back to a light blue */
+  background: rgba(0,60,136,0.5);
+}
 a.ol-full-screen-false:after {
   content: "\2194";
 }
@@ -66,6 +98,11 @@ a.ol-full-screen-true:after {
   border-radius: 2px;
 }
 .ol-full-screen a:hover {
+  /* IE <= 8 doesn't support rgba, fall back to a light blue */
+  background: #4c6079;
+}
+.ol-full-screen a:hover:not([ie8andbelow]) {
+  /* IE <= 8 doesn't support rgba, fall back to a light blue */
   background: rgba(0,60,136,0.7);
 }
 .ol-logo {
@@ -76,19 +113,32 @@ a.ol-full-screen-true:after {
 }
 .ol-logo ul {
   margin: 0;
+  padding: 0;
 }
 .ol-logo ul li {
   display: inline;
   list-style: none;
 }
+
+.ol-mouse-position {
+  top: 8px;
+  right: 8px;
+  position: absolute;
+}
+
 .ol-scale-line {
-  background: rgba(0,60,136,0.3);
+  /* IE <= 8 doesn't support rgba, fall back to a light blue */
+  background: #95b9e6;
   border-radius: 4px;
   bottom: 8px;
   left: 8px;
   padding: 2px;
   position: absolute;
 }
+.ol-scale-line:not([ie8andbelow]) {
+  /* IE <= 8 doesn't support rgba, fall back to a light blue */
+  background: rgba(0,60,136,0.3);
+}
 .ol-scale-line-inner {
   border: 1px solid #eeeeee;
   border-top: none;
@@ -111,14 +161,20 @@ a.ol-full-screen-true:after {
   user-select: none;
   -webkit-tap-highlight-color: rgba(0,0,0,0);
 }
+
 .ol-zoom {
   position: absolute;
   top: 8px;
   left: 8px;
-  background: rgba(255,255,255,0.4);
+  /* IE <= 8 doesn't support rgba, fall back to a light grey */
+  background-color: #eee;
   border-radius: 4px;
   padding: 2px;
 }
+/* IE <= 8 doesn't support rgba, fall back to a light grey */
+.ol-zoom:not([ie8andbelow]) {
+  background-color: rgba(255,255,255,0.4);
+}
 @media print {
   .ol-zoom {
     display: none;
@@ -138,7 +194,12 @@ a.ol-full-screen-true:after {
   height: 22px;
   width: 22px;
   line-height: 19px;
-  background: rgba(0,60,136,0.5);
+  /* IE <= 8 doesn't support rgba, fall back to a light blue */
+  background-color: #7b98bc;
+}
+.ol-zoom a:not([ie8andbelow]) {
+  /* IE <= 8 doesn't support rgba, fall back to a light blue */
+  background-color: rgba(0,60,136,0.5);
 }
 .ol-touch .ol-zoom a {
   font-size: 20px;
@@ -147,28 +208,30 @@ a.ol-full-screen-true:after {
   line-height: 26px;
 }
 .ol-zoom a:hover {
-  background: rgba(0,60,136,0.7);
+  color: #fff;
+  text-decoration: none;
+  /* IE <= 8 doesn't support rgba, fall back to a lighter blue */
+  background-color: #4c6079;
+}
+.ol-zoom a:hover:not([ie8andbelow]) {
+  /* IE <= 8 doesn't support rgba, fall back to a lighter blue */
+  background-color: rgba(0,60,136,0.7);
 }
 
 .ol-zoom-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";
-}
 
 .ol-zoomslider {
   position: absolute;
   top: 67px;
   left: 8px;
-  background: rgba(255, 255, 255, 0.4);
+  /* IE <= 8 doesn't support rgba, fall back to a light grey */
+  background: #eee;
   border-radius: 4px;
   width: 28px;
   height: 200px;
@@ -177,15 +240,79 @@ a.ol-full-screen-true:after {
   padding: 0;
   margin: 0;
 }
+.ol-zoomslider:not([ie8andbelow]) {
+  /* IE <= 8 doesn't support rgba, fall back to a light grey */
+  background: rgba(255, 255, 255, 0.4);
+}
 .ol-zoomslider-thumb {
   position: absolute;
   display: block;
   padding: 0;
   margin: 2px;
-  background: rgba(0,60,136,0.5);
+  /* IE <= 8 doesn't support rgba, fall back to a lighter blue */
+  background: #7b98bc;
   border-radius: 2px;
   outline: none;
   overflow: hidden;
   height: 20px;
   width: 24px;
 }
+.ol-zoomslider-thumb:not([ie8andbelow]) {
+  /* IE <= 8 doesn't support rgba, fall back to a lighter blue */
+  background: rgba(0,60,136,0.5);
+}
+.ol-zoom-extent {
+  position: absolute;
+  /* IE <= 8 doesn't support rgba, fall back to a light grey */
+  background: #eee;
+  border-radius: 4px;
+  left: 8px;
+  padding: 2px;
+  top: 65px;
+}
+.ol-zoom-extent:not([ie8andbelow]) {
+  /* IE <= 8 doesn't support rgba, fall back to a light grey */
+  background: rgba(255,255,255,0.4);
+}
+@media print {
+  .ol-zoom-extent {
+    display: none;
+  }
+}
+.ol-zoom-extent a {
+  display: block;
+  margin: 1px;
+  padding: 0;
+  color: white;
+  font-size: 16px;
+  font-family: 'Lucida Grande',Verdana,Geneva,Lucida,Arial,Helvetica,sans-serif;
+  font-weight: bold;
+  text-decoration: none;
+  text-align: center;
+  height: 22px;
+  width: 22px;
+  /* IE <= 8 doesn't support rgba, fall back to a lighter blue */
+  background-color: #7b98bc;
+  border-radius: 2px;
+}
+.ol-zoom-extent a:not([ie8andbelow]) {
+  /* IE <= 8 doesn't support rgba, fall back to a lighter blue */
+  background-color: rgba(0, 60, 136, 0.5);
+}
+.ol-touch .ol-zoom-extent a {
+  font-size: 20px;
+  height: 30px;
+  width: 30px;
+  line-height: 26px;
+}
+.ol-zoom-extent a:hover {
+  /* IE <= 8 doesn't support rgba, fall back to a lighter blue */
+  background-color: #4c6079;
+}
+.ol-zoom-extent a:hover:not([ie8andbelow]) {
+  /* IE <= 8 doesn't support rgba, fall back to a lighter blue */
+  background-color: rgba(0, 60, 136, 0.7);
+}
+.ol-zoom-extent a:after {
+    content: "E";
+}

doc/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/quickstart.hbs

@@ -0,0 +1,132 @@
+---
+title: Quick Start
+layout: doc.hbs
+---
+
+# Quick Start
+
+## Put a map on a page
+
+Below you'll find a complete working example.  Create a new file, copy in the contents below, and open in a browser:
+
+```xml
+<!doctype html>
+<html lang="en">
+  <head>
+    <link rel="stylesheet" href="http://ol3js.org/en/{{ latest }}/build/ol.css" type="text/css">
+    <style>
+      .map {
+        height: 400px;
+        width: 100%;
+      }
+    </style>
+    <script src="http://ol3js.org/en/{{ latest }}/build/ol.js" type="text/javascript"></script>
+    <title>OpenLayers 3 example</title>
+  </head>
+  <body>
+    <h2>My Map</h2>
+    <div id="map" class="map"></div>
+    <script type="text/javascript">
+      var map = new ol.Map({
+        target: 'map',
+        layers: [
+          new ol.layer.Tile({
+            source: new ol.source.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,60 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="chrome=1">
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../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="loader.js?id=accessible" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
+
+  </body>
+</html>

examples/accessible.js

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

examples/animation.html

@@ -14,13 +14,7 @@
     <div class="navbar navbar-inverse navbar-fixed-top">
       <div class="navbar-inner">
         <div class="container">
-          <a class="brand" href="./">OpenLayers 3 Examples</a>
-          <ul class="nav pull-right">
-            <li><iframe class="github-watch-button" src="http://ghbtns.com/github-btn.html?user=openlayers&repo=ol3&type=watch&count=true"
-  allowtransparency="true" frameborder="0" scrolling="0" height="20" width="90"></iframe></li>
-            <li><a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-hashtags="openlayers">&nbsp;</a></li>
-            <li><div class="g-plusone-wrapper"><div class="g-plusone" data-size="medium" data-annotation="none"></div></div></li>
-          </ul>
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>         
         </div>
       </div>
     </div>
@@ -30,22 +24,27 @@
       <div class="row-fluid">
         <div class="span12">
           <div id="map" class="map"></div>
-          <button id="rotate-left"><i class="icon-arrow-left"></i></button>
-          <button>Rotate</button>
-          <button id="rotate-right"><i class="icon-arrow-right"></i></button>
         </div>
-        <button id="pan-to-london">Pan to London</button>
-        <button id="elastic-to-moscow">Elastic to Moscow</button>
-        <button id="bounce-to-istanbul">Bounce to Istanbul</button>
-        <button id="spin-to-rome">Spin to Rome</button>
-        <button id="fly-to-bern">Fly to Bern</button>
+      </div>
+
+      <div class="row-fluid">
+        <div class="span12">
+          <button id="rotate-left"><i class="icon-arrow-left"></i></button>
+          <button id="rotate-right"><i class="icon-arrow-right"></i></button>
+          <button id="pan-to-london">Pan to London</button>
+          <button id="elastic-to-moscow">Elastic to Moscow</button>
+          <button id="bounce-to-istanbul">Bounce to Istanbul</button>
+          <button id="spin-to-rome">Spin to Rome</button>
+          <button id="fly-to-bern">Fly to Bern</button>
+          <button id="spiral-to-madrid">Spiral to Madrid</button>
+        </div>
       </div>
 
       <div class="row-fluid">
 
-        <div class="span4">
+        <div class="span12">
           <h4 id="title">Animation example</h4>
-          <p id="shortdesc">Example animations.</p>
+          <p id="shortdesc">Demonstrates animated pan, zoom, and rotation.</p>
           <div id="docs">
             <p>See the <a href="animation.js" target="_blank">animation.js source</a> to see how this is done.</p>
           </div>
@@ -56,8 +55,9 @@
 
     </div>
 
+    <script src="jquery.min.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>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
 
   </body>
 </html>

examples/animation.js

@@ -3,21 +3,17 @@ goog.require('ol.RendererHints');
 goog.require('ol.View2D');
 goog.require('ol.animation');
 goog.require('ol.easing');
-goog.require('ol.layer.TileLayer');
-goog.require('ol.projection');
+goog.require('ol.layer.Tile');
+goog.require('ol.proj');
 goog.require('ol.source.OSM');
 
 
-var london = ol.projection.transform(
-    [-0.12755, 51.507222], 'EPSG:4326', 'EPSG:3857');
-var moscow = ol.projection.transform(
-    [37.6178, 55.7517], 'EPSG:4326', 'EPSG:3857');
-var istanbul = ol.projection.transform(
-    [28.9744, 41.0128], 'EPSG:4326', 'EPSG:3857');
-var rome = ol.projection.transform(
-    [12.5, 41.9], 'EPSG:4326', 'EPSG:3857');
-var bern = ol.projection.transform(
-    [7.4458, 46.95], 'EPSG:4326', 'EPSG:3857');
+var london = ol.proj.transform([-0.12755, 51.507222], 'EPSG:4326', 'EPSG:3857');
+var moscow = ol.proj.transform([37.6178, 55.7517], 'EPSG:4326', 'EPSG:3857');
+var istanbul = ol.proj.transform([28.9744, 41.0128], 'EPSG:4326', 'EPSG:3857');
+var rome = ol.proj.transform([12.5, 41.9], 'EPSG:4326', 'EPSG:3857');
+var bern = ol.proj.transform([7.4458, 46.95], 'EPSG:4326', 'EPSG:3857');
+var madrid = ol.proj.transform([-3.683333, 40.4], 'EPSG:4326', 'EPSG:3857');
 
 var view = new ol.View2D({
   // the view's initial state
@@ -27,24 +23,23 @@ 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: ol.RendererHints.createFromQueryData(),
   target: 'map',
   view: view
 });
 
-
 var rotateLeft = document.getElementById('rotate-left');
 rotateLeft.addEventListener('click', function() {
   var rotateLeft = ol.animation.rotate({
     duration: 2000,
     rotation: -4 * Math.PI
   });
-  map.addPreRenderFunction(rotateLeft);
+  map.beforeRender(rotateLeft);
 }, false);
 var rotateRight = document.getElementById('rotate-right');
 rotateRight.addEventListener('click', function() {
@@ -52,7 +47,7 @@ rotateRight.addEventListener('click', function() {
     duration: 2000,
     rotation: 4 * Math.PI
   });
-  map.addPreRenderFunction(rotateRight);
+  map.beforeRender(rotateRight);
 }, false);
 
 
@@ -60,9 +55,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);
 
@@ -71,9 +66,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);
 
@@ -82,9 +77,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);
 
@@ -94,7 +89,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({
@@ -102,7 +97,7 @@ spinToRome.addEventListener('click', function() {
     rotation: 2 * Math.PI,
     start: start
   });
-  map.addPreRenderFunctions([pan, rotate]);
+  map.beforeRender(pan, rotate);
   view.setCenter(rome);
 }, false);
 
@@ -112,7 +107,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({
@@ -120,6 +115,29 @@ flyToBern.addEventListener('click', function() {
     resolution: 4 * view.getResolution(),
     start: start
   });
-  map.addPreRenderFunctions([pan, bounce]);
+  map.beforeRender(pan, bounce);
   view.setCenter(bern);
 }, false);
+
+var spiralToMadrid = document.getElementById('spiral-to-madrid');
+spiralToMadrid.addEventListener('click', function() {
+  var duration = 2000;
+  var start = +new Date();
+  var pan = ol.animation.pan({
+    duration: duration,
+    source: /** @type {ol.Coordinate} */ (view.getCenter()),
+    start: start
+  });
+  var bounce = ol.animation.bounce({
+    duration: duration,
+    resolution: 2 * view.getResolution(),
+    start: start
+  });
+  var rotate = ol.animation.rotate({
+    duration: duration,
+    rotation: -4 * Math.PI,
+    start: start
+  });
+  map.beforeRender(pan, bounce, rotate);
+  view.setCenter(madrid);
+}, false);

examples/bind-input.html

@@ -14,13 +14,7 @@
     <div class="navbar navbar-inverse navbar-fixed-top">
       <div class="navbar-inner">
         <div class="container">
-          <a class="brand" href="./">OpenLayers 3 Examples</a>
-          <ul class="nav pull-right">
-            <li><iframe class="github-watch-button" src="http://ghbtns.com/github-btn.html?user=openlayers&repo=ol3&type=watch&count=true"
-  allowtransparency="true" frameborder="0" scrolling="0" height="20" width="90"></iframe></li>
-            <li><a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-hashtags="openlayers">&nbsp;</a></li>
-            <li><div class="g-plusone-wrapper"><div class="g-plusone" data-size="medium" data-annotation="none"></div></div></li>
-          </ul>
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>         
         </div>
       </div>
     </div>
@@ -37,9 +31,14 @@
 
         <div class="span4">
           <h4 id="title">Bind HTML input example</h4>
-          <p id="shortdesc">Bind an HTML input to an ol object.</p>
+          <p id="shortdesc">Demonstrates two-way binding of HTML input elements to OpenLayers objects.</p>
           <div id="docs">
             <p>See the <a href="bind-input.js" target="_blank">bind-input.js source</a> to see how this is done.</p>
+            <div id="no-webgl" class="alert alert-warning" style="display: none">
+              <h4>Warning!</h4>
+              A browser that supports <a href="http://get.webgl.org/">WebGL</a> is required to change the
+              <strong>hue</strong>, <strong>saturation</strong>, <strong>contrast</strong> and <strong>brightness</strong>.
+            </div>
           </div>
           <div id="tags">input, bind, openstreetmap</div>
         </div>
@@ -54,13 +53,13 @@
               <label>opacity</label>
               <input id="opacity" type="range" min="0" max="1" step="0.01"/>
               <label>hue</label>
-              <input id="hue" type="range" min="-3.141592653589793" max="3.141592653589793" step="0.01"/>
+              <input id="hue" class="webgl" type="range" min="-3.141592653589793" max="3.141592653589793" step="0.01"/>
               <label>saturation</label>
-              <input id="saturation" type="range" min="0" max="5" step="0.01"/>
+              <input id="saturation" class="webgl" type="range" min="0" max="5" step="0.01"/>
               <label>contrast</label>
-              <input id="contrast" type="range" min="0" max="2" step="0.01"/>
+              <input id="contrast" class="webgl" type="range" min="0" max="2" step="0.01"/>
               <label>brightness</label>
-              <input id="brightness" type="range" min="-1" max="1" step="0.01"/>
+              <input id="brightness" class="webgl" type="range" min="-1" max="1" step="0.01"/>
             </fieldset>
           </form>
         </div>
@@ -71,7 +70,8 @@
               <legend>View</legend>
               <label>rotation</label>
               <input id="rotation" type="range" min="-3.141592653589793" max="3.141592653589793" step="0.01"/>
-            </fieldset>
+              <label>resolution</label>
+              <input id="resolution" type="number" min="0" step="250"/>
             </fieldset>
           </form>
         </div>
@@ -80,8 +80,9 @@
 
     </div>
 
+    <script src="jquery.min.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>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
 
   </body>
 </html>

examples/bind-input.js

@@ -1,41 +1,66 @@
+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: ol.RendererHints.createFromQueryData(),
   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', view, 'resolution').transform(parseFloat, String);

examples/bing-maps.html

@@ -14,13 +14,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 +29,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">
@@ -56,7 +52,7 @@
 
     <script src="jquery.min.js" type="text/javascript"></script>
     <script src="loader.js?id=bing-maps" type="text/javascript"></script>
-    <script src="../resources/social-links.js" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
 
   </body>
 </html>

examples/bing-maps.js

@@ -1,36 +1,43 @@
 goog.require('ol.Map');
 goog.require('ol.RendererHints');
 goog.require('ol.View2D');
-goog.require('ol.layer.TileLayer');
-goog.require('ol.projection');
+goog.require('ol.layer.Tile');
 goog.require('ol.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: ol.RendererHints.createFromQueryData(),
   target: 'map',
   view: new ol.View2D({
-    center: ol.projection.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

@@ -8,19 +8,21 @@
     <link rel="stylesheet" href="../resources/layout.css" type="text/css">
     <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
     <title>Brightness/contrast example</title>
+    <style>
+      #reset-brightness {
+        min-width: 138px;
+      }
+      #reset-contrast {
+        min-width: 120px;
+      }
+    </style>
   </head>
   <body>
 
     <div class="navbar navbar-inverse navbar-fixed-top">
       <div class="navbar-inner">
         <div class="container">
-          <a class="brand" href="./">OpenLayers 3 Examples</a>
-          <ul class="nav pull-right">
-            <li><iframe class="github-watch-button" src="http://ghbtns.com/github-btn.html?user=openlayers&repo=ol3&type=watch&count=true"
-  allowtransparency="true" frameborder="0" scrolling="0" height="20" width="90"></iframe></li>
-            <li><a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-hashtags="openlayers">&nbsp;</a></li>
-            <li><div class="g-plusone-wrapper"><div class="g-plusone" data-size="medium" data-annotation="none"></div></div></li>
-          </ul>
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>         
         </div>
       </div>
     </div>
@@ -30,6 +32,11 @@
       <div class="row-fluid">
         <div class="span12">
           <div id="map" class="map"></div>
+
+          <div id="no-webgl" class="alert alert-error" style="display: none">
+            This example requires a browser that supports <a href="http://get.webgl.org/">WebGL</a>.
+          </div>
+
           <div class="btn-group">
             <button id="increase-brightness"><i class="icon-plus"></i></button>
             <button id="reset-brightness">Brightness</button>
@@ -45,7 +52,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">
@@ -58,8 +65,9 @@
 
     </div>
 
+    <script src="jquery.min.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>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
 
   </body>
 </html>

examples/brightness-contrast.js

@@ -1,46 +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()
-});
+function setResetBrightnessButtonHTML() {
+  resetBrightness.innerHTML = 'Brightness (' +
+      layer.getBrightness().toFixed(3) + ')';
+}
 
-var map = new ol.Map({
-  layers: [layer],
-  renderer: ol.RendererHint.WEBGL,
-  target: 'map',
-  view: new ol.View2D({
-    center: [0, 0],
-    zoom: 2
-  })
-});
+function setResetContrastButtonHTML() {
+  resetContrast.innerHTML = 'Contrast (' + layer.getContrast().toFixed(3) + ')';
+}
 
-var increaseBrightness = document.getElementById('increase-brightness');
-increaseBrightness.addEventListener('click', function() {
-  layer.setBrightness(layer.getBrightness() + 0.125);
-}, false);
-var resetBrightness = document.getElementById('reset-brightness');
-resetBrightness.addEventListener('click', function() {
-  layer.setBrightness(0);
-}, false);
-var decreaseBrightness = document.getElementById('decrease-brightness');
-decreaseBrightness.addEventListener('click', function() {
-  layer.setBrightness(layer.getBrightness() - 0.125);
-}, false);
+if (!ol.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 increaseContrast = document.getElementById('increase-contrast');
-increaseContrast.addEventListener('click', function() {
-  layer.setContrast(layer.getContrast() + 0.125);
-}, false);
-var resetContrast = document.getElementById('reset-contrast');
-resetContrast.addEventListener('click', function() {
-  layer.setContrast(1);
-}, false);
-var decreaseContrast = document.getElementById('decrease-contrast');
-decreaseContrast.addEventListener('click', function() {
-  layer.setContrast(layer.getContrast() - 0.125);
-}, false);
+  var map = new ol.Map({
+    layers: [layer],
+    renderer: 'webgl',
+    target: 'map',
+    view: new ol.View2D({
+      center: [0, 0],
+      zoom: 2
+    })
+  });
+
+  var increaseBrightness = document.getElementById('increase-brightness');
+  var resetBrightness = document.getElementById('reset-brightness');
+  var decreaseBrightness = document.getElementById('decrease-brightness');
+
+  setResetBrightnessButtonHTML();
+
+  increaseBrightness.addEventListener('click', function() {
+    layer.setBrightness(Math.min(layer.getBrightness() + 0.125, 1));
+    setResetBrightnessButtonHTML();
+  }, false);
+  resetBrightness.addEventListener('click', function() {
+    layer.setBrightness(0);
+    setResetBrightnessButtonHTML();
+  }, false);
+  decreaseBrightness.addEventListener('click', function() {
+    layer.setBrightness(Math.max(layer.getBrightness() - 0.125, -1));
+    setResetBrightnessButtonHTML();
+  }, false);
+
+  var increaseContrast = document.getElementById('increase-contrast');
+  var resetContrast = document.getElementById('reset-contrast');
+  var decreaseContrast = document.getElementById('decrease-contrast');
+
+  setResetContrastButtonHTML();
+
+  increaseContrast.addEventListener('click', function() {
+    layer.setContrast(layer.getContrast() + 0.125);
+    setResetContrastButtonHTML();
+  }, false);
+  resetContrast.addEventListener('click', function() {
+    layer.setContrast(1);
+    setResetContrastButtonHTML();
+  }, false);
+  decreaseContrast.addEventListener('click', function() {
+    layer.setContrast(Math.max(layer.getContrast() - 0.125, 0));
+    setResetContrastButtonHTML();
+  }, false);
+}

examples/canvas-tiles.html

@@ -14,13 +14,7 @@
     <div class="navbar navbar-inverse navbar-fixed-top">
       <div class="navbar-inner">
         <div class="container">
-          <a class="brand" href="./">OpenLayers 3 Examples</a>
-          <ul class="nav pull-right">
-            <li><iframe class="github-watch-button" src="http://ghbtns.com/github-btn.html?user=openlayers&repo=ol3&type=watch&count=true"
-  allowtransparency="true" frameborder="0" scrolling="0" height="20" width="90"></iframe></li>
-            <li><a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-hashtags="openlayers">&nbsp;</a></li>
-            <li><div class="g-plusone-wrapper"><div class="g-plusone" data-size="medium" data-annotation="none"></div></div></li>
-          </ul>
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>         
         </div>
       </div>
     </div>
@@ -35,10 +29,11 @@
 
       <div class="row-fluid">
 
-        <div class="span4">
+        <div class="span12">
           <h4 id="title">Canvas tiles example</h4>
-          <p id="shortdesc">The black grid tiles are generated on the client with an HTML5 canvas. Note that the tile coordinates are ol3 normalized tile coordinates (origin bottom left), not OSM tile coordinates (origin top left).</p>
+          <p id="shortdesc">Renders tiles with coordinates for debugging.</p>
           <div id="docs">
+            <p>The black grid tiles are generated on the client with an HTML5 canvas. Note that the tile coordinates are ol3 normalized tile coordinates (origin bottom left), not OSM tile coordinates (origin top left).</p>
             <p>See the <a href="canvas-tiles.js" target="_blank">canvas-tiles.js source</a> to see how this is done.</p>
           </div>
           <div id="tags">layers, openstreetmap, canvas</div>
@@ -48,8 +43,9 @@
 
     </div>
 
+    <script src="jquery.min.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>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
 
   </body>
 </html>

examples/canvas-tiles.js

@@ -1,20 +1,20 @@
 goog.require('ol.Map');
 goog.require('ol.RendererHints');
 goog.require('ol.View2D');
-goog.require('ol.layer.TileLayer');
-goog.require('ol.projection');
-goog.require('ol.source.DebugTileSource');
+goog.require('ol.layer.Tile');
+goog.require('ol.proj');
 goog.require('ol.source.OSM');
+goog.require('ol.source.TileDebug');
 goog.require('ol.tilegrid.XYZ');
 
 
 var map = new ol.Map({
   layers: [
-    new ol.layer.TileLayer({
+    new ol.layer.Tile({
       source: new ol.source.OSM()
     }),
-    new ol.layer.TileLayer({
-      source: new ol.source.DebugTileSource({
+    new ol.layer.Tile({
+      source: new ol.source.TileDebug({
         projection: 'EPSG:3857',
         tileGrid: new ol.tilegrid.XYZ({
           maxZoom: 22
@@ -22,10 +22,10 @@ var map = new ol.Map({
       })
     })
   ],
-  renderers: ol.RendererHints.createFromQueryData(),
+  renderer: ol.RendererHints.createFromQueryData(),
   target: 'map',
   view: new ol.View2D({
-    center: ol.projection.transform(
+    center: ol.proj.transform(
         [-0.1275, 51.507222], 'EPSG:4326', 'EPSG:3857'),
     zoom: 10
   })

examples/custom-controls.html

@@ -0,0 +1,90 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="chrome=1">
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
+    <link rel="stylesheet" href="../resources/layout.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
+    <style type="text/css">
+      .rotate-north {
+        position: absolute;
+        top: 65px;
+        left: 8px;
+        background: rgba(255,255,255,0.4);
+        border-radius: 4px;
+        padding: 2px;
+      }
+      .ol-touch .rotate-north {
+        top: 80px;
+      }
+      .rotate-north a {
+        display: block;
+        color: white;
+        font-size: 16px;
+        font-family: 'Lucida Grande',Verdana,Geneva,Lucida,Arial,Helvetica,sans-serif;
+        font-weight: bold;
+        margin: 1px;
+        text-decoration: none;
+        text-align: center;
+        border-radius: 2px;
+        height: 22px;
+        width: 22px;
+        background: rgba(0,60,136,0.5);
+      }
+      .ol-touch .rotate-north a {
+        font-size: 20px;
+        height: 30px;
+        width: 30px;
+        line-height: 26px;
+      }
+      .rotate-north a:hover {
+        background: rgba(0,60,136,0.7);
+      }
+    </style>
+    <title>ol3 custom controls example</title>
+  </head>
+  <body>
+
+    <div class="navbar navbar-inverse navbar-fixed-top">
+      <div class="navbar-inner">
+        <div class="container">
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>         
+        </div>
+      </div>
+    </div>
+
+    <div class="container-fluid">
+
+      <div class="row-fluid">
+        <div class="span12">
+          <div id="map" class="map"></div>
+        </div>
+      </div>
+
+      <div class="row-fluid">
+        <div class="span12">
+          <h4 id="title">Custom controls</h4>
+          <p id="shortdesc">This example shows how to create custom controls.</p>
+          <div id="docs">
+            <p>
+              This example creates a "rotate to north" button.
+              See the <a href="custom-controls.js" target="_blank">custom-controls.js
+              source</a> to see how this is done.
+            </p>
+          </div>
+          <div id="tags">
+            custom, control
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="loader.js?id=custom-controls" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
+
+  </body>
+
+</html>

examples/custom-controls.js

@@ -0,0 +1,81 @@
+goog.require('ol');
+goog.require('ol.Map');
+goog.require('ol.RendererHints');
+goog.require('ol.View2D');
+goog.require('ol.control');
+goog.require('ol.control.Control');
+goog.require('ol.layer.Tile');
+goog.require('ol.source.OSM');
+
+
+/**
+ * Define a namespace for the application.
+ */
+window.app = {};
+var app = window.app;
+
+
+//
+// Define rotate to north control.
+//
+
+
+
+/**
+ * @constructor
+ * @extends {ol.control.Control}
+ * @param {Object=} opt_options Control options.
+ */
+app.RotateNorthControl = function(opt_options) {
+
+  var options = opt_options || {};
+
+  var anchor = document.createElement('a');
+  anchor.href = '#rotate-north';
+  anchor.innerHTML = 'N';
+
+  var this_ = this;
+  var handleRotateNorth = function(e) {
+    // prevent #rotate-north anchor from getting appended to the url
+    e.preventDefault();
+    this_.getMap().getView().getView2D().setRotation(0);
+  };
+
+  anchor.addEventListener('click', handleRotateNorth, false);
+  anchor.addEventListener('touchstart', handleRotateNorth, false);
+
+  var element = document.createElement('div');
+  element.className = 'rotate-north ol-unselectable';
+  element.appendChild(anchor);
+
+  ol.control.Control.call(this, {
+    element: element,
+    target: options.target
+  });
+
+};
+ol.inherits(app.RotateNorthControl, ol.control.Control);
+
+
+//
+// Create map, giving it a rotate to north control.
+//
+
+
+var map = new ol.Map({
+  controls: ol.control.defaults().extend([
+    new app.RotateNorthControl()
+  ]),
+  layers: [
+    new ol.layer.Tile({
+      source: new ol.source.OSM()
+    })
+  ],
+  renderer: ol.RendererHints.createFromQueryData(),
+  target: 'map',
+  view: new ol.View2D({
+    center: [0, 0],
+    zoom: 2,
+    rotation: 1
+  })
+});

examples/d3.html

@@ -0,0 +1,53 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="chrome=1">
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../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="loader.js?id=d3" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
+
+  </body>
+</html>

examples/d3.js

@@ -0,0 +1,97 @@
+// 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'
+      })
+    })
+  ],
+  renderer: 'canvas',
+  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/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>

examples/device-orientation.html

@@ -0,0 +1,57 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="chrome=1">
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
+    <link rel="stylesheet" href="../resources/layout.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
+    <title>Device-Orientation example</title>
+  </head>
+  <body>
+
+    <div class="navbar navbar-inverse navbar-fixed-top">
+      <div class="navbar-inner">
+        <div class="container">
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>         
+        </div>
+      </div>
+    </div>
+
+    <div class="container-fluid">
+
+      <div class="row-fluid">
+        <div class="span12">
+          <div id="map" class="map"></div>
+        </div>
+      </div>
+
+      <div class="row-fluid">
+
+        <div class="span12">
+          <h4 id="title">Device orientation example</h4>
+          <label class="checkbox" for="track">
+            <input id="track" type="checkbox"/>track changes
+          </label>
+          <p>&alpha; : <code id="alpha"></code></p>
+          <p>&beta; : <code id="beta"></code></p>
+          <p>&gamma; : <code id="gamma"></code></p>
+          <p>heading : <code id="heading"></code></p>
+          <p id="shortdesc">Listen to DeviceOrientation events</p>
+          <div id="docs">
+            <p>See the <a href="device-orientation.js" target="_blank">device-orientation.js source</a> to see how this is done.</p>
+          </div>
+          <div id="tags">orientation, openstreetmap</div>
+        </div>
+
+      </div>
+
+    </div>
+
+    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="loader.js?id=device-orientation" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
+
+  </body>
+</html>

examples/device-orientation.js

@@ -0,0 +1,47 @@
+goog.require('ol.DeviceOrientation');
+goog.require('ol.Map');
+goog.require('ol.RendererHints');
+goog.require('ol.View2D');
+goog.require('ol.dom.Input');
+goog.require('ol.layer.Tile');
+goog.require('ol.source.OSM');
+
+var view = new ol.View2D({
+  center: [0, 0],
+  zoom: 2
+});
+var map = new ol.Map({
+  layers: [
+    new ol.layer.Tile({
+      source: new ol.source.OSM()
+    })
+  ],
+  renderer: ol.RendererHints.createFromQueryData(),
+  target: 'map',
+  view: view
+});
+
+var deviceOrientation = new ol.DeviceOrientation();
+var track = new ol.dom.Input(document.getElementById('track'));
+track.bindTo('checked', deviceOrientation, 'tracking');
+
+deviceOrientation.on('propertychange', function(event) {
+  // event.key is the changed property name
+  var element = document.getElementById(event.key);
+  if (element) {
+    element.innerHTML = deviceOrientation.get(event.key);
+  }
+});
+
+// tilt the map
+deviceOrientation.on(['change:beta', 'change:gamma'], function(event) {
+  var center = view.getCenter();
+  var resolution = view.getResolution();
+  var beta = event.target.getBeta() || 0;
+  var gamma = event.target.getGamma() || 0;
+
+  center[0] -= resolution * gamma * 25;
+  center[1] += resolution * beta * 25;
+
+  view.setCenter(center);
+});

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

@@ -0,0 +1,55 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="chrome=1">
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
+    <link rel="stylesheet" href="../resources/layout.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
+    <title>Drag-and-Drop image vector example</title>
+  </head>
+  <body>
+
+    <div class="navbar navbar-inverse navbar-fixed-top">
+      <div class="navbar-inner">
+        <div class="container">
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>         
+        </div>
+      </div>
+    </div>
+
+    <div class="container-fluid">
+
+      <div class="row-fluid">
+        <div class="span12">
+          <div id="map" class="map"></div>
+        </div>
+      </div>
+
+      <div class="row-fluid">
+
+        <div class="span4">
+          <h4 id="title">Drag-and-Drop image vector example</h4>
+          <p id="shortdesc">Example of using the drag-and-drop interaction with a <code>ol.source.ImageVector</code>. Drag and drop GPX, GeoJSON, IGC, KML, or TopoJSON files on to the map. Each file is rendered to an image on the client.</p>
+          <div id="docs">
+            <p>See the <a href="drag-and-drop-image-vector.js" target="_blank">drag-and-drop-image-vector.js source</a> to see how this is done.</p>
+          </div>
+          <div id="tags">drag-and-drop-image-vector, gpx, geojson, igc, kml, topojson, vector, image</div>
+        </div>
+        <div class="span4 offset4">
+          <div id="info" class="alert alert-success">
+            &nbsp;
+          </div>
+        </div>
+
+      </div>
+
+    </div>
+
+    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="loader.js?id=drag-and-drop-image-vector" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
+
+  </body>
+</html>

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

@@ -0,0 +1,155 @@
+goog.require('ol.Map');
+goog.require('ol.RendererHints');
+goog.require('ol.View2D');
+goog.require('ol.format.GPX');
+goog.require('ol.format.GeoJSON');
+goog.require('ol.format.IGC');
+goog.require('ol.format.KML');
+goog.require('ol.format.TopoJSON');
+goog.require('ol.interaction');
+goog.require('ol.interaction.DragAndDrop');
+goog.require('ol.layer.Image');
+goog.require('ol.layer.Tile');
+goog.require('ol.source.BingMaps');
+goog.require('ol.source.ImageVector');
+goog.require('ol.source.Vector');
+goog.require('ol.style.Circle');
+goog.require('ol.style.Fill');
+goog.require('ol.style.Stroke');
+goog.require('ol.style.Style');
+
+
+var defaultStyle = {
+  'Point': [new ol.style.Style({
+    image: new ol.style.Circle({
+      fill: new ol.style.Fill({
+        color: 'rgba(255,255,0,0.5)'
+      }),
+      radius: 5,
+      stroke: new ol.style.Stroke({
+        color: '#ff0',
+        width: 1
+      })
+    })
+  })],
+  'LineString': [new ol.style.Style({
+    stroke: new ol.style.Stroke({
+      color: '#f00',
+      width: 3
+    })
+  })],
+  'Polygon': [new ol.style.Style({
+    fill: new ol.style.Fill({
+      color: 'rgba(0,255,255,0.5)'
+    }),
+    stroke: new ol.style.Stroke({
+      color: '#0ff',
+      width: 1
+    })
+  })],
+  'MultiPoint': [new ol.style.Style({
+    image: new ol.style.Circle({
+      fill: new ol.style.Fill({
+        color: 'rgba(255,0,255,0.5)'
+      }),
+      radius: 5,
+      stroke: new ol.style.Stroke({
+        color: '#f0f',
+        width: 1
+      })
+    })
+  })],
+  'MultiLineString': [new ol.style.Style({
+    stroke: new ol.style.Stroke({
+      color: '#0f0',
+      width: 3
+    })
+  })],
+  'MultiPolygon': [new ol.style.Style({
+    fill: new ol.style.Fill({
+      color: 'rgba(0,0,255,0.5)'
+    }),
+    stroke: new ol.style.Stroke({
+      color: '#00f',
+      width: 1
+    })
+  })]
+};
+
+var styleFunction = function(feature, resolution) {
+  var featureStyleFunction = feature.getStyleFunction();
+  if (featureStyleFunction) {
+    return featureStyleFunction.call(feature, resolution);
+  } else {
+    return defaultStyle[feature.getGeometry().getType()];
+  }
+};
+
+var dragAndDropInteraction = new ol.interaction.DragAndDrop({
+  formatConstructors: [
+    ol.format.GPX,
+    ol.format.GeoJSON,
+    ol.format.IGC,
+    ol.format.KML,
+    ol.format.TopoJSON
+  ]
+});
+
+var map = new ol.Map({
+  interactions: ol.interaction.defaults().extend([dragAndDropInteraction]),
+  layers: [
+    new ol.layer.Tile({
+      source: new ol.source.BingMaps({
+        imagerySet: 'Aerial',
+        key: 'Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3'
+      })
+    })
+  ],
+  renderer: ol.RendererHints.createFromQueryData(),
+  target: 'map',
+  view: new ol.View2D({
+    center: [0, 0],
+    zoom: 2
+  })
+});
+
+dragAndDropInteraction.on('addfeatures', function(event) {
+  var vectorSource = new ol.source.Vector({
+    features: event.features,
+    projection: event.projection
+  });
+  map.getLayers().push(new ol.layer.Image({
+    source: new ol.source.ImageVector({
+      source: vectorSource,
+      style: styleFunction
+    })
+  }));
+  var view2D = map.getView().getView2D();
+  view2D.fitExtent(vectorSource.getExtent(), map.getSize());
+});
+
+var displayFeatureInfo = function(pixel) {
+  var features = [];
+  map.forEachFeatureAtPixel(pixel, function(feature, layer) {
+    features.push(feature);
+  });
+  if (features.length > 0) {
+    var info = [];
+    var i, ii;
+    for (i = 0, ii = features.length; i < ii; ++i) {
+      info.push(features[i].get('name'));
+    }
+    document.getElementById('info').innerHTML = info.join(', ') || '&nbsp';
+  } else {
+    document.getElementById('info').innerHTML = '&nbsp;';
+  }
+};
+
+$(map.getViewport()).on('mousemove', function(evt) {
+  var pixel = map.getEventPixel(evt.originalEvent);
+  displayFeatureInfo(pixel);
+});
+
+map.on('singleclick', function(evt) {
+  displayFeatureInfo(evt.pixel);
+});

examples/drag-and-drop.html

@@ -0,0 +1,55 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="chrome=1">
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
+    <link rel="stylesheet" href="../resources/layout.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
+    <title>Drag-and-Drop example</title>
+  </head>
+  <body>
+
+    <div class="navbar navbar-inverse navbar-fixed-top">
+      <div class="navbar-inner">
+        <div class="container">
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>         
+        </div>
+      </div>
+    </div>
+
+    <div class="container-fluid">
+
+      <div class="row-fluid">
+        <div class="span12">
+          <div id="map" class="map"></div>
+        </div>
+      </div>
+
+      <div class="row-fluid">
+
+        <div class="span4">
+          <h4 id="title">Drag-and-Drop example</h4>
+          <p id="shortdesc">Example of using the drag-and-drop interaction. Drag and drop GPX, GeoJSON, IGC, KML, or TopoJSON files on to the map.</p>
+          <div id="docs">
+            <p>See the <a href="drag-and-drop.js" target="_blank">drag-and-drop.js source</a> to see how this is done.</p>
+          </div>
+          <div id="tags">drag-and-drop, gpx, geojson, igc, kml, topojson</div>
+        </div>
+        <div class="span4 offset4">
+          <div id="info" class="alert alert-success">
+            &nbsp;
+          </div>
+        </div>
+
+      </div>
+
+    </div>
+
+    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="loader.js?id=drag-and-drop" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
+
+  </body>
+</html>

examples/drag-and-drop.js

@@ -0,0 +1,151 @@
+goog.require('ol.Map');
+goog.require('ol.View2D');
+goog.require('ol.format.GPX');
+goog.require('ol.format.GeoJSON');
+goog.require('ol.format.IGC');
+goog.require('ol.format.KML');
+goog.require('ol.format.TopoJSON');
+goog.require('ol.interaction');
+goog.require('ol.interaction.DragAndDrop');
+goog.require('ol.layer.Tile');
+goog.require('ol.layer.Vector');
+goog.require('ol.source.BingMaps');
+goog.require('ol.source.Vector');
+goog.require('ol.style.Circle');
+goog.require('ol.style.Fill');
+goog.require('ol.style.Stroke');
+goog.require('ol.style.Style');
+
+
+var defaultStyle = {
+  'Point': [new ol.style.Style({
+    image: new ol.style.Circle({
+      fill: new ol.style.Fill({
+        color: 'rgba(255,255,0,0.5)'
+      }),
+      radius: 5,
+      stroke: new ol.style.Stroke({
+        color: '#ff0',
+        width: 1
+      })
+    })
+  })],
+  'LineString': [new ol.style.Style({
+    stroke: new ol.style.Stroke({
+      color: '#f00',
+      width: 3
+    })
+  })],
+  'Polygon': [new ol.style.Style({
+    fill: new ol.style.Fill({
+      color: 'rgba(0,255,255,0.5)'
+    }),
+    stroke: new ol.style.Stroke({
+      color: '#0ff',
+      width: 1
+    })
+  })],
+  'MultiPoint': [new ol.style.Style({
+    image: new ol.style.Circle({
+      fill: new ol.style.Fill({
+        color: 'rgba(255,0,255,0.5)'
+      }),
+      radius: 5,
+      stroke: new ol.style.Stroke({
+        color: '#f0f',
+        width: 1
+      })
+    })
+  })],
+  'MultiLineString': [new ol.style.Style({
+    stroke: new ol.style.Stroke({
+      color: '#0f0',
+      width: 3
+    })
+  })],
+  'MultiPolygon': [new ol.style.Style({
+    fill: new ol.style.Fill({
+      color: 'rgba(0,0,255,0.5)'
+    }),
+    stroke: new ol.style.Stroke({
+      color: '#00f',
+      width: 1
+    })
+  })]
+};
+
+var styleFunction = function(feature, resolution) {
+  var featureStyleFunction = feature.getStyleFunction();
+  if (featureStyleFunction) {
+    return featureStyleFunction.call(feature, resolution);
+  } else {
+    return defaultStyle[feature.getGeometry().getType()];
+  }
+};
+
+var dragAndDropInteraction = new ol.interaction.DragAndDrop({
+  formatConstructors: [
+    ol.format.GPX,
+    ol.format.GeoJSON,
+    ol.format.IGC,
+    ol.format.KML,
+    ol.format.TopoJSON
+  ]
+});
+
+var map = new ol.Map({
+  interactions: ol.interaction.defaults().extend([dragAndDropInteraction]),
+  layers: [
+    new ol.layer.Tile({
+      source: new ol.source.BingMaps({
+        imagerySet: 'Aerial',
+        key: 'Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3'
+      })
+    })
+  ],
+  renderer: 'canvas',
+  target: 'map',
+  view: new ol.View2D({
+    center: [0, 0],
+    zoom: 2
+  })
+});
+
+dragAndDropInteraction.on('addfeatures', function(event) {
+  var vectorSource = new ol.source.Vector({
+    features: event.features,
+    projection: event.projection
+  });
+  map.getLayers().push(new ol.layer.Vector({
+    source: vectorSource,
+    style: styleFunction
+  }));
+  var view2D = map.getView().getView2D();
+  view2D.fitExtent(vectorSource.getExtent(), map.getSize());
+});
+
+var displayFeatureInfo = function(pixel) {
+  var features = [];
+  map.forEachFeatureAtPixel(pixel, function(feature, layer) {
+    features.push(feature);
+  });
+  if (features.length > 0) {
+    var info = [];
+    var i, ii;
+    for (i = 0, ii = features.length; i < ii; ++i) {
+      info.push(features[i].get('name'));
+    }
+    document.getElementById('info').innerHTML = info.join(', ') || '&nbsp';
+  } else {
+    document.getElementById('info').innerHTML = '&nbsp;';
+  }
+};
+
+$(map.getViewport()).on('mousemove', function(evt) {
+  var pixel = map.getEventPixel(evt.originalEvent);
+  displayFeatureInfo(pixel);
+});
+
+map.on('singleclick', function(evt) {
+  displayFeatureInfo(evt.pixel);
+});

examples/drag-rotate-and-zoom.html

@@ -0,0 +1,51 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="chrome=1">
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
+    <link rel="stylesheet" href="../resources/layout.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
+    <title>Drag rotate and zoom example</title>
+  </head>
+  <body>
+
+    <div class="navbar navbar-inverse navbar-fixed-top">
+      <div class="navbar-inner">
+        <div class="container">
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>         
+        </div>
+      </div>
+    </div>
+
+    <div class="container-fluid">
+
+      <div class="row-fluid">
+        <div class="span12">
+          <div id="map" class="map"></div>
+        </div>
+      </div>
+
+      <div class="row-fluid">
+
+        <div class="span12">
+          <h4 id="title">Drag rotate and zoom example</h4>
+          <p id="shortdesc">A single interaction to drag, rotate, and zoom.</p>
+          <div id="docs">
+            <p><code>Shift</code> + Drag to rotate and zoom the map around its center.</p>
+            <p>See the <a href="drag-rotate-and-zoom.js" target="_blank">drag-rotate-and-zoom.js source</a> to see how this is done.</p>
+          </div>
+          <div id="tags">drag, rotate, zoom, interaction</div>
+        </div>
+
+      </div>
+
+    </div>
+
+    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="loader.js?id=drag-rotate-and-zoom" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
+
+  </body>
+</html>

examples/drag-rotate-and-zoom.js

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

examples/draw-features.html

@@ -0,0 +1,59 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="chrome=1">
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
+    <link rel="stylesheet" href="../resources/layout.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
+    <title>Draw features 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">Draw features example</h4>
+          <p id="shortdesc">Example of using the <code>ol.interaction.Draw</code> interaction.</p>
+          <form class="form-inline">
+            <label>Geometry type &nbsp;</label>
+              <select id="type">
+                <option value="Point">Point</option>
+                <option value="LineString">LineString</option>
+                <option value="Polygon">Polygon</option>
+              </select>
+          </form>
+
+          <div id="docs">
+            <p>See the <a href="draw-features.js" target="_blank">draw-features.js source</a> to see how this is done.</p>
+          </div>
+          <div id="tags">draw, edit, vector</div>
+        </div>
+
+      </div>
+
+    </div>
+
+    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="loader.js?id=draw-features" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
+
+  </body>
+</html>