5.0.0-beta.10

.eslintignore

@@ -1,4 +1,3 @@
 examples/Jugl.js
 examples/resources/
 build/package/**/*webgl*
-config/jsdoc/api/template/static/scripts/

README.md

@@ -19,6 +19,8 @@ Use one of the following methods to use OpenLayers in your project:
 
 * If you just want to add a `<script>` tag to test things out, you can link directly to one of the full builds from [cdnjs](https://cdnjs.com/libraries/openlayers) (not recommended for production)
 
+* For use with Closure Library (rare), install the [`openlayers` package](https://npmjs.com/package/openlayers) and read the [tutorial](http://openlayers.org/en/latest/doc/tutorials/closure.html).
+
 ## Supported Browsers
 
 OpenLayers runs on all modern browsers that support [HTML5](https://html.spec.whatwg.org/multipage/) and [ECMAScript 5](http://www.ecma-international.org/ecma-262/5.1/). This includes Chrome, Firefox, Safari and Edge. For older browsers and platforms like Internet Explorer (down to version 9) and Android 4.x, [polyfills](http://polyfill.io) for `requestAnimationFrame` and `Element.prototype.classList` are required, and using the KML format requires a polyfill for `URL`.

changelog/upgrade-notes.md

@@ -2,39 +2,6 @@
 
 ### Next release
 
-#### Removal of the renderer option for maps
-
-The `renderer` option has been removed from the `Map` constructor.  The purpose of this change is to avoid bundling code in your application that you do not need.  Previously, code for both the Canvas and WebGL renderers was included in all applications - even though most people only use one renderer.  The `Map` constructor now gives you a Canvas (2D) based renderer.  If you want to try the WebGL renderer, you can import the constructor from `ol/WebGLMap`.
-
-Old code:
-```js
-import Map from 'ol/Map';
-
-const canvasMap = new Map({
-  renderer: ['canvas']
-  // other options...
-});
-
-const webglMap = new Map({
-  renderer: ['webgl']
-  // other options...
-});
-```
-
-New code:
-```js
-import Map from 'ol/Map';
-import WebGLMap from 'ol/WebGLMap';
-
-const canvasMap = new Map({
-  // options...
-});
-
-const webglMap = new WebGLMap({
-  // options...
-});
-```
-
 #### Removal of ol.FeatureStyleFunction
 
 The signature of the vector style function passed to the feature has changed. The function now always takes the `feature` and the `resolution` as arguments, the `feature` is no longer bound to `this`.

config/jsdoc/api/conf.json

@@ -1,36 +1,38 @@
 {
-  "opts": {
-    "recurse": true,
-    "template": "config/jsdoc/api/template"
-  },
-  "tags": {
-    "allowUnknownTags": true
-  },
-  "source": {
-    "includePattern": ".+\\.js(doc)?$",
-    "excludePattern": "(^|\\/|\\\\)_",
-    "include": [
-      "src/ol"
-    ]
-  },
-  "plugins": [
-    "plugins/markdown",
-    "config/jsdoc/api/plugins/normalize-exports",
-    "config/jsdoc/api/plugins/inline-options",
-    "config/jsdoc/api/plugins/events",
-    "config/jsdoc/api/plugins/observable",
-    "config/jsdoc/api/plugins/api"
-  ],
-  "markdown": {
-    "parser": "gfm"
-  },
-  "templates": {
-    "cleverLinks": true,
-    "monospaceLinks": true,
-    "default": {
-      "outputSourceFiles": false
+    "opts": {
+        "recurse": true,
+        "template": "config/jsdoc/api/template"
     },
-    "applicationName": "OpenLayers"
-  },
-  "jsVersion": 180
+    "tags": {
+        "allowUnknownTags": true
+    },
+    "source": {
+        "includePattern": ".+\\.js(doc)?$",
+        "excludePattern": "(^|\\/|\\\\)_",
+        "include": [
+            "src",
+            "externs/oli.js",
+            "externs/olx.js"
+        ]
+    },
+    "plugins": [
+        "plugins/markdown",
+        "config/jsdoc/api/plugins/inheritdoc",
+        "config/jsdoc/api/plugins/typedefs",
+        "config/jsdoc/api/plugins/events",
+        "config/jsdoc/api/plugins/observable",
+        "config/jsdoc/api/plugins/api"
+    ],
+    "markdown": {
+        "parser": "gfm"
+    },
+    "templates": {
+        "cleverLinks": true,
+        "monospaceLinks": true,
+        "default": {
+            "outputSourceFiles": false
+        },
+        "applicationName": "OpenLayers"
+    },
+    "jsVersion": 180
 }

config/jsdoc/api/index.md

@@ -1,43 +1,43 @@
 <table><tr>
 <th width="33.3%">Map</th><th width="33.3%">View</th><th width="33.3%">Layers</th>
 </tr><tr>
-<td><p>A [map](module-ol_Map-Map.html) is made of [layers](module-ol_layer_Base-BaseLayer.html), a [view](module-ol_View-View.html) to visualize them, [interactions](module-ol_interaction_Interaction-Interaction.html) to modify map content and [controls](module-ol_control_Control-Control.html) with UI components.</p>
-[Overview](module-ol_Map-Map.html)<br>
-[Creation](module-ol_Map-Map.html#Map)<br>
-[Events](module-ol_MapBrowserEvent-MapBrowserEvent.html)</td>
+<td><p>A [map](ol.Map.html) is made of [layers](ol.layer.html), a [view](ol.View.html) to visualize them, [interactions](ol.interaction.html) to modify map content and [controls](ol.control.html) with UI components.</p>
+[Overview](ol.Map.html)<br>
+[Creation](ol.Map.html#Map)<br>
+[Events](ol.MapBrowserEvent.html)</td>
 <td><p>The view manages the visual parameters of the map view, like resolution or rotation.</p>
-[View](module-ol_View-View.html) with center, projection, resolution and rotation</td>
-<td><p>Layers are lightweight containers that get their data from [sources](module-ol_source_Source-Source.html).</p>
-[layer/Tile](module-ol_layer_Tile-TileLayer.html)<br>
-[layer/Image](module-ol_layer_Image-ImageLayer.html)<br>
-[layer/Vector](module-ol_layer_Vector-VectorLayer.html)<br>
-[layer/VectorTile](module-ol_layer_VectorTile-VectorTileLayer.html)</td>
+[ol.View](ol.View.html) with center, projection, resolution and rotation</td>
+<td><p>Layers are lightweight containers that get their data from [sources](ol.source.html).</p>
+[ol.layer.Tile](ol.layer.Tile.html)<br>
+[ol.layer.Image](ol.layer.Image.html)<br>
+[ol.layer.Vector](ol.layer.Vector.html)<br>
+[ol.layer.VectorTile](ol.layer.VectorTile.html)</td>
 </tr><tr>
 <th>Controls</th><th>Interactions</th><th>Sources and formats</th>
 </tr><tr>
-<td>[Map default controls](module-ol_control_util.html#.defaults)<br>
-[All controls](module-ol_control_Control-Control.html)
+<td>[Map default controls](ol.control.html#.defaults)<br>
+[All controls](ol.control.html)
 </td>
 <td>
-[Map default interactions](module-ol_interaction.html#~defaults)<br>
-Interactions for [vector features](module-ol_Feature-Feature.html)
-<ul><li>[interaction/Select](module-ol_interaction_Select-Select.html)</li>
-<li>[interaction/Draw](module-ol_interaction_Draw-Draw.html)</li>
-<li>[interaction/Modify](module-ol_interaction_Modify-Modify.html)</li></ul>
-[All interactions](module-ol_interaction_Interaction-Interaction.html)</td>
-<td>[Tile sources](module-ol_source_Tile-TileSource.html) for [layer/Tile](module-ol_layer_Tile-TileLayer.html)
-<br>[Image sources](module-ol_source_Image-ImageSource.html) for [layer/Image](module-ol_layer_Image-ImageLayer.html)
-<br>[Vector sources](module-ol_source_Vector-VectorSource.html) for [layer/Vector](module-ol_layer_Vector-VectorLayer.html)
-<br>[Vector tile sources](module-ol_source_VectorTile-VectorTile.html) for [layer/VectorTile](module-ol_layer_VectorTile-VectorTileLayer.html)
-<br>[Formats](module-ol_format_Feature-FeatureFormat.html) for reading/writing vector data
-<br>[format/WMSCapabilities](module-ol_format_WMSCapabilities-WMSCapabilities.html)</td></tr>
+[Map default interactions](ol.interaction.html#.defaults)<br>
+Interactions for [vector features](ol.Feature.html)
+<ul><li>[ol.interaction.Select](ol.interaction.Select.html)</li>
+<li>[ol.interaction.Draw](ol.interaction.Draw.html)</li>
+<li>[ol.interaction.Modify](ol.interaction.Modify.html)</li></ul>
+[All interactions](ol.interaction.html)</td>
+<td>[Tile sources](ol.source.Tile.html) for [ol.layer.Tile](ol.layer.Tile.html)
+<br>[Image sources](ol.source.Image.html) for [ol.layer.Image](ol.layer.Image.html)
+<br>[Vector sources](ol.source.Vector.html) for [ol.layer.Vector](ol.layer.Vector.html)
+<br>[Vector tile sources](ol.source.VectorTile.html) for [ol.layer.VectorTile](ol.layer.VectorTile.html)
+<br>[Formats](ol.format.Feature.html) for reading/writing vector data
+<br>[ol.format.WMSCapabilities](ol.format.WMSCapabilities.html)</td></tr>
 <tr><th>Projections</th><th>Observable objects</th><th>Other components</th></tr>
-<tr><td><p>All coordinates and extents need to be provided in view projection (default: EPSG:3857). To transform, use [proj.transform()](module-ol_proj.html#.transform) and [proj.transformExtent()](module-ol_proj.html#.transformExtent).</p>
-[ol/proj](module-ol_proj.html)</td>
-<td><p>Changes to all [ol/Object](module-ol_Object-BaseObject.html)s can be observed by calling the [object.on('propertychange')](module-ol_Object-BaseObject.html#on) method.  Listeners receive an [ol/Object~ObjectEvent](module-ol_Object-ObjectEvent.html) with information on the changed property and old value.</p>
+<tr><td><p>All coordinates and extents need to be provided in view projection (default: EPSG:3857). To transform, use [ol.proj.transform()](ol.proj.html#.transform) and [ol.proj.transformExtent()](ol.proj.html#.transformExtent).</p>
+[ol.proj](ol.proj.html)</td>
+<td><p>Changes to all [ol.Objects](ol.Object.html) can be observed by calling the [object.on('propertychange')](ol.Object.html#on) method.  Listeners receive an [ol.Object.Event](ol.Object.Event.html) with information on the changed property and old value.</p>
 <td>
-[ol/Geolocation](module-ol_Geolocation.html)<br>
-[ol/Overlay](module-ol_Overlay-Overlay.html)<br></td>
+[ol.Geolocation](ol.Geolocation.html)<br>
+[ol.Overlay](ol.Overlay.html)<br></td>
 </tr></table>
 
 &nbsp;
@@ -52,4 +52,11 @@ The OpenLayers API consists of
 
 Within a major release series, the API will not be changed.  Any changes to the API will be accompanied by a new major release.
 
-*Note*: The API change policy does not cover CSS class names that are used to style the OpenLayers UI. It also does not cover any typedefs and enums.
+*Note*: The API change policy does not cover CSS class names that are used to style the
+OpenLayers UI.
+
+*Note for Closure Compiler users compiling their application code together with OpenLayers*:
+The names of types other than those in the list above (e.g. `ol.Coordinate`) are subject to change. It
+is therefore recommended to either use the resolved type as listed in the API docs (e.g.
+`Array.<number>` instead of `ol.Coordinate`), or pay attention to the upgrade notes, which will list
+the changes for those types.

config/jsdoc/api/plugins/api.js

@@ -1,6 +1,5 @@
 /**
  * Define an @api tag
- * @param {Object} dictionary The tag dictionary.
  */
 exports.defineTags = function(dictionary) {
   dictionary.defineTag('api', {
@@ -9,32 +8,32 @@ exports.defineTags = function(dictionary) {
     canHaveName: false,
     onTagged: function(doclet, tag) {
       includeTypes(doclet);
-      doclet.stability = 'stable';
+      doclet.stability = "stable";
     }
   });
 };
 
 
+
 /*
  * Based on @api annotations, and assuming that items with no @api annotation
  * should not be documented, this plugin removes undocumented symbols
  * from the documentation.
  */
 
-const api = [];
-const classes = {};
-const types = {};
-const modules = {};
+var api = [];
+var classes = {};
+var types = {};
 
 function hasApiMembers(doclet) {
   return doclet.longname.split('#')[0] == this.longname;
 }
 
 function includeAugments(doclet) {
-  const augments = doclet.augments;
+  var augments = doclet.augments;
   if (augments) {
-    let cls;
-    for (let i = augments.length - 1; i >= 0; --i) {
+    var cls;
+    for (var i = augments.length - 1; i >= 0; --i) {
       cls = classes[augments[i]];
       if (cls) {
         includeAugments(cls);
@@ -58,8 +57,10 @@ function includeAugments(doclet) {
             }
           });
         }
-        cls._hideConstructor = true;
-        delete cls.undocumented;
+        if (cls.longname.indexOf('oli.') !== 0) {
+          cls._hideConstructor = true;
+          delete cls.undocumented;
+        }
       }
     }
   }
@@ -67,25 +68,25 @@ function includeAugments(doclet) {
 
 function extractTypes(item) {
   item.type.names.forEach(function(type) {
-    const match = type.match(/^(.*<)?([^>]*)>?$/);
+    var match = type.match(/^(.*<)?([^>]*)>?$/);
     if (match) {
-      modules[match[2]] = true;
       types[match[2]] = true;
     }
   });
 }
 
 function includeTypes(doclet) {
-  if (doclet.params) {
+  if (doclet.params && doclet.kind != 'class') {
     doclet.params.forEach(extractTypes);
   }
   if (doclet.returns) {
     doclet.returns.forEach(extractTypes);
   }
-  if (doclet.properties) {
-    doclet.properties.forEach(extractTypes);
+  if (doclet.isEnum) {
+    types[doclet.meta.code.name] = true;
   }
   if (doclet.type && doclet.meta.code.type == 'MemberExpression') {
+    // types in olx.js
     extractTypes(doclet);
   }
 }
@@ -93,9 +94,13 @@ function includeTypes(doclet) {
 exports.handlers = {
 
   newDoclet: function(e) {
-    const doclet = e.doclet;
+    var doclet = e.doclet;
+    // Keep track of api items - needed in parseComplete to determine classes
+    // with api members.
+    if (doclet.meta.filename == 'olx.js' && doclet.kind == 'typedef') {
+      doclet.undocumented = false;
+    }
     if (doclet.stability) {
-      modules[doclet.longname.split('~').shift()] = true;
       api.push(doclet);
     }
     // Mark explicity defined namespaces - needed in parseComplete to keep
@@ -104,15 +109,14 @@ exports.handlers = {
       doclet.namespace_ = true;
     }
     if (doclet.kind == 'class') {
-      modules[doclet.longname.split('~').shift()] = true;
       classes[doclet.longname] = doclet;
     }
   },
 
   parseComplete: function(e) {
-    const doclets = e.doclets;
-    for (let i = doclets.length - 1; i >= 0; --i) {
-      const doclet = doclets[i];
+    var doclets = e.doclets;
+    for (var i = doclets.length - 1; i >= 0; --i) {
+      var doclet = doclets[i];
       if (doclet.stability || doclet.namespace_) {
         if (doclet.kind == 'class') {
           includeAugments(doclet);
@@ -130,13 +134,6 @@ exports.handlers = {
         // Always document namespaces and items with stability annotation
         continue;
       }
-      if (doclet.kind == 'module' && doclet.longname in modules) {
-        // Document all modules that are referenced by the API
-        continue;
-      }
-      if (doclet.isEnum || doclet.kind == 'typedef') {
-        continue;
-      }
       if (doclet.kind == 'class' && api.some(hasApiMembers, doclet)) {
         // Mark undocumented classes with documented members as unexported.
         // This is used in ../template/tmpl/container.tmpl to hide the

config/jsdoc/api/plugins/events.js

@@ -1,11 +1,11 @@
-const events = {};
-const classes = {};
+var events = {};
+var classes = {};
 
 exports.handlers = {
 
   newDoclet: function(e) {
-    const doclet = e.doclet;
-    let cls;
+    var doclet = e.doclet;
+    var cls;
     if (doclet.kind == 'event') {
       cls = doclet.longname.split('#')[0];
       if (!(cls in events)) {
@@ -18,8 +18,8 @@ exports.handlers = {
   },
 
   parseComplete: function(e) {
-    const doclets = e.doclets;
-    let doclet, i, ii, j, jj, event, fires;
+    var doclets = e.doclets;
+    var doclet, i, ii, j, jj, event, fires;
     for (i = 0, ii = doclets.length - 1; i < ii; ++i) {
       doclet = doclets[i];
       if (doclet.fires) {
@@ -28,7 +28,7 @@ exports.handlers = {
           for (j = 0, jj = doclet.fires.length; j < jj; ++j) {
             event = doclet.fires[j].replace('event:', '');
             if (events[event]) {
-              fires.push.apply(fires, events[event]);
+              fires.push.apply(fires, events[event]);            
             } else {
               fires.push(doclet.fires[j]);
             }

config/jsdoc/api/plugins/inheritdoc.js

@@ -0,0 +1,109 @@
+/*
+ * This is a hack to prevent inheritDoc tags from entirely removing
+ * documentation of the method that inherits the documentation.
+ *
+ * TODO: Remove this hack when https://github.com/jsdoc3/jsdoc/issues/53
+ * is addressed.
+ */
+
+
+exports.defineTags = function(dictionary) {
+  dictionary.defineTag('inheritDoc', {
+    mustHaveValue: false,
+    canHaveType: false,
+    canHaveName: false,
+    onTagged: function(doclet, tag) {
+      doclet.inheritdoc = true;
+    }
+  });
+};
+
+
+var lookup = {};
+var incompleteByClass = {};
+var keepKeys = ['comment', 'meta', 'name', 'memberof', 'longname', 'augment',
+    'stability'];
+
+exports.handlers = {
+
+  newDoclet: function(e) {
+    var doclet = e.doclet;
+    var incompletes;
+    if (!(doclet.longname in lookup)) {
+      lookup[doclet.longname] = [];
+    }
+    lookup[doclet.longname].push(doclet);
+    if (doclet.inheritdoc) {
+      if (!(doclet.memberof in incompleteByClass)) {
+        incompleteByClass[doclet.memberof] = [];
+      }
+      incompletes = incompleteByClass[doclet.memberof];
+      if (incompletes.indexOf(doclet.name) == -1) {
+        incompletes.push(doclet.name);
+      }
+    }
+  },
+
+  parseComplete: function(e) {
+    var ancestors, candidate, candidates, doclet, i, j, k, l, key;
+    var incompleteDoclet, stability, incomplete, incompletes;
+    var doclets = e.doclets;
+    for (i = doclets.length - 1; i >= 0; --i) {
+      doclet = doclets[i];
+      if (doclet.augments) {
+        ancestors = [].concat(doclet.augments);
+      }
+      incompletes = incompleteByClass[doclet.longname];
+      if (ancestors && incompletes) {
+        // collect ancestors from the whole hierarchy
+        for (j = 0; j < ancestors.length; ++j) {
+          candidates = lookup[ancestors[j]];
+          if (candidates) {
+            for (k = candidates.length - 1; k >= 0; --k) {
+              candidate = candidates[k];
+              if (candidate.augments) {
+                ancestors = ancestors.concat(candidate.augments);
+              }
+            }
+          }
+        }
+        // walk through all inheritDoc members
+        for (j = incompletes.length - 1; j >= 0; --j) {
+          incomplete = incompletes[j];
+          candidates = lookup[doclet.longname + '#' + incomplete];
+          if (candidates) {
+            // get the incomplete doclet that needs to be augmented
+            for (k = candidates.length - 1; k >= 0; --k) {
+              incompleteDoclet = candidates[k];
+              if (incompleteDoclet.inheritdoc) {
+                break;
+              }
+            }
+          }
+          // find the documented ancestor
+          for (k = ancestors.length - 1; k >= 0; --k) {
+            candidates = lookup[ancestors[k] + '#' + incomplete];
+            if (candidates) {
+              for (l = candidates.length - 1; l >= 0; --l) {
+                candidate = candidates[l];
+                if (candidate && !candidate.inheritdoc) {
+                  stability = candidate.stability || incompleteDoclet.stability;
+                  if (stability) {
+                    incompleteDoclet.stability = stability;
+                    for (key in candidate) {
+                      if (candidate.hasOwnProperty(key) &&
+                          keepKeys.indexOf(key) == -1) {
+                        incompleteDoclet[key] = candidate[key];
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+};

config/jsdoc/api/plugins/inline-options.js

@@ -1,49 +0,0 @@
-/**
- * @filedesc
- * Inlines option params from typedefs
- */
-
-const properties = {};
-
-exports.handlers = {
-
-  /**
-   * Collects all typedefs, keyed by longname
-   * @param {Object} e Event object.
-   */
-  newDoclet: function(e) {
-    if (e.doclet.kind == 'typedef' && e.doclet.properties) {
-      properties[e.doclet.longname] = e.doclet.properties;
-    }
-  },
-
-  /**
-   * Adds `options.*` params for options that match the longname of one of the
-   * collected typedefs.
-   * @param {Object} e Event object.
-   */
-  parseComplete: function(e) {
-    const doclets = e.doclets;
-    for (let i = 0, ii = doclets.length; i < ii; ++i) {
-      const doclet = doclets[i];
-      if (doclet.params) {
-        const params = doclet.params;
-        for (let j = 0, jj = params.length; j < jj; ++j) {
-          const param = params[j];
-          if (param.type && param.type.names) {
-            const type = param.type.names[0];
-            if (type in properties) {
-              param.type.names[0] = type;
-              params.push.apply(params, properties[type].map(p => {
-                const property = Object.assign({}, p);
-                property.name = `${param.name}.${property.name}`;
-                return property;
-              }));
-            }
-          }
-        }
-      }
-    }
-  }
-
-};

config/jsdoc/api/plugins/normalize-exports.js

@@ -1,106 +0,0 @@
-/**
- * @filedesc
- * Expands module path type to point to default export when no name is given
- */
-
-const fs = require('fs');
-const path = require('path');
-
-let moduleRoot;
-
-function addDefaultExportPath(obj) {
-  if (!Array.isArray(obj)) {
-    obj = obj.names;
-  }
-  obj.forEach((name, index) => {
-    const matches = name.match(/module\:([^>|),\.<]|)+/g);
-    if (matches) {
-      matches.forEach(module => {
-        if (!/[~\.]/.test(module)) {
-          const checkFile = path.resolve(moduleRoot, module.replace(/^module\:/, ''));
-          const file = fs.readFileSync(require.resolve(checkFile), 'utf-8');
-          const lines = file.split('\n');
-          let hasDefaultExport = false;
-          for (let i = 0, ii = lines.length; i < ii; ++i) {
-            hasDefaultExport = hasDefaultExport || /^export default [^\{]/.test(lines[i]);
-            const match = lines[i].match(/^export default ([A-Za-z_$][A-Za-z0-9_$]+);$/);
-            if (match) {
-              // Use variable name if default export is assigned to a variable.
-              obj[index] = name = name.replace(module, `${module}~${match[1]}`);
-              return;
-            }
-          }
-          if (hasDefaultExport) {
-            // Duplicate last part if default export is not assigned to a variable.
-            obj[index] = name = name.replace(module, `${module}~${module.split('/').pop()}`);
-          }
-        }
-      });
-    }
-  });
-}
-
-function replaceLinks(comment) {
-  const matches = comment.match(/\{@link [^\} #]+}/g);
-  if (matches) {
-    const modules = matches.map(m => {
-      const mm = m.match(/(module:[^\}]+)}$/);
-      if (mm) {
-        return mm[1];
-      }
-    }).filter(m => !!m);
-    const newModules = modules.concat();
-    addDefaultExportPath(newModules);
-    modules.forEach((module, i) => {
-      comment = comment.replace(module, newModules[i]);
-    });
-  }
-  return comment;
-}
-
-exports.handlers = {
-
-  /**
-   * Adds default export to module path types without name
-   * @param {Object} e Event object.
-   */
-  newDoclet: function(e) {
-    const doclet = e.doclet;
-    if (doclet.kind == 'module') {
-      const levelsUp = doclet.longname.replace(/^module\:/, '').split('/');
-      if (doclet.meta.filename != 'index.js') {
-        levelsUp.pop();
-      }
-      const pathArgs = [doclet.meta.path].concat(levelsUp.map(() => '../'));
-      moduleRoot = path.resolve.apply(null, pathArgs);
-    } else {
-      if (doclet.description) {
-        doclet.description = replaceLinks(doclet.description);
-      }
-      if (doclet.classdesc) {
-        doclet.classdesc = replaceLinks(doclet.classdesc);
-      }
-
-      const module = doclet.longname.split('#').shift();
-      if (module.indexOf('module:') == 0 && module.indexOf('.') !== -1) {
-        doclet.longname = doclet.longname.replace(module, module.replace('.', '~'));
-      }
-      if (doclet.augments) {
-        addDefaultExportPath(doclet.augments);
-      }
-      if (doclet.params) {
-        doclet.params.forEach(p => addDefaultExportPath(p.type));
-      }
-      if (doclet.returns) {
-        doclet.returns.forEach(r => addDefaultExportPath(r.type));
-      }
-      if (doclet.properties) {
-        doclet.properties.forEach(p => addDefaultExportPath(p.type));
-      }
-      if (doclet.type) {
-        addDefaultExportPath(doclet.type);
-      }
-    }
-  }
-
-};

config/jsdoc/api/plugins/observable.js

@@ -1,25 +1,25 @@
-const classes = {};
-const observables = {};
+var classes = {};
+var observables = {};
 
 exports.handlers = {
 
   newDoclet: function(e) {
-    const doclet = e.doclet;
+    var doclet = e.doclet;
     if (doclet.kind == 'class') {
       classes[doclet.longname] = doclet;
     }
   },
 
   parseComplete: function(e) {
-    const doclets = e.doclets;
-    let cls, doclet, event, i, ii, observable;
+    var doclets = e.doclets;
+    var cls, doclet, event, i, ii, observable;
     for (i = 0, ii = doclets.length - 1; i < ii; ++i) {
       doclet = doclets[i];
       cls = classes[doclet.longname.split('#')[0]];
       if (typeof doclet.observable == 'string' && cls) {
-        let name = doclet.name.replace(/^[sg]et/, '');
+        var name = doclet.name.replace(/^[sg]et/, '');
         name = name.substr(0, 1).toLowerCase() + name.substr(1);
-        const key = doclet.longname.split('#')[0] + '#' + name;
+        var key = doclet.longname.split('#')[0] + '#' + name;
         doclet.observable = key;
         if (!observables[key]) {
           observables[key] = {};
@@ -27,7 +27,7 @@ exports.handlers = {
         observable = observables[key];
         observable.name = name;
         observable.readonly = typeof observable.readonly == 'boolean' ?
-          observable.readonly : true;
+            observable.readonly : true;
         if (doclet.name.indexOf('get') === 0) {
           observable.type = doclet.returns[0].type;
           observable.description = doclet.returns[0].description;
@@ -47,7 +47,7 @@ exports.handlers = {
         if (!cls.fires) {
           cls.fires = [];
         }
-        event = 'module:ol/Object~ObjectEvent#event:change:' + name;
+        event = 'ol.Object.Event#event:change:' + name;
         if (cls.fires.indexOf(event) == -1) {
           cls.fires.push(event);
         }

config/jsdoc/api/plugins/typedefs.js

@@ -1,27 +1,49 @@
 /*
+ * Converts olx.js @type annotations into properties of the previous @typedef.
  * Changes @enum annotations into @typedef.
  */
 
+var lastOlxTypedef = null;
+var olxTypes = {};
+// names of the olx typenames
+var olxTypeNames = [];
 // types that are undefined or typedefs containing undefined
-let undefinedLikes = null;
+var undefinedLikes = null;
+
+function addSubparams(params) {
+  for (var j = 0, jj = params.length; j < jj; ++j) {
+    var param = params[j];
+    var types = param.type.names;
+    for (var k = 0, kk = types.length; k < kk; ++k) {
+      var name = types[k];
+      if (name in olxTypes) {
+        param.subparams = olxTypes[name];
+        // TODO addSubparams(param.subparams);
+        // TODO Do we need to support multiple object literal types per
+        // param?
+        break;
+      }
+    }
+  }
+}
 
 /**
- * Changes the description of the param if it is required.
- * @param {Object} doclet The doclet.
- * @returns {Object} The modified doclet.
+ * Changes the description of the param, if it is found to be a required
+ * option of an olxTypeName.
  */
-function markRequiredIfNeeded(doclet) {
-  const memberof = doclet.memberof;
-  if (!memberof) {
+function markRequiredIfNeeded(doclet){
+  var memberof = doclet.memberof;
+  // only check doclets that belong to an olxTypeName
+  if (!memberof || olxTypeNames.indexOf(memberof) == -1) {
     return doclet;
   }
 
-  const types = doclet.type.names;
-  let isRequiredParam = true;
+  var types = doclet.type.names;
+  var isRequiredParam = true;
 
   // iterate over all types that are like-undefined (see above for explanation)
-  for (let idx = undefinedLikes.length - 1; idx >= 0; idx--) {
-    const undefinedLike = undefinedLikes[idx];
+  for (var idx = undefinedLikes.length - 1; idx >= 0; idx--) {
+    var undefinedLike = undefinedLikes[idx];
     // … if the current types contains a type that is undefined-like,
     // it is not required.
     if (types.indexOf(undefinedLike) != -1) {
@@ -30,9 +52,9 @@ function markRequiredIfNeeded(doclet) {
   }
 
   if (isRequiredParam) {
-    const reqSnippet = '<span class="required-option">Required.</span></p>';
-    const endsWithP = /<\/p>$/i;
-    let description = doclet.description;
+    var reqSnippet = '<span class="required-option">Required.</span></p>';
+    var endsWithP = /<\/p>$/i;
+    var description = doclet.description;
     if (description && endsWithP.test(description)) {
       description = description.replace(endsWithP, ' ' + reqSnippet);
     } else if (doclet.description === undefined) {
@@ -47,14 +69,13 @@ function markRequiredIfNeeded(doclet) {
  * Iterates over all doclets and finds the names of types that contain
  * undefined. Stores the names in the global variable undefinedLikes, so
  * that e.g. markRequiredIfNeeded can use these.
- * @param {Array} doclets The doclets.
  */
 function findTypesLikeUndefined(doclets) {
   undefinedLikes = ['undefined']; // include type 'undefined' explicitly
-  for (let i = doclets.length - 1; i >= 0; --i) {
-    const doclet = doclets[i];
-    if (doclet.kind === 'typedef') {
-      const types = doclet.type.names;
+  for (var i = doclets.length - 1; i >= 0; --i) {
+    var doclet = doclets[i];
+    if(doclet.kind === 'typedef') {
+      var types = doclet.type.names;
       if (types.indexOf('undefined') !== -1) {
         // the typedef contains 'undefined', so it self is undefinedLike.
         undefinedLikes.push(doclet.longname);
@@ -66,8 +87,20 @@ function findTypesLikeUndefined(doclets) {
 exports.handlers = {
 
   newDoclet: function(e) {
-    const doclet = e.doclet;
-    if (doclet.isEnum) {
+    var doclet = e.doclet;
+    if (doclet.meta.filename == 'olx.js') {
+      if (doclet.kind == 'typedef') {
+        lastOlxTypedef = doclet;
+        olxTypeNames.push(doclet.longname);
+        olxTypes[doclet.longname] = [];
+        doclet.properties = [];
+      } else if (lastOlxTypedef && doclet.memberof == lastOlxTypedef.longname) {
+        lastOlxTypedef.properties.push(doclet);
+        olxTypes[lastOlxTypedef.longname].push(doclet);
+      } else {
+        lastOlxTypedef = null;
+      }
+    } else if (doclet.isEnum) {
       // We never export enums, so we document them like typedefs
       doclet.kind = 'typedef';
       delete doclet.isEnum;
@@ -75,10 +108,15 @@ exports.handlers = {
   },
 
   parseComplete: function(e) {
-    const doclets = e.doclets;
+    var doclets = e.doclets;
     findTypesLikeUndefined(doclets);
-    for (let i = doclets.length - 1; i >= 0; --i) {
-      markRequiredIfNeeded(doclets[i]);
+    for (var i = doclets.length - 1; i >= 0; --i) {
+      var doclet = doclets[i];
+      var params = doclet.params;
+      if (params) {
+        addSubparams(params);
+      }
+      markRequiredIfNeeded(doclet);
     }
   }
 

config/jsdoc/api/readme.md

@@ -47,6 +47,21 @@ ol.MapBrowserEventType = {
 ```
 Note the value of the `@event` annotation. The text before the hash refers to the event class that the event belongs to, and the text after the hash is the type of the event.
 
+To export event properties, they need to be defined in `externs/oli.js` (also see `readme.md` in `externs/`) and marked with an @api annotation:
+```js
+/** @interface */
+oli.MapBrowserEvent;
+
+/**
+ * @type {ol.Coordinate}
+ * @api
+ */
+oli.MapBrowserEvent.prototype.coordinate;
+
+// ...
+
+};
+```
 To document which events are fired by a class or method, the `@fires` annotation is used:
 ```js
 /**

config/jsdoc/api/template/publish.js

@@ -1,164 +1,152 @@
 /*global env: true */
-
-const hasOwnProp = Object.prototype.hasOwnProperty;
-
-// Work around an issue with hasOwnProperty in JSDoc's templateHelper.js.
-//TODO Fix in JSDoc.
-Object.prototype.hasOwnProperty = function(property) {
-  return property in this;
-};
-
-const template = require('jsdoc/lib/jsdoc/template');
-const fs = require('jsdoc/lib/jsdoc/fs');
-const path = require('jsdoc/lib/jsdoc/path');
-const taffy = require('taffydb').taffy;
-const handle = require('jsdoc/lib/jsdoc/util/error').handle;
-const helper = require('jsdoc/lib/jsdoc/util/templateHelper');
-const _ = require('underscore');
-const htmlsafe = helper.htmlsafe;
-const linkto = helper.linkto;
-const resolveAuthorLinks = helper.resolveAuthorLinks;
-const outdir = env.opts.destination;
-
-// Work around an issue with hasOwnProperty in JSDoc's templateHelper.js.
-//TODO Fix in JSDoc.
-Object.prototype.hasOwnProperty = hasOwnProp;
-
-let view;
-let data;
+var template = require('jsdoc/lib/jsdoc/template'),
+    fs = require('jsdoc/lib/jsdoc/fs'),
+    path = require('jsdoc/lib/jsdoc/path'),
+    taffy = require('taffydb').taffy,
+    handle = require('jsdoc/lib/jsdoc/util/error').handle,
+    helper = require('jsdoc/lib/jsdoc/util/templateHelper'),
+    _ = require('underscore'),
+    htmlsafe = helper.htmlsafe,
+    linkto = helper.linkto,
+    resolveAuthorLinks = helper.resolveAuthorLinks,
+    scopeToPunc = helper.scopeToPunc,
+    hasOwnProp = Object.prototype.hasOwnProperty,
+    data,
+    view,
+    outdir = env.opts.destination;
 
 function find(spec) {
-  return helper.find(data, spec);
+    return helper.find(data, spec);
 }
 
 function tutoriallink(tutorial) {
-  return helper.toTutorial(tutorial, null, {tag: 'em', classname: 'disabled', prefix: 'Tutorial: '});
+    return helper.toTutorial(tutorial, null, { tag: 'em', classname: 'disabled', prefix: 'Tutorial: ' });
 }
 
 function getAncestorLinks(doclet) {
-  return helper.getAncestorLinks(data, doclet);
+    return helper.getAncestorLinks(data, doclet);
 }
 
 function hashToLink(doclet, hash) {
-  if (!/^(#.+)/.test(hash)) {
-    return hash;
-  }
+    if ( !/^(#.+)/.test(hash) ) { return hash; }
 
-  let url = helper.createLink(doclet);
+    var url = helper.createLink(doclet);
 
-  url = url.replace(/(#.+|$)/, hash);
-  return '<a href="' + url + '">' + hash + '</a>';
+    url = url.replace(/(#.+|$)/, hash);
+    return '<a href="' + url + '">' + hash + '</a>';
 }
 
 function needsSignature(doclet) {
-  let needsSig = false;
+    var needsSig = false;
 
-  // function and class definitions always get a signature
-  if (doclet.kind === 'function' || doclet.kind === 'class') {
-    needsSig = true;
-  } else if (doclet.kind === 'typedef' && doclet.type && doclet.type.names &&
-      doclet.type.names.length) {
-    // typedefs that contain functions get a signature, too
-    for (let i = 0, l = doclet.type.names.length; i < l; i++) {
-      if (doclet.type.names[i].toLowerCase() === 'function') {
+    // function and class definitions always get a signature
+    if (doclet.kind === 'function' || doclet.kind === 'class') {
         needsSig = true;
-        break;
-      }
     }
-  }
+    // typedefs that contain functions get a signature, too
+    else if (doclet.kind === 'typedef' && doclet.type && doclet.type.names &&
+        doclet.type.names.length) {
+        for (var i = 0, l = doclet.type.names.length; i < l; i++) {
+            if (doclet.type.names[i].toLowerCase() === 'function') {
+                needsSig = true;
+                break;
+            }
+        }
+    }
 
-  return needsSig;
+    return needsSig;
 }
 
 function addSignatureParams(f) {
-  const params = helper.getSignatureParams(f, 'optional');
+    var params = helper.getSignatureParams(f, 'optional');
 
-  f.signature = (f.signature || '') + '(' + params.join(', ') + ')';
+    f.signature = (f.signature || '') + '('+params.join(', ')+')';
 }
 
 function addSignatureReturns(f) {
-  const returnTypes = helper.getSignatureReturns(f);
+    var returnTypes = helper.getSignatureReturns(f);
 
-  f.signature = '<span class="signature">' + (f.signature || '') + '</span>';
+    f.signature = '<span class="signature">'+(f.signature || '') + '</span>';
 
-  if (returnTypes.length) {
-    f.signature += '<span class="glyphicon glyphicon-circle-arrow-right"></span><span class="type-signature returnType">' + (returnTypes.length ? '{' + returnTypes.join('|') + '}' : '') + '</span>';
-  }
+    if (returnTypes.length) {
+        f.signature += '<span class="glyphicon glyphicon-circle-arrow-right"></span><span class="type-signature returnType">'+(returnTypes.length ? '{'+returnTypes.join('|')+'}' : '')+'</span>';
+    }
 }
 
 function addSignatureTypes(f) {
-  const types = helper.getSignatureTypes(f);
+    var types = helper.getSignatureTypes(f);
 
-  f.signature = (f.signature || '') + '<span class="type-signature">' + (types.length ? ' :' + types.join('|') : '') + ' </span>';
+    f.signature = (f.signature || '') + '<span class="type-signature">'+(types.length? ' :'+types.join('|') : '')+' </span>';
 }
 
 function shortenPaths(files, commonPrefix) {
-  // always use forward slashes
-  const regexp = new RegExp('\\\\', 'g');
+    // always use forward slashes
+    var regexp = new RegExp('\\\\', 'g');
 
-  Object.keys(files).forEach(function(file) {
-    files[file].shortened = files[file].resolved.replace(commonPrefix, '')
-      .replace(regexp, '/');
-  });
+    Object.keys(files).forEach(function(file) {
+        files[file].shortened = files[file].resolved.replace(commonPrefix, '')
+            .replace(regexp, '/');
+    });
 
-  return files;
+    return files;
 }
 
 function resolveSourcePath(filepath) {
-  return path.resolve(process.cwd(), filepath);
+    return path.resolve(process.cwd(), filepath);
 }
 
 function getPathFromDoclet(doclet) {
-  if (!doclet.meta) {
-    return;
-  }
+    if (!doclet.meta) {
+        return;
+    }
 
-  const filepath = doclet.meta.path && doclet.meta.path !== 'null' ?
-    doclet.meta.path + '/' + doclet.meta.filename.split(/[\/\\]/).pop() :
-    doclet.meta.filename;
+    var filepath = doclet.meta.path && doclet.meta.path !== 'null' ?
+        doclet.meta.path + '/' + doclet.meta.filename.split(/[\/\\]/).pop() :
+        doclet.meta.filename;
 
-  return filepath;
+    return filepath;
 }
 
 function generate(title, docs, filename, resolveLinks) {
-  resolveLinks = resolveLinks === false ? false : true;
+    resolveLinks = resolveLinks === false ? false : true;
 
-  const docData = {
-    filename: filename,
-    title: title,
-    docs: docs,
-    packageInfo: (find({kind: 'package'}) || []) [0]
-  };
+    var docData = {
+        filename: filename,
+        title: title,
+        docs: docs,
+        packageInfo: ( find({kind: 'package'}) || [] ) [0]
+    };
 
-  const outpath = path.join(outdir, filename);
-  let html = view.render('container.tmpl', docData);
+    var outpath = path.join(outdir, filename),
+        html = view.render('container.tmpl', docData);
 
-  if (resolveLinks) {
-    html = helper.resolveLinks(html); // turn {@link foo} into <a href="foodoc.html">foo</a>
-  }
+    if (resolveLinks) {
+        html = helper.resolveLinks(html); // turn {@link foo} into <a href="foodoc.html">foo</a>
+    }
 
-  fs.writeFileSync(outpath, html, 'utf8');
+    fs.writeFileSync(outpath, html, 'utf8');
 }
 
 function generateSourceFiles(sourceFiles) {
-  Object.keys(sourceFiles).forEach(function(file) {
-    let source;
-    // links are keyed to the shortened path in each doclet's `meta.filename` property
-    const sourceOutfile = helper.getUniqueFilename(sourceFiles[file].shortened);
-    helper.registerLink(sourceFiles[file].shortened, sourceOutfile);
+    Object.keys(sourceFiles).forEach(function(file) {
+        var source;
+        // links are keyed to the shortened path in each doclet's `meta.filename` property
+        var sourceOutfile = helper.getUniqueFilename(sourceFiles[file].shortened);
+        helper.registerLink(sourceFiles[file].shortened, sourceOutfile);
 
-    try {
-      source = {
-        kind: 'source',
-        code: helper.htmlsafe(fs.readFileSync(sourceFiles[file].resolved, 'utf8'))
-      };
-    } catch (e) {
-      handle(e);
-    }
+        try {
+            source = {
+                kind: 'source',
+                code: helper.htmlsafe( fs.readFileSync(sourceFiles[file].resolved, 'utf8') )
+            };
+        }
+        catch(e) {
+            handle(e);
+        }
 
-    generate('Source: ' + sourceFiles[file].shortened, [source], sourceOutfile,
-      false);
-  });
+        generate('Source: ' + sourceFiles[file].shortened, [source], sourceOutfile,
+            false);
+    });
 }
 
 /**
@@ -173,348 +161,346 @@ function generateSourceFiles(sourceFiles) {
  * @param {Array.<module:jsdoc/doclet.Doclet>} modules - The array of module doclets to search.
  */
 function attachModuleSymbols(doclets, modules) {
-  const symbols = {};
+    var symbols = {};
 
-  // build a lookup table
-  doclets.forEach(function(symbol) {
-    symbols[symbol.longname] = symbol;
-  });
+    // build a lookup table
+    doclets.forEach(function(symbol) {
+        symbols[symbol.longname] = symbol;
+    });
 
-  modules.forEach(function(module) {
-    if (symbols[module.longname]) {
-      module.module = symbols[module.longname];
-      module.module.name = module.module.name.replace('module:', 'require("') + '")';
-    }
-  });
+    return modules.map(function(module) {
+        if (symbols[module.longname]) {
+            module.module = symbols[module.longname];
+            module.module.name = module.module.name.replace('module:', 'require("') + '")';
+        }
+    });
 }
 
 /**
  * Create the navigation sidebar.
  * @param {object} members The members that will be used to create the sidebar.
- * @param {Array<Object>} members.classes Classes.
- * @param {Array<Object>} members.externals Externals.
- * @param {Array<Object>} members.globals Globals.
- * @param {Array<Object>} members.mixins Mixins.
- * @param {Array<Object>} members.modules Modules.
- * @param {Array<Object>} members.namespaces Namespaces.
- * @param {Array<Object>} members.tutorials Tutorials.
- * @param {Array<Object>} members.events Events.
+ * @param {array<object>} members.classes
+ * @param {array<object>} members.externals
+ * @param {array<object>} members.globals
+ * @param {array<object>} members.mixins
+ * @param {array<object>} members.modules
+ * @param {array<object>} members.namespaces
+ * @param {array<object>} members.tutorials
+ * @param {array<object>} members.events
  * @return {string} The HTML for the navigation sidebar.
  */
 function buildNav(members) {
-  const nav = [];
-  // merge namespaces and classes, then sort
-  const merged = members.modules.concat(members.classes);
-  merged.sort(function(a, b) {
-    if (a.longname > b.longname) {
-      return 1;
-    }
-    if (a.longname < b.longname) {
-      return -1;
-    }
-    return 0;
-  });
-  _.each(merged, function(v) {
-    // exclude interfaces from sidebar
-    if (v.interface !== true) {
-      if (v.kind == 'module') {
-        nav.push({
-          type: 'module',
-          longname: v.longname,
-          name: v.name,
-          members: find({
-            kind: 'member',
-            memberof: v.longname
-          }),
-          methods: find({
-            kind: 'function',
-            memberof: v.longname
-          }),
-          typedefs: find({
-            kind: 'typedef',
-            memberof: v.longname
-          }),
-          events: find({
-            kind: 'event',
-            memberof: v.longname
-          })
-        });
+    var nav = [];
+    // merge namespaces and classes, then sort
+    var merged = members.namespaces.concat(members.classes);
+    merged.sort(function (a, b) {
+      if (a.longname > b.longname)
+        return 1;
+      if (a.longname < b.longname)
+        return -1;
+      return 0;
+    });
+    _.each(merged, function (v) {
+      // exclude 'olx' and interfaces from sidebar
+      if (v.longname.indexOf('olx') !== 0 && v.interface !== true) {
+          if (v.kind == 'namespace') {
+            nav.push({
+                type: 'namespace',
+                longname: v.longname,
+                name: v.name,
+                members: find({
+                    kind: 'member',
+                    memberof: v.longname
+                }),
+                methods: find({
+                    kind: 'function',
+                    memberof: v.longname
+                }),
+                typedefs: find({
+                    kind: 'typedef',
+                    memberof: v.longname
+                }),
+                events: find({
+                    kind: 'event',
+                    memberof: v.longname
+                })
+            });
+          }
+          if (v.kind == 'class') {
+            nav.push({
+                type: 'class',
+                longname: v.longname,
+                name: v.name,
+                members: find({
+                    kind: 'member',
+                    memberof: v.longname
+                }),
+                methods: find({
+                    kind: 'function',
+                    memberof: v.longname
+                }),
+                typedefs: find({
+                    kind: 'typedef',
+                    memberof: v.longname
+                }),
+                fires: v.fires,
+                events: find({
+                    kind: 'event',
+                    memberof: v.longname
+                })
+            });
+          }
       }
-      if (v.kind == 'class') {
-        nav.push({
-          type: 'class',
-          longname: v.longname,
-          name: v.name,
-          members: find({
-            kind: 'member',
-            memberof: v.longname
-          }),
-          methods: find({
-            kind: 'function',
-            memberof: v.longname
-          }),
-          typedefs: find({
-            kind: 'typedef',
-            memberof: v.longname
-          }),
-          fires: v.fires,
-          events: find({
-            kind: 'event',
-            memberof: v.longname
-          })
-        });
-      }
-    }
-  });
-  return nav;
+    });
+    return nav;
 }
 
 
 /**
- * @param {Object} taffyData See <http://taffydb.com/>.
- * @param {Object} opts Options.
- * @param {Object} tutorials Tutorials.
+    @param {TAFFY} taffyData See <http://taffydb.com/>.
+    @param {object} opts
+    @param {Tutorial} tutorials
  */
 exports.publish = function(taffyData, opts, tutorials) {
-  data = taffyData;
+    data = taffyData;
 
-  const conf = env.conf.templates || {};
-  conf['default'] = conf['default'] || {};
+    var conf = env.conf.templates || {};
+    conf['default'] = conf['default'] || {};
 
-  const templatePath = opts.template;
-  view = new template.Template(templatePath + '/tmpl');
+    var templatePath = opts.template;
+    view = new template.Template(templatePath + '/tmpl');
 
-  // claim some special filenames in advance, so the All-Powerful Overseer of Filename Uniqueness
-  // doesn't try to hand them out later
-  const indexUrl = helper.getUniqueFilename('index');
-  // don't call registerLink() on this one! 'index' is also a valid longname
+    // claim some special filenames in advance, so the All-Powerful Overseer of Filename Uniqueness
+    // doesn't try to hand them out later
+    var indexUrl = helper.getUniqueFilename('index');
+    // don't call registerLink() on this one! 'index' is also a valid longname
 
-  const globalUrl = helper.getUniqueFilename('global');
-  helper.registerLink('global', globalUrl);
+    var globalUrl = helper.getUniqueFilename('global');
+    helper.registerLink('global', globalUrl);
 
-  // set up templating
-  view.layout = 'layout.tmpl';
+    // set up templating
+    view.layout = 'layout.tmpl';
 
-  // set up tutorials for helper
-  helper.setTutorials(tutorials);
+    // set up tutorials for helper
+    helper.setTutorials(tutorials);
 
-  data = helper.prune(data);
-  data.sort('longname, version, since');
-  helper.addEventListeners(data);
+    data = helper.prune(data);
+    data.sort('longname, version, since');
+    helper.addEventListeners(data);
 
-  let sourceFiles = {};
-  const sourceFilePaths = [];
-  data().each(function(doclet) {
-    doclet.attribs = '';
+    var sourceFiles = {};
+    var sourceFilePaths = [];
+    data().each(function(doclet) {
+         doclet.attribs = '';
 
-    if (doclet.examples) {
-      doclet.examples = doclet.examples.map(function(example) {
-        let caption, code;
+        if (doclet.examples) {
+            doclet.examples = doclet.examples.map(function(example) {
+                var caption, code;
 
-        if (example.match(/^\s*<caption>([\s\S]+?)<\/caption>(\s*[\n\r])([\s\S]+)$/i)) {
-          caption = RegExp.$1;
-          code    = RegExp.$3;
+                if (example.match(/^\s*<caption>([\s\S]+?)<\/caption>(\s*[\n\r])([\s\S]+)$/i)) {
+                    caption = RegExp.$1;
+                    code    = RegExp.$3;
+                }
+
+                return {
+                    caption: caption || '',
+                    code: code || example
+                };
+            });
+        }
+        if (doclet.see) {
+            doclet.see.forEach(function(seeItem, i) {
+                doclet.see[i] = hashToLink(doclet, seeItem);
+            });
         }
 
-        return {
-          caption: caption || '',
-          code: code || example
-        };
-      });
-    }
-    if (doclet.see) {
-      doclet.see.forEach(function(seeItem, i) {
-        doclet.see[i] = hashToLink(doclet, seeItem);
-      });
-    }
+        // build a list of source files
+        var sourcePath;
+        var resolvedSourcePath;
+        if (doclet.meta) {
+            sourcePath = getPathFromDoclet(doclet);
+            resolvedSourcePath = resolveSourcePath(sourcePath);
+            sourceFiles[sourcePath] = {
+                resolved: resolvedSourcePath,
+                shortened: null
+            };
+            sourceFilePaths.push(resolvedSourcePath);
+        }
+    });
 
-    // build a list of source files
-    let sourcePath;
-    let resolvedSourcePath;
-    if (doclet.meta) {
-      sourcePath = getPathFromDoclet(doclet);
-      resolvedSourcePath = resolveSourcePath(sourcePath);
-      sourceFiles[sourcePath] = {
-        resolved: resolvedSourcePath,
-        shortened: null
-      };
-      sourceFilePaths.push(resolvedSourcePath);
-    }
-  });
+    fs.mkPath(outdir);
 
-  fs.mkPath(outdir);
+    // copy the template's static files to outdir
+    var fromDir = path.join(templatePath, 'static');
+    var staticFiles = fs.ls(fromDir, 3);
 
-  // copy the template's static files to outdir
-  const fromDir = path.join(templatePath, 'static');
-  const staticFiles = fs.ls(fromDir, 3);
-
-  staticFiles.forEach(function(fileName) {
-    const toDir = fs.toDir(fileName.replace(fromDir, outdir));
-    fs.mkPath(toDir);
-    fs.copyFileSync(fileName, toDir);
-  });
-
-  // copy user-specified static files to outdir
-  let staticFilePaths;
-  let staticFileFilter;
-  let staticFileScanner;
-  if (conf['default'].staticFiles) {
-    staticFilePaths = conf['default'].staticFiles.paths || [];
-    staticFileFilter = new (require('jsdoc/lib/jsdoc/src/filter')).Filter(conf['default'].staticFiles);
-    staticFileScanner = new (require('jsdoc/lib/jsdoc/src/scanner')).Scanner();
-
-    staticFilePaths.forEach(function(filePath) {
-      const extraStaticFiles = staticFileScanner.scan([filePath], 10, staticFileFilter);
-
-      extraStaticFiles.forEach(function(fileName) {
-        const sourcePath = fs.statSync(filePath).isDirectory() ? filePath :
-          path.dirname(filePath);
-        const toDir = fs.toDir(fileName.replace(sourcePath, outdir));
+    staticFiles.forEach(function(fileName) {
+        var toDir = fs.toDir( fileName.replace(fromDir, outdir) );
         fs.mkPath(toDir);
         fs.copyFileSync(fileName, toDir);
-      });
     });
-  }
 
-  if (sourceFilePaths.length) {
-    sourceFiles = shortenPaths(sourceFiles, path.commonPrefix(sourceFilePaths));
-  }
-  data().each(function(doclet) {
-    const url = helper.createLink(doclet);
-    helper.registerLink(doclet.longname, url);
+    // copy user-specified static files to outdir
+    var staticFilePaths;
+    var staticFileFilter;
+    var staticFileScanner;
+    if (conf['default'].staticFiles) {
+        staticFilePaths = conf['default'].staticFiles.paths || [];
+        staticFileFilter = new (require('jsdoc/lib/jsdoc/src/filter')).Filter(conf['default'].staticFiles);
+        staticFileScanner = new (require('jsdoc/lib/jsdoc/src/scanner')).Scanner();
 
-    // replace the filename with a shortened version of the full path
-    let docletPath;
-    if (doclet.meta) {
-      docletPath = getPathFromDoclet(doclet);
-      docletPath = sourceFiles[docletPath].shortened;
-      if (docletPath) {
-        doclet.meta.filename = docletPath;
-      }
-    }
-  });
+        staticFilePaths.forEach(function(filePath) {
+            var extraStaticFiles = staticFileScanner.scan([filePath], 10, staticFileFilter);
 
-  data().each(function(doclet) {
-    const url = helper.longnameToUrl[doclet.longname];
-
-    if (url.indexOf('#') > -1) {
-      doclet.id = helper.longnameToUrl[doclet.longname].split(/#/).pop();
-    } else {
-      doclet.id = doclet.name;
+            extraStaticFiles.forEach(function(fileName) {
+                var sourcePath = fs.statSync(filePath).isDirectory() ? filePath :
+                    path.dirname(filePath);
+                var toDir = fs.toDir( fileName.replace(sourcePath, outdir) );
+                fs.mkPath(toDir);
+                fs.copyFileSync(fileName, toDir);
+            });
+        });
     }
 
-    if (needsSignature(doclet)) {
-      addSignatureParams(doclet);
-      addSignatureReturns(doclet);
+    if (sourceFilePaths.length) {
+        sourceFiles = shortenPaths( sourceFiles, path.commonPrefix(sourceFilePaths) );
     }
-  });
+    data().each(function(doclet) {
+        var url = helper.createLink(doclet);
+        helper.registerLink(doclet.longname, url);
 
-  // do this after the urls have all been generated
-  data().each(function(doclet) {
-    doclet.ancestors = getAncestorLinks(doclet);
+        // replace the filename with a shortened version of the full path
+        var docletPath;
+        if (doclet.meta) {
+            docletPath = getPathFromDoclet(doclet);
+            docletPath = sourceFiles[docletPath].shortened;
+            if (docletPath) {
+                doclet.meta.filename = docletPath;
+            }
+        }
+    });
 
-    if (doclet.kind === 'member') {
-      addSignatureTypes(doclet);
+    data().each(function(doclet) {
+        var url = helper.longnameToUrl[doclet.longname];
+
+        if (url.indexOf('#') > -1) {
+            doclet.id = helper.longnameToUrl[doclet.longname].split(/#/).pop();
+        }
+        else {
+            doclet.id = doclet.name;
+        }
+
+        if ( needsSignature(doclet) ) {
+            addSignatureParams(doclet);
+            addSignatureReturns(doclet);
+        }
+    });
+
+    // do this after the urls have all been generated
+    data().each(function(doclet) {
+        doclet.ancestors = getAncestorLinks(doclet);
+
+        if (doclet.kind === 'member') {
+            addSignatureTypes(doclet);
+        }
+
+        if (doclet.kind === 'constant') {
+            addSignatureTypes(doclet);
+            doclet.kind = 'member';
+        }
+    });
+
+    var members = helper.getMembers(data);
+    members.tutorials = tutorials.children;
+
+    // add template helpers
+    view.find = find;
+    view.linkto = linkto;
+    view.resolveAuthorLinks = resolveAuthorLinks;
+    view.tutoriallink = tutoriallink;
+    view.htmlsafe = htmlsafe;
+    view.members = members; //@davidshimjs: To make navigation for customizing
+
+    // once for all
+    view.nav = buildNav(members);
+    attachModuleSymbols( find({ kind: ['class', 'function'], longname: {left: 'module:'} }),
+        members.modules );
+
+    // only output pretty-printed source files if requested; do this before generating any other
+    // pages, so the other pages can link to the source files
+    if (conf['default'].outputSourceFiles) {
+        generateSourceFiles(sourceFiles);
     }
 
-    if (doclet.kind === 'constant') {
-      addSignatureTypes(doclet);
-      doclet.kind = 'member';
-    }
-  });
+    if (members.globals.length) { generate('Global', [{kind: 'globalobj'}], globalUrl); }
 
-  const members = helper.getMembers(data);
-  members.tutorials = tutorials.children;
+    // index page displays information from package.json and lists files
+    var files = find({kind: 'file'});
 
-  // add template helpers
-  view.find = find;
-  view.linkto = linkto;
-  view.resolveAuthorLinks = resolveAuthorLinks;
-  view.tutoriallink = tutoriallink;
-  view.htmlsafe = htmlsafe;
-  view.members = members; //@davidshimjs: To make navigation for customizing
-
-  // once for all
-  view.nav = buildNav(members);
-  attachModuleSymbols(find({kind: ['class', 'function'], longname: {left: 'module:'}}),
-    members.modules);
-
-  // only output pretty-printed source files if requested; do this before generating any other
-  // pages, so the other pages can link to the source files
-  if (conf['default'].outputSourceFiles) {
-    generateSourceFiles(sourceFiles);
-  }
-
-  if (members.globals.length) {
-    generate('Global', [{kind: 'globalobj'}], globalUrl);
-  }
-
-  // index page displays information from package.json and lists files
-  const files = find({kind: 'file'});
-
-  generate('Index',
-    [{kind: 'mainpage', readme: opts.readme, longname: (opts.mainpagetitle) ? opts.mainpagetitle : 'Main Page'}].concat(files),
+    generate('Index',
+        [{kind: 'mainpage', readme: opts.readme, longname: (opts.mainpagetitle) ? opts.mainpagetitle : 'Main Page'}].concat(files),
     indexUrl);
 
-  // set up the lists that we'll use to generate pages
-  const classes = taffy(members.classes);
-  const modules = taffy(members.modules);
-  const namespaces = taffy(members.namespaces);
-  const mixins = taffy(members.mixins);
-  const externals = taffy(members.externals);
+    // set up the lists that we'll use to generate pages
+    var classes = taffy(members.classes);
+    var modules = taffy(members.modules);
+    var namespaces = taffy(members.namespaces);
+    var mixins = taffy(members.mixins);
+    var externals = taffy(members.externals);
 
-  for (const longname in helper.longnameToUrl) {
-    if (hasOwnProp.call(helper.longnameToUrl, longname)) {
-      const myClasses = helper.find(classes, {longname: longname});
-      if (myClasses.length) {
-        generate('Class: ' + myClasses[0].name, myClasses, helper.longnameToUrl[longname]);
-      }
+    for (var longname in helper.longnameToUrl) {
+        if ( hasOwnProp.call(helper.longnameToUrl, longname) ) {
+            var myClasses = helper.find(classes, {longname: longname});
+            if (myClasses.length) {
+                generate('Class: ' + myClasses[0].name, myClasses, helper.longnameToUrl[longname]);
+            }
 
-      const myModules = helper.find(modules, {longname: longname});
-      if (myModules.length) {
-        generate('Module: ' + myModules[0].name, myModules, helper.longnameToUrl[longname]);
-      }
+            var myModules = helper.find(modules, {longname: longname});
+            if (myModules.length) {
+                generate('Module: ' + myModules[0].name, myModules, helper.longnameToUrl[longname]);
+            }
 
-      const myNamespaces = helper.find(namespaces, {longname: longname});
-      if (myNamespaces.length) {
-        generate('Namespace: ' + myNamespaces[0].name, myNamespaces, helper.longnameToUrl[longname]);
-      }
+            var myNamespaces = helper.find(namespaces, {longname: longname});
+            if (myNamespaces.length) {
+                generate('Namespace: ' + myNamespaces[0].name, myNamespaces, helper.longnameToUrl[longname]);
+            }
 
-      const myMixins = helper.find(mixins, {longname: longname});
-      if (myMixins.length) {
-        generate('Mixin: ' + myMixins[0].name, myMixins, helper.longnameToUrl[longname]);
-      }
+            var myMixins = helper.find(mixins, {longname: longname});
+            if (myMixins.length) {
+                generate('Mixin: ' + myMixins[0].name, myMixins, helper.longnameToUrl[longname]);
+            }
 
-      const myExternals = helper.find(externals, {longname: longname});
-      if (myExternals.length) {
-        generate('External: ' + myExternals[0].name, myExternals, helper.longnameToUrl[longname]);
-      }
+            var myExternals = helper.find(externals, {longname: longname});
+            if (myExternals.length) {
+                generate('External: ' + myExternals[0].name, myExternals, helper.longnameToUrl[longname]);
+            }
+        }
     }
-  }
 
-  // TODO: move the tutorial functions to templateHelper.js
-  function generateTutorial(title, tutorial, filename) {
-    const tutorialData = {
-      title: title,
-      header: tutorial.title,
-      content: tutorial.parse(),
-      children: tutorial.children
-    };
+    // TODO: move the tutorial functions to templateHelper.js
+    function generateTutorial(title, tutorial, filename) {
+        var tutorialData = {
+            title: title,
+            header: tutorial.title,
+            content: tutorial.parse(),
+            children: tutorial.children
+        };
 
-    let html = view.render('tutorial.tmpl', tutorialData);
-    // yes, you can use {@link} in tutorials too!
-    html = helper.resolveLinks(html); // turn {@link foo} into <a href="foodoc.html">foo</a>
+        var tutorialPath = path.join(outdir, filename),
+            html = view.render('tutorial.tmpl', tutorialData);
 
-    const tutorialPath = path.join(outdir, filename);
-    fs.writeFileSync(tutorialPath, html, 'utf8');
-  }
+        // yes, you can use {@link} in tutorials too!
+        html = helper.resolveLinks(html); // turn {@link foo} into <a href="foodoc.html">foo</a>
 
-  // tutorials can have only one parent so there is no risk for loops
-  function saveChildren(node) {
-    node.children.forEach(function(child) {
-      generateTutorial('Tutorial: ' + child.title, child, helper.tutorialToUrl(child.name));
-      saveChildren(child);
-    });
-  }
-  saveChildren(tutorials);
+        fs.writeFileSync(tutorialPath, html, 'utf8');
+    }
+
+    // tutorials can have only one parent so there is no risk for loops
+    function saveChildren(node) {
+        node.children.forEach(function(child) {
+            generateTutorial('Tutorial: ' + child.title, child, helper.tutorialToUrl(child.name));
+            saveChildren(child);
+        });
+    }
+    saveChildren(tutorials);
 };

config/jsdoc/api/template/static/scripts/main.js

@@ -85,7 +85,7 @@ $(function () {
     var srcLinks = $('div.tag-source');
     srcLinks.each(function(i, el) {
       var textParts = el.innerHTML.trim().split(', ');
-      var link = 'https://github.com/openlayers/openlayers/blob/v' + currentVersion + '/src/ol/' +
+      var link = 'https://github.com/openlayers/openlayers/blob/v' + currentVersion + '/' +
           textParts[0];
       el.innerHTML = '<a href="' + link + '">' + textParts[0] + '</a>, ' +
           '<a href="' + link + textParts[1].replace('line ', '#L') + '">' +

config/jsdoc/api/template/tmpl/container.tmpl

@@ -20,10 +20,12 @@
     <br>
     <?js if (doc.stability || doc.kind == 'namespace') {
       var ancestors = doc.ancestors.map(a => a.replace(/>\./g, '>').replace(/\.</g, '<')).join('/');
+      var name = doc.name.toLowerCase();
       var parts = [];
       if (ancestors) {
-        parts.push(ancestors.split('~').shift());
+        parts.push(ancestors);
       }
+      parts.push(name);
       var importPath = parts.join('/');
     ?>
     <pre class="prettyprint source"><code>import <?js= doc.name ?> from '<?js= importPath ?>';</code></pre>

config/jsdoc/api/template/tmpl/navigation.tmpl

@@ -11,7 +11,7 @@ var self = this;
     ?>
         <li class="item" data-name="<?js= item.longname ?>">
             <span class="title">
-                <?js= self.linkto(item.longname, item.longname.replace('module:', '')) ?>
+                <?js= self.linkto(item.longname, item.longname) ?>
                 <?js if (item.type === 'namespace' &&
                         (item.members.length + item.typedefs.length + item.methods.length +
                          item.events.length > 0)) { ?>

config/jsdoc/api/template/tmpl/observables.tmpl

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

config/jsdoc/info/define-plugin.js

@@ -6,7 +6,7 @@
  */
 
 
-const DEFAULT_VALUE = /default\s+is\s+`?(true|false)`?/i;
+var DEFAULT_VALUE = /default\s+is\s+`?(true|false)`?/i;
 
 
 /**
@@ -19,9 +19,9 @@ exports.defineTags = function(dictionary) {
     canHaveType: true,
     mustHaveValue: true,
     onTagged: function(doclet, tag) {
-      const types = tag.value.type.names;
+      var types = tag.value.type.names;
       if (types.length === 1 && types[0] === 'boolean') {
-        const match = tag.value.description.match(DEFAULT_VALUE);
+        var match = tag.value.description.match(DEFAULT_VALUE);
         if (match) {
           doclet.define = {
             default: match[1] === 'true'

config/jsdoc/info/publish.js

@@ -22,7 +22,8 @@ exports.publish = function(data, opts) {
     return types;
   }
 
-  // get all doclets with the "api" property or define (excluding events)
+  // get all doclets with the "api" property or define (excluding events) or
+  // with olx namespace
   const classes = {};
   const docs = data(
     [
@@ -60,7 +61,24 @@ exports.publish = function(data, opts) {
     return include;
   }).forEach(function(doc) {
     const isExterns = (/[\\\/]externs$/).test(doc.meta.path);
-    if (doc.define) {
+    if (isExterns && doc.longname.indexOf('olx.') === 0) {
+      if (doc.kind == 'typedef') {
+        typedefs.push({
+          name: doc.longname,
+          types: ['{}']
+        });
+      } else {
+        const typedef = typedefs[typedefs.length - 1];
+        if (!typedef) {
+          throw new Error(`Expected to see a typedef before ${doc.longname} at ${doc.meta.filename}:${doc.meta.lineno}`);
+        }
+        const type = typedef.types[0];
+        typedef.types[0] = type
+          .replace(/\}$/, ', ' + doc.longname.split('#')[1] +
+                ': (' + getTypes(doc.type.names).join('|') + ')}')
+          .replace('{, ', '{');
+      }
+    } else if (doc.define) {
       defines.push({
         name: doc.longname,
         description: doc.description,

config/jsdoc/info/virtual-plugin.js

@@ -4,7 +4,7 @@
  */
 exports.defineTags = function(dictionary) {
 
-  const classTag = dictionary.lookUp('class');
+  var classTag = dictionary.lookUp('class');
   dictionary.defineTag('interface', {
     mustHaveValue: false,
     onTagged: function(doclet, tag) {

doc/errors/index.md

@@ -139,7 +139,7 @@ Invalid geometry layout. Must be `XY`, `XYZ`, `XYM` or `XYZM`.
 
 ### 36
 
-Unknown SRS type. Expected `"name"`.
+Unknown SRS type. Expected `"name"` or `"EPSG"`.
 
 ### 37
 

doc/faq.md

@@ -21,6 +21,9 @@ Table of contents:
 * [Why aren't there any features in my source?](#why-aren-t-there-any-features-in-my-source-)
 * [How do I force a re-render of the map?](#how-do-i-force-a-re-render-of-the-map-)
 * [Why are my features not found?](#why-are-my-features-not-found-)
+* [How do I create a custom build of OpenLayers?](#how-do-i-create-a-custom-build-of-openlayers-)
+* [Do I need to write my own code using Closure library?](#do-i-need-to-write-my-own-code-using-closure-library-)
+* [Do I need to compress my code with Closure compiler?](#do-i-need-to-compress-my-code-with-closure-compiler-)
 
 
 ## What projection is OpenLayers using?
@@ -332,3 +335,37 @@ var vectorLayer = new ol.layer.Vector({
 ```
 
 The recommended value is the size of the largest symbol, line width or label.
+
+## How do I create a custom build of OpenLayers?
+
+Please refer to the [official create custom builds tutorial](tutorials/custom-builds.html)
+which explains how to create a custom build of OpenLayers with just those parts
+included that you want.
+
+
+## Do I need to write my own code using Closure library?
+
+OpenLayers is built on top of the [Google Closure JavaScript
+library](https://developers.google.com/closure/library/), but this
+does not mean that you must use that library in your application code.
+
+OpenLayers should play well with all sorts of JavaScript libraries out there,
+and you are in no way forced to use a specific one. Choose one that looks
+right for you.
+
+
+## Do I need to compress my code with Closure compiler?
+
+No, you don't need to do compress your code with the [Google Closure
+compiler](https://developers.google.com/closure/compiler/).
+
+It may be a good choice though, because when your application code and the
+OpenLayers source code is compiled together using closure compiler, the
+resulting build will most probably be the smallest in terms of byte-size. For
+more details refer to the
+[compile application and OpenLayers together tutorial](tutorials/closure.html).
+
+If you don't want to use the closure compiler, or you can't, you are not at all
+forced to use it.
+
+

doc/tutorials/closure.md

@@ -0,0 +1,305 @@
+---
+title: Compiling Application with Closure Compiler
+layout: doc.hbs
+---
+
+# Compiling Application with Closure Compiler
+
+**Note**: When building an application with dependencies that are available as [npm](https://npmjs.com/) packages, it will probably be easier to use the [ol](https://npmjs.com/package/ol) package and follow the instructions there.
+
+The OpenLayers code uses the Closure Library, and it is compiled with the
+Closure Compiler. Using OpenLayers in an application does not require using
+Closure. But using Closure in an OpenLayers application is possible. And this
+is what this tutorial is about.
+
+When you want to include OpenLayers as separate script without bundling with your application, follow the [Creating custom builds](./custom-builds.html) tutorial instead.
+
+This tutorial will teach you how to set up an OpenLayers application based on
+the [`closure-util`](https://github.com/openlayers/closure-util) node package,
+which provides utilities for working with Closure. Using `closure-util` is one
+way to use Closure in a web application, but there are others. This tutorial
+just covers the "`closure-util`" way.
+
+The `closure-util` documentation is available on the [`closure-util` readme
+page](https://github.com/openlayers/closure-util/blob/master/readme.md). You
+don't need to read the `closure-util` documentation to follow this tutorial,
+but it's available in `closure-util`'s [readme
+file](https://github.com/openlayers/closure-util/blob/master/readme.md) if you
+need it.
+
+Also, the sample application built in this tutorial is
+[available](https://github.com/openlayers/openlayers-closure-application) on
+GitHub.
+
+## Advantages of using Closure
+
+This tutorial will show you how to use the Closure Compiler to compile an
+application and OpenLayers together. Compiling the application code together
+with the OpenLayers code has a number of advantages.
+
+First of all, it allows you to only "pay" for the OpenLayers code your
+application uses, as the compiler will exclude the OpenLayers code that the
+application doesn't use. And there is no need to write and maintain a list of
+"exports", which is necessary when creating custom builds of OpenLayers.
+
+Also, compiling the application and OpenLayers together allows using
+OpenLayers functions and objects that are not part of the official OpenLayers
+3 API. Using non-API functions and objects may be risky, but it is mitigated by
+the fact that the compiler will complain if you use functions or objects
+that are not in OpenLayers anymore.
+
+## Setting up the Application
+
+First, create a directory for the application. We will name that directory
+`openlayers-closure-application` in this tutorial.
+
+    $ mkdir openlayers-closure-application
+
+Now change to that directory:
+
+    $ cd openlayers-closure-application
+
+Our application will be a `node` application, and the `openlayers` and
+`closure-util` node packages will be downloaded from the node package registry
+using the `npm` command line tool.
+
+So we're going to create a `package.json` file for the application, which every
+node application includes. This file basically includes metadata for the
+application.
+
+Create the application's `package.json` file:
+
+    $ npm init
+
+You can pretty much use the default answers to the questions `npm init` asks
+you.
+
+Now install OpenLayers using:
+
+    $ npm install openlayers --save
+
+The `--save` flag persists the `openlayers` dependency in the application's
+`package.json` file. You can edit `package.json` to verify that the dependency
+was added.
+
+`closure-util` is a dependency of the `openlayers` package, so it should have
+been installed with `openlayers`. Use the following to verify that
+`closure-util` is installed:
+
+    $ ./node_modules/openlayers/node_modules/.bin/closure-util
+
+    command argument is required
+
+    Usage: node closure-util <command> [options]
+
+    command     
+      update-compiler     Update the Compiler
+      update-library      Update the Library
+      update              Update both the Library and the Compiler
+      build               Build with Closure Compiler
+      serve               Start the development server
+
+    Options:
+       -l LEVEL, --loglevel LEVEL   Log level  [info]
+
+
+## Create an OpenLayers map
+
+You're now going to create a JavaScript file that creates an OpenLayers map.
+This is the file that we will define the application's entry point.
+
+First of all create an `src` directory at the root of the application:
+
+    $ mkdir src
+
+Now add a file `main.js` to `src`, with the following content:
+
+```js
+goog.provide('app');
+
+goog.require('ol.Map');
+goog.require('ol.View');
+goog.require('ol.layer.Tile');
+goog.require('ol.source.OSM');
+
+
+/**
+ * @type {ol.PluggableMap}
+ */
+app.map = new ol.Map({
+  target: 'map',
+  layers: [
+    new ol.layer.Tile({
+      source: new ol.source.OSM()
+    })
+  ],
+  view: new ol.View({
+    center: [0, 0],
+    zoom: 4
+  })
+});
+```
+
+`goog.provide('app')` creates the namespace `app` for the application. The
+`goog.require` statements that follow define the OpenLayers constructors and
+namespaces that the application uses. The rest of the code just creates the
+OpenLayers map as you would do in any OpenLayers application.
+
+## Compiling the Application
+
+We're now going to compile the application and OpenLayers together, using the
+Closure Compiler and `closure-util`. For this we need to create a JSON config
+file, that we will then pass as an input file to the `closure-util` command.
+
+The minimum config file looks like this:
+
+```json
+{
+  "lib": [
+    "node_modules/openlayers/src/**/*.js",
+    "node_modules/openlayers/build/ol.ext/**/*.js",
+    "src/**/*.js"
+  ],
+  "compile": {
+    "closure_entry_point": "app",
+    "externs": [
+      "node_modules/openlayers/externs/bingmaps.js",
+      "node_modules/openlayers/externs/cartodb.js",
+      "node_modules/openlayers/externs/closure-compiler.js",
+      "node_modules/openlayers/externs/esrijson.js",
+      "node_modules/openlayers/externs/geojson.js",
+      "node_modules/openlayers/externs/proj4js.js",
+      "node_modules/openlayers/externs/tilejson.js",
+      "node_modules/openlayers/externs/topojson.js"
+    ],
+    "define": [
+      "ol.ENABLE_WEBGL=false"
+    ],
+    "js": [
+      "node_modules/openlayers/src/ol/typedefs.js",
+      "node_modules/openlayers/externs/olx.js",
+      "node_modules/openlayers/externs/oli.js"
+    ],
+    "extra_annotation_name": [
+      "api", "observable"
+    ],
+    "rewrite_polyfills": "false",
+    "compilation_level": "ADVANCED",
+    "warning_level": "VERBOSE",
+    "output_wrapper": "(function(){%output%})();",
+    "use_types_for_optimization": true
+  }
+}
+```
+
+Create a `config.json` file with the above content at the root of the
+application directory.
+
+We can now use `closure-util` to compile the code:
+
+    $ ./node_modules/openlayers/node_modules/.bin/closure-util build config.json app.js
+
+The resulting `app.js` file, which you can view in your editor if you're
+curious, includes a minified version of the application code (`main.js`), and
+the OpenLayers code that the application code uses.
+
+Here is a version of `config.json` with more compilation checks enabled:
+
+```json
+{
+  "lib": [
+    "node_modules/openlayers/src/**/*.js",
+    "node_modules/openlayers/build/ol.ext/**/*.js",
+    "src/**/*.js"
+  ],
+  "compile": {
+    "closure_entry_point": "app",
+    "externs": [
+      "node_modules/openlayers/externs/bingmaps.js",
+      "node_modules/openlayers/externs/cartodb.js",
+      "node_modules/openlayers/externs/closure-compiler.js",
+      "node_modules/openlayers/externs/esrijson.js",
+      "node_modules/openlayers/externs/geojson.js",
+      "node_modules/openlayers/externs/proj4js.js",
+      "node_modules/openlayers/externs/tilejson.js",
+      "node_modules/openlayers/externs/topojson.js"
+    ],
+    "define": [
+      "ol.ENABLE_WEBGL=false"
+    ],
+    "js": [
+      "node_modules/openlayers/src/ol/typedefs.js",
+      "node_modules/openlayers/externs/olx.js",
+      "node_modules/openlayers/externs/oli.js"
+    ],
+    "jscomp_error": [
+      "*"
+    ],
+    "jscomp_off": [
+      "unknownDefines",
+      "lintChecks",
+      "analyzerChecks"
+    ],
+    "extra_annotation_name": [
+      "api", "observable"
+    ],
+    "compilation_level": "ADVANCED",
+    "warning_level": "VERBOSE",
+    "output_wrapper": "(function(){%output%})();",
+    "use_types_for_optimization": true
+  }
+}
+```
+
+## Create an HTML file for the Application
+
+You can now go ahead and create a simple HTML for the application. Create
+a `index.html` file with the following content at the root the application
+directory:
+
+```html
+<!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="node_modules/openlayers/css/ol.css" type="text/css">
+    <title>Simple example</title>
+    <style>
+      #map {
+        width: 600px;
+        height: 400px;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="map"></div>
+    <script src="app.js" type="text/javascript"></script>
+  </body>
+</html>
+```
+
+Note that the page includes a `script` tag referencing the `app.js` file,
+which is the file resulting from the compilation.
+
+You are done!
+
+## Run Application in Debug Mode
+
+As a bonus, we're going to show how to use `closure-util` to run the
+application in "debug" mode, where the original application and OpenLayers
+scripts are loaded one by one in the page.
+
+Start the `closure-util` development server:
+
+    $ ./node_modules/openlayers/node_modules/.bin/closure-util serve config.json
+
+Now change the `script` tag to the following in the `index.html` file:
+
+```html
+      <script src="@?main=src/main.js" type="text/javascript"></script>
+```
+
+Reload the page in your browser and you should see that scripts are now loaded
+individually, making debugging much easier.

doc/tutorials/custom-builds.md

@@ -0,0 +1,237 @@
+---
+title: Custom builds
+layout: doc.hbs
+---
+
+# Creating custom builds
+
+OpenLayers is a big library providing a lot of functionality. So it is unlikely that an application will need and use all the functionality OpenLayers provides. This is why creating application-specific OpenLayers builds, with just the functionality your application needs, is often a good idea.
+
+An alternative to creating custom builds is to compile your application code together with OpenLayers. See the [Compiling Application with Closure Compiler](closure.html) tutorial for more information.
+
+This particular tutorial explains how to create custom builds of OpenLayers.
+
+## Requirements
+
+OpenLayers's build tools use Node and Java, so you need to have Node and Java installed on your machine. You can run `node --version` and `java -version` to test that Node and Java are installed, respectively. See [developing guide](https://github.com/openlayers/openlayers/blob/master/DEVELOPING.md) for minimum version numbers required.
+
+## Download OpenLayers
+
+Obviously, creating a custom build requires the OpenLayers source and specific build scripts.
+
+To get the OpenLayers source and the build scripts you can clone the openlayers [repository](https://github.com/openlayers/openlayers), or you can download one of the release archives. You can also download the `openlayers` Node package from the Node package registry, using NPM (the Node Package Manager). This is the method we are going to use in this tutorial.
+
+Create a directory:
+
+    $ mkdir openlayers
+
+Download the OpenLayers distribution using NPM:
+
+    $ npm install openlayers
+
+This will download the latest stable version of OpenLayers, and install it under `node_modules`. You can list the content of `node_modules` to verify that it effectively contains a directory named "openlayers".
+
+The Node packages onto which the `openlayers` package depends are installed under `node_modules/openlayers/node_modules`. That directory should, for example, include `closure-util`, which is the utility library OpenLayers uses for Closure.
+
+You should now have everything you need to create custom builds of OpenLayers!
+
+## Create a build configuration file
+
+Creating a custom build requires writing a build configuration file. The format of build configuration files is JSON. Here is a simple example of a build configuration file:
+
+```json
+{
+  "exports": [
+    "ol.Map",
+    "ol.View",
+    "ol.control.defaults",
+    "ol.layer.Tile",
+    "ol.source.OSM"
+  ],
+  "compile": {
+    "externs": [
+      "externs/bingmaps.js",
+      "externs/cartodb.js",
+      "externs/closure-compiler.js",
+      "externs/esrijson.js",
+      "externs/geojson.js",
+      "externs/oli.js",
+      "externs/olx.js",
+      "externs/proj4js.js",
+      "externs/tilejson.js",
+      "externs/topojson.js"
+    ],
+    "extra_annotation_name": [
+      "api", "observable"
+    ],
+    "compilation_level": "ADVANCED",
+    "manage_closure_dependencies": true,
+    "rewrite_polyfills": false
+  }
+}
+```
+
+Create a file named `ol-custom.json` with that content, and save it under the `node_modules/openlayers/build` directory. (You can save it to any location really.)
+
+The most relevant part of this configuration object is the `"exports"` array. This array declares the functions/constructors you use in your JavaScript code. For example, the above configuration file is what you'd use for the following JavaScript code:
+
+```js
+var map = new ol.Map({
+  target: 'map',
+  layers: [
+    new ol.layer.Tile({
+      source: new ol.source.OSM()
+    })
+  ],
+  controls: ol.control.defaults({
+    attributionOptions: {
+      collapsible: false
+    }
+  }),
+  view: new ol.View({
+    center: [0, 0],
+    zoom: 4
+  })
+});
+```
+
+Note that this JavaScript code corresponds to OpenLayers's [`simple`](https://openlayers.org/en/master/examples/simple.html) example.
+
+You are now ready to create your first OpenLayers build. Use the following command to create the build:
+
+    $ cd node_modules/openlayers
+    $ node tasks/build.js build/ol-custom.json build/ol-custom.js
+
+The build command may take some time, but it should end with an output in the console such as the following:
+
+    info ol Parsing dependencies
+    info ol Compiling 364 sources
+
+The build command should have created an `ol-custom.js` file in the `node_modules/openlayers/build` directory. You can verify that the file was created. You can even open it in your editor if you're curious.
+
+As a test, you can use the following HTML file to verify that your custom build works as expected:
+
+```html
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8" />
+    <title>OpenLayers example</title>
+    <link rel="stylesheet" href="node_modules/openlayers/css/ol.css" />
+    <style>
+      #map {
+        width: 600px;
+        height: 400px;
+      }
+    </style>
+</head>
+<body>
+    <div id="map"></div>
+    <script src="node_modules/openlayers/build/ol-custom.js"></script>
+    <script>
+    var map = new ol.Map({
+      target: 'map',
+      layers: [
+        new ol.layer.Tile({
+          source: new ol.source.OSM()
+        })
+      ],
+      view: new ol.View({
+        center: [0, 0],
+        zoom: 4
+      })
+    });
+    </script>
+</body>
+</html>
+```
+
+## More on the config file
+
+### `define`'s
+
+Closure allows you to define constants that can be set at compile time. The OpenLayers code defines several such values.
+
+Setting some of these to `false` means that the portions of the code relating to this setting become "dead", i.e. are never executed. As Closure Compiler's `ADVANCED` mode removes dead code, this makes the size of the advanced compiled file smaller.
+
+You might have noticed that the build file you've just created is considerably smaller than the full build, but it can be reduced further. This is because both renderers and other optional code are included by default. We only need one renderer, and we do not use the optional code, so can exclude what we don't use by setting properties with `define`s. So add a define section to the config above:
+```
+    "define": [
+      "ol.ENABLE_WEBGL=false",
+      "ol.ENABLE_PROJ4JS=false",
+      "ol.ENABLE_RASTER_REPROJECTION=false"
+    ],
+```
+
+and re-run the build script. The build size should now be smaller.
+
+### Externs
+
+The Closure documentation explains that "externs" are for external names used in the code being compiled. The compiler includes externs for built-ins such as `document`. The `externs` directory of the OpenLayers code includes files for all those used in some part of the library. For example, if you use Bing Maps, you should include the Bing externs file in the `externs` section of the config file.
+
+`oli.js` and `olx.js` are externs files for the OpenLayers API. For example `olx.js` includes extern definitions for OpenLayers's constructor options. `closure-compiler.js` fixes any issues that may arise with a specific compiler version. You should always use these three files as externs when creating custom builds.
+
+### Other compiler options
+
+There are a couple of other compiler options in the config file above. `manage_closure_dependencies` and `rewrite_polyfills` should always be used.
+
+You can specify any of the other compiler options here as needed, such as the renaming reports, output manifest, or source maps. There is a full list of available options in [closure-util](https://github.com/openlayers/closure-util/blob/master/compiler-options.txt).
+
+Note that `build.js` currently requires you to enter an output file and will write the output from the compiler to it; it does not use the `js_output_file` compiler option. If you specify this in the config file, there will be no compiler output, so `build.js`'s output file will be empty.
+
+## A more complicated example
+
+Now let's try a more complicated example: [`heatmaps-earthquakes`](https://openlayers.org/en/master/examples/heatmap-earthquakes.html). The build configuration file looks like this:
+
+```json
+{
+  "exports": [
+    "ol.layer.Heatmap",
+    "ol.source.Vector",
+    "ol.format.KML",
+    "ol.layer.Heatmap#getSource",
+    "ol.source.Vector#on",
+    "ol.source.Vector.Event#feature",
+    "ol.Feature#get",
+    "ol.Feature#set",
+    "ol.layer.Tile",
+    "ol.source.Stamen",
+    "ol.Map",
+    "ol.View",
+    "ol.layer.Heatmap#setRadius",
+    "ol.layer.Heatmap#setBlur"
+  ],
+  "compile": {
+    "externs": [
+      "externs/bingmaps.js",
+      "externs/cartodb.js",
+      "externs/closure-compiler.js",
+      "externs/esrijson.js",
+      "externs/geojson.js",
+      "externs/olx.js",
+      "externs/oli.js",
+      "externs/proj4js.js",
+      "externs/tilejson.js",
+      "externs/topojson.js"
+    ],
+    "define": [
+      "ol.ENABLE_WEBGL=false",
+      "ol.ENABLE_PROJ4JS=false",
+      "ol.ENABLE_RASTER_REPROJECTION=false"
+    ],
+    "compilation_level": "ADVANCED",
+    "manage_closure_dependencies": true,
+    "rewrite_polyfills": false
+  }
+}
+```
+
+The exports are given here in the order in which they occur in the `heatmaps-earthquakes` example's JavaScript code. In this example we not only use the `ol.` functions and constructors, but also `prototype` methods where the `ol` namespace is not directly used. In the code, we have for example `vector.getSource().on()`. This means we are using the `getSource` method of `layer.Heatmap` and the `on` method of `source.KML`, so this is what has to be exported. Similarly, `event.feature.get()` means we are using the `feature` property of `source.Vector.Event` and the `get` method of `Feature`. If any of these names are left out, the compile will complete successfully, but the missing names will be obfuscated and you will get a 'property undefined' error when you try and run the script.
+
+## Maintaining the code
+
+If you installed OpenLayers from the Node package, you can use `npm` to upgrade to the latest version. If you cloned the Github repo, simply pulling in the latest code may not be enough, as some of the packages used, for example, the compiler, may need upgrading too. Do this by using `npm install` rather than `npm update`.
+
+## Conclusion
+
+This tutorial should have given you the information you need to create custom builds, i.e. builds tailored to your application. See the [tasks readme](https://github.com/openlayers/openlayers/tree/master/tasks/readme.md) for more information on the build scripts and the properties you can use in the build configuration file.

doc/tutorials/index.hbs

@@ -9,4 +9,5 @@ layout: doc.hbs
 * [Basic Concepts](concepts.html)
 * [Create Custom Builds](custom-builds.html)
 * [Bundle Application and OpenLayers using Browserify](browserify.html)
+* [Compile Application and OpenLayers together](closure.html)
 * [Raster Reprojection](raster-reprojection.html)

doc/tutorials/introduction.md

@@ -12,6 +12,9 @@ The initial release aims to support much of the functionality provided by versio
 
 It is also designed such that major new features, such as displaying 3D maps, or using WebGL to quickly display large vector data sets, can be added in later releases.
 
+## Google Closure
+OpenLayers was written in a way so it can be compiled with [__Closure Compiler__](https://developers.google.com/closure/compiler/). Its 'advanced' compilation mode offers a level of compression that exceeds anything else available.
+
 ## Public API
 Using the advanced optimizations of the Closure Compiler means that properties and methods are renamed – `longMeaningfulName` might become `xB` – and so are effectively unusable in applications using the library. To be usable, they have to be explicitly `exported`. This means the exported names, those not renamed, effectively become the public API of the library. These __exportable__ properties and methods are marked in the source, and documented in the [API docs](../../apidoc). This is the officially supported API of the library. A build containing all these exportable names is known as a __full build__. A hosted version of this is available, which can be used by any application.
 

examples/arcgis-image.js

@@ -1,7 +1,9 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
-import {Tile as TileLayer, Image as ImageLayer} from '../src/ol/layer.js';
-import {OSM, ImageArcGISRest} from '../src/ol/source.js';
+import TileLayer from '../src/ol/layer/Tile.js';
+import ImageLayer from '../src/ol/layer/Image.js';
+import OSM from '../src/ol/source/OSM.js';
+import ImageArcGISRest from '../src/ol/source/ImageArcGISRest.js';
 
 const url = 'https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/' +
     'Specialty/ESRI_StateCityHighway_USA/MapServer';

examples/arcgis-tiled.html

@@ -6,7 +6,7 @@ docs: >
   This example shows how to use an ArcGIS REST MapService as tiles.
   This source type supports Map and Image Services. For cached ArcGIS
   services, better performance is available by using
-  <code>ol/source/XYZ</code> instead.
+  <code>ol.source.XYZ</code> instead.
 tags: arcgis, tile, tilelayer"
 ---
 <div id="map" class="map"></div>

examples/arcgis-tiled.js

@@ -1,7 +1,8 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
 import TileLayer from '../src/ol/layer/Tile.js';
-import {OSM, TileArcGISRest} from '../src/ol/source.js';
+import OSM from '../src/ol/source/OSM.js';
+import TileArcGISRest from '../src/ol/source/TileArcGISRest.js';
 
 const url = 'https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/' +
     'Specialty/ESRI_StateCityHighway_USA/MapServer';

examples/attributions.js

@@ -1,6 +1,7 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
-import {defaults as defaultControls, Attribution} from '../src/ol/control.js';
+import {defaults as defaultControls} from '../src/ol/control.js';
+import Attribution from '../src/ol/control/Attribution.js';
 import TileLayer from '../src/ol/layer/Tile.js';
 import OSM from '../src/ol/source/OSM.js';
 

examples/bing-maps.html

@@ -3,11 +3,10 @@ layout: example.html
 title: Bing Maps
 shortdesc: Example of a Bing Maps layer.
 docs: >
-  <p>When the Bing Maps tile service doesn't have tiles for a given resolution and region it returns "placeholder" tiles indicating that. Zoom the map beyond level 19 to see the "placeholder" tiles. If you want OpenLayers to display stretched tiles in place of "placeholder" tiles beyond zoom level 19 then set <code>maxZoom</code> to <code>19</code> in the options passed to <code>ol/source/BingMaps</code>.</p>
+  <p>When the Bing Maps tile service doesn't have tiles for a given resolution and region it returns "placeholder" tiles indicating that. Zoom the map beyond level 19 to see the "placeholder" tiles. If you want OpenLayers to display stretched tiles in place of "placeholder" tiles beyond zoom level 19 then set <code>maxZoom</code> to <code>19</code> in the options passed to <code>ol.source.BingMaps</code>.</p>
 tags: "bing, bing-maps"
 cloak:
-  - key: As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5
-    value: Your Bing Maps Key from http://www.bingmapsportal.com/ here
+  As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5: Your Bing Maps Key from http://www.bingmapsportal.com/ here
 ---
  <div id="map" class="map"></div>
  <select id="layer-select">

examples/blend-modes.js

@@ -4,7 +4,10 @@ import View from '../src/ol/View.js';
 import Point from '../src/ol/geom/Point.js';
 import VectorLayer from '../src/ol/layer/Vector.js';
 import VectorSource from '../src/ol/source/Vector.js';
-import {Circle as CircleStyle, Fill, Stroke, Style} from '../src/ol/style.js';
+import CircleStyle from '../src/ol/style/Circle.js';
+import Fill from '../src/ol/style/Fill.js';
+import Stroke from '../src/ol/style/Stroke.js';
+import Style from '../src/ol/style/Style.js';
 
 
 // Create separate layers for red, green an blue circles.
@@ -93,7 +96,7 @@ const affectBlue = document.getElementById('affect-blue');
  * This method sets the globalCompositeOperation to the value of the select
  * field and it is bound to the precompose event of the layers.
  *
- * @param {module:ol/render/Event~RenderEvent} evt The render event.
+ * @param {ol.render.Event} evt The render event.
  */
 const setBlendModeFromSelect = function(evt) {
   evt.context.globalCompositeOperation = select.value;
@@ -104,7 +107,7 @@ const setBlendModeFromSelect = function(evt) {
  * This method resets the globalCompositeOperation to the default value of
  * 'source-over' and it is bound to the postcompose event of the layers.
  *
- * @param {module:ol/render/Event~RenderEvent} evt The render event.
+ * @param {ol.render.Event} evt The render event.
  */
 const resetBlendModeFromSelect = function(evt) {
   evt.context.globalCompositeOperation = 'source-over';
@@ -114,7 +117,7 @@ const resetBlendModeFromSelect = function(evt) {
 /**
  * Bind the pre- and postcompose handlers to the passed layer.
  *
- * @param {module:ol/layer/Vector} layer The layer to bind the handlers to.
+ * @param {ol.layer.Vector} layer The layer to bind the handlers to.
  */
 const bindLayerListeners = function(layer) {
   layer.on('precompose', setBlendModeFromSelect);
@@ -125,7 +128,7 @@ const bindLayerListeners = function(layer) {
 /**
  * Unind the pre- and postcompose handlers to the passed layers.
  *
- * @param {module:ol/layer/Vector} layer The layer to unbind the handlers from.
+ * @param {ol.layer.Vector} layer The layer to unbind the handlers from.
  */
 const unbindLayerListeners = function(layer) {
   layer.un('precompose', setBlendModeFromSelect);

examples/box-selection.html

@@ -4,7 +4,7 @@ title: Box Selection
 shortdesc: Using a DragBox interaction to select features.
 docs: >
   <p>This example shows how to use a <code>DragBox</code> interaction to select features. Selected features are added
-  to the feature overlay of a select interaction (<code>ol/interaction/Select</code>) for highlighting.</p>
+  to the feature overlay of a select interaction (<code>ol.interaction.Select</code>) for highlighting.</p>
   <p>Use <code>Ctrl+Drag</code> (<code>Command+Drag</code> on Mac) to draw boxes.</p>
 tags: "DragBox, feature, selection, box"
 ---

examples/box-selection.js

@@ -2,9 +2,12 @@ import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
 import {platformModifierKeyOnly} from '../src/ol/events/condition.js';
 import GeoJSON from '../src/ol/format/GeoJSON.js';
-import {DragBox, Select} from '../src/ol/interaction.js';
-import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
-import {OSM, Vector as VectorSource} from '../src/ol/source.js';
+import DragBox from '../src/ol/interaction/DragBox.js';
+import Select from '../src/ol/interaction/Select.js';
+import TileLayer from '../src/ol/layer/Tile.js';
+import VectorLayer from '../src/ol/layer/Vector.js';
+import OSM from '../src/ol/source/OSM.js';
+import VectorSource from '../src/ol/source/Vector.js';
 
 
 const vectorSource = new VectorSource({

examples/canvas-gradient-pattern.js

@@ -6,7 +6,9 @@ import {DEVICE_PIXEL_RATIO} from '../src/ol/has.js';
 import VectorLayer from '../src/ol/layer/Vector.js';
 import {fromLonLat} from '../src/ol/proj.js';
 import VectorSource from '../src/ol/source/Vector.js';
-import {Fill, Stroke, Style} from '../src/ol/style.js';
+import Fill from '../src/ol/style/Fill.js';
+import Stroke from '../src/ol/style/Stroke.js';
+import Style from '../src/ol/style/Style.js';
 
 const canvas = document.createElement('canvas');
 const context = canvas.getContext('2d');
@@ -70,7 +72,7 @@ const style = new Style({
  *
  * @param {module:ol/Feature~Feature} feature The feature to style.
  * @param {number} resolution Resolution.
- * @return {module:ol/style/Style} The style to use for the feature.
+ * @return {ol.style.Style} The style to use for the feature.
  */
 const getStackedStyle = function(feature, resolution) {
   const id = feature.getId();

examples/canvas-tiles.js

@@ -3,7 +3,8 @@ import View from '../src/ol/View.js';
 import {defaults as defaultControls} from '../src/ol/control.js';
 import TileLayer from '../src/ol/layer/Tile.js';
 import {fromLonLat} from '../src/ol/proj.js';
-import {OSM, TileDebug} from '../src/ol/source.js';
+import OSM from '../src/ol/source/OSM.js';
+import TileDebug from '../src/ol/source/TileDebug.js';
 
 
 const osmSource = new OSM();

examples/cartodb.js

@@ -1,7 +1,8 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
 import TileLayer from '../src/ol/layer/Tile.js';
-import {CartoDB, OSM} from '../src/ol/source.js';
+import CartoDB from '../src/ol/source/CartoDB.js';
+import OSM from '../src/ol/source/OSM.js';
 
 const mapConfig = {
   'layers': [{

examples/center.js

@@ -2,9 +2,14 @@ import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
 import {defaults as defaultControls} from '../src/ol/control.js';
 import GeoJSON from '../src/ol/format/GeoJSON.js';
-import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
-import {OSM, Vector as VectorSource} from '../src/ol/source.js';
-import {Circle as CircleStyle, Fill, Stroke, Style} from '../src/ol/style.js';
+import TileLayer from '../src/ol/layer/Tile.js';
+import VectorLayer from '../src/ol/layer/Vector.js';
+import OSM from '../src/ol/source/OSM.js';
+import VectorSource from '../src/ol/source/Vector.js';
+import CircleStyle from '../src/ol/style/Circle.js';
+import Fill from '../src/ol/style/Fill.js';
+import Stroke from '../src/ol/style/Stroke.js';
+import Style from '../src/ol/style/Style.js';
 
 const source = new VectorSource({
   url: 'data/geojson/switzerland.geojson',
@@ -87,6 +92,6 @@ const centerlausanne = document.getElementById('centerlausanne');
 centerlausanne.addEventListener('click', function() {
   const feature = source.getFeatures()[1];
   const point = /** @type {module:ol/geom/Point~Point} */ (feature.getGeometry());
-  const size = /** @type {module:ol/size~Size} */ (map.getSize());
+  const size = /** @type {ol.Size} */ (map.getSize());
   view.centerOn(point.getCoordinates(), size, [570, 500]);
 }, false);

examples/chaikin.html

@@ -1,20 +0,0 @@
----
-layout: example.html
-title: Smoothing lines using Chaikins algorithm
-shortdesc: This uses Chaikins algorithm to smooth drawn lines.
-docs: >
-  This example uses the npm package [`chaikin-smooth`](https://www.npmjs.com/package/chaikin-smooth) which
-  implements [Chaikins algorithm](http://graphics.cs.ucdavis.edu/education/CAGDNotes/Chaikins-Algorithm/Chaikins-Algorithm.html)
-  to smooth drawn lines.
-
-  Start by drawing on the map. Once you finish a drawing, the feature's geometry will be smoothed
-  as configured via the form elements.
-tags: "smooth, smoothing, chaikin"
----
-<div id="map" class="map"></div>
-<form class="form-inline">
-  <label for="shall-smoothen">Smooth drawn geometry?</label>
-  <input id="shall-smoothen" type="checkbox" checked><br>
-  <label for="iterations">Number of smoothings</label>
-  <input style="width: 250px;" type="range" id="iterations" min="2" max="10" step="1" value="5">
-</form>

examples/chaikin.js

@@ -1,54 +0,0 @@
-import Map from '../src/ol/Map.js';
-import View from '../src/ol/View.js';
-import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
-import {OSM, Vector as VectorSource} from '../src/ol/source.js';
-import Draw from '../src/ol/interaction/Draw.js';
-
-import smooth from 'chaikin-smooth';
-
-function makeSmooth(path, numIterations) {
-  numIterations = Math.min(Math.max(numIterations, 1), 10);
-  while (numIterations > 0) {
-    path = smooth(path);
-    numIterations--;
-  }
-  return path;
-}
-
-const vectorSource = new VectorSource({});
-
-const map = new Map({
-  layers: [
-    new TileLayer({
-      source: new OSM(),
-      opacity: 0.5
-    }),
-    new VectorLayer({
-      source: vectorSource
-    })
-  ],
-  target: 'map',
-  view: new View({
-    center: [1078373.5950, 6871994.5910],
-    zoom: 5
-  })
-});
-
-const shallSmoothen = document.getElementById('shall-smoothen');
-const numIterations = document.getElementById('iterations');
-
-const draw = new Draw({
-  source: vectorSource,
-  type: 'LineString'
-});
-map.addInteraction(draw);
-draw.on('drawend', function(event) {
-  if (!shallSmoothen.checked) {
-    return;
-  }
-  const feat = event.feature;
-  const geometry = feat.getGeometry();
-  const coords = geometry.getCoordinates();
-  const smoothened = makeSmooth(coords, parseInt(numIterations.value, 10) || 5);
-  geometry.setCoordinates(smoothened);
-});

examples/cluster.html

@@ -1,7 +1,7 @@
 ---
 layout: example.html
 title: Clustered Features
-shortdesc: Example of using ol/source/Cluster.
+shortdesc: Example of using ol.source.Cluster.
 docs: >
   This example shows how to do clustering on point features.
 tags: "cluster, vector"

examples/cluster.js

@@ -2,9 +2,16 @@ import Feature from '../src/ol/Feature.js';
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
 import Point from '../src/ol/geom/Point.js';
-import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
-import {Cluster, OSM, Vector as VectorSource} from '../src/ol/source.js';
-import {Circle as CircleStyle, Fill, Stroke, Style, Text} from '../src/ol/style.js';
+import TileLayer from '../src/ol/layer/Tile.js';
+import VectorLayer from '../src/ol/layer/Vector.js';
+import Cluster from '../src/ol/source/Cluster.js';
+import OSM from '../src/ol/source/OSM.js';
+import VectorSource from '../src/ol/source/Vector.js';
+import CircleStyle from '../src/ol/style/Circle.js';
+import Fill from '../src/ol/style/Fill.js';
+import Stroke from '../src/ol/style/Stroke.js';
+import Style from '../src/ol/style/Style.js';
+import Text from '../src/ol/style/Text.js';
 
 
 const distance = document.getElementById('distance');

examples/color-manipulation.js

@@ -2,7 +2,8 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
 import ImageLayer from '../src/ol/layer/Image.js';
-import {Raster as RasterSource, Stamen} from '../src/ol/source.js';
+import RasterSource from '../src/ol/source/Raster.js';
+import Stamen from '../src/ol/source/Stamen.js';
 
 
 /**

examples/custom-controls.js

@@ -1,7 +1,8 @@
 import {inherits} from '../src/ol/index.js';
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
-import {defaults as defaultControls, Control} from '../src/ol/control.js';
+import {defaults as defaultControls} from '../src/ol/control.js';
+import Control from '../src/ol/control/Control.js';
 import TileLayer from '../src/ol/layer/Tile.js';
 import OSM from '../src/ol/source/OSM.js';
 

examples/custom-interactions.html

@@ -3,8 +3,8 @@ layout: example.html
 title: Custom Interactions
 shortdesc: Example of a custom interaction.
 docs: >
-  This example demonstrates creating a custom interaction by subclassing `ol/interaction/Pointer`.
-  Note that the built in interaction `ol/interaction/Translate` might be a better option for moving features.
+  This example demonstrates creating a custom interaction by subclassing `ol.interaction.Pointer`.
+  Note that the built in interaction `ol.interaction.Translate` might be a better option for moving features.
 tags: "drag, feature, vector, editing, custom, interaction"
 ---
 <div id="map" class="map"></div>

examples/custom-interactions.js

@@ -2,11 +2,19 @@ import {inherits} from '../src/ol/index.js';
 import Feature from '../src/ol/Feature.js';
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
-import {LineString, Point, Polygon} from '../src/ol/geom.js';
-import {defaults as defaultInteractions, Pointer as PointerInteraction} from '../src/ol/interaction.js';
-import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
-import {TileJSON, Vector as VectorSource} from '../src/ol/source.js';
-import {Fill, Icon, Stroke, Style} from '../src/ol/style.js';
+import LineString from '../src/ol/geom/LineString.js';
+import Point from '../src/ol/geom/Point.js';
+import Polygon from '../src/ol/geom/Polygon.js';
+import {defaults as defaultInteractions} from '../src/ol/interaction.js';
+import PointerInteraction from '../src/ol/interaction/Pointer.js';
+import TileLayer from '../src/ol/layer/Tile.js';
+import VectorLayer from '../src/ol/layer/Vector.js';
+import TileJSON from '../src/ol/source/TileJSON.js';
+import VectorSource from '../src/ol/source/Vector.js';
+import Fill from '../src/ol/style/Fill.js';
+import Icon from '../src/ol/style/Icon.js';
+import Stroke from '../src/ol/style/Stroke.js';
+import Style from '../src/ol/style/Style.js';
 
 
 /**
@@ -17,7 +25,7 @@ const app = {};
 
 /**
  * @constructor
- * @extends {module:ol/interaction/Pointer}
+ * @extends {ol.interaction.Pointer}
  */
 app.Drag = function() {
 
@@ -29,7 +37,7 @@ app.Drag = function() {
   });
 
   /**
-   * @type {module:ol~Pixel}
+   * @type {ol.Pixel}
    * @private
    */
   this.coordinate_ = null;
@@ -149,7 +157,7 @@ const map = new Map({
         features: [pointFeature, lineFeature, polygonFeature]
       }),
       style: new Style({
-        image: new Icon(/** @type {module:ol/style/Icon~Options} */ ({
+        image: new Icon(/** @type {olx.style.IconOptions} */ ({
           anchor: [0.5, 46],
           anchorXUnits: 'fraction',
           anchorYUnits: 'pixels',

examples/d3.js

@@ -2,9 +2,11 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
 import {getWidth, getCenter} from '../src/ol/extent.js';
-import {Image as ImageLayer, Tile as TileLayer} from '../src/ol/layer.js';
+import ImageLayer from '../src/ol/layer/Image.js';
+import TileLayer from '../src/ol/layer/Tile.js';
 import {fromLonLat, toLonLat} from '../src/ol/proj.js';
-import {ImageCanvas as ImageCanvasSource, Stamen} from '../src/ol/source.js';
+import ImageCanvasSource from '../src/ol/source/ImageCanvas.js';
+import Stamen from '../src/ol/source/Stamen.js';
 
 
 const map = new Map({
@@ -24,17 +26,17 @@ const map = new Map({
 
 
 /**
- * Load the topojson data and create an ol/layer/Image for that data.
+ * Load the topojson data and create an ol.layer.Image for that data.
  */
 d3.json('data/topojson/us.json', function(error, us) {
   const features = topojson.feature(us, us.objects.counties);
 
   /**
    * This function uses d3 to render the topojson features to a canvas.
-   * @param {module:ol/extent~Extent} extent Extent.
+   * @param {ol.Extent} extent Extent.
    * @param {number} resolution Resolution.
    * @param {number} pixelRatio Pixel ratio.
-   * @param {module:ol/size~Size} size Size.
+   * @param {ol.Size} size Size.
    * @param {module:ol/proj/Projection~Projection} projection Projection.
    * @return {HTMLCanvasElement} A canvas element.
    */

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

@@ -3,11 +3,10 @@ layout: example.html
 title: Drag-and-Drop Image Vector
 shortdesc: Example of using the drag-and-drop interaction with image vector rendering.
 docs: >
-  Example of using the drag-and-drop interaction with an `ol/layer/Vector` with `renderMode: 'image'``. Drag and drop GPX, GeoJSON, IGC, KML, or TopoJSON files on to the map. Each file is rendered to an image on the client.
+  Example of using the drag-and-drop interaction with an `ol.layer.Vector` with `renderMode: 'image'``. Drag and drop GPX, GeoJSON, IGC, KML, or TopoJSON files on to the map. Each file is rendered to an image on the client.
 tags: "drag-and-drop-image-vector, gpx, geojson, igc, kml, topojson, vector, image"
 cloak:
-  - key: As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5
-    value: Your Bing Maps Key from http://www.bingmapsportal.com/ here
+  As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5: Your Bing Maps Key from http://www.bingmapsportal.com/ here
 ---
 <div id="map" class="map"></div>
 <div id="info">&nbsp;</div>

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

@@ -1,10 +1,20 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
-import {GPX, GeoJSON, IGC, KML, TopoJSON} from '../src/ol/format.js';
-import {defaults as defaultInteractions, DragAndDrop} from '../src/ol/interaction.js';
-import {Vector as VectorLayer, Tile as TileLayer} from '../src/ol/layer.js';
-import {BingMaps, Vector as VectorSource} from '../src/ol/source.js';
-import {Circle as CircleStyle, Fill, Stroke, Style} from '../src/ol/style.js';
+import GPX from '../src/ol/format/GPX.js';
+import GeoJSON from '../src/ol/format/GeoJSON.js';
+import IGC from '../src/ol/format/IGC.js';
+import KML from '../src/ol/format/KML.js';
+import TopoJSON from '../src/ol/format/TopoJSON.js';
+import {defaults as defaultInteractions} from '../src/ol/interaction.js';
+import DragAndDrop from '../src/ol/interaction/DragAndDrop.js';
+import VectorLayer from '../src/ol/layer/Vector.js';
+import TileLayer from '../src/ol/layer/Tile.js';
+import BingMaps from '../src/ol/source/BingMaps.js';
+import VectorSource from '../src/ol/source/Vector.js';
+import CircleStyle from '../src/ol/style/Circle.js';
+import Fill from '../src/ol/style/Fill.js';
+import Stroke from '../src/ol/style/Stroke.js';
+import Style from '../src/ol/style/Style.js';
 
 
 const defaultStyle = {

examples/drag-and-drop.html

@@ -6,8 +6,7 @@ docs: >
   Example of using the drag-and-drop interaction. Drag and drop GPX, GeoJSON, IGC, KML, or TopoJSON files on to the map. There is no projection transform support, so this will only work with data in EPSG:4326 and EPSG:3857.
 tags: "drag-and-drop, gpx, geojson, igc, kml, topojson"
 cloak:
-  - key: As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5
-    value: Your Bing Maps Key from http://www.bingmapsportal.com/ here
+  As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5: Your Bing Maps Key from http://www.bingmapsportal.com/ here
 ---
 <div id="map" class="map"></div>
 <div id="info">&nbsp;</div>

examples/drag-and-drop.js

@@ -1,10 +1,20 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
-import {GPX, GeoJSON, IGC, KML, TopoJSON} from '../src/ol/format.js';
-import {defaults as defaultInteractions, DragAndDrop} from '../src/ol/interaction.js';
-import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
-import {BingMaps, Vector as VectorSource} from '../src/ol/source.js';
-import {Circle as CircleStyle, Fill, Stroke, Style} from '../src/ol/style.js';
+import GPX from '../src/ol/format/GPX.js';
+import GeoJSON from '../src/ol/format/GeoJSON.js';
+import IGC from '../src/ol/format/IGC.js';
+import KML from '../src/ol/format/KML.js';
+import TopoJSON from '../src/ol/format/TopoJSON.js';
+import {defaults as defaultInteractions} from '../src/ol/interaction.js';
+import DragAndDrop from '../src/ol/interaction/DragAndDrop.js';
+import TileLayer from '../src/ol/layer/Tile.js';
+import VectorLayer from '../src/ol/layer/Vector.js';
+import BingMaps from '../src/ol/source/BingMaps.js';
+import VectorSource from '../src/ol/source/Vector.js';
+import CircleStyle from '../src/ol/style/Circle.js';
+import Fill from '../src/ol/style/Fill.js';
+import Stroke from '../src/ol/style/Stroke.js';
+import Style from '../src/ol/style/Style.js';
 
 
 const defaultStyle = {

examples/drag-rotate-and-zoom.js

@@ -1,6 +1,7 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
-import {defaults as defaultInteractions, DragRotateAndZoom} from '../src/ol/interaction.js';
+import {defaults as defaultInteractions} from '../src/ol/interaction.js';
+import DragRotateAndZoom from '../src/ol/interaction/DragRotateAndZoom.js';
 import TileLayer from '../src/ol/layer/Tile.js';
 import OSM from '../src/ol/source/OSM.js';
 

examples/draw-and-modify-features.html

@@ -1,9 +1,9 @@
 ---
 layout: example.html
 title: Draw and Modify Features
-shortdesc: Example of using the ol/interaction/Draw interaction together with the ol/interaction/Modify interaction.
+shortdesc: Example of using the ol.interaction.Draw interaction together with the ol.interaction.Modify interaction.
 docs: >
-  Example of using the ol/interaction/Draw interaction together with the ol/interaction/Modify interaction.
+  Example of using the ol.interaction.Draw interaction together with the ol.interaction.Modify interaction.
 tags: "draw, edit, modify, vector, featureoverlay"
 ---
 <div id="map" class="map"></div>

examples/draw-and-modify-features.js

@@ -1,9 +1,16 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
-import {Draw, Modify, Snap} from '../src/ol/interaction.js';
-import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
-import {OSM, Vector as VectorSource} from '../src/ol/source.js';
-import {Circle as CircleStyle, Fill, Stroke, Style} from '../src/ol/style.js';
+import Draw from '../src/ol/interaction/Draw.js';
+import Modify from '../src/ol/interaction/Modify.js';
+import Snap from '../src/ol/interaction/Snap.js';
+import TileLayer from '../src/ol/layer/Tile.js';
+import VectorLayer from '../src/ol/layer/Vector.js';
+import OSM from '../src/ol/source/OSM.js';
+import VectorSource from '../src/ol/source/Vector.js';
+import CircleStyle from '../src/ol/style/Circle.js';
+import Fill from '../src/ol/style/Fill.js';
+import Stroke from '../src/ol/style/Stroke.js';
+import Style from '../src/ol/style/Style.js';
 
 const raster = new TileLayer({
   source: new OSM()

examples/draw-features.html

@@ -1,7 +1,7 @@
 ---
 layout: example.html
 title: Draw Features
-shortdesc: Example of using the ol/interaction/Draw interaction.
+shortdesc: Example of using the ol.interaction.Draw interaction.
 docs: >
   Example of using the Draw interaction. Select a geometry type from the
   dropdown above to start drawing. To finish drawing, click the last

examples/draw-features.js

@@ -1,8 +1,10 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
 import Draw from '../src/ol/interaction/Draw.js';
-import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
-import {OSM, Vector as VectorSource} from '../src/ol/source.js';
+import TileLayer from '../src/ol/layer/Tile.js';
+import VectorLayer from '../src/ol/layer/Vector.js';
+import OSM from '../src/ol/source/OSM.js';
+import VectorSource from '../src/ol/source/Vector.js';
 
 const raster = new TileLayer({
   source: new OSM()

examples/draw-freehand.html

@@ -1,13 +1,13 @@
 ---
 layout: example.html
 title: Freehand Drawing
-shortdesc: Example using the ol/interaction/Draw interaction in freehand mode.
+shortdesc: Example using the ol.interaction.Draw interaction in freehand mode.
 docs: >
-  This example demonstrates the `ol/interaction/Draw` in freehand mode.  During
+  This example demonstrates the `ol.interaction.Draw` in freehand mode.  During
   freehand drawing, points are added while dragging.  Set `freehand: true` to
   enable freehand mode.  Note that freehand mode can be conditionally enabled
   by using the `freehandCondition` option.  For example to toggle freehand mode
-  with the `Shift` key, use `freehandCondition: shiftKeyOnly`.
+  with the `Shift` key, use `freehandCondition: ol.events.condition.shiftKeyOnly`.
 tags: "draw, edit, freehand, vector"
 ---
 <div id="map" class="map"></div>

examples/draw-freehand.js

@@ -1,8 +1,10 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
 import Draw from '../src/ol/interaction/Draw.js';
-import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
-import {OSM, Vector as VectorSource} from '../src/ol/source.js';
+import TileLayer from '../src/ol/layer/Tile.js';
+import VectorLayer from '../src/ol/layer/Vector.js';
+import OSM from '../src/ol/source/OSM.js';
+import VectorSource from '../src/ol/source/Vector.js';
 
 const raster = new TileLayer({
   source: new OSM()

examples/draw-shapes.html

@@ -1,10 +1,10 @@
 ---
 layout: example.html
 title: Draw Shapes
-shortdesc: Using the ol/interaction/Draw to create regular shapes
+shortdesc: Using the ol.interaction.Draw to create regular shapes
 docs: >
   This demonstrates the use of the `geometryFunction` option for the
-  `ol/interaction/Draw`. Select a shape type from the dropdown above to start
+  `ol.interaction.Draw`. Select a shape type from the dropdown above to start
   drawing. To activate freehand drawing, hold the `Shift` key. Square drawing is
   achieved by using `type: 'Circle'` type with a `geometryFunction` that creates
   a 4-sided regular polygon instead of a circle. Box drawing uses `type: 'Circle'`

examples/draw-shapes.js

@@ -2,8 +2,10 @@ import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
 import Polygon from '../src/ol/geom/Polygon.js';
 import Draw, {createRegularPolygon, createBox} from '../src/ol/interaction/Draw.js';
-import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
-import {OSM, Vector as VectorSource} from '../src/ol/source.js';
+import TileLayer from '../src/ol/layer/Tile.js';
+import VectorLayer from '../src/ol/layer/Vector.js';
+import OSM from '../src/ol/source/OSM.js';
+import VectorSource from '../src/ol/source/Vector.js';
 
 const raster = new TileLayer({
   source: new OSM()

examples/dynamic-data.js

@@ -1,9 +1,13 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
-import {MultiPoint, Point} from '../src/ol/geom.js';
+import MultiPoint from '../src/ol/geom/MultiPoint.js';
+import Point from '../src/ol/geom/Point.js';
 import TileLayer from '../src/ol/layer/Tile.js';
 import OSM from '../src/ol/source/OSM.js';
-import {Circle as CircleStyle, Fill, Stroke, Style} from '../src/ol/style.js';
+import CircleStyle from '../src/ol/style/Circle.js';
+import Fill from '../src/ol/style/Fill.js';
+import Stroke from '../src/ol/style/Stroke.js';
+import Style from '../src/ol/style/Style.js';
 
 
 const map = new Map({

examples/earthquake-clusters.html

@@ -6,7 +6,7 @@ docs: >
   <p>This example parses a KML file and renders the features as clusters on a vector layer.  The styling in this example is quite involved. Single earthquake locations
   (rendered as stars) have a size relative to their magnitude. Clusters have an opacity relative to the number of features in the cluster, and a size that represents
   the extent of the features that make up the cluster. When clicking or hovering on a cluster, the individual features that make up the cluster will be shown.</p>
-  <p>To achieve this, we make heavy use of style functions.</p>
+  <p>To achieve this, we make heavy use of style functions and <code>ol.style.Style#geometry</code>.</p>
 tags: "KML, vector, style, geometry, cluster"
 ---
 <div id="map" class="map"></div>

examples/earthquake-clusters.js

@@ -2,10 +2,19 @@ import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
 import {createEmpty, getWidth, getHeight, extend} from '../src/ol/extent.js';
 import KML from '../src/ol/format/KML.js';
-import {defaults as defaultInteractions, Select} from '../src/ol/interaction.js';
-import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
-import {Cluster, Stamen, Vector as VectorSource} from '../src/ol/source.js';
-import {Circle as CircleStyle, Fill, RegularShape, Stroke, Style, Text} from '../src/ol/style.js';
+import {defaults as defaultInteractions} from '../src/ol/interaction.js';
+import Select from '../src/ol/interaction/Select.js';
+import TileLayer from '../src/ol/layer/Tile.js';
+import VectorLayer from '../src/ol/layer/Vector.js';
+import Cluster from '../src/ol/source/Cluster.js';
+import Stamen from '../src/ol/source/Stamen.js';
+import VectorSource from '../src/ol/source/Vector.js';
+import CircleStyle from '../src/ol/style/Circle.js';
+import Fill from '../src/ol/style/Fill.js';
+import RegularShape from '../src/ol/style/RegularShape.js';
+import Stroke from '../src/ol/style/Stroke.js';
+import Style from '../src/ol/style/Style.js';
+import Text from '../src/ol/style/Text.js';
 
 
 const earthquakeFill = new Fill({

examples/earthquake-custom-symbol.html

@@ -1,7 +1,7 @@
 ---
 layout: example.html
 title: Earthquakes with custom symbols
-shortdesc: Demonstrates the use of `toCanvas` to create custom icon symbols.
+shortdesc: Demonstrates the use of `ol.render.toCanvas` to create custom icon symbols.
 docs: >
   This example parses a KML file and renders the features as a vector layer.  The layer is given a <code>style</code> that renders earthquake locations with a custom lightning symbol and a size relative to their magnitude.
 tags: "KML, vector, style, canvas, symbol"

examples/earthquake-custom-symbol.js

@@ -2,11 +2,15 @@ import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
 import KML from '../src/ol/format/KML.js';
 import Polygon from '../src/ol/geom/Polygon.js';
-import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
+import TileLayer from '../src/ol/layer/Tile.js';
+import VectorLayer from '../src/ol/layer/Vector.js';
 import {toContext} from '../src/ol/render.js';
 import Stamen from '../src/ol/source/Stamen.js';
 import VectorSource from '../src/ol/source/Vector.js';
-import {Fill, Icon, Stroke, Style} from '../src/ol/style.js';
+import Fill from '../src/ol/style/Fill.js';
+import Icon from '../src/ol/style/Icon.js';
+import Stroke from '../src/ol/style/Stroke.js';
+import Style from '../src/ol/style/Style.js';
 
 
 const symbol = [[0, 0], [4, 2], [6, 0], [10, 5], [6, 3], [4, 5], [0, 0]];

examples/epsg-4326.js

@@ -1,6 +1,7 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
-import {defaults as defaultControls, ScaleLine} from '../src/ol/control.js';
+import {defaults as defaultControls} from '../src/ol/control.js';
+import ScaleLine from '../src/ol/control/ScaleLine.js';
 import TileLayer from '../src/ol/layer/Tile.js';
 import TileWMS from '../src/ol/source/TileWMS.js';
 

examples/export-map.js

@@ -4,8 +4,10 @@ import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
 import {defaults as defaultControls} from '../src/ol/control.js';
 import GeoJSON from '../src/ol/format/GeoJSON.js';
-import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
-import {OSM, Vector as VectorSource} from '../src/ol/source.js';
+import TileLayer from '../src/ol/layer/Tile.js';
+import VectorLayer from '../src/ol/layer/Vector.js';
+import OSM from '../src/ol/source/OSM.js';
+import VectorSource from '../src/ol/source/Vector.js';
 
 const map = new Map({
   layers: [

examples/export-pdf.js

@@ -3,9 +3,11 @@ import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
 import {defaults as defaultControls} from '../src/ol/control.js';
 import WKT from '../src/ol/format/WKT.js';
-import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
+import TileLayer from '../src/ol/layer/Tile.js';
+import VectorLayer from '../src/ol/layer/Vector.js';
 import {unByKey} from '../src/ol/Observable.js';
-import {OSM, Vector as VectorSource} from '../src/ol/source.js';
+import OSM from '../src/ol/source/OSM.js';
+import VectorSource from '../src/ol/source/Vector.js';
 
 const raster = new TileLayer({
   source: new OSM()
@@ -64,7 +66,7 @@ exportButton.addEventListener('click', function() {
   const dim = dims[format];
   const width = Math.round(dim[0] * resolution / 25.4);
   const height = Math.round(dim[1] * resolution / 25.4);
-  const size = /** @type {module:ol/size~Size} */ (map.getSize());
+  const size = /** @type {ol.Size} */ (map.getSize());
   const extent = map.getView().calculateExtent(size);
 
   const source = raster.getSource();

examples/extent-interaction.js

@@ -3,8 +3,10 @@ import View from '../src/ol/View.js';
 import {platformModifierKeyOnly} from '../src/ol/events/condition.js';
 import GeoJSON from '../src/ol/format/GeoJSON.js';
 import ExtentInteraction from '../src/ol/interaction/Extent.js';
-import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
-import {OSM, Vector as VectorSource} from '../src/ol/source.js';
+import TileLayer from '../src/ol/layer/Tile.js';
+import VectorLayer from '../src/ol/layer/Vector.js';
+import OSM from '../src/ol/source/OSM.js';
+import VectorSource from '../src/ol/source/Vector.js';
 
 const vectorSource = new VectorSource({
   url: 'data/geojson/countries.geojson',
@@ -34,12 +36,12 @@ map.addInteraction(extent);
 extent.setActive(false);
 
 //Enable interaction by holding shift
-window.addEventListener('keydown', function(event) {
+this.addEventListener('keydown', function(event) {
   if (event.keyCode == 16) {
     extent.setActive(true);
   }
 });
-window.addEventListener('keyup', function(event) {
+this.addEventListener('keyup', function(event) {
   if (event.keyCode == 16) {
     extent.setActive(false);
   }

examples/feature-animation.js

@@ -5,10 +5,14 @@ import View from '../src/ol/View.js';
 import {defaults as defaultControls} from '../src/ol/control.js';
 import {easeOut} from '../src/ol/easing.js';
 import Point from '../src/ol/geom/Point.js';
-import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
+import TileLayer from '../src/ol/layer/Tile.js';
+import VectorLayer from '../src/ol/layer/Vector.js';
 import {fromLonLat} from '../src/ol/proj.js';
-import {OSM, Vector as VectorSource} from '../src/ol/source.js';
-import {Circle as CircleStyle, Stroke, Style} from '../src/ol/style.js';
+import OSM from '../src/ol/source/OSM.js';
+import VectorSource from '../src/ol/source/Vector.js';
+import CircleStyle from '../src/ol/style/Circle.js';
+import Stroke from '../src/ol/style/Stroke.js';
+import Style from '../src/ol/style/Style.js';
 
 
 const map = new Map({

examples/feature-move-animation.html

@@ -8,8 +8,7 @@ docs: >
   is being used.
 tags: "animation, feature, postcompose, polyline"
 cloak:
-  - key: As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5
-    value: Your Bing Maps Key from http://www.bingmapsportal.com/ here
+  As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5: Your Bing Maps Key from http://www.bingmapsportal.com/ here
 ---
 <div id="map" class="map"></div>
 <label for="speed">

examples/feature-move-animation.js

@@ -3,10 +3,15 @@ import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
 import Polyline from '../src/ol/format/Polyline.js';
 import Point from '../src/ol/geom/Point.js';
-import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
+import TileLayer from '../src/ol/layer/Tile.js';
+import VectorLayer from '../src/ol/layer/Vector.js';
 import BingMaps from '../src/ol/source/BingMaps.js';
 import VectorSource from '../src/ol/source/Vector.js';
-import {Circle as CircleStyle, Fill, Icon, Stroke, Style} from '../src/ol/style.js';
+import CircleStyle from '../src/ol/style/Circle.js';
+import Fill from '../src/ol/style/Fill.js';
+import Icon from '../src/ol/style/Icon.js';
+import Stroke from '../src/ol/style/Stroke.js';
+import Style from '../src/ol/style/Style.js';
 
 // This long string is placed here due to jsFiddle limitations.
 // It is usually loaded with AJAX.

examples/flight-animation.js

@@ -3,10 +3,12 @@ import Feature from '../src/ol/Feature.js';
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
 import LineString from '../src/ol/geom/LineString.js';
-import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
+import TileLayer from '../src/ol/layer/Tile.js';
+import VectorLayer from '../src/ol/layer/Vector.js';
 import Stamen from '../src/ol/source/Stamen.js';
 import VectorSource from '../src/ol/source/Vector.js';
-import {Stroke, Style} from '../src/ol/style.js';
+import Stroke from '../src/ol/style/Stroke.js';
+import Style from '../src/ol/style/Style.js';
 
 const map = new Map({
   layers: [

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

@@ -7,7 +7,6 @@ docs: >
   <p>If there is no button on the map, your browser does not support the <a href="http://caniuse.com/#feat=fullscreen">Full Screen API</a>.</p>
 tags: "full-screen, drag, rotate, zoom, bing, bing-maps"
 cloak:
-  - key: As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5
-    value: Your Bing Maps Key from http://www.bingmapsportal.com/ here
+  As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5: Your Bing Maps Key from http://www.bingmapsportal.com/ here
 ---
 <div id="map" class="map"></div>

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

@@ -1,7 +1,9 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
-import {defaults as defaultControls, FullScreen} from '../src/ol/control.js';
-import {defaults as defaultInteractions, DragRotateAndZoom} from '../src/ol/interaction.js';
+import {defaults as defaultControls} from '../src/ol/control.js';
+import FullScreen from '../src/ol/control/FullScreen.js';
+import {defaults as defaultInteractions} from '../src/ol/interaction.js';
+import DragRotateAndZoom from '../src/ol/interaction/DragRotateAndZoom.js';
 import TileLayer from '../src/ol/layer/Tile.js';
 import BingMaps from '../src/ol/source/BingMaps.js';
 

examples/full-screen-source.js

@@ -1,6 +1,7 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
-import {defaults as defaultControls, FullScreen} from '../src/ol/control.js';
+import {defaults as defaultControls} from '../src/ol/control.js';
+import FullScreen from '../src/ol/control/FullScreen.js';
 import TileLayer from '../src/ol/layer/Tile.js';
 import OSM from '../src/ol/source/OSM.js';
 

examples/full-screen.html

@@ -7,7 +7,6 @@ docs: >
   <p>If there is no button on the map, your browser does not support the <a href="http://caniuse.com/#feat=fullscreen">Full Screen API</a>.</p>
 tags: "full-screen, bing, bing-maps"
 cloak:
-  - key: As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5
-    value: Your Bing Maps Key from http://www.bingmapsportal.com/ here
+  As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5: Your Bing Maps Key from http://www.bingmapsportal.com/ here
 ---
 <div id="map" class="map"></div>

examples/full-screen.js

@@ -1,6 +1,7 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
-import {defaults as defaultControls, FullScreen} from '../src/ol/control.js';
+import {defaults as defaultControls} from '../src/ol/control.js';
+import FullScreen from '../src/ol/control/FullScreen.js';
 import TileLayer from '../src/ol/layer/Tile.js';
 import BingMaps from '../src/ol/source/BingMaps.js';
 

examples/geojson-vt.js

@@ -4,7 +4,8 @@ import View from '../src/ol/View.js';
 import GeoJSON from '../src/ol/format/GeoJSON.js';
 import OSM from '../src/ol/source/OSM.js';
 import VectorTileSource from '../src/ol/source/VectorTile.js';
-import {Tile as TileLayer, VectorTile as VectorTileLayer} from '../src/ol/layer.js';
+import TileLayer from '../src/ol/layer/Tile.js';
+import VectorTileLayer from '../src/ol/layer/VectorTile.js';
 import Projection from '../src/ol/proj/Projection.js';
 
 

examples/geojson.js

@@ -4,9 +4,14 @@ import View from '../src/ol/View.js';
 import {defaults as defaultControls} from '../src/ol/control.js';
 import GeoJSON from '../src/ol/format/GeoJSON.js';
 import Circle from '../src/ol/geom/Circle.js';
-import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
-import {OSM, Vector as VectorSource} from '../src/ol/source.js';
-import {Circle as CircleStyle, Fill, Stroke, Style} from '../src/ol/style.js';
+import TileLayer from '../src/ol/layer/Tile.js';
+import VectorLayer from '../src/ol/layer/Vector.js';
+import OSM from '../src/ol/source/OSM.js';
+import VectorSource from '../src/ol/source/Vector.js';
+import CircleStyle from '../src/ol/style/Circle.js';
+import Fill from '../src/ol/style/Fill.js';
+import Stroke from '../src/ol/style/Stroke.js';
+import Style from '../src/ol/style/Style.js';
 
 
 const image = new CircleStyle({

examples/geolocation-orientation.js

@@ -42,7 +42,8 @@ map.addOverlay(marker);
 // LineString to store the different geolocation positions. This LineString
 // is time aware.
 // The Z dimension is actually used to store the rotation (heading).
-const positions = new LineString([], /** @type {module:ol/geom/GeometryLayout} */ ('XYZM'));
+const positions = new LineString([],
+  /** @type {module:ol/geom/GeometryLayout~GeometryLayout} */ ('XYZM'));
 
 // Geolocation Control
 const geolocation = new Geolocation({

examples/geolocation.js

@@ -4,9 +4,14 @@ import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
 import {defaults as defaultControls} from '../src/ol/control.js';
 import Point from '../src/ol/geom/Point.js';
-import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
-import {OSM, Vector as VectorSource} from '../src/ol/source.js';
-import {Circle as CircleStyle, Fill, Stroke, Style} from '../src/ol/style.js';
+import TileLayer from '../src/ol/layer/Tile.js';
+import VectorLayer from '../src/ol/layer/Vector.js';
+import OSM from '../src/ol/source/OSM.js';
+import VectorSource from '../src/ol/source/Vector.js';
+import CircleStyle from '../src/ol/style/Circle.js';
+import Fill from '../src/ol/style/Fill.js';
+import Stroke from '../src/ol/style/Stroke.js';
+import Style from '../src/ol/style/Style.js';
 
 const view = new View({
   center: [0, 0],

examples/getfeatureinfo-layers.html

@@ -6,7 +6,7 @@ shortdesc: >
   request
 docs: >
   Demonstrates the use of the `layers` option in the
-  `ol/format/WMSGetFeatureInfo` format object, which allows features returned
+  `ol.format.WMSGetFeatureInfo` format object, which allows features returned
   by a single WMS GetFeatureInfo request that asks for more than one layer
   to be read by layer name.
 ---

examples/gpx.html

@@ -6,8 +6,7 @@ docs: >
   Example of using the GPX source.
 tags: "GPX"
 cloak:
-  - key: As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5
-    value: Your Bing Maps Key from http://www.bingmapsportal.com/ here
+  As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5: Your Bing Maps Key from http://www.bingmapsportal.com/ here
 ---
 <div id="map" class="map"></div>
 <div id="info">&nbsp;</div>

examples/gpx.js

@@ -1,10 +1,14 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
 import GPX from '../src/ol/format/GPX.js';
-import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
+import TileLayer from '../src/ol/layer/Tile.js';
+import VectorLayer from '../src/ol/layer/Vector.js';
 import BingMaps from '../src/ol/source/BingMaps.js';
 import VectorSource from '../src/ol/source/Vector.js';
-import {Circle as CircleStyle, Fill, Stroke, Style} from '../src/ol/style.js';
+import CircleStyle from '../src/ol/style/Circle.js';
+import Fill from '../src/ol/style/Fill.js';
+import Stroke from '../src/ol/style/Stroke.js';
+import Style from '../src/ol/style/Style.js';
 
 const raster = new TileLayer({
   source: new BingMaps({

examples/heatmap-earthquakes.html

@@ -3,7 +3,7 @@ layout: example.html
 title: Earthquakes Heatmap
 shortdesc: Demonstrates the use of a heatmap layer.
 docs: >
-  This example parses a KML file and renders the features as a <code>ol/layer/Heatmap</code> layer.
+  This example parses a KML file and renders the features as a <code>ol.layer.Heatmap</code> layer.
 tags: "heatmap, kml, vector, style"
 ---
 <div id="map" class="map"></div>

examples/heatmap-earthquakes.js

@@ -1,7 +1,8 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
 import KML from '../src/ol/format/KML.js';
-import {Heatmap as HeatmapLayer, Tile as TileLayer} from '../src/ol/layer.js';
+import HeatmapLayer from '../src/ol/layer/Heatmap.js';
+import TileLayer from '../src/ol/layer/Tile.js';
 import Stamen from '../src/ol/source/Stamen.js';
 import VectorSource from '../src/ol/source/Vector.js';
 

examples/here-maps.html

@@ -3,14 +3,12 @@ layout: example.html
 title: HERE Map Tile API
 shortdesc: Example of a map with map tiles from HERE.
 docs: >
-  <p><a href="https://developer.here.com/rest-apis/documentation/enterprise-map-tile">HERE Map Tile API</a> used with <code>ol/source/XYZ</code>.</p>
+  <p><a href="https://developer.here.com/rest-apis/documentation/enterprise-map-tile">HERE Map Tile API</a> used with <code>ol.source.XYZ</code>.</p>
   <p>Be sure to respect the <a href="https://legal.here.com/en/terms/serviceterms/us/">HERE Service Terms</a> when using their tile API.</p>
 tags: "here, here-maps, here-tile-api"
 cloak:
-  - key: kDm0Jq1K4Ak7Bwtn8uvk
-    value: Your HERE Maps appId from https://developer.here.com/
-  - key: xnmvc4dKZrDfGlvQHXSvwQ
-    value: Your HERE Maps appCode from https://developer.here.com/
+  kDm0Jq1K4Ak7Bwtn8uvk: Your HERE Maps appId from https://developer.here.com/
+  xnmvc4dKZrDfGlvQHXSvwQ: Your HERE Maps appCode from https://developer.here.com/
 ---
 <div id="map" class="map"></div>
 <select id="layer-select">

examples/hit-tolerance.js

@@ -1,10 +1,13 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
-import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
-import {OSM, Vector as VectorSource} from '../src/ol/source.js';
+import TileLayer from '../src/ol/layer/Tile.js';
+import VectorLayer from '../src/ol/layer/Vector.js';
+import OSM from '../src/ol/source/OSM.js';
+import VectorSource from '../src/ol/source/Vector.js';
 import Feature from '../src/ol/Feature.js';
 import LineString from '../src/ol/geom/LineString.js';
-import {Stroke, Style} from '../src/ol/style.js';
+import Style from '../src/ol/style/Style.js';
+import Stroke from '../src/ol/style/Stroke.js';
 
 const raster = new TileLayer({
   source: new OSM()

examples/icon-color.html

@@ -4,7 +4,7 @@ title: Icon Colors
 shortdesc: Example assigning a custom color to an icon
 docs: >
   Example assigning a custom color to an icon. The features in this examples are all using the same image with the different colors coming from the javascript file.
-  Note that icon files need to obey the same origin policy or send proper CORS headers for this to work. When relying on CORS headers, the `ol/style/Icon` must be configured with `crossOrigin: 'anonymous'`.
+  Note that icon files need to obey the same origin policy or send proper CORS headers for this to work. When relying on CORS headers, the `ol.style.Icon` must be configured with `crossOrigin: 'anonymous'`.
 tags: "vector, style, icon, marker"
 resources:
 ---

examples/icon-color.js

@@ -2,11 +2,13 @@ import Feature from '../src/ol/Feature.js';
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
 import Point from '../src/ol/geom/Point.js';
-import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
+import TileLayer from '../src/ol/layer/Tile.js';
+import VectorLayer from '../src/ol/layer/Vector.js';
 import {fromLonLat} from '../src/ol/proj.js';
 import TileJSON from '../src/ol/source/TileJSON.js';
 import VectorSource from '../src/ol/source/Vector.js';
-import {Icon, Style} from '../src/ol/style.js';
+import Icon from '../src/ol/style/Icon.js';
+import Style from '../src/ol/style/Style.js';
 
 
 const rome = new Feature({
@@ -22,7 +24,7 @@ const madrid = new Feature({
 });
 
 rome.setStyle(new Style({
-  image: new Icon(/** @type {module:ol/style/Icon~Options} */ ({
+  image: new Icon(/** @type {olx.style.IconOptions} */ ({
     color: '#8959A8',
     crossOrigin: 'anonymous',
     src: 'data/dot.png'
@@ -30,7 +32,7 @@ rome.setStyle(new Style({
 }));
 
 london.setStyle(new Style({
-  image: new Icon(/** @type {module:ol/style/Icon~Options} */ ({
+  image: new Icon(/** @type {olx.style.IconOptions} */ ({
     color: '#4271AE',
     crossOrigin: 'anonymous',
     src: 'data/dot.png'
@@ -38,7 +40,7 @@ london.setStyle(new Style({
 }));
 
 madrid.setStyle(new Style({
-  image: new Icon(/** @type {module:ol/style/Icon~Options} */ ({
+  image: new Icon(/** @type {olx.style.IconOptions} */ ({
     color: [113, 140, 0],
     crossOrigin: 'anonymous',
     src: 'data/dot.png'

examples/icon-negative.js

@@ -3,15 +3,17 @@ import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
 import Point from '../src/ol/geom/Point.js';
 import Select from '../src/ol/interaction/Select.js';
-import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
+import TileLayer from '../src/ol/layer/Tile.js';
+import VectorLayer from '../src/ol/layer/Vector.js';
 import Stamen from '../src/ol/source/Stamen.js';
 import VectorSource from '../src/ol/source/Vector.js';
-import {Icon, Style} from '../src/ol/style.js';
+import Icon from '../src/ol/style/Icon.js';
+import Style from '../src/ol/style/Style.js';
 
 
 function createStyle(src, img) {
   return new Style({
-    image: new Icon(/** @type {module:ol/style/Icon~Options} */ ({
+    image: new Icon(/** @type {olx.style.IconOptions} */ ({
       anchor: [0.5, 0.96],
       crossOrigin: 'anonymous',
       src: src,

examples/icon-sprite-webgl.js

@@ -1,10 +1,11 @@
 import Feature from '../src/ol/Feature.js';
-import Map from '../src/ol/WebGLMap.js';
+import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
 import Point from '../src/ol/geom/Point.js';
 import VectorLayer from '../src/ol/layer/Vector.js';
 import VectorSource from '../src/ol/source/Vector.js';
-import {Icon, Style} from '../src/ol/style.js';
+import Icon from '../src/ol/style/Icon.js';
+import Style from '../src/ol/style/Style.js';
 
 
 const iconInfo = [{
@@ -79,6 +80,7 @@ const vector = new VectorLayer({
 });
 
 const map = new Map({
+  renderer: /** @type {Array<ol.renderer.Type>} */ (['webgl', 'canvas']),
   layers: [vector],
   target: document.getElementById('map'),
   view: new View({

examples/icon.js

@@ -3,10 +3,12 @@ import Map from '../src/ol/Map.js';
 import Overlay from '../src/ol/Overlay.js';
 import View from '../src/ol/View.js';
 import Point from '../src/ol/geom/Point.js';
-import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
+import TileLayer from '../src/ol/layer/Tile.js';
+import VectorLayer from '../src/ol/layer/Vector.js';
 import TileJSON from '../src/ol/source/TileJSON.js';
 import VectorSource from '../src/ol/source/Vector.js';
-import {Icon, Style} from '../src/ol/style.js';
+import Icon from '../src/ol/style/Icon.js';
+import Style from '../src/ol/style/Style.js';
 
 
 const iconFeature = new Feature({
@@ -17,7 +19,7 @@ const iconFeature = new Feature({
 });
 
 const iconStyle = new Style({
-  image: new Icon(/** @type {module:ol/style/Icon~Options} */ ({
+  image: new Icon(/** @type {olx.style.IconOptions} */ ({
     anchor: [0.5, 46],
     anchorXUnits: 'fraction',
     anchorYUnits: 'pixels',

examples/igc.html

@@ -6,8 +6,7 @@ docs: >
   <p>The five tracks contain a total of 49,707 unique coordinates. Zoom in to see more detail. The background layer is from <a href="https://www.opencyclemap.org/">OpenCycleMap</a>.</p>
 tags: "complex-geometry, closest-feature, igc, opencyclemap"
 cloak:
-  - key: 0e6fc415256d4fbb9b5166a718591d71
-    value: Your API key from http://www.thunderforest.com/docs/apikeys/ here
+  0e6fc415256d4fbb9b5166a718591d71: Your API key from http://www.thunderforest.com/docs/apikeys/ here
 
 ---
 <div id="map" class="map"></div>

examples/igc.js

@@ -3,11 +3,16 @@ import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
 import {defaults as defaultControls} from '../src/ol/control.js';
 import IGC from '../src/ol/format/IGC.js';
-import {LineString, Point} from '../src/ol/geom.js';
-import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
+import LineString from '../src/ol/geom/LineString.js';
+import Point from '../src/ol/geom/Point.js';
+import TileLayer from '../src/ol/layer/Tile.js';
+import VectorLayer from '../src/ol/layer/Vector.js';
 import OSM, {ATTRIBUTION} from '../src/ol/source/OSM.js';
 import VectorSource from '../src/ol/source/Vector.js';
-import {Circle as CircleStyle, Fill, Stroke, Style} from '../src/ol/style.js';
+import CircleStyle from '../src/ol/style/Circle.js';
+import Fill from '../src/ol/style/Fill.js';
+import Stroke from '../src/ol/style/Stroke.js';
+import Style from '../src/ol/style/Style.js';
 
 
 const colors = {

examples/image-filter.html

@@ -8,8 +8,7 @@ docs: >
   In this example, the <code>postcompose</code> listener applies a filter to the image data.</p>
 tags: "filter, image manipulation"
 cloak:
-  - key: As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5
-    value: Your Bing Maps Key from http://www.bingmapsportal.com/ here
+  As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5: Your Bing Maps Key from http://www.bingmapsportal.com/ here
 ---
 <div id="map" class="map"></div>
 <select id="kernel" name="kernel">

examples/image-vector-layer.html

@@ -3,7 +3,7 @@ layout: example.html
 title: Image Vector Layer
 shortdesc: Example of an image vector layer.
 docs: >
-  <p>This example uses <code>ol/layer/Vector</code> with `renderMode: 'image'`. This mode results in faster rendering during interaction and animations, at the cost of less accurate rendering.</p>
+  <p>This example uses <code>ol.layer.Vector</code> with `renderMode: 'image'`. This mode results in faster rendering during interaction and animations, at the cost of less accurate rendering.</p>
 tags: "vector, image"
 ---
 <div id="map" class="map"></div>

examples/image-vector-layer.js

@@ -3,7 +3,10 @@ import View from '../src/ol/View.js';
 import GeoJSON from '../src/ol/format/GeoJSON.js';
 import VectorLayer from '../src/ol/layer/Vector.js';
 import VectorSource from '../src/ol/source/Vector.js';
-import {Fill, Stroke, Style, Text} from '../src/ol/style.js';
+import Fill from '../src/ol/style/Fill.js';
+import Stroke from '../src/ol/style/Stroke.js';
+import Style from '../src/ol/style/Style.js';
+import Text from '../src/ol/style/Text.js';
 
 
 const style = new Style({