Make code prettier

This updates ESLint and our shared eslint-config-openlayers to use Prettier.  Most formatting changes were automatically applied with this:

    npm run lint -- --fix

A few manual changes were required:

 * In `examples/offscreen-canvas.js`, the `//eslint-disable-line` comment needed to be moved to the appropriate line to disable the error about the `'worker-loader!./offscreen-canvas.worker.js'` import.
 * In `examples/webpack/exapmle-builder.js`, spaces could not be added after a couple `function`s for some reason.  While editing this, I reworked `ExampleBuilder` to be a class.
 * In `src/ol/format/WMSGetFeatureInfo.js`, the `// @ts-ignore` comment needed to be moved down one line so it applied to the `parsersNS` argument.

config/jsdoc/api/plugins/api.js

@@ -2,19 +2,18 @@
  * Define an @api tag
  * @param {Object} dictionary The tag dictionary.
  */
-exports.defineTags = function(dictionary) {
+exports.defineTags = function (dictionary) {
   dictionary.defineTag('api', {
     mustNotHaveValue: true,
     canHaveType: false,
     canHaveName: false,
-    onTagged: function(doclet, tag) {
+    onTagged: function (doclet, tag) {
       includeTypes(doclet);
       doclet.stability = 'stable';
-    }
+    },
   });
 };
 
-
 /*
  * Based on @api annotations, and assuming that items with no @api annotation
  * should not be documented, this plugin removes undocumented symbols
@@ -56,7 +55,7 @@ function includeAugments(doclet) {
           if (!doclet.fires) {
             doclet.fires = [];
           }
-          cls.fires.forEach(function(f) {
+          cls.fires.forEach(function (f) {
             if (doclet.fires.indexOf(f) == -1) {
               doclet.fires.push(f);
             }
@@ -66,7 +65,7 @@ function includeAugments(doclet) {
           if (!doclet.observables) {
             doclet.observables = [];
           }
-          cls.observables.forEach(function(f) {
+          cls.observables.forEach(function (f) {
             if (doclet.observables.indexOf(f) == -1) {
               doclet.observables.push(f);
             }
@@ -79,7 +78,7 @@ function includeAugments(doclet) {
 }
 
 function extractTypes(item) {
-  item.type.names.forEach(function(type) {
+  item.type.names.forEach(function (type) {
     const match = type.match(/^(.*<)?([^>]*)>?$/);
     if (match) {
       modules[match[2]] = true;
@@ -109,31 +108,35 @@ const moduleRoot = path.join(process.cwd(), 'src');
 
 // Tag default exported Identifiers because their name should be the same as the module name.
 exports.astNodeVisitor = {
-  visitNode: function(node, e, parser, currentSourceName) {
+  visitNode: function (node, e, parser, currentSourceName) {
     if (node.parent && node.parent.type === 'ExportDefaultDeclaration') {
-      const modulePath = path.relative(moduleRoot, currentSourceName).replace(/\.js$/, '');
+      const modulePath = path
-      const exportName = 'module:' + modulePath.replace(/\\/g, '/') + (node.name ? '~' + node.name : '');
+        .relative(moduleRoot, currentSourceName)
+        .replace(/\.js$/, '');
+      const exportName =
+        'module:' +
+        modulePath.replace(/\\/g, '/') +
+        (node.name ? '~' + node.name : '');
       defaultExports[exportName] = true;
     }
-  }
+  },
 };
 
 function sortOtherMembers(doclet) {
   if (doclet.fires) {
-    doclet.fires.sort(function(a, b) {
+    doclet.fires.sort(function (a, b) {
       return a.split(/#?event:/)[1] < b.split(/#?event:/)[1] ? -1 : 1;
     });
   }
   if (doclet.observables) {
-    doclet.observables.sort(function(a, b) {
+    doclet.observables.sort(function (a, b) {
       return a.name < b.name ? -1 : 1;
     });
   }
 }
 
 exports.handlers = {
-
+  newDoclet: function (e) {
-  newDoclet: function(e) {
     const doclet = e.doclet;
     if (doclet.stability) {
       modules[doclet.longname.split(/[~\.]/).shift()] = true;
@@ -152,7 +155,7 @@ exports.handlers = {
     }
   },
 
-  parseComplete: function(e) {
+  parseComplete: function (e) {
     const doclets = e.doclets;
     const byLongname = doclets.index.longname;
     for (let i = doclets.length - 1; i >= 0; --i) {
@@ -183,9 +186,12 @@ exports.handlers = {
         // Remove all other undocumented symbols
         doclet.undocumented = true;
       }
-      if (doclet.memberof && byLongname[doclet.memberof] &&
+      if (
-          byLongname[doclet.memberof][0].isEnum &&
+        doclet.memberof &&
-          !byLongname[doclet.memberof][0].properties.some(p => p.stability)) {
+        byLongname[doclet.memberof] &&
+        byLongname[doclet.memberof][0].isEnum &&
+        !byLongname[doclet.memberof][0].properties.some((p) => p.stability)
+      ) {
         byLongname[doclet.memberof][0].undocumented = true;
       }
     }
@@ -194,10 +200,9 @@ exports.handlers = {
   processingComplete(e) {
     const byLongname = e.doclets.index.longname;
     for (const name in defaultExports) {
-      byLongname[name].forEach(function(doclet) {
+      byLongname[name].forEach(function (doclet) {
         doclet.isDefaultExport = true;
       });
     }
-  }
+  },
-
 };

config/jsdoc/api/plugins/events.js

@@ -1,8 +1,7 @@
 const events = {};
 
 exports.handlers = {
-
+  newDoclet: function (e) {
-  newDoclet: function(e) {
     const doclet = e.doclet;
     if (doclet.kind !== 'event') {
       return;
@@ -15,7 +14,7 @@ exports.handlers = {
     events[cls].push(doclet.longname);
   },
 
-  parseComplete: function(e) {
+  parseComplete: function (e) {
     const doclets = e.doclets;
     for (let i = 0, ii = doclets.length - 1; i < ii; ++i) {
       const doclet = doclets[i];
@@ -34,6 +33,5 @@ exports.handlers = {
         }
       }
     }
-  }
+  },
-
 };

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

@@ -6,12 +6,11 @@
 const properties = {};
 
 exports.handlers = {
-
   /**
    * Collects all typedefs, keyed by longname
    * @param {Object} e Event object.
    */
-  newDoclet: function(e) {
+  newDoclet: function (e) {
     if (e.doclet.kind == 'typedef' && e.doclet.properties) {
       properties[e.doclet.longname] = e.doclet.properties;
     }
@@ -22,7 +21,7 @@ exports.handlers = {
    * collected typedefs.
    * @param {Object} e Event object.
    */
-  parseComplete: function(e) {
+  parseComplete: function (e) {
     const doclets = e.doclets;
     for (let i = 0, ii = doclets.length; i < ii; ++i) {
       const doclet = doclets[i];
@@ -34,16 +33,18 @@ exports.handlers = {
             const type = param.type.names[0];
             if (type in properties) {
               param.type.names[0] = type;
-              params.push.apply(params, properties[type].map(p => {
+              params.push.apply(
-                const property = Object.assign({}, p);
+                params,
-                property.name = `${param.name}.${property.name}`;
+                properties[type].map((p) => {
-                return property;
+                  const property = Object.assign({}, p);
-              }));
+                  property.name = `${param.name}.${property.name}`;
+                  return property;
+                })
+              );
             }
           }
         }
       }
     }
-  }
+  },
-
 };

config/jsdoc/api/plugins/markdown.js

@@ -19,7 +19,7 @@ const tags = [
   'properties',
   'returns',
   'see',
-  'summary'
+  'summary',
 ];
 
 const hasOwnProp = Object.prototype.hasOwnProperty;
@@ -27,32 +27,32 @@ const hasOwnProp = Object.prototype.hasOwnProperty;
 const markedRenderer = new marked.Renderer();
 
 // Allow prettyprint to work on inline code samples
-markedRenderer.code = function(code, language) {
+markedRenderer.code = function (code, language) {
   const langClass = language ? ' lang-' + language : '';
 
-  return format('<pre class="prettyprint source%s"><code>%s</code></pre>',
+  return format(
-    langClass, escapeCode(code));
+    '<pre class="prettyprint source%s"><code>%s</code></pre>',
+    langClass,
+    escapeCode(code)
+  );
 };
 
 function escapeCode(source) {
-  return source.replace(/</g, '&lt;')
+  return source
+    .replace(/</g, '&lt;')
     .replace(/"/g, '&quot;')
     .replace(/'/g, '&#39;');
 }
 
 function escapeUnderscoresAndTildes(source) {
-  return source.replace(/\{@[^}\r\n]+\}/g, function(wholeMatch) {
+  return source.replace(/\{@[^}\r\n]+\}/g, function (wholeMatch) {
-    return wholeMatch
+    return wholeMatch.replace(/(^|[^\\])_/g, '$1\\_').replace('~', '&tilde;');
-      .replace(/(^|[^\\])_/g, '$1\\_')
-      .replace('~', '&tilde;');
   });
 }
 
 function unencodeQuotesAndTildes(source) {
-  return source.replace(/\{@[^}\r\n]+\}/g, function(wholeMatch) {
+  return source.replace(/\{@[^}\r\n]+\}/g, function (wholeMatch) {
-    return wholeMatch
+    return wholeMatch.replace(/&quot;/g, '"').replace(/&tilde;/g, '~');
-      .replace(/&quot;/g, '"')
-      .replace(/&tilde;/g, '~');
   });
 }
 
@@ -63,7 +63,7 @@ function parse(source) {
 
   result = marked(source, {renderer: markedRenderer})
     .replace(/\s+$/, '')
-    .replace(/&#39;/g, '\'');
+    .replace(/&#39;/g, "'");
 
   result = unencodeQuotesAndTildes(result);
 
@@ -82,15 +82,18 @@ function shouldProcessString(tagName, text) {
 }
 
 function process(doclet) {
-  tags.forEach(function(tag) {
+  tags.forEach(function (tag) {
     if (!hasOwnProp.call(doclet, tag)) {
       return;
     }
 
-    if (typeof doclet[tag] === 'string' && shouldProcessString(tag, doclet[tag])) {
+    if (
+      typeof doclet[tag] === 'string' &&
+      shouldProcessString(tag, doclet[tag])
+    ) {
       doclet[tag] = parse(doclet[tag]);
     } else if (Array.isArray(doclet[tag])) {
-      doclet[tag].forEach(function(value, index, original) {
+      doclet[tag].forEach(function (value, index, original) {
         const inner = {};
 
         inner[tag] = value;
@@ -103,9 +106,8 @@ function process(doclet) {
   });
 }
 
-
 exports.handlers = {
-  newDoclet: function(e) {
+  newDoclet: function (e) {
     process(e.doclet);
-  }
+  },
 };

config/jsdoc/api/plugins/observable.js

@@ -2,15 +2,14 @@ const classes = {};
 const observables = {};
 
 exports.handlers = {
-
+  newDoclet: function (e) {
-  newDoclet: function(e) {
     const doclet = e.doclet;
     if (doclet.kind == 'class' && !(doclet.longname in classes)) {
       classes[doclet.longname] = doclet;
     }
   },
 
-  parseComplete: function(e) {
+  parseComplete: function (e) {
     const doclets = e.doclets;
     let cls, doclet, event, i, ii, observable;
     for (i = 0, ii = doclets.length - 1; i < ii; ++i) {
@@ -26,8 +25,8 @@ exports.handlers = {
         }
         observable = observables[key];
         observable.name = name;
-        observable.readonly = typeof observable.readonly == 'boolean' ?
+        observable.readonly =
-          observable.readonly : true;
+          typeof observable.readonly == 'boolean' ? observable.readonly : true;
         if (doclet.name.indexOf('get') === 0) {
           observable.type = doclet.returns[0].type;
           observable.description = doclet.returns[0].description;
@@ -53,17 +52,16 @@ exports.handlers = {
         }
       }
     }
-  }
+  },
-
 };
 
-exports.defineTags = function(dictionary) {
+exports.defineTags = function (dictionary) {
   dictionary.defineTag('observable', {
     mustNotHaveValue: true,
     canHaveType: false,
     canHaveName: false,
-    onTagged: function(doclet, tag) {
+    onTagged: function (doclet, tag) {
       doclet.observable = '';
-    }
+    },
   });
 };

config/jsdoc/api/template/publish.js

@@ -4,7 +4,7 @@ const hasOwnProp = Object.prototype.hasOwnProperty;
 
 // Work around an issue with hasOwnProperty in JSDoc's templateHelper.js.
 //TODO Fix in JSDoc.
-Object.prototype.hasOwnProperty = function(property) {
+Object.prototype.hasOwnProperty = function (property) {
   return property in this;
 };
 
@@ -31,7 +31,11 @@ function find(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) {
@@ -55,8 +59,12 @@ function needsSignature(doclet) {
   // 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 &&
+  } else if (
-      doclet.type.names.length) {
+    doclet.kind === 'typedef' &&
+    doclet.type &&
+    doclet.type.names &&
+    doclet.type.names.length
+  ) {
     // typedefs that contain functions get a signature, too
     for (let i = 0, l = doclet.type.names.length; i < l; i++) {
       if (doclet.type.names[i].toLowerCase() === 'function') {
@@ -81,22 +89,30 @@ function addSignatureReturns(f) {
   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>';
+    f.signature +=
+      '<span class="glyphicon glyphicon-circle-arrow-right"></span><span class="type-signature returnType">' +
+      (returnTypes.length ? '{' + returnTypes.join('|') + '}' : '') +
+      '</span>';
   }
 }
 
 function addSignatureTypes(f) {
   const types = helper.getSignatureTypes(f);
 
-  f.signature = (f.signature || '') + '<span class="type-signature">' + (types.length ? ' :' + types.join('|') : '') + ' </span>';
+  f.signature =
+    (f.signature || '') +
+    '<span class="type-signature">' +
+    (types.length ? ' :' + types.join('|') : '') +
+    ' </span>';
 }
 
 function shortenPaths(files, commonPrefix) {
   // always use forward slashes
   const regexp = new RegExp('\\\\', 'g');
 
-  Object.keys(files).forEach(function(file) {
+  Object.keys(files).forEach(function (file) {
-    files[file].shortened = files[file].resolved.replace(commonPrefix, '')
+    files[file].shortened = files[file].resolved
+      .replace(commonPrefix, '')
       .replace(regexp, '/');
   });
 
@@ -112,9 +128,10 @@ function getPathFromDoclet(doclet) {
     return;
   }
 
-  const filepath = doclet.meta.path && doclet.meta.path !== 'null' ?
+  const filepath =
-    doclet.meta.path + '/' + doclet.meta.filename.split(/[\/\\]/).pop() :
+    doclet.meta.path && doclet.meta.path !== 'null'
-    doclet.meta.filename;
+      ? doclet.meta.path + '/' + doclet.meta.filename.split(/[\/\\]/).pop()
+      : doclet.meta.filename;
 
   return filepath;
 }
@@ -126,7 +143,7 @@ function generate(title, docs, filename, resolveLinks) {
     filename: filename,
     title: title,
     docs: docs,
-    packageInfo: (find({kind: 'package'}) || []) [0]
+    packageInfo: (find({kind: 'package'}) || [])[0],
   };
 
   const outpath = path.join(outdir, filename);
@@ -140,7 +157,7 @@ function generate(title, docs, filename, resolveLinks) {
 }
 
 function generateSourceFiles(sourceFiles) {
-  Object.keys(sourceFiles).forEach(function(file) {
+  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);
@@ -149,14 +166,20 @@ function generateSourceFiles(sourceFiles) {
     try {
       source = {
         kind: 'source',
-        code: helper.htmlsafe(fs.readFileSync(sourceFiles[file].resolved, 'utf8'))
+        code: helper.htmlsafe(
+          fs.readFileSync(sourceFiles[file].resolved, 'utf8')
+        ),
       };
     } catch (e) {
       handle(e);
     }
 
-    generate('Source: ' + sourceFiles[file].shortened, [source], sourceOutfile,
+    generate(
-      false);
+      'Source: ' + sourceFiles[file].shortened,
+      [source],
+      sourceOutfile,
+      false
+    );
   });
 }
 
@@ -175,14 +198,15 @@ function attachModuleSymbols(doclets, modules) {
   const symbols = {};
 
   // build a lookup table
-  doclets.forEach(function(symbol) {
+  doclets.forEach(function (symbol) {
     symbols[symbol.longname] = symbol;
   });
 
-  modules.forEach(function(module) {
+  modules.forEach(function (module) {
     if (symbols[module.longname]) {
       module.module = symbols[module.longname];
-      module.module.name = module.module.name.replace('module:', 'require("') + '")';
+      module.module.name =
+        module.module.name.replace('module:', 'require("') + '")';
     }
   });
 }
@@ -210,7 +234,7 @@ function getPrettyName(doclet) {
  */
 function buildNav(members) {
   const nav = [];
-  members.classes.forEach(function(v) {
+  members.classes.forEach(function (v) {
     // exclude interfaces from sidebar
     if (v.interface !== true) {
       nav.push({
@@ -220,52 +244,55 @@ function buildNav(members) {
         name: v.name,
         module: find({
           kind: 'module',
-          longname: v.memberof
+          longname: v.memberof,
         })[0],
         members: find({
           kind: 'member',
-          memberof: v.longname
+          memberof: v.longname,
         }),
         methods: find({
           kind: 'function',
-          memberof: v.longname
+          memberof: v.longname,
         }),
         typedefs: find({
           kind: 'typedef',
-          memberof: v.longname
+          memberof: v.longname,
         }),
         fires: v.fires,
         events: find({
           kind: 'event',
-          memberof: v.longname
+          memberof: v.longname,
-        })
+        }),
       });
     }
   });
-  members.modules.forEach(function(v) {
+  members.modules.forEach(function (v) {
     const classes = find({
       kind: 'class',
-      memberof: v.longname
+      memberof: v.longname,
     });
     const members = find({
       kind: 'member',
-      memberof: v.longname
+      memberof: v.longname,
     });
     const methods = find({
       kind: 'function',
-      memberof: v.longname
+      memberof: v.longname,
     });
     const typedefs = find({
       kind: 'typedef',
-      memberof: v.longname
+      memberof: v.longname,
     });
     const events = find({
       kind: 'event',
-      memberof: v.longname
+      memberof: v.longname,
     });
     // Only add modules that contain more than just classes with their
     // associated Options typedef
-    if (typedefs.length > classes.length || members.length + methods.length > 0) {
+    if (
+      typedefs.length > classes.length ||
+      members.length + methods.length > 0
+    ) {
       nav.push({
         type: 'module',
         longname: v.longname,
@@ -275,12 +302,12 @@ function buildNav(members) {
         methods: methods,
         typedefs: typedefs,
         fires: v.fires,
-        events: events
+        events: events,
       });
     }
   });
 
-  nav.sort(function(a, b) {
+  nav.sort(function (a, b) {
     const prettyNameA = a.prettyname.toLowerCase();
     const prettyNameB = b.prettyname.toLowerCase();
     if (prettyNameA > prettyNameB) {
@@ -294,13 +321,12 @@ function buildNav(members) {
   return nav;
 }
 
-
 /**
  * @param {Object} taffyData See <http://taffydb.com/>.
  * @param {Object} opts Options.
  * @param {Object} tutorials Tutorials.
  */
-exports.publish = function(taffyData, opts, tutorials) {
+exports.publish = function (taffyData, opts, tutorials) {
   data = taffyData;
 
   const conf = env.conf.templates || {};
@@ -329,26 +355,30 @@ exports.publish = function(taffyData, opts, tutorials) {
 
   let sourceFiles = {};
   const sourceFilePaths = [];
-  data().each(function(doclet) {
+  data().each(function (doclet) {
     doclet.attribs = '';
 
     if (doclet.examples) {
-      doclet.examples = doclet.examples.map(function(example) {
+      doclet.examples = doclet.examples.map(function (example) {
         let caption, code;
 
-        if (example.match(/^\s*<caption>([\s\S]+?)<\/caption>(\s*[\n\r])([\s\S]+)$/i)) {
+        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
+          code: code || example,
         };
       });
     }
     if (doclet.see) {
-      doclet.see.forEach(function(seeItem, i) {
+      doclet.see.forEach(function (seeItem, i) {
         doclet.see[i] = hashToLink(doclet, seeItem);
       });
     }
@@ -361,7 +391,7 @@ exports.publish = function(taffyData, opts, tutorials) {
       resolvedSourcePath = resolveSourcePath(sourcePath);
       sourceFiles[sourcePath] = {
         resolved: resolvedSourcePath,
-        shortened: null
+        shortened: null,
       };
       sourceFilePaths.push(resolvedSourcePath);
     }
@@ -373,7 +403,7 @@ exports.publish = function(taffyData, opts, tutorials) {
   const fromDir = path.join(templatePath, 'static');
   const staticFiles = fs.ls(fromDir, 3);
 
-  staticFiles.forEach(function(fileName) {
+  staticFiles.forEach(function (fileName) {
     const toDir = fs.toDir(fileName.replace(fromDir, outdir));
     fs.mkPath(toDir);
     fs.copyFileSync(fileName, toDir);
@@ -385,15 +415,22 @@ exports.publish = function(taffyData, opts, tutorials) {
   let staticFileScanner;
   if (conf['default'].staticFiles) {
     staticFilePaths = conf['default'].staticFiles.paths || [];
-    staticFileFilter = new (require('jsdoc/lib/jsdoc/src/filter')).Filter(conf['default'].staticFiles);
+    staticFileFilter = new (require('jsdoc/lib/jsdoc/src/filter').Filter)(
-    staticFileScanner = new (require('jsdoc/lib/jsdoc/src/scanner')).Scanner();
+      conf['default'].staticFiles
+    );
+    staticFileScanner = new (require('jsdoc/lib/jsdoc/src/scanner').Scanner)();
 
-    staticFilePaths.forEach(function(filePath) {
+    staticFilePaths.forEach(function (filePath) {
-      const extraStaticFiles = staticFileScanner.scan([filePath], 10, staticFileFilter);
+      const extraStaticFiles = staticFileScanner.scan(
+        [filePath],
+        10,
+        staticFileFilter
+      );
 
-      extraStaticFiles.forEach(function(fileName) {
+      extraStaticFiles.forEach(function (fileName) {
-        const sourcePath = fs.statSync(filePath).isDirectory() ? filePath :
+        const sourcePath = fs.statSync(filePath).isDirectory()
-          path.dirname(filePath);
+          ? filePath
+          : path.dirname(filePath);
         const toDir = fs.toDir(fileName.replace(sourcePath, outdir));
         fs.mkPath(toDir);
         fs.copyFileSync(fileName, toDir);
@@ -404,7 +441,7 @@ exports.publish = function(taffyData, opts, tutorials) {
   if (sourceFilePaths.length) {
     sourceFiles = shortenPaths(sourceFiles, path.commonPrefix(sourceFilePaths));
   }
-  data().each(function(doclet) {
+  data().each(function (doclet) {
     const url = helper.createLink(doclet);
     helper.registerLink(doclet.longname, url);
 
@@ -419,7 +456,7 @@ exports.publish = function(taffyData, opts, tutorials) {
     }
   });
 
-  data().each(function(doclet) {
+  data().each(function (doclet) {
     const url = helper.longnameToUrl[doclet.longname];
 
     if (url.indexOf('#') > -1) {
@@ -435,7 +472,7 @@ exports.publish = function(taffyData, opts, tutorials) {
   });
 
   // do this after the urls have all been generated
-  data().each(function(doclet) {
+  data().each(function (doclet) {
     doclet.ancestors = getAncestorLinks(doclet);
 
     if (doclet.kind === 'member') {
@@ -461,8 +498,10 @@ exports.publish = function(taffyData, opts, tutorials) {
 
   // once for all
   view.nav = buildNav(members);
-  attachModuleSymbols(find({kind: ['class', 'function'], longname: {left: 'module:'}}),
+  attachModuleSymbols(
-    members.modules);
+    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
@@ -478,9 +517,17 @@ exports.publish = function(taffyData, opts, tutorials) {
   const files = find({kind: 'file'});
 
   view.navigationHtml = helper.resolveLinks(view.partial('navigation.tmpl'));
-  generate('Index',
+  generate(
-    [{kind: 'mainpage', readme: opts.readme, longname: (opts.mainpagetitle) ? opts.mainpagetitle : 'Main Page'}].concat(files),
+    'Index',
-    indexUrl);
+    [
+      {
+        kind: 'mainpage',
+        readme: opts.readme,
+        longname: opts.mainpagetitle ? opts.mainpagetitle : 'Main Page',
+      },
+    ].concat(files),
+    indexUrl
+  );
 
   // set up the lists that we'll use to generate pages
   const classes = taffy(members.classes);
@@ -493,27 +540,47 @@ exports.publish = function(taffyData, opts, tutorials) {
     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]);
+        generate(
+          'Class: ' + myClasses[0].name,
+          myClasses,
+          helper.longnameToUrl[longname]
+        );
       }
 
       const myModules = helper.find(modules, {longname: longname});
       if (myModules.length) {
-        generate('Module: ' + myModules[0].name, myModules, helper.longnameToUrl[longname]);
+        generate(
+          'Module: ' + myModules[0].name,
+          myModules,
+          helper.longnameToUrl[longname]
+        );
       }
 
       const myNamespaces = helper.find(namespaces, {longname: longname});
       if (myNamespaces.length) {
-        generate('Namespace: ' + myNamespaces[0].name, myNamespaces, helper.longnameToUrl[longname]);
+        generate(
+          'Namespace: ' + myNamespaces[0].name,
+          myNamespaces,
+          helper.longnameToUrl[longname]
+        );
       }
 
       const myMixins = helper.find(mixins, {longname: longname});
       if (myMixins.length) {
-        generate('Mixin: ' + myMixins[0].name, myMixins, helper.longnameToUrl[longname]);
+        generate(
+          'Mixin: ' + myMixins[0].name,
+          myMixins,
+          helper.longnameToUrl[longname]
+        );
       }
 
       const myExternals = helper.find(externals, {longname: longname});
       if (myExternals.length) {
-        generate('External: ' + myExternals[0].name, myExternals, helper.longnameToUrl[longname]);
+        generate(
+          'External: ' + myExternals[0].name,
+          myExternals,
+          helper.longnameToUrl[longname]
+        );
       }
     }
   }
@@ -524,7 +591,7 @@ exports.publish = function(taffyData, opts, tutorials) {
       title: title,
       header: tutorial.title,
       content: tutorial.parse(),
-      children: tutorial.children
+      children: tutorial.children,
     };
 
     let html = view.render('tutorial.tmpl', tutorialData);
@@ -537,8 +604,12 @@ exports.publish = function(taffyData, opts, tutorials) {
 
   // tutorials can have only one parent so there is no risk for loops
   function saveChildren(node) {
-    node.children.forEach(function(child) {
+    node.children.forEach(function (child) {
-      generateTutorial('Tutorial: ' + child.title, child, helper.tutorialToUrl(child.name));
+      generateTutorial(
+        'Tutorial: ' + child.title,
+        child,
+        helper.tutorialToUrl(child.name)
+      );
       saveChildren(child);
     });
   }

config/jsdoc/info/api-plugin.js

@@ -1,15 +1,11 @@
-
-
 /**
  * Handle the api annotation.
  * @param {Object} dictionary The tag dictionary.
  */
-exports.defineTags = function(dictionary) {
+exports.defineTags = function (dictionary) {
-
   dictionary.defineTag('api', {
-    onTagged: function(doclet, tag) {
+    onTagged: function (doclet, tag) {
       doclet.api = true;
-    }
+    },
   });
-
 };

config/jsdoc/info/define-plugin.js

@@ -5,31 +5,27 @@
  * insensitive, with or without ticks).
  */
 
-
 const DEFAULT_VALUE = /default\s+is\s+`?(true|false)`?/i;
 
-
 /**
  * Hook to define new tags.
  * @param {Object} dictionary The tag dictionary.
  */
-exports.defineTags = function(dictionary) {
+exports.defineTags = function (dictionary) {
-
   dictionary.defineTag('define', {
     canHaveType: true,
     mustHaveValue: true,
-    onTagged: function(doclet, tag) {
+    onTagged: function (doclet, tag) {
       const types = tag.value.type.names;
       if (types.length === 1 && types[0] === 'boolean') {
         const match = tag.value.description.match(DEFAULT_VALUE);
         if (match) {
           doclet.define = {
-            default: match[1] === 'true'
+            default: match[1] === 'true',
           };
           doclet.description = tag.value.description;
         }
       }
-    }
+    },
   });
-
 };

config/jsdoc/info/publish.js

@@ -5,18 +5,16 @@
 const assert = require('assert');
 const path = require('path');
 
-
 /**
  * Publish hook for the JSDoc template.  Writes to JSON stdout.
  * @param {function} data The root of the Taffy DB containing doclet records.
  * @param {Object} opts Options.
  * @return {Promise} A promise that resolves when writing is complete.
  */
-exports.publish = function(data, opts) {
+exports.publish = function (data, opts) {
-
   function getTypes(data) {
     const types = [];
-    data.forEach(function(name) {
+    data.forEach(function (name) {
       types.push(name.replace(/^function$/, 'Function'));
     });
     return types;
@@ -27,19 +25,22 @@ exports.publish = function(data, opts) {
   const docs = data(
     [
       {define: {isObject: true}},
-      function() {
+      function () {
         if (this.kind == 'class') {
           if (!('extends' in this) || typeof this.api == 'boolean') {
             classes[this.longname] = this;
             return true;
           }
         }
-        return (typeof this.api == 'boolean' ||
+        return (
-              this.meta && (/[\\\/]externs$/).test(this.meta.path));
+          typeof this.api == 'boolean' ||
-      }
+          (this.meta && /[\\\/]externs$/.test(this.meta.path))
+        );
+      },
     ],
     {kind: {'!is': 'file'}},
-    {kind: {'!is': 'event'}}).get();
+    {kind: {'!is': 'event'}}
+  ).get();
 
   // get symbols data, filter out those that are members of private classes
   const symbols = [];
@@ -49,117 +50,133 @@ exports.publish = function(data, opts) {
   let base = [];
   const augments = {};
   const symbolsByName = {};
-  docs.filter(function(doc) {
+  docs
-    let include = true;
+    .filter(function (doc) {
-    const constructor = doc.memberof;
+      let include = true;
-    if (constructor && constructor.substr(-1) === '_' && constructor.indexOf('module:') === -1) {
+      const constructor = doc.memberof;
-      assert.strictEqual(doc.inherited, true,
+      if (
-        'Unexpected export on private class: ' + doc.longname);
+        constructor &&
-      include = false;
+        constructor.substr(-1) === '_' &&
-    }
+        constructor.indexOf('module:') === -1
-    return include;
+      ) {
-  }).forEach(function(doc) {
+        assert.strictEqual(
-    const isExterns = (/[\\\/]externs$/).test(doc.meta.path);
+          doc.inherited,
-    if (doc.define) {
+          true,
-      defines.push({
+          'Unexpected export on private class: ' + doc.longname
-        name: doc.longname,
+        );
-        description: doc.description,
+        include = false;
-        path: path.join(doc.meta.path, doc.meta.filename),
-        default: doc.define.default
-      });
-    } else if (doc.kind == 'typedef' || doc.isEnum === true) {
-      typedefs.push({
-        name: doc.longname,
-        types: getTypes(doc.type.names)
-      });
-    } else {
-      const symbol = {
-        name: doc.longname,
-        kind: doc.kind,
-        description: doc.classdesc || doc.description,
-        path: path.join(doc.meta.path, doc.meta.filename)
-      };
-      if (doc.augments) {
-        symbol.extends = doc.augments[0];
       }
-      if (doc.virtual) {
+      return include;
-        symbol.virtual = true;
+    })
-      }
+    .forEach(function (doc) {
-      if (doc.type) {
+      const isExterns = /[\\\/]externs$/.test(doc.meta.path);
-        symbol.types = getTypes(doc.type.names);
+      if (doc.define) {
-      }
+        defines.push({
-      if (doc.params) {
+          name: doc.longname,
-        const params = [];
+          description: doc.description,
-        doc.params.forEach(function(param) {
+          path: path.join(doc.meta.path, doc.meta.filename),
-          const paramInfo = {
+          default: doc.define.default,
-            name: param.name
-          };
-          params.push(paramInfo);
-          paramInfo.types = getTypes(param.type.names);
-          if (typeof param.variable == 'boolean') {
-            paramInfo.variable = param.variable;
-          }
-          if (typeof param.optional == 'boolean') {
-            paramInfo.optional = param.optional;
-          }
-          if (typeof param.nullable == 'boolean') {
-            paramInfo.nullable = param.nullable;
-          }
         });
-        symbol.params = params;
+      } else if (doc.kind == 'typedef' || doc.isEnum === true) {
-      }
+        typedefs.push({
-      if (doc.returns) {
+          name: doc.longname,
-        symbol.returns = {
+          types: getTypes(doc.type.names),
-          types: getTypes(doc.returns[0].type.names)
+        });
+      } else {
+        const symbol = {
+          name: doc.longname,
+          kind: doc.kind,
+          description: doc.classdesc || doc.description,
+          path: path.join(doc.meta.path, doc.meta.filename),
         };
-        if (typeof doc.returns[0].nullable == 'boolean') {
+        if (doc.augments) {
-          symbol.returns.nullable = doc.returns[0].nullable;
+          symbol.extends = doc.augments[0];
         }
-      }
+        if (doc.virtual) {
-      if (doc.tags) {
+          symbol.virtual = true;
-        doc.tags.every(function(tag) {
+        }
-          if (tag.title == 'template') {
+        if (doc.type) {
-            symbol.template = tag.value;
+          symbol.types = getTypes(doc.type.names);
-            return false;
+        }
+        if (doc.params) {
+          const params = [];
+          doc.params.forEach(function (param) {
+            const paramInfo = {
+              name: param.name,
+            };
+            params.push(paramInfo);
+            paramInfo.types = getTypes(param.type.names);
+            if (typeof param.variable == 'boolean') {
+              paramInfo.variable = param.variable;
+            }
+            if (typeof param.optional == 'boolean') {
+              paramInfo.optional = param.optional;
+            }
+            if (typeof param.nullable == 'boolean') {
+              paramInfo.nullable = param.nullable;
+            }
+          });
+          symbol.params = params;
+        }
+        if (doc.returns) {
+          symbol.returns = {
+            types: getTypes(doc.returns[0].type.names),
+          };
+          if (typeof doc.returns[0].nullable == 'boolean') {
+            symbol.returns.nullable = doc.returns[0].nullable;
           }
-          return true;
-        });
-      }
-
-      const target = isExterns ? externs : (doc.api ? symbols : base);
-      const existingSymbol = symbolsByName[symbol.name];
-      if (existingSymbol) {
-        const idx = target.indexOf(existingSymbol);
-        target.splice(idx, 1);
-      }
-      target.push(symbol);
-      symbolsByName[symbol.name] = symbol;
-
-      if (doc.api && symbol.extends) {
-        while (symbol.extends in classes && !classes[symbol.extends].api &&
-            classes[symbol.extends].augments) {
-          symbol.extends = classes[symbol.extends].augments[0];
         }
-        if (symbol.extends) {
+        if (doc.tags) {
-          augments[symbol.extends] = true;
+          doc.tags.every(function (tag) {
+            if (tag.title == 'template') {
+              symbol.template = tag.value;
+              return false;
+            }
+            return true;
+          });
+        }
+
+        const target = isExterns ? externs : doc.api ? symbols : base;
+        const existingSymbol = symbolsByName[symbol.name];
+        if (existingSymbol) {
+          const idx = target.indexOf(existingSymbol);
+          target.splice(idx, 1);
+        }
+        target.push(symbol);
+        symbolsByName[symbol.name] = symbol;
+
+        if (doc.api && symbol.extends) {
+          while (
+            symbol.extends in classes &&
+            !classes[symbol.extends].api &&
+            classes[symbol.extends].augments
+          ) {
+            symbol.extends = classes[symbol.extends].augments[0];
+          }
+          if (symbol.extends) {
+            augments[symbol.extends] = true;
+          }
         }
       }
-    }
+    });
+
+  base = base.filter(function (symbol) {
+    return symbol.name in augments || symbol.virtual;
   });
 
-  base = base.filter(function(symbol) {
+  return new Promise(function (resolve, reject) {
-    return (symbol.name in augments || symbol.virtual);
-  });
-
-  return new Promise(function(resolve, reject) {
     process.stdout.write(
-      JSON.stringify({
+      JSON.stringify(
-        symbols: symbols,
+        {
-        defines: defines,
+          symbols: symbols,
-        typedefs: typedefs,
+          defines: defines,
-        externs: externs,
+          typedefs: typedefs,
-        base: base
+          externs: externs,
-      }, null, 2));
+          base: base,
+        },
+        null,
+        2
+      )
+    );
   });
-
 };

config/jsdoc/info/virtual-plugin.js

@@ -2,15 +2,13 @@
  * Handle the interface and abstract annotations.
  * @param {Object} dictionary The tag dictionary.
  */
-exports.defineTags = function(dictionary) {
+exports.defineTags = function (dictionary) {
-
   const classTag = dictionary.lookUp('class');
   dictionary.defineTag('interface', {
     mustNotHaveValue: true,
-    onTagged: function(doclet, tag) {
+    onTagged: function (doclet, tag) {
       classTag.onTagged.apply(this, arguments);
       doclet.virtual = true;
-    }
+    },
   });
-
 };

config/webpack-config-legacy-build.js

@@ -8,6 +8,6 @@ module.exports = {
     filename: 'ol.js',
     library: 'ol',
     libraryTarget: 'umd',
-    libraryExport: 'default'
+    libraryExport: 'default',
-  }
+  },
 };

examples/accessible.js

@@ -1,29 +1,28 @@
 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 TileLayer from '../src/ol/layer/Tile.js';
+import View from '../src/ol/View.js';
 
 const map = new Map({
   layers: [
     new TileLayer({
-      source: new OSM()
+      source: new OSM(),
-    })
+    }),
   ],
   target: 'map',
   view: new View({
     center: [0, 0],
-    zoom: 2
+    zoom: 2,
-  })
+  }),
 });
 
-document.getElementById('zoom-out').onclick = function() {
+document.getElementById('zoom-out').onclick = function () {
   const view = map.getView();
   const zoom = view.getZoom();
   view.setZoom(zoom - 1);
 };
 
-document.getElementById('zoom-in').onclick = function() {
+document.getElementById('zoom-in').onclick = function () {
   const view = map.getView();
   const zoom = view.getZoom();
   view.setZoom(zoom + 1);

examples/animation.js

@@ -1,9 +1,9 @@
 import Map from '../src/ol/Map.js';
+import OSM from '../src/ol/source/OSM.js';
+import TileLayer from '../src/ol/layer/Tile.js';
 import View from '../src/ol/View.js';
 import {easeIn, easeOut} from '../src/ol/easing.js';
-import TileLayer from '../src/ol/layer/Tile.js';
 import {fromLonLat} from '../src/ol/proj.js';
-import OSM from '../src/ol/source/OSM.js';
 
 const london = fromLonLat([-0.12755, 51.507222]);
 const moscow = fromLonLat([37.6178, 55.7517]);
@@ -13,7 +13,7 @@ const bern = fromLonLat([7.4458, 46.95]);
 
 const view = new View({
   center: istanbul,
-  zoom: 6
+  zoom: 6,
 });
 
 const map = new Map({
@@ -21,10 +21,10 @@ const map = new Map({
   layers: [
     new TileLayer({
       preload: 4,
-      source: new OSM()
+      source: new OSM(),
-    })
+    }),
   ],
-  view: view
+  view: view,
 });
 
 // A bounce easing method (from https://github.com/DmitryBaranovskiy/raphael).
@@ -32,18 +32,18 @@ function bounce(t) {
   const s = 7.5625;
   const p = 2.75;
   let l;
-  if (t < (1 / p)) {
+  if (t < 1 / p) {
     l = s * t * t;
   } else {
-    if (t < (2 / p)) {
+    if (t < 2 / p) {
-      t -= (1.5 / p);
+      t -= 1.5 / p;
       l = s * t * t + 0.75;
     } else {
-      if (t < (2.5 / p)) {
+      if (t < 2.5 / p) {
-        t -= (2.25 / p);
+        t -= 2.25 / p;
         l = s * t * t + 0.9375;
       } else {
-        t -= (2.625 / p);
+        t -= 2.625 / p;
         l = s * t * t + 0.984375;
       }
     }
@@ -53,77 +53,85 @@ function bounce(t) {
 
 // An elastic easing method (from https://github.com/DmitryBaranovskiy/raphael).
 function elastic(t) {
-  return Math.pow(2, -10 * t) * Math.sin((t - 0.075) * (2 * Math.PI) / 0.3) + 1;
+  return (
+    Math.pow(2, -10 * t) * Math.sin(((t - 0.075) * (2 * Math.PI)) / 0.3) + 1
+  );
 }
 
 function onClick(id, callback) {
   document.getElementById(id).addEventListener('click', callback);
 }
 
-onClick('rotate-left', function() {
+onClick('rotate-left', function () {
   view.animate({
-    rotation: view.getRotation() + Math.PI / 2
+    rotation: view.getRotation() + Math.PI / 2,
   });
 });
 
-onClick('rotate-right', function() {
+onClick('rotate-right', function () {
   view.animate({
-    rotation: view.getRotation() - Math.PI / 2
+    rotation: view.getRotation() - Math.PI / 2,
   });
 });
 
-onClick('rotate-around-rome', function() {
+onClick('rotate-around-rome', function () {
   // Rotation animation takes the shortest arc, so animate in two parts
   const rotation = view.getRotation();
-  view.animate({
+  view.animate(
-    rotation: rotation + Math.PI,
+    {
-    anchor: rome,
+      rotation: rotation + Math.PI,
-    easing: easeIn
+      anchor: rome,
-  }, {
+      easing: easeIn,
-    rotation: rotation + 2 * Math.PI,
+    },
-    anchor: rome,
+    {
-    easing: easeOut
+      rotation: rotation + 2 * Math.PI,
-  });
+      anchor: rome,
+      easing: easeOut,
+    }
+  );
 });
 
-onClick('pan-to-london', function() {
+onClick('pan-to-london', function () {
   view.animate({
     center: london,
-    duration: 2000
+    duration: 2000,
   });
 });
 
-onClick('elastic-to-moscow', function() {
+onClick('elastic-to-moscow', function () {
   view.animate({
     center: moscow,
     duration: 2000,
-    easing: elastic
+    easing: elastic,
   });
 });
 
-onClick('bounce-to-istanbul', function() {
+onClick('bounce-to-istanbul', function () {
   view.animate({
     center: istanbul,
     duration: 2000,
-    easing: bounce
+    easing: bounce,
   });
 });
 
-onClick('spin-to-rome', function() {
+onClick('spin-to-rome', function () {
   // Rotation animation takes the shortest arc, so animate in two parts
   const center = view.getCenter();
-  view.animate({
+  view.animate(
-    center: [
+    {
-      center[0] + (rome[0] - center[0]) / 2,
+      center: [
-      center[1] + (rome[1] - center[1]) / 2
+        center[0] + (rome[0] - center[0]) / 2,
-    ],
+        center[1] + (rome[1] - center[1]) / 2,
-    rotation: Math.PI,
+      ],
-    easing: easeIn
+      rotation: Math.PI,
-  }, {
+      easing: easeIn,
-    center: rome,
+    },
-    rotation: 2 * Math.PI,
+    {
-    easing: easeOut
+      center: rome,
-  });
+      rotation: 2 * Math.PI,
+      easing: easeOut,
+    }
+  );
 });
 
 function flyTo(location, done) {
@@ -141,21 +149,28 @@ function flyTo(location, done) {
       done(complete);
     }
   }
-  view.animate({
+  view.animate(
-    center: location,
+    {
-    duration: duration
+      center: location,
-  }, callback);
+      duration: duration,
-  view.animate({
+    },
-    zoom: zoom - 1,
+    callback
-    duration: duration / 2
+  );
-  }, {
+  view.animate(
-    zoom: zoom,
+    {
-    duration: duration / 2
+      zoom: zoom - 1,
-  }, callback);
+      duration: duration / 2,
+    },
+    {
+      zoom: zoom,
+      duration: duration / 2,
+    },
+    callback
+  );
 }
 
-onClick('fly-to-bern', function() {
+onClick('fly-to-bern', function () {
-  flyTo(bern, function() {});
+  flyTo(bern, function () {});
 });
 
 function tour() {
@@ -166,7 +181,7 @@ function tour() {
       ++index;
       if (index < locations.length) {
         const delay = index === 0 ? 0 : 750;
-        setTimeout(function() {
+        setTimeout(function () {
           flyTo(locations[index], next);
         }, delay);
       } else {

examples/arcgis-image.js

@@ -1,28 +1,29 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
-import {Tile as TileLayer, Image as ImageLayer} from '../src/ol/layer.js';
+import {ImageArcGISRest, OSM} from '../src/ol/source.js';
-import {OSM, ImageArcGISRest} from '../src/ol/source.js';
+import {Image as ImageLayer, Tile as TileLayer} from '../src/ol/layer.js';
 
-const url = 'https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/' +
+const url =
-    'Specialty/ESRI_StateCityHighway_USA/MapServer';
+  'https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/' +
+  'Specialty/ESRI_StateCityHighway_USA/MapServer';
 
 const layers = [
   new TileLayer({
-    source: new OSM()
+    source: new OSM(),
   }),
   new ImageLayer({
     source: new ImageArcGISRest({
       ratio: 1,
       params: {},
-      url: url
+      url: url,
-    })
+    }),
-  })
+  }),
 ];
 const map = new Map({
   layers: layers,
   target: 'map',
   view: new View({
     center: [-10997148, 4569099],
-    zoom: 4
+    zoom: 4,
-  })
+  }),
 });

examples/arcgis-tiled.js

@@ -1,27 +1,28 @@
 import Map from '../src/ol/Map.js';
-import View from '../src/ol/View.js';
 import TileLayer from '../src/ol/layer/Tile.js';
+import View from '../src/ol/View.js';
 import {OSM, TileArcGISRest} from '../src/ol/source.js';
 
-const url = 'https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/' +
+const url =
-    'Specialty/ESRI_StateCityHighway_USA/MapServer';
+  'https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/' +
+  'Specialty/ESRI_StateCityHighway_USA/MapServer';
 
 const layers = [
   new TileLayer({
-    source: new OSM()
+    source: new OSM(),
   }),
   new TileLayer({
     extent: [-13884991, 2870341, -7455066, 6338219],
     source: new TileArcGISRest({
-      url: url
+      url: url,
-    })
+    }),
-  })
+  }),
 ];
 const map = new Map({
   layers: layers,
   target: 'map',
   view: new View({
     center: [-10997148, 4569099],
-    zoom: 4
+    zoom: 4,
-  })
+  }),
 });

examples/attributions.js

@@ -1,24 +1,24 @@
 import Map from '../src/ol/Map.js';
-import View from '../src/ol/View.js';
-import {defaults as defaultControls, Attribution} from '../src/ol/control.js';
-import TileLayer from '../src/ol/layer/Tile.js';
 import OSM from '../src/ol/source/OSM.js';
+import TileLayer from '../src/ol/layer/Tile.js';
+import View from '../src/ol/View.js';
+import {Attribution, defaults as defaultControls} from '../src/ol/control.js';
 
 const attribution = new Attribution({
-  collapsible: false
+  collapsible: false,
 });
 const map = new Map({
   layers: [
     new TileLayer({
-      source: new OSM()
+      source: new OSM(),
-    })
+    }),
   ],
   controls: defaultControls({attribution: false}).extend([attribution]),
   target: 'map',
   view: new View({
     center: [0, 0],
-    zoom: 2
+    zoom: 2,
-  })
+  }),
 });
 
 function checkSize() {

examples/bing-maps.js

@@ -1,38 +1,40 @@
-import Map from '../src/ol/Map.js';
-import View from '../src/ol/View.js';
-import TileLayer from '../src/ol/layer/Tile.js';
 import BingMaps from '../src/ol/source/BingMaps.js';
-
+import Map from '../src/ol/Map.js';
+import TileLayer from '../src/ol/layer/Tile.js';
+import View from '../src/ol/View.js';
 
 const styles = [
   'RoadOnDemand',
   'Aerial',
   'AerialWithLabelsOnDemand',
   'CanvasDark',
-  'OrdnanceSurvey'
+  'OrdnanceSurvey',
 ];
 const layers = [];
 let i, ii;
 for (i = 0, ii = styles.length; i < ii; ++i) {
-  layers.push(new TileLayer({
+  layers.push(
-    visible: false,
+    new TileLayer({
-    preload: Infinity,
+      visible: false,
-    source: new BingMaps({
+      preload: Infinity,
-      key: 'ApTJzdkyN1DdFKkRAE6QIDtzihNaf6IWJsT-nQ_2eMoO4PN__0Tzhl2-WgJtXFSp ',
+      source: new BingMaps({
-      imagerySet: styles[i]
+        key:
-      // use maxZoom 19 to see stretched tiles instead of the BingMaps
+          'ApTJzdkyN1DdFKkRAE6QIDtzihNaf6IWJsT-nQ_2eMoO4PN__0Tzhl2-WgJtXFSp ',
-      // "no photos at this zoom level" tiles
+        imagerySet: styles[i],
-      // maxZoom: 19
+        // use maxZoom 19 to see stretched tiles instead of the BingMaps
+        // "no photos at this zoom level" tiles
+        // maxZoom: 19
+      }),
     })
-  }));
+  );
 }
 const map = new Map({
   layers: layers,
   target: 'map',
   view: new View({
     center: [-6655.5402445057125, 6709968.258934638],
-    zoom: 13
+    zoom: 13,
-  })
+  }),
 });
 
 const select = document.getElementById('layer-select');

examples/box-selection.js

@@ -1,33 +1,31 @@
+import GeoJSON from '../src/ol/format/GeoJSON.js';
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
-import {platformModifierKeyOnly} from '../src/ol/events/condition.js';
-import GeoJSON from '../src/ol/format/GeoJSON.js';
 import {DragBox, Select} from '../src/ol/interaction.js';
-import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
 import {OSM, Vector as VectorSource} from '../src/ol/source.js';
-
+import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
+import {platformModifierKeyOnly} from '../src/ol/events/condition.js';
 
 const vectorSource = new VectorSource({
   url: 'data/geojson/countries.geojson',
-  format: new GeoJSON()
+  format: new GeoJSON(),
 });
 
-
 const map = new Map({
   layers: [
     new TileLayer({
-      source: new OSM()
+      source: new OSM(),
     }),
     new VectorLayer({
-      source: vectorSource
+      source: vectorSource,
-    })
+    }),
   ],
   target: 'map',
   view: new View({
     center: [0, 0],
     zoom: 2,
-    constrainRotation: 16
+    constrainRotation: 16,
-  })
+  }),
 });
 
 // a normal select interaction to handle click
@@ -38,12 +36,12 @@ const selectedFeatures = select.getFeatures();
 
 // a DragBox interaction used to select features by drawing boxes
 const dragBox = new DragBox({
-  condition: platformModifierKeyOnly
+  condition: platformModifierKeyOnly,
 });
 
 map.addInteraction(dragBox);
 
-dragBox.on('boxend', function() {
+dragBox.on('boxend', function () {
   // features that intersect the box geometry are added to the
   // collection of selected features
 
@@ -54,7 +52,7 @@ dragBox.on('boxend', function() {
   const oblique = rotation % (Math.PI / 2) !== 0;
   const candidateFeatures = oblique ? [] : selectedFeatures;
   const extent = dragBox.getGeometry().getExtent();
-  vectorSource.forEachFeatureIntersectingExtent(extent, function(feature) {
+  vectorSource.forEachFeatureIntersectingExtent(extent, function (feature) {
     candidateFeatures.push(feature);
   });
 
@@ -68,7 +66,7 @@ dragBox.on('boxend', function() {
     const geometry = dragBox.getGeometry().clone();
     geometry.rotate(-rotation, anchor);
     const extent = geometry.getExtent();
-    candidateFeatures.forEach(function(feature) {
+    candidateFeatures.forEach(function (feature) {
       const geometry = feature.getGeometry().clone();
       geometry.rotate(-rotation, anchor);
       if (geometry.intersectsExtent(extent)) {
@@ -76,18 +74,17 @@ dragBox.on('boxend', function() {
       }
     });
   }
-
 });
 
 // clear selection when drawing a new box and when clicking on the map
-dragBox.on('boxstart', function() {
+dragBox.on('boxstart', function () {
   selectedFeatures.clear();
 });
 
 const infoBox = document.getElementById('info');
 
-selectedFeatures.on(['add', 'remove'], function() {
+selectedFeatures.on(['add', 'remove'], function () {
-  const names = selectedFeatures.getArray().map(function(feature) {
+  const names = selectedFeatures.getArray().map(function (feature) {
     return feature.get('name');
   });
   if (names.length > 0) {

examples/button-title.js

@@ -1,26 +1,25 @@
 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 TileLayer from '../src/ol/layer/Tile.js';
+import View from '../src/ol/View.js';
 
 const map = new Map({
   layers: [
     new TileLayer({
-      source: new OSM()
+      source: new OSM(),
-    })
+    }),
   ],
   target: 'map',
   view: new View({
     center: [-8730000, 5930000],
     rotation: Math.PI / 5,
-    zoom: 8
+    zoom: 8,
-  })
+  }),
 });
 
-
 $('.ol-zoom-in, .ol-zoom-out').tooltip({
-  placement: 'right'
+  placement: 'right',
 });
 $('.ol-rotate-reset, .ol-attribution button[title]').tooltip({
-  placement: 'left'
+  placement: 'left',
 });

examples/canvas-gradient-pattern.js

@@ -1,11 +1,11 @@
-import Map from '../src/ol/Map.js';
-import View from '../src/ol/View.js';
 import GeoJSON from '../src/ol/format/GeoJSON.js';
-import {DEVICE_PIXEL_RATIO} from '../src/ol/has.js';
+import Map from '../src/ol/Map.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 View from '../src/ol/View.js';
+import {DEVICE_PIXEL_RATIO} from '../src/ol/has.js';
 import {Fill, Stroke, Style} from '../src/ol/style.js';
+import {fromLonLat} from '../src/ol/proj.js';
 
 const canvas = document.createElement('canvas');
 const context = canvas.getContext('2d');
@@ -15,7 +15,7 @@ const context = canvas.getContext('2d');
 const pixelRatio = DEVICE_PIXEL_RATIO;
 
 // Generate a rainbow gradient
-const gradient = (function() {
+const gradient = (function () {
   const grad = context.createLinearGradient(0, 0, 512 * pixelRatio, 0);
   grad.addColorStop(0, 'red');
   grad.addColorStop(1 / 6, 'orange');
@@ -28,7 +28,7 @@ const gradient = (function() {
 })();
 
 // Generate a canvasPattern with two circles on white background
-const pattern = (function() {
+const pattern = (function () {
   canvas.width = 8 * pixelRatio;
   canvas.height = 8 * pixelRatio;
   // white background
@@ -45,7 +45,7 @@ const pattern = (function() {
   context.arc(4 * pixelRatio, 4 * pixelRatio, 1.5 * pixelRatio, 0, 2 * Math.PI);
   context.fill();
   return context.createPattern(canvas, 'repeat');
-}());
+})();
 
 // Generate style for gradient or pattern fill
 const fill = new Fill();
@@ -53,8 +53,8 @@ const style = new Style({
   fill: fill,
   stroke: new Stroke({
     color: '#333',
-    width: 2
+    width: 2,
-  })
+  }),
 });
 
 /**
@@ -64,7 +64,7 @@ const style = new Style({
  * @param {import("../src/ol/Feature.js").default} feature The feature to style.
  * @return {Style} The style to use for the feature.
  */
-const getStackedStyle = function(feature) {
+const getStackedStyle = function (feature) {
   const id = feature.getId();
   fill.setColor(id > 'J' ? gradient : pattern);
   return style;
@@ -74,19 +74,17 @@ const getStackedStyle = function(feature) {
 const vectorLayer = new VectorLayer({
   source: new VectorSource({
     url: 'data/geojson/countries.geojson',
-    format: new GeoJSON()
+    format: new GeoJSON(),
   }),
-  style: getStackedStyle
+  style: getStackedStyle,
 });
 
 // … finally create a map with that layer.
 const map = new Map({
-  layers: [
+  layers: [vectorLayer],
-    vectorLayer
-  ],
   target: 'map',
   view: new View({
     center: fromLonLat([16, 48]),
-    zoom: 3
+    zoom: 3,
-  })
+  }),
 });

examples/canvas-tiles.js

@@ -1,21 +1,20 @@
 import Map from '../src/ol/Map.js';
-import View from '../src/ol/View.js';
 import TileLayer from '../src/ol/layer/Tile.js';
+import View from '../src/ol/View.js';
 import {OSM, TileDebug} from '../src/ol/source.js';
 
-
 const map = new Map({
   layers: [
     new TileLayer({
-      source: new OSM()
+      source: new OSM(),
     }),
     new TileLayer({
-      source: new TileDebug()
+      source: new TileDebug(),
-    })
+    }),
   ],
   target: 'map',
   view: new View({
     center: [0, 0],
-    zoom: 1
+    zoom: 1,
-  })
+  }),
 });

examples/cartodb.js

@@ -1,47 +1,48 @@
 import Map from '../src/ol/Map.js';
-import View from '../src/ol/View.js';
 import TileLayer from '../src/ol/layer/Tile.js';
+import View from '../src/ol/View.js';
 import {CartoDB, OSM} from '../src/ol/source.js';
 
 const mapConfig = {
-  'layers': [{
+  'layers': [
-    'type': 'cartodb',
+    {
-    'options': {
+      'type': 'cartodb',
-      'cartocss_version': '2.1.1',
+      'options': {
-      'cartocss': '#layer { polygon-fill: #F00; }',
+        'cartocss_version': '2.1.1',
-      'sql': 'select * from european_countries_e where area > 0'
+        'cartocss': '#layer { polygon-fill: #F00; }',
-    }
+        'sql': 'select * from european_countries_e where area > 0',
-  }]
+      },
+    },
+  ],
 };
 
 const cartoDBSource = new CartoDB({
   account: 'documentation',
-  config: mapConfig
+  config: mapConfig,
 });
 
 const map = new Map({
   layers: [
     new TileLayer({
-      source: new OSM()
+      source: new OSM(),
     }),
     new TileLayer({
-      source: cartoDBSource
+      source: cartoDBSource,
-    })
+    }),
   ],
   target: 'map',
   view: new View({
     center: [0, 0],
-    zoom: 2
+    zoom: 2,
-  })
+  }),
 });
 
 function setArea(n) {
   mapConfig.layers[0].options.sql =
-      'select * from european_countries_e where area > ' + n;
+    'select * from european_countries_e where area > ' + n;
   cartoDBSource.setConfig(mapConfig);
 }
 
-
+document.getElementById('country-area').addEventListener('change', function () {
-document.getElementById('country-area').addEventListener('change', function() {
   setArea(this.value);
 });

examples/center.js

@@ -1,72 +1,83 @@
+import GeoJSON from '../src/ol/format/GeoJSON.js';
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
-import GeoJSON from '../src/ol/format/GeoJSON.js';
-import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
-import {OSM, Vector as VectorSource} from '../src/ol/source.js';
 import {Circle as CircleStyle, Fill, Stroke, Style} from '../src/ol/style.js';
+import {OSM, Vector as VectorSource} from '../src/ol/source.js';
+import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
 
 /** @type {VectorSource<import("../src/ol/geom/SimpleGeometry.js").default>} */
 const source = new VectorSource({
   url: 'data/geojson/switzerland.geojson',
-  format: new GeoJSON()
+  format: new GeoJSON(),
 });
 const style = new Style({
   fill: new Fill({
-    color: 'rgba(255, 255, 255, 0.6)'
+    color: 'rgba(255, 255, 255, 0.6)',
   }),
   stroke: new Stroke({
     color: '#319FD3',
-    width: 1
+    width: 1,
   }),
   image: new CircleStyle({
     radius: 5,
     fill: new Fill({
-      color: 'rgba(255, 255, 255, 0.6)'
+      color: 'rgba(255, 255, 255, 0.6)',
     }),
     stroke: new Stroke({
       color: '#319FD3',
-      width: 1
+      width: 1,
-    })
+    }),
-  })
+  }),
 });
 const vectorLayer = new VectorLayer({
   source: source,
-  style: style
+  style: style,
 });
 const view = new View({
   center: [0, 0],
-  zoom: 1
+  zoom: 1,
 });
 const map = new Map({
   layers: [
     new TileLayer({
-      source: new OSM()
+      source: new OSM(),
     }),
-    vectorLayer
+    vectorLayer,
   ],
   target: 'map',
-  view: view
+  view: view,
 });
 
-const zoomtoswitzerland =
+const zoomtoswitzerland = document.getElementById('zoomtoswitzerland');
-    document.getElementById('zoomtoswitzerland');
+zoomtoswitzerland.addEventListener(
-zoomtoswitzerland.addEventListener('click', function() {
+  'click',
-  const feature = source.getFeatures()[0];
+  function () {
-  const polygon = feature.getGeometry();
+    const feature = source.getFeatures()[0];
-  view.fit(polygon, {padding: [170, 50, 30, 150]});
+    const polygon = feature.getGeometry();
-}, false);
+    view.fit(polygon, {padding: [170, 50, 30, 150]});
+  },
+  false
+);
 
 const zoomtolausanne = document.getElementById('zoomtolausanne');
-zoomtolausanne.addEventListener('click', function() {
+zoomtolausanne.addEventListener(
-  const feature = source.getFeatures()[1];
+  'click',
-  const point = feature.getGeometry();
+  function () {
-  view.fit(point, {padding: [170, 50, 30, 150], minResolution: 50});
+    const feature = source.getFeatures()[1];
-}, false);
+    const point = feature.getGeometry();
+    view.fit(point, {padding: [170, 50, 30, 150], minResolution: 50});
+  },
+  false
+);
 
 const centerlausanne = document.getElementById('centerlausanne');
-centerlausanne.addEventListener('click', function() {
+centerlausanne.addEventListener(
-  const feature = source.getFeatures()[1];
+  'click',
-  const point = feature.getGeometry();
+  function () {
-  const size = map.getSize();
+    const feature = source.getFeatures()[1];
-  view.centerOn(point.getCoordinates(), size, [570, 500]);
+    const point = feature.getGeometry();
-}, false);
+    const size = map.getSize();
+    view.centerOn(point.getCoordinates(), size, [570, 500]);
+  },
+  false
+);

examples/chaikin.js

@@ -1,8 +1,8 @@
+import Draw from '../src/ol/interaction/Draw.js';
 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 {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
 
 import smooth from 'chaikin-smooth';
 
@@ -21,17 +21,17 @@ const map = new Map({
   layers: [
     new TileLayer({
       source: new OSM(),
-      opacity: 0.5
+      opacity: 0.5,
     }),
     new VectorLayer({
-      source: vectorSource
+      source: vectorSource,
-    })
+    }),
   ],
   target: 'map',
   view: new View({
-    center: [1078373.5950, 6871994.5910],
+    center: [1078373.595, 6871994.591],
-    zoom: 5
+    zoom: 5,
-  })
+  }),
 });
 
 const shallSmoothen = document.getElementById('shall-smoothen');
@@ -39,10 +39,10 @@ const numIterations = document.getElementById('iterations');
 
 const draw = new Draw({
   source: vectorSource,
-  type: 'LineString'
+  type: 'LineString',
 });
 map.addInteraction(draw);
-draw.on('drawend', function(event) {
+draw.on('drawend', function (event) {
   if (!shallSmoothen.checked) {
     return;
   }

examples/cluster.js

@@ -1,11 +1,16 @@
 import Feature from '../src/ol/Feature.js';
 import Map from '../src/ol/Map.js';
-import View from '../src/ol/View.js';
 import Point from '../src/ol/geom/Point.js';
-import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
+import View from '../src/ol/View.js';
+import {
+  Circle as CircleStyle,
+  Fill,
+  Stroke,
+  Style,
+  Text,
+} from '../src/ol/style.js';
 import {Cluster, OSM, Vector as VectorSource} from '../src/ol/source.js';
-import {Circle as CircleStyle, Fill, Stroke, Style, Text} from '../src/ol/style.js';
+import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
-
 
 const distance = document.getElementById('distance');
 
@@ -18,18 +23,18 @@ for (let i = 0; i < count; ++i) {
 }
 
 const source = new VectorSource({
-  features: features
+  features: features,
 });
 
 const clusterSource = new Cluster({
   distance: parseInt(distance.value, 10),
-  source: source
+  source: source,
 });
 
 const styleCache = {};
 const clusters = new VectorLayer({
   source: clusterSource,
-  style: function(feature) {
+  style: function (feature) {
     const size = feature.get('features').length;
     let style = styleCache[size];
     if (!style) {
@@ -37,27 +42,27 @@ const clusters = new VectorLayer({
         image: new CircleStyle({
           radius: 10,
           stroke: new Stroke({
-            color: '#fff'
+            color: '#fff',
           }),
           fill: new Fill({
-            color: '#3399CC'
+            color: '#3399CC',
-          })
+          }),
         }),
         text: new Text({
           text: size.toString(),
           fill: new Fill({
-            color: '#fff'
+            color: '#fff',
-          })
+          }),
-        })
+        }),
       });
       styleCache[size] = style;
     }
     return style;
-  }
+  },
 });
 
 const raster = new TileLayer({
-  source: new OSM()
+  source: new OSM(),
 });
 
 const map = new Map({
@@ -65,10 +70,10 @@ const map = new Map({
   target: 'map',
   view: new View({
     center: [0, 0],
-    zoom: 2
+    zoom: 2,
-  })
+  }),
 });
 
-distance.addEventListener('input', function() {
+distance.addEventListener('input', function () {
   clusterSource.setDistance(parseInt(distance.value, 10));
 });

examples/color-manipulation.js

@@ -1,23 +1,21 @@
+import ImageLayer from '../src/ol/layer/Image.js';
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
-import ImageLayer from '../src/ol/layer/Image.js';
 import {Raster as RasterSource, Stamen} from '../src/ol/source.js';
 
-
 /**
  * Color manipulation functions below are adapted from
  * https://github.com/d3/d3-color.
  */
-const Xn = 0.950470;
+const Xn = 0.95047;
 const Yn = 1;
-const Zn = 1.088830;
+const Zn = 1.08883;
 const t0 = 4 / 29;
 const t1 = 6 / 29;
 const t2 = 3 * t1 * t1;
 const t3 = t1 * t1 * t1;
 const twoPi = 2 * Math.PI;
 
-
 /**
  * Convert an RGB pixel into an HCL pixel.
  * @param {Array<number>} pixel A pixel in RGB space.
@@ -29,11 +27,14 @@ function rgb2hcl(pixel) {
   const blue = rgb2xyz(pixel[2]);
 
   const x = xyz2lab(
-    (0.4124564 * red + 0.3575761 * green + 0.1804375 * blue) / Xn);
+    (0.4124564 * red + 0.3575761 * green + 0.1804375 * blue) / Xn
+  );
   const y = xyz2lab(
-    (0.2126729 * red + 0.7151522 * green + 0.0721750 * blue) / Yn);
+    (0.2126729 * red + 0.7151522 * green + 0.072175 * blue) / Yn
+  );
   const z = xyz2lab(
-    (0.0193339 * red + 0.1191920 * green + 0.9503041 * blue) / Zn);
+    (0.0193339 * red + 0.119192 * green + 0.9503041 * blue) / Zn
+  );
 
   const l = 116 * y - 16;
   const a = 500 * (x - y);
@@ -52,7 +53,6 @@ function rgb2hcl(pixel) {
   return pixel;
 }
 
-
 /**
  * Convert an HCL pixel into an RGB pixel.
  * @param {Array<number>} pixel A pixel in HCL space.
@@ -75,7 +75,7 @@ function hcl2rgb(pixel) {
   z = Zn * lab2xyz(z);
 
   pixel[0] = xyz2rgb(3.2404542 * x - 1.5371385 * y - 0.4985314 * z);
-  pixel[1] = xyz2rgb(-0.9692660 * x + 1.8760108 * y + 0.0415560 * z);
+  pixel[1] = xyz2rgb(-0.969266 * x + 1.8760108 * y + 0.041556 * z);
   pixel[2] = xyz2rgb(0.0556434 * x - 0.2040259 * y + 1.0572252 * z);
 
   return pixel;
@@ -94,18 +94,21 @@ function rgb2xyz(x) {
 }
 
 function xyz2rgb(x) {
-  return 255 * (x <= 0.0031308 ?
+  return (
-    12.92 * x : 1.055 * Math.pow(x, 1 / 2.4) - 0.055);
+    255 * (x <= 0.0031308 ? 12.92 * x : 1.055 * Math.pow(x, 1 / 2.4) - 0.055)
+  );
 }
 
 const raster = new RasterSource({
-  sources: [new Stamen({
+  sources: [
-    layer: 'watercolor'
+    new Stamen({
-  })],
+      layer: 'watercolor',
-  operation: function(pixels, data) {
+    }),
+  ],
+  operation: function (pixels, data) {
     const hcl = rgb2hcl(pixels[0]);
 
-    let h = hcl[0] + Math.PI * data.hue / 180;
+    let h = hcl[0] + (Math.PI * data.hue) / 180;
     if (h < 0) {
       h += twoPi;
     } else if (h > twoPi) {
@@ -113,8 +116,8 @@ const raster = new RasterSource({
     }
     hcl[0] = h;
 
-    hcl[1] *= (data.chroma / 100);
+    hcl[1] *= data.chroma / 100;
-    hcl[2] *= (data.lightness / 100);
+    hcl[2] *= data.lightness / 100;
 
     return hcl2rgb(hcl);
   },
@@ -132,13 +135,13 @@ const raster = new RasterSource({
     t1: t1,
     t2: t2,
     t3: t3,
-    twoPi: twoPi
+    twoPi: twoPi,
-  }
+  },
 });
 
 const controls = {};
 
-raster.on('beforeoperations', function(event) {
+raster.on('beforeoperations', function (event) {
   const data = event.data;
   for (const id in controls) {
     data[id] = Number(controls[id].value);
@@ -148,22 +151,22 @@ raster.on('beforeoperations', function(event) {
 const map = new Map({
   layers: [
     new ImageLayer({
-      source: raster
+      source: raster,
-    })
+    }),
   ],
   target: 'map',
   view: new View({
     center: [0, 2500000],
     zoom: 2,
-    maxZoom: 18
+    maxZoom: 18,
-  })
+  }),
 });
 
 const controlIds = ['hue', 'chroma', 'lightness'];
-controlIds.forEach(function(id) {
+controlIds.forEach(function (id) {
   const control = document.getElementById(id);
   const output = document.getElementById(id + 'Out');
-  control.addEventListener('input', function() {
+  control.addEventListener('input', function () {
     output.innerText = control.value;
     raster.changed();
   });

examples/custom-controls.js

@@ -1,16 +1,14 @@
 import Map from '../src/ol/Map.js';
-import View from '../src/ol/View.js';
-import {defaults as defaultControls, Control} from '../src/ol/control.js';
-import TileLayer from '../src/ol/layer/Tile.js';
 import OSM from '../src/ol/source/OSM.js';
-
+import TileLayer from '../src/ol/layer/Tile.js';
+import View from '../src/ol/View.js';
+import {Control, defaults as defaultControls} from '../src/ol/control.js';
 
 //
 // Define rotate to north control.
 //
 
 class RotateNorthControl extends Control {
-
   /**
    * @param {Object=} opt_options Control options.
    */
@@ -26,7 +24,7 @@ class RotateNorthControl extends Control {
 
     super({
       element: element,
-      target: options.target
+      target: options.target,
     });
 
     button.addEventListener('click', this.handleRotateNorth.bind(this), false);
@@ -35,28 +33,23 @@ class RotateNorthControl extends Control {
   handleRotateNorth() {
     this.getMap().getView().setRotation(0);
   }
-
 }
 
-
 //
 // Create map, giving it a rotate to north control.
 //
 
-
 const map = new Map({
-  controls: defaultControls().extend([
+  controls: defaultControls().extend([new RotateNorthControl()]),
-    new RotateNorthControl()
-  ]),
   layers: [
     new TileLayer({
-      source: new OSM()
+      source: new OSM(),
-    })
+    }),
   ],
   target: 'map',
   view: new View({
     center: [0, 0],
     zoom: 3,
-    rotation: 1
+    rotation: 1,
-  })
+  }),
 });

examples/custom-interactions.js

@@ -1,12 +1,14 @@
 import Feature from '../src/ol/Feature.js';
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
-import {LineString, Point, Polygon} from '../src/ol/geom.js';
-import {defaults as defaultInteractions, Pointer as PointerInteraction} from '../src/ol/interaction.js';
-import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
-import {TileJSON, Vector as VectorSource} from '../src/ol/source.js';
 import {Fill, Icon, Stroke, Style} from '../src/ol/style.js';
-
+import {LineString, Point, Polygon} from '../src/ol/geom.js';
+import {
+  Pointer as PointerInteraction,
+  defaults as defaultInteractions,
+} from '../src/ol/interaction.js';
+import {TileJSON, Vector as VectorSource} from '../src/ol/source.js';
+import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
 
 class Drag extends PointerInteraction {
   constructor() {
@@ -14,7 +16,7 @@ class Drag extends PointerInteraction {
       handleDownEvent: handleDownEvent,
       handleDragEvent: handleDragEvent,
       handleMoveEvent: handleMoveEvent,
-      handleUpEvent: handleUpEvent
+      handleUpEvent: handleUpEvent,
     });
 
     /**
@@ -43,7 +45,6 @@ class Drag extends PointerInteraction {
   }
 }
 
-
 /**
  * @param {import("../src/ol/MapBrowserEvent.js").default} evt Map browser event.
  * @return {boolean} `true` to start the drag sequence.
@@ -51,10 +52,9 @@ class Drag extends PointerInteraction {
 function handleDownEvent(evt) {
   const map = evt.map;
 
-  const feature = map.forEachFeatureAtPixel(evt.pixel,
+  const feature = map.forEachFeatureAtPixel(evt.pixel, function (feature) {
-    function(feature) {
+    return feature;
-      return feature;
+  });
-    });
 
   if (feature) {
     this.coordinate_ = evt.coordinate;
@@ -64,7 +64,6 @@ function handleDownEvent(evt) {
   return !!feature;
 }
 
-
 /**
  * @param {import("../src/ol/MapBrowserEvent.js").default} evt Map browser event.
  */
@@ -79,17 +78,15 @@ function handleDragEvent(evt) {
   this.coordinate_[1] = evt.coordinate[1];
 }
 
-
 /**
  * @param {import("../src/ol/MapBrowserEvent.js").default} evt Event.
  */
 function handleMoveEvent(evt) {
   if (this.cursor_) {
     const map = evt.map;
-    const feature = map.forEachFeatureAtPixel(evt.pixel,
+    const feature = map.forEachFeatureAtPixel(evt.pixel, function (feature) {
-      function(feature) {
+      return feature;
-        return feature;
+    });
-      });
     const element = evt.map.getTargetElement();
     if (feature) {
       if (element.style.cursor != this.cursor_) {
@@ -103,7 +100,6 @@ function handleMoveEvent(evt) {
   }
 }
 
-
 /**
  * @return {boolean} `false` to stop the drag sequence.
  */
@@ -113,29 +109,43 @@ function handleUpEvent() {
   return false;
 }
 
-
 const pointFeature = new Feature(new Point([0, 0]));
 
 const lineFeature = new Feature(
-  new LineString([[-1e7, 1e6], [-1e6, 3e6]]));
+  new LineString([
+    [-1e7, 1e6],
+    [-1e6, 3e6],
+  ])
+);
 
 const polygonFeature = new Feature(
-  new Polygon([[[-3e6, -1e6], [-3e6, 1e6],
+  new Polygon([
-    [-1e6, 1e6], [-1e6, -1e6], [-3e6, -1e6]]]));
+    [
+      [-3e6, -1e6],
+      [-3e6, 1e6],
+      [-1e6, 1e6],
+      [-1e6, -1e6],
+      [-3e6, -1e6],
+    ],
+  ])
+);
 
-const key = 'pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q';
+const key =
+  'pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q';
 
 const map = new Map({
   interactions: defaultInteractions().extend([new Drag()]),
   layers: [
     new TileLayer({
       source: new TileJSON({
-        url: 'https://a.tiles.mapbox.com/v4/aj.1x1-degrees.json?access_token=' + key
+        url:
-      })
+          'https://a.tiles.mapbox.com/v4/aj.1x1-degrees.json?access_token=' +
+          key,
+      }),
     }),
     new VectorLayer({
       source: new VectorSource({
-        features: [pointFeature, lineFeature, polygonFeature]
+        features: [pointFeature, lineFeature, polygonFeature],
       }),
       style: new Style({
         image: new Icon({
@@ -143,21 +153,21 @@ const map = new Map({
           anchorXUnits: 'fraction',
           anchorYUnits: 'pixels',
           opacity: 0.95,
-          src: 'data/icon.png'
+          src: 'data/icon.png',
         }),
         stroke: new Stroke({
           width: 3,
-          color: [255, 0, 0, 1]
+          color: [255, 0, 0, 1],
         }),
         fill: new Fill({
-          color: [0, 0, 255, 0.6]
+          color: [0, 0, 255, 0.6],
-        })
+        }),
-      })
+      }),
-    })
+    }),
   ],
   target: 'map',
   view: new View({
     center: [0, 0],
-    zoom: 2
+    zoom: 2,
-  })
+  }),
 });

examples/d3.js

@@ -1,24 +1,23 @@
 import Map from '../src/ol/Map.js';
-import View from '../src/ol/View.js';
-import {getWidth, getCenter} from '../src/ol/extent.js';
-import {Layer, Tile as TileLayer} from '../src/ol/layer.js';
 import SourceState from '../src/ol/source/State.js';
-import {fromLonLat, toLonLat} from '../src/ol/proj.js';
 import Stamen from '../src/ol/source/Stamen.js';
+import View from '../src/ol/View.js';
+import {Layer, Tile as TileLayer} from '../src/ol/layer.js';
+import {fromLonLat, toLonLat} from '../src/ol/proj.js';
+import {getCenter, getWidth} from '../src/ol/extent.js';
 
 class CanvasLayer extends Layer {
-
   constructor(options) {
     super(options);
 
     this.features = options.features;
 
-    this.svg = d3.select(document.createElement('div')).append('svg')
+    this.svg = d3
+      .select(document.createElement('div'))
+      .append('svg')
       .style('position', 'absolute');
 
-    this.svg.append('path')
+    this.svg.append('path').datum(this.features).attr('class', 'boundary');
-      .datum(this.features)
-      .attr('class', 'boundary');
   }
 
   getSourceState() {
@@ -51,7 +50,10 @@ class CanvasLayer extends Layer {
     const scale = r / frameState.viewState.resolution;
 
     const center = toLonLat(getCenter(frameState.extent), projection);
-    d3Projection.scale(scale).center(center).translate([width / 2, height / 2]);
+    d3Projection
+      .scale(scale)
+      .center(center)
+      .translate([width / 2, height / 2]);
 
     d3Path = d3Path.projection(d3Projection);
     d3Path(this.features);
@@ -59,8 +61,7 @@ class CanvasLayer extends Layer {
     this.svg.attr('width', width);
     this.svg.attr('height', height);
 
-    this.svg.select('path')
+    this.svg.select('path').attr('d', d3Path);
-      .attr('d', d3Path);
 
     return this.svg.node();
   }
@@ -70,25 +71,23 @@ const map = new Map({
   layers: [
     new TileLayer({
       source: new Stamen({
-        layer: 'watercolor'
+        layer: 'watercolor',
-      })
+      }),
-    })
+    }),
   ],
   target: 'map',
   view: new View({
     center: fromLonLat([-97, 38]),
-    zoom: 4
+    zoom: 4,
-  })
+  }),
 });
 
-
 /**
  * Load the topojson data and create an ol/layer/Image for that data.
  */
-d3.json('data/topojson/us.json').then(function(us) {
+d3.json('data/topojson/us.json').then(function (us) {
-
   const layer = new CanvasLayer({
-    features: topojson.feature(us, us.objects.counties)
+    features: topojson.feature(us, us.objects.counties),
   });
 
   map.addLayer(layer);

examples/device-orientation.js

@@ -1,32 +1,31 @@
 import Map from '../src/ol/Map.js';
-import View from '../src/ol/View.js';
-import TileLayer from '../src/ol/layer/Tile.js';
-import {toRadians} from '../src/ol/math.js';
 import OSM from '../src/ol/source/OSM.js';
+import TileLayer from '../src/ol/layer/Tile.js';
+import View from '../src/ol/View.js';
+import {toRadians} from '../src/ol/math.js';
 
 const view = new View({
   center: [0, 0],
-  zoom: 2
+  zoom: 2,
 });
 const map = new Map({
   layers: [
     new TileLayer({
-      source: new OSM()
+      source: new OSM(),
-    })
+    }),
   ],
   target: 'map',
-  view: view
+  view: view,
 });
 
 function el(id) {
   return document.getElementById(id);
 }
 
-
 const gn = new GyroNorm();
 
-gn.init().then(function() {
+gn.init().then(function () {
-  gn.start(function(event) {
+  gn.start(function (event) {
     const center = view.getCenter();
     const resolution = view.getResolution();
     const alpha = toRadians(event.do.alpha);

examples/disable-image-smoothing.js

@@ -1,10 +1,11 @@
 import Map from '../src/ol/Map.js';
-import View from '../src/ol/View.js';
 import TileLayer from '../src/ol/layer/Tile.js';
+import View from '../src/ol/View.js';
 import XYZ from '../src/ol/source/XYZ.js';
 
 const key = 'get_your_own_D6rA4zTHduk6KOKTXzGB';
-const attributions = '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> ' +
+const attributions =
+  '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> ' +
   '<a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>';
 
 const disabledLayer = new TileLayer({
@@ -12,11 +13,12 @@ const disabledLayer = new TileLayer({
   className: 'ol-layer-dem',
   source: new XYZ({
     attributions: attributions,
-    url: 'https://api.maptiler.com/tiles/terrain-rgb/{z}/{x}/{y}.png?key=' + key,
+    url:
+      'https://api.maptiler.com/tiles/terrain-rgb/{z}/{x}/{y}.png?key=' + key,
     maxZoom: 10,
     crossOrigin: '',
-    imageSmoothing: false
+    imageSmoothing: false,
-  })
+  }),
 });
 
 const imagery = new TileLayer({
@@ -25,30 +27,36 @@ const imagery = new TileLayer({
     attributions: attributions,
     url: 'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=' + key,
     maxZoom: 20,
-    crossOrigin: ''
+    crossOrigin: '',
-  })
+  }),
 });
 
 const enabledLayer = new TileLayer({
   source: new XYZ({
     attributions: attributions,
-    url: 'https://api.maptiler.com/tiles/terrain-rgb/{z}/{x}/{y}.png?key=' + key,
+    url:
+      'https://api.maptiler.com/tiles/terrain-rgb/{z}/{x}/{y}.png?key=' + key,
     maxZoom: 10,
-    crossOrigin: ''
+    crossOrigin: '',
-  })
+  }),
 });
 
-imagery.on('prerender', function(evt) {
+imagery.on('prerender', function (evt) {
   // use opaque background to conceal DEM while fully opaque imagery renders
   if (imagery.getOpacity() === 1) {
     evt.context.fillStyle = 'white';
-    evt.context.fillRect(0, 0, evt.context.canvas.width, evt.context.canvas.height);
+    evt.context.fillRect(
+      0,
+      0,
+      evt.context.canvas.width,
+      evt.context.canvas.height
+    );
   }
 });
 
 const control = document.getElementById('opacity');
 const output = document.getElementById('output');
-control.addEventListener('input', function() {
+control.addEventListener('input', function () {
   output.innerText = control.value;
   imagery.setOpacity(control.value / 100);
 });
@@ -58,50 +66,52 @@ imagery.setOpacity(control.value / 100);
 const view = new View({
   center: [6.893, 45.8295],
   zoom: 16,
-  projection: 'EPSG:4326'
+  projection: 'EPSG:4326',
 });
 
 const map1 = new Map({
   target: 'map1',
   layers: [disabledLayer, imagery],
-  view: view
+  view: view,
 });
 
 const map2 = new Map({
   target: 'map2',
   layers: [enabledLayer],
-  view: view
+  view: view,
 });
 
 const info1 = document.getElementById('info1');
 const info2 = document.getElementById('info2');
 
-const showElevations = function(evt) {
+const showElevations = function (evt) {
   if (evt.dragging) {
     return;
   }
   map1.forEachLayerAtPixel(
     evt.pixel,
-    function(layer, pixel) {
+    function (layer, pixel) {
-      const height = -10000 + (pixel[0] * 256 * 256 + pixel[1] * 256 + pixel[2]) * 0.1;
+      const height =
+        -10000 + (pixel[0] * 256 * 256 + pixel[1] * 256 + pixel[2]) * 0.1;
       info1.innerText = height.toFixed(1);
     },
     {
-      layerFilter: function(layer) {
+      layerFilter: function (layer) {
         return layer === disabledLayer;
-      }
+      },
     }
   );
   map2.forEachLayerAtPixel(
     evt.pixel,
-    function(layer, pixel) {
+    function (layer, pixel) {
-      const height = -10000 + (pixel[0] * 256 * 256 + pixel[1] * 256 + pixel[2]) * 0.1;
+      const height =
+        -10000 + (pixel[0] * 256 * 256 + pixel[1] * 256 + pixel[2]) * 0.1;
       info2.innerText = height.toFixed(1);
     },
     {
-      layerFilter: function(layer) {
+      layerFilter: function (layer) {
         return layer === enabledLayer;
-      }
+      },
     }
   );
 };

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

@@ -1,22 +1,23 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
+import {
+  DragAndDrop,
+  defaults as defaultInteractions,
+} from '../src/ol/interaction.js';
 import {GPX, GeoJSON, IGC, KML, TopoJSON} from '../src/ol/format.js';
-import {defaults as defaultInteractions, DragAndDrop} from '../src/ol/interaction.js';
+import {
-import {VectorImage as VectorImageLayer, Tile as TileLayer} from '../src/ol/layer.js';
+  Tile as TileLayer,
-import {XYZ, Vector as VectorSource} from '../src/ol/source.js';
+  VectorImage as VectorImageLayer,
+} from '../src/ol/layer.js';
+import {Vector as VectorSource, XYZ} from '../src/ol/source.js';
 
 const dragAndDropInteraction = new DragAndDrop({
-  formatConstructors: [
+  formatConstructors: [GPX, GeoJSON, IGC, KML, TopoJSON],
-    GPX,
-    GeoJSON,
-    IGC,
-    KML,
-    TopoJSON
-  ]
 });
 
 const key = 'get_your_own_D6rA4zTHduk6KOKTXzGB';
-const attributions = '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> ' +
+const attributions =
+  '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> ' +
   '<a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>';
 
 const map = new Map({
@@ -25,31 +26,34 @@ const map = new Map({
     new TileLayer({
       source: new XYZ({
         attributions: attributions,
-        url: 'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=' + key,
+        url:
-        maxZoom: 20
+          'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=' + key,
-      })
+        maxZoom: 20,
-    })
+      }),
+    }),
   ],
   target: 'map',
   view: new View({
     center: [0, 0],
-    zoom: 2
+    zoom: 2,
-  })
+  }),
 });
 
-dragAndDropInteraction.on('addfeatures', function(event) {
+dragAndDropInteraction.on('addfeatures', function (event) {
   const vectorSource = new VectorSource({
-    features: event.features
+    features: event.features,
   });
-  map.addLayer(new VectorImageLayer({
+  map.addLayer(
-    source: vectorSource
+    new VectorImageLayer({
-  }));
+      source: vectorSource,
+    })
+  );
   map.getView().fit(vectorSource.getExtent());
 });
 
-const displayFeatureInfo = function(pixel) {
+const displayFeatureInfo = function (pixel) {
   const features = [];
-  map.forEachFeatureAtPixel(pixel, function(feature) {
+  map.forEachFeatureAtPixel(pixel, function (feature) {
     features.push(feature);
   });
   if (features.length > 0) {
@@ -64,7 +68,7 @@ const displayFeatureInfo = function(pixel) {
   }
 };
 
-map.on('pointermove', function(evt) {
+map.on('pointermove', function (evt) {
   if (evt.dragging) {
     return;
   }
@@ -72,6 +76,6 @@ map.on('pointermove', function(evt) {
   displayFeatureInfo(pixel);
 });
 
-map.on('click', function(evt) {
+map.on('click', function (evt) {
   displayFeatureInfo(evt.pixel);
 });

examples/drag-and-drop.js

@@ -1,22 +1,20 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
+import {
+  DragAndDrop,
+  defaults as defaultInteractions,
+} from '../src/ol/interaction.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 {XYZ, Vector as VectorSource} from '../src/ol/source.js';
+import {Vector as VectorSource, XYZ} from '../src/ol/source.js';
 
 const dragAndDropInteraction = new DragAndDrop({
-  formatConstructors: [
+  formatConstructors: [GPX, GeoJSON, IGC, KML, TopoJSON],
-    GPX,
-    GeoJSON,
-    IGC,
-    KML,
-    TopoJSON
-  ]
 });
 
 const key = 'get_your_own_D6rA4zTHduk6KOKTXzGB';
-const attributions = '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> ' +
+const attributions =
+  '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> ' +
   '<a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>';
 
 const map = new Map({
@@ -25,31 +23,34 @@ const map = new Map({
     new TileLayer({
       source: new XYZ({
         attributions: attributions,
-        url: 'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=' + key,
+        url:
-        maxZoom: 20
+          'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=' + key,
-      })
+        maxZoom: 20,
-    })
+      }),
+    }),
   ],
   target: 'map',
   view: new View({
     center: [0, 0],
-    zoom: 2
+    zoom: 2,
-  })
+  }),
 });
 
-dragAndDropInteraction.on('addfeatures', function(event) {
+dragAndDropInteraction.on('addfeatures', function (event) {
   const vectorSource = new VectorSource({
-    features: event.features
+    features: event.features,
   });
-  map.addLayer(new VectorLayer({
+  map.addLayer(
-    source: vectorSource
+    new VectorLayer({
-  }));
+      source: vectorSource,
+    })
+  );
   map.getView().fit(vectorSource.getExtent());
 });
 
-const displayFeatureInfo = function(pixel) {
+const displayFeatureInfo = function (pixel) {
   const features = [];
-  map.forEachFeatureAtPixel(pixel, function(feature) {
+  map.forEachFeatureAtPixel(pixel, function (feature) {
     features.push(feature);
   });
   if (features.length > 0) {
@@ -64,7 +65,7 @@ const displayFeatureInfo = function(pixel) {
   }
 };
 
-map.on('pointermove', function(evt) {
+map.on('pointermove', function (evt) {
   if (evt.dragging) {
     return;
   }
@@ -72,6 +73,6 @@ map.on('pointermove', function(evt) {
   displayFeatureInfo(pixel);
 });
 
-map.on('click', function(evt) {
+map.on('click', function (evt) {
   displayFeatureInfo(evt.pixel);
 });

examples/drag-rotate-and-zoom.js

@@ -1,22 +1,22 @@
 import Map from '../src/ol/Map.js';
-import View from '../src/ol/View.js';
-import {defaults as defaultInteractions, DragRotateAndZoom} from '../src/ol/interaction.js';
-import TileLayer from '../src/ol/layer/Tile.js';
 import OSM from '../src/ol/source/OSM.js';
-
+import TileLayer from '../src/ol/layer/Tile.js';
+import View from '../src/ol/View.js';
+import {
+  DragRotateAndZoom,
+  defaults as defaultInteractions,
+} from '../src/ol/interaction.js';
 
 const map = new Map({
-  interactions: defaultInteractions().extend([
+  interactions: defaultInteractions().extend([new DragRotateAndZoom()]),
-    new DragRotateAndZoom()
-  ]),
   layers: [
     new TileLayer({
-      source: new OSM()
+      source: new OSM(),
-    })
+    }),
   ],
   target: 'map',
   view: new View({
     center: [0, 0],
-    zoom: 2
+    zoom: 2,
-  })
+  }),
 });

examples/draw-and-modify-features.js

@@ -1,12 +1,12 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
-import {Draw, Modify, Snap} from '../src/ol/interaction.js';
-import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
-import {OSM, Vector as VectorSource} from '../src/ol/source.js';
 import {Circle as CircleStyle, Fill, Stroke, Style} from '../src/ol/style.js';
+import {Draw, Modify, Snap} from '../src/ol/interaction.js';
+import {OSM, Vector as VectorSource} from '../src/ol/source.js';
+import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
 
 const raster = new TileLayer({
-  source: new OSM()
+  source: new OSM(),
 });
 
 const source = new VectorSource();
@@ -14,19 +14,19 @@ const vector = new VectorLayer({
   source: source,
   style: new Style({
     fill: new Fill({
-      color: 'rgba(255, 255, 255, 0.2)'
+      color: 'rgba(255, 255, 255, 0.2)',
     }),
     stroke: new Stroke({
       color: '#ffcc33',
-      width: 2
+      width: 2,
     }),
     image: new CircleStyle({
       radius: 7,
       fill: new Fill({
-        color: '#ffcc33'
+        color: '#ffcc33',
-      })
+      }),
-    })
+    }),
-  })
+  }),
 });
 
 const map = new Map({
@@ -34,8 +34,8 @@ const map = new Map({
   target: 'map',
   view: new View({
     center: [-11000000, 4600000],
-    zoom: 4
+    zoom: 4,
-  })
+  }),
 });
 
 const modify = new Modify({source: source});
@@ -47,18 +47,17 @@ const typeSelect = document.getElementById('type');
 function addInteractions() {
   draw = new Draw({
     source: source,
-    type: typeSelect.value
+    type: typeSelect.value,
   });
   map.addInteraction(draw);
   snap = new Snap({source: source});
   map.addInteraction(snap);
-
 }
 
 /**
  * Handle change event.
  */
-typeSelect.onchange = function() {
+typeSelect.onchange = function () {
   map.removeInteraction(draw);
   map.removeInteraction(snap);
   addInteractions();

examples/draw-features.js

@@ -1,17 +1,17 @@
+import Draw from '../src/ol/interaction/Draw.js';
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
-import Draw from '../src/ol/interaction/Draw.js';
-import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
 import {OSM, Vector as VectorSource} from '../src/ol/source.js';
+import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
 
 const raster = new TileLayer({
-  source: new OSM()
+  source: new OSM(),
 });
 
 const source = new VectorSource({wrapX: false});
 
 const vector = new VectorLayer({
-  source: source
+  source: source,
 });
 
 const map = new Map({
@@ -19,8 +19,8 @@ const map = new Map({
   target: 'map',
   view: new View({
     center: [-11000000, 4600000],
-    zoom: 4
+    zoom: 4,
-  })
+  }),
 });
 
 const typeSelect = document.getElementById('type');
@@ -31,17 +31,16 @@ function addInteraction() {
   if (value !== 'None') {
     draw = new Draw({
       source: source,
-      type: typeSelect.value
+      type: typeSelect.value,
     });
     map.addInteraction(draw);
   }
 }
 
-
 /**
  * Handle change event.
  */
-typeSelect.onchange = function() {
+typeSelect.onchange = function () {
   map.removeInteraction(draw);
   addInteraction();
 };

examples/draw-freehand.js

@@ -1,17 +1,17 @@
+import Draw from '../src/ol/interaction/Draw.js';
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
-import Draw from '../src/ol/interaction/Draw.js';
-import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
 import {OSM, Vector as VectorSource} from '../src/ol/source.js';
+import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
 
 const raster = new TileLayer({
-  source: new OSM()
+  source: new OSM(),
 });
 
 const source = new VectorSource({wrapX: false});
 
 const vector = new VectorLayer({
-  source: source
+  source: source,
 });
 
 const map = new Map({
@@ -19,8 +19,8 @@ const map = new Map({
   target: 'map',
   view: new View({
     center: [-11000000, 4600000],
-    zoom: 4
+    zoom: 4,
-  })
+  }),
 });
 
 const typeSelect = document.getElementById('type');
@@ -32,17 +32,16 @@ function addInteraction() {
     draw = new Draw({
       source: source,
       type: typeSelect.value,
-      freehand: true
+      freehand: true,
     });
     map.addInteraction(draw);
   }
 }
 
-
 /**
  * Handle change event.
  */
-typeSelect.onchange = function() {
+typeSelect.onchange = function () {
   map.removeInteraction(draw);
   addInteraction();
 };

examples/draw-shapes.js

@@ -1,18 +1,21 @@
+import Draw, {
+  createBox,
+  createRegularPolygon,
+} from '../src/ol/interaction/Draw.js';
 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 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 {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
 
 const raster = new TileLayer({
-  source: new OSM()
+  source: new OSM(),
 });
 
 const source = new VectorSource({wrapX: false});
 
 const vector = new VectorLayer({
-  source: source
+  source: source,
 });
 
 const map = new Map({
@@ -20,8 +23,8 @@ const map = new Map({
   target: 'map',
   view: new View({
     center: [-11000000, 4600000],
-    zoom: 4
+    zoom: 4,
-  })
+  }),
 });
 
 const typeSelect = document.getElementById('type');
@@ -39,7 +42,7 @@ function addInteraction() {
       geometryFunction = createBox();
     } else if (value === 'Star') {
       value = 'Circle';
-      geometryFunction = function(coordinates, geometry) {
+      geometryFunction = function (coordinates, geometry) {
         const center = coordinates[0];
         const last = coordinates[1];
         const dx = center[0] - last[0];
@@ -49,7 +52,7 @@ function addInteraction() {
         const newCoordinates = [];
         const numPoints = 12;
         for (let i = 0; i < numPoints; ++i) {
-          const angle = rotation + i * 2 * Math.PI / numPoints;
+          const angle = rotation + (i * 2 * Math.PI) / numPoints;
           const fraction = i % 2 === 0 ? 1 : 0.5;
           const offsetX = radius * fraction * Math.cos(angle);
           const offsetY = radius * fraction * Math.sin(angle);
@@ -67,17 +70,16 @@ function addInteraction() {
     draw = new Draw({
       source: source,
       type: value,
-      geometryFunction: geometryFunction
+      geometryFunction: geometryFunction,
     });
     map.addInteraction(draw);
   }
 }
 
-
 /**
  * Handle change event.
  */
-typeSelect.onchange = function() {
+typeSelect.onchange = function () {
   map.removeInteraction(draw);
   addInteraction();
 };

examples/dynamic-data.js

@@ -1,13 +1,13 @@
 import Map from '../src/ol/Map.js';
-import View from '../src/ol/View.js';
-import {MultiPoint, Point} from '../src/ol/geom.js';
-import TileLayer from '../src/ol/layer/Tile.js';
 import OSM from '../src/ol/source/OSM.js';
+import TileLayer from '../src/ol/layer/Tile.js';
+import View from '../src/ol/View.js';
 import {Circle as CircleStyle, Fill, Stroke, Style} from '../src/ol/style.js';
+import {MultiPoint, Point} from '../src/ol/geom.js';
 import {getVectorContext} from '../src/ol/render.js';
 
 const tileLayer = new TileLayer({
-  source: new OSM()
+  source: new OSM(),
 });
 
 const map = new Map({
@@ -15,30 +15,30 @@ const map = new Map({
   target: 'map',
   view: new View({
     center: [0, 0],
-    zoom: 2
+    zoom: 2,
-  })
+  }),
 });
 
 const imageStyle = new Style({
   image: new CircleStyle({
     radius: 5,
     fill: new Fill({color: 'yellow'}),
-    stroke: new Stroke({color: 'red', width: 1})
+    stroke: new Stroke({color: 'red', width: 1}),
-  })
+  }),
 });
 
 const headInnerImageStyle = new Style({
   image: new CircleStyle({
     radius: 2,
-    fill: new Fill({color: 'blue'})
+    fill: new Fill({color: 'blue'}),
-  })
+  }),
 });
 
 const headOuterImageStyle = new Style({
   image: new CircleStyle({
     radius: 5,
-    fill: new Fill({color: 'black'})
+    fill: new Fill({color: 'black'}),
-  })
+  }),
 });
 
 const n = 200;
@@ -46,16 +46,16 @@ const omegaTheta = 30000; // Rotation period in ms
 const R = 7e6;
 const r = 2e6;
 const p = 2e6;
-tileLayer.on('postrender', function(event) {
+tileLayer.on('postrender', function (event) {
   const vectorContext = getVectorContext(event);
   const frameState = event.frameState;
-  const theta = 2 * Math.PI * frameState.time / omegaTheta;
+  const theta = (2 * Math.PI * frameState.time) / omegaTheta;
   const coordinates = [];
   let i;
   for (i = 0; i < n; ++i) {
-    const t = theta + 2 * Math.PI * i / n;
+    const t = theta + (2 * Math.PI * i) / n;
-    const x = (R + r) * Math.cos(t) + p * Math.cos((R + r) * t / r);
+    const x = (R + r) * Math.cos(t) + p * Math.cos(((R + r) * t) / r);
-    const y = (R + r) * Math.sin(t) + p * Math.sin((R + r) * t / r);
+    const y = (R + r) * Math.sin(t) + p * Math.sin(((R + r) * t) / r);
     coordinates.push([x, y]);
   }
   vectorContext.setStyle(imageStyle);

examples/earthquake-clusters.js

@@ -1,29 +1,38 @@
+import KML from '../src/ol/format/KML.js';
 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 {
-import KML from '../src/ol/format/KML.js';
+  Circle as CircleStyle,
-import {defaults as defaultInteractions, Select} from '../src/ol/interaction.js';
+  Fill,
-import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
+  RegularShape,
+  Stroke,
+  Style,
+  Text,
+} from '../src/ol/style.js';
 import {Cluster, Stamen, Vector as VectorSource} from '../src/ol/source.js';
-import {Circle as CircleStyle, Fill, RegularShape, Stroke, Style, Text} from '../src/ol/style.js';
+import {
-
+  Select,
+  defaults as defaultInteractions,
+} from '../src/ol/interaction.js';
+import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
+import {createEmpty, extend, getHeight, getWidth} from '../src/ol/extent.js';
 
 const earthquakeFill = new Fill({
-  color: 'rgba(255, 153, 0, 0.8)'
+  color: 'rgba(255, 153, 0, 0.8)',
 });
 const earthquakeStroke = new Stroke({
   color: 'rgba(255, 204, 0, 0.2)',
-  width: 1
+  width: 1,
 });
 const textFill = new Fill({
-  color: '#fff'
+  color: '#fff',
 });
 const textStroke = new Stroke({
   color: 'rgba(0, 0, 0, 0.6)',
-  width: 3
+  width: 3,
 });
 const invisibleFill = new Fill({
-  color: 'rgba(255, 255, 255, 0.01)'
+  color: 'rgba(255, 255, 255, 0.01)',
 });
 
 function createEarthquakeStyle(feature) {
@@ -42,14 +51,14 @@ function createEarthquakeStyle(feature) {
       points: 5,
       angle: Math.PI,
       fill: earthquakeFill,
-      stroke: earthquakeStroke
+      stroke: earthquakeStroke,
-    })
+    }),
   });
 }
 
 let maxFeatureCount;
 let vector = null;
-const calculateClusterInfo = function(resolution) {
+const calculateClusterInfo = function (resolution) {
   maxFeatureCount = 0;
   const features = vector.getSource().getFeatures();
   let feature, radius;
@@ -62,8 +71,7 @@ const calculateClusterInfo = function(resolution) {
       extend(extent, originalFeatures[j].getGeometry().getExtent());
     }
     maxFeatureCount = Math.max(maxFeatureCount, jj);
-    radius = 0.25 * (getWidth(extent) + getHeight(extent)) /
+    radius = (0.25 * (getWidth(extent) + getHeight(extent))) / resolution;
-        resolution;
     feature.set('radius', radius);
   }
 };
@@ -81,14 +89,14 @@ function styleFunction(feature, resolution) {
       image: new CircleStyle({
         radius: feature.get('radius'),
         fill: new Fill({
-          color: [255, 153, 0, Math.min(0.8, 0.4 + (size / maxFeatureCount))]
+          color: [255, 153, 0, Math.min(0.8, 0.4 + size / maxFeatureCount)],
-        })
+        }),
       }),
       text: new Text({
         text: size.toString(),
         fill: textFill,
-        stroke: textStroke
+        stroke: textStroke,
-      })
+      }),
     });
   } else {
     const originalFeature = feature.get('features')[0];
@@ -98,12 +106,14 @@ function styleFunction(feature, resolution) {
 }
 
 function selectStyleFunction(feature) {
-  const styles = [new Style({
+  const styles = [
-    image: new CircleStyle({
+    new Style({
-      radius: feature.get('radius'),
+      image: new CircleStyle({
-      fill: invisibleFill
+        radius: feature.get('radius'),
-    })
+        fill: invisibleFill,
-  })];
+      }),
+    }),
+  ];
   const originalFeatures = feature.get('features');
   let originalFeature;
   for (let i = originalFeatures.length - 1; i >= 0; --i) {
@@ -119,31 +129,32 @@ vector = new VectorLayer({
     source: new VectorSource({
       url: 'data/kml/2012_Earthquakes_Mag5.kml',
       format: new KML({
-        extractStyles: false
+        extractStyles: false,
-      })
+      }),
-    })
+    }),
   }),
-  style: styleFunction
+  style: styleFunction,
 });
 
 const raster = new TileLayer({
   source: new Stamen({
-    layer: 'toner'
+    layer: 'toner',
-  })
+  }),
 });
 
 const map = new Map({
   layers: [raster, vector],
-  interactions: defaultInteractions().extend([new Select({
+  interactions: defaultInteractions().extend([
-    condition: function(evt) {
+    new Select({
-      return evt.type == 'pointermove' ||
+      condition: function (evt) {
-          evt.type == 'singleclick';
+        return evt.type == 'pointermove' || evt.type == 'singleclick';
-    },
+      },
-    style: selectStyleFunction
+      style: selectStyleFunction,
-  })]),
+    }),
+  ]),
   target: 'map',
   view: new View({
     center: [0, 0],
-    zoom: 2
+    zoom: 2,
-  })
+  }),
 });

examples/earthquake-custom-symbol.js

@@ -1,22 +1,29 @@
-import Map from '../src/ol/Map.js';
-import View from '../src/ol/View.js';
 import KML from '../src/ol/format/KML.js';
+import Map from '../src/ol/Map.js';
 import Polygon from '../src/ol/geom/Polygon.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 View from '../src/ol/View.js';
 import {Fill, Icon, Stroke, Style} from '../src/ol/style.js';
+import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
+import {toContext} from '../src/ol/render.js';
 
-
+const symbol = [
-const symbol = [[0, 0], [4, 2], [6, 0], [10, 5], [6, 3], [4, 5], [0, 0]];
+  [0, 0],
+  [4, 2],
+  [6, 0],
+  [10, 5],
+  [6, 3],
+  [4, 5],
+  [0, 0],
+];
 let scale;
-const scaleFunction = function(coordinate) {
+const scaleFunction = function (coordinate) {
   return [coordinate[0] * scale, coordinate[1] * scale];
 };
 
 const styleCache = {};
-const styleFunction = function(feature) {
+const styleFunction = function (feature) {
   // 2012_Earthquakes_Mag5.kml stores the magnitude of each earthquake in a
   // standards-violating <magnitude> tag in each Placemark.  We extract it from
   // the Placemark's name instead.
@@ -27,19 +34,23 @@ const styleFunction = function(feature) {
   let style = styleCache[size];
   if (!style) {
     const canvas = document.createElement('canvas');
-    const vectorContext = toContext(canvas.getContext('2d'),
+    const vectorContext = toContext(canvas.getContext('2d'), {
-      {size: [size, size], pixelRatio: 1});
+      size: [size, size],
-    vectorContext.setStyle(new Style({
+      pixelRatio: 1,
-      fill: new Fill({color: 'rgba(255, 153, 0, 0.4)'}),
+    });
-      stroke: new Stroke({color: 'rgba(255, 204, 0, 0.2)', width: 2})
+    vectorContext.setStyle(
-    }));
+      new Style({
+        fill: new Fill({color: 'rgba(255, 153, 0, 0.4)'}),
+        stroke: new Stroke({color: 'rgba(255, 204, 0, 0.2)', width: 2}),
+      })
+    );
     vectorContext.drawGeometry(new Polygon([symbol.map(scaleFunction)]));
     style = new Style({
       image: new Icon({
         img: canvas,
         imgSize: [size, size],
-        rotation: 1.2
+        rotation: 1.2,
-      })
+      }),
     });
     styleCache[size] = style;
   }
@@ -50,16 +61,16 @@ const vector = new VectorLayer({
   source: new VectorSource({
     url: 'data/kml/2012_Earthquakes_Mag5.kml',
     format: new KML({
-      extractStyles: false
+      extractStyles: false,
-    })
+    }),
   }),
-  style: styleFunction
+  style: styleFunction,
 });
 
 const raster = new TileLayer({
   source: new Stamen({
-    layer: 'toner'
+    layer: 'toner',
-  })
+  }),
 });
 
 const map = new Map({
@@ -67,6 +78,6 @@ const map = new Map({
   target: 'map',
   view: new View({
     center: [0, 0],
-    zoom: 2
+    zoom: 2,
-  })
+  }),
 });

examples/edit-geographic.js

@@ -1,46 +1,46 @@
-import {Map, View} from '../src/ol/index.js';
 import GeoJSON from '../src/ol/format/GeoJSON.js';
-import {Modify, Select, Draw, Snap} from '../src/ol/interaction.js';
+import {Draw, Modify, Select, Snap} from '../src/ol/interaction.js';
-import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
+import {Map, View} from '../src/ol/index.js';
 import {OSM, Vector as VectorSource} from '../src/ol/source.js';
+import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
 import {useGeographic} from '../src/ol/proj.js';
 
 useGeographic();
 
 const source = new VectorSource({
   url: 'data/geojson/countries.geojson',
-  format: new GeoJSON()
+  format: new GeoJSON(),
 });
 
 const map = new Map({
   target: 'map',
   layers: [
     new TileLayer({
-      source: new OSM()
+      source: new OSM(),
     }),
     new VectorLayer({
-      source: source
+      source: source,
-    })
+    }),
   ],
   view: new View({
     center: [0, 0],
-    zoom: 2
+    zoom: 2,
-  })
+  }),
 });
 
 const select = new Select();
 
 const modify = new Modify({
-  features: select.getFeatures()
+  features: select.getFeatures(),
 });
 
 const draw = new Draw({
   type: 'Polygon',
-  source: source
+  source: source,
 });
 
 const snap = new Snap({
-  source: source
+  source: source,
 });
 
 function removeInteractions() {

examples/epsg-4326.js

@@ -1,9 +1,8 @@
 import Map from '../src/ol/Map.js';
-import View from '../src/ol/View.js';
-import {defaults as defaultControls, ScaleLine} from '../src/ol/control.js';
 import TileLayer from '../src/ol/layer/Tile.js';
 import TileWMS from '../src/ol/source/TileWMS.js';
-
+import View from '../src/ol/View.js';
+import {ScaleLine, defaults as defaultControls} from '../src/ol/control.js';
 
 const layers = [
   new TileLayer({
@@ -11,23 +10,23 @@ const layers = [
       url: 'https://ahocevar.com/geoserver/wms',
       params: {
         'LAYERS': 'ne:NE1_HR_LC_SR_W_DR',
-        'TILED': true
+        'TILED': true,
-      }
+      },
-    })
+    }),
-  })
+  }),
 ];
 
 const map = new Map({
   controls: defaultControls().extend([
     new ScaleLine({
-      units: 'degrees'
+      units: 'degrees',
-    })
+    }),
   ]),
   layers: layers,
   target: 'map',
   view: new View({
     projection: 'EPSG:4326',
     center: [0, 0],
-    zoom: 2
+    zoom: 2,
-  })
+  }),
 });

examples/es2015-custom-element.js

@@ -1,10 +1,9 @@
 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 TileLayer from '../src/ol/layer/Tile.js';
+import View from '../src/ol/View.js';
 
 class OLComponent extends HTMLElement {
-
   constructor() {
     super();
     this.shadow = this.attachShadow({mode: 'open'});
@@ -28,15 +27,14 @@ class OLComponent extends HTMLElement {
       target: div,
       layers: [
         new TileLayer({
-          source: new OSM()
+          source: new OSM(),
-        })
+        }),
       ],
       view: new View({
         center: [0, 0],
-        zoom: 2
+        zoom: 2,
-      })
+      }),
     });
-
   }
 }
 

examples/export-map.js

@@ -1,48 +1,57 @@
+import GeoJSON from '../src/ol/format/GeoJSON.js';
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
-import GeoJSON from '../src/ol/format/GeoJSON.js';
-import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
 import {OSM, Vector as VectorSource} from '../src/ol/source.js';
+import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
 
 const map = new Map({
   layers: [
     new TileLayer({
-      source: new OSM()
+      source: new OSM(),
     }),
     new VectorLayer({
       source: new VectorSource({
         url: 'data/geojson/countries.geojson',
-        format: new GeoJSON()
+        format: new GeoJSON(),
       }),
-      opacity: 0.5
+      opacity: 0.5,
-    })
+    }),
   ],
   target: 'map',
   view: new View({
     center: [0, 0],
-    zoom: 2
+    zoom: 2,
-  })
+  }),
 });
 
-document.getElementById('export-png').addEventListener('click', function() {
+document.getElementById('export-png').addEventListener('click', function () {
-  map.once('rendercomplete', function() {
+  map.once('rendercomplete', function () {
     const mapCanvas = document.createElement('canvas');
     const size = map.getSize();
     mapCanvas.width = size[0];
     mapCanvas.height = size[1];
     const mapContext = mapCanvas.getContext('2d');
-    Array.prototype.forEach.call(document.querySelectorAll('.ol-layer canvas'), function(canvas) {
+    Array.prototype.forEach.call(
-      if (canvas.width > 0) {
+      document.querySelectorAll('.ol-layer canvas'),
-        const opacity = canvas.parentNode.style.opacity;
+      function (canvas) {
-        mapContext.globalAlpha = opacity === '' ? 1 : Number(opacity);
+        if (canvas.width > 0) {
-        const transform = canvas.style.transform;
+          const opacity = canvas.parentNode.style.opacity;
-        // Get the transform parameters from the style's transform matrix
+          mapContext.globalAlpha = opacity === '' ? 1 : Number(opacity);
-        const matrix = transform.match(/^matrix\(([^\(]*)\)$/)[1].split(',').map(Number);
+          const transform = canvas.style.transform;
-        // Apply the transform to the export map context
+          // Get the transform parameters from the style's transform matrix
-        CanvasRenderingContext2D.prototype.setTransform.apply(mapContext, matrix);
+          const matrix = transform
-        mapContext.drawImage(canvas, 0, 0);
+            .match(/^matrix\(([^\(]*)\)$/)[1]
+            .split(',')
+            .map(Number);
+          // Apply the transform to the export map context
+          CanvasRenderingContext2D.prototype.setTransform.apply(
+            mapContext,
+            matrix
+          );
+          mapContext.drawImage(canvas, 0, 0);
+        }
       }
-    });
+    );
     if (navigator.msSaveBlob) {
       // link download attribuute does not work on MS browsers
       navigator.msSaveBlob(mapCanvas.msToBlob(), 'map.png');

examples/export-pdf.js

@@ -1,94 +1,110 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
 import WKT from '../src/ol/format/WKT.js';
-import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
 import {OSM, Vector as VectorSource} from '../src/ol/source.js';
+import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
 
 const raster = new TileLayer({
-  source: new OSM()
+  source: new OSM(),
 });
 
 const format = new WKT();
 const feature = format.readFeature(
   'POLYGON((10.689697265625 -25.0927734375, 34.595947265625 ' +
-        '-20.1708984375, 38.814697265625 -35.6396484375, 13.502197265625 ' +
+    '-20.1708984375, 38.814697265625 -35.6396484375, 13.502197265625 ' +
-        '-39.1552734375, 10.689697265625 -25.0927734375))');
+    '-39.1552734375, 10.689697265625 -25.0927734375))'
+);
 feature.getGeometry().transform('EPSG:4326', 'EPSG:3857');
 
 const vector = new VectorLayer({
   source: new VectorSource({
-    features: [feature]
+    features: [feature],
   }),
-  opacity: 0.5
+  opacity: 0.5,
 });
 
-
 const map = new Map({
   layers: [raster, vector],
   target: 'map',
   view: new View({
     center: [0, 0],
-    zoom: 2
+    zoom: 2,
-  })
+  }),
 });
 
-
 const dims = {
   a0: [1189, 841],
   a1: [841, 594],
   a2: [594, 420],
   a3: [420, 297],
   a4: [297, 210],
-  a5: [210, 148]
+  a5: [210, 148],
 };
 
-
 const exportButton = document.getElementById('export-pdf');
 
-exportButton.addEventListener('click', function() {
+exportButton.addEventListener(
+  'click',
+  function () {
+    exportButton.disabled = true;
+    document.body.style.cursor = 'progress';
 
-  exportButton.disabled = true;
+    const format = document.getElementById('format').value;
-  document.body.style.cursor = 'progress';
+    const resolution = document.getElementById('resolution').value;
+    const dim = dims[format];
+    const width = Math.round((dim[0] * resolution) / 25.4);
+    const height = Math.round((dim[1] * resolution) / 25.4);
+    const size = map.getSize();
+    const viewResolution = map.getView().getResolution();
 
-  const format = document.getElementById('format').value;
+    map.once('rendercomplete', function () {
-  const resolution = document.getElementById('resolution').value;
+      const mapCanvas = document.createElement('canvas');
-  const dim = dims[format];
+      mapCanvas.width = width;
-  const width = Math.round(dim[0] * resolution / 25.4);
+      mapCanvas.height = height;
-  const height = Math.round(dim[1] * resolution / 25.4);
+      const mapContext = mapCanvas.getContext('2d');
-  const size = map.getSize();
+      Array.prototype.forEach.call(
-  const viewResolution = map.getView().getResolution();
+        document.querySelectorAll('.ol-layer canvas'),
-
+        function (canvas) {
-  map.once('rendercomplete', function() {
+          if (canvas.width > 0) {
-    const mapCanvas = document.createElement('canvas');
+            const opacity = canvas.parentNode.style.opacity;
-    mapCanvas.width = width;
+            mapContext.globalAlpha = opacity === '' ? 1 : Number(opacity);
-    mapCanvas.height = height;
+            const transform = canvas.style.transform;
-    const mapContext = mapCanvas.getContext('2d');
+            // Get the transform parameters from the style's transform matrix
-    Array.prototype.forEach.call(document.querySelectorAll('.ol-layer canvas'), function(canvas) {
+            const matrix = transform
-      if (canvas.width > 0) {
+              .match(/^matrix\(([^\(]*)\)$/)[1]
-        const opacity = canvas.parentNode.style.opacity;
+              .split(',')
-        mapContext.globalAlpha = opacity === '' ? 1 : Number(opacity);
+              .map(Number);
-        const transform = canvas.style.transform;
+            // Apply the transform to the export map context
-        // Get the transform parameters from the style's transform matrix
+            CanvasRenderingContext2D.prototype.setTransform.apply(
-        const matrix = transform.match(/^matrix\(([^\(]*)\)$/)[1].split(',').map(Number);
+              mapContext,
-        // Apply the transform to the export map context
+              matrix
-        CanvasRenderingContext2D.prototype.setTransform.apply(mapContext, matrix);
+            );
-        mapContext.drawImage(canvas, 0, 0);
+            mapContext.drawImage(canvas, 0, 0);
-      }
+          }
+        }
+      );
+      const pdf = new jsPDF('landscape', undefined, format);
+      pdf.addImage(
+        mapCanvas.toDataURL('image/jpeg'),
+        'JPEG',
+        0,
+        0,
+        dim[0],
+        dim[1]
+      );
+      pdf.save('map.pdf');
+      // Reset original map size
+      map.setSize(size);
+      map.getView().setResolution(viewResolution);
+      exportButton.disabled = false;
+      document.body.style.cursor = 'auto';
     });
-    const pdf = new jsPDF('landscape', undefined, format);
-    pdf.addImage(mapCanvas.toDataURL('image/jpeg'), 'JPEG', 0, 0, dim[0], dim[1]);
-    pdf.save('map.pdf');
-    // Reset original map size
-    map.setSize(size);
-    map.getView().setResolution(viewResolution);
-    exportButton.disabled = false;
-    document.body.style.cursor = 'auto';
-  });
 
-  // Set print size
+    // Set print size
-  const printSize = [width, height];
+    const printSize = [width, height];
-  map.setSize(printSize);
+    map.setSize(printSize);
-  const scaling = Math.min(width / size[0], height / size[1]);
+    const scaling = Math.min(width / size[0], height / size[1]);
-  map.getView().setResolution(viewResolution / scaling);
+    map.getView().setResolution(viewResolution / scaling);
-
+  },
-}, false);
+  false
+);

examples/extent-constrained.js

@@ -1,25 +1,24 @@
 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 {defaults as defaultControls} from '../src/ol/control.js';
+import TileLayer from '../src/ol/layer/Tile.js';
+import View from '../src/ol/View.js';
 import ZoomSlider from '../src/ol/control/ZoomSlider.js';
+import {defaults as defaultControls} from '../src/ol/control.js';
 
 const view = new View({
   center: [328627.563458, 5921296.662223],
   zoom: 8,
-  extent: [-572513.341856, 5211017.966314,
+  extent: [-572513.341856, 5211017.966314, 916327.095083, 6636950.728974],
-    916327.095083, 6636950.728974]
 });
 
 new Map({
   layers: [
     new TileLayer({
-      source: new OSM()
+      source: new OSM(),
-    })
+    }),
   ],
   keyboardEventTarget: document,
   target: 'map',
   view: view,
-  controls: defaultControls().extend([new ZoomSlider()])
+  controls: defaultControls().extend([new ZoomSlider()]),
 });

examples/extent-interaction.js

@@ -1,29 +1,29 @@
+import ExtentInteraction from '../src/ol/interaction/Extent.js';
+import GeoJSON from '../src/ol/format/GeoJSON.js';
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
-import GeoJSON from '../src/ol/format/GeoJSON.js';
-import ExtentInteraction from '../src/ol/interaction/Extent.js';
-import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
 import {OSM, Vector as VectorSource} from '../src/ol/source.js';
+import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
 
 const vectorSource = new VectorSource({
   url: 'data/geojson/countries.geojson',
-  format: new GeoJSON()
+  format: new GeoJSON(),
 });
 
 const map = new Map({
   layers: [
     new TileLayer({
-      source: new OSM()
+      source: new OSM(),
     }),
     new VectorLayer({
-      source: vectorSource
+      source: vectorSource,
-    })
+    }),
   ],
   target: 'map',
   view: new View({
     center: [0, 0],
-    zoom: 2
+    zoom: 2,
-  })
+  }),
 });
 
 const extent = new ExtentInteraction();
@@ -31,12 +31,12 @@ map.addInteraction(extent);
 extent.setActive(false);
 
 //Enable interaction by holding shift
-window.addEventListener('keydown', function(event) {
+window.addEventListener('keydown', function (event) {
   if (event.keyCode == 16) {
     extent.setActive(true);
   }
 });
-window.addEventListener('keyup', function(event) {
+window.addEventListener('keyup', function (event) {
   if (event.keyCode == 16) {
     extent.setActive(false);
   }

examples/feature-animation.js

@@ -1,19 +1,19 @@
 import Feature from '../src/ol/Feature.js';
 import Map from '../src/ol/Map.js';
-import {unByKey} from '../src/ol/Observable.js';
-import View from '../src/ol/View.js';
-import {easeOut} from '../src/ol/easing.js';
 import Point from '../src/ol/geom/Point.js';
-import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
+import View from '../src/ol/View.js';
-import {fromLonLat} from '../src/ol/proj.js';
-import {OSM, Vector as VectorSource} from '../src/ol/source.js';
 import {Circle as CircleStyle, Stroke, Style} from '../src/ol/style.js';
+import {OSM, Vector as VectorSource} from '../src/ol/source.js';
+import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
+import {easeOut} from '../src/ol/easing.js';
+import {fromLonLat} from '../src/ol/proj.js';
 import {getVectorContext} from '../src/ol/render.js';
+import {unByKey} from '../src/ol/Observable.js';
 
 const tileLayer = new TileLayer({
   source: new OSM({
-    wrapX: false
+    wrapX: false,
-  })
+  }),
 });
 
 const map = new Map({
@@ -22,15 +22,15 @@ const map = new Map({
   view: new View({
     center: [0, 0],
     zoom: 1,
-    multiWorld: true
+    multiWorld: true,
-  })
+  }),
 });
 
 const source = new VectorSource({
-  wrapX: false
+  wrapX: false,
 });
 const vector = new VectorLayer({
-  source: source
+  source: source,
 });
 map.addLayer(vector);
 
@@ -62,9 +62,9 @@ function flash(feature) {
         radius: radius,
         stroke: new Stroke({
           color: 'rgba(255, 0, 0, ' + opacity + ')',
-          width: 0.25 + opacity
+          width: 0.25 + opacity,
-        })
+        }),
-      })
+      }),
     });
 
     vectorContext.setStyle(style);
@@ -78,7 +78,7 @@ function flash(feature) {
   }
 }
 
-source.on('addfeature', function(e) {
+source.on('addfeature', function (e) {
   flash(e.feature);
 });
 

examples/feature-move-animation.js

@@ -1,12 +1,18 @@
 import Feature from '../src/ol/Feature.js';
 import Map from '../src/ol/Map.js';
-import View from '../src/ol/View.js';
-import Polyline from '../src/ol/format/Polyline.js';
 import Point from '../src/ol/geom/Point.js';
-import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
+import Polyline from '../src/ol/format/Polyline.js';
-import XYZ from '../src/ol/source/XYZ.js';
 import VectorSource from '../src/ol/source/Vector.js';
-import {Circle as CircleStyle, Fill, Icon, Stroke, Style} from '../src/ol/style.js';
+import View from '../src/ol/View.js';
+import XYZ from '../src/ol/source/XYZ.js';
+import {
+  Circle as CircleStyle,
+  Fill,
+  Icon,
+  Stroke,
+  Style,
+} from '../src/ol/style.js';
+import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
 import {getVectorContext} from '../src/ol/render.js';
 
 // This long string is placed here due to jsFiddle limitations.
@@ -50,14 +56,16 @@ const polyline = [
   'ab@`CuOlC}YnAcV`@_^m@aeB}@yk@YuTuBg^uCkZiGk\\yGeY}Lu_@oOsZiTe[uWi[sl@',
   'mo@soAauAsrBgzBqgAglAyd@ig@asAcyAklA}qAwHkGi{@s~@goAmsAyDeEirB_{B}IsJ',
   'uEeFymAssAkdAmhAyTcVkFeEoKiH}l@kp@wg@sj@ku@ey@uh@kj@}EsFmG}Jk^_r@_f@m',
-  '~@ym@yjA??a@cFd@kBrCgDbAUnAcBhAyAdk@et@??kF}D??OL'
+  '~@ym@yjA??a@cFd@kBrCgDbAUnAcBhAyAdk@et@??kF}D??OL',
 ].join('');
 
-const route = /** @type {import("../src/ol/geom/LineString.js").default} */ (new Polyline({
+const route = /** @type {import("../src/ol/geom/LineString.js").default} */ (new Polyline(
-  factor: 1e6
+  {
-}).readGeometry(polyline, {
+    factor: 1e6,
+  }
+).readGeometry(polyline, {
   dataProjection: 'EPSG:4326',
-  featureProjection: 'EPSG:3857'
+  featureProjection: 'EPSG:3857',
 }));
 
 const routeCoords = route.getCoordinates();
@@ -65,42 +73,46 @@ const routeLength = routeCoords.length;
 
 const routeFeature = new Feature({
   type: 'route',
-  geometry: route
+  geometry: route,
 });
-const geoMarker = /** @type Feature<import("../src/ol/geom/Point").default> */(new Feature({
+const geoMarker = /** @type Feature<import("../src/ol/geom/Point").default> */ (new Feature(
-  type: 'geoMarker',
+  {
-  geometry: new Point(routeCoords[0])
+    type: 'geoMarker',
-}));
+    geometry: new Point(routeCoords[0]),
+  }
+));
 const startMarker = new Feature({
   type: 'icon',
-  geometry: new Point(routeCoords[0])
+  geometry: new Point(routeCoords[0]),
 });
 const endMarker = new Feature({
   type: 'icon',
-  geometry: new Point(routeCoords[routeLength - 1])
+  geometry: new Point(routeCoords[routeLength - 1]),
 });
 
 const styles = {
   'route': new Style({
     stroke: new Stroke({
-      width: 6, color: [237, 212, 0, 0.8]
+      width: 6,
-    })
+      color: [237, 212, 0, 0.8],
+    }),
   }),
   'icon': new Style({
     image: new Icon({
       anchor: [0.5, 1],
-      src: 'data/icon.png'
+      src: 'data/icon.png',
-    })
+    }),
   }),
   'geoMarker': new Style({
     image: new CircleStyle({
       radius: 7,
       fill: new Fill({color: 'black'}),
       stroke: new Stroke({
-        color: 'white', width: 2
+        color: 'white',
-      })
+        width: 2,
-    })
+      }),
-  })
+    }),
+  }),
 };
 
 let animating = false;
@@ -110,19 +122,20 @@ const startButton = document.getElementById('start-animation');
 
 const vectorLayer = new VectorLayer({
   source: new VectorSource({
-    features: [routeFeature, geoMarker, startMarker, endMarker]
+    features: [routeFeature, geoMarker, startMarker, endMarker],
   }),
-  style: function(feature) {
+  style: function (feature) {
     // hide geoMarker if animation is active
     if (animating && feature.get('type') === 'geoMarker') {
       return null;
     }
     return styles[feature.get('type')];
-  }
+  },
 });
 
 const key = 'get_your_own_D6rA4zTHduk6KOKTXzGB';
-const attributions = '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> ' +
+const attributions =
+  '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> ' +
   '<a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>';
 
 const center = [-5639523.95, -3501274.52];
@@ -132,21 +145,21 @@ const map = new Map({
     center: center,
     zoom: 10,
     minZoom: 2,
-    maxZoom: 19
+    maxZoom: 19,
   }),
   layers: [
     new TileLayer({
       source: new XYZ({
         attributions: attributions,
         url: 'https://api.maptiler.com/maps/hybrid/{z}/{x}/{y}.jpg?key=' + key,
-        tileSize: 512
+        tileSize: 512,
-      })
+      }),
     }),
-    vectorLayer
+    vectorLayer,
-  ]
+  ],
 });
 
-const moveFeature = function(event) {
+const moveFeature = function (event) {
   const vectorContext = getVectorContext(event);
   const frameState = event.frameState;
 
@@ -154,7 +167,7 @@ const moveFeature = function(event) {
     const elapsedTime = frameState.time - now;
     // here the trick to increase speed is to jump some indexes
     // on lineString coordinates
-    const index = Math.round(speed * elapsedTime / 1000);
+    const index = Math.round((speed * elapsedTime) / 1000);
 
     if (index >= routeLength) {
       stopAnimation(true);
@@ -186,7 +199,6 @@ function startAnimation() {
   }
 }
 
-
 /**
  * @param {boolean} ended end of animation.
  */

examples/filter-points-webgl.js

@@ -1,61 +1,54 @@
-import Map from '../src/ol/Map.js';
-import View from '../src/ol/View.js';
-import TileLayer from '../src/ol/layer/Tile.js';
 import Feature from '../src/ol/Feature.js';
+import Map from '../src/ol/Map.js';
 import Point from '../src/ol/geom/Point.js';
+import Stamen from '../src/ol/source/Stamen.js';
+import TileLayer from '../src/ol/layer/Tile.js';
+import View from '../src/ol/View.js';
+import WebGLPointsLayer from '../src/ol/layer/WebGLPoints.js';
 import {Vector} from '../src/ol/source.js';
 import {fromLonLat} from '../src/ol/proj.js';
-import Stamen from '../src/ol/source/Stamen.js';
-import WebGLPointsLayer from '../src/ol/layer/WebGLPoints.js';
 
 const vectorSource = new Vector({
-  attributions: 'NASA'
+  attributions: 'NASA',
 });
 
 const oldColor = 'rgba(242,56,22,0.61)';
 const newColor = '#ffe52c';
 const period = 12; // animation period in seconds
-const animRatio =
+const animRatio = [
-  ['^',
+  '^',
-    ['/',
+  [
-      ['%',
+    '/',
-        ['+',
+    [
-          ['time'],
+      '%',
-          [
+      [
-            'interpolate',
+        '+',
-            ['linear'],
+        ['time'],
-            ['get', 'year'],
+        ['interpolate', ['linear'], ['get', 'year'], 1850, 0, 2015, period],
-            1850, 0,
-            2015, period
-          ]
-        ],
-        period
       ],
-      period
+      period,
     ],
-    0.5
+    period,
-  ];
+  ],
+  0.5,
+];
 
 const style = {
   variables: {
     minYear: 1850,
-    maxYear: 2015
+    maxYear: 2015,
   },
   filter: ['between', ['get', 'year'], ['var', 'minYear'], ['var', 'maxYear']],
   symbol: {
     symbolType: 'circle',
-    size: ['*',
+    size: [
+      '*',
       ['interpolate', ['linear'], ['get', 'mass'], 0, 8, 200000, 26],
-      ['-', 1.75, ['*', animRatio, 0.75]]
+      ['-', 1.75, ['*', animRatio, 0.75]],
     ],
-    color: ['interpolate',
+    color: ['interpolate', ['linear'], animRatio, 0, newColor, 1, oldColor],
-      ['linear'],
+    opacity: ['-', 1.0, ['*', animRatio, 0.75]],
-      animRatio,
+  },
-      0, newColor,
-      1, oldColor
-    ],
-    opacity: ['-', 1.0, ['*', animRatio, 0.75]]
-  }
 };
 
 // handle input values & events
@@ -85,7 +78,7 @@ updateStatusText();
 // load data
 const client = new XMLHttpRequest();
 client.open('GET', 'data/csv/meteorite_landings.csv');
-client.onload = function() {
+client.onload = function () {
   const csv = client.responseText;
   const features = [];
 
@@ -102,11 +95,13 @@ client.onload = function() {
       continue;
     }
 
-    features.push(new Feature({
+    features.push(
-      mass: parseFloat(line[1]) || 0,
+      new Feature({
-      year: parseInt(line[2]) || 0,
+        mass: parseFloat(line[1]) || 0,
-      geometry: new Point(coords)
+        year: parseInt(line[2]) || 0,
-    }));
+        geometry: new Point(coords),
+      })
+    );
   }
 
   vectorSource.addFeatures(features);
@@ -117,20 +112,20 @@ const map = new Map({
   layers: [
     new TileLayer({
       source: new Stamen({
-        layer: 'toner'
+        layer: 'toner',
-      })
+      }),
     }),
     new WebGLPointsLayer({
       style: style,
       source: vectorSource,
-      disableHitDetection: true
+      disableHitDetection: true,
-    })
+    }),
   ],
   target: document.getElementById('map'),
   view: new View({
     center: [0, 0],
-    zoom: 2
+    zoom: 2,
-  })
+  }),
 });
 
 // animate the map

examples/flight-animation.js

@@ -1,79 +1,81 @@
 import Feature from '../src/ol/Feature.js';
-import Map from '../src/ol/Map.js';
-import View from '../src/ol/View.js';
 import LineString from '../src/ol/geom/LineString.js';
-import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
+import Map from '../src/ol/Map.js';
 import Stamen from '../src/ol/source/Stamen.js';
 import VectorSource from '../src/ol/source/Vector.js';
+import View from '../src/ol/View.js';
 import {Stroke, Style} from '../src/ol/style.js';
+import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
 import {getVectorContext} from '../src/ol/render.js';
 
 const tileLayer = new TileLayer({
   source: new Stamen({
-    layer: 'toner'
+    layer: 'toner',
-  })
+  }),
 });
 
 const map = new Map({
-  layers: [
+  layers: [tileLayer],
-    tileLayer
-  ],
   target: 'map',
   view: new View({
     center: [0, 0],
-    zoom: 2
+    zoom: 2,
-  })
+  }),
 });
 
 const style = new Style({
   stroke: new Stroke({
     color: '#EAE911',
-    width: 2
+    width: 2,
-  })
+  }),
 });
 
 const flightsSource = new VectorSource({
   wrapX: false,
-  attributions: 'Flight data by ' +
+  attributions:
-        '<a href="http://openflights.org/data.html">OpenFlights</a>,',
+    'Flight data by ' +
-  loader: function() {
+    '<a href="http://openflights.org/data.html">OpenFlights</a>,',
+  loader: function () {
     const url = 'data/openflights/flights.json';
-    fetch(url).then(function(response) {
+    fetch(url)
-      return response.json();
+      .then(function (response) {
-    }).then(function(json) {
+        return response.json();
-      const flightsData = json.flights;
+      })
-      for (let i = 0; i < flightsData.length; i++) {
+      .then(function (json) {
-        const flight = flightsData[i];
+        const flightsData = json.flights;
-        const from = flight[0];
+        for (let i = 0; i < flightsData.length; i++) {
-        const to = flight[1];
+          const flight = flightsData[i];
+          const from = flight[0];
+          const to = flight[1];
 
-        // create an arc circle between the two locations
+          // create an arc circle between the two locations
-        const arcGenerator = new arc.GreatCircle(
+          const arcGenerator = new arc.GreatCircle(
-          {x: from[1], y: from[0]},
+            {x: from[1], y: from[0]},
-          {x: to[1], y: to[0]});
+            {x: to[1], y: to[0]}
+          );
 
-        const arcLine = arcGenerator.Arc(100, {offset: 10});
+          const arcLine = arcGenerator.Arc(100, {offset: 10});
-        if (arcLine.geometries.length === 1) {
+          if (arcLine.geometries.length === 1) {
-          const line = new LineString(arcLine.geometries[0].coords);
+            const line = new LineString(arcLine.geometries[0].coords);
-          line.transform('EPSG:4326', 'EPSG:3857');
+            line.transform('EPSG:4326', 'EPSG:3857');
 
-          const feature = new Feature({
+            const feature = new Feature({
-            geometry: line,
+              geometry: line,
-            finished: false
+              finished: false,
-          });
+            });
-          // add the feature with a delay so that the animation
+            // add the feature with a delay so that the animation
-          // for all features does not start at the same time
+            // for all features does not start at the same time
-          addLater(feature, i * 50);
+            addLater(feature, i * 50);
+          }
         }
-      }
+        tileLayer.on('postrender', animateFlights);
-      tileLayer.on('postrender', animateFlights);
+      });
-    });
+  },
-  }
 });
 
 const flightsLayer = new VectorLayer({
   source: flightsSource,
-  style: function(feature) {
+  style: function (feature) {
     // if the animation is still active for a feature, do not
     // render the feature with the layer style
     if (feature.get('finished')) {
@@ -81,7 +83,7 @@ const flightsLayer = new VectorLayer({
     } else {
       return null;
     }
-  }
+  },
 });
 
 map.addLayer(flightsLayer);
@@ -117,7 +119,7 @@ function animateFlights(event) {
 }
 
 function addLater(feature, timeout) {
-  window.setTimeout(function() {
+  window.setTimeout(function () {
     feature.set('start', new Date().getTime());
     flightsSource.addFeature(feature);
   }, timeout);

examples/fractal.js

@@ -1,9 +1,9 @@
 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 Map from '../src/ol/Map.js';
 import VectorLayer from '../src/ol/layer/Vector.js';
 import VectorSource from '../src/ol/source/Vector.js';
+import View from '../src/ol/View.js';
 
 const radius = 10e6;
 const cos30 = Math.cos(Math.PI / 6);
@@ -12,15 +12,18 @@ const rise = radius * sin30;
 const run = radius * cos30;
 
 const triangle = new LineString([
-  [0, radius], [run, -rise], [-run, -rise], [0, radius]
+  [0, radius],
+  [run, -rise],
+  [-run, -rise],
+  [0, radius],
 ]);
 
 const feature = new Feature(triangle);
 
 const layer = new VectorLayer({
   source: new VectorSource({
-    features: [feature]
+    features: [feature],
-  })
+  }),
 });
 
 const map = new Map({
@@ -28,8 +31,8 @@ const map = new Map({
   target: 'map',
   view: new View({
     center: [0, 0],
-    zoom: 1
+    zoom: 1,
-  })
+  }),
 });
 
 function makeFractal(depth) {
@@ -59,19 +62,19 @@ function injectNodes(startNode) {
 
   // first point at 1/3 along the segment
   const firstNode = {
-    point: [start[0] + dx / 3, start[1] + dy / 3]
+    point: [start[0] + dx / 3, start[1] + dy / 3],
   };
 
   // second point at peak of _/\_
   const r = Math.sqrt(dx * dx + dy * dy) / (2 * cos30);
   const a = Math.atan2(dy, dx) + Math.PI / 6;
   const secondNode = {
-    point: [start[0] + r * Math.cos(a), start[1] + r * Math.sin(a)]
+    point: [start[0] + r * Math.cos(a), start[1] + r * Math.sin(a)],
   };
 
   // third point at 2/3 along the segment
   const thirdNode = {
-    point: [end[0] - dx / 3, end[1] - dy / 3]
+    point: [end[0] - dx / 3, end[1] - dy / 3],
   };
 
   startNode.next = firstNode;
@@ -80,15 +83,14 @@ function injectNodes(startNode) {
   thirdNode.next = endNode;
 }
 
-
 function coordsToGraph(coordinates) {
   const graph = {
-    point: coordinates[0]
+    point: coordinates[0],
   };
   const length = coordinates.length;
   for (let level = 0, node = graph; level < length - 1; ++level) {
     node.next = {
-      point: coordinates[level + 1]
+      point: coordinates[level + 1],
     };
     node = node.next;
   }
@@ -111,12 +113,11 @@ function update() {
 
 let updateTimer;
 
-
 /**
  * Regenerate fractal on depth change.  Change events are debounced so updates
  * only occur every 200ms.
  */
-depthInput.onchange = function() {
+depthInput.onchange = function () {
   window.clearTimeout(updateTimer);
   updateTimer = window.setTimeout(update, 200);
 };

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

@@ -1,35 +1,35 @@
 import Map from '../src/ol/Map.js';
-import View from '../src/ol/View.js';
-import {defaults as defaultControls, FullScreen} from '../src/ol/control.js';
-import {defaults as defaultInteractions, DragRotateAndZoom} from '../src/ol/interaction.js';
 import TileLayer from '../src/ol/layer/Tile.js';
+import View from '../src/ol/View.js';
 import XYZ from '../src/ol/source/XYZ.js';
-
+import {
+  DragRotateAndZoom,
+  defaults as defaultInteractions,
+} from '../src/ol/interaction.js';
+import {FullScreen, defaults as defaultControls} from '../src/ol/control.js';
 
 const key = 'get_your_own_D6rA4zTHduk6KOKTXzGB';
-const attributions = '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> ' +
+const attributions =
+  '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> ' +
   '<a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>';
 
 const map = new Map({
-  controls: defaultControls().extend([
+  controls: defaultControls().extend([new FullScreen()]),
-    new FullScreen()
+  interactions: defaultInteractions().extend([new DragRotateAndZoom()]),
-  ]),
-  interactions: defaultInteractions().extend([
-    new DragRotateAndZoom()
-  ]),
   layers: [
     new TileLayer({
       source: new XYZ({
         attributions: attributions,
-        url: 'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=' + key,
+        url:
-        maxZoom: 20
+          'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=' + key,
-      })
+        maxZoom: 20,
-    })
+      }),
+    }),
   ],
   target: 'map',
   view: new View({
     center: [-33519607, 5616436],
     rotation: -Math.PI / 8,
-    zoom: 8
+    zoom: 8,
-  })
+  }),
 });

examples/full-screen-source.js

@@ -1,26 +1,25 @@
 import Map from '../src/ol/Map.js';
-import View from '../src/ol/View.js';
-import {defaults as defaultControls, FullScreen} from '../src/ol/control.js';
-import TileLayer from '../src/ol/layer/Tile.js';
 import OSM from '../src/ol/source/OSM.js';
-
+import TileLayer from '../src/ol/layer/Tile.js';
+import View from '../src/ol/View.js';
+import {FullScreen, defaults as defaultControls} from '../src/ol/control.js';
 
 const view = new View({
   center: [-9101767, 2822912],
-  zoom: 14
+  zoom: 14,
 });
 
 const map = new Map({
   controls: defaultControls().extend([
     new FullScreen({
-      source: 'fullscreen'
+      source: 'fullscreen',
-    })
+    }),
   ]),
   layers: [
     new TileLayer({
-      source: new OSM()
+      source: new OSM(),
-    })
+    }),
   ],
   target: 'map',
-  view: view
+  view: view,
 });

examples/full-screen.js

@@ -1,32 +1,31 @@
 import Map from '../src/ol/Map.js';
-import View from '../src/ol/View.js';
-import {defaults as defaultControls, FullScreen} from '../src/ol/control.js';
 import TileLayer from '../src/ol/layer/Tile.js';
+import View from '../src/ol/View.js';
 import XYZ from '../src/ol/source/XYZ.js';
-
+import {FullScreen, defaults as defaultControls} from '../src/ol/control.js';
 
 const view = new View({
   center: [-9101767, 2822912],
-  zoom: 14
+  zoom: 14,
 });
 
 const key = 'get_your_own_D6rA4zTHduk6KOKTXzGB';
-const attributions = '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> ' +
+const attributions =
+  '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> ' +
   '<a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>';
 
 const map = new Map({
-  controls: defaultControls().extend([
+  controls: defaultControls().extend([new FullScreen()]),
-    new FullScreen()
-  ]),
   layers: [
     new TileLayer({
       source: new XYZ({
         attributions: attributions,
-        url: 'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=' + key,
+        url:
-        maxZoom: 20
+          'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=' + key,
-      })
+        maxZoom: 20,
-    })
+      }),
+    }),
   ],
   target: 'map',
-  view: view
+  view: view,
 });

examples/geographic.js

@@ -1,9 +1,9 @@
-import {useGeographic} from '../src/ol/proj.js';
+import {Circle, Fill, Style} from '../src/ol/style.js';
-import {Map, View, Feature, Overlay} from '../src/ol/index.js';
+import {Feature, Map, Overlay, View} from '../src/ol/index.js';
-import {Point} from '../src/ol/geom.js';
-import {Vector as VectorLayer, Tile as TileLayer} from '../src/ol/layer.js';
 import {OSM, Vector as VectorSource} from '../src/ol/source.js';
-import {Style, Circle, Fill} from '../src/ol/style.js';
+import {Point} from '../src/ol/geom.js';
+import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
+import {useGeographic} from '../src/ol/proj.js';
 
 useGeographic();
 
@@ -15,26 +15,24 @@ const map = new Map({
   target: 'map',
   view: new View({
     center: place,
-    zoom: 8
+    zoom: 8,
   }),
   layers: [
     new TileLayer({
-      source: new OSM()
+      source: new OSM(),
     }),
     new VectorLayer({
       source: new VectorSource({
-        features: [
+        features: [new Feature(point)],
-          new Feature(point)
-        ]
       }),
       style: new Style({
         image: new Circle({
           radius: 9,
-          fill: new Fill({color: 'red'})
+          fill: new Fill({color: 'red'}),
-        })
+        }),
-      })
+      }),
-    })
+    }),
-  ]
+  ],
 });
 
 const element = document.getElementById('popup');
@@ -43,7 +41,7 @@ const popup = new Overlay({
   element: element,
   positioning: 'bottom-center',
   stopEvent: false,
-  offset: [0, -10]
+  offset: [0, -10],
 });
 map.addOverlay(popup);
 
@@ -58,13 +56,13 @@ function formatCoordinate(coordinate) {
 }
 
 const info = document.getElementById('info');
-map.on('moveend', function() {
+map.on('moveend', function () {
   const view = map.getView();
   const center = view.getCenter();
   info.innerHTML = formatCoordinate(center);
 });
 
-map.on('click', function(event) {
+map.on('click', function (event) {
   const feature = map.getFeaturesAtPixel(event.pixel)[0];
   if (feature) {
     const coordinate = feature.getGeometry().getCoordinates();
@@ -72,7 +70,7 @@ map.on('click', function(event) {
     $(element).popover({
       placement: 'top',
       html: true,
-      content: formatCoordinate(coordinate)
+      content: formatCoordinate(coordinate),
     });
     $(element).popover('show');
   } else {
@@ -80,7 +78,7 @@ map.on('click', function(event) {
   }
 });
 
-map.on('pointermove', function(event) {
+map.on('pointermove', function (event) {
   if (map.hasFeatureAtPixel(event.pixel)) {
     map.getViewport().style.cursor = 'pointer';
   } else {

examples/geojson-vt.js

@@ -1,13 +1,16 @@
-import Map from '../src/ol/Map.js';
-import View from '../src/ol/View.js';
 import GeoJSON from '../src/ol/format/GeoJSON.js';
+import Map from '../src/ol/Map.js';
 import OSM from '../src/ol/source/OSM.js';
-import VectorTileSource from '../src/ol/source/VectorTile.js';
-import {Tile as TileLayer, VectorTile as VectorTileLayer} from '../src/ol/layer.js';
 import Projection from '../src/ol/proj/Projection.js';
+import VectorTileSource from '../src/ol/source/VectorTile.js';
+import View from '../src/ol/View.js';
+import {
+  Tile as TileLayer,
+  VectorTile as VectorTileLayer,
+} from '../src/ol/layer.js';
 
 // Converts geojson-vt data to GeoJSON
-const replacer = function(key, value) {
+const replacer = function (key, value) {
   if (value.geometry) {
     let type;
     const rawType = value.type;
@@ -37,9 +40,9 @@ const replacer = function(key, value) {
       'type': 'Feature',
       'geometry': {
         'type': type,
-        'coordinates': geometry
+        'coordinates': geometry,
       },
-      'properties': value.tags
+      'properties': value.tags,
     };
   } else {
     return value;
@@ -49,44 +52,53 @@ const replacer = function(key, value) {
 const map = new Map({
   layers: [
     new TileLayer({
-      source: new OSM()
+      source: new OSM(),
-    })
+    }),
   ],
   target: 'map',
   view: new View({
     center: [0, 0],
-    zoom: 2
+    zoom: 2,
-  })
+  }),
 });
 
 const url = 'data/geojson/countries.geojson';
-fetch(url).then(function(response) {
+fetch(url)
-  return response.json();
+  .then(function (response) {
-}).then(function(json) {
+    return response.json();
-  const tileIndex = geojsonvt(json, {
+  })
-    extent: 4096,
+  .then(function (json) {
-    debug: 1
+    const tileIndex = geojsonvt(json, {
+      extent: 4096,
+      debug: 1,
+    });
+    const vectorSource = new VectorTileSource({
+      format: new GeoJSON({
+        // Data returned from geojson-vt is in tile pixel units
+        dataProjection: new Projection({
+          code: 'TILE_PIXELS',
+          units: 'tile-pixels',
+          extent: [0, 0, 4096, 4096],
+        }),
+      }),
+      tileUrlFunction: function (tileCoord) {
+        const data = tileIndex.getTile(
+          tileCoord[0],
+          tileCoord[1],
+          tileCoord[2]
+        );
+        const geojson = JSON.stringify(
+          {
+            type: 'FeatureCollection',
+            features: data ? data.features : [],
+          },
+          replacer
+        );
+        return 'data:application/json;charset=UTF-8,' + geojson;
+      },
+    });
+    const vectorLayer = new VectorTileLayer({
+      source: vectorSource,
+    });
+    map.addLayer(vectorLayer);
   });
-  const vectorSource = new VectorTileSource({
-    format: new GeoJSON({
-      // Data returned from geojson-vt is in tile pixel units
-      dataProjection: new Projection({
-        code: 'TILE_PIXELS',
-        units: 'tile-pixels',
-        extent: [0, 0, 4096, 4096]
-      })
-    }),
-    tileUrlFunction: function(tileCoord) {
-      const data = tileIndex.getTile(tileCoord[0], tileCoord[1], tileCoord[2]);
-      const geojson = JSON.stringify({
-        type: 'FeatureCollection',
-        features: data ? data.features : []
-      }, replacer);
-      return 'data:application/json;charset=UTF-8,' + geojson;
-    }
-  });
-  const vectorLayer = new VectorTileLayer({
-    source: vectorSource
-  });
-  map.addLayer(vectorLayer);
-});

examples/geojson.js

@@ -1,85 +1,84 @@
+import Circle from '../src/ol/geom/Circle.js';
 import Feature from '../src/ol/Feature.js';
+import GeoJSON from '../src/ol/format/GeoJSON.js';
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
-import GeoJSON from '../src/ol/format/GeoJSON.js';
-import Circle from '../src/ol/geom/Circle.js';
-import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
-import {OSM, Vector as VectorSource} from '../src/ol/source.js';
 import {Circle as CircleStyle, Fill, Stroke, Style} from '../src/ol/style.js';
-
+import {OSM, Vector as VectorSource} from '../src/ol/source.js';
+import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
 
 const image = new CircleStyle({
   radius: 5,
   fill: null,
-  stroke: new Stroke({color: 'red', width: 1})
+  stroke: new Stroke({color: 'red', width: 1}),
 });
 
 const styles = {
   'Point': new Style({
-    image: image
+    image: image,
   }),
   'LineString': new Style({
     stroke: new Stroke({
       color: 'green',
-      width: 1
+      width: 1,
-    })
+    }),
   }),
   'MultiLineString': new Style({
     stroke: new Stroke({
       color: 'green',
-      width: 1
+      width: 1,
-    })
+    }),
   }),
   'MultiPoint': new Style({
-    image: image
+    image: image,
   }),
   'MultiPolygon': new Style({
     stroke: new Stroke({
       color: 'yellow',
-      width: 1
+      width: 1,
     }),
     fill: new Fill({
-      color: 'rgba(255, 255, 0, 0.1)'
+      color: 'rgba(255, 255, 0, 0.1)',
-    })
+    }),
   }),
   'Polygon': new Style({
     stroke: new Stroke({
       color: 'blue',
       lineDash: [4],
-      width: 3
+      width: 3,
     }),
     fill: new Fill({
-      color: 'rgba(0, 0, 255, 0.1)'
+      color: 'rgba(0, 0, 255, 0.1)',
-    })
+    }),
   }),
   'GeometryCollection': new Style({
     stroke: new Stroke({
       color: 'magenta',
-      width: 2
+      width: 2,
     }),
     fill: new Fill({
-      color: 'magenta'
+      color: 'magenta',
     }),
     image: new CircleStyle({
       radius: 10,
       fill: null,
       stroke: new Stroke({
-        color: 'magenta'
+        color: 'magenta',
-      })
+      }),
-    })
+    }),
   }),
   'Circle': new Style({
     stroke: new Stroke({
       color: 'red',
-      width: 2
+      width: 2,
     }),
     fill: new Fill({
-      color: 'rgba(255,0,0,0.2)'
+      color: 'rgba(255,0,0,0.2)',
-    })
+    }),
-  })
+  }),
 };
 
-const styleFunction = function(feature) {
+const styleFunction = function (feature) {
   return styles[feature.getGeometry().getType()];
 };
 
@@ -88,93 +87,159 @@ const geojsonObject = {
   'crs': {
     'type': 'name',
     'properties': {
-      'name': 'EPSG:3857'
+      'name': 'EPSG:3857',
-    }
+    },
   },
-  'features': [{
+  'features': [
-    'type': 'Feature',
+    {
-    'geometry': {
+      'type': 'Feature',
-      'type': 'Point',
+      'geometry': {
-      'coordinates': [0, 0]
-    }
-  }, {
-    'type': 'Feature',
-    'geometry': {
-      'type': 'LineString',
-      'coordinates': [[4e6, -2e6], [8e6, 2e6]]
-    }
-  }, {
-    'type': 'Feature',
-    'geometry': {
-      'type': 'LineString',
-      'coordinates': [[4e6, 2e6], [8e6, -2e6]]
-    }
-  }, {
-    'type': 'Feature',
-    'geometry': {
-      'type': 'Polygon',
-      'coordinates': [[[-5e6, -1e6], [-4e6, 1e6], [-3e6, -1e6]]]
-    }
-  }, {
-    'type': 'Feature',
-    'geometry': {
-      'type': 'MultiLineString',
-      'coordinates': [
-        [[-1e6, -7.5e5], [-1e6, 7.5e5]],
-        [[1e6, -7.5e5], [1e6, 7.5e5]],
-        [[-7.5e5, -1e6], [7.5e5, -1e6]],
-        [[-7.5e5, 1e6], [7.5e5, 1e6]]
-      ]
-    }
-  }, {
-    'type': 'Feature',
-    'geometry': {
-      'type': 'MultiPolygon',
-      'coordinates': [
-        [[[-5e6, 6e6], [-5e6, 8e6], [-3e6, 8e6], [-3e6, 6e6]]],
-        [[[-2e6, 6e6], [-2e6, 8e6], [0, 8e6], [0, 6e6]]],
-        [[[1e6, 6e6], [1e6, 8e6], [3e6, 8e6], [3e6, 6e6]]]
-      ]
-    }
-  }, {
-    'type': 'Feature',
-    'geometry': {
-      'type': 'GeometryCollection',
-      'geometries': [{
-        'type': 'LineString',
-        'coordinates': [[-5e6, -5e6], [0, -5e6]]
-      }, {
         'type': 'Point',
-        'coordinates': [4e6, -5e6]
+        'coordinates': [0, 0],
-      }, {
+      },
+    },
+    {
+      'type': 'Feature',
+      'geometry': {
+        'type': 'LineString',
+        'coordinates': [
+          [4e6, -2e6],
+          [8e6, 2e6],
+        ],
+      },
+    },
+    {
+      'type': 'Feature',
+      'geometry': {
+        'type': 'LineString',
+        'coordinates': [
+          [4e6, 2e6],
+          [8e6, -2e6],
+        ],
+      },
+    },
+    {
+      'type': 'Feature',
+      'geometry': {
         'type': 'Polygon',
-        'coordinates': [[[1e6, -6e6], [2e6, -4e6], [3e6, -6e6]]]
+        'coordinates': [
-      }]
+          [
-    }
+            [-5e6, -1e6],
-  }]
+            [-4e6, 1e6],
+            [-3e6, -1e6],
+          ],
+        ],
+      },
+    },
+    {
+      'type': 'Feature',
+      'geometry': {
+        'type': 'MultiLineString',
+        'coordinates': [
+          [
+            [-1e6, -7.5e5],
+            [-1e6, 7.5e5],
+          ],
+          [
+            [1e6, -7.5e5],
+            [1e6, 7.5e5],
+          ],
+          [
+            [-7.5e5, -1e6],
+            [7.5e5, -1e6],
+          ],
+          [
+            [-7.5e5, 1e6],
+            [7.5e5, 1e6],
+          ],
+        ],
+      },
+    },
+    {
+      'type': 'Feature',
+      'geometry': {
+        'type': 'MultiPolygon',
+        'coordinates': [
+          [
+            [
+              [-5e6, 6e6],
+              [-5e6, 8e6],
+              [-3e6, 8e6],
+              [-3e6, 6e6],
+            ],
+          ],
+          [
+            [
+              [-2e6, 6e6],
+              [-2e6, 8e6],
+              [0, 8e6],
+              [0, 6e6],
+            ],
+          ],
+          [
+            [
+              [1e6, 6e6],
+              [1e6, 8e6],
+              [3e6, 8e6],
+              [3e6, 6e6],
+            ],
+          ],
+        ],
+      },
+    },
+    {
+      'type': 'Feature',
+      'geometry': {
+        'type': 'GeometryCollection',
+        'geometries': [
+          {
+            'type': 'LineString',
+            'coordinates': [
+              [-5e6, -5e6],
+              [0, -5e6],
+            ],
+          },
+          {
+            'type': 'Point',
+            'coordinates': [4e6, -5e6],
+          },
+          {
+            'type': 'Polygon',
+            'coordinates': [
+              [
+                [1e6, -6e6],
+                [2e6, -4e6],
+                [3e6, -6e6],
+              ],
+            ],
+          },
+        ],
+      },
+    },
+  ],
 };
 
 const vectorSource = new VectorSource({
-  features: (new GeoJSON()).readFeatures(geojsonObject)
+  features: new GeoJSON().readFeatures(geojsonObject),
 });
 
 vectorSource.addFeature(new Feature(new Circle([5e6, 7e6], 1e6)));
 
 const vectorLayer = new VectorLayer({
   source: vectorSource,
-  style: styleFunction
+  style: styleFunction,
 });
 
 const map = new Map({
   layers: [
     new TileLayer({
-      source: new OSM()
+      source: new OSM(),
     }),
-    vectorLayer
+    vectorLayer,
   ],
   target: 'map',
   view: new View({
     center: [0, 0],
-    zoom: 2
+    zoom: 2,
-  })
+  }),
 });

examples/geolocation-orientation.js

@@ -1,27 +1,27 @@
 import Geolocation from '../src/ol/Geolocation.js';
-import Map from '../src/ol/Map.js';
-import Overlay from '../src/ol/Overlay.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 Map from '../src/ol/Map.js';
-import {fromLonLat} from '../src/ol/proj.js';
 import OSM from '../src/ol/source/OSM.js';
+import Overlay from '../src/ol/Overlay.js';
+import TileLayer from '../src/ol/layer/Tile.js';
+import View from '../src/ol/View.js';
+import {fromLonLat} from '../src/ol/proj.js';
 
 // creating the view
 const view = new View({
   center: fromLonLat([5.8713, 45.6452]),
-  zoom: 19
+  zoom: 19,
 });
 
 const tileLayer = new TileLayer({
-  source: new OSM()
+  source: new OSM(),
 });
 
 // creating the map
 const map = new Map({
   layers: [tileLayer],
   target: 'map',
-  view: view
+  view: view,
 });
 
 // Geolocation marker
@@ -29,7 +29,7 @@ const markerEl = document.getElementById('geolocation_marker');
 const marker = new Overlay({
   positioning: 'center-center',
   element: markerEl,
-  stopEvent: false
+  stopEvent: false,
 });
 map.addOverlay(marker);
 
@@ -44,14 +44,14 @@ const geolocation = new Geolocation({
   trackingOptions: {
     maximumAge: 10000,
     enableHighAccuracy: true,
-    timeout: 600000
+    timeout: 600000,
-  }
+  },
 });
 
 let deltaMean = 500; // the geolocation sampling period mean in ms
 
 // Listen to position changes
-geolocation.on('change', function() {
+geolocation.on('change', function () {
   const position = geolocation.getPosition();
   const accuracy = geolocation.getAccuracy();
   const heading = geolocation.getHeading() || 0;
@@ -71,27 +71,27 @@ geolocation.on('change', function() {
     'Accuracy: ' + accuracy,
     'Heading: ' + Math.round(radToDeg(heading)) + '°',
     'Speed: ' + (speed * 3.6).toFixed(1) + ' km/h',
-    'Delta: ' + Math.round(deltaMean) + 'ms'
+    'Delta: ' + Math.round(deltaMean) + 'ms',
   ].join('<br />');
   document.getElementById('info').innerHTML = html;
 });
 
-geolocation.on('error', function() {
+geolocation.on('error', function () {
   alert('geolocation error');
   // FIXME we should remove the coordinates in positions
 });
 
 // convert radians to degrees
 function radToDeg(rad) {
-  return rad * 360 / (Math.PI * 2);
+  return (rad * 360) / (Math.PI * 2);
 }
 // convert degrees to radians
 function degToRad(deg) {
-  return deg * Math.PI * 2 / 360;
+  return (deg * Math.PI * 2) / 360;
 }
 // modulo for negative values
 function mod(n) {
-  return ((n % (2 * Math.PI)) + (2 * Math.PI)) % (2 * Math.PI);
+  return ((n % (2 * Math.PI)) + 2 * Math.PI) % (2 * Math.PI);
 }
 
 function addPosition(position, heading, m, speed) {
@@ -105,7 +105,7 @@ function addPosition(position, heading, m, speed) {
 
     // force the rotation change to be less than 180°
     if (Math.abs(headingDiff) > Math.PI) {
-      const sign = (headingDiff >= 0) ? 1 : -1;
+      const sign = headingDiff >= 0 ? 1 : -1;
       headingDiff = -sign * (2 * Math.PI - Math.abs(headingDiff));
     }
     heading = prevHeading + headingDiff;
@@ -130,8 +130,8 @@ function getCenterWithHeading(position, rotation, resolution) {
   const height = size[1];
 
   return [
-    position[0] - Math.sin(rotation) * height * resolution * 1 / 4,
+    position[0] - (Math.sin(rotation) * height * resolution * 1) / 4,
-    position[1] + Math.cos(rotation) * height * resolution * 1 / 4
+    position[1] + (Math.cos(rotation) * height * resolution * 1) / 4,
   ];
 }
 
@@ -153,56 +153,63 @@ function updateView() {
 
 // geolocate device
 const geolocateBtn = document.getElementById('geolocate');
-geolocateBtn.addEventListener('click', function() {
+geolocateBtn.addEventListener(
-  geolocation.setTracking(true); // Start position tracking
+  'click',
+  function () {
+    geolocation.setTracking(true); // Start position tracking
 
-  tileLayer.on('postrender', updateView);
+    tileLayer.on('postrender', updateView);
-  map.render();
+    map.render();
 
-  disableButtons();
+    disableButtons();
-}, false);
+  },
+  false
+);
 
 // simulate device move
 let simulationData;
 const client = new XMLHttpRequest();
 client.open('GET', 'data/geolocation-orientation.json');
 
-
 /**
  * Handle data loading.
  */
-client.onload = function() {
+client.onload = function () {
   simulationData = JSON.parse(client.responseText).data;
 };
 client.send();
 
 const simulateBtn = document.getElementById('simulate');
-simulateBtn.addEventListener('click', function() {
+simulateBtn.addEventListener(
-  const coordinates = simulationData;
+  'click',
+  function () {
+    const coordinates = simulationData;
 
-  const first = coordinates.shift();
+    const first = coordinates.shift();
-  simulatePositionChange(first);
+    simulatePositionChange(first);
 
-  let prevDate = first.timestamp;
+    let prevDate = first.timestamp;
-  function geolocate() {
+    function geolocate() {
-    const position = coordinates.shift();
+      const position = coordinates.shift();
-    if (!position) {
+      if (!position) {
-      return;
+        return;
+      }
+      const newDate = position.timestamp;
+      simulatePositionChange(position);
+      window.setTimeout(function () {
+        prevDate = newDate;
+        geolocate();
+      }, (newDate - prevDate) / 0.5);
     }
-    const newDate = position.timestamp;
+    geolocate();
-    simulatePositionChange(position);
-    window.setTimeout(function() {
-      prevDate = newDate;
-      geolocate();
-    }, (newDate - prevDate) / 0.5);
-  }
-  geolocate();
 
-  tileLayer.on('postrender', updateView);
+    tileLayer.on('postrender', updateView);
-  map.render();
+    map.render();
 
-  disableButtons();
+    disableButtons();
-}, false);
+  },
+  false
+);
 
 function simulatePositionChange(position) {
   const coords = position.coords;

examples/geolocation.js

@@ -1,45 +1,45 @@
 import Feature from '../src/ol/Feature.js';
 import Geolocation from '../src/ol/Geolocation.js';
 import Map from '../src/ol/Map.js';
-import View from '../src/ol/View.js';
 import Point from '../src/ol/geom/Point.js';
-import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
+import View from '../src/ol/View.js';
-import {OSM, Vector as VectorSource} from '../src/ol/source.js';
 import {Circle as CircleStyle, Fill, Stroke, Style} from '../src/ol/style.js';
+import {OSM, Vector as VectorSource} from '../src/ol/source.js';
+import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
 
 const view = new View({
   center: [0, 0],
-  zoom: 2
+  zoom: 2,
 });
 
 const map = new Map({
   layers: [
     new TileLayer({
-      source: new OSM()
+      source: new OSM(),
-    })
+    }),
   ],
   target: 'map',
-  view: view
+  view: view,
 });
 
 const geolocation = new Geolocation({
   // enableHighAccuracy must be set to true to have the heading value.
   trackingOptions: {
-    enableHighAccuracy: true
+    enableHighAccuracy: true,
   },
-  projection: view.getProjection()
+  projection: view.getProjection(),
 });
 
 function el(id) {
   return document.getElementById(id);
 }
 
-el('track').addEventListener('change', function() {
+el('track').addEventListener('change', function () {
   geolocation.setTracking(this.checked);
 });
 
 // update the HTML page when the position changes.
-geolocation.on('change', function() {
+geolocation.on('change', function () {
   el('accuracy').innerText = geolocation.getAccuracy() + ' [m]';
   el('altitude').innerText = geolocation.getAltitude() + ' [m]';
   el('altitudeAccuracy').innerText = geolocation.getAltitudeAccuracy() + ' [m]';
@@ -48,40 +48,41 @@ geolocation.on('change', function() {
 });
 
 // handle geolocation error.
-geolocation.on('error', function(error) {
+geolocation.on('error', function (error) {
   const info = document.getElementById('info');
   info.innerHTML = error.message;
   info.style.display = '';
 });
 
 const accuracyFeature = new Feature();
-geolocation.on('change:accuracyGeometry', function() {
+geolocation.on('change:accuracyGeometry', function () {
   accuracyFeature.setGeometry(geolocation.getAccuracyGeometry());
 });
 
 const positionFeature = new Feature();
-positionFeature.setStyle(new Style({
+positionFeature.setStyle(
-  image: new CircleStyle({
+  new Style({
-    radius: 6,
+    image: new CircleStyle({
-    fill: new Fill({
+      radius: 6,
-      color: '#3399CC'
+      fill: new Fill({
+        color: '#3399CC',
+      }),
+      stroke: new Stroke({
+        color: '#fff',
+        width: 2,
+      }),
     }),
-    stroke: new Stroke({
-      color: '#fff',
-      width: 2
-    })
   })
-}));
+);
 
-geolocation.on('change:position', function() {
+geolocation.on('change:position', function () {
   const coordinates = geolocation.getPosition();
-  positionFeature.setGeometry(coordinates ?
+  positionFeature.setGeometry(coordinates ? new Point(coordinates) : null);
-    new Point(coordinates) : null);
 });
 
 new VectorLayer({
   map: map,
   source: new VectorSource({
-    features: [accuracyFeature, positionFeature]
+    features: [accuracyFeature, positionFeature],
-  })
+  }),
 });

examples/getfeatureinfo-image.js

@@ -1,37 +1,39 @@
-import Map from '../src/ol/Map.js';
-import View from '../src/ol/View.js';
 import ImageLayer from '../src/ol/layer/Image.js';
 import ImageWMS from '../src/ol/source/ImageWMS.js';
-
+import Map from '../src/ol/Map.js';
+import View from '../src/ol/View.js';
 
 const wmsSource = new ImageWMS({
   url: 'https://ahocevar.com/geoserver/wms',
   params: {'LAYERS': 'ne:ne'},
   serverType: 'geoserver',
-  crossOrigin: 'anonymous'
+  crossOrigin: 'anonymous',
 });
 
 const wmsLayer = new ImageLayer({
-  source: wmsSource
+  source: wmsSource,
 });
 
 const view = new View({
   center: [0, 0],
-  zoom: 1
+  zoom: 1,
 });
 
 const map = new Map({
   layers: [wmsLayer],
   target: 'map',
-  view: view
+  view: view,
 });
 
-map.on('singleclick', function(evt) {
+map.on('singleclick', function (evt) {
   document.getElementById('info').innerHTML = '';
   const viewResolution = /** @type {number} */ (view.getResolution());
   const url = wmsSource.getFeatureInfoUrl(
-    evt.coordinate, viewResolution, 'EPSG:3857',
+    evt.coordinate,
-    {'INFO_FORMAT': 'text/html'});
+    viewResolution,
+    'EPSG:3857',
+    {'INFO_FORMAT': 'text/html'}
+  );
   if (url) {
     fetch(url)
       .then((response) => response.text())
@@ -41,12 +43,12 @@ map.on('singleclick', function(evt) {
   }
 });
 
-map.on('pointermove', function(evt) {
+map.on('pointermove', function (evt) {
   if (evt.dragging) {
     return;
   }
   const pixel = map.getEventPixel(evt.originalEvent);
-  const hit = map.forEachLayerAtPixel(pixel, function() {
+  const hit = map.forEachLayerAtPixel(pixel, function () {
     return true;
   });
   map.getTargetElement().style.cursor = hit ? 'pointer' : '';

examples/getfeatureinfo-layers.js

@@ -1,23 +1,27 @@
 import WMSGetFeatureInfo from '../src/ol/format/WMSGetFeatureInfo.js';
 
-fetch('data/wmsgetfeatureinfo/osm-restaurant-hotel.xml').then(function(response) {
+fetch('data/wmsgetfeatureinfo/osm-restaurant-hotel.xml')
-  return response.text();
+  .then(function (response) {
-}).then(function(response) {
+    return response.text();
+  })
+  .then(function (response) {
+    // this is the standard way to read the features
+    const allFeatures = new WMSGetFeatureInfo().readFeatures(response);
+    document.getElementById('all').innerText = allFeatures.length.toString();
 
-  // this is the standard way to read the features
+    // when specifying the 'layers' options, only the features of those
-  const allFeatures = new WMSGetFeatureInfo().readFeatures(response);
+    // layers are returned by the format
-  document.getElementById('all').innerText = allFeatures.length.toString();
+    const hotelFeatures = new WMSGetFeatureInfo({
+      layers: ['hotel'],
+    }).readFeatures(response);
+    document.getElementById(
+      'hotel'
+    ).innerText = hotelFeatures.length.toString();
 
-  // when specifying the 'layers' options, only the features of those
+    const restaurantFeatures = new WMSGetFeatureInfo({
-  // layers are returned by the format
+      layers: ['restaurant'],
-  const hotelFeatures = new WMSGetFeatureInfo({
+    }).readFeatures(response);
-    layers: ['hotel']
+    document.getElementById(
-  }).readFeatures(response);
+      'restaurant'
-  document.getElementById('hotel').innerText = hotelFeatures.length.toString();
+    ).innerText = restaurantFeatures.length.toString();
-
+  });
-  const restaurantFeatures = new WMSGetFeatureInfo({
-    layers: ['restaurant']
-  }).readFeatures(response);
-  document.getElementById('restaurant').innerText = restaurantFeatures.length.toString();
-
-});

examples/getfeatureinfo-tile.js

@@ -1,37 +1,39 @@
 import Map from '../src/ol/Map.js';
-import View from '../src/ol/View.js';
 import TileLayer from '../src/ol/layer/Tile.js';
 import TileWMS from '../src/ol/source/TileWMS.js';
-
+import View from '../src/ol/View.js';
 
 const wmsSource = new TileWMS({
   url: 'https://ahocevar.com/geoserver/wms',
   params: {'LAYERS': 'ne:ne', 'TILED': true},
   serverType: 'geoserver',
-  crossOrigin: 'anonymous'
+  crossOrigin: 'anonymous',
 });
 
 const wmsLayer = new TileLayer({
-  source: wmsSource
+  source: wmsSource,
 });
 
 const view = new View({
   center: [0, 0],
-  zoom: 1
+  zoom: 1,
 });
 
 const map = new Map({
   layers: [wmsLayer],
   target: 'map',
-  view: view
+  view: view,
 });
 
-map.on('singleclick', function(evt) {
+map.on('singleclick', function (evt) {
   document.getElementById('info').innerHTML = '';
   const viewResolution = /** @type {number} */ (view.getResolution());
   const url = wmsSource.getFeatureInfoUrl(
-    evt.coordinate, viewResolution, 'EPSG:3857',
+    evt.coordinate,
-    {'INFO_FORMAT': 'text/html'});
+    viewResolution,
+    'EPSG:3857',
+    {'INFO_FORMAT': 'text/html'}
+  );
   if (url) {
     fetch(url)
       .then((response) => response.text())
@@ -41,12 +43,12 @@ map.on('singleclick', function(evt) {
   }
 });
 
-map.on('pointermove', function(evt) {
+map.on('pointermove', function (evt) {
   if (evt.dragging) {
     return;
   }
   const pixel = map.getEventPixel(evt.originalEvent);
-  const hit = map.forEachLayerAtPixel(pixel, function() {
+  const hit = map.forEachLayerAtPixel(pixel, function () {
     return true;
   });
   map.getTargetElement().style.cursor = hit ? 'pointer' : '';

examples/gpx.js

@@ -1,58 +1,59 @@
-import Map from '../src/ol/Map.js';
-import View from '../src/ol/View.js';
 import GPX from '../src/ol/format/GPX.js';
-import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
+import Map from '../src/ol/Map.js';
-import XYZ from '../src/ol/source/XYZ.js';
 import VectorSource from '../src/ol/source/Vector.js';
+import View from '../src/ol/View.js';
+import XYZ from '../src/ol/source/XYZ.js';
 import {Circle as CircleStyle, Fill, Stroke, Style} from '../src/ol/style.js';
+import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
 
 const key = 'get_your_own_D6rA4zTHduk6KOKTXzGB';
-const attributions = '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> ' +
+const attributions =
+  '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> ' +
   '<a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>';
 
 const raster = new TileLayer({
   source: new XYZ({
     attributions: attributions,
     url: 'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=' + key,
-    maxZoom: 20
+    maxZoom: 20,
-  })
+  }),
 });
 
 const style = {
   'Point': new Style({
     image: new CircleStyle({
       fill: new Fill({
-        color: 'rgba(255,255,0,0.4)'
+        color: 'rgba(255,255,0,0.4)',
       }),
       radius: 5,
       stroke: new Stroke({
         color: '#ff0',
-        width: 1
+        width: 1,
-      })
+      }),
-    })
+    }),
   }),
   'LineString': new Style({
     stroke: new Stroke({
       color: '#f00',
-      width: 3
+      width: 3,
-    })
+    }),
   }),
   'MultiLineString': new Style({
     stroke: new Stroke({
       color: '#0f0',
-      width: 3
+      width: 3,
-    })
+    }),
-  })
+  }),
 };
 
 const vector = new VectorLayer({
   source: new VectorSource({
     url: 'data/gpx/fells_loop.gpx',
-    format: new GPX()
+    format: new GPX(),
   }),
-  style: function(feature) {
+  style: function (feature) {
     return style[feature.getGeometry().getType()];
-  }
+  },
 });
 
 const map = new Map({
@@ -60,13 +61,13 @@ const map = new Map({
   target: document.getElementById('map'),
   view: new View({
     center: [-7916041.528716288, 5228379.045749711],
-    zoom: 12
+    zoom: 12,
-  })
+  }),
 });
 
-const displayFeatureInfo = function(pixel) {
+const displayFeatureInfo = function (pixel) {
   const features = [];
-  map.forEachFeatureAtPixel(pixel, function(feature) {
+  map.forEachFeatureAtPixel(pixel, function (feature) {
     features.push(feature);
   });
   if (features.length > 0) {
@@ -83,7 +84,7 @@ const displayFeatureInfo = function(pixel) {
   }
 };
 
-map.on('pointermove', function(evt) {
+map.on('pointermove', function (evt) {
   if (evt.dragging) {
     return;
   }
@@ -91,6 +92,6 @@ map.on('pointermove', function(evt) {
   displayFeatureInfo(pixel);
 });
 
-map.on('click', function(evt) {
+map.on('click', function (evt) {
   displayFeatureInfo(evt.pixel);
 });

examples/graticule.js

@@ -1,33 +1,32 @@
 import Graticule from '../src/ol/layer/Graticule.js';
 import Map from '../src/ol/Map.js';
-import View from '../src/ol/View.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 Stroke from '../src/ol/style/Stroke.js';
-
+import TileLayer from '../src/ol/layer/Tile.js';
+import View from '../src/ol/View.js';
+import {fromLonLat} from '../src/ol/proj.js';
 
 const map = new Map({
   layers: [
     new TileLayer({
       source: new OSM({
-        wrapX: false
+        wrapX: false,
-      })
+      }),
     }),
     new Graticule({
       // the style to use for the lines, optional.
       strokeStyle: new Stroke({
         color: 'rgba(255,120,0,0.9)',
         width: 2,
-        lineDash: [0.5, 4]
+        lineDash: [0.5, 4],
       }),
       showLabels: true,
-      wrapX: false
+      wrapX: false,
-    })
+    }),
   ],
   target: 'map',
   view: new View({
     center: fromLonLat([4.8, 47.75]),
-    zoom: 5
+    zoom: 5,
-  })
+  }),
 });

examples/heatmap-earthquakes.js

@@ -1,9 +1,9 @@
-import Map from '../src/ol/Map.js';
-import View from '../src/ol/View.js';
 import KML from '../src/ol/format/KML.js';
-import {Heatmap as HeatmapLayer, Tile as TileLayer} from '../src/ol/layer.js';
+import Map from '../src/ol/Map.js';
 import Stamen from '../src/ol/source/Stamen.js';
 import VectorSource from '../src/ol/source/Vector.js';
+import View from '../src/ol/View.js';
+import {Heatmap as HeatmapLayer, Tile as TileLayer} from '../src/ol/layer.js';
 
 const blur = document.getElementById('blur');
 const radius = document.getElementById('radius');
@@ -12,25 +12,25 @@ const vector = new HeatmapLayer({
   source: new VectorSource({
     url: 'data/kml/2012_Earthquakes_Mag5.kml',
     format: new KML({
-      extractStyles: false
+      extractStyles: false,
-    })
+    }),
   }),
   blur: parseInt(blur.value, 10),
   radius: parseInt(radius.value, 10),
-  weight: function(feature) {
+  weight: function (feature) {
     // 2012_Earthquakes_Mag5.kml stores the magnitude of each earthquake in a
     // standards-violating <magnitude> tag in each Placemark.  We extract it from
     // the Placemark's name instead.
     const name = feature.get('name');
     const magnitude = parseFloat(name.substr(2));
     return magnitude - 5;
-  }
+  },
 });
 
 const raster = new TileLayer({
   source: new Stamen({
-    layer: 'toner'
+    layer: 'toner',
-  })
+  }),
 });
 
 new Map({
@@ -38,17 +38,17 @@ new Map({
   target: 'map',
   view: new View({
     center: [0, 0],
-    zoom: 2
+    zoom: 2,
-  })
+  }),
 });
 
-const blurHandler = function() {
+const blurHandler = function () {
   vector.setBlur(parseInt(blur.value, 10));
 };
 blur.addEventListener('input', blurHandler);
 blur.addEventListener('change', blurHandler);
 
-const radiusHandler = function() {
+const radiusHandler = function () {
   vector.setRadius(parseInt(radius.value, 10));
 };
 radius.addEventListener('input', radiusHandler);

examples/here-maps.js

@@ -1,6 +1,6 @@
 import Map from '../src/ol/Map.js';
-import View from '../src/ol/View.js';
 import TileLayer from '../src/ol/layer/Tile.js';
+import View from '../src/ol/View.js';
 import XYZ from '../src/ol/source/XYZ.js';
 
 const appId = 'kDm0Jq1K4Ak7Bwtn8uvk';
@@ -11,60 +11,66 @@ const hereLayers = [
     type: 'maptile',
     scheme: 'normal.day',
     app_id: appId,
-    app_code: appCode
+    app_code: appCode,
   },
   {
     base: 'base',
     type: 'maptile',
     scheme: 'normal.day.transit',
     app_id: appId,
-    app_code: appCode
+    app_code: appCode,
   },
   {
     base: 'base',
     type: 'maptile',
     scheme: 'pedestrian.day',
     app_id: appId,
-    app_code: appCode
+    app_code: appCode,
   },
   {
     base: 'aerial',
     type: 'maptile',
     scheme: 'terrain.day',
     app_id: appId,
-    app_code: appCode
+    app_code: appCode,
   },
   {
     base: 'aerial',
     type: 'maptile',
     scheme: 'satellite.day',
     app_id: appId,
-    app_code: appCode
+    app_code: appCode,
   },
   {
     base: 'aerial',
     type: 'maptile',
     scheme: 'hybrid.day',
     app_id: appId,
-    app_code: appCode
+    app_code: appCode,
-  }
+  },
 ];
-const urlTpl = 'https://{1-4}.{base}.maps.cit.api.here.com' +
+const urlTpl =
+  'https://{1-4}.{base}.maps.cit.api.here.com' +
   '/{type}/2.1/maptile/newest/{scheme}/{z}/{x}/{y}/256/png' +
   '?app_id={app_id}&app_code={app_code}';
 const layers = [];
 let i, ii;
 for (i = 0, ii = hereLayers.length; i < ii; ++i) {
   const layerDesc = hereLayers[i];
-  layers.push(new TileLayer({
+  layers.push(
-    visible: false,
+    new TileLayer({
-    preload: Infinity,
+      visible: false,
-    source: new XYZ({
+      preload: Infinity,
-      url: createUrl(urlTpl, layerDesc),
+      source: new XYZ({
-      attributions: 'Map Tiles &copy; ' + new Date().getFullYear() + ' ' +
+        url: createUrl(urlTpl, layerDesc),
-        '<a href="http://developer.here.com">HERE</a>'
+        attributions:
+          'Map Tiles &copy; ' +
+          new Date().getFullYear() +
+          ' ' +
+          '<a href="http://developer.here.com">HERE</a>',
+      }),
     })
-  }));
+  );
 }
 
 const map = new Map({
@@ -72,8 +78,8 @@ const map = new Map({
   target: 'map',
   view: new View({
     center: [921371.9389, 6358337.7609],
-    zoom: 10
+    zoom: 10,
-  })
+  }),
 });
 
 function createUrl(tpl, layerDesc) {

examples/hit-tolerance.js

@@ -1,29 +1,34 @@
-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 Feature from '../src/ol/Feature.js';
 import LineString from '../src/ol/geom/LineString.js';
+import Map from '../src/ol/Map.js';
+import View from '../src/ol/View.js';
+import {OSM, Vector as VectorSource} from '../src/ol/source.js';
 import {Stroke, Style} from '../src/ol/style.js';
+import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
 
 const raster = new TileLayer({
-  source: new OSM()
+  source: new OSM(),
 });
 
 const style = new Style({
   stroke: new Stroke({
     color: 'black',
-    width: 1
+    width: 1,
-  })
+  }),
 });
 
-const feature = new Feature(new LineString([[-4000000, 0], [4000000, 0]]));
+const feature = new Feature(
+  new LineString([
+    [-4000000, 0],
+    [4000000, 0],
+  ])
+);
 
 const vector = new VectorLayer({
   source: new VectorSource({
-    features: [feature]
+    features: [feature],
   }),
-  style: style
+  style: style,
 });
 
 const map = new Map({
@@ -31,21 +36,25 @@ const map = new Map({
   target: 'map',
   view: new View({
     center: [0, 0],
-    zoom: 2
+    zoom: 2,
-  })
+  }),
 });
 
 let hitTolerance;
 
 const statusElement = document.getElementById('status');
 
-map.on('singleclick', function(e) {
+map.on('singleclick', function (e) {
   let hit = false;
-  map.forEachFeatureAtPixel(e.pixel, function() {
+  map.forEachFeatureAtPixel(
-    hit = true;
+    e.pixel,
-  }, {
+    function () {
-    hitTolerance: hitTolerance
+      hit = true;
-  });
+    },
+    {
+      hitTolerance: hitTolerance,
+    }
+  );
   if (hit) {
     style.getStroke().setColor('green');
     statusElement.innerHTML = ' A feature got hit!';
@@ -59,7 +68,7 @@ map.on('singleclick', function(e) {
 const selectHitToleranceElement = document.getElementById('hitTolerance');
 const circleCanvas = document.getElementById('circle');
 
-const changeHitTolerance = function() {
+const changeHitTolerance = function () {
   hitTolerance = parseInt(selectHitToleranceElement.value, 10);
 
   const size = 2 * hitTolerance + 2;
@@ -68,7 +77,13 @@ const changeHitTolerance = function() {
   const ctx = circleCanvas.getContext('2d');
   ctx.clearRect(0, 0, size, size);
   ctx.beginPath();
-  ctx.arc(hitTolerance + 1, hitTolerance + 1, hitTolerance + 0.5, 0, 2 * Math.PI);
+  ctx.arc(
+    hitTolerance + 1,
+    hitTolerance + 1,
+    hitTolerance + 0.5,
+    0,
+    2 * Math.PI
+  );
   ctx.fill();
   ctx.stroke();
 };

examples/hitdetect-vector.js

@@ -1,40 +1,39 @@
-import Map from '../src/ol/Map.js';
-import View from '../src/ol/View.js';
 import GeoJSON from '../src/ol/format/GeoJSON.js';
+import Map from '../src/ol/Map.js';
 import VectorLayer from '../src/ol/layer/Vector.js';
 import VectorSource from '../src/ol/source/Vector.js';
+import View from '../src/ol/View.js';
 import {Fill, Stroke, Style, Text} from '../src/ol/style.js';
 
-
 const style = new Style({
   fill: new Fill({
-    color: 'rgba(255, 255, 255, 0.6)'
+    color: 'rgba(255, 255, 255, 0.6)',
   }),
   stroke: new Stroke({
     color: '#319FD3',
-    width: 1
+    width: 1,
   }),
   text: new Text({
     font: '12px Calibri,sans-serif',
     fill: new Fill({
-      color: '#000'
+      color: '#000',
     }),
     stroke: new Stroke({
       color: '#fff',
-      width: 3
+      width: 3,
-    })
+    }),
-  })
+  }),
 });
 
 const vectorLayer = new VectorLayer({
   source: new VectorSource({
     url: 'data/geojson/countries.geojson',
-    format: new GeoJSON()
+    format: new GeoJSON(),
   }),
-  style: function(feature) {
+  style: function (feature) {
     style.getText().setText(feature.get('name'));
     return style;
-  }
+  },
 });
 
 const map = new Map({
@@ -42,43 +41,42 @@ const map = new Map({
   target: 'map',
   view: new View({
     center: [0, 0],
-    zoom: 1
+    zoom: 1,
-  })
+  }),
 });
 
 const highlightStyle = new Style({
   stroke: new Stroke({
     color: '#f00',
-    width: 1
+    width: 1,
   }),
   fill: new Fill({
-    color: 'rgba(255,0,0,0.1)'
+    color: 'rgba(255,0,0,0.1)',
   }),
   text: new Text({
     font: '12px Calibri,sans-serif',
     fill: new Fill({
-      color: '#000'
+      color: '#000',
     }),
     stroke: new Stroke({
       color: '#f00',
-      width: 3
+      width: 3,
-    })
+    }),
-  })
+  }),
 });
 
 const featureOverlay = new VectorLayer({
   source: new VectorSource(),
   map: map,
-  style: function(feature) {
+  style: function (feature) {
     highlightStyle.getText().setText(feature.get('name'));
     return highlightStyle;
-  }
+  },
 });
 
 let highlight;
-const displayFeatureInfo = function(pixel) {
+const displayFeatureInfo = function (pixel) {
-
+  vectorLayer.getFeatures(pixel).then(function (features) {
-  vectorLayer.getFeatures(pixel).then(function(features) {
     const feature = features.length ? features[0] : undefined;
     const info = document.getElementById('info');
     if (features.length) {
@@ -97,10 +95,9 @@ const displayFeatureInfo = function(pixel) {
       highlight = feature;
     }
   });
-
 };
 
-map.on('pointermove', function(evt) {
+map.on('pointermove', function (evt) {
   if (evt.dragging) {
     return;
   }
@@ -108,6 +105,6 @@ map.on('pointermove', function(evt) {
   displayFeatureInfo(pixel);
 });
 
-map.on('click', function(evt) {
+map.on('click', function (evt) {
   displayFeatureInfo(evt.pixel);
 });

examples/icon-color.js

@@ -1,72 +1,76 @@
 import Feature from '../src/ol/Feature.js';
 import Map from '../src/ol/Map.js';
-import View from '../src/ol/View.js';
 import Point from '../src/ol/geom/Point.js';
-import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
-import {fromLonLat} from '../src/ol/proj.js';
 import TileJSON from '../src/ol/source/TileJSON.js';
 import VectorSource from '../src/ol/source/Vector.js';
+import View from '../src/ol/View.js';
 import {Icon, Style} from '../src/ol/style.js';
-
+import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
+import {fromLonLat} from '../src/ol/proj.js';
 
 const rome = new Feature({
-  geometry: new Point(fromLonLat([12.5, 41.9]))
+  geometry: new Point(fromLonLat([12.5, 41.9])),
 });
 
 const london = new Feature({
-  geometry: new Point(fromLonLat([-0.12755, 51.507222]))
+  geometry: new Point(fromLonLat([-0.12755, 51.507222])),
 });
 
 const madrid = new Feature({
-  geometry: new Point(fromLonLat([-3.683333, 40.4]))
+  geometry: new Point(fromLonLat([-3.683333, 40.4])),
 });
 
-rome.setStyle(new Style({
+rome.setStyle(
-  image: new Icon({
+  new Style({
-    color: '#8959A8',
+    image: new Icon({
-    crossOrigin: 'anonymous',
+      color: '#8959A8',
-    imgSize: [20, 20],
+      crossOrigin: 'anonymous',
-    src: 'data/square.svg'
+      imgSize: [20, 20],
+      src: 'data/square.svg',
+    }),
   })
-}));
+);
 
-london.setStyle(new Style({
+london.setStyle(
-  image: new Icon({
+  new Style({
-    color: '#4271AE',
+    image: new Icon({
-    crossOrigin: 'anonymous',
+      color: '#4271AE',
-    src: 'data/dot.png'
+      crossOrigin: 'anonymous',
+      src: 'data/dot.png',
+    }),
   })
-}));
+);
 
-madrid.setStyle(new Style({
+madrid.setStyle(
-  image: new Icon({
+  new Style({
-    color: [113, 140, 0],
+    image: new Icon({
-    crossOrigin: 'anonymous',
+      color: [113, 140, 0],
-    src: 'data/dot.png'
+      crossOrigin: 'anonymous',
+      src: 'data/dot.png',
+    }),
   })
-}));
+);
-
 
 const vectorSource = new VectorSource({
-  features: [rome, london, madrid]
+  features: [rome, london, madrid],
 });
 
 const vectorLayer = new VectorLayer({
-  source: vectorSource
+  source: vectorSource,
 });
 
 const rasterLayer = new TileLayer({
   source: new TileJSON({
     url: 'https://a.tiles.mapbox.com/v3/aj.1x1-degrees.json',
-    crossOrigin: ''
+    crossOrigin: '',
-  })
+  }),
 });
 
 const map = new Map({
   layers: [rasterLayer, vectorLayer],
   target: document.getElementById('map'),
   view: new View({
-    center: fromLonLat([2.896372, 44.60240]),
+    center: fromLonLat([2.896372, 44.6024]),
-    zoom: 3
+    zoom: 3,
-  })
+  }),
 });

examples/icon-negative.js

@@ -1,13 +1,12 @@
 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 Select from '../src/ol/interaction/Select.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 View from '../src/ol/View.js';
 import {Icon, Style} from '../src/ol/style.js';
-
+import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
 
 function createStyle(src, img) {
   return new Style({
@@ -16,8 +15,8 @@ function createStyle(src, img) {
       crossOrigin: 'anonymous',
       src: src,
       img: img,
-      imgSize: img ? [img.width, img.height] : undefined
+      imgSize: img ? [img.width, img.height] : undefined,
-    })
+    }),
   });
 }
 
@@ -27,25 +26,25 @@ iconFeature.set('style', createStyle('data/icon.png', undefined));
 const map = new Map({
   layers: [
     new TileLayer({
-      source: new Stamen({layer: 'watercolor'})
+      source: new Stamen({layer: 'watercolor'}),
     }),
     new VectorLayer({
-      style: function(feature) {
+      style: function (feature) {
         return feature.get('style');
       },
-      source: new VectorSource({features: [iconFeature]})
+      source: new VectorSource({features: [iconFeature]}),
-    })
+    }),
   ],
   target: document.getElementById('map'),
   view: new View({
     center: [0, 0],
-    zoom: 3
+    zoom: 3,
-  })
+  }),
 });
 
 const selectStyle = {};
 const select = new Select({
-  style: function(feature) {
+  style: function (feature) {
     const image = feature.get('style').getImage().getImage();
     if (!selectStyle[image.src]) {
       const canvas = document.createElement('canvas');
@@ -62,11 +61,12 @@ const select = new Select({
       selectStyle[image.src] = createStyle(undefined, canvas);
     }
     return selectStyle[image.src];
-  }
+  },
 });
 map.addInteraction(select);
 
-map.on('pointermove', function(evt) {
+map.on('pointermove', function (evt) {
-  map.getTargetElement().style.cursor =
+  map.getTargetElement().style.cursor = map.hasFeatureAtPixel(evt.pixel)
-      map.hasFeatureAtPixel(evt.pixel) ? 'pointer' : '';
+    ? 'pointer'
+    : '';
 });

examples/icon-sprite-webgl.js

@@ -1,34 +1,37 @@
-import Map from '../src/ol/Map.js';
-import View from '../src/ol/View.js';
-import TileLayer from '../src/ol/layer/Tile.js';
-import TileJSON from '../src/ol/source/TileJSON.js';
 import Feature from '../src/ol/Feature.js';
+import Map from '../src/ol/Map.js';
 import Point from '../src/ol/geom/Point.js';
+import TileJSON from '../src/ol/source/TileJSON.js';
+import TileLayer from '../src/ol/layer/Tile.js';
+import View from '../src/ol/View.js';
+import WebGLPointsLayer from '../src/ol/layer/WebGLPoints.js';
 import {Vector} from '../src/ol/source.js';
 import {fromLonLat} from '../src/ol/proj.js';
-import WebGLPointsLayer from '../src/ol/layer/WebGLPoints.js';
 
-const key = 'pk.eyJ1IjoidHNjaGF1YiIsImEiOiJjaW5zYW5lNHkxMTNmdWttM3JyOHZtMmNtIn0.CDIBD8H-G2Gf-cPkIuWtRg';
+const key =
+  'pk.eyJ1IjoidHNjaGF1YiIsImEiOiJjaW5zYW5lNHkxMTNmdWttM3JyOHZtMmNtIn0.CDIBD8H-G2Gf-cPkIuWtRg';
 
 const map = new Map({
   layers: [
     new TileLayer({
       source: new TileJSON({
-        url: 'https://api.tiles.mapbox.com/v4/mapbox.world-dark.json?secure&access_token=' + key,
+        url:
-        crossOrigin: 'anonymous'
+          'https://api.tiles.mapbox.com/v4/mapbox.world-dark.json?secure&access_token=' +
-      })
+          key,
-    })
+        crossOrigin: 'anonymous',
+      }),
+    }),
   ],
   target: document.getElementById('map'),
   view: new View({
     center: [0, 4000000],
-    zoom: 2
+    zoom: 2,
-  })
+  }),
 });
 
 const vectorSource = new Vector({
   features: [],
-  attributions: 'National UFO Reporting Center'
+  attributions: 'National UFO Reporting Center',
 });
 
 const oldColor = [255, 160, 110];
@@ -37,13 +40,13 @@ const size = 16;
 
 const style = {
   variables: {
-    filterShape: 'all'
+    filterShape: 'all',
   },
   filter: [
     'case',
     ['!=', ['var', 'filterShape'], 'all'],
     ['==', ['get', 'shape'], ['var', 'filterShape']],
-    true
+    true,
   ],
   symbol: {
     symbolType: 'image',
@@ -53,44 +56,51 @@ const style = {
       'interpolate',
       ['linear'],
       ['get', 'year'],
-      1950, oldColor,
+      1950,
-      2013, newColor
+      oldColor,
+      2013,
+      newColor,
     ],
     rotateWithView: false,
-    offset: [
+    offset: [0, 0],
-      0,
-      0
-    ],
     textureCoord: [
       'match',
       ['get', 'shape'],
-      'light', [0, 0, 0.25, 0.5],
+      'light',
-      'sphere', [0.25, 0, 0.5, 0.5],
+      [0, 0, 0.25, 0.5],
-      'circle', [0.25, 0, 0.5, 0.5],
+      'sphere',
-      'disc', [0.5, 0, 0.75, 0.5],
+      [0.25, 0, 0.5, 0.5],
-      'oval', [0.5, 0, 0.75, 0.5],
+      'circle',
-      'triangle', [0.75, 0, 1, 0.5],
+      [0.25, 0, 0.5, 0.5],
-      'fireball', [0, 0.5, 0.25, 1],
+      'disc',
-      [0.75, 0.5, 1, 1]
+      [0.5, 0, 0.75, 0.5],
-    ]
+      'oval',
-  }
+      [0.5, 0, 0.75, 0.5],
+      'triangle',
+      [0.75, 0, 1, 0.5],
+      'fireball',
+      [0, 0.5, 0.25, 1],
+      [0.75, 0.5, 1, 1],
+    ],
+  },
 };
 
 // key is shape name, value is sightings count
 const shapeTypes = {
-  all: 0
+  all: 0,
 };
 const shapeSelect = document.getElementById('shape-filter');
-shapeSelect.addEventListener('input', function() {
+shapeSelect.addEventListener('input', function () {
-  style.variables.filterShape = shapeSelect.options[shapeSelect.selectedIndex].value;
+  style.variables.filterShape =
+    shapeSelect.options[shapeSelect.selectedIndex].value;
   map.render();
 });
 function fillShapeSelect() {
   Object.keys(shapeTypes)
-    .sort(function(a, b) {
+    .sort(function (a, b) {
       return shapeTypes[b] - shapeTypes[a];
     })
-    .forEach(function(shape) {
+    .forEach(function (shape) {
       const option = document.createElement('option');
       option.text = `${shape} (${shapeTypes[shape]} sightings)`;
       option.value = shape;
@@ -100,7 +110,7 @@ function fillShapeSelect() {
 
 const client = new XMLHttpRequest();
 client.open('GET', 'data/csv/ufo_sighting_data.csv');
-client.onload = function() {
+client.onload = function () {
   const csv = client.responseText;
   const features = [];
 
@@ -122,13 +132,15 @@ client.onload = function() {
     shapeTypes[shape] = (shapeTypes[shape] ? shapeTypes[shape] : 0) + 1;
     shapeTypes['all']++;
 
-    features.push(new Feature({
+    features.push(
-      datetime: line[0],
+      new Feature({
-      year: parseInt(/[0-9]{4}/.exec(line[0])[0]), // extract the year as int
+        datetime: line[0],
-      shape: shape,
+        year: parseInt(/[0-9]{4}/.exec(line[0])[0]), // extract the year as int
-      duration: line[3],
+        shape: shape,
-      geometry: new Point(coords)
+        duration: line[3],
-    }));
+        geometry: new Point(coords),
+      })
+    );
   }
   vectorSource.addFeatures(features);
   fillShapeSelect();
@@ -138,21 +150,28 @@ client.send();
 map.addLayer(
   new WebGLPointsLayer({
     source: vectorSource,
-    style: style
+    style: style,
   })
 );
 
 const info = document.getElementById('info');
-map.on('pointermove', function(evt) {
+map.on('pointermove', function (evt) {
   if (map.getView().getInteracting() || map.getView().getAnimating()) {
     return;
   }
   const pixel = evt.pixel;
   info.innerText = '';
-  map.forEachFeatureAtPixel(pixel, function(feature) {
+  map.forEachFeatureAtPixel(pixel, function (feature) {
     const datetime = feature.get('datetime');
     const duration = feature.get('duration');
     const shape = feature.get('shape');
-    info.innerText = 'On ' + datetime + ', lasted ' + duration + ' seconds and had a "' + shape + '" shape.';
+    info.innerText =
+      'On ' +
+      datetime +
+      ', lasted ' +
+      duration +
+      ' seconds and had a "' +
+      shape +
+      '" shape.';
   });
 });

examples/icon.js

@@ -1,19 +1,18 @@
 import Feature from '../src/ol/Feature.js';
 import Map from '../src/ol/Map.js';
 import Overlay from '../src/ol/Overlay.js';
-import View from '../src/ol/View.js';
 import Point from '../src/ol/geom/Point.js';
-import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
 import TileJSON from '../src/ol/source/TileJSON.js';
 import VectorSource from '../src/ol/source/Vector.js';
+import View from '../src/ol/View.js';
 import {Icon, Style} from '../src/ol/style.js';
-
+import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
 
 const iconFeature = new Feature({
   geometry: new Point([0, 0]),
   name: 'Null Island',
   population: 4000,
-  rainfall: 500
+  rainfall: 500,
 });
 
 const iconStyle = new Style({
@@ -21,25 +20,25 @@ const iconStyle = new Style({
     anchor: [0.5, 46],
     anchorXUnits: 'fraction',
     anchorYUnits: 'pixels',
-    src: 'data/icon.png'
+    src: 'data/icon.png',
-  })
+  }),
 });
 
 iconFeature.setStyle(iconStyle);
 
 const vectorSource = new VectorSource({
-  features: [iconFeature]
+  features: [iconFeature],
 });
 
 const vectorLayer = new VectorLayer({
-  source: vectorSource
+  source: vectorSource,
 });
 
 const rasterLayer = new TileLayer({
   source: new TileJSON({
     url: 'https://a.tiles.mapbox.com/v3/aj.1x1-degrees.json',
-    crossOrigin: ''
+    crossOrigin: '',
-  })
+  }),
 });
 
 const map = new Map({
@@ -47,8 +46,8 @@ const map = new Map({
   target: document.getElementById('map'),
   view: new View({
     center: [0, 0],
-    zoom: 3
+    zoom: 3,
-  })
+  }),
 });
 
 const element = document.getElementById('popup');
@@ -57,23 +56,22 @@ const popup = new Overlay({
   element: element,
   positioning: 'bottom-center',
   stopEvent: false,
-  offset: [0, -50]
+  offset: [0, -50],
 });
 map.addOverlay(popup);
 
 // display popup on click
-map.on('click', function(evt) {
+map.on('click', function (evt) {
-  const feature = map.forEachFeatureAtPixel(evt.pixel,
+  const feature = map.forEachFeatureAtPixel(evt.pixel, function (feature) {
-    function(feature) {
+    return feature;
-      return feature;
+  });
-    });
   if (feature) {
     const coordinates = feature.getGeometry().getCoordinates();
     popup.setPosition(coordinates);
     $(element).popover({
       placement: 'top',
       html: true,
-      content: feature.get('name')
+      content: feature.get('name'),
     });
     $(element).popover('show');
   } else {
@@ -82,7 +80,7 @@ map.on('click', function(evt) {
 });
 
 // change mouse cursor when over marker
-map.on('pointermove', function(e) {
+map.on('pointermove', function (e) {
   if (e.dragging) {
     $(element).popover('destroy');
     return;

examples/igc.js

@@ -1,33 +1,32 @@
 import Feature from '../src/ol/Feature.js';
-import Map from '../src/ol/Map.js';
-import View from '../src/ol/View.js';
 import IGC from '../src/ol/format/IGC.js';
-import {LineString, Point} from '../src/ol/geom.js';
+import Map from '../src/ol/Map.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 View from '../src/ol/View.js';
 import {Circle as CircleStyle, Fill, Stroke, Style} from '../src/ol/style.js';
+import {LineString, Point} from '../src/ol/geom.js';
+import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
 import {getVectorContext} from '../src/ol/render.js';
 
-
 const colors = {
   'Clement Latour': 'rgba(0, 0, 255, 0.7)',
   'Damien de Baesnt': 'rgba(0, 215, 255, 0.7)',
   'Sylvain Dhonneur': 'rgba(0, 165, 255, 0.7)',
   'Tom Payne': 'rgba(0, 255, 255, 0.7)',
-  'Ulrich Prinz': 'rgba(0, 215, 255, 0.7)'
+  'Ulrich Prinz': 'rgba(0, 215, 255, 0.7)',
 };
 
 const styleCache = {};
-const styleFunction = function(feature) {
+const styleFunction = function (feature) {
   const color = colors[feature.get('PLT')];
   let style = styleCache[color];
   if (!style) {
     style = new Style({
       stroke: new Stroke({
         color: color,
-        width: 3
+        width: 3,
-      })
+      }),
     });
     styleCache[color] = style;
   }
@@ -41,13 +40,13 @@ const igcUrls = [
   'data/igc/Damien-de-Baenst.igc',
   'data/igc/Sylvain-Dhonneur.igc',
   'data/igc/Tom-Payne.igc',
-  'data/igc/Ulrich-Prinz.igc'
+  'data/igc/Ulrich-Prinz.igc',
 ];
 
 function get(url, callback) {
   const client = new XMLHttpRequest();
   client.open('GET', url);
-  client.onload = function() {
+  client.onload = function () {
     callback(client.responseText);
   };
   client.send();
@@ -55,9 +54,10 @@ function get(url, callback) {
 
 const igcFormat = new IGC();
 for (let i = 0; i < igcUrls.length; ++i) {
-  get(igcUrls[i], function(data) {
+  get(igcUrls[i], function (data) {
-    const features = igcFormat.readFeatures(data,
+    const features = igcFormat.readFeatures(data, {
-      {featureProjection: 'EPSG:3857'});
+      featureProjection: 'EPSG:3857',
+    });
     vectorSource.addFeatures(features);
   });
 }
@@ -65,9 +65,9 @@ for (let i = 0; i < igcUrls.length; ++i) {
 const time = {
   start: Infinity,
   stop: -Infinity,
-  duration: 0
+  duration: 0,
 };
-vectorSource.on('addfeature', function(event) {
+vectorSource.on('addfeature', function (event) {
   const geometry = event.feature.getGeometry();
   time.start = Math.min(time.start, geometry.getFirstCoordinate()[2]);
   time.stop = Math.max(time.stop, geometry.getLastCoordinate()[2]);
@@ -76,7 +76,7 @@ vectorSource.on('addfeature', function(event) {
 
 const vectorLayer = new VectorLayer({
   source: vectorSource,
-  style: styleFunction
+  style: styleFunction,
 });
 
 const map = new Map({
@@ -85,25 +85,25 @@ const map = new Map({
       source: new OSM({
         attributions: [
           'All maps © <a href="https://www.opencyclemap.org/">OpenCycleMap</a>',
-          ATTRIBUTION
+          ATTRIBUTION,
         ],
-        url: 'https://{a-c}.tile.thunderforest.com/cycle/{z}/{x}/{y}.png' +
+        url:
-            '?apikey=0e6fc415256d4fbb9b5166a718591d71'
+          'https://{a-c}.tile.thunderforest.com/cycle/{z}/{x}/{y}.png' +
-      })
+          '?apikey=0e6fc415256d4fbb9b5166a718591d71',
+      }),
     }),
-    vectorLayer
+    vectorLayer,
   ],
   target: 'map',
   view: new View({
     center: [703365.7089403362, 5714629.865071137],
-    zoom: 9
+    zoom: 9,
-  })
+  }),
 });
 
-
 let point = null;
 let line = null;
-const displaySnap = function(coordinate) {
+const displaySnap = function (coordinate) {
   const closestFeature = vectorSource.getClosestFeatureToCoordinate(coordinate);
   const info = document.getElementById('info');
   if (closestFeature === null) {
@@ -120,7 +120,7 @@ const displaySnap = function(coordinate) {
     }
     const date = new Date(closestPoint[2] * 1000);
     info.innerHTML =
-        closestFeature.get('PLT') + ' (' + date.toUTCString() + ')';
+      closestFeature.get('PLT') + ' (' + date.toUTCString() + ')';
     const coordinates = [coordinate, [closestPoint[0], closestPoint[1]]];
     if (line === null) {
       line = new LineString(coordinates);
@@ -131,7 +131,7 @@ const displaySnap = function(coordinate) {
   map.render();
 };
 
-map.on('pointermove', function(evt) {
+map.on('pointermove', function (evt) {
   if (evt.dragging) {
     return;
   }
@@ -139,23 +139,23 @@ map.on('pointermove', function(evt) {
   displaySnap(coordinate);
 });
 
-map.on('click', function(evt) {
+map.on('click', function (evt) {
   displaySnap(evt.coordinate);
 });
 
 const stroke = new Stroke({
   color: 'rgba(255,0,0,0.9)',
-  width: 1
+  width: 1,
 });
 const style = new Style({
   stroke: stroke,
   image: new CircleStyle({
     radius: 5,
     fill: null,
-    stroke: stroke
+    stroke: stroke,
-  })
+  }),
 });
-vectorLayer.on('postrender', function(evt) {
+vectorLayer.on('postrender', function (evt) {
   const vectorContext = getVectorContext(evt);
   vectorContext.setStyle(style);
   if (point !== null) {
@@ -173,16 +173,16 @@ const featureOverlay = new VectorLayer({
     image: new CircleStyle({
       radius: 5,
       fill: new Fill({
-        color: 'rgba(255,0,0,0.9)'
+        color: 'rgba(255,0,0,0.9)',
-      })
+      }),
-    })
+    }),
-  })
+  }),
 });
 
-document.getElementById('time').addEventListener('input', function() {
+document.getElementById('time').addEventListener('input', function () {
   const value = parseInt(this.value, 10) / 100;
-  const m = time.start + (time.duration * value);
+  const m = time.start + time.duration * value;
-  vectorSource.forEachFeature(function(feature) {
+  vectorSource.forEachFeature(function (feature) {
     const geometry = /** @type {import("../src/ol/geom/LineString.js").default} */ (feature.getGeometry());
     const coordinate = geometry.getCoordinateAtM(m, true);
     let highlight = feature.get('highlight');

examples/iiif.js

@@ -1,45 +1,53 @@
-import Map from '../src/ol/Map.js';
-import View from '../src/ol/View.js';
-import TileLayer from '../src/ol/layer/Tile.js';
 import IIIF from '../src/ol/source/IIIF.js';
 import IIIFInfo from '../src/ol/format/IIIFInfo.js';
+import Map from '../src/ol/Map.js';
+import TileLayer from '../src/ol/layer/Tile.js';
+import View from '../src/ol/View.js';
 
 const layer = new TileLayer(),
-    map = new Map({
+  map = new Map({
-      layers: [layer],
+    layers: [layer],
-      target: 'map'
+    target: 'map',
-    }),
+  }),
-    notifyDiv = document.getElementById('iiif-notification'),
+  notifyDiv = document.getElementById('iiif-notification'),
-    urlInput = document.getElementById('imageInfoUrl'),
+  urlInput = document.getElementById('imageInfoUrl'),
-    displayButton = document.getElementById('display');
+  displayButton = document.getElementById('display');
 
 function refreshMap(imageInfoUrl) {
-  fetch(imageInfoUrl).then(function(response) {
+  fetch(imageInfoUrl)
-    response.json().then(function(imageInfo) {
+    .then(function (response) {
-      const options = new IIIFInfo(imageInfo).getTileSourceOptions();
+      response
-      if (options === undefined || options.version === undefined) {
+        .json()
-        notifyDiv.textContent = 'Data seems to be no valid IIIF image information.';
+        .then(function (imageInfo) {
-        return;
+          const options = new IIIFInfo(imageInfo).getTileSourceOptions();
-      }
+          if (options === undefined || options.version === undefined) {
-      options.zDirection = -1;
+            notifyDiv.textContent =
-      const iiifTileSource = new IIIF(options);
+              'Data seems to be no valid IIIF image information.';
-      layer.setSource(iiifTileSource);
+            return;
-      map.setView(new View({
+          }
-        resolutions: iiifTileSource.getTileGrid().getResolutions(),
+          options.zDirection = -1;
-        extent: iiifTileSource.getTileGrid().getExtent(),
+          const iiifTileSource = new IIIF(options);
-        constrainOnlyCenter: true
+          layer.setSource(iiifTileSource);
-      }));
+          map.setView(
-      map.getView().fit(iiifTileSource.getTileGrid().getExtent());
+            new View({
-      notifyDiv.textContent = '';
+              resolutions: iiifTileSource.getTileGrid().getResolutions(),
-    }).catch(function(body) {
+              extent: iiifTileSource.getTileGrid().getExtent(),
-      notifyDiv.textContent = 'Could not read image info json. ' + body;
+              constrainOnlyCenter: true,
+            })
+          );
+          map.getView().fit(iiifTileSource.getTileGrid().getExtent());
+          notifyDiv.textContent = '';
+        })
+        .catch(function (body) {
+          notifyDiv.textContent = 'Could not read image info json. ' + body;
+        });
+    })
+    .catch(function () {
+      notifyDiv.textContent = 'Could not read data from URL.';
     });
-  }).catch(function() {
-    notifyDiv.textContent = 'Could not read data from URL.';
-  });
 }
 
-displayButton.addEventListener('click', function() {
+displayButton.addEventListener('click', function () {
   refreshMap(urlInput.value);
 });
 

examples/image-filter.js

@@ -1,11 +1,12 @@
 import Map from '../src/ol/Map.js';
-import View from '../src/ol/View.js';
 import TileLayer from '../src/ol/layer/Tile.js';
-import {fromLonLat} from '../src/ol/proj.js';
+import View from '../src/ol/View.js';
 import XYZ from '../src/ol/source/XYZ.js';
+import {fromLonLat} from '../src/ol/proj.js';
 
 const key = 'get_your_own_D6rA4zTHduk6KOKTXzGB';
-const attributions = '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> ' +
+const attributions =
+  '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> ' +
   '<a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>';
 
 const imagery = new TileLayer({
@@ -13,8 +14,8 @@ const imagery = new TileLayer({
     attributions: attributions,
     url: 'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=' + key,
     maxZoom: 20,
-    crossOrigin: ''
+    crossOrigin: '',
-  })
+  }),
 });
 
 const map = new Map({
@@ -22,52 +23,25 @@ const map = new Map({
   target: 'map',
   view: new View({
     center: fromLonLat([-120, 50]),
-    zoom: 6
+    zoom: 6,
-  })
+  }),
 });
 
 const kernels = {
-  none: [
+  none: [0, 0, 0, 0, 1, 0, 0, 0, 0],
-    0, 0, 0,
+  sharpen: [0, -1, 0, -1, 5, -1, 0, -1, 0],
-    0, 1, 0,
+  sharpenless: [0, -1, 0, -1, 10, -1, 0, -1, 0],
-    0, 0, 0
+  blur: [1, 1, 1, 1, 1, 1, 1, 1, 1],
-  ],
+  shadow: [1, 2, 1, 0, 1, 0, -1, -2, -1],
-  sharpen: [
+  emboss: [-2, 1, 0, -1, 1, 1, 0, 1, 2],
-    0, -1, 0,
+  edge: [0, 1, 0, 1, -4, 1, 0, 1, 0],
-    -1, 5, -1,
-    0, -1, 0
-  ],
-  sharpenless: [
-    0, -1, 0,
-    -1, 10, -1,
-    0, -1, 0
-  ],
-  blur: [
-    1, 1, 1,
-    1, 1, 1,
-    1, 1, 1
-  ],
-  shadow: [
-    1, 2, 1,
-    0, 1, 0,
-    -1, -2, -1
-  ],
-  emboss: [
-    -2, 1, 0,
-    -1, 1, 1,
-    0, 1, 2
-  ],
-  edge: [
-    0, 1, 0,
-    1, -4, 1,
-    0, 1, 0
-  ]
 };
 
 function normalize(kernel) {
   const len = kernel.length;
   const normal = new Array(len);
-  let i, sum = 0;
+  let i,
+    sum = 0;
   for (i = 0; i < len; ++i) {
     sum += kernel[i];
   }
@@ -86,24 +60,21 @@ function normalize(kernel) {
 const select = document.getElementById('kernel');
 let selectedKernel = normalize(kernels[select.value]);
 
-
 /**
  * Update the kernel and re-render on change.
  */
-select.onchange = function() {
+select.onchange = function () {
   selectedKernel = normalize(kernels[select.value]);
   map.render();
 };
 
-
 /**
  * Apply a filter on "postrender" events.
  */
-imagery.on('postrender', function(event) {
+imagery.on('postrender', function (event) {
   convolve(event.context, selectedKernel);
 });
 
-
 /**
  * Apply a convolution kernel to canvas.  This works for any size kernel, but
  * performance starts degrading above 3 x 3.
@@ -126,14 +97,21 @@ function convolve(context, kernel) {
   for (let pixelY = 0; pixelY < height; ++pixelY) {
     const pixelsAbove = pixelY * width;
     for (let pixelX = 0; pixelX < width; ++pixelX) {
-      let r = 0, g = 0, b = 0, a = 0;
+      let r = 0,
+        g = 0,
+        b = 0,
+        a = 0;
       for (let kernelY = 0; kernelY < size; ++kernelY) {
         for (let kernelX = 0; kernelX < size; ++kernelX) {
           const weight = kernel[kernelY * size + kernelX];
           const neighborY = Math.min(
-            height - 1, Math.max(0, pixelY + kernelY - half));
+            height - 1,
+            Math.max(0, pixelY + kernelY - half)
+          );
           const neighborX = Math.min(
-            width - 1, Math.max(0, pixelX + kernelX - half));
+            width - 1,
+            Math.max(0, pixelX + kernelX - half)
+          );
           const inputIndex = (neighborY * width + neighborX) * 4;
           r += inputData[inputIndex] * weight;
           g += inputData[inputIndex + 1] * weight;

examples/image-load-events.js

@@ -1,8 +1,7 @@
-import Map from '../src/ol/Map.js';
-import View from '../src/ol/View.js';
 import ImageLayer from '../src/ol/layer/Image.js';
 import ImageWMS from '../src/ol/source/ImageWMS.js';
-
+import Map from '../src/ol/Map.js';
+import View from '../src/ol/View.js';
 
 /**
  * Renders a progress bar.
@@ -15,11 +14,10 @@ function Progress(el) {
   this.loaded = 0;
 }
 
-
 /**
  * Increment the count of loading tiles.
  */
-Progress.prototype.addLoading = function() {
+Progress.prototype.addLoading = function () {
   if (this.loading === 0) {
     this.show();
   }
@@ -27,48 +25,44 @@ Progress.prototype.addLoading = function() {
   this.update();
 };
 
-
 /**
  * Increment the count of loaded tiles.
  */
-Progress.prototype.addLoaded = function() {
+Progress.prototype.addLoaded = function () {
   const this_ = this;
-  setTimeout(function() {
+  setTimeout(function () {
     ++this_.loaded;
     this_.update();
   }, 100);
 };
 
-
 /**
  * Update the progress bar.
  */
-Progress.prototype.update = function() {
+Progress.prototype.update = function () {
-  const width = (this.loaded / this.loading * 100).toFixed(1) + '%';
+  const width = ((this.loaded / this.loading) * 100).toFixed(1) + '%';
   this.el.style.width = width;
   if (this.loading === this.loaded) {
     this.loading = 0;
     this.loaded = 0;
     const this_ = this;
-    setTimeout(function() {
+    setTimeout(function () {
       this_.hide();
     }, 500);
   }
 };
 
-
 /**
  * Show the progress bar.
  */
-Progress.prototype.show = function() {
+Progress.prototype.show = function () {
   this.el.style.visibility = 'visible';
 };
 
-
 /**
  * Hide the progress bar.
  */
-Progress.prototype.hide = function() {
+Progress.prototype.hide = function () {
   if (this.loading === this.loaded) {
     this.el.style.visibility = 'hidden';
     this.el.style.width = 0;
@@ -80,27 +74,25 @@ const progress = new Progress(document.getElementById('progress'));
 const source = new ImageWMS({
   url: 'https://ahocevar.com/geoserver/wms',
   params: {'LAYERS': 'topp:states'},
-  serverType: 'geoserver'
+  serverType: 'geoserver',
 });
 
-source.on('imageloadstart', function() {
+source.on('imageloadstart', function () {
   progress.addLoading();
 });
 
-source.on('imageloadend', function() {
+source.on('imageloadend', function () {
   progress.addLoaded();
 });
-source.on('imageloaderror', function() {
+source.on('imageloaderror', function () {
   progress.addLoaded();
 });
 
 const map = new Map({
-  layers: [
+  layers: [new ImageLayer({source: source})],
-    new ImageLayer({source: source})
-  ],
   target: 'map',
   view: new View({
     center: [-10997148, 4569099],
-    zoom: 4
+    zoom: 4,
-  })
+  }),
 });

examples/image-vector-layer.js

@@ -1,21 +1,20 @@
-import Map from '../src/ol/Map.js';
-import View from '../src/ol/View.js';
 import GeoJSON from '../src/ol/format/GeoJSON.js';
+import Map from '../src/ol/Map.js';
 import VectorImageLayer from '../src/ol/layer/VectorImage.js';
 import VectorLayer from '../src/ol/layer/Vector.js';
 import VectorSource from '../src/ol/source/Vector.js';
+import View from '../src/ol/View.js';
 import {Fill, Stroke, Style, Text} from '../src/ol/style.js';
 
-
 const style = new Style({
   fill: new Fill({
-    color: 'rgba(255, 255, 255, 0.6)'
+    color: 'rgba(255, 255, 255, 0.6)',
   }),
   stroke: new Stroke({
     color: '#319FD3',
-    width: 1
+    width: 1,
   }),
-  text: new Text()
+  text: new Text(),
 });
 
 const map = new Map({
@@ -24,19 +23,19 @@ const map = new Map({
       imageRatio: 2,
       source: new VectorSource({
         url: 'data/geojson/countries.geojson',
-        format: new GeoJSON()
+        format: new GeoJSON(),
       }),
-      style: function(feature) {
+      style: function (feature) {
         style.getText().setText(feature.get('name'));
         return style;
-      }
+      },
-    })
+    }),
   ],
   target: 'map',
   view: new View({
     center: [0, 0],
-    zoom: 1
+    zoom: 1,
-  })
+  }),
 });
 
 const featureOverlay = new VectorLayer({
@@ -45,45 +44,48 @@ const featureOverlay = new VectorLayer({
   style: new Style({
     stroke: new Stroke({
       color: '#f00',
-      width: 1
+      width: 1,
     }),
     fill: new Fill({
-      color: 'rgba(255,0,0,0.1)'
+      color: 'rgba(255,0,0,0.1)',
-    })
+    }),
-  })
+  }),
 });
 
 let highlight;
-const displayFeatureInfo = function(pixel) {
+const displayFeatureInfo = function (pixel) {
+  map
+    .getLayers()
+    .item(0)
+    .getFeatures(pixel)
+    .then(function (features) {
+      const feature = features.length > 0 ? features[0] : undefined;
 
-  map.getLayers().item(0).getFeatures(pixel).then(function(features) {
+      const info = document.getElementById('info');
-    const feature = features.length > 0 ? features[0] : undefined;
-
-    const info = document.getElementById('info');
-    if (feature) {
-      info.innerHTML = feature.getId() + ': ' + feature.get('name');
-    } else {
-      info.innerHTML = ' ';
-    }
-
-    if (feature !== highlight) {
-      if (highlight) {
-        featureOverlay.getSource().removeFeature(highlight);
-      }
       if (feature) {
-        featureOverlay.getSource().addFeature(feature);
+        info.innerHTML = feature.getId() + ': ' + feature.get('name');
+      } else {
+        info.innerHTML = ' ';
       }
-      highlight = feature;
+
-    }
+      if (feature !== highlight) {
-  });
+        if (highlight) {
+          featureOverlay.getSource().removeFeature(highlight);
+        }
+        if (feature) {
+          featureOverlay.getSource().addFeature(feature);
+        }
+        highlight = feature;
+      }
+    });
 };
 
-map.on('pointermove', function(evt) {
+map.on('pointermove', function (evt) {
   if (!evt.dragging) {
     displayFeatureInfo(evt.pixel);
   }
 });
 
-map.on('click', function(evt) {
+map.on('click', function (evt) {
   displayFeatureInfo(evt.pixel);
 });

examples/immediate-geographic.js

@@ -1,18 +1,18 @@
+import Stamen from '../src/ol/source/Stamen.js';
+import TileLayer from '../src/ol/layer/Tile.js';
+import {Circle, Fill, Style} from '../src/ol/style.js';
 import {Map, View} from '../src/ol/index.js';
 import {Point} from '../src/ol/geom.js';
-import TileLayer from '../src/ol/layer/Tile.js';
-import Stamen from '../src/ol/source/Stamen.js';
-import {Circle, Fill, Style} from '../src/ol/style.js';
 import {getVectorContext} from '../src/ol/render.js';
-import {useGeographic} from '../src/ol/proj.js';
 import {upAndDown} from '../src/ol/easing.js';
+import {useGeographic} from '../src/ol/proj.js';
 
 useGeographic();
 
 const layer = new TileLayer({
   source: new Stamen({
-    layer: 'toner'
+    layer: 'toner',
-  })
+  }),
 });
 
 const map = new Map({
@@ -20,17 +20,17 @@ const map = new Map({
   target: 'map',
   view: new View({
     center: [0, 0],
-    zoom: 2
+    zoom: 2,
-  })
+  }),
 });
 
 const image = new Circle({
   radius: 8,
-  fill: new Fill({color: 'rgb(255, 153, 0)'})
+  fill: new Fill({color: 'rgb(255, 153, 0)'}),
 });
 
 const style = new Style({
-  image: image
+  image: image,
 });
 
 const n = 1000;
@@ -42,7 +42,7 @@ for (let i = 0; i < n; ++i) {
   geometries[i] = new Point([lon, lat]);
 }
 
-layer.on('postrender', function(event) {
+layer.on('postrender', function (event) {
   const vectorContext = getVectorContext(event);
 
   for (let i = 0; i < n; ++i) {

examples/jsts.js

@@ -1,43 +1,62 @@
-import Map from '../src/ol/Map.js';
-import View from '../src/ol/View.js';
 import GeoJSON from '../src/ol/format/GeoJSON.js';
-import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
+import LinearRing from '../src/ol/geom/LinearRing.js';
-import {fromLonLat} from '../src/ol/proj.js';
+import Map from '../src/ol/Map.js';
 import OSM from '../src/ol/source/OSM.js';
 import VectorSource from '../src/ol/source/Vector.js';
-import LinearRing from '../src/ol/geom/LinearRing.js';
+import View from '../src/ol/View.js';
-import {Point, LineString, Polygon, MultiPoint, MultiLineString, MultiPolygon} from '../src/ol/geom.js';
+import {
+  LineString,
+  MultiLineString,
+  MultiPoint,
+  MultiPolygon,
+  Point,
+  Polygon,
+} from '../src/ol/geom.js';
+import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
+import {fromLonLat} from '../src/ol/proj.js';
 
 const source = new VectorSource();
-fetch('data/geojson/roads-seoul.geojson').then(function(response) {
+fetch('data/geojson/roads-seoul.geojson')
-  return response.json();
+  .then(function (response) {
-}).then(function(json) {
+    return response.json();
-  const format = new GeoJSON();
+  })
-  const features = format.readFeatures(json, {featureProjection: 'EPSG:3857'});
+  .then(function (json) {
+    const format = new GeoJSON();
+    const features = format.readFeatures(json, {
+      featureProjection: 'EPSG:3857',
+    });
 
-  const parser = new jsts.io.OL3Parser();
+    const parser = new jsts.io.OL3Parser();
-  parser.inject(Point, LineString, LinearRing, Polygon, MultiPoint, MultiLineString, MultiPolygon);
+    parser.inject(
+      Point,
+      LineString,
+      LinearRing,
+      Polygon,
+      MultiPoint,
+      MultiLineString,
+      MultiPolygon
+    );
 
-  for (let i = 0; i < features.length; i++) {
+    for (let i = 0; i < features.length; i++) {
-    const feature = features[i];
+      const feature = features[i];
-    // convert the OpenLayers geometry to a JSTS geometry
+      // convert the OpenLayers geometry to a JSTS geometry
-    const jstsGeom = parser.read(feature.getGeometry());
+      const jstsGeom = parser.read(feature.getGeometry());
 
-    // create a buffer of 40 meters around each line
+      // create a buffer of 40 meters around each line
-    const buffered = jstsGeom.buffer(40);
+      const buffered = jstsGeom.buffer(40);
 
-    // convert back from JSTS and replace the geometry on the feature
+      // convert back from JSTS and replace the geometry on the feature
-    feature.setGeometry(parser.write(buffered));
+      feature.setGeometry(parser.write(buffered));
-  }
+    }
 
-  source.addFeatures(features);
+    source.addFeatures(features);
-});
+  });
 const vectorLayer = new VectorLayer({
-  source: source
+  source: source,
 });
 
 const rasterLayer = new TileLayer({
-  source: new OSM()
+  source: new OSM(),
 });
 
 const map = new Map({
@@ -45,6 +64,6 @@ const map = new Map({
   target: document.getElementById('map'),
   view: new View({
     center: fromLonLat([126.979293, 37.528787]),
-    zoom: 15
+    zoom: 15,
-  })
+  }),
 });

examples/kml-earthquakes.js

@@ -1,14 +1,13 @@
-import Map from '../src/ol/Map.js';
-import View from '../src/ol/View.js';
 import KML from '../src/ol/format/KML.js';
-import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
+import Map from '../src/ol/Map.js';
 import Stamen from '../src/ol/source/Stamen.js';
 import VectorSource from '../src/ol/source/Vector.js';
+import View from '../src/ol/View.js';
 import {Circle as CircleStyle, Fill, Stroke, Style} from '../src/ol/style.js';
-
+import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
 
 const styleCache = {};
-const styleFunction = function(feature) {
+const styleFunction = function (feature) {
   // 2012_Earthquakes_Mag5.kml stores the magnitude of each earthquake in a
   // standards-violating <magnitude> tag in each Placemark.  We extract it from
   // the Placemark's name instead.
@@ -21,13 +20,13 @@ const styleFunction = function(feature) {
       image: new CircleStyle({
         radius: radius,
         fill: new Fill({
-          color: 'rgba(255, 153, 0, 0.4)'
+          color: 'rgba(255, 153, 0, 0.4)',
         }),
         stroke: new Stroke({
           color: 'rgba(255, 204, 0, 0.2)',
-          width: 1
+          width: 1,
-        })
+        }),
-      })
+      }),
     });
     styleCache[radius] = style;
   }
@@ -38,16 +37,16 @@ const vector = new VectorLayer({
   source: new VectorSource({
     url: 'data/kml/2012_Earthquakes_Mag5.kml',
     format: new KML({
-      extractStyles: false
+      extractStyles: false,
-    })
+    }),
   }),
-  style: styleFunction
+  style: styleFunction,
 });
 
 const raster = new TileLayer({
   source: new Stamen({
-    layer: 'toner'
+    layer: 'toner',
-  })
+  }),
 });
 
 const map = new Map({
@@ -55,26 +54,27 @@ const map = new Map({
   target: 'map',
   view: new View({
     center: [0, 0],
-    zoom: 2
+    zoom: 2,
-  })
+  }),
 });
 
 const info = $('#info');
 info.tooltip({
   animation: false,
-  trigger: 'manual'
+  trigger: 'manual',
 });
 
-const displayFeatureInfo = function(pixel) {
+const displayFeatureInfo = function (pixel) {
   info.css({
     left: pixel[0] + 'px',
-    top: (pixel[1] - 15) + 'px'
+    top: pixel[1] - 15 + 'px',
   });
-  const feature = map.forEachFeatureAtPixel(pixel, function(feature) {
+  const feature = map.forEachFeatureAtPixel(pixel, function (feature) {
     return feature;
   });
   if (feature) {
-    info.tooltip('hide')
+    info
+      .tooltip('hide')
       .attr('data-original-title', feature.get('name'))
       .tooltip('fixTitle')
       .tooltip('show');
@@ -83,7 +83,7 @@ const displayFeatureInfo = function(pixel) {
   }
 };
 
-map.on('pointermove', function(evt) {
+map.on('pointermove', function (evt) {
   if (evt.dragging) {
     info.tooltip('hide');
     return;
@@ -91,6 +91,6 @@ map.on('pointermove', function(evt) {
   displayFeatureInfo(map.getEventPixel(evt.originalEvent));
 });
 
-map.on('click', function(evt) {
+map.on('click', function (evt) {
   displayFeatureInfo(evt.pixel);
 });

examples/kml-timezones.js

@@ -1,11 +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 {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
+import Map from '../src/ol/Map.js';
 import Stamen from '../src/ol/source/Stamen.js';
 import VectorSource from '../src/ol/source/Vector.js';
+import View from '../src/ol/View.js';
 import {Fill, Stroke, Style} from '../src/ol/style.js';
-
+import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
 
 /*
  * Compute the style of the feature.  Here we want the opacity of polygons to
@@ -14,7 +13,7 @@ import {Fill, Stroke, Style} from '../src/ol/style.js';
  * currently midnight would have an opacity of 0.  This doesn't account for
  * daylight savings, so don't use it to plan your vacation.
  */
-const styleFunction = function(feature) {
+const styleFunction = function (feature) {
   let offset = 0;
   const name = feature.get('name'); // e.g. GMT -08:30
   const match = name.match(/([\-+]\d{2}):(\d{2})$/);
@@ -24,21 +23,22 @@ const styleFunction = function(feature) {
     offset = 60 * hours + minutes;
   }
   const date = new Date();
-  const local = new Date(date.getTime() +
+  const local = new Date(
-      (date.getTimezoneOffset() + offset) * 60000);
+    date.getTime() + (date.getTimezoneOffset() + offset) * 60000
+  );
   // offset from local noon (in hours)
-  let delta = Math.abs(12 - local.getHours() + (local.getMinutes() / 60));
+  let delta = Math.abs(12 - local.getHours() + local.getMinutes() / 60);
   if (delta > 12) {
     delta = 24 - delta;
   }
   const opacity = 0.75 * (1 - delta / 12);
   return new Style({
     fill: new Fill({
-      color: [0xff, 0xff, 0x33, opacity]
+      color: [0xff, 0xff, 0x33, opacity],
     }),
     stroke: new Stroke({
-      color: '#ffffff'
+      color: '#ffffff',
-    })
+    }),
   });
 };
 
@@ -46,16 +46,16 @@ const vector = new VectorLayer({
   source: new VectorSource({
     url: 'data/kml/timezones.kml',
     format: new KML({
-      extractStyles: false
+      extractStyles: false,
-    })
+    }),
   }),
-  style: styleFunction
+  style: styleFunction,
 });
 
 const raster = new TileLayer({
   source: new Stamen({
-    layer: 'toner'
+    layer: 'toner',
-  })
+  }),
 });
 
 const map = new Map({
@@ -63,26 +63,27 @@ const map = new Map({
   target: 'map',
   view: new View({
     center: [0, 0],
-    zoom: 2
+    zoom: 2,
-  })
+  }),
 });
 
 const info = $('#info');
 info.tooltip({
   animation: false,
-  trigger: 'manual'
+  trigger: 'manual',
 });
 
-const displayFeatureInfo = function(pixel) {
+const displayFeatureInfo = function (pixel) {
   info.css({
     left: pixel[0] + 'px',
-    top: (pixel[1] - 15) + 'px'
+    top: pixel[1] - 15 + 'px',
   });
-  const feature = map.forEachFeatureAtPixel(pixel, function(feature) {
+  const feature = map.forEachFeatureAtPixel(pixel, function (feature) {
     return feature;
   });
   if (feature) {
-    info.tooltip('hide')
+    info
+      .tooltip('hide')
       .attr('data-original-title', feature.get('name'))
       .tooltip('fixTitle')
       .tooltip('show');
@@ -91,7 +92,7 @@ const displayFeatureInfo = function(pixel) {
   }
 };
 
-map.on('pointermove', function(evt) {
+map.on('pointermove', function (evt) {
   if (evt.dragging) {
     info.tooltip('hide');
     return;
@@ -99,6 +100,6 @@ map.on('pointermove', function(evt) {
   displayFeatureInfo(map.getEventPixel(evt.originalEvent));
 });
 
-map.on('click', function(evt) {
+map.on('click', function (evt) {
   displayFeatureInfo(evt.pixel);
 });

examples/kml.js

@@ -1,27 +1,28 @@
-import Map from '../src/ol/Map.js';
-import View from '../src/ol/View.js';
 import KML from '../src/ol/format/KML.js';
-import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
+import Map from '../src/ol/Map.js';
-import XYZ from '../src/ol/source/XYZ.js';
 import VectorSource from '../src/ol/source/Vector.js';
+import View from '../src/ol/View.js';
+import XYZ from '../src/ol/source/XYZ.js';
+import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
 
 const key = 'get_your_own_D6rA4zTHduk6KOKTXzGB';
-const attributions = '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> ' +
+const attributions =
+  '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> ' +
   '<a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>';
 
 const raster = new TileLayer({
   source: new XYZ({
     attributions: attributions,
     url: 'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=' + key,
-    maxZoom: 20
+    maxZoom: 20,
-  })
+  }),
 });
 
 const vector = new VectorLayer({
   source: new VectorSource({
     url: 'data/kml/2012-02-10.kml',
-    format: new KML()
+    format: new KML(),
-  })
+  }),
 });
 
 const map = new Map({
@@ -30,13 +31,13 @@ const map = new Map({
   view: new View({
     center: [876970.8463461736, 5859807.853963373],
     projection: 'EPSG:3857',
-    zoom: 10
+    zoom: 10,
-  })
+  }),
 });
 
-const displayFeatureInfo = function(pixel) {
+const displayFeatureInfo = function (pixel) {
   const features = [];
-  map.forEachFeatureAtPixel(pixel, function(feature) {
+  map.forEachFeatureAtPixel(pixel, function (feature) {
     features.push(feature);
   });
   if (features.length > 0) {
@@ -53,7 +54,7 @@ const displayFeatureInfo = function(pixel) {
   }
 };
 
-map.on('pointermove', function(evt) {
+map.on('pointermove', function (evt) {
   if (evt.dragging) {
     return;
   }
@@ -61,6 +62,6 @@ map.on('pointermove', function(evt) {
   displayFeatureInfo(pixel);
 });
 
-map.on('click', function(evt) {
+map.on('click', function (evt) {
   displayFeatureInfo(evt.pixel);
 });

examples/layer-clipping-vector.js

@@ -1,36 +1,35 @@
-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 VectorSource from '../src/ol/source/Vector.js';
 import GeoJSON from '../src/ol/format/GeoJSON.js';
+import Map from '../src/ol/Map.js';
 import OSM from '../src/ol/source/OSM.js';
+import VectorSource from '../src/ol/source/Vector.js';
+import View from '../src/ol/View.js';
 import {Fill, Style} from '../src/ol/style.js';
-import {getVectorContext} from '../src/ol/render.js';
+import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
 import {fromLonLat} from '../src/ol/proj.js';
+import {getVectorContext} from '../src/ol/render.js';
 
 const base = new TileLayer({
-  source: new OSM()
+  source: new OSM(),
 });
 
 const clipLayer = new VectorLayer({
   style: null,
   source: new VectorSource({
-    url:
+    url: './data/geojson/switzerland.geojson',
-    './data/geojson/switzerland.geojson',
+    format: new GeoJSON(),
-    format: new GeoJSON()
+  }),
-  })
 });
 
 const style = new Style({
   fill: new Fill({
-    color: 'black'
+    color: 'black',
-  })
+  }),
 });
 
-base.on('postrender', function(e) {
+base.on('postrender', function (e) {
   e.context.globalCompositeOperation = 'destination-in';
   const vectorContext = getVectorContext(e);
-  clipLayer.getSource().forEachFeature(function(feature) {
+  clipLayer.getSource().forEachFeature(function (feature) {
     vectorContext.drawFeature(feature, style);
   });
   e.context.globalCompositeOperation = 'source-over';
@@ -41,6 +40,6 @@ const map = new Map({
   target: 'map',
   view: new View({
     center: fromLonLat([8.23, 46.86]),
-    zoom: 7
+    zoom: 7,
-  })
+  }),
 });

examples/layer-clipping.js

@@ -1,10 +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 OSM from '../src/ol/source/OSM.js';
+import TileLayer from '../src/ol/layer/Tile.js';
+import View from '../src/ol/View.js';
 
 const osm = new TileLayer({
-  source: new OSM()
+  source: new OSM(),
 });
 
 const map = new Map({
@@ -12,16 +12,18 @@ const map = new Map({
   target: 'map',
   view: new View({
     center: [0, 0],
-    zoom: 2
+    zoom: 2,
-  })
+  }),
 });
 
-osm.on('prerender', function(event) {
+osm.on('prerender', function (event) {
   const ctx = event.context;
 
   // calculate the pixel ratio and rotation of the canvas
   const matrix = event.inversePixelTransform;
-  const canvasPixelRatio = Math.sqrt(matrix[0] * matrix[0] + matrix[1] * matrix[1]);
+  const canvasPixelRatio = Math.sqrt(
+    matrix[0] * matrix[0] + matrix[1] * matrix[1]
+  );
   const canvasRotation = -Math.atan2(matrix[1], matrix[0]);
   ctx.save();
   // center the canvas and remove rotation to position clipping
@@ -47,7 +49,7 @@ osm.on('prerender', function(event) {
   ctx.translate(-ctx.canvas.width / 2, -ctx.canvas.height / 2);
 });
 
-osm.on('postrender', function(event) {
+osm.on('postrender', function (event) {
   const ctx = event.context;
   ctx.restore();
 });

examples/layer-extent.js

@@ -1,8 +1,8 @@
 import Map from '../src/ol/Map.js';
-import View from '../src/ol/View.js';
-import TileLayer from '../src/ol/layer/Tile.js';
-import {transformExtent} from '../src/ol/proj.js';
 import TileJSON from '../src/ol/source/TileJSON.js';
+import TileLayer from '../src/ol/layer/Tile.js';
+import View from '../src/ol/View.js';
+import {transformExtent} from '../src/ol/proj.js';
 
 function transform(extent) {
   return transformExtent(extent, 'EPSG:4326', 'EPSG:3857');
@@ -12,24 +12,29 @@ const extents = {
   India: transform([68.17665, 7.96553, 97.40256, 35.49401]),
   Argentina: transform([-73.41544, -55.25, -53.62835, -21.83231]),
   Nigeria: transform([2.6917, 4.24059, 14.57718, 13.86592]),
-  Sweden: transform([11.02737, 55.36174, 23.90338, 69.10625])
+  Sweden: transform([11.02737, 55.36174, 23.90338, 69.10625]),
 };
 
-const key = 'pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q';
+const key =
+  'pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q';
 
 const base = new TileLayer({
   source: new TileJSON({
-    url: 'https://api.tiles.mapbox.com/v4/mapbox.world-light.json?secure&access_token=' + key,
+    url:
-    crossOrigin: 'anonymous'
+      'https://api.tiles.mapbox.com/v4/mapbox.world-light.json?secure&access_token=' +
-  })
+      key,
+    crossOrigin: 'anonymous',
+  }),
 });
 
 const overlay = new TileLayer({
   extent: extents.India,
   source: new TileJSON({
-    url: 'https://api.tiles.mapbox.com/v4/mapbox.world-black.json?secure&access_token=' + key,
+    url:
-    crossOrigin: 'anonymous'
+      'https://api.tiles.mapbox.com/v4/mapbox.world-black.json?secure&access_token=' +
-  })
+      key,
+    crossOrigin: 'anonymous',
+  }),
 });
 
 const map = new Map({
@@ -37,12 +42,12 @@ const map = new Map({
   target: 'map',
   view: new View({
     center: [0, 0],
-    zoom: 1
+    zoom: 1,
-  })
+  }),
 });
 
 for (const key in extents) {
-  document.getElementById(key).onclick = function(event) {
+  document.getElementById(key).onclick = function (event) {
     overlay.setExtent(extents[event.target.id]);
   };
 }

examples/layer-group.js

@@ -1,62 +1,71 @@
 import Map from '../src/ol/Map.js';
+import OSM from '../src/ol/source/OSM.js';
+import TileJSON from '../src/ol/source/TileJSON.js';
 import View from '../src/ol/View.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';
 
-const key = 'pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q';
+const key =
+  'pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q';
 
 const map = new Map({
   layers: [
     new TileLayer({
-      source: new OSM()
+      source: new OSM(),
-    }), new LayerGroup({
+    }),
+    new LayerGroup({
       layers: [
         new TileLayer({
           source: new TileJSON({
-            url: 'https://api.tiles.mapbox.com/v4/mapbox.20110804-hoa-foodinsecurity-3month.json?secure&access_token=' + key,
+            url:
-            crossOrigin: 'anonymous'
+              'https://api.tiles.mapbox.com/v4/mapbox.20110804-hoa-foodinsecurity-3month.json?secure&access_token=' +
-          })
+              key,
+            crossOrigin: 'anonymous',
+          }),
         }),
         new TileLayer({
           source: new TileJSON({
-            url: 'https://api.tiles.mapbox.com/v4/mapbox.world-borders-light.json?secure&access_token=' + key,
+            url:
-            crossOrigin: 'anonymous'
+              'https://api.tiles.mapbox.com/v4/mapbox.world-borders-light.json?secure&access_token=' +
-          })
+              key,
-        })
+            crossOrigin: 'anonymous',
-      ]
+          }),
-    })
+        }),
+      ],
+    }),
   ],
   target: 'map',
   view: new View({
-    center: fromLonLat([37.40570, 8.81566]),
+    center: fromLonLat([37.4057, 8.81566]),
-    zoom: 4
+    zoom: 4,
-  })
+  }),
 });
 
 function bindInputs(layerid, layer) {
   const visibilityInput = $(layerid + ' input.visible');
-  visibilityInput.on('change', function() {
+  visibilityInput.on('change', function () {
     layer.setVisible(this.checked);
   });
   visibilityInput.prop('checked', layer.getVisible());
 
   const opacityInput = $(layerid + ' input.opacity');
-  opacityInput.on('input change', function() {
+  opacityInput.on('input change', function () {
     layer.setOpacity(parseFloat(this.value));
   });
   opacityInput.val(String(layer.getOpacity()));
 }
-map.getLayers().forEach(function(layer, i) {
+map.getLayers().forEach(function (layer, i) {
   bindInputs('#layer' + i, layer);
   if (layer instanceof LayerGroup) {
-    layer.getLayers().forEach(function(sublayer, j) {
+    layer.getLayers().forEach(function (sublayer, j) {
       bindInputs('#layer' + i + j, sublayer);
     });
   }
 });
 
-$('#layertree li > span').click(function() {
+$('#layertree li > span')
-  $(this).siblings('fieldset').toggle();
+  .click(function () {
-}).siblings('fieldset').hide();
+    $(this).siblings('fieldset').toggle();
+  })
+  .siblings('fieldset')
+  .hide();

examples/layer-spy.js

@@ -1,12 +1,13 @@
 import Map from '../src/ol/Map.js';
-import View from '../src/ol/View.js';
 import TileLayer from '../src/ol/layer/Tile.js';
-import {fromLonLat} from '../src/ol/proj.js';
+import View from '../src/ol/View.js';
 import XYZ from '../src/ol/source/XYZ.js';
+import {fromLonLat} from '../src/ol/proj.js';
 import {getRenderPixel} from '../src/ol/render.js';
 
 const key = 'get_your_own_D6rA4zTHduk6KOKTXzGB';
-const attributions = '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> ' +
+const attributions =
+  '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> ' +
   '<a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>';
 
 const roads = new TileLayer({
@@ -14,16 +15,16 @@ const roads = new TileLayer({
     attributions: attributions,
     url: 'https://api.maptiler.com/maps/streets/{z}/{x}/{y}.png?key=' + key,
     tileSize: 512,
-    maxZoom: 22
+    maxZoom: 22,
-  })
+  }),
 });
 
 const imagery = new TileLayer({
   source: new XYZ({
     attributions: attributions,
     url: 'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=' + key,
-    maxZoom: 20
+    maxZoom: 20,
-  })
+  }),
 });
 
 const container = document.getElementById('map');
@@ -33,12 +34,12 @@ const map = new Map({
   target: container,
   view: new View({
     center: fromLonLat([-109, 46.5]),
-    zoom: 6
+    zoom: 6,
-  })
+  }),
 });
 
 let radius = 75;
-document.addEventListener('keydown', function(evt) {
+document.addEventListener('keydown', function (evt) {
   if (evt.which === 38) {
     radius = Math.min(radius + 5, 150);
     map.render();
@@ -53,28 +54,33 @@ document.addEventListener('keydown', function(evt) {
 // get the pixel position with every move
 let mousePosition = null;
 
-container.addEventListener('mousemove', function(event) {
+container.addEventListener('mousemove', function (event) {
   mousePosition = map.getEventPixel(event);
   map.render();
 });
 
-container.addEventListener('mouseout', function() {
+container.addEventListener('mouseout', function () {
   mousePosition = null;
   map.render();
 });
 
 // before rendering the layer, do some clipping
-imagery.on('prerender', function(event) {
+imagery.on('prerender', function (event) {
   const ctx = event.context;
   ctx.save();
   ctx.beginPath();
   if (mousePosition) {
     // only show a circle around the mouse
     const pixel = getRenderPixel(event, mousePosition);
-    const offset = getRenderPixel(event, [mousePosition[0] + radius, mousePosition[1]]);
+    const offset = getRenderPixel(event, [
-    const canvasRadius = Math.sqrt(Math.pow(offset[0] - pixel[0], 2) + Math.pow(offset[1] - pixel[1], 2));
+      mousePosition[0] + radius,
+      mousePosition[1],
+    ]);
+    const canvasRadius = Math.sqrt(
+      Math.pow(offset[0] - pixel[0], 2) + Math.pow(offset[1] - pixel[1], 2)
+    );
     ctx.arc(pixel[0], pixel[1], canvasRadius, 0, 2 * Math.PI);
-    ctx.lineWidth = 5 * canvasRadius / radius;
+    ctx.lineWidth = (5 * canvasRadius) / radius;
     ctx.strokeStyle = 'rgba(0,0,0,0.5)';
     ctx.stroke();
   }
@@ -82,7 +88,7 @@ imagery.on('prerender', function(event) {
 });
 
 // after rendering the layer, restore the canvas context
-imagery.on('postrender', function(event) {
+imagery.on('postrender', function (event) {
   const ctx = event.context;
   ctx.restore();
 });

examples/layer-swipe.js

@@ -1,24 +1,25 @@
 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 TileLayer from '../src/ol/layer/Tile.js';
+import View from '../src/ol/View.js';
 import XYZ from '../src/ol/source/XYZ.js';
 import {getRenderPixel} from '../src/ol/render.js';
 
 const osm = new TileLayer({
-  source: new OSM()
+  source: new OSM(),
 });
 
 const key = 'get_your_own_D6rA4zTHduk6KOKTXzGB';
-const attributions = '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> ' +
+const attributions =
+  '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> ' +
   '<a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>';
 
 const aerial = new TileLayer({
   source: new XYZ({
     attributions: attributions,
     url: 'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=' + key,
-    maxZoom: 20
+    maxZoom: 20,
-  })
+  }),
 });
 
 const map = new Map({
@@ -26,13 +27,13 @@ const map = new Map({
   target: 'map',
   view: new View({
     center: [0, 0],
-    zoom: 2
+    zoom: 2,
-  })
+  }),
 });
 
 const swipe = document.getElementById('swipe');
 
-aerial.on('prerender', function(event) {
+aerial.on('prerender', function (event) {
   const ctx = event.context;
   const mapSize = map.getSize();
   const width = mapSize[0] * (swipe.value / 100);
@@ -51,11 +52,15 @@ aerial.on('prerender', function(event) {
   ctx.clip();
 });
 
-aerial.on('postrender', function(event) {
+aerial.on('postrender', function (event) {
   const ctx = event.context;
   ctx.restore();
 });
 
-swipe.addEventListener('input', function() {
+swipe.addEventListener(
-  map.render();
+  'input',
-}, false);
+  function () {
+    map.render();
+  },
+  false
+);

examples/layer-z-index.js

@@ -1,12 +1,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 VectorLayer from '../src/ol/layer/Vector.js';
 import VectorSource from '../src/ol/source/Vector.js';
+import View from '../src/ol/View.js';
 import {Fill, RegularShape, Stroke, Style} from '../src/ol/style.js';
 
-
 const stroke = new Stroke({color: 'black', width: 1});
 
 const styles = {
@@ -16,8 +15,8 @@ const styles = {
       stroke: stroke,
       points: 4,
       radius: 80,
-      angle: Math.PI / 4
+      angle: Math.PI / 4,
-    })
+    }),
   }),
   'triangle': new Style({
     image: new RegularShape({
@@ -26,8 +25,8 @@ const styles = {
       points: 3,
       radius: 80,
       rotation: Math.PI / 4,
-      angle: 0
+      angle: 0,
-    })
+    }),
   }),
   'star': new Style({
     image: new RegularShape({
@@ -36,22 +35,21 @@ const styles = {
       points: 5,
       radius: 80,
       radius2: 4,
-      angle: 0
+      angle: 0,
-    })
+    }),
-  })
+  }),
 };
 
-
 function createLayer(coordinates, style, zIndex) {
   const feature = new Feature(new Point(coordinates));
   feature.setStyle(style);
 
   const source = new VectorSource({
-    features: [feature]
+    features: [feature],
   });
 
   const vectorLayer = new VectorLayer({
-    source: source
+    source: source,
   });
   vectorLayer.setZIndex(zIndex);
 
@@ -71,16 +69,15 @@ const map = new Map({
   target: 'map',
   view: new View({
     center: [0, 0],
-    zoom: 18
+    zoom: 18,
-  })
+  }),
 });
 
 layer0.setMap(map);
 
-
 function bindInputs(id, layer) {
   const idxInput = document.getElementById('idx' + id);
-  idxInput.onchange = function() {
+  idxInput.onchange = function () {
     layer.setZIndex(parseInt(this.value, 10) || 0);
   };
   idxInput.value = String(layer.getZIndex());

examples/layer-zoom-limits.js

@@ -1,9 +1,9 @@
 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 TileLayer from '../src/ol/layer/Tile.js';
+import View from '../src/ol/View.js';
 import XYZ from '../src/ol/source/XYZ.js';
-import {transformExtent, fromLonLat} from '../src/ol/proj.js';
+import {fromLonLat, transformExtent} from '../src/ol/proj.js';
 
 const mapExtent = [-112.261791, 35.983744, -112.113981, 36.132062];
 
@@ -12,22 +12,23 @@ const map = new Map({
   layers: [
     new TileLayer({
       maxZoom: 14, // visible at zoom levels 14 and below
-      source: new OSM()
+      source: new OSM(),
     }),
     new TileLayer({
       minZoom: 14, // visible at zoom levels above 14
       source: new XYZ({
-        attributions: 'Tiles © USGS, rendered with ' +
+        attributions:
-        '<a href="http://www.maptiler.com/">MapTiler</a>',
+          'Tiles © USGS, rendered with ' +
-        url: 'https://tileserver.maptiler.com/grandcanyon/{z}/{x}/{y}.png'
+          '<a href="http://www.maptiler.com/">MapTiler</a>',
-      })
+        url: 'https://tileserver.maptiler.com/grandcanyon/{z}/{x}/{y}.png',
-    })
+      }),
+    }),
   ],
   view: new View({
     center: fromLonLat([-112.18688965, 36.057944835]),
     zoom: 15,
     maxZoom: 18,
     extent: transformExtent(mapExtent, 'EPSG:4326', 'EPSG:3857'),
-    constrainOnlyCenter: true
+    constrainOnlyCenter: true,
-  })
+  }),
 });

examples/lazy-source.js

@@ -1,7 +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 TileLayer from '../src/ol/layer/Tile.js';
+import View from '../src/ol/View.js';
 
 const source = new OSM();
 
@@ -12,14 +12,14 @@ const map = new Map({
   target: 'map',
   view: new View({
     center: [0, 0],
-    zoom: 2
+    zoom: 2,
-  })
+  }),
 });
 
-document.getElementById('set-source').onclick = function() {
+document.getElementById('set-source').onclick = function () {
   layer.setSource(source);
 };
 
-document.getElementById('unset-source').onclick = function() {
+document.getElementById('unset-source').onclick = function () {
   layer.setSource(null);
 };

examples/line-arrows.js

@@ -1,50 +1,52 @@
-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 {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
+import Map from '../src/ol/Map.js';
-import {OSM, Vector as VectorSource} from '../src/ol/source.js';
+import Point from '../src/ol/geom/Point.js';
+import View from '../src/ol/View.js';
 import {Icon, Stroke, Style} from '../src/ol/style.js';
+import {OSM, Vector as VectorSource} from '../src/ol/source.js';
+import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
 
 const raster = new TileLayer({
-  source: new OSM()
+  source: new OSM(),
 });
 
 const source = new VectorSource();
 
-const styleFunction = function(feature) {
+const styleFunction = function (feature) {
   const geometry = feature.getGeometry();
   const styles = [
     // linestring
     new Style({
       stroke: new Stroke({
         color: '#ffcc33',
-        width: 2
+        width: 2,
-      })
+      }),
-    })
+    }),
   ];
 
-  geometry.forEachSegment(function(start, end) {
+  geometry.forEachSegment(function (start, end) {
     const dx = end[0] - start[0];
     const dy = end[1] - start[1];
     const rotation = Math.atan2(dy, dx);
     // arrows
-    styles.push(new Style({
+    styles.push(
-      geometry: new Point(end),
+      new Style({
-      image: new Icon({
+        geometry: new Point(end),
-        src: 'data/arrow.png',
+        image: new Icon({
-        anchor: [0.75, 0.5],
+          src: 'data/arrow.png',
-        rotateWithView: true,
+          anchor: [0.75, 0.5],
-        rotation: -rotation
+          rotateWithView: true,
+          rotation: -rotation,
+        }),
       })
-    }));
+    );
   });
 
   return styles;
 };
 const vector = new VectorLayer({
   source: source,
-  style: styleFunction
+  style: styleFunction,
 });
 
 const map = new Map({
@@ -52,11 +54,13 @@ const map = new Map({
   target: 'map',
   view: new View({
     center: [-11000000, 4600000],
-    zoom: 4
+    zoom: 4,
-  })
+  }),
 });
 
-map.addInteraction(new Draw({
+map.addInteraction(
-  source: source,
+  new Draw({
-  type: 'LineString'
+    source: source,
-}));
+    type: 'LineString',
+  })
+);

examples/localized-openstreetmap.js

@@ -1,41 +1,37 @@
 import Map from '../src/ol/Map.js';
-import View from '../src/ol/View.js';
-import TileLayer from '../src/ol/layer/Tile.js';
 import OSM, {ATTRIBUTION} from '../src/ol/source/OSM.js';
-
+import TileLayer from '../src/ol/layer/Tile.js';
+import View from '../src/ol/View.js';
 
 const openCycleMapLayer = new TileLayer({
   source: new OSM({
     attributions: [
       'All maps © <a href="https://www.opencyclemap.org/">OpenCycleMap</a>',
-      ATTRIBUTION
+      ATTRIBUTION,
     ],
-    url: 'https://{a-c}.tile.thunderforest.com/cycle/{z}/{x}/{y}.png' +
+    url:
-        '?apikey=0e6fc415256d4fbb9b5166a718591d71'
+      'https://{a-c}.tile.thunderforest.com/cycle/{z}/{x}/{y}.png' +
-  })
+      '?apikey=0e6fc415256d4fbb9b5166a718591d71',
+  }),
 });
 
 const openSeaMapLayer = new TileLayer({
   source: new OSM({
     attributions: [
       'All maps © <a href="http://www.openseamap.org/">OpenSeaMap</a>',
-      ATTRIBUTION
+      ATTRIBUTION,
     ],
     opaque: false,
-    url: 'https://tiles.openseamap.org/seamark/{z}/{x}/{y}.png'
+    url: 'https://tiles.openseamap.org/seamark/{z}/{x}/{y}.png',
-  })
+  }),
 });
 
-
 const map = new Map({
-  layers: [
+  layers: [openCycleMapLayer, openSeaMapLayer],
-    openCycleMapLayer,
-    openSeaMapLayer
-  ],
   target: 'map',
   view: new View({
     maxZoom: 18,
     center: [-244780.24508882355, 5986452.183179816],
-    zoom: 15
+    zoom: 15,
-  })
+  }),
 });

examples/magnify.js

@@ -1,12 +1,13 @@
 import Map from '../src/ol/Map.js';
-import View from '../src/ol/View.js';
 import TileLayer from '../src/ol/layer/Tile.js';
-import {fromLonLat} from '../src/ol/proj.js';
+import View from '../src/ol/View.js';
 import XYZ from '../src/ol/source/XYZ.js';
+import {fromLonLat} from '../src/ol/proj.js';
 import {getRenderPixel} from '../src/ol/render.js';
 
 const key = 'get_your_own_D6rA4zTHduk6KOKTXzGB';
-const attributions = '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> ' +
+const attributions =
+  '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> ' +
   '<a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>';
 
 const imagery = new TileLayer({
@@ -14,8 +15,8 @@ const imagery = new TileLayer({
     attributions: attributions,
     url: 'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=' + key,
     maxZoom: 20,
-    crossOrigin: ''
+    crossOrigin: '',
-  })
+  }),
 });
 
 const container = document.getElementById('map');
@@ -25,12 +26,12 @@ const map = new Map({
   target: container,
   view: new View({
     center: fromLonLat([-109, 46.5]),
-    zoom: 6
+    zoom: 6,
-  })
+  }),
 });
 
 let radius = 75;
-document.addEventListener('keydown', function(evt) {
+document.addEventListener('keydown', function (evt) {
   if (evt.which === 38) {
     radius = Math.min(radius + 5, 150);
     map.render();
@@ -45,22 +46,27 @@ document.addEventListener('keydown', function(evt) {
 // get the pixel position with every move
 let mousePosition = null;
 
-container.addEventListener('mousemove', function(event) {
+container.addEventListener('mousemove', function (event) {
   mousePosition = map.getEventPixel(event);
   map.render();
 });
 
-container.addEventListener('mouseout', function() {
+container.addEventListener('mouseout', function () {
   mousePosition = null;
   map.render();
 });
 
 // after rendering the layer, show an oversampled version around the pointer
-imagery.on('postrender', function(event) {
+imagery.on('postrender', function (event) {
   if (mousePosition) {
     const pixel = getRenderPixel(event, mousePosition);
-    const offset = getRenderPixel(event, [mousePosition[0] + radius, mousePosition[1]]);
+    const offset = getRenderPixel(event, [
-    const half = Math.sqrt(Math.pow(offset[0] - pixel[0], 2) + Math.pow(offset[1] - pixel[1], 2));
+      mousePosition[0] + radius,
+      mousePosition[1],
+    ]);
+    const half = Math.sqrt(
+      Math.pow(offset[0] - pixel[0], 2) + Math.pow(offset[1] - pixel[1], 2)
+    );
     const context = event.context;
     const centerX = pixel[0];
     const centerY = pixel[1];
@@ -91,7 +97,7 @@ imagery.on('postrender', function(event) {
     }
     context.beginPath();
     context.arc(centerX, centerY, half, 0, 2 * Math.PI);
-    context.lineWidth = 3 * half / radius;
+    context.lineWidth = (3 * half) / radius;
     context.strokeStyle = 'rgba(255,255,255,0.5)';
     context.putImageData(dest, originX, originY);
     context.stroke();

examples/mapbox-layer.js

@@ -1,11 +1,11 @@
-import Map from '../src/ol/Map.js';
+import GeoJSON from '../src/ol/format/GeoJSON.js';
-import View from '../src/ol/View.js';
 import Layer from '../src/ol/layer/Layer.js';
-import {toLonLat, fromLonLat} from '../src/ol/proj.js';
+import Map from '../src/ol/Map.js';
-import {Stroke, Style} from '../src/ol/style.js';
 import VectorLayer from '../src/ol/layer/Vector.js';
 import VectorSource from '../src/ol/source/Vector.js';
-import GeoJSON from '../src/ol/format/GeoJSON.js';
+import View from '../src/ol/View.js';
+import {Stroke, Style} from '../src/ol/style.js';
+import {fromLonLat, toLonLat} from '../src/ol/proj.js';
 
 const center = [-98.8, 37.9];
 const key = 'get_your_own_D6rA4zTHduk6KOKTXzGB';
@@ -23,11 +23,11 @@ const mbMap = new mapboxgl.Map({
   keyboard: false,
   pitchWithRotate: false,
   scrollZoom: false,
-  touchZoomRotate: false
+  touchZoomRotate: false,
 });
 
 const mbLayer = new Layer({
-  render: function(frameState) {
+  render: function (frameState) {
     const canvas = mbMap.getCanvas();
     const viewState = frameState.viewState;
 
@@ -40,14 +40,14 @@ const mbLayer = new Layer({
     // adjust view parameters in mapbox
     const rotation = viewState.rotation;
     if (rotation) {
-      mbMap.rotateTo(-rotation * 180 / Math.PI, {
+      mbMap.rotateTo((-rotation * 180) / Math.PI, {
-        animate: false
+        animate: false,
       });
     }
     mbMap.jumpTo({
       center: toLonLat(viewState.center),
       zoom: viewState.zoom - 1,
-      animate: false
+      animate: false,
     });
 
     // cancel the scheduled update & trigger synchronous redraw
@@ -60,29 +60,29 @@ const mbLayer = new Layer({
     mbMap._render();
 
     return canvas;
-  }
+  },
 });
 
 const style = new Style({
   stroke: new Stroke({
     color: '#319FD3',
-    width: 2
+    width: 2,
-  })
+  }),
 });
 
 const vectorLayer = new VectorLayer({
   source: new VectorSource({
     url: 'data/geojson/countries.geojson',
-    format: new GeoJSON()
+    format: new GeoJSON(),
   }),
-  style: style
+  style: style,
 });
 
 const map = new Map({
   target: 'map',
   view: new View({
     center: fromLonLat(center),
-    zoom: 4
+    zoom: 4,
   }),
-  layers: [mbLayer, vectorLayer]
+  layers: [mbLayer, vectorLayer],
 });

examples/mapbox-style.js

@@ -1,6 +1,9 @@
-import apply from 'ol-mapbox-style';
 import FullScreen from '../src/ol/control/FullScreen.js';
+import apply from 'ol-mapbox-style';
 
-apply('map', 'https://api.maptiler.com/maps/topo/style.json?key=get_your_own_D6rA4zTHduk6KOKTXzGB').then(function(map) {
+apply(
+  'map',
+  'https://api.maptiler.com/maps/topo/style.json?key=get_your_own_D6rA4zTHduk6KOKTXzGB'
+).then(function (map) {
   map.addControl(new FullScreen());
 });

examples/mapbox-vector-tiles-advanced.js

@@ -1,14 +1,14 @@
-import Map from '../src/ol/Map.js';
-import View from '../src/ol/View.js';
 import MVT from '../src/ol/format/MVT.js';
-import VectorTileLayer from '../src/ol/layer/VectorTile.js';
+import Map from '../src/ol/Map.js';
-import {get as getProjection} from '../src/ol/proj.js';
-import VectorTileSource from '../src/ol/source/VectorTile.js';
-import {Fill, Icon, Stroke, Style, Text} from '../src/ol/style.js';
 import TileGrid from '../src/ol/tilegrid/TileGrid.js';
+import VectorTileLayer from '../src/ol/layer/VectorTile.js';
+import VectorTileSource from '../src/ol/source/VectorTile.js';
+import View from '../src/ol/View.js';
+import {Fill, Icon, Stroke, Style, Text} from '../src/ol/style.js';
+import {get as getProjection} from '../src/ol/proj.js';
 
-
+const key =
-const key = 'pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q';
+  'pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q';
 
 // Calculation of resolutions that match zoom levels 1, 3, 5, 7, 9, 11, 13, 15.
 const resolutions = [];
@@ -17,37 +17,43 @@ for (let i = 0; i <= 8; ++i) {
 }
 // Calculation of tile urls for zoom levels 1, 3, 5, 7, 9, 11, 13, 15.
 function tileUrlFunction(tileCoord) {
-  return ('https://{a-d}.tiles.mapbox.com/v4/mapbox.mapbox-streets-v6/' +
+  return (
-      '{z}/{x}/{y}.vector.pbf?access_token=' + key)
+    'https://{a-d}.tiles.mapbox.com/v4/mapbox.mapbox-streets-v6/' +
+    '{z}/{x}/{y}.vector.pbf?access_token=' +
+    key
+  )
     .replace('{z}', String(tileCoord[0] * 2 - 1))
     .replace('{x}', String(tileCoord[1]))
     .replace('{y}', String(tileCoord[2]))
-    .replace('{a-d}', 'abcd'.substr(
+    .replace(
-      ((tileCoord[1] << tileCoord[0]) + tileCoord[2]) % 4, 1));
+      '{a-d}',
+      'abcd'.substr(((tileCoord[1] << tileCoord[0]) + tileCoord[2]) % 4, 1)
+    );
 }
 
 const map = new Map({
   layers: [
     new VectorTileLayer({
       source: new VectorTileSource({
-        attributions: '© <a href="https://www.mapbox.com/map-feedback/">Mapbox</a> ' +
+        attributions:
+          '© <a href="https://www.mapbox.com/map-feedback/">Mapbox</a> ' +
           '© <a href="https://www.openstreetmap.org/copyright">' +
           'OpenStreetMap contributors</a>',
         format: new MVT(),
         tileGrid: new TileGrid({
           extent: getProjection('EPSG:3857').getExtent(),
           resolutions: resolutions,
-          tileSize: 512
+          tileSize: 512,
         }),
-        tileUrlFunction: tileUrlFunction
+        tileUrlFunction: tileUrlFunction,
       }),
-      style: createMapboxStreetsV6Style(Style, Fill, Stroke, Icon, Text)
+      style: createMapboxStreetsV6Style(Style, Fill, Stroke, Icon, Text),
-    })
+    }),
   ],
   target: 'map',
   view: new View({
     center: [0, 0],
     minZoom: 1,
-    zoom: 2
+    zoom: 2,
-  })
+  }),
 });

examples/mapbox-vector-tiles.js

@@ -1,31 +1,34 @@
-import Map from '../src/ol/Map.js';
-import View from '../src/ol/View.js';
 import MVT from '../src/ol/format/MVT.js';
+import Map from '../src/ol/Map.js';
 import VectorTileLayer from '../src/ol/layer/VectorTile.js';
 import VectorTileSource from '../src/ol/source/VectorTile.js';
+import View from '../src/ol/View.js';
 import {Fill, Icon, Stroke, Style, Text} from '../src/ol/style.js';
 
-
+const key =
-const key = 'pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q';
+  'pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q';
 
 const map = new Map({
   layers: [
     new VectorTileLayer({
       declutter: true,
       source: new VectorTileSource({
-        attributions: '© <a href="https://www.mapbox.com/map-feedback/">Mapbox</a> ' +
+        attributions:
+          '© <a href="https://www.mapbox.com/map-feedback/">Mapbox</a> ' +
           '© <a href="https://www.openstreetmap.org/copyright">' +
           'OpenStreetMap contributors</a>',
         format: new MVT(),
-        url: 'https://{a-d}.tiles.mapbox.com/v4/mapbox.mapbox-streets-v6/' +
+        url:
-            '{z}/{x}/{y}.vector.pbf?access_token=' + key
+          'https://{a-d}.tiles.mapbox.com/v4/mapbox.mapbox-streets-v6/' +
+          '{z}/{x}/{y}.vector.pbf?access_token=' +
+          key,
       }),
-      style: createMapboxStreetsV6Style(Style, Fill, Stroke, Icon, Text)
+      style: createMapboxStreetsV6Style(Style, Fill, Stroke, Icon, Text),
-    })
+    }),
   ],
   target: 'map',
   view: new View({
     center: [0, 0],
-    zoom: 2
+    zoom: 2,
-  })
+  }),
 });