5.0.0-beta.11

Updated type annotations

.eslintignore

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

changelog/upgrade-notes.md

@@ -2,6 +2,39 @@
 
 ### 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

@@ -11,8 +11,7 @@
         "excludePattern": "(^|\\/|\\\\)_",
         "include": [
             "src",
-            "externs/oli.js",
-            "externs/olx.js"
+            "externs/oli.js"
         ]
     },
     "plugins": [

config/jsdoc/api/plugins/api.js

@@ -1,5 +1,6 @@
 /**
  * Define an @api tag
+ * @param {Object} dictionary The tag dictionary.
  */
 exports.defineTags = function(dictionary) {
   dictionary.defineTag('api', {
@@ -8,32 +9,31 @@ 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.
  */
 
-var api = [];
-var classes = {};
-var types = {};
+const api = [];
+const classes = {};
+const types = {};
 
 function hasApiMembers(doclet) {
   return doclet.longname.split('#')[0] == this.longname;
 }
 
 function includeAugments(doclet) {
-  var augments = doclet.augments;
+  const augments = doclet.augments;
   if (augments) {
-    var cls;
-    for (var i = augments.length - 1; i >= 0; --i) {
+    let cls;
+    for (let i = augments.length - 1; i >= 0; --i) {
       cls = classes[augments[i]];
       if (cls) {
         includeAugments(cls);
@@ -68,7 +68,7 @@ function includeAugments(doclet) {
 
 function extractTypes(item) {
   item.type.names.forEach(function(type) {
-    var match = type.match(/^(.*<)?([^>]*)>?$/);
+    const match = type.match(/^(.*<)?([^>]*)>?$/);
     if (match) {
       types[match[2]] = true;
     }
@@ -86,7 +86,6 @@ function includeTypes(doclet) {
     types[doclet.meta.code.name] = true;
   }
   if (doclet.type && doclet.meta.code.type == 'MemberExpression') {
-    // types in olx.js
     extractTypes(doclet);
   }
 }
@@ -94,12 +93,7 @@ function includeTypes(doclet) {
 exports.handlers = {
 
   newDoclet: function(e) {
-    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;
-    }
+    const doclet = e.doclet;
     if (doclet.stability) {
       api.push(doclet);
     }
@@ -114,9 +108,9 @@ exports.handlers = {
   },
 
   parseComplete: function(e) {
-    var doclets = e.doclets;
-    for (var i = doclets.length - 1; i >= 0; --i) {
-      var doclet = doclets[i];
+    const doclets = e.doclets;
+    for (let i = doclets.length - 1; i >= 0; --i) {
+      const doclet = doclets[i];
       if (doclet.stability || doclet.namespace_) {
         if (doclet.kind == 'class') {
           includeAugments(doclet);

config/jsdoc/api/plugins/events.js

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

@@ -19,16 +19,16 @@ exports.defineTags = function(dictionary) {
 };
 
 
-var lookup = {};
-var incompleteByClass = {};
-var keepKeys = ['comment', 'meta', 'name', 'memberof', 'longname', 'augment',
-    'stability'];
+const lookup = {};
+const incompleteByClass = {};
+const keepKeys = ['comment', 'meta', 'name', 'memberof', 'longname', 'augment',
+  'stability'];
 
 exports.handlers = {
 
   newDoclet: function(e) {
-    var doclet = e.doclet;
-    var incompletes;
+    const doclet = e.doclet;
+    let incompletes;
     if (!(doclet.longname in lookup)) {
       lookup[doclet.longname] = [];
     }
@@ -45,9 +45,9 @@ exports.handlers = {
   },
 
   parseComplete: function(e) {
-    var ancestors, candidate, candidates, doclet, i, j, k, l, key;
-    var incompleteDoclet, stability, incomplete, incompletes;
-    var doclets = e.doclets;
+    let ancestors, candidate, candidates, doclet, i, j, k, l, key;
+    let incompleteDoclet, stability, incomplete, incompletes;
+    const doclets = e.doclets;
     for (i = doclets.length - 1; i >= 0; --i) {
       doclet = doclets[i];
       if (doclet.augments) {

config/jsdoc/api/plugins/observable.js

@@ -1,25 +1,25 @@
-var classes = {};
-var observables = {};
+const classes = {};
+const observables = {};
 
 exports.handlers = {
 
   newDoclet: function(e) {
-    var doclet = e.doclet;
+    const doclet = e.doclet;
     if (doclet.kind == 'class') {
       classes[doclet.longname] = doclet;
     }
   },
 
   parseComplete: function(e) {
-    var doclets = e.doclets;
-    var cls, doclet, event, i, ii, observable;
+    const doclets = e.doclets;
+    let 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) {
-        var name = doclet.name.replace(/^[sg]et/, '');
+        let name = doclet.name.replace(/^[sg]et/, '');
         name = name.substr(0, 1).toLowerCase() + name.substr(1);
-        var key = doclet.longname.split('#')[0] + '#' + name;
+        const 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;

config/jsdoc/api/plugins/typedefs.js

@@ -1,49 +1,27 @@
 /*
- * 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
-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;
-      }
-    }
-  }
-}
+let undefinedLikes = null;
 
 /**
- * Changes the description of the param, if it is found to be a required
- * option of an olxTypeName.
+ * Changes the description of the param if it is required.
+ * @param {Object} doclet The doclet.
+ * @returns {Object} The modified doclet.
  */
-function markRequiredIfNeeded(doclet){
-  var memberof = doclet.memberof;
-  // only check doclets that belong to an olxTypeName
-  if (!memberof || olxTypeNames.indexOf(memberof) == -1) {
+function markRequiredIfNeeded(doclet) {
+  const memberof = doclet.memberof;
+  if (!memberof) {
     return doclet;
   }
 
-  var types = doclet.type.names;
-  var isRequiredParam = true;
+  const types = doclet.type.names;
+  let isRequiredParam = true;
 
   // iterate over all types that are like-undefined (see above for explanation)
-  for (var idx = undefinedLikes.length - 1; idx >= 0; idx--) {
-    var undefinedLike = undefinedLikes[idx];
+  for (let idx = undefinedLikes.length - 1; idx >= 0; idx--) {
+    const undefinedLike = undefinedLikes[idx];
     // … if the current types contains a type that is undefined-like,
     // it is not required.
     if (types.indexOf(undefinedLike) != -1) {
@@ -52,9 +30,9 @@ function markRequiredIfNeeded(doclet){
   }
 
   if (isRequiredParam) {
-    var reqSnippet = '<span class="required-option">Required.</span></p>';
-    var endsWithP = /<\/p>$/i;
-    var description = doclet.description;
+    const reqSnippet = '<span class="required-option">Required.</span></p>';
+    const endsWithP = /<\/p>$/i;
+    let description = doclet.description;
     if (description && endsWithP.test(description)) {
       description = description.replace(endsWithP, ' ' + reqSnippet);
     } else if (doclet.description === undefined) {
@@ -69,13 +47,14 @@ 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 (var i = doclets.length - 1; i >= 0; --i) {
-    var doclet = doclets[i];
-    if(doclet.kind === 'typedef') {
-      var types = doclet.type.names;
+  for (let i = doclets.length - 1; i >= 0; --i) {
+    const doclet = doclets[i];
+    if (doclet.kind === 'typedef') {
+      const types = doclet.type.names;
       if (types.indexOf('undefined') !== -1) {
         // the typedef contains 'undefined', so it self is undefinedLike.
         undefinedLikes.push(doclet.longname);
@@ -87,20 +66,8 @@ function findTypesLikeUndefined(doclets) {
 exports.handlers = {
 
   newDoclet: function(e) {
-    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) {
+    const doclet = e.doclet;
+    if (doclet.isEnum) {
       // We never export enums, so we document them like typedefs
       doclet.kind = 'typedef';
       delete doclet.isEnum;
@@ -108,15 +75,10 @@ exports.handlers = {
   },
 
   parseComplete: function(e) {
-    var doclets = e.doclets;
+    const doclets = e.doclets;
     findTypesLikeUndefined(doclets);
-    for (var i = doclets.length - 1; i >= 0; --i) {
-      var doclet = doclets[i];
-      var params = doclet.params;
-      if (params) {
-        addSubparams(params);
-      }
-      markRequiredIfNeeded(doclet);
+    for (let i = doclets.length - 1; i >= 0; --i) {
+      markRequiredIfNeeded(doclets[i]);
     }
   }
 

config/jsdoc/api/template/publish.js

@@ -1,152 +1,152 @@
 /*global env: true */
-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;
+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 hasOwnProp = Object.prototype.hasOwnProperty;
+const outdir = env.opts.destination;
+
+let view;
+let data;
 
 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;
+  }
 
-    var url = helper.createLink(doclet);
+  let 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) {
-    var needsSig = false;
+  let needsSig = false;
 
-    // function and class definitions always get a signature
-    if (doclet.kind === 'function' || doclet.kind === 'class') {
-        needsSig = true;
-    }
+  // 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
-    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;
-            }
-        }
+    for (let 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) {
-    var params = helper.getSignatureParams(f, 'optional');
+  const params = helper.getSignatureParams(f, 'optional');
 
-    f.signature = (f.signature || '') + '('+params.join(', ')+')';
+  f.signature = (f.signature || '') + '(' + params.join(', ') + ')';
 }
 
 function addSignatureReturns(f) {
-    var returnTypes = helper.getSignatureReturns(f);
+  const 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) {
-    var types = helper.getSignatureTypes(f);
+  const 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
-    var regexp = new RegExp('\\\\', 'g');
+  // always use forward slashes
+  const 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;
+  }
 
-    var filepath = doclet.meta.path && doclet.meta.path !== 'null' ?
-        doclet.meta.path + '/' + doclet.meta.filename.split(/[\/\\]/).pop() :
-        doclet.meta.filename;
+  const 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;
 
-    var docData = {
-        filename: filename,
-        title: title,
-        docs: docs,
-        packageInfo: ( find({kind: 'package'}) || [] ) [0]
-    };
+  const docData = {
+    filename: filename,
+    title: title,
+    docs: docs,
+    packageInfo: (find({kind: 'package'}) || []) [0]
+  };
 
-    var outpath = path.join(outdir, filename),
-        html = view.render('container.tmpl', docData);
+  const outpath = path.join(outdir, filename);
+  let 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) {
-        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);
+  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);
 
-        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);
+  });
 }
 
 /**
@@ -161,346 +161,348 @@ function generateSourceFiles(sourceFiles) {
  * @param {Array.<module:jsdoc/doclet.Doclet>} modules - The array of module doclets to search.
  */
 function attachModuleSymbols(doclets, modules) {
-    var symbols = {};
+  const 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;
+  });
 
-    return modules.map(function(module) {
-        if (symbols[module.longname]) {
-            module.module = symbols[module.longname];
-            module.module.name = module.module.name.replace('module:', 'require("') + '")';
-        }
-    });
+  modules.forEach(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
- * @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
+ * @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.
  * @return {string} The HTML for the navigation sidebar.
  */
 function buildNav(members) {
-    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
-                })
-            });
-          }
+  const nav = [];
+  // merge namespaces and classes, then sort
+  const 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 interfaces from sidebar
+    if (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
+          })
+        });
       }
-    });
-    return nav;
+      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;
 }
 
 
 /**
-    @param {TAFFY} taffyData See <http://taffydb.com/>.
-    @param {object} opts
-    @param {Tutorial} tutorials
+ * @param {Object} taffyData See <http://taffydb.com/>.
+ * @param {Object} opts Options.
+ * @param {Object} tutorials Tutorials.
  */
 exports.publish = function(taffyData, opts, tutorials) {
-    data = taffyData;
+  data = taffyData;
 
-    var conf = env.conf.templates || {};
-    conf['default'] = conf['default'] || {};
+  const conf = env.conf.templates || {};
+  conf['default'] = conf['default'] || {};
 
-    var templatePath = opts.template;
-    view = new template.Template(templatePath + '/tmpl');
+  const 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
-    var 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
+  const indexUrl = helper.getUniqueFilename('index');
+  // don't call registerLink() on this one! 'index' is also a valid longname
 
-    var globalUrl = helper.getUniqueFilename('global');
-    helper.registerLink('global', globalUrl);
+  const 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);
 
-    var sourceFiles = {};
-    var sourceFilePaths = [];
-    data().each(function(doclet) {
-         doclet.attribs = '';
+  let sourceFiles = {};
+  const sourceFilePaths = [];
+  data().each(function(doclet) {
+    doclet.attribs = '';
 
-        if (doclet.examples) {
-            doclet.examples = doclet.examples.map(function(example) {
-                var caption, code;
+    if (doclet.examples) {
+      doclet.examples = doclet.examples.map(function(example) {
+        let caption, code;
 
-                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);
-            });
+        if (example.match(/^\s*<caption>([\s\S]+?)<\/caption>(\s*[\n\r])([\s\S]+)$/i)) {
+          caption = RegExp.$1;
+          code    = RegExp.$3;
         }
 
-        // 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);
-        }
-    });
+        return {
+          caption: caption || '',
+          code: code || example
+        };
+      });
+    }
+    if (doclet.see) {
+      doclet.see.forEach(function(seeItem, i) {
+        doclet.see[i] = hashToLink(doclet, seeItem);
+      });
+    }
 
-    fs.mkPath(outdir);
+    // 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);
+    }
+  });
 
-    // copy the template's static files to outdir
-    var fromDir = path.join(templatePath, 'static');
-    var staticFiles = fs.ls(fromDir, 3);
+  fs.mkPath(outdir);
 
-    staticFiles.forEach(function(fileName) {
-        var toDir = fs.toDir( fileName.replace(fromDir, outdir) );
+  // 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));
         fs.mkPath(toDir);
         fs.copyFileSync(fileName, toDir);
+      });
     });
+  }
 
-    // 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();
+  if (sourceFilePaths.length) {
+    sourceFiles = shortenPaths(sourceFiles, path.commonPrefix(sourceFilePaths));
+  }
+  data().each(function(doclet) {
+    const url = helper.createLink(doclet);
+    helper.registerLink(doclet.longname, url);
 
-        staticFilePaths.forEach(function(filePath) {
-            var extraStaticFiles = staticFileScanner.scan([filePath], 10, staticFileFilter);
+    // 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;
+      }
+    }
+  });
 
-            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);
-            });
-        });
+  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;
     }
 
-    if (sourceFilePaths.length) {
-        sourceFiles = shortenPaths( sourceFiles, path.commonPrefix(sourceFilePaths) );
+    if (needsSignature(doclet)) {
+      addSignatureParams(doclet);
+      addSignatureReturns(doclet);
     }
-    data().each(function(doclet) {
-        var url = helper.createLink(doclet);
-        helper.registerLink(doclet.longname, url);
+  });
 
-        // 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;
-            }
-        }
-    });
+  // do this after the urls have all been generated
+  data().each(function(doclet) {
+    doclet.ancestors = getAncestorLinks(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 === 'member') {
+      addSignatureTypes(doclet);
     }
 
-    if (members.globals.length) { generate('Global', [{kind: 'globalobj'}], globalUrl); }
+    if (doclet.kind === 'constant') {
+      addSignatureTypes(doclet);
+      doclet.kind = 'member';
+    }
+  });
 
-    // index page displays information from package.json and lists files
-    var files = find({kind: 'file'});
+  const members = helper.getMembers(data);
+  members.tutorials = tutorials.children;
 
-    generate('Index',
-        [{kind: 'mainpage', readme: opts.readme, longname: (opts.mainpagetitle) ? opts.mainpagetitle : 'Main Page'}].concat(files),
+  // 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),
     indexUrl);
 
-    // 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);
+  // 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);
 
-    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]);
-            }
+  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]);
+      }
 
-            var myModules = helper.find(modules, {longname: longname});
-            if (myModules.length) {
-                generate('Module: ' + myModules[0].name, myModules, helper.longnameToUrl[longname]);
-            }
+      const myModules = helper.find(modules, {longname: longname});
+      if (myModules.length) {
+        generate('Module: ' + myModules[0].name, myModules, helper.longnameToUrl[longname]);
+      }
 
-            var myNamespaces = helper.find(namespaces, {longname: longname});
-            if (myNamespaces.length) {
-                generate('Namespace: ' + myNamespaces[0].name, myNamespaces, helper.longnameToUrl[longname]);
-            }
+      const myNamespaces = helper.find(namespaces, {longname: longname});
+      if (myNamespaces.length) {
+        generate('Namespace: ' + myNamespaces[0].name, myNamespaces, helper.longnameToUrl[longname]);
+      }
 
-            var myMixins = helper.find(mixins, {longname: longname});
-            if (myMixins.length) {
-                generate('Mixin: ' + myMixins[0].name, myMixins, helper.longnameToUrl[longname]);
-            }
+      const myMixins = helper.find(mixins, {longname: longname});
+      if (myMixins.length) {
+        generate('Mixin: ' + myMixins[0].name, myMixins, helper.longnameToUrl[longname]);
+      }
 
-            var myExternals = helper.find(externals, {longname: longname});
-            if (myExternals.length) {
-                generate('External: ' + myExternals[0].name, myExternals, helper.longnameToUrl[longname]);
-            }
-        }
+      const 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) {
-        var 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) {
+    const tutorialData = {
+      title: title,
+      header: tutorial.title,
+      content: tutorial.parse(),
+      children: tutorial.children
+    };
 
-        var tutorialPath = path.join(outdir, filename),
-            html = view.render('tutorial.tmpl', tutorialData);
+    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>
 
-        // yes, you can use {@link} in tutorials too!
-        html = helper.resolveLinks(html); // turn {@link foo} into <a href="foodoc.html">foo</a>
+    const tutorialPath = path.join(outdir, filename);
+    fs.writeFileSync(tutorialPath, html, 'utf8');
+  }
 
-        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);
+  // 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/info/define-plugin.js

@@ -6,7 +6,7 @@
  */
 
 
-var DEFAULT_VALUE = /default\s+is\s+`?(true|false)`?/i;
+const 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) {
-      var types = tag.value.type.names;
+      const types = tag.value.type.names;
       if (types.length === 1 && types[0] === 'boolean') {
-        var match = tag.value.description.match(DEFAULT_VALUE);
+        const match = tag.value.description.match(DEFAULT_VALUE);
         if (match) {
           doclet.define = {
             default: match[1] === 'true'

config/jsdoc/info/publish.js

@@ -22,8 +22,7 @@ exports.publish = function(data, opts) {
     return types;
   }
 
-  // get all doclets with the "api" property or define (excluding events) or
-  // with olx namespace
+  // get all doclets with the "api" property or define (excluding events)
   const classes = {};
   const docs = data(
     [
@@ -61,24 +60,7 @@ exports.publish = function(data, opts) {
     return include;
   }).forEach(function(doc) {
     const isExterns = (/[\\\/]externs$/).test(doc.meta.path);
-    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) {
+    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) {
 
-  var classTag = dictionary.lookUp('class');
+  const 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"` or `"EPSG"`.
+Unknown SRS type. Expected `"name"`.
 
 ### 37
 

doc/tutorials/closure.md

@@ -176,8 +176,6 @@ The minimum config file looks like this:
       "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": [
@@ -228,8 +226,6 @@ Here is a version of `config.json` with more compilation checks enabled:
       "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": [

doc/tutorials/custom-builds.md

@@ -56,7 +56,6 @@ Creating a custom build requires writing a build configuration file. The format
       "externs/esrijson.js",
       "externs/geojson.js",
       "externs/oli.js",
-      "externs/olx.js",
       "externs/proj4js.js",
       "externs/tilejson.js",
       "externs/topojson.js"
@@ -169,8 +168,6 @@ and re-run the build script. The build size should now be smaller.
 
 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.
@@ -208,7 +205,6 @@ Now let's try a more complicated example: [`heatmaps-earthquakes`](https://openl
       "externs/closure-compiler.js",
       "externs/esrijson.js",
       "externs/geojson.js",
-      "externs/olx.js",
       "externs/oli.js",
       "externs/proj4js.js",
       "externs/tilejson.js",

examples/arcgis-image.js

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

examples/attributions.js

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

examples/bing-maps.html

@@ -3,10 +3,11 @@ 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:
-  As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5: Your Bing Maps Key from http://www.bingmapsportal.com/ here
+  - key: As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5
+    value: 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,10 +4,7 @@ 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 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 {Circle as CircleStyle, Fill, Stroke, Style} from '../src/ol/style.js';
 
 
 // Create separate layers for red, green an blue circles.
@@ -96,7 +93,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 {ol.render.Event} evt The render event.
+ * @param {module:ol/render/Event~RenderEvent} evt The render event.
  */
 const setBlendModeFromSelect = function(evt) {
   evt.context.globalCompositeOperation = select.value;
@@ -107,7 +104,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 {ol.render.Event} evt The render event.
+ * @param {module:ol/render/Event~RenderEvent} evt The render event.
  */
 const resetBlendModeFromSelect = function(evt) {
   evt.context.globalCompositeOperation = 'source-over';
@@ -117,7 +114,7 @@ const resetBlendModeFromSelect = function(evt) {
 /**
  * Bind the pre- and postcompose handlers to the passed layer.
  *
- * @param {ol.layer.Vector} layer The layer to bind the handlers to.
+ * @param {module:ol/layer/Vector} layer The layer to bind the handlers to.
  */
 const bindLayerListeners = function(layer) {
   layer.on('precompose', setBlendModeFromSelect);
@@ -128,7 +125,7 @@ const bindLayerListeners = function(layer) {
 /**
  * Unind the pre- and postcompose handlers to the passed layers.
  *
- * @param {ol.layer.Vector} layer The layer to unbind the handlers from.
+ * @param {module: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,12 +2,9 @@ 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 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';
+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';
 
 
 const vectorSource = new VectorSource({

examples/canvas-gradient-pattern.js

@@ -6,9 +6,7 @@ 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 from '../src/ol/style/Fill.js';
-import Stroke from '../src/ol/style/Stroke.js';
-import Style from '../src/ol/style/Style.js';
+import {Fill, Stroke, Style} from '../src/ol/style.js';
 
 const canvas = document.createElement('canvas');
 const context = canvas.getContext('2d');
@@ -72,7 +70,7 @@ const style = new Style({
  *
  * @param {module:ol/Feature~Feature} feature The feature to style.
  * @param {number} resolution Resolution.
- * @return {ol.style.Style} The style to use for the feature.
+ * @return {module:ol/style/Style} The style to use for the feature.
  */
 const getStackedStyle = function(feature, resolution) {
   const id = feature.getId();

examples/canvas-tiles.js

@@ -3,8 +3,7 @@ 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 from '../src/ol/source/OSM.js';
-import TileDebug from '../src/ol/source/TileDebug.js';
+import {OSM, TileDebug} from '../src/ol/source.js';
 
 
 const osmSource = new OSM();

examples/cartodb.js

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

examples/center.js

@@ -2,14 +2,9 @@ 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 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';
+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';
 
 const source = new VectorSource({
   url: 'data/geojson/switzerland.geojson',
@@ -92,6 +87,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 {ol.Size} */ (map.getSize());
+  const size = /** @type {module:ol/size~Size} */ (map.getSize());
   view.centerOn(point.getCoordinates(), size, [570, 500]);
 }, false);

examples/chaikin.html

@@ -0,0 +1,20 @@
+---
+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

@@ -0,0 +1,54 @@
+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,16 +2,9 @@ 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 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';
+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';
 
 
 const distance = document.getElementById('distance');

examples/color-manipulation.js

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

examples/custom-controls.js

@@ -1,8 +1,7 @@
 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} from '../src/ol/control.js';
-import Control from '../src/ol/control/Control.js';
+import {defaults as defaultControls, Control} from '../src/ol/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,19 +2,11 @@ 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 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';
+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';
 
 
 /**
@@ -25,7 +17,7 @@ const app = {};
 
 /**
  * @constructor
- * @extends {ol.interaction.Pointer}
+ * @extends {module:ol/interaction/Pointer}
  */
 app.Drag = function() {
 
@@ -37,7 +29,7 @@ app.Drag = function() {
   });
 
   /**
-   * @type {ol.Pixel}
+   * @type {module:ol~Pixel}
    * @private
    */
   this.coordinate_ = null;
@@ -157,7 +149,7 @@ const map = new Map({
         features: [pointFeature, lineFeature, polygonFeature]
       }),
       style: new Style({
-        image: new Icon(/** @type {olx.style.IconOptions} */ ({
+        image: new Icon(/** @type {module:ol/style/Icon~Options} */ ({
           anchor: [0.5, 46],
           anchorXUnits: 'fraction',
           anchorYUnits: 'pixels',

examples/d3.js

@@ -2,11 +2,9 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
 import {getWidth, getCenter} from '../src/ol/extent.js';
-import ImageLayer from '../src/ol/layer/Image.js';
-import TileLayer from '../src/ol/layer/Tile.js';
+import {Image as ImageLayer, Tile as TileLayer} from '../src/ol/layer.js';
 import {fromLonLat, toLonLat} from '../src/ol/proj.js';
-import ImageCanvasSource from '../src/ol/source/ImageCanvas.js';
-import Stamen from '../src/ol/source/Stamen.js';
+import {ImageCanvas as ImageCanvasSource, Stamen} from '../src/ol/source.js';
 
 
 const map = new Map({
@@ -26,17 +24,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 {ol.Extent} extent Extent.
+   * @param {module:ol/extent~Extent} extent Extent.
    * @param {number} resolution Resolution.
    * @param {number} pixelRatio Pixel ratio.
-   * @param {ol.Size} size Size.
+   * @param {module:ol/size~Size} size Size.
    * @param {module:ol/proj/Projection~Projection} projection Projection.
    * @return {HTMLCanvasElement} A canvas element.
    */

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

@@ -3,10 +3,11 @@ 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:
-  As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5: Your Bing Maps Key from http://www.bingmapsportal.com/ here
+  - key: As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5
+    value: 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,20 +1,10 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.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';
+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';
 
 
 const defaultStyle = {

examples/drag-and-drop.html

@@ -6,7 +6,8 @@ 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:
-  As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5: Your Bing Maps Key from http://www.bingmapsportal.com/ here
+  - key: As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5
+    value: 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,20 +1,10 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.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';
+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';
 
 
 const defaultStyle = {

examples/drag-rotate-and-zoom.js

@@ -1,7 +1,6 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
-import {defaults as defaultInteractions} from '../src/ol/interaction.js';
-import DragRotateAndZoom from '../src/ol/interaction/DragRotateAndZoom.js';
+import {defaults as defaultInteractions, DragRotateAndZoom} from '../src/ol/interaction.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,16 +1,9 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.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';
+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';
 
 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,10 +1,8 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
 import Draw from '../src/ol/interaction/Draw.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 {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
+import {OSM, Vector as VectorSource} from '../src/ol/source.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: ol.events.condition.shiftKeyOnly`.
+  with the `Shift` key, use `freehandCondition: shiftKeyOnly`.
 tags: "draw, edit, freehand, vector"
 ---
 <div id="map" class="map"></div>

examples/draw-freehand.js

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

examples/dynamic-data.js

@@ -1,13 +1,9 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
-import MultiPoint from '../src/ol/geom/MultiPoint.js';
-import Point from '../src/ol/geom/Point.js';
+import {MultiPoint, Point} from '../src/ol/geom.js';
 import TileLayer from '../src/ol/layer/Tile.js';
 import OSM from '../src/ol/source/OSM.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 {Circle as CircleStyle, Fill, Stroke, Style} from '../src/ol/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 and <code>ol.style.Style#geometry</code>.</p>
+  <p>To achieve this, we make heavy use of style functions.</p>
 tags: "KML, vector, style, geometry, cluster"
 ---
 <div id="map" class="map"></div>

examples/earthquake-clusters.js

@@ -2,19 +2,10 @@ 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} 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';
+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';
 
 
 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 `ol.render.toCanvas` to create custom icon symbols.
+shortdesc: Demonstrates the use of `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,15 +2,11 @@ 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 TileLayer from '../src/ol/layer/Tile.js';
-import VectorLayer from '../src/ol/layer/Vector.js';
+import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.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 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';
+import {Fill, Icon, Stroke, Style} from '../src/ol/style.js';
 
 
 const symbol = [[0, 0], [4, 2], [6, 0], [10, 5], [6, 3], [4, 5], [0, 0]];

examples/epsg-4326.js

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

examples/export-map.js

@@ -4,10 +4,8 @@ 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 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 {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
+import {OSM, Vector as VectorSource} from '../src/ol/source.js';
 
 const map = new Map({
   layers: [

examples/export-pdf.js

@@ -3,11 +3,9 @@ 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 TileLayer from '../src/ol/layer/Tile.js';
-import VectorLayer from '../src/ol/layer/Vector.js';
+import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
 import {unByKey} from '../src/ol/Observable.js';
-import OSM from '../src/ol/source/OSM.js';
-import VectorSource from '../src/ol/source/Vector.js';
+import {OSM, Vector as VectorSource} from '../src/ol/source.js';
 
 const raster = new TileLayer({
   source: new OSM()
@@ -66,7 +64,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 {ol.Size} */ (map.getSize());
+  const size = /** @type {module:ol/size~Size} */ (map.getSize());
   const extent = map.getView().calculateExtent(size);
 
   const source = raster.getSource();

examples/extent-interaction.js

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

examples/feature-animation.js

@@ -5,14 +5,10 @@ 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 TileLayer from '../src/ol/layer/Tile.js';
-import VectorLayer from '../src/ol/layer/Vector.js';
+import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
 import {fromLonLat} from '../src/ol/proj.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';
+import {OSM, Vector as VectorSource} from '../src/ol/source.js';
+import {Circle as CircleStyle, Stroke, Style} from '../src/ol/style.js';
 
 
 const map = new Map({

examples/feature-move-animation.html

@@ -8,7 +8,8 @@ docs: >
   is being used.
 tags: "animation, feature, postcompose, polyline"
 cloak:
-  As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5: Your Bing Maps Key from http://www.bingmapsportal.com/ here
+  - key: As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5
+    value: 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,15 +3,10 @@ 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 TileLayer from '../src/ol/layer/Tile.js';
-import VectorLayer from '../src/ol/layer/Vector.js';
+import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.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 Icon from '../src/ol/style/Icon.js';
-import Stroke from '../src/ol/style/Stroke.js';
-import Style from '../src/ol/style/Style.js';
+import {Circle as CircleStyle, Fill, Icon, Stroke, Style} from '../src/ol/style.js';
 
 // This long string is placed here due to jsFiddle limitations.
 // It is usually loaded with AJAX.

examples/flight-animation.js

@@ -3,12 +3,10 @@ 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 TileLayer from '../src/ol/layer/Tile.js';
-import VectorLayer from '../src/ol/layer/Vector.js';
+import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
 import Stamen from '../src/ol/source/Stamen.js';
 import VectorSource from '../src/ol/source/Vector.js';
-import Stroke from '../src/ol/style/Stroke.js';
-import Style from '../src/ol/style/Style.js';
+import {Stroke, Style} from '../src/ol/style.js';
 
 const map = new Map({
   layers: [

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

@@ -7,6 +7,7 @@ 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:
-  As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5: Your Bing Maps Key from http://www.bingmapsportal.com/ here
+  - key: As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5
+    value: 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,9 +1,7 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.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 {defaults as defaultControls, FullScreen} from '../src/ol/control.js';
+import {defaults as defaultInteractions, DragRotateAndZoom} from '../src/ol/interaction.js';
 import TileLayer from '../src/ol/layer/Tile.js';
 import BingMaps from '../src/ol/source/BingMaps.js';
 

examples/full-screen-source.js

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

examples/full-screen.html

@@ -7,6 +7,7 @@ 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:
-  As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5: Your Bing Maps Key from http://www.bingmapsportal.com/ here
+  - key: As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5
+    value: Your Bing Maps Key from http://www.bingmapsportal.com/ here
 ---
 <div id="map" class="map"></div>

examples/full-screen.js

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

examples/geojson-vt.js

@@ -4,8 +4,7 @@ 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 TileLayer from '../src/ol/layer/Tile.js';
-import VectorTileLayer from '../src/ol/layer/VectorTile.js';
+import {Tile as TileLayer, VectorTile as VectorTileLayer} from '../src/ol/layer.js';
 import Projection from '../src/ol/proj/Projection.js';
 
 

examples/geojson.js

@@ -4,14 +4,9 @@ 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 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';
+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';
 
 
 const image = new CircleStyle({

examples/geolocation.js

@@ -4,14 +4,9 @@ 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 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';
+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';
 
 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,7 +6,8 @@ docs: >
   Example of using the GPX source.
 tags: "GPX"
 cloak:
-  As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5: Your Bing Maps Key from http://www.bingmapsportal.com/ here
+  - key: As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5
+    value: 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,14 +1,10 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
 import GPX from '../src/ol/format/GPX.js';
-import TileLayer from '../src/ol/layer/Tile.js';
-import VectorLayer from '../src/ol/layer/Vector.js';
+import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.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';
+import {Circle as CircleStyle, Fill, Stroke, Style} from '../src/ol/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,8 +1,7 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
 import KML from '../src/ol/format/KML.js';
-import HeatmapLayer from '../src/ol/layer/Heatmap.js';
-import TileLayer from '../src/ol/layer/Tile.js';
+import {Heatmap as HeatmapLayer, Tile as TileLayer} from '../src/ol/layer.js';
 import Stamen from '../src/ol/source/Stamen.js';
 import VectorSource from '../src/ol/source/Vector.js';
 

examples/here-maps.html

@@ -3,12 +3,14 @@ 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:
-  kDm0Jq1K4Ak7Bwtn8uvk: Your HERE Maps appId from https://developer.here.com/
-  xnmvc4dKZrDfGlvQHXSvwQ: Your HERE Maps appCode from https://developer.here.com/
+  - key: kDm0Jq1K4Ak7Bwtn8uvk
+    value: Your HERE Maps appId from https://developer.here.com/
+  - key: xnmvc4dKZrDfGlvQHXSvwQ
+    value: Your HERE Maps appCode from https://developer.here.com/
 ---
 <div id="map" class="map"></div>
 <select id="layer-select">

examples/hit-tolerance.js

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

examples/icon-negative.js

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

examples/icon-sprite-webgl.js

@@ -1,11 +1,10 @@
 import Feature from '../src/ol/Feature.js';
-import Map from '../src/ol/Map.js';
+import Map from '../src/ol/WebGLMap.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 from '../src/ol/style/Icon.js';
-import Style from '../src/ol/style/Style.js';
+import {Icon, Style} from '../src/ol/style.js';
 
 
 const iconInfo = [{
@@ -80,7 +79,6 @@ 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,12 +3,10 @@ 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 TileLayer from '../src/ol/layer/Tile.js';
-import VectorLayer from '../src/ol/layer/Vector.js';
+import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
 import TileJSON from '../src/ol/source/TileJSON.js';
 import VectorSource from '../src/ol/source/Vector.js';
-import Icon from '../src/ol/style/Icon.js';
-import Style from '../src/ol/style/Style.js';
+import {Icon, Style} from '../src/ol/style.js';
 
 
 const iconFeature = new Feature({
@@ -19,7 +17,7 @@ const iconFeature = new Feature({
 });
 
 const iconStyle = new Style({
-  image: new Icon(/** @type {olx.style.IconOptions} */ ({
+  image: new Icon(/** @type {module:ol/style/Icon~Options} */ ({
     anchor: [0.5, 46],
     anchorXUnits: 'fraction',
     anchorYUnits: 'pixels',

examples/igc.html

@@ -6,7 +6,8 @@ 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:
-  0e6fc415256d4fbb9b5166a718591d71: Your API key from http://www.thunderforest.com/docs/apikeys/ here
+  - key: 0e6fc415256d4fbb9b5166a718591d71
+    value: Your API key from http://www.thunderforest.com/docs/apikeys/ here
 
 ---
 <div id="map" class="map"></div>

examples/igc.js

@@ -3,16 +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 IGC from '../src/ol/format/IGC.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 {LineString, Point} from '../src/ol/geom.js';
+import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
 import OSM, {ATTRIBUTION} 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 {Circle as CircleStyle, Fill, Stroke, Style} from '../src/ol/style.js';
 
 
 const colors = {

examples/image-filter.html

@@ -8,7 +8,8 @@ docs: >
   In this example, the <code>postcompose</code> listener applies a filter to the image data.</p>
 tags: "filter, image manipulation"
 cloak:
-  As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5: Your Bing Maps Key from http://www.bingmapsportal.com/ here
+  - key: As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5
+    value: 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,10 +3,7 @@ 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 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';
+import {Fill, Stroke, Style, Text} from '../src/ol/style.js';
 
 
 const style = new Style({

examples/jsts.js

@@ -3,8 +3,7 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
 import GeoJSON from '../src/ol/format/GeoJSON.js';
-import TileLayer from '../src/ol/layer/Tile.js';
-import VectorLayer from '../src/ol/layer/Vector.js';
+import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
 import {fromLonLat} from '../src/ol/proj.js';
 import OSM from '../src/ol/source/OSM.js';
 import VectorSource from '../src/ol/source/Vector.js';

examples/kml-earthquakes.js

@@ -1,14 +1,10 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
 import KML from '../src/ol/format/KML.js';
-import TileLayer from '../src/ol/layer/Tile.js';
-import VectorLayer from '../src/ol/layer/Vector.js';
+import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.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 Stroke from '../src/ol/style/Stroke.js';
-import Style from '../src/ol/style/Style.js';
+import {Circle as CircleStyle, Fill, Stroke, Style} from '../src/ol/style.js';
 
 
 const styleCache = {};

examples/kml-timezones.html

@@ -3,7 +3,7 @@ layout: example.html
 title: Timezones in KML
 shortdesc: Demonstrates rendering timezones from KML.
 docs: >
-  This example parses a KML file and renders the features as a vector layer.  The layer is given a <code>ol.style.Style</code> that fills timezones
+  This example parses a KML file and renders the features as a vector layer.  The layer is given a <code>ol/style/Style</code> that fills timezones
   yellow with an opacity calculated based on the current offset to local noon.
 tags: "KML, vector, style"
 resources:

examples/kml-timezones.js

@@ -1,13 +1,10 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
 import KML from '../src/ol/format/KML.js';
-import TileLayer from '../src/ol/layer/Tile.js';
-import VectorLayer from '../src/ol/layer/Vector.js';
+import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
 import Stamen from '../src/ol/source/Stamen.js';
 import VectorSource from '../src/ol/source/Vector.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 {Fill, Stroke, Style} from '../src/ol/style.js';
 
 
 /*

examples/kml.html

@@ -3,10 +3,11 @@ layout: example.html
 title: KML
 shortdesc: Rendering KML with a vector source.
 docs: >
-  This example uses the <code>ol.format.KML</code> to parse KML for rendering with a vector source.
+  This example uses the <code>ol/format/KML</code> to parse KML for rendering with a vector source.
 tags: "KML"
 cloak:
-  As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5: Your Bing Maps Key from http://www.bingmapsportal.com/ here
+  - key: As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5
+    value: Your Bing Maps Key from http://www.bingmapsportal.com/ here
 ---
 <div id="map" class="map"></div>
 <div id="info">&nbsp;</div>

examples/kml.js

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

examples/layer-clipping-webgl.js

@@ -1,4 +1,4 @@
-import Map from '../src/ol/Map.js';
+import Map from '../src/ol/WebGLMap.js';
 import View from '../src/ol/View.js';
 import {defaults as defaultControls} from '../src/ol/control.js';
 import {WEBGL} from '../src/ol/has.js';
@@ -19,7 +19,6 @@ if (!WEBGL) {
 
   const map = new Map({
     layers: [osm],
-    renderer: /** @type {Array<ol.renderer.Type>} */ (['webgl', 'canvas']),
     target: 'map',
     controls: defaultControls({
       attributionOptions: {

examples/layer-group.js

@@ -1,7 +1,6 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
-import LayerGroup from '../src/ol/layer/Group.js';
-import TileLayer from '../src/ol/layer/Tile.js';
+import {Group as LayerGroup, Tile as TileLayer} from '../src/ol/layer.js';
 import {fromLonLat} from '../src/ol/proj.js';
 import OSM from '../src/ol/source/OSM.js';
 import TileJSON from '../src/ol/source/TileJSON.js';

examples/layer-spy.html

@@ -10,6 +10,7 @@ docs: >
   <p>Move around the map to see the effect.  Use the ↑ up and ↓ down arrow keys to adjust the spyglass size.</p>
 tags: "spy, image manipulation"
 cloak:
-  As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5: Your Bing Maps Key from http://www.bingmapsportal.com/ here
+  - key: As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5
+    value: Your Bing Maps Key from http://www.bingmapsportal.com/ here
 ---
 <div id="map" class="map"></div>

examples/layer-swipe.html

@@ -6,7 +6,8 @@ docs: >
   Example of a Layer swipe map.
 tags: "swipe, openstreetmap"
 cloak:
-  As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5: Your Bing Maps Key from http://www.bingmapsportal.com/ here
+  - key: As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5
+    value: Your Bing Maps Key from http://www.bingmapsportal.com/ here
 ---
 <div id="map" class="map"></div>
 <input id="swipe" type="range" style="width: 100%">

examples/layer-z-index.js

@@ -4,10 +4,7 @@ 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 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 {Fill, RegularShape, Stroke, Style} from '../src/ol/style.js';
 
 
 const stroke = new Stroke({color: 'black', width: 1});

examples/line-arrows.js

@@ -2,13 +2,9 @@ import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
 import Point from '../src/ol/geom/Point.js';
 import Draw from '../src/ol/interaction/Draw.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 Icon from '../src/ol/style/Icon.js';
-import Stroke from '../src/ol/style/Stroke.js';
-import Style from '../src/ol/style/Style.js';
+import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
+import {OSM, Vector as VectorSource} from '../src/ol/source.js';
+import {Icon, Stroke, Style} from '../src/ol/style.js';
 
 const raster = new TileLayer({
   source: new OSM()

examples/localized-openstreetmap.html

@@ -6,7 +6,8 @@ docs: >
   <p>The base layer is <a href="https://www.opencyclemap.org/">OpenCycleMap</a> with an overlay from <a href="http://www.openseamap.org/">OpenSeaMap</a>.
 tags: "localized-openstreetmap, openseamap, openstreetmap"
 cloak:
-  0e6fc415256d4fbb9b5166a718591d71: Your API key from http://www.thunderforest.com/docs/apikeys/ here
+  - key: 0e6fc415256d4fbb9b5166a718591d71
+    value: Your API key from http://www.thunderforest.com/docs/apikeys/ here
 
 ---
 <div id="map" class="map"></div>