Merge pull request #8554 from openlayers/release-v5.2.0

Release v5.2.0

.gitignore

@@ -2,4 +2,3 @@
 /coverage/
 /dist/
 node_modules/
-src/index.js

DEVELOPING.md

@@ -30,7 +30,7 @@ To run the examples you first need to start the dev server:
 
     $ npm run serve-examples
 
-Then, load <http://localhost:5000/> in your browser.
+Then, load <http://localhost:8080/> in your browser.
 
 ## Running tests
 

README.md

@@ -1,23 +1,45 @@
 # OpenLayers
 
-[![Travis CI Status](https://secure.travis-ci.org/openlayers/openlayers.svg)](http://travis-ci.org/#!/openlayers/openlayers)
-[![Greenkeeper badge](https://badges.greenkeeper.io/openlayers/openlayers.svg)](https://greenkeeper.io/)
-[![Coverage Status](https://coveralls.io/repos/github/openlayers/openlayers/badge.svg?branch=master)](https://coveralls.io/github/openlayers/openlayers?branch=master)
-[![OSGeo Project](https://img.shields.io/badge/OSGeo-Project-brightgreen.svg)](http://osgeo.org/)
-[![jsDelivr Hits](https://data.jsdelivr.com/v1/package/npm/openlayers/badge?style=rounded)](https://www.jsdelivr.com/package/npm/openlayers)
-
 [OpenLayers](https://openlayers.org/) is a high-performance, feature-packed library for creating interactive maps on the web. It can display map tiles, vector data and markers loaded from any source on any web page. OpenLayers has been developed to further the use of geographic information of all kinds. It is completely free, Open Source JavaScript, released under the 2-clause BSD License (also known as the FreeBSD).
 
 ## Getting Started
 
-Use one of the following methods to use OpenLayers in your project:
+Install the [`ol` package](https://www.npmjs.com/package/ol):
 
-* For use with webpack, Rollup, Browserify, or other module bundlers, install the [`ol` package](https://www.npmjs.com/package/ol):
-    ```
-    npm install ol
-    ```
+```
+npm install ol
+```
 
-* If you just want to add a `<script>` tag to test things out, you can link directly to one of the full builds from [cdnjs](https://cdnjs.com/libraries/openlayers) (not recommended for production)
+Import just what you need for your application:
+
+```js
+import Map from 'ol/Map';
+import View from 'ol/View';
+import TileLayer from 'ol/layer/Tile';
+import XYZ from 'ol/source/XYZ';
+
+new Map({
+  target: 'map',
+  layers: [
+    new TileLayer({
+      source: new XYZ({
+        url: 'https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png'
+      })
+    })
+  ],
+  view: new View({
+    center: [0, 0],
+    zoom: 2
+  })
+});
+```
+
+See the following examples for more detail on bundling OpenLayers with your application:
+
+ * Using [Rollup](https://github.com/openlayers/ol-rollup)
+ * Using [Webpack](https://github.com/openlayers/ol-webpack)
+ * Using [Parcel](https://github.com/openlayers/ol-parcel)
+ * Using [Browserify](https://github.com/openlayers/ol-browserify)
 
 ## Supported Browsers
 
@@ -39,3 +61,5 @@ Please see our guide on [contributing](CONTRIBUTING.md) if you're interested in
 
 - Need help? Find it on [Stack Overflow using the tag 'openlayers'](http://stackoverflow.com/questions/tagged/openlayers)
 - Follow [@openlayers](https://twitter.com/openlayers) on Twitter
+
+[![Build Status](https://travis-ci.org/openlayers/openlayers.svg?branch=master)](https://travis-ci.org/openlayers/openlayers)

changelog/upgrade-notes.md

@@ -1,5 +1,23 @@
 ## Upgrade notes
 
+### Next version
+
+### v5.2.0
+
+#### Removal of the `snapToPixel` option for `ol/style/Image` subclasses
+
+The `snapToPixel` option has been removed, and the `getSnapToPixel` and `setSnapToPixel` methods are deprecated.
+
+The renderer now snaps to integer pixels when no interaction or animation is running to get crisp rendering. During interaction or animation, it does not snap to integer pixels to avoid jitter.
+
+When rendering with the Immediate API, symbols will no longer be snapped to integer pixels. To get crisp images, set `context.imageSmoothingEnabled = false` before rendering with the Immediate API, and `context.imageSmoothingEnabled = true` afterwards.
+
+### v5.1.0
+
+#### Geometry constructor and `setCoordinates` no longer accept `null` coordinates
+
+Geometries (`ol/geom/*`) now need to be constructed with valid coordinates (center for `ol/geom/Circle`) as first constructor argument. The same applies to the `setCoordinates()` (`setCenter() for `ol/geom/Circle`) method.
+
 ### v5.0.0
 
 #### Renamed `ol/source/TileUTFGrid` to `ol/source/UTFGrid`

changelog/v5.0.2.md

@@ -0,0 +1,7 @@
+# 5.0.2
+
+The v5.0.2 release updates the package readme with new example projects.
+
+## Fixes
+
+ * [#8332](https://github.com/openlayers/openlayers/pull/8343) - Starter projects ([@tschaub](https://github.com/tschaub))

changelog/v5.0.3.md

@@ -0,0 +1,9 @@
+# 5.0.3
+
+The v5.0.3 fixes a regression in the vector tile renderer and improves the built examples and release package.
+
+## Fixes
+
+ * [#8364](https://github.com/openlayers/openlayers/pull/8364) - Make examples work in IE11 ([@ahocevar](https://github.com/ahocevar))
+ * [#8363](https://github.com/openlayers/openlayers/pull/8363) - Autogenerate src/ol/package.json ([@ahocevar](https://github.com/ahocevar))
+ * [#8371](https://github.com/openlayers/openlayers/pull/8371) - Skip rendering when there is no replay group ([@ahocevar](https://github.com/ahocevar))

changelog/v5.1.0.md

@@ -0,0 +1,64 @@
+# v5.1.0
+
+The 5.1 release adds a few new features a handful of fixes.  You should be able to upgrade without any additional work.  See the one note below regarding `null` geometry coordinates.
+
+We're working toward type checking with TypeScript.  This will complete our move away from using the Closure Compiler for type checking and compilation.  We're excited about the improved experience for application developers and will highlight some of the benefit in upcoming releases.
+
+### Upgrade Notes
+
+#### Geometry constructor and `setCoordinates` no longer accept `null` coordinates
+
+Geometries (`ol/geom/*`) now need to be constructed with valid coordinates (center for `ol/geom/Circle`) as first constructor argument. The same applies to the `setCoordinates()` (`setCenter() for `ol/geom/Circle`) method.
+
+### New Features and Fixes
+
+ * [#8409](https://github.com/openlayers/openlayers/pull/8409) - Add abstract translate to ol/geom/Geometry ([@pjeweb](https://github.com/pjeweb))
+ * [#8405](https://github.com/openlayers/openlayers/pull/8405) - Minor type fixes ([@tschaub](https://github.com/tschaub))
+ * [#8401](https://github.com/openlayers/openlayers/pull/8401) - Make webpack's css loader work ([@ahocevar](https://github.com/ahocevar))
+ * [#8403](https://github.com/openlayers/openlayers/pull/8403) - Markdown links ([@tschaub](https://github.com/tschaub))
+ * [#8402](https://github.com/openlayers/openlayers/pull/8402) - Type fixes from the typescript checks ([@fredj](https://github.com/fredj))
+ * [#8400](https://github.com/openlayers/openlayers/pull/8400) - ESLint config update ([@tschaub](https://github.com/tschaub))
+ * [#8399](https://github.com/openlayers/openlayers/pull/8399) - Copy ol.css to build dir when building package ([@ahocevar](https://github.com/ahocevar))
+ * [#8397](https://github.com/openlayers/openlayers/pull/8397) - Update rollup ([@tschaub](https://github.com/tschaub))
+ * [#8385](https://github.com/openlayers/openlayers/pull/8385) - Use class syntax ([@openlayers](https://github.com/openlayers))
+ * [#8383](https://github.com/openlayers/openlayers/pull/8383) - style/Icon: Add `setAnchor()` method ([@Turbo87](https://github.com/Turbo87))
+ * [#8368](https://github.com/openlayers/openlayers/pull/8368) - Make render listeners work with image render mode ([@ahocevar](https://github.com/ahocevar))
+ * [#8376](https://github.com/openlayers/openlayers/pull/8376) - copy ZM values to polygon in makeRegular ([@virtualcitySYSTEMS](https://github.com/virtualcitySYSTEMS))
+ * [#8372](https://github.com/openlayers/openlayers/pull/8372) - Release v5.0.3 ([@openlayers](https://github.com/openlayers))
+ * [#8364](https://github.com/openlayers/openlayers/pull/8364) - Make examples work in IE11 ([@ahocevar](https://github.com/ahocevar))
+ * [#8363](https://github.com/openlayers/openlayers/pull/8363) - Autogenerate src/ol/package.json ([@ahocevar](https://github.com/ahocevar))
+ * [#8371](https://github.com/openlayers/openlayers/pull/8371) - Skip rendering when there is no replay group ([@ahocevar](https://github.com/ahocevar))
+ * [#8362](https://github.com/openlayers/openlayers/pull/8362) - Smart flat coordinates ([@ahocevar](https://github.com/ahocevar))
+ * [#8352](https://github.com/openlayers/openlayers/pull/8352) - Set `sideEffects` to `false` instead of `"false"` ([@tschaub](https://github.com/tschaub))
+ * [#8351](https://github.com/openlayers/openlayers/pull/8351) - Fix typo in release notes ([@ahocevar](https://github.com/ahocevar))
+ * [#8350](https://github.com/openlayers/openlayers/pull/8350) - Updates for v5.0.2 ([@ahocevar](https://github.com/ahocevar))
+ * [#8349](https://github.com/openlayers/openlayers/pull/8349) - Release v5.0.1 ([@ahocevar](https://github.com/ahocevar))
+ * [#8343](https://github.com/openlayers/openlayers/pull/8343) - Starter projects ([@tschaub](https://github.com/tschaub))
+ * [#8347](https://github.com/openlayers/openlayers/pull/8347) - Fix typos in release notes ([@ahocevar](https://github.com/ahocevar))
+ * [#8346](https://github.com/openlayers/openlayers/pull/8346) - Release v5.0.1 ([@openlayers](https://github.com/openlayers))
+ * [#8342](https://github.com/openlayers/openlayers/pull/8342) - Fix links and description in quickstart tutorial ([@ahocevar](https://github.com/ahocevar))
+ * [#8344](https://github.com/openlayers/openlayers/pull/8344) - Updated issue and pr templates ([@tschaub](https://github.com/tschaub))
+ * [#8341](https://github.com/openlayers/openlayers/pull/8341) - Set sideEffects: false flag ([@ahocevar](https://github.com/ahocevar))
+ * [#8333](https://github.com/openlayers/openlayers/pull/8333) - Fix wrong return type for readHref function ([@openlayers](https://github.com/openlayers))
+ * [#8329](https://github.com/openlayers/openlayers/pull/8329) - Better jsdoc typing ([@fredj](https://github.com/fredj))
+ * [#8319](https://github.com/openlayers/openlayers/pull/8319) - Remove reference to setProj4 function in documentation ([@fredj](https://github.com/fredj))
+
+
+<details>
+ <summary>Dependency Updates</summary>
+
+ * [#8410](https://github.com/openlayers/openlayers/pull/8410) - Update rollup to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#8408](https://github.com/openlayers/openlayers/pull/8408) - Update rollup to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#8386](https://github.com/openlayers/openlayers/pull/8386) - Update fs-extra to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#8382](https://github.com/openlayers/openlayers/pull/8382) - Update webpack to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#8373](https://github.com/openlayers/openlayers/pull/8373) - Update webpack to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#8355](https://github.com/openlayers/openlayers/pull/8355) - Update recast to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#8354](https://github.com/openlayers/openlayers/pull/8354) - Update webpack to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#8348](https://github.com/openlayers/openlayers/pull/8348) - Update webpack to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#8338](https://github.com/openlayers/openlayers/pull/8338) - Update recast to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#8332](https://github.com/openlayers/openlayers/pull/8332) - Update webpack to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#8326](https://github.com/openlayers/openlayers/pull/8326) - Update webpack to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#8321](https://github.com/openlayers/openlayers/pull/8321) - Update rollup to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#8318](https://github.com/openlayers/openlayers/pull/8318) - Update webpack to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+
+</details>

changelog/v5.1.1.md

@@ -0,0 +1,3 @@
+# 5.1.1
+
+The 5.1.1 release is a patch to include the readme in the package.  See the [5.1.0 notes](https://github.com/openlayers/openlayers/releases/tag/v5.1.0) for detail on the 5.1 release.

changelog/v5.1.2.md

@@ -0,0 +1,5 @@
+# 5.1.2
+
+The 5.1.2 release is a patch to fix the API docs.  See the [5.1.0 notes](https://github.com/openlayers/openlayers/releases/tag/v5.1.0) for detail on the 5.1 release.
+
+ * [#8413](https://github.com/openlayers/openlayers/pull/8413) - Remove extra curly in type ([@tschaub](https://github.com/tschaub))

changelog/v5.1.3.md

@@ -0,0 +1,6 @@
+# 5.1.3
+
+The 5.1.3 release is a patch to fix the API docs and the legacy full build.  See the [5.1.0 notes](https://github.com/openlayers/openlayers/releases/tag/v5.1.0) for detail on the 5.1 release.
+
+ * [#8417](https://github.com/openlayers/openlayers/pull/8417) - Minor doc updates ([@tschaub](https://github.com/tschaub))
+ * [#8418](https://github.com/openlayers/openlayers/pull/8418) - Set api annotation on classdesc, not constructor ([@ahocevar](https://github.com/ahocevar))

changelog/v5.2.0.md

@@ -0,0 +1,86 @@
+# v5.1.0
+
+The 5.2 release adds a few new features a handful of fixes, including regressions that were reported after the 5.1 release.  You should be able to upgrade without any additional work.  See the one note below regarding `snapToPixel` on `ol/style/Image` and subclasses.
+
+We're still working toward type checking with TypeScript.  Until that is complete, we apologize for some flwas in the online API documentation.  We're excited about the improved experience for application developers when the effort is finished, and will highlight some of the benefit in upcoming releases.
+
+### Upgrade Notes
+
+#### Removal of the `snapToPixel` option for `ol/style/Image` subclasses
+
+The `snapToPixel` option has been removed, and the `getSnapToPixel` and `setSnapToPixel` methods are deprecated.
+
+The renderer now snaps to integer pixels when no interaction or animation is running to get crisp rendering. During interaction or animation, it does not snap to integer pixels to avoid jitter.
+
+When rendering with the Immediate API, symbols will no longer be snapped to integer pixels. To get crisp images, set `context.imageSmoothingEnabled = false` before rendering with the Immediate API, and `context.imageSmoothingEnabled = true` afterwards.
+
+### New Features and Fixes
+
+ * [#8511](https://github.com/openlayers/openlayers/pull/8511) - Update IGN API key ([@openlayers](https://github.com/openlayers))
+ * [#8547](https://github.com/openlayers/openlayers/pull/8547) - Fix port number in developing doc ([@pgiraud](https://github.com/pgiraud))
+ * [#8546](https://github.com/openlayers/openlayers/pull/8546) - Update projection FAQ for v5 ([@ahocevar](https://github.com/ahocevar))
+ * [#8481](https://github.com/openlayers/openlayers/pull/8481) - Expose some internal functions ([@gberaudo](https://github.com/gberaudo))
+ * [#8510](https://github.com/openlayers/openlayers/pull/8510) - Fix WMTS URLs with dimensions ([@gberaudo](https://github.com/gberaudo))
+ * [#8524](https://github.com/openlayers/openlayers/pull/8524) - Fix compatiblity with XHTML content type ([@NeoRaider](https://github.com/NeoRaider))
+ * [#8532](https://github.com/openlayers/openlayers/pull/8532) - Add 'rendercomplete' event ([@ahocevar](https://github.com/ahocevar))
+ * [#8529](https://github.com/openlayers/openlayers/pull/8529) - Update link to base class in docs ([@TDesjardins](https://github.com/TDesjardins))
+ * [#8528](https://github.com/openlayers/openlayers/pull/8528) - Update link to base class in docs ([@TDesjardins](https://github.com/TDesjardins))
+ * [#8525](https://github.com/openlayers/openlayers/pull/8525) - Re-export Projection from ol/proj for convenience ([@tschaub](https://github.com/tschaub))
+ * [#8499](https://github.com/openlayers/openlayers/pull/8499) - Round center in viewState to pixels ([@ahocevar](https://github.com/ahocevar))
+ * [#8520](https://github.com/openlayers/openlayers/pull/8520) - Remove redundant if block ([@openlayers](https://github.com/openlayers))
+ * [#8515](https://github.com/openlayers/openlayers/pull/8515) - More convenient select and sketch layer management ([@ahocevar](https://github.com/ahocevar))
+ * [#8503](https://github.com/openlayers/openlayers/pull/8503) - Avoid block scope issues in transpiled code ([@ahocevar](https://github.com/ahocevar))
+ * [#8490](https://github.com/openlayers/openlayers/pull/8490) - WMTS getCapabilities readCoodinates more than one whitespace delimiter ([@MarquesDeAzevedo](https://github.com/MarquesDeAzevedo))
+ * [#8489](https://github.com/openlayers/openlayers/pull/8489) - Use .prototype. only where necessary ([@ahocevar](https://github.com/ahocevar))
+ * [#8478](https://github.com/openlayers/openlayers/pull/8478) - Check font availability with multiple font weights ([@ahocevar](https://github.com/ahocevar))
+ * [#8483](https://github.com/openlayers/openlayers/pull/8483) - Don't create Polygon with null coordinates ([@fredj](https://github.com/fredj))
+ * [#8471](https://github.com/openlayers/openlayers/pull/8471) - Add getUrl and getImageExtent to ImageStatic API ([@samuel-girard](https://github.com/samuel-girard))
+ * [#8470](https://github.com/openlayers/openlayers/pull/8470) - Update Tile loading API docs ([@scroach](https://github.com/scroach))
+ * [#8477](https://github.com/openlayers/openlayers/pull/8477) - Expose original getGutter ([@gberaudo](https://github.com/gberaudo))
+ * [#8466](https://github.com/openlayers/openlayers/pull/8466) - Add onFocusOnly option to interaction defaults ([@ahocevar](https://github.com/ahocevar))
+ * [#8465](https://github.com/openlayers/openlayers/pull/8465) - Do not prevent default on pointermove ([@ahocevar](https://github.com/ahocevar))
+ * [#8461](https://github.com/openlayers/openlayers/pull/8461) - Fix double backtick typo ([@lionralfs](https://github.com/lionralfs))
+ * [#8452](https://github.com/openlayers/openlayers/pull/8452) - Remove extra translate function in Geometry, add missing api tag ([@fredj](https://github.com/fredj))
+ * [#8451](https://github.com/openlayers/openlayers/pull/8451) - Remove unimplemented functions ([@fredj](https://github.com/fredj))
+ * [#8450](https://github.com/openlayers/openlayers/pull/8450) - Mark properties of ReadOptions and WriteOptions as optional ([@fredj](https://github.com/fredj))
+ * [#8443](https://github.com/openlayers/openlayers/pull/8443) - Explicit void ([@tschaub](https://github.com/tschaub))
+ * [#8437](https://github.com/openlayers/openlayers/pull/8437) - Avoid shadowing EventTarget ([@tschaub](https://github.com/tschaub))
+ * [#8439](https://github.com/openlayers/openlayers/pull/8439) - Fewer dots in types ([@tschaub](https://github.com/tschaub))
+ * [#8441](https://github.com/openlayers/openlayers/pull/8441) - Fix loaded script for the example-verbatim examples ([@fredj](https://github.com/fredj))
+ * [#8435](https://github.com/openlayers/openlayers/pull/8435) - Call setCoordinates on the point instance ([@fredj](https://github.com/fredj))
+ * [#8428](https://github.com/openlayers/openlayers/pull/8428) - Type name on same line as type ([@tschaub](https://github.com/tschaub))
+ * [#8422](https://github.com/openlayers/openlayers/pull/8422) - Improve JSDoc such that `ng build --prod` with angular/cli 6.0.8 succeeds again ([@jkoelewijn](https://github.com/jkoelewijn))
+ * [#8396](https://github.com/openlayers/openlayers/pull/8396) - Fix ol.interaction.Draw~createRegularPolygon ([@iamplex](https://github.com/iamplex))
+ * [#8420](https://github.com/openlayers/openlayers/pull/8420) - Keep function names when building examples ([@ahocevar](https://github.com/ahocevar))
+ * [#8419](https://github.com/openlayers/openlayers/pull/8419) - Release v5.1.3 ([@tschaub](https://github.com/tschaub))
+ * [#8417](https://github.com/openlayers/openlayers/pull/8417) - Minor doc updates ([@tschaub](https://github.com/tschaub))
+ * [#8418](https://github.com/openlayers/openlayers/pull/8418) - Set api annotation on classdesc, not constructor ([@ahocevar](https://github.com/ahocevar))
+ * [#8414](https://github.com/openlayers/openlayers/pull/8414) - Updates for 5.1.2 ([@tschaub](https://github.com/tschaub))
+ * [#8413](https://github.com/openlayers/openlayers/pull/8413) - Remove extra curly in type ([@tschaub](https://github.com/tschaub))
+ * [#8412](https://github.com/openlayers/openlayers/pull/8412) - Changes for 5.1.1. ([@tschaub](https://github.com/tschaub))
+
+
+<details>
+  <summary>Dependency Updates</summary>
+
+ * [#8543](https://github.com/openlayers/openlayers/pull/8543) - Update rollup to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#8541](https://github.com/openlayers/openlayers/pull/8541) - Update proj4 to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#8542](https://github.com/openlayers/openlayers/pull/8542) - Update rollup-plugin-commonjs to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#8533](https://github.com/openlayers/openlayers/pull/8533) - Update webpack to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#8530](https://github.com/openlayers/openlayers/pull/8530) - Update webpack to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#8522](https://github.com/openlayers/openlayers/pull/8522) - Update marked to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#8505](https://github.com/openlayers/openlayers/pull/8505) - Update karma to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#8501](https://github.com/openlayers/openlayers/pull/8501) - Update rollup-plugin-commonjs to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#8495](https://github.com/openlayers/openlayers/pull/8495) - Update rollup to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#8493](https://github.com/openlayers/openlayers/pull/8493) - Update clean-css-cli to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#8491](https://github.com/openlayers/openlayers/pull/8491) - Update rollup to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#8486](https://github.com/openlayers/openlayers/pull/8486) - Update webpack to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#8476](https://github.com/openlayers/openlayers/pull/8476) - Update webpack to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#8475](https://github.com/openlayers/openlayers/pull/8475) - Update clean-css-cli to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#8469](https://github.com/openlayers/openlayers/pull/8469) - Update rollup to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#8453](https://github.com/openlayers/openlayers/pull/8453) - Update webpack to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#8447](https://github.com/openlayers/openlayers/pull/8447) - Update rollup-plugin-commonjs to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#8426](https://github.com/openlayers/openlayers/pull/8426) - Update webpack to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+
+
+</details>

config/jsdoc/api/template/publish.js

@@ -168,9 +168,9 @@ function generateSourceFiles(sourceFiles) {
  * for display purposes. This function mutates the original arrays.
  *
  * @private
- * @param {Array.<module:jsdoc/doclet.Doclet>} doclets - The array of classes and functions to
+ * @param {Array<module:jsdoc/doclet.Doclet>} doclets - The array of classes and functions to
  * check.
- * @param {Array.<module:jsdoc/doclet.Doclet>} modules - The array of module doclets to search.
+ * @param {Array<module:jsdoc/doclet.Doclet>} modules - The array of module doclets to search.
  */
 function attachModuleSymbols(doclets, modules) {
   const symbols = {};

config/jsdoc/api/template/tmpl/layout.tmpl

@@ -4,6 +4,13 @@ var version = obj.packageInfo.version;
 <!DOCTYPE html>
 <html lang="en">
 <head>
+    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-2577926-1"></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+      gtag('config', 'UA-2577926-1');
+    </script>
     <meta charset="utf-8">
     <title>OpenLayers v<?js= version ?> API - <?js= title ?></title>
     <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=fetch"></script>

config/rollup.js

@@ -7,7 +7,7 @@ import buble from 'rollup-plugin-buble';
 import sourcemaps from 'rollup-plugin-sourcemaps';
 
 export default {
-  input: 'src/index.js',
+  input: 'build/index.js',
   output: [
     {file: 'build/ol.js', format: 'iife', sourcemap: true}
   ],

doc/faq.md

@@ -65,20 +65,19 @@ var map = new ol.Map({
 ```
 
 ```javascript
-// To use other projections, you have to register the projection in OpenLayers:
+// To use other projections, you have to register the projection in OpenLayers.
+// This can easily be done with [https://proj4js.org](proj4)
 //
 // By default OpenLayers does not know about the EPSG:21781 (Swiss) projection.
 // So we create a projection instance for EPSG:21781 and pass it to
 // ol.proj.addProjection to make it available to the library for lookup by its
 // code.
-var swissProjection = new ol.proj.Projection({
-  code: 'EPSG:21781',
-  // The extent is used to determine zoom level 0. Recommended values for a
-  // projection's validity extent can be found at https://epsg.io/.
-  extent: [485869.5728, 76443.1884, 837076.5648, 299941.7864],
-  units: 'm'
-});
-ol.proj.addProjection(swissProjection);
+proj4.defs('EPSG:21781',
+  '+proj=somerc +lat_0=46.95240555555556 +lon_0=7.439583333333333 +k_0=1 ' +
+  '+x_0=600000 +y_0=200000 +ellps=bessel ' +
+  '+towgs84=660.077,13.551,369.344,2.484,1.783,2.939,5.66 +units=m +no_defs');
+ol.proj.proj4.register(proj4);
+var swissProjection = ol.proj.get('EPSG:21781');
 
 // we can now use the projection:
 var map = new ol.Map({

doc/quickstart.hbs

@@ -130,7 +130,7 @@ The `layers: [ ... ]` array is used to define the list of layers available in th
     ]
 ```
 
-Layers in OpenLayers are defined with a type (Image, Tile or Vector) which contains a source. The source is the protocol used to get the map tiles. You can consult the list of [available layer sources here](/en/{{ latest }}/apidoc/ol.source.html)
+Layers in OpenLayers are defined with a type (Image, Tile or Vector) which contains a source. The source is the protocol used to get the map tiles.
 
 The next part of the `Map` object is the `View`. The view allows to specify the center, resolution, and rotation of the map. The simplest way to define a view is to define a center point and a zoom level.  Note that zoom level 0 is zoomed out.
 

doc/tutorials/background.md

@@ -37,13 +37,13 @@ Class hierarchies grouped by their parent are provided in a subfolder of the pac
 For convenience, these are also available as named exports, e.g.
 
 ```js
-import {Map, View} from `ol`;
-import {Tile, Vector} from `ol/layer`;
+import {Map, View} from 'ol';
+import {Tile, Vector} from 'ol/layer';
 ```
 
 In addition to these re-exported classes, modules with lowercase names also provide constants or functions as named exports:
 
 ```js
-import {inherits} from `ol`;
-import {fromLonLat} from `ol/proj`;
+import {inherits} from 'ol';
+import {fromLonLat} from 'ol/proj';
 ```

doc/tutorials/bundle.md

@@ -45,7 +45,7 @@ const map = new Map({
 });
 ```
 
-You will also need an `ìndex.html` file that will use your bundle. Here is a simple example:
+You will also need an `index.html` file that will use your bundle. Here is a simple example:
 
 ```html
 <!DOCTYPE html>

doc/tutorials/concepts.hbs

@@ -6,27 +6,34 @@ layout: doc.hbs
 # Basic Concepts
 
 ## Map
-The core component of OpenLayers is the map (`Map`). It is rendered to a `target` container (e.g. a `div` element on the web page that contains the map). All map properties can either be configured at construction time, or by using setter methods, e.g. `setTarget()`.
+
+The core component of OpenLayers is the map (`ol/Map`). It is rendered to a `target` container (e.g. a `div` element on the web page that contains the map). All map properties can either be configured at construction time, or by using setter methods, e.g. `setTarget()`.
+
+The markup below could be used to create a `<div>` that contains your map.
 
 ```xml
 <div id="map" style="width: 100%, height: 400px"></div>
-<script>
-  import Map from 'ol/Map';
+```
 
-  var map = new Map({target: 'map'});
-</script>
+The script below constructs a map that is rendered in the `<div>` above, using the `map` id of the element as a selector.
+
+```js
+import Map from 'ol/Map';
+
+var map = new Map({target: 'map'});
 ```
 
 ## View
-`Map` is not responsible for things like center, zoom level and projection of the map. Instead, these are properties of a `View` instance.
+
+The map is not responsible for things like center, zoom level and projection of the map. Instead, these are properties of a `ol/View` instance.
 
 ```js
-  import View from 'ol/View';
+import View from 'ol/View';
 
-  map.setView(new View({
+map.setView(new View({
   center: [0, 0],
   zoom: 2
-  }));
+}));
 ```
 
 A `View` also has a `projection`. The projection determines the coordinate system of the `center` and the units for map resolution calculations. If not specified (like in the above snippet), the default projection is Spherical Mercator (EPSG:3857), with meters as map units.
@@ -35,54 +42,49 @@ The `zoom` option is a convenient way to specify the map resolution. The availab
 
 
 ## Source
-To get remote data for a layer, OpenLayers uses `source/Source` subclasses. These are available for free and commercial map tile services like OpenStreetMap or Bing, for OGC sources like WMS or WMTS, and for vector data in formats like GeoJSON or KML.
+
+To get remote data for a layer, OpenLayers uses `ol/source/Source` subclasses. These are available for free and commercial map tile services like OpenStreetMap or Bing, for OGC sources like WMS or WMTS, and for vector data in formats like GeoJSON or KML.
 
 ```js
-  import OSM from 'ol/source/OSM';
+import OSM from 'ol/source/OSM';
 
-  var osmSource = OSM();
+var osmSource = OSM();
 ```
 
 ## Layer
-A layer is a visual representation of data from a `source`. OpenLayers has four basic types of layers: `layer/Tile`, `layer/Image`, `layer/Vector` and `layer/VectorTile`.
 
-`layer/Tile` is for layer sources that provide pre-rendered, tiled images in grids that are organized by zoom levels for specific resolutions.
+A layer is a visual representation of data from a `source`. OpenLayers has four basic types of layers:
 
-`layer/Image` is for server rendered images that are available for arbitrary extents and resolutions.
-
-`layer/Vector` is for vector data that is rendered client-side.
-
-`layer/VectorTile` is for tiled vector data that is rendered client-side.
+ * `ol/layer/Tile` - Renders sources that provide tiled images in grids that are organized by zoom levels for specific resolutions.
+ * `ol/layer/Image` - Renders sources that provide map images at arbitrary extents and resolutions.
+ * `ol/layer/Vector` - Renders vector data client-side.
+ * `ol/layer/VectorTile` - Renders data that is provided as vector tiles.
 
 ```js
-  import TileLayer from 'ol/layer/Tile';
+import TileLayer from 'ol/layer/Tile';
 
-  var osmLayer = new TileLayer({source: osmSource});
-  map.addLayer(osmLayer);
+var osmLayer = new TileLayer({source: osmSource});
+map.addLayer(osmLayer);
 ```
 
 ## Putting it all together
 
+The above snippets can be combined into a single script that renders a map with a single tile layer:
 
-The above snippets can be conflated to a self contained map configuration with view and layers:
+```js
+import Map from 'ol/Map';
+import View from 'ol/View';
+import OSM from 'ol/source/OSM';
+import TileLayer from 'ol/source/Tile';
 
-```xml
-<div id="map" style="width: 100%, height: 400px"></div>
-<script>
-  import Map from 'ol/Map';
-  import View from 'ol/View';
-  import OSM from 'ol/source/OSM';
-  import TileLayer from 'ol/source/Tile';
-
-  new Map({
+new Map({
   layers: [
-      new TileLayer({source: new ol.source.OSM()})
+    new TileLayer({source: new OSM()})
   ],
   view: new View({
     center: [0, 0],
     zoom: 2
   }),
   target: 'map'
-  });
-</script>
+});
 ```

doc/tutorials/raster-reprojection.md

@@ -12,9 +12,9 @@ The view in any Proj4js supported coordinate reference system is possible and pr
 # Usage
 The API usage is very simple. Just specify proper projection (e.g. using [EPSG](https://epsg.io) code) on `ol/View`:
 ```js
-import {Map, View} from `ol`;
-import TileLayer from `ol/layer/Tile`;
-import TileWMS from `ol/source/TileWMS`;
+import {Map, View} from 'ol';
+import TileLayer from 'ol/layer/Tile';
+import TileWMS from 'ol/source/TileWMS';
 
 var map = new Map({
   target: 'map',

examples/color-manipulation.js

@@ -20,8 +20,8 @@ const twoPi = 2 * Math.PI;
 
 /**
  * Convert an RGB pixel into an HCL pixel.
- * @param {Array.<number>} pixel A pixel in RGB space.
- * @return {Array.<number>} A pixel in HCL space.
+ * @param {Array<number>} pixel A pixel in RGB space.
+ * @return {Array<number>} A pixel in HCL space.
  */
 function rgb2hcl(pixel) {
   const red = rgb2xyz(pixel[0]);
@@ -55,8 +55,8 @@ function rgb2hcl(pixel) {
 
 /**
  * Convert an HCL pixel into an RGB pixel.
- * @param {Array.<number>} pixel A pixel in HCL space.
- * @return {Array.<number>} A pixel in RGB space.
+ * @param {Array<number>} pixel A pixel in HCL space.
+ * @return {Array<number>} A pixel in RGB space.
  */
 function hcl2rgb(pixel) {
   const h = pixel[0];

examples/custom-controls.js

@@ -1,4 +1,4 @@
-import {inherits} from '../src/ol/index.js';
+import {inherits} from '../src/ol/util.js';
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
 import {defaults as defaultControls, Control} from '../src/ol/control.js';

examples/custom-interactions.js

@@ -1,4 +1,4 @@
-import {inherits} from '../src/ol/index.js';
+import {inherits} from '../src/ol/util.js';
 import Feature from '../src/ol/Feature.js';
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
@@ -29,7 +29,7 @@ app.Drag = function() {
   });
 
   /**
-   * @type {module:ol~Pixel}
+   * @type {module:ol/pixel~Pixel}
    * @private
    */
   this.coordinate_ = null;

examples/draw-shapes.js

@@ -40,9 +40,6 @@ function addInteraction() {
     } else if (value === 'Star') {
       value = 'Circle';
       geometryFunction = function(coordinates, geometry) {
-        if (!geometry) {
-          geometry = new Polygon(null);
-        }
         const center = coordinates[0];
         const last = coordinates[1];
         const dx = center[0] - last[0];
@@ -59,7 +56,11 @@ function addInteraction() {
           newCoordinates.push([center[0] + offsetX, center[1] + offsetY]);
         }
         newCoordinates.push(newCoordinates[0].slice());
+        if (!geometry) {
+          geometry = new Polygon([newCoordinates]);
+        } else {
           geometry.setCoordinates([newCoordinates]);
+        }
         return geometry;
       };
     }

examples/dynamic-data.js

@@ -22,7 +22,6 @@ const map = new Map({
 const imageStyle = new Style({
   image: new CircleStyle({
     radius: 5,
-    snapToPixel: false,
     fill: new Fill({color: 'yellow'}),
     stroke: new Stroke({color: 'red', width: 1})
   })
@@ -31,7 +30,6 @@ const imageStyle = new Style({
 const headInnerImageStyle = new Style({
   image: new CircleStyle({
     radius: 2,
-    snapToPixel: false,
     fill: new Fill({color: 'blue'})
   })
 });
@@ -39,7 +37,6 @@ const headInnerImageStyle = new Style({
 const headOuterImageStyle = new Style({
   image: new CircleStyle({
     radius: 5,
-    snapToPixel: false,
     fill: new Fill({color: 'black'})
   })
 });

examples/export-map.js

@@ -30,7 +30,7 @@ const map = new Map({
 });
 
 document.getElementById('export-png').addEventListener('click', function() {
-  map.once('postcompose', function(event) {
+  map.once('rendercomplete', function(event) {
     const canvas = event.context.canvas;
     if (navigator.msSaveBlob) {
       navigator.msSaveBlob(canvas.msToBlob(), 'map.png');

examples/export-pdf.js

@@ -3,7 +3,6 @@ import View from '../src/ol/View.js';
 import {defaults as defaultControls} from '../src/ol/control.js';
 import WKT from '../src/ol/format/WKT.js';
 import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
-import {unByKey} from '../src/ol/Observable.js';
 import {OSM, Vector as VectorSource} from '../src/ol/source.js';
 
 const raster = new TileLayer({
@@ -48,9 +47,6 @@ const dims = {
   a5: [210, 148]
 };
 
-let loading = 0;
-let loaded = 0;
-
 const exportButton = document.getElementById('export-pdf');
 
 exportButton.addEventListener('click', function() {
@@ -66,57 +62,22 @@ exportButton.addEventListener('click', function() {
   const size = /** @type {module:ol/size~Size} */ (map.getSize());
   const extent = map.getView().calculateExtent(size);
 
-  const source = raster.getSource();
-
-  const tileLoadStart = function() {
-    ++loading;
-  };
-
-  let timer;
-  let keys = [];
-
-  function tileLoadEndFactory(canvas) {
-    return () => {
-      ++loaded;
-      if (timer) {
-        clearTimeout(timer);
-        timer = null;
-      }
-      if (loading === loaded) {
-        timer = window.setTimeout(() => {
-          loading = 0;
-          loaded = 0;
+  map.once('rendercomplete', function(event) {
+    const canvas = event.context.canvas;
     const data = canvas.toDataURL('image/jpeg');
     const pdf = new jsPDF('landscape', undefined, format);
     pdf.addImage(data, 'JPEG', 0, 0, dim[0], dim[1]);
     pdf.save('map.pdf');
-          keys.forEach(unByKey);
-          keys = [];
+    // Reset original map size
     map.setSize(size);
     map.getView().fit(extent, {size});
-          map.renderSync();
     exportButton.disabled = false;
     document.body.style.cursor = 'auto';
-        }, 500);
-      }
-    };
-  }
-
-  map.once('postcompose', function(event) {
-    const canvas = event.context.canvas;
-    const tileLoadEnd = tileLoadEndFactory(canvas);
-    keys = [
-      source.on('tileloadstart', tileLoadStart),
-      source.on('tileloadend', tileLoadEnd),
-      source.on('tileloaderror', tileLoadEnd)
-    ];
-    tileLoadEnd();
   });
 
+  // Set print size
   const printSize = [width, height];
   map.setSize(printSize);
   map.getView().fit(extent, {size: printSize});
-  loaded = -1;
-  map.renderSync();
 
 }, false);

examples/feature-animation.js

@@ -65,7 +65,6 @@ function flash(feature) {
     const style = new Style({
       image: new CircleStyle({
         radius: radius,
-        snapToPixel: false,
         stroke: new Stroke({
           color: 'rgba(255, 0, 0, ' + opacity + ')',
           width: 0.25 + opacity

examples/feature-move-animation.js

@@ -94,7 +94,6 @@ const styles = {
   'geoMarker': new Style({
     image: new CircleStyle({
       radius: 7,
-      snapToPixel: false,
       fill: new Fill({color: 'black'}),
       stroke: new Stroke({
         color: 'white', width: 2

examples/geolocation-orientation.html

@@ -44,7 +44,7 @@ tags: "fullscreen, geolocation, orientation, mobile"
         <button id="geolocate">Geolocate Me!</button>
         <button id="simulate">Simulate</button>
     </div>
-    <script src="./resources/common.js" type="text/javascript"></script>
-    <script src="loader.js?id=geolocation-orientation" type="text/javascript"></script>
+    <script src="common.js"></script>
+    <script src="geolocation-orientation.js"></script>
   </body>
 </html>

examples/image-filter.js

@@ -101,7 +101,7 @@ imagery.on('postcompose', function(event) {
  * Apply a convolution kernel to canvas.  This works for any size kernel, but
  * performance starts degrading above 3 x 3.
  * @param {CanvasRenderingContext2D} context Canvas 2d context.
- * @param {Array.<number>} kernel Kernel.
+ * @param {Array<number>} kernel Kernel.
  */
 function convolve(context, kernel) {
   const canvas = context.canvas;

examples/interaction-options.html

@@ -0,0 +1,19 @@
+---
+layout: example.html
+title: Interaction Options
+shortdesc: Shows interaction options for custom scroll and zoom behavior.
+docs: >
+  This example uses a custom `ol/interaction/defaults` configuration:
+
+   * By default, wheel/trackpad zoom and drag panning is always active, which
+     can be unexpected on pages with a lot of scrollable content and an embedded
+     map. To perform wheel/trackpad zoom and drag-pan actions only when the map
+     has the focus, set `onFocusOnly: true` as option. This requires a map div
+     with a `tabindex` attribute set.
+   * By default, pinch-zoom and wheel/trackpad zoom interactions can leave the
+     map at fractional zoom levels. If instead you want to constrain
+     wheel/trackpad zooming to integer zoom levels, set
+     `constrainResolution: true`.
+tags: "trackpad, mousewheel, zoom, scroll, interaction, fractional"
+---
+<div tabindex="1" id="map" class="map"></div>

examples/interaction-options.js

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

examples/mobile-full-screen.html

@@ -25,8 +25,7 @@ cloak:
   </head>
   <body>
     <div id="map" class="map"></div>
-    <script src="https://code.jquery.com/jquery-2.2.3.min.js" type="text/javascript"></script>
-    <script src="./resources/common.js" type="text/javascript"></script>
-    <script src="loader.js?id=mobile-full-screen" type="text/javascript"></script>
+    <script src="common.js"></script>
+    <script src="mobile-full-screen.js"></script>
   </body>
 </html>

examples/mousewheel-zoom.html

@@ -1,18 +0,0 @@
----
-layout: example.html
-title: Mousewheel/Trackpad Zoom
-shortdesc: Shows advanced wheel/trackpad zoom options.
-docs: >
-  This example uses a custom `ol/interaction/MouseWheelZoom` configuration:
-
-   * By default, wheel/trackpad zoom is always active, which can be unexpected
-     on pages with a lot of scrollable content and an embedded map. To perform
-     wheel/trackpad zoom actions only when the map has the focus, set
-     `condition: focus` as constructor option. This requires
-     a map div with a `tabindex` attribute set.
-   * By default, the interaction can leave the map at fractional zoom levels. If
-     instead you want to constrain wheel/trackpad zooming to integer zoom
-     levels, set `constrainResolution: true`.
-tags: "trackpad, mousewheel, zoom, scroll, interaction"
----
-<div tabindex="1" id="map" class="map"></div>

examples/mousewheel-zoom.js

@@ -1,26 +0,0 @@
-import Map from '../src/ol/Map.js';
-import View from '../src/ol/View.js';
-import {defaults as defaultInteractions, MouseWheelZoom} from '../src/ol/interaction.js';
-import {focus} from '../src/ol/events/condition.js';
-import TileLayer from '../src/ol/layer/Tile.js';
-import OSM from '../src/ol/source/OSM.js';
-
-
-const map = new Map({
-  interactions: defaultInteractions({mouseWheelZoom: false}).extend([
-    new MouseWheelZoom({
-      constrainResolution: true, // force zooming to a integer zoom
-      condition: focus // only wheel/trackpad zoom when the map has the focus
-    })
-  ]),
-  layers: [
-    new TileLayer({
-      source: new OSM()
-    })
-  ],
-  target: 'map',
-  view: new View({
-    center: [0, 0],
-    zoom: 2
-  })
-});

examples/raster.js

@@ -12,7 +12,7 @@ const bins = 10;
 /**
  * Calculate the Vegetation Greenness Index (VGI) from an input pixel.  This
  * is a rough estimate assuming that pixel values correspond to reflectance.
- * @param {Array.<number>} pixel An array of [R, G, B, A] values.
+ * @param {Array<number>} pixel An array of [R, G, B, A] values.
  * @return {number} The VGI value for the given pixel.
  */
 function vgi(pixel) {

examples/shaded-relief.js

@@ -7,7 +7,7 @@ import {OSM, Raster, XYZ} from '../src/ol/source.js';
 /**
  * Generates a shaded relief image given elevation data.  Uses a 3x3
  * neighborhood for determining slope and aspect.
- * @param {Array.<ImageData>} inputs Array of input images.
+ * @param {Array<ImageData>} inputs Array of input images.
  * @param {Object} data Data added in the "beforeoperations" event.
  * @return {ImageData} Output image.
  */

examples/street-labels.html

@@ -1,7 +1,7 @@
 ---
 layout: example.html
 title: Street Labels
-shortdesc: Render street names with a custom render.
+shortdesc: Render street names.
 docs: >
   Example showing the use of a text style with `placement: 'line'` to render text along a path.
 tags: "vector, label, streets"

examples/templates/example.html

@@ -1,6 +1,13 @@
 <!DOCTYPE html>
 <html lang="en-US">
   <head>
+    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-2577926-1"></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+      gtag('config', 'UA-2577926-1');
+    </script>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=Edge">
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">

examples/webpack/config.js

@@ -1,3 +1,4 @@
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
 const CopyPlugin = require('copy-webpack-plugin');
 const ExampleBuilder = require('./example-builder');
 const fs = require('fs');
@@ -18,7 +19,29 @@ module.exports = {
   context: src,
   target: 'web',
   entry: entry,
+  module: {
+    rules: [{
+      use: {
+        loader: 'buble-loader'
+      },
+      test: /\.js$/,
+      include: [
+        path.join(__dirname, '..', '..', 'src'),
+        path.join(__dirname, '..')
+      ]
+    }]
+  },
   optimization: {
+    minimizer: [
+      new UglifyJsPlugin({
+        sourceMap: true,
+        uglifyOptions: {
+          mangle: {
+            keep_fnames: true
+          }
+        }
+      })
+    ],
     runtimeChunk: {
       name: 'common'
     },

examples/webpack/example-builder.js

@@ -26,7 +26,7 @@ handlebars.registerHelper('indent', (text, options) => {
  * Create an inverted index of keywords from examples.  Property names are
  * lowercased words.  Property values are objects mapping example index to word
  * count.
- * @param {Array.<Object>} exampleData Array of example data objects.
+ * @param {Array<Object>} exampleData Array of example data objects.
  * @return {Object} Word index.
  */
 function createWordIndex(exampleData) {
@@ -64,20 +64,20 @@ function createWordIndex(exampleData) {
 /**
  * Gets the source for the chunk that matches the jsPath
  * @param {Object} chunk Chunk.
- * @param {string} jsPath Path of the file.
+ * @param {string} jsName Name of the file.
  * @return {string} The source.
  */
-function getJsSource(chunk, jsPath) {
+function getJsSource(chunk, jsName) {
   let jsSource;
   for (let i = 0, ii = chunk.modules.length; i < ii; ++i) {
     const module = chunk.modules[i];
     if (module.modules) {
-      jsSource = getJsSource(module, jsPath);
+      jsSource = getJsSource(module, jsName);
       if (jsSource) {
         return jsSource;
       }
     }
-    if (module.identifier == jsPath) {
+    if (module.identifier.endsWith(jsName)) {
       return module.source;
     }
   }
@@ -151,8 +151,7 @@ ExampleBuilder.prototype.render = async function(dir, chunk) {
 
   // add in script tag
   const jsName = `${name}.js`;
-  const jsPath = path.join(dir, jsName);
-  let jsSource = getJsSource(chunk, jsPath);
+  let jsSource = getJsSource(chunk, path.join('.', jsName));
   jsSource = jsSource.replace(/'\.\.\/src\//g, '\'');
   if (data.cloak) {
     for (const entry of data.cloak) {

examples/wmts-ign.js

@@ -37,12 +37,11 @@ const tileGrid = new WMTSTileGrid({
   matrixIds: matrixIds
 });
 
-// API key valid for 'openlayers.org' and 'localhost'.
-// Expiration date is 06/29/2018.
-const key = '2mqbg0z6cx7ube8gsou10nrt';
+// For more information about the IGN API key see
+// https://geoservices.ign.fr/blog/2017/06/28/geoportail_sans_compte.html
 
 const ign_source = new WMTS({
-  url: 'https://wxs.ign.fr/' + key + '/wmts',
+  url: 'https://wxs.ign.fr/pratique/geoportail/wmts',
   layer: 'GEOGRAPHICALGRIDSYSTEMS.MAPS',
   matrixSet: 'PM',
   format: 'image/jpeg',

package.json

@@ -1,12 +1,13 @@
 {
-  "name": "openlayers",
-  "version": "5.0.1",
+  "name": "ol",
+  "version": "5.2.0",
   "description": "OpenLayers mapping library",
   "keywords": [
     "map",
     "mapping",
     "ol"
   ],
+  "private": true,
   "homepage": "https://openlayers.org/",
   "scripts": {
     "lint": "eslint tasks test src/ol examples config",
@@ -15,18 +16,14 @@
     "karma": "karma start test/karma.config.js",
     "serve-examples": "webpack-dev-server --config examples/webpack/config.js --mode development --watch",
     "build-examples": "webpack --config examples/webpack/config.js --mode production",
-    "build-index": "node tasks/generate-index",
-    "set-version": "node tasks/set-version",
-    "prebuild": "npm run set-version && npm run build-index",
-    "prepare": "npm run set-version",
-    "build": "rollup --config config/rollup.js && cleancss --source-map src/ol/ol.css -o build/ol.css",
-    "presrc-closure": "npm run prebuild",
-    "src-closure": "node tasks/transform-types",
-    "pretypecheck": "npm run src-closure",
-    "typecheck": "node tasks/typecheck",
+    "build-package": "npm run transpile && npm run copy-css && node tasks/prepare-package && cp README.md build/ol",
+    "build-index": "npm run build-package && node tasks/generate-index",
+    "build-legacy": "rm -rf build && npm run build-index && rollup --config config/rollup.js && cleancss --source-map src/ol/ol.css -o build/ol.css",
+    "copy-css": "cp src/ol/ol.css build/ol/ol.css",
+    "transpile": "rm -rf build/ol && mkdir -p build && buble --input src/ol --output build/ol --no modules --sourcemap",
     "apidoc": "jsdoc config/jsdoc/api/index.md -c config/jsdoc/api/conf.json -P package.json -d build/apidoc"
   },
-  "main": "src/ol/index.js",
+  "main": "index.js",
   "repository": {
     "type": "git",
     "url": "git://github.com/openlayers/openlayers.git"
@@ -35,34 +32,29 @@
   "bugs": {
     "url": "https://github.com/openlayers/openlayers/issues"
   },
-  "browser": "dist/ol.js",
-  "style": [
-    "css/ol.css"
-  ],
   "dependencies": {
     "pbf": "3.1.0",
     "pixelworks": "1.1.0",
     "rbush": "2.0.2"
   },
   "devDependencies": {
-    "babel-core": "^6.26.3",
-    "babel-plugin-jsdoc-closure": "1.5.1",
+    "buble": "^0.19.3",
+    "buble-loader": "^0.5.1",
     "chaikin-smooth": "^1.0.4",
-    "clean-css-cli": "4.1.11",
+    "clean-css-cli": "4.2.1",
     "copy-webpack-plugin": "^4.4.1",
     "coveralls": "3.0.1",
     "eslint": "5.0.1",
-    "eslint-config-openlayers": "^9.2.0",
+    "eslint-config-openlayers": "^11.0.0",
     "expect.js": "0.3.1",
     "front-matter": "^2.1.2",
-    "fs-extra": "^6.0.0",
+    "fs-extra": "^7.0.0",
     "glob": "^7.1.2",
-    "google-closure-compiler": "20180610.0.2",
     "handlebars": "4.0.11",
     "istanbul": "0.4.5",
     "jquery": "3.3.1",
     "jsdoc": "3.5.5",
-    "karma": "^2.0.0",
+    "karma": "^3.0.0",
     "karma-chrome-launcher": "2.2.0",
     "karma-coverage": "^1.1.1",
     "karma-firefox-launcher": "^1.1.0",
@@ -70,15 +62,14 @@
     "karma-sauce-launcher": "1.2.0",
     "karma-sourcemap-loader": "^0.3.7",
     "karma-webpack": "4.0.0-beta.0",
-    "marked": "0.4.0",
+    "marked": "0.5.0",
     "mocha": "5.2.0",
     "mustache": "^2.3.0",
     "pixelmatch": "^4.0.2",
-    "proj4": "2.4.4",
-    "recast": "0.15.1",
-    "rollup": "0.62.0",
+    "proj4": "2.5.0",
+    "rollup": "0.65.0",
     "rollup-plugin-buble": "0.19.2",
-    "rollup-plugin-commonjs": "9.1.3",
+    "rollup-plugin-commonjs": "9.1.6",
     "rollup-plugin-node-resolve": "3.3.0",
     "rollup-plugin-sourcemaps": "0.4.2",
     "rollup-plugin-uglify": "4.0.0",
@@ -86,12 +77,14 @@
     "uglifyjs-webpack-plugin": "^1.2.5",
     "url-polyfill": "^1.0.13",
     "walk": "^2.3.9",
-    "webpack": "4.14.0",
-    "webpack-cli": "^3.0.3",
+    "webpack": "4.17.1",
+    "webpack-cli": "^3.0.8",
     "webpack-dev-server": "^3.1.4"
   },
   "eslintConfig": {
     "extends": "openlayers"
   },
-  "sideEffects": false
+  "sideEffects": [
+    "ol.css"
+  ]
 }

src/ol/AssertionError.js

@@ -1,29 +1,28 @@
 /**
  * @module ol/AssertionError
  */
-import {VERSION, inherits} from './util.js';
+import {VERSION} from './util.js';
 
 /**
  * Error object thrown when an assertion failed. This is an ECMA-262 Error,
  * extended with a `code` property.
- * @see {@link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error}
- * @constructor
- * @extends {Error}
- * @param {number} code Error code.
+ * See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error.
  */
-const AssertionError = function(code) {
-
-  const path = VERSION.split('-')[0];
+class AssertionError extends Error {
 
   /**
-   * @type {string}
+   * @param {number} code Error code.
    */
-  this.message = 'Assertion failed. See https://openlayers.org/en/' + path +
+  constructor(code) {
+    const path = VERSION.split('-')[0];
+    const message = 'Assertion failed. See https://openlayers.org/en/' + path +
     '/doc/errors/#' + code + ' for details.';
 
+    super(message);
+
     /**
      * Error code. The meaning of the code can be found on
-   * {@link https://openlayers.org/en/latest/doc/errors/} (replace `latest` with
+     * https://openlayers.org/en/latest/doc/errors/ (replace `latest` with
      * the version found in the OpenLayers script's header comment if a version
      * other than the latest is used).
      * @type {number}
@@ -31,10 +30,15 @@ const AssertionError = function(code) {
      */
     this.code = code;
 
+    /**
+     * @type {string}
+     */
     this.name = 'AssertionError';
 
-};
+    // Re-assign message, see https://github.com/Rich-Harris/buble/issues/40
+    this.message = message;
+  }
 
-inherits(AssertionError, Error);
+}
 
 export default AssertionError;

src/ol/Collection.js

@@ -1,7 +1,6 @@
 /**
  * @module ol/Collection
  */
-import {inherits} from './util.js';
 import AssertionError from './AssertionError.js';
 import CollectionEventType from './CollectionEventType.js';
 import BaseObject from './Object.js';
@@ -21,15 +20,15 @@ const Property = {
  * @classdesc
  * Events emitted by {@link module:ol/Collection~Collection} instances are instances of this
  * type.
- *
- * @constructor
- * @extends {module:ol/events/Event}
+ */
+export class CollectionEvent extends Event {
+
+  /**
    * @param {module:ol/CollectionEventType} type Type.
    * @param {*=} opt_element Element.
    */
-export const CollectionEvent = function(type, opt_element) {
-
-  Event.call(this, type);
+  constructor(type, opt_element) {
+    super(type);
 
     /**
      * The element that is added to or removed from the collection.
@@ -38,9 +37,9 @@ export const CollectionEvent = function(type, opt_element) {
      */
     this.element = opt_element;
 
-};
+  }
 
-inherits(CollectionEvent, Event);
+}
 
 
 /**
@@ -57,17 +56,18 @@ inherits(CollectionEvent, Event);
  * Collection; they trigger events on the appropriate object, not on the
  * Collection as a whole.
  *
- * @constructor
- * @extends {module:ol/Object}
- * @fires module:ol/Collection~CollectionEvent
- * @param {Array.<T>=} opt_array Array.
- * @param {module:ol/Collection~Options=} opt_options Collection options.
  * @template T
  * @api
  */
-const Collection = function(opt_array, opt_options) {
+class Collection extends BaseObject {
 
-  BaseObject.call(this);
+  /**
+   * @param {Array<T>=} opt_array Array.
+   * @param {module:ol/Collection~Options=} opt_options Collection options.
+   */
+  constructor(opt_array, opt_options) {
+
+    super();
 
     const options = opt_options || {};
 
@@ -79,7 +79,7 @@ const Collection = function(opt_array, opt_options) {
 
     /**
      * @private
-   * @type {!Array.<T>}
+     * @type {!Array<T>}
      */
     this.array_ = opt_array ? opt_array : [];
 
@@ -91,94 +91,85 @@ const Collection = function(opt_array, opt_options) {
 
     this.updateLength_();
 
-};
+  }
 
-inherits(Collection, BaseObject);
-
-
-/**
+  /**
    * Remove all elements from the collection.
    * @api
    */
-Collection.prototype.clear = function() {
+  clear() {
     while (this.getLength() > 0) {
       this.pop();
     }
-};
+  }
 
-
-/**
+  /**
    * Add elements to the collection.  This pushes each item in the provided array
    * to the end of the collection.
- * @param {!Array.<T>} arr Array.
- * @return {module:ol/Collection.<T>} This collection.
+   * @param {!Array<T>} arr Array.
+   * @return {module:ol/Collection<T>} This collection.
    * @api
    */
-Collection.prototype.extend = function(arr) {
+  extend(arr) {
     for (let i = 0, ii = arr.length; i < ii; ++i) {
       this.push(arr[i]);
     }
     return this;
-};
+  }
 
-
-/**
+  /**
    * Iterate over each element, calling the provided callback.
- * @param {function(T, number, Array.<T>): *} f The function to call
+   * @param {function(T, number, Array<T>): *} f The function to call
    *     for every element. This function takes 3 arguments (the element, the
    *     index and the array). The return value is ignored.
    * @api
    */
-Collection.prototype.forEach = function(f) {
+  forEach(f) {
     const array = this.array_;
     for (let i = 0, ii = array.length; i < ii; ++i) {
       f(array[i], i, array);
     }
-};
+  }
 
-
-/**
+  /**
    * Get a reference to the underlying Array object. Warning: if the array
    * is mutated, no events will be dispatched by the collection, and the
    * collection's "length" property won't be in sync with the actual length
    * of the array.
- * @return {!Array.<T>} Array.
+   * @return {!Array<T>} Array.
    * @api
    */
-Collection.prototype.getArray = function() {
+  getArray() {
     return this.array_;
-};
+  }
 
-
-/**
+  /**
    * Get the element at the provided index.
    * @param {number} index Index.
    * @return {T} Element.
    * @api
    */
-Collection.prototype.item = function(index) {
+  item(index) {
     return this.array_[index];
-};
+  }
 
-
-/**
+  /**
    * Get the length of this collection.
    * @return {number} The length of the array.
    * @observable
    * @api
    */
-Collection.prototype.getLength = function() {
+  getLength() {
     return /** @type {number} */ (this.get(Property.LENGTH));
-};
+  }
 
-
-/**
+  /**
    * Insert an element at the provided index.
    * @param {number} index Index.
    * @param {T} elem Element.
    * @api
    */
-Collection.prototype.insertAt = function(index, elem) {
+  insertAt(index, elem) {
     if (this.unique_) {
       this.assertUnique_(elem);
     }
@@ -186,43 +177,40 @@ Collection.prototype.insertAt = function(index, elem) {
     this.updateLength_();
     this.dispatchEvent(
       new CollectionEvent(CollectionEventType.ADD, elem));
-};
+  }
 
-
-/**
+  /**
    * Remove the last element of the collection and return it.
    * Return `undefined` if the collection is empty.
    * @return {T|undefined} Element.
    * @api
    */
-Collection.prototype.pop = function() {
+  pop() {
     return this.removeAt(this.getLength() - 1);
-};
+  }
 
-
-/**
+  /**
    * Insert the provided element at the end of the collection.
    * @param {T} elem Element.
    * @return {number} New length of the collection.
    * @api
    */
-Collection.prototype.push = function(elem) {
+  push(elem) {
     if (this.unique_) {
       this.assertUnique_(elem);
     }
     const n = this.getLength();
     this.insertAt(n, elem);
     return this.getLength();
-};
+  }
 
-
-/**
+  /**
    * Remove the first occurrence of an element from the collection.
    * @param {T} elem Element.
    * @return {T|undefined} The removed element or undefined if none found.
    * @api
    */
-Collection.prototype.remove = function(elem) {
+  remove(elem) {
     const arr = this.array_;
     for (let i = 0, ii = arr.length; i < ii; ++i) {
       if (arr[i] === elem) {
@@ -230,32 +218,30 @@ Collection.prototype.remove = function(elem) {
       }
     }
     return undefined;
-};
+  }
 
-
-/**
+  /**
    * Remove the element at the provided index and return it.
    * Return `undefined` if the collection does not contain this index.
    * @param {number} index Index.
    * @return {T|undefined} Value.
    * @api
    */
-Collection.prototype.removeAt = function(index) {
+  removeAt(index) {
     const prev = this.array_[index];
     this.array_.splice(index, 1);
     this.updateLength_();
     this.dispatchEvent(new CollectionEvent(CollectionEventType.REMOVE, prev));
     return prev;
-};
+  }
 
-
-/**
+  /**
    * Set the element at the provided index.
    * @param {number} index Index.
    * @param {T} elem Element.
    * @api
    */
-Collection.prototype.setAt = function(index, elem) {
+  setAt(index, elem) {
     const n = this.getLength();
     if (index < n) {
       if (this.unique_) {
@@ -273,28 +259,28 @@ Collection.prototype.setAt = function(index, elem) {
       }
       this.insertAt(index, elem);
     }
-};
+  }
 
-
-/**
+  /**
    * @private
    */
-Collection.prototype.updateLength_ = function() {
+  updateLength_() {
     this.set(Property.LENGTH, this.array_.length);
-};
+  }
 
-
-/**
+  /**
    * @private
    * @param {T} elem Element.
    * @param {number=} opt_except Optional index to ignore.
    */
-Collection.prototype.assertUnique_ = function(elem, opt_except) {
+  assertUnique_(elem, opt_except) {
     for (let i = 0, ii = this.array_.length; i < ii; ++i) {
       if (this.array_[i] === elem && i !== opt_except) {
         throw new AssertionError(58);
       }
     }
-};
+  }
+}
+
 
 export default Collection;

src/ol/Disposable.js

@@ -1,34 +1,37 @@
 /**
  * @module ol/Disposable
  */
-import {UNDEFINED} from './functions.js';
 
 /**
+ * @classdesc
  * Objects that need to clean up after themselves.
- * @constructor
  */
-const Disposable = function() {};
+class Disposable {
 
-/**
+  constructor() {
+    /**
      * The object has already been disposed.
      * @type {boolean}
      * @private
      */
-Disposable.prototype.disposed_ = false;
+    this.disposed_ = false;
+  }
 
-/**
+  /**
    * Clean up.
    */
-Disposable.prototype.dispose = function() {
+  dispose() {
     if (!this.disposed_) {
       this.disposed_ = true;
       this.disposeInternal();
     }
-};
+  }
 
-/**
+  /**
    * Extension point for disposable objects.
    * @protected
    */
-Disposable.prototype.disposeInternal = UNDEFINED;
+  disposeInternal() {}
+}
+
 export default Disposable;

src/ol/Feature.js

@@ -4,7 +4,6 @@
 import {assert} from './asserts.js';
 import {listen, unlisten, unlistenByKey} from './events.js';
 import EventType from './events/EventType.js';
-import {inherits} from './util.js';
 import BaseObject, {getChangeEventType} from './Object.js';
 import Geometry from './geom/Geometry.js';
 import Style from './style/Style.js';
@@ -51,17 +50,18 @@ import Style from './style/Style.js';
  * var point = feature.getGeometry();
  * ```
  *
- * @constructor
- * @extends {module:ol/Object}
- * @param {module:ol/geom/Geometry|Object.<string, *>=} opt_geometryOrProperties
+ * @api
+ */
+class Feature extends BaseObject {
+  /**
+   * @param {module:ol/geom/Geometry|Object<string, *>=} opt_geometryOrProperties
    *     You may pass a Geometry object directly, or an object literal containing
    *     properties. If you pass an object literal, you may include a Geometry
    *     associated with a `geometry` key.
- * @api
    */
-const Feature = function(opt_geometryOrProperties) {
+  constructor(opt_geometryOrProperties) {
 
-  BaseObject.call(this);
+    super();
 
     /**
      * @private
@@ -78,7 +78,7 @@ const Feature = function(opt_geometryOrProperties) {
     /**
      * User provided style.
      * @private
-   * @type {module:ol/style/Style|Array.<module:ol/style/Style>|module:ol/style/Style~StyleFunction}
+     * @type {module:ol/style/Style|Array<module:ol/style/Style>|module:ol/style/Style~StyleFunction}
      */
     this.style_ = null;
 
@@ -104,23 +104,20 @@ const Feature = function(opt_geometryOrProperties) {
         const geometry = opt_geometryOrProperties;
         this.setGeometry(geometry);
       } else {
-      /** @type {Object.<string, *>} */
+        /** @type {Object<string, *>} */
         const properties = opt_geometryOrProperties;
         this.setProperties(properties);
       }
     }
-};
+  }
 
-inherits(Feature, BaseObject);
-
-
-/**
+  /**
    * Clone this feature. If the original feature has a geometry it
    * is also cloned. The feature id is not set in the clone.
    * @return {module:ol/Feature} The clone.
    * @api
    */
-Feature.prototype.clone = function() {
+  clone() {
     const clone = new Feature(this.getProperties());
     clone.setGeometryName(this.getGeometryName());
     const geometry = this.getGeometry();
@@ -132,10 +129,9 @@ Feature.prototype.clone = function() {
       clone.setStyle(style);
     }
     return clone;
-};
+  }
 
-
-/**
+  /**
    * Get the feature's default geometry.  A feature may have any number of named
    * geometries.  The "default" geometry (the one that is rendered by default) is
    * set when calling {@link module:ol/Feature~Feature#setGeometry}.
@@ -143,71 +139,65 @@ Feature.prototype.clone = function() {
    * @api
    * @observable
    */
-Feature.prototype.getGeometry = function() {
+  getGeometry() {
     return (
       /** @type {module:ol/geom/Geometry|undefined} */ (this.get(this.geometryName_))
     );
-};
+  }
 
-
-/**
+  /**
    * Get the feature identifier.  This is a stable identifier for the feature and
    * is either set when reading data from a remote source or set explicitly by
    * calling {@link module:ol/Feature~Feature#setId}.
    * @return {number|string|undefined} Id.
    * @api
    */
-Feature.prototype.getId = function() {
+  getId() {
     return this.id_;
-};
+  }
 
-
-/**
+  /**
    * Get the name of the feature's default geometry.  By default, the default
    * geometry is named `geometry`.
    * @return {string} Get the property name associated with the default geometry
    *     for this feature.
    * @api
    */
-Feature.prototype.getGeometryName = function() {
+  getGeometryName() {
     return this.geometryName_;
-};
+  }
 
-
-/**
+  /**
    * Get the feature's style. Will return what was provided to the
    * {@link module:ol/Feature~Feature#setStyle} method.
- * @return {module:ol/style/Style|Array.<module:ol/style/Style>|module:ol/style/Style~StyleFunction} The feature style.
+   * @return {module:ol/style/Style|Array<module:ol/style/Style>|module:ol/style/Style~StyleFunction} The feature style.
    * @api
    */
-Feature.prototype.getStyle = function() {
+  getStyle() {
     return this.style_;
-};
+  }
 
-
-/**
+  /**
    * Get the feature's style function.
    * @return {module:ol/style/Style~StyleFunction|undefined} Return a function
    * representing the current style of this feature.
    * @api
    */
-Feature.prototype.getStyleFunction = function() {
+  getStyleFunction() {
     return this.styleFunction_;
-};
+  }
 
-
-/**
+  /**
    * @private
    */
-Feature.prototype.handleGeometryChange_ = function() {
+  handleGeometryChange_() {
     this.changed();
-};
+  }
 
-
-/**
+  /**
    * @private
    */
-Feature.prototype.handleGeometryChanged_ = function() {
+  handleGeometryChanged_() {
     if (this.geometryChangeKey_) {
       unlistenByKey(this.geometryChangeKey_);
       this.geometryChangeKey_ = null;
@@ -218,37 +208,34 @@ Feature.prototype.handleGeometryChanged_ = function() {
         EventType.CHANGE, this.handleGeometryChange_, this);
     }
     this.changed();
-};
+  }
 
-
-/**
+  /**
    * Set the default geometry for the feature.  This will update the property
    * with the name returned by {@link module:ol/Feature~Feature#getGeometryName}.
    * @param {module:ol/geom/Geometry|undefined} geometry The new geometry.
    * @api
    * @observable
    */
-Feature.prototype.setGeometry = function(geometry) {
+  setGeometry(geometry) {
     this.set(this.geometryName_, geometry);
-};
+  }
 
-
-/**
+  /**
    * Set the style for the feature.  This can be a single style object, an array
    * of styles, or a function that takes a resolution and returns an array of
    * styles. If it is `null` the feature has no style (a `null` style).
- * @param {module:ol/style/Style|Array.<module:ol/style/Style>|module:ol/style/Style~StyleFunction} style Style for this feature.
+   * @param {module:ol/style/Style|Array<module:ol/style/Style>|module:ol/style/Style~StyleFunction} style Style for this feature.
    * @api
    * @fires module:ol/events/Event~Event#event:change
    */
-Feature.prototype.setStyle = function(style) {
+  setStyle(style) {
     this.style_ = style;
     this.styleFunction_ = !style ? undefined : createStyleFunction(style);
     this.changed();
-};
+  }
 
-
-/**
+  /**
    * Set the feature id.  The feature id is considered stable and may be used when
    * requesting features or comparing identifiers returned from a remote source.
    * The feature id can be used with the
@@ -257,20 +244,19 @@ Feature.prototype.setStyle = function(style) {
    * @api
    * @fires module:ol/events/Event~Event#event:change
    */
-Feature.prototype.setId = function(id) {
+  setId(id) {
     this.id_ = id;
     this.changed();
-};
+  }
 
-
-/**
+  /**
    * Set the property name to be used when getting the feature's default geometry.
    * When calling {@link module:ol/Feature~Feature#getGeometry}, the value of the property with
    * this name will be returned.
    * @param {string} name The property name of the default geometry.
    * @api
    */
-Feature.prototype.setGeometryName = function(name) {
+  setGeometryName(name) {
     unlisten(
       this, getChangeEventType(this.geometryName_),
       this.handleGeometryChanged_, this);
@@ -279,14 +265,15 @@ Feature.prototype.setGeometryName = function(name) {
       this, getChangeEventType(this.geometryName_),
       this.handleGeometryChanged_, this);
     this.handleGeometryChanged_();
-};
+  }
+}
 
 
 /**
  * Convert the provided object into a feature style function.  Functions passed
  * through unchanged.  Arrays of module:ol/style/Style or single style objects wrapped
  * in a new feature style function.
- * @param {module:ol/style/Style~StyleFunction|!Array.<module:ol/style/Style>|!module:ol/style/Style} obj
+ * @param {module:ol/style/Style~StyleFunction|!Array<module:ol/style/Style>|!module:ol/style/Style} obj
  *     A feature style function, a single style, or an array of styles.
  * @return {module:ol/style/Style~StyleFunction} A style function.
  */
@@ -295,7 +282,7 @@ export function createStyleFunction(obj) {
     return obj;
   } else {
     /**
-     * @type {Array.<module:ol/style/Style>}
+     * @type {Array<module:ol/style/Style>}
      */
     let styles;
     if (Array.isArray(obj)) {

src/ol/Geolocation.js

@@ -1,7 +1,6 @@
 /**
  * @module ol/Geolocation
  */
-import {inherits} from './util.js';
 import GeolocationProperty from './GeolocationProperty.js';
 import BaseObject, {getChangeEventType} from './Object.js';
 import {listen} from './events.js';
@@ -16,8 +15,8 @@ import {get as getProjection, getTransformFromProjections, identityTransform} fr
  * @typedef {Object} Options
  * @property {boolean} [tracking=false] Start Tracking right after
  * instantiation.
- * @property {GeolocationPositionOptions} [trackingOptions] Tracking options.
- * See {@link http://www.w3.org/TR/geolocation-API/#position_options_interface}.
+ * @property {PositionOptions} [trackingOptions] Tracking options.
+ * See http://www.w3.org/TR/geolocation-API/#position_options_interface.
  * @property {module:ol/proj~ProjectionLike} [projection] The projection the position
  * is reported in.
  */
@@ -44,14 +43,16 @@ import {get as getProjection, getTransformFromProjections, identityTransform} fr
  *     });
  *
  * @fires error
- * @constructor
- * @extends {module:ol/Object}
- * @param {module:ol/Geolocation~Options=} opt_options Options.
  * @api
  */
-const Geolocation = function(opt_options) {
+class Geolocation extends BaseObject {
 
-  BaseObject.call(this);
+  /**
+   * @param {module:ol/Geolocation~Options=} opt_options Options.
+   */
+  constructor(opt_options) {
+
+    super();
 
     const options = opt_options || {};
 
@@ -90,24 +91,20 @@ const Geolocation = function(opt_options) {
 
     this.setTracking(options.tracking !== undefined ? options.tracking : false);
 
-};
+  }
 
-inherits(Geolocation, BaseObject);
-
-
-/**
+  /**
    * @inheritDoc
    */
-Geolocation.prototype.disposeInternal = function() {
+  disposeInternal() {
     this.setTracking(false);
-  BaseObject.prototype.disposeInternal.call(this);
-};
+    super.disposeInternal();
+  }
 
-
-/**
+  /**
    * @private
    */
-Geolocation.prototype.handleProjectionChanged_ = function() {
+  handleProjectionChanged_() {
     const projection = this.getProjection();
     if (projection) {
       this.transform_ = getTransformFromProjections(
@@ -116,13 +113,12 @@ Geolocation.prototype.handleProjectionChanged_ = function() {
         this.set(GeolocationProperty.POSITION, this.transform_(this.position_));
       }
     }
-};
+  }
 
-
-/**
+  /**
    * @private
    */
-Geolocation.prototype.handleTrackingChanged_ = function() {
+  handleTrackingChanged_() {
     if (GEOLOCATION) {
       const tracking = this.getTracking();
       if (tracking && this.watchId_ === undefined) {
@@ -135,14 +131,13 @@ Geolocation.prototype.handleTrackingChanged_ = function() {
         this.watchId_ = undefined;
       }
     }
-};
+  }
 
-
-/**
+  /**
    * @private
- * @param {GeolocationPosition} position position event.
+   * @param {Position} position position event.
    */
-Geolocation.prototype.positionChange_ = function(position) {
+  positionChange_(position) {
     const coords = position.coords;
     this.set(GeolocationProperty.ACCURACY, coords.accuracy);
     this.set(GeolocationProperty.ALTITUDE,
@@ -166,75 +161,70 @@ Geolocation.prototype.positionChange_ = function(position) {
     geometry.applyTransform(this.transform_);
     this.set(GeolocationProperty.ACCURACY_GEOMETRY, geometry);
     this.changed();
-};
+  }
 
-/**
+  /**
    * Triggered when the Geolocation returns an error.
    * @event error
    * @api
    */
 
-/**
+  /**
    * @private
- * @param {GeolocationPositionError} error error object.
+   * @param {PositionError} error error object.
    */
-Geolocation.prototype.positionError_ = function(error) {
+  positionError_(error) {
     error.type = EventType.ERROR;
     this.setTracking(false);
     this.dispatchEvent(/** @type {{type: string, target: undefined}} */ (error));
-};
+  }
 
-
-/**
+  /**
    * Get the accuracy of the position in meters.
    * @return {number|undefined} The accuracy of the position measurement in
    *     meters.
    * @observable
    * @api
    */
-Geolocation.prototype.getAccuracy = function() {
+  getAccuracy() {
     return /** @type {number|undefined} */ (this.get(GeolocationProperty.ACCURACY));
-};
+  }
 
-
-/**
+  /**
    * Get a geometry of the position accuracy.
    * @return {?module:ol/geom/Polygon} A geometry of the position accuracy.
    * @observable
    * @api
    */
-Geolocation.prototype.getAccuracyGeometry = function() {
+  getAccuracyGeometry() {
     return (
       /** @type {?module:ol/geom/Polygon} */ (this.get(GeolocationProperty.ACCURACY_GEOMETRY) || null)
     );
-};
+  }
 
-
-/**
+  /**
    * Get the altitude associated with the position.
    * @return {number|undefined} The altitude of the position in meters above mean
    *     sea level.
    * @observable
    * @api
    */
-Geolocation.prototype.getAltitude = function() {
+  getAltitude() {
     return /** @type {number|undefined} */ (this.get(GeolocationProperty.ALTITUDE));
-};
+  }
 
-
-/**
+  /**
    * Get the altitude accuracy of the position.
    * @return {number|undefined} The accuracy of the altitude measurement in
    *     meters.
    * @observable
    * @api
    */
-Geolocation.prototype.getAltitudeAccuracy = function() {
+  getAltitudeAccuracy() {
     return /** @type {number|undefined} */ (this.get(GeolocationProperty.ALTITUDE_ACCURACY));
-};
+  }
 
-
-/**
+  /**
    * Get the heading as radians clockwise from North.
    * Note: depending on the browser, the heading is only defined if the `enableHighAccuracy`
    * is set to `true` in the tracking options.
@@ -242,109 +232,104 @@ Geolocation.prototype.getAltitudeAccuracy = function() {
    * @observable
    * @api
    */
-Geolocation.prototype.getHeading = function() {
+  getHeading() {
     return /** @type {number|undefined} */ (this.get(GeolocationProperty.HEADING));
-};
+  }
 
-
-/**
+  /**
    * Get the position of the device.
    * @return {module:ol/coordinate~Coordinate|undefined} The current position of the device reported
    *     in the current projection.
    * @observable
    * @api
    */
-Geolocation.prototype.getPosition = function() {
+  getPosition() {
     return (
       /** @type {module:ol/coordinate~Coordinate|undefined} */ (this.get(GeolocationProperty.POSITION))
     );
-};
+  }
 
-
-/**
+  /**
    * Get the projection associated with the position.
    * @return {module:ol/proj/Projection|undefined} The projection the position is
    *     reported in.
    * @observable
    * @api
    */
-Geolocation.prototype.getProjection = function() {
+  getProjection() {
     return (
       /** @type {module:ol/proj/Projection|undefined} */ (this.get(GeolocationProperty.PROJECTION))
     );
-};
+  }
 
-
-/**
+  /**
    * Get the speed in meters per second.
    * @return {number|undefined} The instantaneous speed of the device in meters
    *     per second.
    * @observable
    * @api
    */
-Geolocation.prototype.getSpeed = function() {
+  getSpeed() {
     return /** @type {number|undefined} */ (this.get(GeolocationProperty.SPEED));
-};
+  }
 
-
-/**
+  /**
    * Determine if the device location is being tracked.
    * @return {boolean} The device location is being tracked.
    * @observable
    * @api
    */
-Geolocation.prototype.getTracking = function() {
+  getTracking() {
     return /** @type {boolean} */ (this.get(GeolocationProperty.TRACKING));
-};
+  }
 
-
-/**
+  /**
    * Get the tracking options.
- * @see http://www.w3.org/TR/geolocation-API/#position-options
- * @return {GeolocationPositionOptions|undefined} PositionOptions as defined by
+   * See http://www.w3.org/TR/geolocation-API/#position-options.
+   * @return {PositionOptions|undefined} PositionOptions as defined by
    *     the [HTML5 Geolocation spec
    *     ](http://www.w3.org/TR/geolocation-API/#position_options_interface).
    * @observable
    * @api
    */
-Geolocation.prototype.getTrackingOptions = function() {
-  return /** @type {GeolocationPositionOptions|undefined} */ (this.get(GeolocationProperty.TRACKING_OPTIONS));
-};
+  getTrackingOptions() {
+    return /** @type {PositionOptions|undefined} */ (this.get(GeolocationProperty.TRACKING_OPTIONS));
+  }
 
-
-/**
+  /**
    * Set the projection to use for transforming the coordinates.
    * @param {module:ol/proj~ProjectionLike} projection The projection the position is
    *     reported in.
    * @observable
    * @api
    */
-Geolocation.prototype.setProjection = function(projection) {
+  setProjection(projection) {
     this.set(GeolocationProperty.PROJECTION, getProjection(projection));
-};
+  }
 
-
-/**
+  /**
    * Enable or disable tracking.
    * @param {boolean} tracking Enable tracking.
    * @observable
    * @api
    */
-Geolocation.prototype.setTracking = function(tracking) {
+  setTracking(tracking) {
     this.set(GeolocationProperty.TRACKING, tracking);
-};
+  }
 
-
-/**
+  /**
    * Set the tracking options.
- * @see http://www.w3.org/TR/geolocation-API/#position-options
- * @param {GeolocationPositionOptions} options PositionOptions as defined by the
+   * See http://www.w3.org/TR/geolocation-API/#position-options.
+   * @param {PositionOptions} options PositionOptions as defined by the
    *     [HTML5 Geolocation spec
    *     ](http://www.w3.org/TR/geolocation-API/#position_options_interface).
    * @observable
    * @api
    */
-Geolocation.prototype.setTrackingOptions = function(options) {
+  setTrackingOptions(options) {
     this.set(GeolocationProperty.TRACKING_OPTIONS, options);
-};
+  }
+}
+
+
 export default Geolocation;

src/ol/Graticule.js

@@ -27,7 +27,7 @@ const DEFAULT_STROKE_STYLE = new Stroke({
 
 /**
  * TODO can be configurable
- * @type {Array.<number>}
+ * @type {Array<number>}
  * @private
  */
 const INTERVALS = [
@@ -112,11 +112,14 @@ const INTERVALS = [
 
 /**
  * Render a grid for a coordinate system on a map.
- * @constructor
- * @param {module:ol/Graticule~Options=} opt_options Options.
  * @api
  */
-const Graticule = function(opt_options) {
+class Graticule {
+
+  /**
+   * @param {module:ol/Graticule~Options=} opt_options Options.
+   */
+  constructor(opt_options) {
     const options = opt_options || {};
 
     /**
@@ -197,13 +200,13 @@ const Graticule = function(opt_options) {
     this.maxLines_ = options.maxLines !== undefined ? options.maxLines : 100;
 
     /**
-   * @type {Array.<module:ol/geom/LineString>}
+     * @type {Array<module:ol/geom/LineString>}
      * @private
      */
     this.meridians_ = [];
 
     /**
-   * @type {Array.<module:ol/geom/LineString>}
+     * @type {Array<module:ol/geom/LineString>}
      * @private
      */
     this.parallels_ = [];
@@ -233,13 +236,13 @@ const Graticule = function(opt_options) {
     this.projectionCenterLonLat_ = null;
 
     /**
-   * @type {Array.<module:ol/Graticule~GraticuleLabelDataType>}
+     * @type {Array<module:ol/Graticule~GraticuleLabelDataType>}
      * @private
      */
     this.meridiansLabels_ = null;
 
     /**
-   * @type {Array.<module:ol/Graticule~GraticuleLabelDataType>}
+     * @type {Array<module:ol/Graticule~GraticuleLabelDataType>}
      * @private
      */
     this.parallelsLabels_ = null;
@@ -317,10 +320,9 @@ const Graticule = function(opt_options) {
     }
 
     this.setMap(options.map !== undefined ? options.map : null);
-};
+  }
 
-
-/**
+  /**
    * @param {number} lon Longitude.
    * @param {number} minLat Minimal latitude.
    * @param {number} maxLat Maximal latitude.
@@ -330,7 +332,7 @@ const Graticule = function(opt_options) {
    * @return {number} Index.
    * @private
    */
-Graticule.prototype.addMeridian_ = function(lon, minLat, maxLat, squaredTolerance, extent, index) {
+  addMeridian_(lon, minLat, maxLat, squaredTolerance, extent, index) {
     const lineString = this.getMeridian_(lon, minLat, maxLat, squaredTolerance, index);
     if (intersects(lineString.getExtent(), extent)) {
       if (this.meridiansLabels_) {
@@ -343,16 +345,16 @@ Graticule.prototype.addMeridian_ = function(lon, minLat, maxLat, squaredToleranc
       this.meridians_[index++] = lineString;
     }
     return index;
-};
+  }
 
-/**
+  /**
    * @param {module:ol/geom/LineString} lineString Meridian
    * @param {module:ol/extent~Extent} extent Extent.
    * @param {number} index Index.
    * @return {module:ol/geom/Point} Meridian point.
    * @private
    */
-Graticule.prototype.getMeridianPoint_ = function(lineString, extent, index) {
+  getMeridianPoint_(lineString, extent, index) {
     const flatCoordinates = lineString.getFlatCoordinates();
     const clampedBottom = Math.max(extent[1], flatCoordinates[1]);
     const clampedTop = Math.min(extent[3], flatCoordinates[flatCoordinates.length - 1]);
@@ -360,14 +362,17 @@ Graticule.prototype.getMeridianPoint_ = function(lineString, extent, index) {
       extent[1] + Math.abs(extent[1] - extent[3]) * this.lonLabelPosition_,
       clampedBottom, clampedTop);
     const coordinate = [flatCoordinates[0], lat];
-  const point = this.meridiansLabels_[index] !== undefined ?
-    this.meridiansLabels_[index].geom : new Point(null);
+    let point;
+    if (index in this.meridiansLabels_) {
+      point = this.meridiansLabels_[index].geom;
       point.setCoordinates(coordinate);
+    } else {
+      point = new Point(coordinate);
+    }
     return point;
-};
+  }
 
-
-/**
+  /**
    * @param {number} lat Latitude.
    * @param {number} minLon Minimal longitude.
    * @param {number} maxLon Maximal longitude.
@@ -377,7 +382,7 @@ Graticule.prototype.getMeridianPoint_ = function(lineString, extent, index) {
    * @return {number} Index.
    * @private
    */
-Graticule.prototype.addParallel_ = function(lat, minLon, maxLon, squaredTolerance, extent, index) {
+  addParallel_(lat, minLon, maxLon, squaredTolerance, extent, index) {
     const lineString = this.getParallel_(lat, minLon, maxLon, squaredTolerance, index);
     if (intersects(lineString.getExtent(), extent)) {
       if (this.parallelsLabels_) {
@@ -390,17 +395,16 @@ Graticule.prototype.addParallel_ = function(lat, minLon, maxLon, squaredToleranc
       this.parallels_[index++] = lineString;
     }
     return index;
-};
+  }
 
-
-/**
+  /**
    * @param {module:ol/geom/LineString} lineString Parallels.
    * @param {module:ol/extent~Extent} extent Extent.
    * @param {number} index Index.
    * @return {module:ol/geom/Point} Parallel point.
    * @private
    */
-Graticule.prototype.getParallelPoint_ = function(lineString, extent, index) {
+  getParallelPoint_(lineString, extent, index) {
     const flatCoordinates = lineString.getFlatCoordinates();
     const clampedLeft = Math.max(extent[0], flatCoordinates[0]);
     const clampedRight = Math.min(extent[2], flatCoordinates[flatCoordinates.length - 2]);
@@ -408,21 +412,24 @@ Graticule.prototype.getParallelPoint_ = function(lineString, extent, index) {
       extent[0] + Math.abs(extent[0] - extent[2]) * this.latLabelPosition_,
       clampedLeft, clampedRight);
     const coordinate = [lon, flatCoordinates[1]];
-  const point = this.parallelsLabels_[index] !== undefined ?
-    this.parallelsLabels_[index].geom : new Point(null);
+    let point;
+    if (index in this.parallelsLabels_) {
+      point = this.parallelsLabels_[index].geom;
       point.setCoordinates(coordinate);
+    } else {
+      point = new Point(coordinate);
+    }
     return point;
-};
+  }
 
-
-/**
+  /**
    * @param {module:ol/extent~Extent} extent Extent.
    * @param {module:ol/coordinate~Coordinate} center Center.
    * @param {number} resolution Resolution.
    * @param {number} squaredTolerance Squared tolerance.
    * @private
    */
-Graticule.prototype.createGraticule_ = function(extent, center, resolution, squaredTolerance) {
+  createGraticule_(extent, center, resolution, squaredTolerance) {
 
     const interval = this.getInterval_(resolution);
     if (interval == -1) {
@@ -507,22 +514,21 @@ Graticule.prototype.createGraticule_ = function(extent, center, resolution, squa
       this.parallelsLabels_.length = idx;
     }
 
-};
+  }
 
-
-/**
+  /**
    * @param {number} resolution Resolution.
    * @return {number} The interval in degrees.
    * @private
    */
-Graticule.prototype.getInterval_ = function(resolution) {
+  getInterval_(resolution) {
     const centerLon = this.projectionCenterLonLat_[0];
     const centerLat = this.projectionCenterLonLat_[1];
     let interval = -1;
     const target = Math.pow(this.targetSize_ * resolution, 2);
-  /** @type {Array.<number>} **/
+    /** @type {Array<number>} **/
     const p1 = [];
-  /** @type {Array.<number>} **/
+    /** @type {Array<number>} **/
     const p2 = [];
     for (let i = 0, ii = INTERVALS.length; i < ii; ++i) {
       const delta = INTERVALS[i] / 2;
@@ -539,20 +545,18 @@ Graticule.prototype.getInterval_ = function(resolution) {
       interval = INTERVALS[i];
     }
     return interval;
-};
+  }
 
-
-/**
+  /**
    * Get the map associated with this graticule.
    * @return {module:ol/PluggableMap} The map.
    * @api
    */
-Graticule.prototype.getMap = function() {
+  getMap() {
     return this.map_;
-};
+  }
 
-
-/**
+  /**
    * @param {number} lon Longitude.
    * @param {number} minLat Minimal latitude.
    * @param {number} maxLat Maximal latitude.
@@ -561,25 +565,28 @@ Graticule.prototype.getMap = function() {
    * @param {number} index Index.
    * @private
    */
-Graticule.prototype.getMeridian_ = function(lon, minLat, maxLat, squaredTolerance, index) {
+  getMeridian_(lon, minLat, maxLat, squaredTolerance, index) {
     const flatCoordinates = meridian(lon, minLat, maxLat, this.projection_, squaredTolerance);
-  const lineString = this.meridians_[index] !== undefined ? this.meridians_[index] : new LineString(null);
+    let lineString = this.meridians_[index];
+    if (!lineString) {
+      lineString = this.meridians_[index] = new LineString(flatCoordinates, GeometryLayout.XY);
+    } else {
       lineString.setFlatCoordinates(GeometryLayout.XY, flatCoordinates);
+      lineString.changed();
+    }
     return lineString;
-};
+  }
 
-
-/**
+  /**
    * Get the list of meridians.  Meridians are lines of equal longitude.
- * @return {Array.<module:ol/geom/LineString>} The meridians.
+   * @return {Array<module:ol/geom/LineString>} The meridians.
    * @api
    */
-Graticule.prototype.getMeridians = function() {
+  getMeridians() {
     return this.meridians_;
-};
+  }
 
-
-/**
+  /**
    * @param {number} lat Latitude.
    * @param {number} minLon Minimal longitude.
    * @param {number} maxLon Maximal longitude.
@@ -588,29 +595,32 @@ Graticule.prototype.getMeridians = function() {
    * @param {number} index Index.
    * @private
    */
-Graticule.prototype.getParallel_ = function(lat, minLon, maxLon, squaredTolerance, index) {
+  getParallel_(lat, minLon, maxLon, squaredTolerance, index) {
     const flatCoordinates = parallel(lat, minLon, maxLon, this.projection_, squaredTolerance);
-  const lineString = this.parallels_[index] !== undefined ? this.parallels_[index] : new LineString(null);
+    let lineString = this.parallels_[index];
+    if (!lineString) {
+      lineString = new LineString(flatCoordinates, GeometryLayout.XY);
+    } else {
       lineString.setFlatCoordinates(GeometryLayout.XY, flatCoordinates);
+      lineString.changed();
+    }
     return lineString;
-};
+  }
 
-
-/**
+  /**
    * Get the list of parallels.  Parallels are lines of equal latitude.
- * @return {Array.<module:ol/geom/LineString>} The parallels.
+   * @return {Array<module:ol/geom/LineString>} The parallels.
    * @api
    */
-Graticule.prototype.getParallels = function() {
+  getParallels() {
     return this.parallels_;
-};
+  }
 
-
-/**
+  /**
    * @param {module:ol/render/Event} e Event.
    * @private
    */
-Graticule.prototype.handlePostCompose_ = function(e) {
+  handlePostCompose_(e) {
     const vectorContext = e.vectorContext;
     const frameState = e.frameState;
     const extent = frameState.extent;
@@ -659,14 +669,13 @@ Graticule.prototype.handlePostCompose_ = function(e) {
         vectorContext.drawGeometry(labelData.geom);
       }
     }
-};
+  }
 
-
-/**
+  /**
    * @param {module:ol/proj/Projection} projection Projection.
    * @private
    */
-Graticule.prototype.updateProjectionInfo_ = function(projection) {
+  updateProjectionInfo_(projection) {
     const epsg4326Projection = getProjection('EPSG:4326');
 
     const worldExtent = projection.getWorldExtent();
@@ -689,16 +698,15 @@ Graticule.prototype.updateProjectionInfo_ = function(projection) {
     this.projectionCenterLonLat_ = this.toLonLatTransform_(getCenter(projection.getExtent()));
 
     this.projection_ = projection;
-};
+  }
 
-
-/**
+  /**
    * Set the map for this graticule.  The graticule will be rendered on the
    * provided map.
    * @param {module:ol/PluggableMap} map Map.
    * @api
    */
-Graticule.prototype.setMap = function(map) {
+  setMap(map) {
     if (this.map_) {
       unlistenByKey(this.postcomposeListenerKey_);
       this.postcomposeListenerKey_ = null;
@@ -709,5 +717,7 @@ Graticule.prototype.setMap = function(map) {
       map.render();
     }
     this.map_ = map;
-};
+  }
+}
+
 export default Graticule;

src/ol/Image.js

@@ -1,7 +1,6 @@
 /**
  * @module ol/Image
  */
-import {inherits} from './util.js';
 import ImageBase from './ImageBase.js';
 import ImageState from './ImageState.js';
 import {listenOnce, unlistenByKey} from './events.js';
@@ -28,9 +27,9 @@ import {getHeight} from './extent.js';
  */
 
 
-/**
- * @constructor
- * @extends {module:ol/ImageBase}
+class ImageWrapper extends ImageBase {
+
+  /**
    * @param {module:ol/extent~Extent} extent Extent.
    * @param {number|undefined} resolution Resolution.
    * @param {number} pixelRatio Pixel ratio.
@@ -38,9 +37,9 @@ import {getHeight} from './extent.js';
    * @param {?string} crossOrigin Cross origin.
    * @param {module:ol/Image~LoadFunction} imageLoadFunction Image load function.
    */
-const ImageWrapper = function(extent, resolution, pixelRatio, src, crossOrigin, imageLoadFunction) {
+  constructor(extent, resolution, pixelRatio, src, crossOrigin, imageLoadFunction) {
 
-  ImageBase.call(this, extent, resolution, pixelRatio, ImageState.IDLE);
+    super(extent, resolution, pixelRatio, ImageState.IDLE);
 
     /**
      * @private
@@ -59,7 +58,7 @@ const ImageWrapper = function(extent, resolution, pixelRatio, src, crossOrigin,
 
     /**
      * @private
-   * @type {Array.<module:ol/events~EventsKey>}
+     * @type {Array<module:ol/events~EventsKey>}
      */
     this.imageListenerKeys_ = null;
 
@@ -75,55 +74,49 @@ const ImageWrapper = function(extent, resolution, pixelRatio, src, crossOrigin,
      */
     this.imageLoadFunction_ = imageLoadFunction;
 
-};
+  }
 
-inherits(ImageWrapper, ImageBase);
-
-
-/**
+  /**
    * @inheritDoc
    * @api
    */
-ImageWrapper.prototype.getImage = function() {
+  getImage() {
     return this.image_;
-};
+  }
 
-
-/**
+  /**
    * Tracks loading or read errors.
    *
    * @private
    */
-ImageWrapper.prototype.handleImageError_ = function() {
+  handleImageError_() {
     this.state = ImageState.ERROR;
     this.unlistenImage_();
     this.changed();
-};
+  }
 
-
-/**
+  /**
    * Tracks successful image load.
    *
    * @private
    */
-ImageWrapper.prototype.handleImageLoad_ = function() {
+  handleImageLoad_() {
     if (this.resolution === undefined) {
       this.resolution = getHeight(this.extent) / this.image_.height;
     }
     this.state = ImageState.LOADED;
     this.unlistenImage_();
     this.changed();
-};
+  }
 
-
-/**
+  /**
    * Load the image or retry if loading previously failed.
    * Loading is taken care of by the tile queue, and calling this method is
    * only needed for preloading or for reloading in case of an error.
    * @override
    * @api
    */
-ImageWrapper.prototype.load = function() {
+  load() {
     if (this.state == ImageState.IDLE || this.state == ImageState.ERROR) {
       this.state = ImageState.LOADING;
       this.changed();
@@ -135,25 +128,25 @@ ImageWrapper.prototype.load = function() {
       ];
       this.imageLoadFunction_(this, this.src_);
     }
-};
+  }
 
-
-/**
+  /**
    * @param {HTMLCanvasElement|HTMLImageElement|HTMLVideoElement} image Image.
    */
-ImageWrapper.prototype.setImage = function(image) {
+  setImage(image) {
     this.image_ = image;
-};
+  }
 
-
-/**
+  /**
    * Discards event handlers which listen for load completion or errors.
    *
    * @private
    */
-ImageWrapper.prototype.unlistenImage_ = function() {
+  unlistenImage_() {
     this.imageListenerKeys_.forEach(unlistenByKey);
     this.imageListenerKeys_ = null;
-};
+  }
+}
+
 
 export default ImageWrapper;

src/ol/ImageBase.js

@@ -1,22 +1,23 @@
 /**
  * @module ol/ImageBase
  */
-import {inherits} from './util.js';
-import EventTarget from './events/EventTarget.js';
+import EventTarget from './events/Target.js';
 import EventType from './events/EventType.js';
 
 /**
- * @constructor
  * @abstract
- * @extends {module:ol/events/EventTarget}
+ */
+class ImageBase extends EventTarget {
+
+  /**
    * @param {module:ol/extent~Extent} extent Extent.
    * @param {number|undefined} resolution Resolution.
    * @param {number} pixelRatio Pixel ratio.
    * @param {module:ol/ImageState} state State.
    */
-const ImageBase = function(extent, resolution, pixelRatio, state) {
+  constructor(extent, resolution, pixelRatio, state) {
 
-  EventTarget.call(this);
+    super();
 
     /**
      * @protected
@@ -42,62 +43,55 @@ const ImageBase = function(extent, resolution, pixelRatio, state) {
      */
     this.state = state;
 
-};
+  }
 
-inherits(ImageBase, EventTarget);
-
-
-/**
+  /**
    * @protected
    */
-ImageBase.prototype.changed = function() {
+  changed() {
     this.dispatchEvent(EventType.CHANGE);
-};
+  }
 
-
-/**
+  /**
    * @return {module:ol/extent~Extent} Extent.
    */
-ImageBase.prototype.getExtent = function() {
+  getExtent() {
     return this.extent;
-};
+  }
 
-
-/**
+  /**
    * @abstract
    * @return {HTMLCanvasElement|HTMLImageElement|HTMLVideoElement} Image.
    */
-ImageBase.prototype.getImage = function() {};
+  getImage() {}
 
-
-/**
+  /**
    * @return {number} PixelRatio.
    */
-ImageBase.prototype.getPixelRatio = function() {
+  getPixelRatio() {
     return this.pixelRatio_;
-};
+  }
 
-
-/**
+  /**
    * @return {number} Resolution.
    */
-ImageBase.prototype.getResolution = function() {
+  getResolution() {
     return /** @type {number} */ (this.resolution);
-};
+  }
 
-
-/**
+  /**
    * @return {module:ol/ImageState} State.
    */
-ImageBase.prototype.getState = function() {
+  getState() {
     return this.state;
-};
+  }
 
-
-/**
+  /**
    * Load not yet loaded URI.
    * @abstract
    */
-ImageBase.prototype.load = function() {};
+  load() {}
+}
+
 
 export default ImageBase;

src/ol/ImageCanvas.js

@@ -1,7 +1,6 @@
 /**
  * @module ol/ImageCanvas
  */
-import {inherits} from './util.js';
 import ImageBase from './ImageBase.js';
 import ImageState from './ImageState.js';
 
@@ -16,9 +15,9 @@ import ImageState from './ImageState.js';
  */
 
 
-/**
- * @constructor
- * @extends {module:ol/ImageBase}
+class ImageCanvas extends ImageBase {
+
+  /**
    * @param {module:ol/extent~Extent} extent Extent.
    * @param {number} resolution Resolution.
    * @param {number} pixelRatio Pixel ratio.
@@ -26,7 +25,11 @@ import ImageState from './ImageState.js';
    * @param {module:ol/ImageCanvas~Loader=} opt_loader Optional loader function to
    *     support asynchronous canvas drawing.
    */
-const ImageCanvas = function(extent, resolution, pixelRatio, canvas, opt_loader) {
+  constructor(extent, resolution, pixelRatio, canvas, opt_loader) {
+
+    const state = opt_loader !== undefined ? ImageState.IDLE : ImageState.LOADED;
+
+    super(extent, resolution, pixelRatio, state);
 
     /**
      * Optional canvas loader function.
@@ -35,10 +38,6 @@ const ImageCanvas = function(extent, resolution, pixelRatio, canvas, opt_loader)
      */
     this.loader_ = opt_loader !== undefined ? opt_loader : null;
 
-  const state = opt_loader !== undefined ? ImageState.IDLE : ImageState.LOADED;
-
-  ImageBase.call(this, extent, resolution, pixelRatio, state);
-
     /**
      * @private
      * @type {HTMLCanvasElement}
@@ -51,26 +50,22 @@ const ImageCanvas = function(extent, resolution, pixelRatio, canvas, opt_loader)
      */
     this.error_ = null;
 
-};
+  }
 
-inherits(ImageCanvas, ImageBase);
-
-
-/**
+  /**
    * Get any error associated with asynchronous rendering.
    * @return {Error} Any error that occurred during rendering.
    */
-ImageCanvas.prototype.getError = function() {
+  getError() {
     return this.error_;
-};
+  }
 
-
-/**
+  /**
    * Handle async drawing complete.
    * @param {Error} err Any error during drawing.
    * @private
    */
-ImageCanvas.prototype.handleLoad_ = function(err) {
+  handleLoad_(err) {
     if (err) {
       this.error_ = err;
       this.state = ImageState.ERROR;
@@ -78,25 +73,26 @@ ImageCanvas.prototype.handleLoad_ = function(err) {
       this.state = ImageState.LOADED;
     }
     this.changed();
-};
+  }
 
-
-/**
+  /**
    * @inheritDoc
    */
-ImageCanvas.prototype.load = function() {
+  load() {
     if (this.state == ImageState.IDLE) {
       this.state = ImageState.LOADING;
       this.changed();
       this.loader_(this.handleLoad_.bind(this));
     }
-};
+  }
 
-
-/**
+  /**
    * @return {HTMLCanvasElement} Canvas element.
    */
-ImageCanvas.prototype.getImage = function() {
+  getImage() {
     return this.canvas_;
-};
+  }
+}
+
+
 export default ImageCanvas;

src/ol/ImageTile.js

@@ -1,7 +1,6 @@
 /**
  * @module ol/ImageTile
  */
-import {inherits} from './util.js';
 import Tile from './Tile.js';
 import TileState from './TileState.js';
 import {createCanvasContext2D} from './dom.js';
@@ -14,9 +13,9 @@ import EventType from './events/EventType.js';
  * @api
  */
 
-/**
- * @constructor
- * @extends {module:ol/Tile}
+class ImageTile extends Tile {
+
+  /**
    * @param {module:ol/tilecoord~TileCoord} tileCoord Tile coordinate.
    * @param {module:ol/TileState} state State.
    * @param {string} src Image source URI.
@@ -24,9 +23,9 @@ import EventType from './events/EventType.js';
    * @param {module:ol/Tile~LoadFunction} tileLoadFunction Tile load function.
    * @param {module:ol/Tile~Options=} opt_options Tile options.
    */
-const ImageTile = function(tileCoord, state, src, crossOrigin, tileLoadFunction, opt_options) {
+  constructor(tileCoord, state, src, crossOrigin, tileLoadFunction, opt_options) {
 
-  Tile.call(this, tileCoord, state, opt_options);
+    super(tileCoord, state, opt_options);
 
     /**
      * @private
@@ -53,7 +52,7 @@ const ImageTile = function(tileCoord, state, src, crossOrigin, tileLoadFunction,
 
     /**
      * @private
-   * @type {Array.<module:ol/events~EventsKey>}
+     * @type {Array<module:ol/events~EventsKey>}
      */
     this.imageListenerKeys_ = null;
 
@@ -63,15 +62,12 @@ const ImageTile = function(tileCoord, state, src, crossOrigin, tileLoadFunction,
      */
     this.tileLoadFunction_ = tileLoadFunction;
 
-};
+  }
 
-inherits(ImageTile, Tile);
-
-
-/**
+  /**
    * @inheritDoc
    */
-ImageTile.prototype.disposeInternal = function() {
+  disposeInternal() {
     if (this.state == TileState.LOADING) {
       this.unlistenImage_();
       this.image_ = getBlankImage();
@@ -81,47 +77,43 @@ ImageTile.prototype.disposeInternal = function() {
     }
     this.state = TileState.ABORT;
     this.changed();
-  Tile.prototype.disposeInternal.call(this);
-};
+    super.disposeInternal();
+  }
 
-
-/**
+  /**
    * Get the HTML image element for this tile (may be a Canvas, Image, or Video).
    * @return {HTMLCanvasElement|HTMLImageElement|HTMLVideoElement} Image.
    * @api
    */
-ImageTile.prototype.getImage = function() {
+  getImage() {
     return this.image_;
-};
+  }
 
-
-/**
+  /**
    * @inheritDoc
    */
-ImageTile.prototype.getKey = function() {
+  getKey() {
     return this.src_;
-};
+  }
 
-
-/**
+  /**
    * Tracks loading or read errors.
    *
    * @private
    */
-ImageTile.prototype.handleImageError_ = function() {
+  handleImageError_() {
     this.state = TileState.ERROR;
     this.unlistenImage_();
     this.image_ = getBlankImage();
     this.changed();
-};
+  }
 
-
-/**
+  /**
    * Tracks successful image load.
    *
    * @private
    */
-ImageTile.prototype.handleImageLoad_ = function() {
+  handleImageLoad_() {
     if (this.image_.naturalWidth && this.image_.naturalHeight) {
       this.state = TileState.LOADED;
     } else {
@@ -129,14 +121,13 @@ ImageTile.prototype.handleImageLoad_ = function() {
     }
     this.unlistenImage_();
     this.changed();
-};
+  }
 
-
-/**
+  /**
    * @inheritDoc
    * @api
    */
-ImageTile.prototype.load = function() {
+  load() {
     if (this.state == TileState.ERROR) {
       this.state = TileState.IDLE;
       this.image_ = new Image();
@@ -155,18 +146,18 @@ ImageTile.prototype.load = function() {
       ];
       this.tileLoadFunction_(this, this.src_);
     }
-};
+  }
 
-
-/**
+  /**
    * Discards event handlers which listen for load completion or errors.
    *
    * @private
    */
-ImageTile.prototype.unlistenImage_ = function() {
+  unlistenImage_() {
     this.imageListenerKeys_.forEach(unlistenByKey);
     this.imageListenerKeys_ = null;
-};
+  }
+}
 
 
 /**

src/ol/Kinetic.js

@@ -6,15 +6,17 @@
  * @classdesc
  * Implementation of inertial deceleration for map movement.
  *
- * @constructor
+ * @api
+ */
+class Kinetic {
+
+  /**
    * @param {number} decay Rate of decay (must be negative).
    * @param {number} minVelocity Minimum velocity (pixels/millisecond).
    * @param {number} delay Delay to consider to calculate the kinetic
    *     initial values (milliseconds).
- * @struct
- * @api
    */
-const Kinetic = function(decay, minVelocity, delay) {
+  constructor(decay, minVelocity, delay) {
 
     /**
      * @private
@@ -36,7 +38,7 @@ const Kinetic = function(decay, minVelocity, delay) {
 
     /**
      * @private
-   * @type {Array.<number>}
+     * @type {Array<number>}
      */
     this.points_ = [];
 
@@ -51,32 +53,29 @@ const Kinetic = function(decay, minVelocity, delay) {
      * @type {number}
      */
     this.initialVelocity_ = 0;
-};
+  }
 
-
-/**
+  /**
    * FIXME empty description for jsdoc
    */
-Kinetic.prototype.begin = function() {
+  begin() {
     this.points_.length = 0;
     this.angle_ = 0;
     this.initialVelocity_ = 0;
-};
+  }
 
-
-/**
+  /**
    * @param {number} x X.
    * @param {number} y Y.
    */
-Kinetic.prototype.update = function(x, y) {
+  update(x, y) {
     this.points_.push(x, y, Date.now());
-};
+  }
 
-
-/**
+  /**
    * @return {boolean} Whether we should do kinetic animation.
    */
-Kinetic.prototype.end = function() {
+  end() {
     if (this.points_.length < 6) {
       // at least 2 points are required (i.e. there must be at least 6 elements
       // in the array)
@@ -109,21 +108,21 @@ Kinetic.prototype.end = function() {
     this.angle_ = Math.atan2(dy, dx);
     this.initialVelocity_ = Math.sqrt(dx * dx + dy * dy) / duration;
     return this.initialVelocity_ > this.minVelocity_;
-};
+  }
 
-
-/**
+  /**
    * @return {number} Total distance travelled (pixels).
    */
-Kinetic.prototype.getDistance = function() {
+  getDistance() {
     return (this.minVelocity_ - this.initialVelocity_) / this.decay_;
-};
+  }
 
-
-/**
+  /**
    * @return {number} Angle of the kinetic panning animation (radians).
    */
-Kinetic.prototype.getAngle = function() {
+  getAngle() {
     return this.angle_;
-};
+  }
+}
+
 export default Kinetic;

src/ol/Map.js

@@ -1,7 +1,6 @@
 /**
  * @module ol/Map
  */
-import {inherits} from './util.js';
 import PluggableMap from './PluggableMap.js';
 import {defaults as defaultControls} from './control/util.js';
 import {defaults as defaultInteractions} from './interaction.js';
@@ -57,16 +56,18 @@ import CanvasVectorTileLayerRenderer from './renderer/canvas/VectorTileLayer.js'
  * options or added with `addLayer` can be groups, which can contain further
  * groups, and so on.
  *
- * @constructor
- * @extends {module:ol/PluggableMap}
- * @param {module:ol/PluggableMap~MapOptions} options Map options.
  * @fires module:ol/MapBrowserEvent~MapBrowserEvent
  * @fires module:ol/MapEvent~MapEvent
  * @fires module:ol/render/Event~RenderEvent#postcompose
  * @fires module:ol/render/Event~RenderEvent#precompose
  * @api
  */
-const Map = function(options) {
+class Map extends PluggableMap {
+
+  /**
+   * @param {module:ol/PluggableMap~MapOptions} options Map options.
+   */
+  constructor(options) {
     options = assign({}, options);
     if (!options.controls) {
       options.controls = defaultControls();
@@ -75,12 +76,10 @@ const Map = function(options) {
       options.interactions = defaultInteractions();
     }
 
-  PluggableMap.call(this, options);
-};
+    super(options);
+  }
 
-inherits(Map, PluggableMap);
-
-Map.prototype.createRenderer = function() {
+  createRenderer() {
     const renderer = new CanvasMapRenderer(this);
     renderer.registerLayerRenderers([
       CanvasImageLayerRenderer,
@@ -89,6 +88,8 @@ Map.prototype.createRenderer = function() {
       CanvasVectorTileLayerRenderer
     ]);
     return renderer;
-};
+  }
+}
+
 
 export default Map;

src/ol/MapBrowserEvent.js

@@ -1,25 +1,25 @@
 /**
  * @module ol/MapBrowserEvent
  */
-import {inherits} from './util.js';
 import MapEvent from './MapEvent.js';
 
 /**
  * @classdesc
  * Events emitted as map browser events are instances of this type.
- * See {@link module:ol/Map~Map} for which events trigger a map browser event.
- *
- * @constructor
- * @extends {module:ol/MapEvent}
+ * See {@link module:ol/PluggableMap~PluggableMap} for which events trigger a map browser event.
+ */
+class MapBrowserEvent extends MapEvent {
+
+  /**
    * @param {string} type Event type.
    * @param {module:ol/PluggableMap} map Map.
    * @param {Event} browserEvent Browser event.
    * @param {boolean=} opt_dragging Is the map currently being dragged?
    * @param {?module:ol/PluggableMap~FrameState=} opt_frameState Frame state.
    */
-const MapBrowserEvent = function(type, map, browserEvent, opt_dragging, opt_frameState) {
+  constructor(type, map, browserEvent, opt_dragging, opt_frameState) {
 
-  MapEvent.call(this, type, map, opt_frameState);
+    super(type, map, opt_frameState);
 
     /**
      * The original browser event.
@@ -31,7 +31,7 @@ const MapBrowserEvent = function(type, map, browserEvent, opt_dragging, opt_fram
 
     /**
      * The map pixel relative to the viewport corresponding to the original browser event.
-   * @type {module:ol~Pixel}
+     * @type {module:ol/pixel~Pixel}
      * @api
      */
     this.pixel = map.getEventPixel(browserEvent);
@@ -52,31 +52,30 @@ const MapBrowserEvent = function(type, map, browserEvent, opt_dragging, opt_fram
      */
     this.dragging = opt_dragging !== undefined ? opt_dragging : false;
 
-};
+  }
 
-inherits(MapBrowserEvent, MapEvent);
-
-
-/**
+  /**
    * Prevents the default browser action.
- * @see https://developer.mozilla.org/en-US/docs/Web/API/event.preventDefault
+   * See https://developer.mozilla.org/en-US/docs/Web/API/event.preventDefault.
    * @override
    * @api
    */
-MapBrowserEvent.prototype.preventDefault = function() {
-  MapEvent.prototype.preventDefault.call(this);
+  preventDefault() {
+    super.preventDefault();
     this.originalEvent.preventDefault();
-};
+  }
 
-
-/**
+  /**
    * Prevents further propagation of the current event.
- * @see https://developer.mozilla.org/en-US/docs/Web/API/event.stopPropagation
+   * See https://developer.mozilla.org/en-US/docs/Web/API/event.stopPropagation.
    * @override
    * @api
    */
-MapBrowserEvent.prototype.stopPropagation = function() {
-  MapEvent.prototype.stopPropagation.call(this);
+  stopPropagation() {
+    super.stopPropagation();
     this.originalEvent.stopPropagation();
-};
+  }
+}
+
+
 export default MapBrowserEvent;

src/ol/MapBrowserEventHandler.js

@@ -1,26 +1,23 @@
 /**
  * @module ol/MapBrowserEventHandler
  */
-import {inherits} from './util.js';
 import {DEVICE_PIXEL_RATIO} from './has.js';
 import MapBrowserEventType from './MapBrowserEventType.js';
 import MapBrowserPointerEvent from './MapBrowserPointerEvent.js';
 import {listen, unlistenByKey} from './events.js';
-import EventTarget from './events/EventTarget.js';
+import EventTarget from './events/Target.js';
 import PointerEventType from './pointer/EventType.js';
 import PointerEventHandler from './pointer/PointerEventHandler.js';
 
-/**
- * @param {module:ol/PluggableMap} map The map with the viewport to
- * listen to events on.
- * @param {number=} moveTolerance The minimal distance the pointer must travel
- * to trigger a move.
- * @constructor
- * @extends {module:ol/events/EventTarget}
- */
-const MapBrowserEventHandler = function(map, moveTolerance) {
+class MapBrowserEventHandler extends EventTarget {
 
-  EventTarget.call(this);
+  /**
+   * @param {module:ol/PluggableMap} map The map with the viewport to listen to events on.
+   * @param {number=} moveTolerance The minimal distance the pointer must travel to trigger a move.
+   */
+  constructor(map, moveTolerance) {
+
+    super();
 
     /**
      * This is the element that we will listen to the real events on.
@@ -42,7 +39,7 @@ const MapBrowserEventHandler = function(map, moveTolerance) {
     this.dragging_ = false;
 
     /**
-   * @type {!Array.<module:ol/events~EventsKey>}
+     * @type {!Array<module:ol/events~EventsKey>}
      * @private
      */
     this.dragListenerKeys_ = [];
@@ -71,7 +68,7 @@ const MapBrowserEventHandler = function(map, moveTolerance) {
     this.activePointers_ = 0;
 
     /**
-   * @type {!Object.<number, boolean>}
+     * @type {!Object<number, boolean>}
      * @private
      */
     this.trackedTouches_ = {};
@@ -110,17 +107,14 @@ const MapBrowserEventHandler = function(map, moveTolerance) {
       PointerEventType.POINTERMOVE,
       this.relayEvent_, this);
 
-};
+  }
 
-inherits(MapBrowserEventHandler, EventTarget);
-
-
-/**
+  /**
    * @param {module:ol/pointer/PointerEvent} pointerEvent Pointer
    * event.
    * @private
    */
-MapBrowserEventHandler.prototype.emulateClick_ = function(pointerEvent) {
+  emulateClick_(pointerEvent) {
     let newEvent = new MapBrowserPointerEvent(
       MapBrowserEventType.CLICK, this.map_, pointerEvent);
     this.dispatchEvent(newEvent);
@@ -140,17 +134,16 @@ MapBrowserEventHandler.prototype.emulateClick_ = function(pointerEvent) {
         this.dispatchEvent(newEvent);
       }.bind(this), 250);
     }
-};
+  }
 
-
-/**
+  /**
    * Keeps track on how many pointers are currently active.
    *
    * @param {module:ol/pointer/PointerEvent} pointerEvent Pointer
    * event.
    * @private
    */
-MapBrowserEventHandler.prototype.updateActivePointers_ = function(pointerEvent) {
+  updateActivePointers_(pointerEvent) {
     const event = pointerEvent;
 
     if (event.type == MapBrowserEventType.POINTERUP ||
@@ -160,15 +153,14 @@ MapBrowserEventHandler.prototype.updateActivePointers_ = function(pointerEvent)
       this.trackedTouches_[event.pointerId] = true;
     }
     this.activePointers_ = Object.keys(this.trackedTouches_).length;
-};
+  }
 
-
-/**
+  /**
    * @param {module:ol/pointer/PointerEvent} pointerEvent Pointer
    * event.
    * @private
    */
-MapBrowserEventHandler.prototype.handlePointerUp_ = function(pointerEvent) {
+  handlePointerUp_(pointerEvent) {
     this.updateActivePointers_(pointerEvent);
     const newEvent = new MapBrowserPointerEvent(
       MapBrowserEventType.POINTERUP, this.map_, pointerEvent);
@@ -192,26 +184,24 @@ MapBrowserEventHandler.prototype.handlePointerUp_ = function(pointerEvent) {
       this.documentPointerEventHandler_.dispose();
       this.documentPointerEventHandler_ = null;
     }
-};
+  }
 
-
-/**
+  /**
    * @param {module:ol/pointer/PointerEvent} pointerEvent Pointer
    * event.
    * @return {boolean} If the left mouse button was pressed.
    * @private
    */
-MapBrowserEventHandler.prototype.isMouseActionButton_ = function(pointerEvent) {
+  isMouseActionButton_(pointerEvent) {
     return pointerEvent.button === 0;
-};
+  }
 
-
-/**
+  /**
    * @param {module:ol/pointer/PointerEvent} pointerEvent Pointer
    * event.
    * @private
    */
-MapBrowserEventHandler.prototype.handlePointerDown_ = function(pointerEvent) {
+  handlePointerDown_(pointerEvent) {
     this.updateActivePointers_(pointerEvent);
     const newEvent = new MapBrowserPointerEvent(
       MapBrowserEventType.POINTERDOWN, this.map_, pointerEvent);
@@ -252,15 +242,14 @@ MapBrowserEventHandler.prototype.handlePointerDown_ = function(pointerEvent) {
           this.handlePointerUp_, this)
       );
     }
-};
+  }
 
-
-/**
+  /**
    * @param {module:ol/pointer/PointerEvent} pointerEvent Pointer
    * event.
    * @private
    */
-MapBrowserEventHandler.prototype.handlePointerMove_ = function(pointerEvent) {
+  handlePointerMove_(pointerEvent) {
     // Between pointerdown and pointerup, pointermove events are triggered.
     // To avoid a 'false' touchmove event to be dispatched, we test if the pointer
     // moved a significant distance.
@@ -277,40 +266,37 @@ MapBrowserEventHandler.prototype.handlePointerMove_ = function(pointerEvent) {
     // https://code.google.com/p/android/issues/detail?id=19827
     // ex: Galaxy Tab P3110 + Android 4.1.1
     pointerEvent.preventDefault();
-};
+  }
 
-
-/**
+  /**
    * Wrap and relay a pointer event.  Note that this requires that the type
    * string for the MapBrowserPointerEvent matches the PointerEvent type.
    * @param {module:ol/pointer/PointerEvent} pointerEvent Pointer
    * event.
    * @private
    */
-MapBrowserEventHandler.prototype.relayEvent_ = function(pointerEvent) {
+  relayEvent_(pointerEvent) {
     const dragging = !!(this.down_ && this.isMoving_(pointerEvent));
     this.dispatchEvent(new MapBrowserPointerEvent(
       pointerEvent.type, this.map_, pointerEvent, dragging));
-};
+  }
 
-
-/**
+  /**
    * @param {module:ol/pointer/PointerEvent} pointerEvent Pointer
    * event.
    * @return {boolean} Is moving.
    * @private
    */
-MapBrowserEventHandler.prototype.isMoving_ = function(pointerEvent) {
+  isMoving_(pointerEvent) {
     return this.dragging_ ||
         Math.abs(pointerEvent.clientX - this.down_.clientX) > this.moveTolerance_ ||
         Math.abs(pointerEvent.clientY - this.down_.clientY) > this.moveTolerance_;
-};
+  }
 
-
-/**
+  /**
    * @inheritDoc
    */
-MapBrowserEventHandler.prototype.disposeInternal = function() {
+  disposeInternal() {
     if (this.relayedListenerKey_) {
       unlistenByKey(this.relayedListenerKey_);
       this.relayedListenerKey_ = null;
@@ -331,6 +317,9 @@ MapBrowserEventHandler.prototype.disposeInternal = function() {
       this.pointerEventHandler_.dispose();
       this.pointerEventHandler_ = null;
     }
-  EventTarget.prototype.disposeInternal.call(this);
-};
+    super.disposeInternal();
+  }
+}
+
+
 export default MapBrowserEventHandler;

src/ol/MapBrowserPointerEvent.js

@@ -1,24 +1,20 @@
 /**
  * @module ol/MapBrowserPointerEvent
  */
-import {inherits} from './util.js';
 import MapBrowserEvent from './MapBrowserEvent.js';
 
-/**
- * @constructor
- * @extends {module:ol/MapBrowserEvent}
+class MapBrowserPointerEvent extends MapBrowserEvent {
+
+  /**
    * @param {string} type Event type.
    * @param {module:ol/PluggableMap} map Map.
- * @param {module:ol/pointer/PointerEvent} pointerEvent Pointer
- * event.
+   * @param {module:ol/pointer/PointerEvent} pointerEvent Pointer event.
    * @param {boolean=} opt_dragging Is the map currently being dragged?
    * @param {?module:ol/PluggableMap~FrameState=} opt_frameState Frame state.
    */
-const MapBrowserPointerEvent = function(type, map, pointerEvent, opt_dragging,
-  opt_frameState) {
+  constructor(type, map, pointerEvent, opt_dragging, opt_frameState) {
 
-  MapBrowserEvent.call(this, type, map, pointerEvent.originalEvent, opt_dragging,
-    opt_frameState);
+    super(type, map, pointerEvent.originalEvent, opt_dragging, opt_frameState);
 
     /**
      * @const
@@ -26,7 +22,8 @@ const MapBrowserPointerEvent = function(type, map, pointerEvent, opt_dragging,
      */
     this.pointerEvent = pointerEvent;
 
-};
+  }
+
+}
 
-inherits(MapBrowserPointerEvent, MapBrowserEvent);
 export default MapBrowserPointerEvent;

src/ol/MapEvent.js

@@ -1,23 +1,23 @@
 /**
  * @module ol/MapEvent
  */
-import {inherits} from './util.js';
 import Event from './events/Event.js';
 
 /**
  * @classdesc
  * Events emitted as map events are instances of this type.
- * See {@link module:ol/Map~Map} for which events trigger a map event.
- *
- * @constructor
- * @extends {module:ol/events/Event}
+ * See {@link module:ol/PluggableMap~PluggableMap} for which events trigger a map event.
+ */
+class MapEvent extends Event {
+
+  /**
    * @param {string} type Event type.
    * @param {module:ol/PluggableMap} map Map.
    * @param {?module:ol/PluggableMap~FrameState=} opt_frameState Frame state.
    */
-const MapEvent = function(type, map, opt_frameState) {
+  constructor(type, map, opt_frameState) {
 
-  Event.call(this, type);
+    super(type);
 
     /**
      * The map where the event occurred.
@@ -33,7 +33,8 @@ const MapEvent = function(type, map, opt_frameState) {
      */
     this.frameState = opt_frameState !== undefined ? opt_frameState : null;
 
-};
+  }
+
+}
 
-inherits(MapEvent, Event);
 export default MapEvent;

src/ol/Object.js

@@ -1,7 +1,7 @@
 /**
  * @module ol/Object
  */
-import {getUid, inherits} from './util.js';
+import {getUid} from './util.js';
 import ObjectEventType from './ObjectEventType.js';
 import Observable from './Observable.js';
 import Event from './events/Event.js';
@@ -10,17 +10,17 @@ import {assign} from './obj.js';
 
 /**
  * @classdesc
- * Events emitted by {@link module:ol/Object~BaseObject} instances are instances of
- * this type.
- *
+ * Events emitted by {@link module:ol/Object~BaseObject} instances are instances of this type.
+  */
+class ObjectEvent extends Event {
+
+  /**
    * @param {string} type The event type.
    * @param {string} key The property name.
    * @param {*} oldValue The old value for `key`.
- * @extends {module:ol/events/Event}
- * @constructor
    */
-const ObjectEvent = function(type, key, oldValue) {
-  Event.call(this, type);
+  constructor(type, key, oldValue) {
+    super(type);
 
     /**
      * The name of the property whose value is changing.
@@ -37,8 +37,9 @@ const ObjectEvent = function(type, key, oldValue) {
      */
     this.oldValue = oldValue;
 
-};
-inherits(ObjectEvent, Event);
+  }
+
+}
 
 
 /**
@@ -81,16 +82,18 @@ inherits(ObjectEvent, Event);
  * Properties can be deleted by using the unset method. E.g.
  * object.unset('foo').
  *
- * @constructor
- * @extends {module:ol/Observable}
- * @param {Object.<string, *>=} opt_values An object with key-value pairs.
  * @fires module:ol/Object~ObjectEvent
  * @api
  */
-const BaseObject = function(opt_values) {
-  Observable.call(this);
+class BaseObject extends Observable {
 
-  // Call {@link module:ol~getUid} to ensure that the order of objects' ids is
+  /**
+   * @param {Object<string, *>=} opt_values An object with key-value pairs.
+   */
+  constructor(opt_values) {
+    super();
+
+    // Call {@link module:ol/util~getUid} to ensure that the order of objects' ids is
     // the same as the order in which they were created.  This also helps to
     // ensure that object properties are always added in the same order, which
     // helps many JavaScript engines generate faster code.
@@ -98,20 +101,111 @@ const BaseObject = function(opt_values) {
 
     /**
      * @private
-   * @type {!Object.<string, *>}
+     * @type {!Object<string, *>}
      */
     this.values_ = {};
 
     if (opt_values !== undefined) {
       this.setProperties(opt_values);
     }
-};
+  }
 
-inherits(BaseObject, Observable);
+  /**
+   * Gets a value.
+   * @param {string} key Key name.
+   * @return {*} Value.
+   * @api
+   */
+  get(key) {
+    let value;
+    if (this.values_.hasOwnProperty(key)) {
+      value = this.values_[key];
+    }
+    return value;
+  }
+
+  /**
+   * Get a list of object property names.
+   * @return {Array<string>} List of property names.
+   * @api
+   */
+  getKeys() {
+    return Object.keys(this.values_);
+  }
+
+  /**
+   * Get an object of all property names and values.
+   * @return {Object<string, *>} Object.
+   * @api
+   */
+  getProperties() {
+    return assign({}, this.values_);
+  }
+
+  /**
+   * @param {string} key Key name.
+   * @param {*} oldValue Old value.
+   */
+  notify(key, oldValue) {
+    let eventType;
+    eventType = getChangeEventType(key);
+    this.dispatchEvent(new ObjectEvent(eventType, key, oldValue));
+    eventType = ObjectEventType.PROPERTYCHANGE;
+    this.dispatchEvent(new ObjectEvent(eventType, key, oldValue));
+  }
+
+  /**
+   * Sets a value.
+   * @param {string} key Key name.
+   * @param {*} value Value.
+   * @param {boolean=} opt_silent Update without triggering an event.
+   * @api
+   */
+  set(key, value, opt_silent) {
+    if (opt_silent) {
+      this.values_[key] = value;
+    } else {
+      const oldValue = this.values_[key];
+      this.values_[key] = value;
+      if (oldValue !== value) {
+        this.notify(key, oldValue);
+      }
+    }
+  }
+
+  /**
+   * Sets a collection of key-value pairs.  Note that this changes any existing
+   * properties and adds new ones (it does not remove any existing properties).
+   * @param {Object<string, *>} values Values.
+   * @param {boolean=} opt_silent Update without triggering an event.
+   * @api
+   */
+  setProperties(values, opt_silent) {
+    for (const key in values) {
+      this.set(key, values[key], opt_silent);
+    }
+  }
+
+  /**
+   * Unsets a property.
+   * @param {string} key Key name.
+   * @param {boolean=} opt_silent Unset without triggering an event.
+   * @api
+   */
+  unset(key, opt_silent) {
+    if (key in this.values_) {
+      const oldValue = this.values_[key];
+      delete this.values_[key];
+      if (!opt_silent) {
+        this.notify(key, oldValue);
+      }
+    }
+  }
+}
 
 
 /**
- * @type {Object.<string, string>}
+ * @type {Object<string, string>}
  */
 const changeEventTypeCache = {};
 
@@ -127,103 +221,4 @@ export function getChangeEventType(key) {
 }
 
 
-/**
- * Gets a value.
- * @param {string} key Key name.
- * @return {*} Value.
- * @api
- */
-BaseObject.prototype.get = function(key) {
-  let value;
-  if (this.values_.hasOwnProperty(key)) {
-    value = this.values_[key];
-  }
-  return value;
-};
-
-
-/**
- * Get a list of object property names.
- * @return {Array.<string>} List of property names.
- * @api
- */
-BaseObject.prototype.getKeys = function() {
-  return Object.keys(this.values_);
-};
-
-
-/**
- * Get an object of all property names and values.
- * @return {Object.<string, *>} Object.
- * @api
- */
-BaseObject.prototype.getProperties = function() {
-  return assign({}, this.values_);
-};
-
-
-/**
- * @param {string} key Key name.
- * @param {*} oldValue Old value.
- */
-BaseObject.prototype.notify = function(key, oldValue) {
-  let eventType;
-  eventType = getChangeEventType(key);
-  this.dispatchEvent(new ObjectEvent(eventType, key, oldValue));
-  eventType = ObjectEventType.PROPERTYCHANGE;
-  this.dispatchEvent(new ObjectEvent(eventType, key, oldValue));
-};
-
-
-/**
- * Sets a value.
- * @param {string} key Key name.
- * @param {*} value Value.
- * @param {boolean=} opt_silent Update without triggering an event.
- * @api
- */
-BaseObject.prototype.set = function(key, value, opt_silent) {
-  if (opt_silent) {
-    this.values_[key] = value;
-  } else {
-    const oldValue = this.values_[key];
-    this.values_[key] = value;
-    if (oldValue !== value) {
-      this.notify(key, oldValue);
-    }
-  }
-};
-
-
-/**
- * Sets a collection of key-value pairs.  Note that this changes any existing
- * properties and adds new ones (it does not remove any existing properties).
- * @param {Object.<string, *>} values Values.
- * @param {boolean=} opt_silent Update without triggering an event.
- * @api
- */
-BaseObject.prototype.setProperties = function(values, opt_silent) {
-  for (const key in values) {
-    this.set(key, values[key], opt_silent);
-  }
-};
-
-
-/**
- * Unsets a property.
- * @param {string} key Key name.
- * @param {boolean=} opt_silent Unset without triggering an event.
- * @api
- */
-BaseObject.prototype.unset = function(key, opt_silent) {
-  if (key in this.values_) {
-    const oldValue = this.values_[key];
-    delete this.values_[key];
-    if (!opt_silent) {
-      this.notify(key, oldValue);
-    }
-  }
-};
-
-
 export default BaseObject;

src/ol/Observable.js

@@ -1,9 +1,8 @@
 /**
  * @module ol/Observable
  */
-import {inherits} from './util.js';
 import {listen, unlistenByKey, unlisten, listenOnce} from './events.js';
-import EventTarget from './events/EventTarget.js';
+import EventTarget from './events/Target.js';
 import EventType from './events/EventType.js';
 
 /**
@@ -14,15 +13,13 @@ import EventType from './events/EventType.js';
  * and unregistration. A generic `change` event is always available through
  * {@link module:ol/Observable~Observable#changed}.
  *
- * @constructor
- * @extends {module:ol/events/EventTarget}
  * @fires module:ol/events/Event~Event
- * @struct
  * @api
  */
-const Observable = function() {
+class Observable extends EventTarget {
+  constructor() {
 
-  EventTarget.call(this);
+    super();
 
     /**
      * @private
@@ -30,14 +27,93 @@ const Observable = function() {
      */
     this.revision_ = 0;
 
-};
+  }
 
-inherits(Observable, EventTarget);
+  /**
+   * Increases the revision counter and dispatches a 'change' event.
+   * @api
+   */
+  changed() {
+    ++this.revision_;
+    this.dispatchEvent(EventType.CHANGE);
+  }
+
+  /**
+   * Get the version number for this object.  Each time the object is modified,
+   * its version number will be incremented.
+   * @return {number} Revision.
+   * @api
+   */
+  getRevision() {
+    return this.revision_;
+  }
+
+  /**
+   * Listen for a certain type of event.
+   * @param {string|Array<string>} type The event type or array of event types.
+   * @param {function(?): ?} listener The listener function.
+   * @return {module:ol/events~EventsKey|Array<module:ol/events~EventsKey>} Unique key for the listener. If
+   *     called with an array of event types as the first argument, the return
+   *     will be an array of keys.
+   * @api
+   */
+  on(type, listener) {
+    if (Array.isArray(type)) {
+      const len = type.length;
+      const keys = new Array(len);
+      for (let i = 0; i < len; ++i) {
+        keys[i] = listen(this, type[i], listener);
+      }
+      return keys;
+    } else {
+      return listen(this, /** @type {string} */ (type), listener);
+    }
+  }
+
+  /**
+   * Listen once for a certain type of event.
+   * @param {string|Array<string>} type The event type or array of event types.
+   * @param {function(?): ?} listener The listener function.
+   * @return {module:ol/events~EventsKey|Array<module:ol/events~EventsKey>} Unique key for the listener. If
+   *     called with an array of event types as the first argument, the return
+   *     will be an array of keys.
+   * @api
+   */
+  once(type, listener) {
+    if (Array.isArray(type)) {
+      const len = type.length;
+      const keys = new Array(len);
+      for (let i = 0; i < len; ++i) {
+        keys[i] = listenOnce(this, type[i], listener);
+      }
+      return keys;
+    } else {
+      return listenOnce(this, /** @type {string} */ (type), listener);
+    }
+  }
+
+  /**
+   * Unlisten for a certain type of event.
+   * @param {string|Array<string>} type The event type or array of event types.
+   * @param {function(?): ?} listener The listener function.
+   * @api
+   */
+  un(type, listener) {
+    if (Array.isArray(type)) {
+      for (let i = 0, ii = type.length; i < ii; ++i) {
+        unlisten(this, type[i], listener);
+      }
+      return;
+    } else {
+      unlisten(this, /** @type {string} */ (type), listener);
+    }
+  }
+}
 
 
 /**
  * Removes an event listener using the key returned by `on()` or `once()`.
- * @param {module:ol/events~EventsKey|Array.<module:ol/events~EventsKey>} key The key returned by `on()`
+ * @param {module:ol/events~EventsKey|Array<module:ol/events~EventsKey>} key The key returned by `on()`
  *     or `once()` (or an array of keys).
  * @api
  */
@@ -52,101 +128,4 @@ export function unByKey(key) {
 }
 
 
-/**
- * Increases the revision counter and dispatches a 'change' event.
- * @api
- */
-Observable.prototype.changed = function() {
-  ++this.revision_;
-  this.dispatchEvent(EventType.CHANGE);
-};
-
-
-/**
- * Dispatches an event and calls all listeners listening for events
- * of this type. The event parameter can either be a string or an
- * Object with a `type` property.
- *
- * @param {{type: string,
- *     target: (EventTarget|module:ol/events/EventTarget|undefined)}|
- *     module:ol/events/Event|string} event Event object.
- * @function
- * @api
- */
-Observable.prototype.dispatchEvent;
-
-
-/**
- * Get the version number for this object.  Each time the object is modified,
- * its version number will be incremented.
- * @return {number} Revision.
- * @api
- */
-Observable.prototype.getRevision = function() {
-  return this.revision_;
-};
-
-
-/**
- * Listen for a certain type of event.
- * @param {string|Array.<string>} type The event type or array of event types.
- * @param {function(?): ?} listener The listener function.
- * @return {module:ol/events~EventsKey|Array.<module:ol/events~EventsKey>} Unique key for the listener. If
- *     called with an array of event types as the first argument, the return
- *     will be an array of keys.
- * @api
- */
-Observable.prototype.on = function(type, listener) {
-  if (Array.isArray(type)) {
-    const len = type.length;
-    const keys = new Array(len);
-    for (let i = 0; i < len; ++i) {
-      keys[i] = listen(this, type[i], listener);
-    }
-    return keys;
-  } else {
-    return listen(this, /** @type {string} */ (type), listener);
-  }
-};
-
-
-/**
- * Listen once for a certain type of event.
- * @param {string|Array.<string>} type The event type or array of event types.
- * @param {function(?): ?} listener The listener function.
- * @return {module:ol/events~EventsKey|Array.<module:ol/events~EventsKey>} Unique key for the listener. If
- *     called with an array of event types as the first argument, the return
- *     will be an array of keys.
- * @api
- */
-Observable.prototype.once = function(type, listener) {
-  if (Array.isArray(type)) {
-    const len = type.length;
-    const keys = new Array(len);
-    for (let i = 0; i < len; ++i) {
-      keys[i] = listenOnce(this, type[i], listener);
-    }
-    return keys;
-  } else {
-    return listenOnce(this, /** @type {string} */ (type), listener);
-  }
-};
-
-
-/**
- * Unlisten for a certain type of event.
- * @param {string|Array.<string>} type The event type or array of event types.
- * @param {function(?): ?} listener The listener function.
- * @api
- */
-Observable.prototype.un = function(type, listener) {
-  if (Array.isArray(type)) {
-    for (let i = 0, ii = type.length; i < ii; ++i) {
-      unlisten(this, type[i], listener);
-    }
-    return;
-  } else {
-    unlisten(this, /** @type {string} */ (type), listener);
-  }
-};
 export default Observable;

src/ol/Overlay.js

@@ -1,7 +1,6 @@
 /**
  * @module ol/Overlay
  */
-import {inherits} from './util.js';
 import MapEventType from './MapEventType.js';
 import BaseObject, {getChangeEventType} from './Object.js';
 import OverlayPositioning from './OverlayPositioning.js';
@@ -16,7 +15,7 @@ import {containsExtent} from './extent.js';
  * @property {number|string} [id] Set the overlay id. The overlay id can be used
  * with the {@link module:ol/Map~Map#getOverlayById} method.
  * @property {HTMLElement} [element] The overlay element.
- * @property {Array.<number>} [offset=[0, 0]] Offsets in pixels used when positioning
+ * @property {Array<number>} [offset=[0, 0]] Offsets in pixels used when positioning
  * the overlay. The first element in the
  * array is the horizontal offset. A positive value shifts the overlay right.
  * The second element in the array is the vertical offset. A positive value
@@ -93,14 +92,16 @@ const Property = {
  *     popup.setPosition(coordinate);
  *     map.addOverlay(popup);
  *
- * @constructor
- * @extends {module:ol/Object}
- * @param {module:ol/Overlay~Options} options Overlay options.
  * @api
  */
-const Overlay = function(options) {
+class Overlay extends BaseObject {
 
-  BaseObject.call(this);
+  /**
+   * @param {module:ol/Overlay~Options} options Overlay options.
+   */
+  constructor(options) {
+
+    super();
 
     /**
      * @protected
@@ -131,7 +132,7 @@ const Overlay = function(options) {
      * @protected
      * @type {HTMLElement}
      */
-  this.element = document.createElement('DIV');
+    this.element = document.createElement('div');
     this.element.className = options.className !== undefined ?
       options.className : 'ol-overlay-container ' + CLASS_SELECTABLE;
     this.element.style.position = 'absolute';
@@ -211,101 +212,91 @@ const Overlay = function(options) {
       this.setPosition(options.position);
     }
 
-};
+  }
 
-inherits(Overlay, BaseObject);
-
-
-/**
+  /**
    * Get the DOM element of this overlay.
    * @return {HTMLElement|undefined} The Element containing the overlay.
    * @observable
    * @api
    */
-Overlay.prototype.getElement = function() {
+  getElement() {
     return /** @type {HTMLElement|undefined} */ (this.get(Property.ELEMENT));
-};
+  }
 
-
-/**
+  /**
    * Get the overlay identifier which is set on constructor.
    * @return {number|string|undefined} Id.
    * @api
    */
-Overlay.prototype.getId = function() {
+  getId() {
     return this.id;
-};
+  }
 
-
-/**
+  /**
    * Get the map associated with this overlay.
    * @return {module:ol/PluggableMap|undefined} The map that the
    * overlay is part of.
    * @observable
    * @api
    */
-Overlay.prototype.getMap = function() {
+  getMap() {
     return (
       /** @type {module:ol/PluggableMap|undefined} */ (this.get(Property.MAP))
     );
-};
+  }
 
-
-/**
+  /**
    * Get the offset of this overlay.
- * @return {Array.<number>} The offset.
+   * @return {Array<number>} The offset.
    * @observable
    * @api
    */
-Overlay.prototype.getOffset = function() {
-  return /** @type {Array.<number>} */ (this.get(Property.OFFSET));
-};
+  getOffset() {
+    return /** @type {Array<number>} */ (this.get(Property.OFFSET));
+  }
 
-
-/**
+  /**
    * Get the current position of this overlay.
    * @return {module:ol/coordinate~Coordinate|undefined} The spatial point that the overlay is
    *     anchored at.
    * @observable
    * @api
    */
-Overlay.prototype.getPosition = function() {
+  getPosition() {
     return (
       /** @type {module:ol/coordinate~Coordinate|undefined} */ (this.get(Property.POSITION))
     );
-};
+  }
 
-
-/**
+  /**
    * Get the current positioning of this overlay.
    * @return {module:ol/OverlayPositioning} How the overlay is positioned
    *     relative to its point on the map.
    * @observable
    * @api
    */
-Overlay.prototype.getPositioning = function() {
+  getPositioning() {
     return (
       /** @type {module:ol/OverlayPositioning} */ (this.get(Property.POSITIONING))
     );
-};
+  }
 
-
-/**
+  /**
    * @protected
    */
-Overlay.prototype.handleElementChanged = function() {
+  handleElementChanged() {
     removeChildren(this.element);
     const element = this.getElement();
     if (element) {
       this.element.appendChild(element);
     }
-};
+  }
 
-
-/**
+  /**
    * @protected
    */
-Overlay.prototype.handleMapChanged = function() {
+  handleMapChanged() {
     if (this.mapPostrenderListenerKey) {
       removeNode(this.element);
       unlistenByKey(this.mapPostrenderListenerKey);
@@ -324,79 +315,71 @@ Overlay.prototype.handleMapChanged = function() {
         container.appendChild(this.element);
       }
     }
-};
+  }
 
-
-/**
+  /**
    * @protected
    */
-Overlay.prototype.render = function() {
+  render() {
     this.updatePixelPosition();
-};
+  }
 
-
-/**
+  /**
    * @protected
    */
-Overlay.prototype.handleOffsetChanged = function() {
+  handleOffsetChanged() {
     this.updatePixelPosition();
-};
+  }
 
-
-/**
+  /**
    * @protected
    */
-Overlay.prototype.handlePositionChanged = function() {
+  handlePositionChanged() {
     this.updatePixelPosition();
     if (this.get(Property.POSITION) && this.autoPan) {
       this.panIntoView();
     }
-};
+  }
 
-
-/**
+  /**
    * @protected
    */
-Overlay.prototype.handlePositioningChanged = function() {
+  handlePositioningChanged() {
     this.updatePixelPosition();
-};
+  }
 
-
-/**
+  /**
    * Set the DOM element to be associated with this overlay.
    * @param {HTMLElement|undefined} element The Element containing the overlay.
    * @observable
    * @api
    */
-Overlay.prototype.setElement = function(element) {
+  setElement(element) {
     this.set(Property.ELEMENT, element);
-};
+  }
 
-
-/**
+  /**
    * Set the map to be associated with this overlay.
    * @param {module:ol/PluggableMap|undefined} map The map that the
    * overlay is part of.
    * @observable
    * @api
    */
-Overlay.prototype.setMap = function(map) {
+  setMap(map) {
     this.set(Property.MAP, map);
-};
+  }
 
-
-/**
+  /**
    * Set the offset for this overlay.
- * @param {Array.<number>} offset Offset.
+   * @param {Array<number>} offset Offset.
    * @observable
    * @api
    */
-Overlay.prototype.setOffset = function(offset) {
+  setOffset(offset) {
     this.set(Property.OFFSET, offset);
-};
+  }
 
-
-/**
+  /**
    * Set the position for this overlay. If the position is `undefined` the
    * overlay is hidden.
    * @param {module:ol/coordinate~Coordinate|undefined} position The spatial point that the overlay
@@ -404,17 +387,16 @@ Overlay.prototype.setOffset = function(offset) {
    * @observable
    * @api
    */
-Overlay.prototype.setPosition = function(position) {
+  setPosition(position) {
     this.set(Property.POSITION, position);
-};
+  }
 
-
-/**
+  /**
    * Pan the map so that the overlay is entirely visible in the current viewport
    * (if necessary).
    * @protected
    */
-Overlay.prototype.panIntoView = function() {
+  panIntoView() {
     const map = this.getMap();
 
     if (!map || !map.getTargetElement()) {
@@ -464,17 +446,16 @@ Overlay.prototype.panIntoView = function() {
         });
       }
     }
-};
+  }
 
-
-/**
+  /**
    * Get the extent of an element relative to the document
    * @param {HTMLElement|undefined} element The element.
    * @param {module:ol/size~Size|undefined} size The size of the element.
    * @return {module:ol/extent~Extent} The extent.
    * @protected
    */
-Overlay.prototype.getRect = function(element, size) {
+  getRect(element, size) {
     const box = element.getBoundingClientRect();
     const offsetX = box.left + window.pageXOffset;
     const offsetY = box.top + window.pageYOffset;
@@ -484,39 +465,36 @@ Overlay.prototype.getRect = function(element, size) {
       offsetX + size[0],
       offsetY + size[1]
     ];
-};
+  }
 
-
-/**
+  /**
    * Set the positioning for this overlay.
    * @param {module:ol/OverlayPositioning} positioning how the overlay is
    *     positioned relative to its point on the map.
    * @observable
    * @api
    */
-Overlay.prototype.setPositioning = function(positioning) {
+  setPositioning(positioning) {
     this.set(Property.POSITIONING, positioning);
-};
+  }
 
-
-/**
+  /**
    * Modify the visibility of the element.
    * @param {boolean} visible Element visibility.
    * @protected
    */
-Overlay.prototype.setVisible = function(visible) {
+  setVisible(visible) {
     if (this.rendered.visible !== visible) {
       this.element.style.display = visible ? '' : 'none';
       this.rendered.visible = visible;
     }
-};
+  }
 
-
-/**
+  /**
    * Update pixel position.
    * @protected
    */
-Overlay.prototype.updatePixelPosition = function() {
+  updatePixelPosition() {
     const map = this.getMap();
     const position = this.getPosition();
     if (!map || !map.isRendered() || !position) {
@@ -527,15 +505,14 @@ Overlay.prototype.updatePixelPosition = function() {
     const pixel = map.getPixelFromCoordinate(position);
     const mapSize = map.getSize();
     this.updateRenderedPosition(pixel, mapSize);
-};
+  }
 
-
-/**
- * @param {module:ol~Pixel} pixel The pixel location.
+  /**
+   * @param {module:ol/pixel~Pixel} pixel The pixel location.
    * @param {module:ol/size~Size|undefined} mapSize The map size.
    * @protected
    */
-Overlay.prototype.updateRenderedPosition = function(pixel, mapSize) {
+  updateRenderedPosition(pixel, mapSize) {
     const style = this.element.style;
     const offset = this.getOffset();
 
@@ -593,15 +570,16 @@ Overlay.prototype.updateRenderedPosition = function(pixel, mapSize) {
         this.rendered.top_ = style.top = top;
       }
     }
-};
+  }
 
-
-/**
+  /**
    * returns the options this Overlay has been created with
    * @return {module:ol/Overlay~Options} overlay options
    */
-Overlay.prototype.getOptions = function() {
+  getOptions() {
     return this.options;
-};
+  }
+}
+
 
 export default Overlay;

src/ol/README.md

@@ -1,50 +0,0 @@
-# ol
-
-OpenLayers as ES modules.
-
-## Usage
-
-Add the `ol` package as a dependency to your project.
-
-    npm install ol --save
-
-Import just what you need for your application:
-
-```js
-import Map from 'ol/Map';
-import View from 'ol/View';
-import TileLayer from 'ol/layer/Tile';
-import XYZ from 'ol/source/XYZ';
-
-new Map({
-  target: 'map',
-  layers: [
-    new TileLayer({
-      source: new XYZ({
-        url: 'https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png'
-      })
-    })
-  ],
-  view: new View({
-    center: [0, 0],
-    zoom: 2
-  })
-});
-```
-
-See the following examples for more detail on bundling OpenLayers with your application:
-
- * Using [Rollup](https://github.com/openlayers/ol-rollup)
- * Using [Webpack](https://github.com/openlayers/ol-webpack)
- * Using [Parcel](https://github.com/openlayers/ol-parcel)
-
-## Module Identifiers
-
-The module identifiers shown in the above snippet (e.g. `ol/Map`, note the CamelCase module name) are default exports of constructors. There are also modules like 'ol/proj' (note the lowercase module name), which provide named exports for utility functions and constants, e.g.
-
-```js
-import {fromLonLat} from 'ol/proj';
-
-map.setCenter(fromLonLat([16, 48]));
-```
-See the [API documentation](http://openlayers.org/en/latest/apidoc/) for a reference of all modules, and just keep in mind: CamelCase modules provide a default export, lowercase modules provide named exports.

src/ol/Tile.js

@@ -1,16 +1,44 @@
 /**
  * @module ol/Tile
  */
-import {inherits} from './util.js';
 import TileState from './TileState.js';
 import {easeIn} from './easing.js';
-import EventTarget from './events/EventTarget.js';
+import EventTarget from './events/Target.js';
 import EventType from './events/EventType.js';
 
 
 /**
  * A function that takes an {@link module:ol/Tile} for the tile and a
- * `{string}` for the url as arguments.
+ * `{string}` for the url as arguments. The default is
+ * ```js
+ * source.setTileLoadFunction(function(tile, src) {
+ *   tile.getImage().src = src;
+ * });
+ * ```
+ * For more fine grained control, the load function can use fetch or XMLHttpRequest and involve
+ * error handling:
+ *
+ * ```js
+ * import TileState from 'ol/TileState';
+ *
+ * source.setTileLoadFunction(function(tile, src) {
+ *   var xhr = new XMLHttpRequest();
+ *   xhr.responseType = 'blob';
+ *   xhr.addEventListener('loadend', function (evt) {
+ *     var data = this.response;
+ *     if (data !== undefined) {
+ *       tile.getImage().src = URL.createObjectURL(data);
+ *     } else {
+ *       tile.setState(TileState.ERROR);
+ *     }
+ *   });
+ *   xhr.addEventListener('error', function () {
+ *     tile.setState(TileState.ERROR);
+ *   });
+ *   xhr.open('GET', src);
+ *   xhr.send();
+ * });
+ * ```
  *
  * @typedef {function(module:ol/Tile, string)} LoadFunction
  * @api
@@ -44,15 +72,17 @@ import EventType from './events/EventType.js';
  * @classdesc
  * Base class for tiles.
  *
- * @constructor
  * @abstract
- * @extends {module:ol/events/EventTarget}
+ */
+class Tile extends EventTarget {
+
+  /**
    * @param {module:ol/tilecoord~TileCoord} tileCoord Tile coordinate.
    * @param {module:ol/TileState} state State.
    * @param {module:ol/Tile~Options=} opt_options Tile options.
    */
-const Tile = function(tileCoord, state, opt_options) {
-  EventTarget.call(this);
+  constructor(tileCoord, state, opt_options) {
+    super();
 
     const options = opt_options ? opt_options : {};
 
@@ -92,37 +122,33 @@ const Tile = function(tileCoord, state, opt_options) {
     /**
      * Lookup of start times for rendering transitions.  If the start time is
      * equal to -1, the transition is complete.
-   * @type {Object.<number, number>}
+     * @type {Object<number, number>}
      */
     this.transitionStarts_ = {};
 
-};
+  }
 
-inherits(Tile, EventTarget);
-
-
-/**
+  /**
    * @protected
    */
-Tile.prototype.changed = function() {
+  changed() {
     this.dispatchEvent(EventType.CHANGE);
-};
+  }
 
-
-/**
+  /**
    * @return {string} Key.
    */
-Tile.prototype.getKey = function() {
+  getKey() {
     return this.key + '/' + this.tileCoord;
-};
+  }
 
-/**
+  /**
    * Get the interim tile most suitable for rendering using the chain of interim
    * tiles. This corresponds to the  most recent tile that has been loaded, if no
    * such tile exists, the original tile is returned.
    * @return {!module:ol/Tile} Best tile for rendering.
    */
-Tile.prototype.getInterimTile = function() {
+  getInterimTile() {
     if (!this.interimTile) {
       //empty chain
       return this;
@@ -142,13 +168,13 @@ Tile.prototype.getInterimTile = function() {
 
     // we can not find a better tile
     return this;
-};
+  }
 
-/**
+  /**
    * Goes through the chain of interim tiles and discards sections of the chain
    * that are no longer relevant.
    */
-Tile.prototype.refreshInterimChain = function() {
+  refreshInterimChain() {
     if (!this.interimTile) {
       return;
     }
@@ -176,49 +202,53 @@ Tile.prototype.refreshInterimChain = function() {
       }
       tile = prev.interimTile;
     } while (tile);
-};
+  }
 
-/**
+  /**
    * Get the tile coordinate for this tile.
    * @return {module:ol/tilecoord~TileCoord} The tile coordinate.
    * @api
    */
-Tile.prototype.getTileCoord = function() {
+  getTileCoord() {
     return this.tileCoord;
-};
+  }
 
-
-/**
+  /**
    * @return {module:ol/TileState} State.
    */
-Tile.prototype.getState = function() {
+  getState() {
     return this.state;
-};
+  }
 
-/**
+  /**
+   * Sets the state of this tile. If you write your own {@link module:ol/Tile~LoadFunction tileLoadFunction} ,
+   * it is important to set the state correctly to {@link module:ol/TileState~ERROR}
+   * when the tile cannot be loaded. Otherwise the tile cannot be removed from
+   * the tile queue and will block other requests.
    * @param {module:ol/TileState} state State.
+   * @api
    */
-Tile.prototype.setState = function(state) {
+  setState(state) {
     this.state = state;
     this.changed();
-};
+  }
 
-/**
+  /**
    * Load the image or retry if loading previously failed.
    * Loading is taken care of by the tile queue, and calling this method is
    * only needed for preloading or for reloading in case of an error.
    * @abstract
    * @api
    */
-Tile.prototype.load = function() {};
+  load() {}
 
-/**
+  /**
    * Get the alpha value for rendering.
    * @param {number} id An id for the renderer.
    * @param {number} time The render frame time.
    * @return {number} A number between 0 and 1.
    */
-Tile.prototype.getAlpha = function(id, time) {
+  getAlpha(id, time) {
     if (!this.transition_) {
       return 1;
     }
@@ -236,29 +266,32 @@ Tile.prototype.getAlpha = function(id, time) {
       return 1;
     }
     return easeIn(delta / this.transition_);
-};
+  }
 
-/**
+  /**
    * Determine if a tile is in an alpha transition.  A tile is considered in
    * transition if tile.getAlpha() has not yet been called or has been called
    * and returned 1.
    * @param {number} id An id for the renderer.
    * @return {boolean} The tile is in transition.
    */
-Tile.prototype.inTransition = function(id) {
+  inTransition(id) {
     if (!this.transition_) {
       return false;
     }
     return this.transitionStarts_[id] !== -1;
-};
+  }
 
-/**
+  /**
    * Mark a transition as complete.
    * @param {number} id An id for the renderer.
    */
-Tile.prototype.endTransition = function(id) {
+  endTransition(id) {
     if (this.transition_) {
       this.transitionStarts_[id] = -1;
     }
-};
+  }
+}
+
+
 export default Tile;

src/ol/TileCache.js

@@ -1,29 +1,24 @@
 /**
  * @module ol/TileCache
  */
-import {inherits} from './util.js';
 import LRUCache from './structs/LRUCache.js';
 import {fromKey, getKey} from './tilecoord.js';
 
-/**
- * @constructor
- * @extends {module:ol/structs/LRUCache.<module:ol/Tile>}
+class TileCache extends LRUCache {
+
+  /**
    * @param {number=} opt_highWaterMark High water mark.
- * @struct
    */
-const TileCache = function(opt_highWaterMark) {
+  constructor(opt_highWaterMark) {
 
-  LRUCache.call(this, opt_highWaterMark);
+    super(opt_highWaterMark);
 
-};
+  }
 
-inherits(TileCache, LRUCache);
-
-
-/**
- * @param {!Object.<string, module:ol/TileRange>} usedTiles Used tiles.
+  /**
+   * @param {!Object<string, module:ol/TileRange>} usedTiles Used tiles.
    */
-TileCache.prototype.expireCache = function(usedTiles) {
+  expireCache(usedTiles) {
     while (this.canExpireCache()) {
       const tile = this.peekLast();
       const zKey = tile.tileCoord[0].toString();
@@ -33,13 +28,12 @@ TileCache.prototype.expireCache = function(usedTiles) {
         this.pop().dispose();
       }
     }
-};
+  }
 
-
-/**
+  /**
    * Prune all tiles from the cache that don't have the same z as the newest tile.
    */
-TileCache.prototype.pruneExceptNewestZ = function() {
+  pruneExceptNewestZ() {
     if (this.getCount() === 0) {
       return;
     }
@@ -52,5 +46,8 @@ TileCache.prototype.pruneExceptNewestZ = function() {
         tile.dispose();
       }
     }, this);
-};
+  }
+}
+
+
 export default TileCache;

src/ol/TileQueue.js

@@ -1,7 +1,6 @@
 /**
  * @module ol/TileQueue
  */
-import {inherits} from './util.js';
 import TileState from './TileState.js';
 import {listen, unlisten} from './events.js';
 import EventType from './events/EventType.js';
@@ -13,19 +12,15 @@ import PriorityQueue from './structs/PriorityQueue.js';
  */
 
 
-/**
- * @constructor
- * @extends {module:ol/structs/PriorityQueue.<Array>}
- * @param {module:ol/TileQueue~PriorityFunction} tilePriorityFunction
- *     Tile priority function.
- * @param {function(): ?} tileChangeCallback
- *     Function called on each tile change event.
- * @struct
- */
-const TileQueue = function(tilePriorityFunction, tileChangeCallback) {
+class TileQueue extends PriorityQueue {
 
-  PriorityQueue.call(
-    this,
+  /**
+   * @param {module:ol/TileQueue~PriorityFunction} tilePriorityFunction Tile priority function.
+   * @param {function(): ?} tileChangeCallback Function called on each tile change event.
+   */
+  constructor(tilePriorityFunction, tileChangeCallback) {
+
+    super(
       /**
        * @param {Array} element Element.
        * @return {number} Priority.
@@ -55,41 +50,36 @@ const TileQueue = function(tilePriorityFunction, tileChangeCallback) {
 
     /**
      * @private
-   * @type {!Object.<string,boolean>}
+     * @type {!Object<string,boolean>}
      */
     this.tilesLoadingKeys_ = {};
 
-};
+  }
 
-inherits(TileQueue, PriorityQueue);
-
-
-/**
+  /**
    * @inheritDoc
    */
-TileQueue.prototype.enqueue = function(element) {
-  const added = PriorityQueue.prototype.enqueue.call(this, element);
+  enqueue(element) {
+    const added = super.enqueue(element);
     if (added) {
       const tile = element[0];
       listen(tile, EventType.CHANGE, this.handleTileChange, this);
     }
     return added;
-};
+  }
 
-
-/**
+  /**
    * @return {number} Number of tiles loading.
    */
-TileQueue.prototype.getTilesLoading = function() {
+  getTilesLoading() {
     return this.tilesLoading_;
-};
+  }
 
-
-/**
+  /**
    * @param {module:ol/events/Event} event Event.
    * @protected
    */
-TileQueue.prototype.handleTileChange = function(event) {
+  handleTileChange(event) {
     const tile = /** @type {module:ol/Tile} */ (event.target);
     const state = tile.getState();
     if (state === TileState.LOADED || state === TileState.ERROR ||
@@ -102,14 +92,13 @@ TileQueue.prototype.handleTileChange = function(event) {
       }
       this.tileChangeCallback_();
     }
-};
+  }
 
-
-/**
+  /**
    * @param {number} maxTotalLoading Maximum number tiles to load simultaneously.
    * @param {number} maxNewLoads Maximum number of new tiles to load.
    */
-TileQueue.prototype.loadMoreTiles = function(maxTotalLoading, maxNewLoads) {
+  loadMoreTiles(maxTotalLoading, maxNewLoads) {
     let newLoads = 0;
     let abortedTiles = false;
     let state, tile, tileKey;
@@ -132,5 +121,8 @@ TileQueue.prototype.loadMoreTiles = function(maxTotalLoading, maxNewLoads) {
       // a small, saturated tile cache.
       this.tileChangeCallback_();
     }
-};
+  }
+}
+
+
 export default TileQueue;

src/ol/TileRange.js

@@ -1,18 +1,20 @@
 /**
  * @module ol/TileRange
  */
+
 /**
  * A representation of a contiguous block of tiles.  A tile range is specified
  * by its min/max tile coordinates and is inclusive of coordinates.
- *
- * @constructor
+ */
+class TileRange {
+
+  /**
    * @param {number} minX Minimum X.
    * @param {number} maxX Maximum X.
    * @param {number} minY Minimum Y.
    * @param {number} maxY Maximum Y.
- * @struct
    */
-const TileRange = function(minX, maxX, minY, maxY) {
+  constructor(minX, maxX, minY, maxY) {
 
     /**
      * @type {number}
@@ -34,7 +36,93 @@ const TileRange = function(minX, maxX, minY, maxY) {
      */
     this.maxY = maxY;
 
-};
+  }
+
+  /**
+   * @param {module:ol/tilecoord~TileCoord} tileCoord Tile coordinate.
+   * @return {boolean} Contains tile coordinate.
+   */
+  contains(tileCoord) {
+    return this.containsXY(tileCoord[1], tileCoord[2]);
+  }
+
+  /**
+   * @param {module:ol/TileRange} tileRange Tile range.
+   * @return {boolean} Contains.
+   */
+  containsTileRange(tileRange) {
+    return this.minX <= tileRange.minX && tileRange.maxX <= this.maxX &&
+       this.minY <= tileRange.minY && tileRange.maxY <= this.maxY;
+  }
+
+  /**
+   * @param {number} x Tile coordinate x.
+   * @param {number} y Tile coordinate y.
+   * @return {boolean} Contains coordinate.
+   */
+  containsXY(x, y) {
+    return this.minX <= x && x <= this.maxX && this.minY <= y && y <= this.maxY;
+  }
+
+  /**
+   * @param {module:ol/TileRange} tileRange Tile range.
+   * @return {boolean} Equals.
+   */
+  equals(tileRange) {
+    return this.minX == tileRange.minX && this.minY == tileRange.minY &&
+       this.maxX == tileRange.maxX && this.maxY == tileRange.maxY;
+  }
+
+  /**
+   * @param {module:ol/TileRange} tileRange Tile range.
+   */
+  extend(tileRange) {
+    if (tileRange.minX < this.minX) {
+      this.minX = tileRange.minX;
+    }
+    if (tileRange.maxX > this.maxX) {
+      this.maxX = tileRange.maxX;
+    }
+    if (tileRange.minY < this.minY) {
+      this.minY = tileRange.minY;
+    }
+    if (tileRange.maxY > this.maxY) {
+      this.maxY = tileRange.maxY;
+    }
+  }
+
+  /**
+  * @return {number} Height.
+  */
+  getHeight() {
+    return this.maxY - this.minY + 1;
+  }
+
+  /**
+  * @return {module:ol/size~Size} Size.
+  */
+  getSize() {
+    return [this.getWidth(), this.getHeight()];
+  }
+
+  /**
+  * @return {number} Width.
+  */
+  getWidth() {
+    return this.maxX - this.minX + 1;
+  }
+
+  /**
+  * @param {module:ol/TileRange} tileRange Tile range.
+  * @return {boolean} Intersects.
+  */
+  intersects(tileRange) {
+    return this.minX <= tileRange.maxX &&
+       this.maxX >= tileRange.minX &&
+       this.minY <= tileRange.maxY &&
+       this.maxY >= tileRange.minY;
+  }
+}
 
 
 /**
@@ -58,96 +146,4 @@ export function createOrUpdate(minX, maxX, minY, maxY, tileRange) {
 }
 
 
-/**
- * @param {module:ol/tilecoord~TileCoord} tileCoord Tile coordinate.
- * @return {boolean} Contains tile coordinate.
- */
-TileRange.prototype.contains = function(tileCoord) {
-  return this.containsXY(tileCoord[1], tileCoord[2]);
-};
-
-
-/**
- * @param {module:ol/TileRange} tileRange Tile range.
- * @return {boolean} Contains.
- */
-TileRange.prototype.containsTileRange = function(tileRange) {
-  return this.minX <= tileRange.minX && tileRange.maxX <= this.maxX &&
-      this.minY <= tileRange.minY && tileRange.maxY <= this.maxY;
-};
-
-
-/**
- * @param {number} x Tile coordinate x.
- * @param {number} y Tile coordinate y.
- * @return {boolean} Contains coordinate.
- */
-TileRange.prototype.containsXY = function(x, y) {
-  return this.minX <= x && x <= this.maxX && this.minY <= y && y <= this.maxY;
-};
-
-
-/**
- * @param {module:ol/TileRange} tileRange Tile range.
- * @return {boolean} Equals.
- */
-TileRange.prototype.equals = function(tileRange) {
-  return this.minX == tileRange.minX && this.minY == tileRange.minY &&
-      this.maxX == tileRange.maxX && this.maxY == tileRange.maxY;
-};
-
-
-/**
- * @param {module:ol/TileRange} tileRange Tile range.
- */
-TileRange.prototype.extend = function(tileRange) {
-  if (tileRange.minX < this.minX) {
-    this.minX = tileRange.minX;
-  }
-  if (tileRange.maxX > this.maxX) {
-    this.maxX = tileRange.maxX;
-  }
-  if (tileRange.minY < this.minY) {
-    this.minY = tileRange.minY;
-  }
-  if (tileRange.maxY > this.maxY) {
-    this.maxY = tileRange.maxY;
-  }
-};
-
-
-/**
- * @return {number} Height.
- */
-TileRange.prototype.getHeight = function() {
-  return this.maxY - this.minY + 1;
-};
-
-
-/**
- * @return {module:ol/size~Size} Size.
- */
-TileRange.prototype.getSize = function() {
-  return [this.getWidth(), this.getHeight()];
-};
-
-
-/**
- * @return {number} Width.
- */
-TileRange.prototype.getWidth = function() {
-  return this.maxX - this.minX + 1;
-};
-
-
-/**
- * @param {module:ol/TileRange} tileRange Tile range.
- * @return {boolean} Intersects.
- */
-TileRange.prototype.intersects = function(tileRange) {
-  return this.minX <= tileRange.maxX &&
-      this.maxX >= tileRange.minX &&
-      this.minY <= tileRange.maxY &&
-      this.maxY >= tileRange.minY;
-};
 export default TileRange;

src/ol/TileState.js

@@ -9,6 +9,11 @@ export default {
   IDLE: 0,
   LOADING: 1,
   LOADED: 2,
+  /**
+   * Indicates that tile loading failed
+   * @type {number}
+   * @api
+   */
   ERROR: 3,
   EMPTY: 4,
   ABORT: 5

src/ol/VectorImageTile.js

@@ -1,7 +1,7 @@
 /**
  * @module ol/VectorImageTile
  */
-import {getUid, inherits} from './util.js';
+import {getUid} from './util.js';
 import Tile from './Tile.js';
 import TileState from './TileState.js';
 import {createCanvasContext2D} from './dom.js';
@@ -9,7 +9,7 @@ import {listen, unlistenByKey} from './events.js';
 import {getHeight, getIntersection, getWidth} from './extent.js';
 import EventType from './events/EventType.js';
 import {loadFeaturesXhr} from './featureloader.js';
-import {UNDEFINED} from './functions.js';
+import {VOID} from './functions.js';
 
 
 /**
@@ -21,9 +21,9 @@ import {UNDEFINED} from './functions.js';
  */
 
 
-/**
- * @constructor
- * @extends {module:ol/Tile}
+class VectorImageTile extends Tile {
+
+  /**
    * @param {module:ol/tilecoord~TileCoord} tileCoord Tile coordinate.
    * @param {module:ol/TileState} state State.
    * @param {number} sourceRevision Source revision.
@@ -33,7 +33,7 @@ import {UNDEFINED} from './functions.js';
    * @param {module:ol/Tile~UrlFunction} tileUrlFunction Tile url function.
    * @param {module:ol/tilegrid/TileGrid} sourceTileGrid Tile grid of the source.
    * @param {module:ol/tilegrid/TileGrid} tileGrid Tile grid of the renderer.
- * @param {Object.<string, module:ol/VectorTile>} sourceTiles Source tiles.
+   * @param {Object<string, module:ol/VectorTile>} sourceTiles Source tiles.
    * @param {number} pixelRatio Pixel ratio.
    * @param {module:ol/proj/Projection} projection Projection.
    * @param {function(new: module:ol/VectorTile, module:ol/tilecoord~TileCoord, module:ol/TileState, string,
@@ -43,15 +43,15 @@ import {UNDEFINED} from './functions.js';
    *     Function to call when a source tile's state changes.
    * @param {number} zoom Integer zoom to render the tile for.
    */
-const VectorImageTile = function(tileCoord, state, sourceRevision, format,
-  tileLoadFunction, urlTileCoord, tileUrlFunction, sourceTileGrid, tileGrid,
-  sourceTiles, pixelRatio, projection, tileClass, handleTileChange, zoom) {
+  constructor(tileCoord, state, sourceRevision, format, tileLoadFunction,
+    urlTileCoord, tileUrlFunction, sourceTileGrid, tileGrid, sourceTiles,
+    pixelRatio, projection, tileClass, handleTileChange, zoom) {
 
-  Tile.call(this, tileCoord, state, {transition: 0});
+    super(tileCoord, state, {transition: 0});
 
     /**
      * @private
-   * @type {!Object.<string, CanvasRenderingContext2D>}
+     * @type {!Object<string, CanvasRenderingContext2D>}
      */
     this.context_ = {};
 
@@ -63,19 +63,19 @@ const VectorImageTile = function(tileCoord, state, sourceRevision, format,
 
     /**
      * @private
-   * @type {!Object.<string, module:ol/VectorImageTile~ReplayState>}
+     * @type {!Object<string, module:ol/VectorImageTile~ReplayState>}
      */
     this.replayState_ = {};
 
     /**
      * @private
-   * @type {Object.<string, module:ol/VectorTile>}
+     * @type {Object<string, module:ol/VectorTile>}
      */
     this.sourceTiles_ = sourceTiles;
 
     /**
      * Keys of source tiles used by this tile. Use with {@link #getTile}.
-   * @type {Array.<string>}
+     * @type {Array<string>}
      */
     this.tileKeys = [];
 
@@ -95,12 +95,12 @@ const VectorImageTile = function(tileCoord, state, sourceRevision, format,
     this.wrappedTileCoord = urlTileCoord;
 
     /**
-   * @type {Array.<module:ol/events~EventsKey>}
+     * @type {Array<module:ol/events~EventsKey>}
      */
     this.loadListenerKeys_ = [];
 
     /**
-   * @type {Array.<module:ol/events~EventsKey>}
+     * @type {Array<module:ol/events~EventsKey>}
      */
     this.sourceTileListenerKeys_ = [];
 
@@ -148,7 +148,7 @@ const VectorImageTile = function(tileCoord, state, sourceRevision, format,
           const tile = new VectorImageTile(tileCoord, state, sourceRevision,
             format, tileLoadFunction, urlTileCoord, tileUrlFunction,
             sourceTileGrid, tileGrid, sourceTiles, pixelRatio, projection,
-          tileClass, UNDEFINED, --zoom);
+            tileClass, VOID, --zoom);
           if (tile.state == TileState.LOADED) {
             this.interimTile = tile;
             break;
@@ -157,15 +157,12 @@ const VectorImageTile = function(tileCoord, state, sourceRevision, format,
       }
     }
 
-};
+  }
 
-inherits(VectorImageTile, Tile);
-
-
-/**
+  /**
    * @inheritDoc
    */
-VectorImageTile.prototype.disposeInternal = function() {
+  disposeInternal() {
     this.state = TileState.ABORT;
     this.changed();
     if (this.interimTile) {
@@ -187,39 +184,36 @@ VectorImageTile.prototype.disposeInternal = function() {
     this.loadListenerKeys_.length = 0;
     this.sourceTileListenerKeys_.forEach(unlistenByKey);
     this.sourceTileListenerKeys_.length = 0;
-  Tile.prototype.disposeInternal.call(this);
-};
+    super.disposeInternal();
+  }
 
-
-/**
+  /**
    * @param {module:ol/layer/Layer} layer Layer.
    * @return {CanvasRenderingContext2D} The rendering context.
    */
-VectorImageTile.prototype.getContext = function(layer) {
+  getContext(layer) {
     const key = getUid(layer).toString();
     if (!(key in this.context_)) {
       this.context_[key] = createCanvasContext2D();
     }
     return this.context_[key];
-};
+  }
 
-
-/**
+  /**
    * Get the Canvas for this tile.
    * @param {module:ol/layer/Layer} layer Layer.
    * @return {HTMLCanvasElement} Canvas.
    */
-VectorImageTile.prototype.getImage = function(layer) {
+  getImage(layer) {
     return this.getReplayState(layer).renderedTileRevision == -1 ?
       null : this.getContext(layer).canvas;
-};
+  }
 
-
-/**
+  /**
    * @param {module:ol/layer/Layer} layer Layer.
    * @return {module:ol/VectorImageTile~ReplayState} The replay state.
    */
-VectorImageTile.prototype.getReplayState = function(layer) {
+  getReplayState(layer) {
     const key = getUid(layer).toString();
     if (!(key in this.replayState_)) {
       this.replayState_[key] = {
@@ -230,30 +224,27 @@ VectorImageTile.prototype.getReplayState = function(layer) {
       };
     }
     return this.replayState_[key];
-};
+  }
 
-
-/**
+  /**
    * @inheritDoc
    */
-VectorImageTile.prototype.getKey = function() {
+  getKey() {
     return this.tileKeys.join('/') + '-' + this.sourceRevision_;
-};
+  }
 
-
-/**
+  /**
    * @param {string} tileKey Key (tileCoord) of the source tile.
    * @return {module:ol/VectorTile} Source tile.
    */
-VectorImageTile.prototype.getTile = function(tileKey) {
+  getTile(tileKey) {
     return this.sourceTiles_[tileKey];
-};
+  }
 
-
-/**
+  /**
    * @inheritDoc
    */
-VectorImageTile.prototype.load = function() {
+  load() {
     // Source tiles with LOADED state - we just count them because once they are
     // loaded, we're no longer listening to state changes.
     let leftToLoad = 0;
@@ -296,13 +287,12 @@ VectorImageTile.prototype.load = function() {
     if (leftToLoad - Object.keys(errorSourceTiles).length == 0) {
       setTimeout(this.finishLoading_.bind(this), 0);
     }
-};
+  }
 
-
-/**
+  /**
    * @private
    */
-VectorImageTile.prototype.finishLoading_ = function() {
+  finishLoading_() {
     let loaded = this.tileKeys.length;
     let empty = 0;
     for (let i = loaded - 1; i >= 0; --i) {
@@ -321,7 +311,9 @@ VectorImageTile.prototype.finishLoading_ = function() {
     } else {
       this.setState(empty == this.tileKeys.length ? TileState.EMPTY : TileState.ERROR);
     }
-};
+  }
+}
+
 
 export default VectorImageTile;
 

src/ol/VectorTile.js

@@ -1,19 +1,26 @@
 /**
  * @module ol/VectorTile
  */
-import {getUid, inherits} from './util.js';
+import {getUid} from './util.js';
 import Tile from './Tile.js';
 import TileState from './TileState.js';
 
+/**
+ * @const
+ * @type {module:ol/extent~Extent}
+ */
+const DEFAULT_EXTENT = [0, 0, 4096, 4096];
+
+
 /**
  * @typedef {function(new: module:ol/VectorTile, module:ol/tilecoord~TileCoord,
  * module:ol/TileState, string, ?string, module:ol/Tile~LoadFunction)} TileClass
  * @api
  */
 
-/**
- * @constructor
- * @extends {module:ol/Tile}
+class VectorTile extends Tile {
+
+  /**
    * @param {module:ol/tilecoord~TileCoord} tileCoord Tile coordinate.
    * @param {module:ol/TileState} state State.
    * @param {string} src Data source url.
@@ -21,9 +28,9 @@ import TileState from './TileState.js';
    * @param {module:ol/Tile~LoadFunction} tileLoadFunction Tile load function.
    * @param {module:ol/Tile~Options=} opt_options Tile options.
    */
-const VectorTile = function(tileCoord, state, src, format, tileLoadFunction, opt_options) {
+  constructor(tileCoord, state, src, format, tileLoadFunction, opt_options) {
 
-  Tile.call(this, tileCoord, state, opt_options);
+    super(tileCoord, state, opt_options);
 
     /**
      * @type {number}
@@ -44,7 +51,7 @@ const VectorTile = function(tileCoord, state, src, format, tileLoadFunction, opt
 
     /**
      * @private
-   * @type {Array.<module:ol/Feature>}
+     * @type {Array<module:ol/Feature>}
      */
     this.features_ = null;
 
@@ -63,7 +70,7 @@ const VectorTile = function(tileCoord, state, src, format, tileLoadFunction, opt
 
     /**
      * @private
-   * @type {Object.<string, module:ol/render/ReplayGroup>}
+     * @type {Object<string, module:ol/render/ReplayGroup>}
      */
     this.replayGroups_ = {};
 
@@ -79,123 +86,104 @@ const VectorTile = function(tileCoord, state, src, format, tileLoadFunction, opt
      */
     this.url_ = src;
 
-};
+  }
 
-inherits(VectorTile, Tile);
-
-/**
- * @const
- * @type {module:ol/extent~Extent}
- */
-const DEFAULT_EXTENT = [0, 0, 4096, 4096];
-
-
-/**
+  /**
    * @inheritDoc
    */
-VectorTile.prototype.disposeInternal = function() {
+  disposeInternal() {
     this.features_ = null;
     this.replayGroups_ = {};
     this.state = TileState.ABORT;
     this.changed();
-  Tile.prototype.disposeInternal.call(this);
-};
+    super.disposeInternal();
+  }
 
-
-/**
+  /**
    * Gets the extent of the vector tile.
    * @return {module:ol/extent~Extent} The extent.
    * @api
    */
-VectorTile.prototype.getExtent = function() {
+  getExtent() {
     return this.extent_ || DEFAULT_EXTENT;
-};
+  }
 
-
-/**
+  /**
    * Get the feature format assigned for reading this tile's features.
    * @return {module:ol/format/Feature} Feature format.
    * @api
    */
-VectorTile.prototype.getFormat = function() {
+  getFormat() {
     return this.format_;
-};
+  }
 
-
-/**
+  /**
    * Get the features for this tile. Geometries will be in the projection returned
    * by {@link module:ol/VectorTile~VectorTile#getProjection}.
- * @return {Array.<module:ol/Feature|module:ol/render/Feature>} Features.
+   * @return {Array<module:ol/Feature|module:ol/render/Feature>} Features.
    * @api
    */
-VectorTile.prototype.getFeatures = function() {
+  getFeatures() {
     return this.features_;
-};
+  }
 
-
-/**
+  /**
    * @inheritDoc
    */
-VectorTile.prototype.getKey = function() {
+  getKey() {
     return this.url_;
-};
+  }
 
-
-/**
+  /**
    * Get the feature projection of features returned by
    * {@link module:ol/VectorTile~VectorTile#getFeatures}.
    * @return {module:ol/proj/Projection} Feature projection.
    * @api
    */
-VectorTile.prototype.getProjection = function() {
+  getProjection() {
     return this.projection_;
-};
+  }
 
-
-/**
+  /**
    * @param {module:ol/layer/Layer} layer Layer.
    * @param {string} key Key.
    * @return {module:ol/render/ReplayGroup} Replay group.
    */
-VectorTile.prototype.getReplayGroup = function(layer, key) {
+  getReplayGroup(layer, key) {
     return this.replayGroups_[getUid(layer) + ',' + key];
-};
+  }
 
-
-/**
+  /**
    * @inheritDoc
    */
-VectorTile.prototype.load = function() {
+  load() {
     if (this.state == TileState.IDLE) {
       this.setState(TileState.LOADING);
       this.tileLoadFunction_(this, this.url_);
       this.loader_(null, NaN, null);
     }
-};
+  }
 
-
-/**
+  /**
    * Handler for successful tile load.
- * @param {Array.<module:ol/Feature>} features The loaded features.
+   * @param {Array<module:ol/Feature>} features The loaded features.
    * @param {module:ol/proj/Projection} dataProjection Data projection.
    * @param {module:ol/extent~Extent} extent Extent.
    */
-VectorTile.prototype.onLoad = function(features, dataProjection, extent) {
+  onLoad(features, dataProjection, extent) {
     this.setProjection(dataProjection);
     this.setFeatures(features);
     this.setExtent(extent);
-};
+  }
 
-
-/**
+  /**
    * Handler for tile load errors.
    */
-VectorTile.prototype.onError = function() {
+  onError() {
     this.setState(TileState.ERROR);
-};
+  }
 
-
-/**
+  /**
    * Function for use in an {@link module:ol/source/VectorTile~VectorTile}'s
    * `tileLoadFunction`. Sets the extent of the vector tile. This is only required
    * for tiles in projections with `tile-pixels` as units. The extent should be
@@ -207,52 +195,49 @@ VectorTile.prototype.onError = function() {
    * @param {module:ol/extent~Extent} extent The extent.
    * @api
    */
-VectorTile.prototype.setExtent = function(extent) {
+  setExtent(extent) {
     this.extent_ = extent;
-};
+  }
 
-
-/**
+  /**
    * Function for use in an {@link module:ol/source/VectorTile~VectorTile}'s `tileLoadFunction`.
    * Sets the features for the tile.
- * @param {Array.<module:ol/Feature>} features Features.
+   * @param {Array<module:ol/Feature>} features Features.
    * @api
    */
-VectorTile.prototype.setFeatures = function(features) {
+  setFeatures(features) {
     this.features_ = features;
     this.setState(TileState.LOADED);
-};
+  }
 
-
-/**
+  /**
    * Function for use in an {@link module:ol/source/VectorTile~VectorTile}'s `tileLoadFunction`.
    * Sets the projection of the features that were added with
    * {@link module:ol/VectorTile~VectorTile#setFeatures}.
    * @param {module:ol/proj/Projection} projection Feature projection.
    * @api
    */
-VectorTile.prototype.setProjection = function(projection) {
+  setProjection(projection) {
     this.projection_ = projection;
-};
+  }
 
-
-/**
+  /**
    * @param {module:ol/layer/Layer} layer Layer.
    * @param {string} key Key.
    * @param {module:ol/render/ReplayGroup} replayGroup Replay group.
    */
-VectorTile.prototype.setReplayGroup = function(layer, key, replayGroup) {
+  setReplayGroup(layer, key, replayGroup) {
     this.replayGroups_[getUid(layer) + ',' + key] = replayGroup;
-};
+  }
 
-
-/**
+  /**
    * Set the feature loader for reading this tile's features.
    * @param {module:ol/featureloader~FeatureLoader} loader Feature loader.
    * @api
    */
-VectorTile.prototype.setLoader = function(loader) {
+  setLoader(loader) {
     this.loader_ = loader;
-};
+  }
+}
 
 export default VectorTile;

src/ol/View.js

@@ -2,8 +2,8 @@
  * @module ol/View
  */
 import {DEFAULT_TILE_SIZE} from './tilegrid/common.js';
-import {getUid, inherits} from './util.js';
-import {UNDEFINED} from './functions.js';
+import {getUid} from './util.js';
+import {VOID} from './functions.js';
 import {createExtent, none as centerNone} from './centerconstraint.js';
 import BaseObject from './Object.js';
 import {createSnapToResolutions, createSnapToPower} from './resolutionconstraint.js';
@@ -33,7 +33,7 @@ import Units from './proj/Units.js';
  * @property {number} [sourceResolution]
  * @property {number} [targetResolution]
  * @property {number} [sourceRotation]
- * @property {number} [sourceRotation]
+ * @property {number} [targetRotation]
  * @property {module:ol/coordinate~Coordinate} [anchor]
  * @property {number} start
  * @property {number} duration
@@ -56,7 +56,7 @@ import Units from './proj/Units.js';
  * @property {module:ol/size~Size} [size] The size in pixels of the box to fit
  * the extent into. Default is the current size of the first map in the DOM that
  * uses this view, or `[100, 100]` if no such map is found.
- * @property {!Array.<number>} [padding=[0, 0, 0, 0]] Padding (in pixels) to be
+ * @property {!Array<number>} [padding=[0, 0, 0, 0]] Padding (in pixels) to be
  * cleared inside the view. Values in the array are top, right, bottom and left
  * padding.
  * @property {boolean} [constrainResolution=true] Constrain the resolution.
@@ -121,7 +121,7 @@ import Units from './proj/Units.js';
  * alternative to setting this is to set `zoom`. Layer sources will not be
  * fetched if neither this nor `zoom` are defined, but they can be set later
  * with {@link #setZoom} or {@link #setResolution}.
- * @property {Array.<number>} [resolutions] Resolutions to determine the
+ * @property {Array<number>} [resolutions] Resolutions to determine the
  * resolution constraint. If set the `maxResolution`, `minResolution`,
  * `minZoom`, `maxZoom`, and `zoomFactor` options are ignored.
  * @property {number} [rotation=0] The initial rotation for the view in radians
@@ -224,25 +224,27 @@ const DEFAULT_MIN_ZOOM = 0;
  * The *center constraint* is determined by the `extent` option. By
  * default the center is not constrained at all.
  *
- * @constructor
- * @extends {module:ol/Object}
- * @param {module:ol/View~ViewOptions=} opt_options View options.
   * @api
  */
-const View = function(opt_options) {
-  BaseObject.call(this);
+class View extends BaseObject {
+
+  /**
+   * @param {module:ol/View~ViewOptions=} opt_options View options.
+   */
+  constructor(opt_options) {
+    super();
 
     const options = assign({}, opt_options);
 
     /**
      * @private
-   * @type {Array.<number>}
+     * @type {Array<number>}
      */
     this.hints_ = [0, 0];
 
     /**
      * @private
-   * @type {Array.<Array.<module:ol/View~Animation>>}
+     * @type {Array<Array<module:ol/View~Animation>>}
      */
     this.animations_ = [];
 
@@ -262,19 +264,16 @@ const View = function(opt_options) {
     this.projection_ = createProjection(options.projection, 'EPSG:3857');
 
     this.applyOptions_(options);
-};
+  }
 
-inherits(View, BaseObject);
-
-
-/**
+  /**
    * Set up the view with the given options.
    * @param {module:ol/View~ViewOptions} options View options.
    */
-View.prototype.applyOptions_ = function(options) {
+  applyOptions_(options) {
 
     /**
-   * @type {Object.<string, *>}
+     * @type {Object<string, *>}
      */
     const properties = {};
     properties[ViewProperty.CENTER] = options.center !== undefined ?
@@ -302,7 +301,7 @@ View.prototype.applyOptions_ = function(options) {
 
     /**
      * @private
-   * @type {Array.<number>|undefined}
+     * @type {Array<number>|undefined}
      */
     this.resolutions_ = options.resolutions;
 
@@ -347,9 +346,9 @@ View.prototype.applyOptions_ = function(options) {
      */
     this.options_ = options;
 
-};
+  }
 
-/**
+  /**
    * Get an updated version of the view options used to construct the view.  The
    * current resolution (or zoom), center, and rotation are applied to any stored
    * options.  The provided options can be used to apply new min/max zoom or
@@ -357,7 +356,7 @@ View.prototype.applyOptions_ = function(options) {
    * @param {module:ol/View~ViewOptions} newOptions New options to be applied.
    * @return {module:ol/View~ViewOptions} New options updated with the current view state.
    */
-View.prototype.getUpdatedOptions_ = function(newOptions) {
+  getUpdatedOptions_(newOptions) {
     const options = assign({}, this.options_);
 
     // preserve resolution (or zoom)
@@ -374,10 +373,9 @@ View.prototype.getUpdatedOptions_ = function(newOptions) {
     options.rotation = this.getRotation();
 
     return assign({}, options, newOptions);
-};
+  }
 
-
-/**
+  /**
    * Animate the view.  The view's center, zoom (or resolution), and rotation
    * can be animated for smooth transitions between view states.  For example,
    * to animate the view to a new zoom level:
@@ -410,7 +408,7 @@ View.prototype.getUpdatedOptions_ = function(newOptions) {
    *     the animation completed without being cancelled.
    * @api
    */
-View.prototype.animate = function(var_args) {
+  animate(var_args) {
     let animationCount = arguments.length;
     let callback;
     if (animationCount > 1 && typeof arguments[animationCount - 1] === 'function') {
@@ -430,9 +428,7 @@ View.prototype.animate = function(var_args) {
         this.setRotation(state.rotation);
       }
       if (callback) {
-      setTimeout(function() {
-        callback(true);
-      }, 0);
+        animationCallback(callback, true);
       }
       return;
     }
@@ -490,48 +486,45 @@ View.prototype.animate = function(var_args) {
     this.animations_.push(series);
     this.setHint(ViewHint.ANIMATING, 1);
     this.updateAnimations_();
-};
+  }
 
-
-/**
+  /**
    * Determine if the view is being animated.
    * @return {boolean} The view is being animated.
    * @api
    */
-View.prototype.getAnimating = function() {
+  getAnimating() {
     return this.hints_[ViewHint.ANIMATING] > 0;
-};
+  }
 
-
-/**
+  /**
    * Determine if the user is interacting with the view, such as panning or zooming.
    * @return {boolean} The view is being interacted with.
    * @api
    */
-View.prototype.getInteracting = function() {
+  getInteracting() {
     return this.hints_[ViewHint.INTERACTING] > 0;
-};
+  }
 
-
-/**
+  /**
    * Cancel any ongoing animations.
    * @api
    */
-View.prototype.cancelAnimations = function() {
+  cancelAnimations() {
     this.setHint(ViewHint.ANIMATING, -this.hints_[ViewHint.ANIMATING]);
     for (let i = 0, ii = this.animations_.length; i < ii; ++i) {
       const series = this.animations_[i];
       if (series[0].callback) {
-      series[0].callback(false);
+        animationCallback(series[0].callback, false);
       }
     }
     this.animations_.length = 0;
-};
+  }
 
-/**
+  /**
    * Update all animations.
    */
-View.prototype.updateAnimations_ = function() {
+  updateAnimations_() {
     if (this.updateAnimationKey_ !== undefined) {
       cancelAnimationFrame(this.updateAnimationKey_);
       this.updateAnimationKey_ = undefined;
@@ -597,9 +590,7 @@ View.prototype.updateAnimations_ = function() {
         this.setHint(ViewHint.ANIMATING, -1);
         const callback = series[0].callback;
         if (callback) {
-        setTimeout(function() {
-          callback(true);
-        }, 0);
+          animationCallback(callback, true);
         }
       }
     }
@@ -608,14 +599,14 @@ View.prototype.updateAnimations_ = function() {
     if (more && this.updateAnimationKey_ === undefined) {
       this.updateAnimationKey_ = requestAnimationFrame(this.updateAnimations_);
     }
-};
+  }
 
-/**
+  /**
    * @param {number} rotation Target rotation.
    * @param {module:ol/coordinate~Coordinate} anchor Rotation anchor.
    * @return {module:ol/coordinate~Coordinate|undefined} Center for rotation and anchor.
    */
-View.prototype.calculateCenterRotate = function(rotation, anchor) {
+  calculateCenterRotate(rotation, anchor) {
     let center;
     const currentCenter = this.getCenter();
     if (currentCenter !== undefined) {
@@ -624,15 +615,14 @@ View.prototype.calculateCenterRotate = function(rotation, anchor) {
       addCoordinate(center, anchor);
     }
     return center;
-};
+  }
 
-
-/**
+  /**
    * @param {number} resolution Target resolution.
    * @param {module:ol/coordinate~Coordinate} anchor Zoom anchor.
    * @return {module:ol/coordinate~Coordinate|undefined} Center for resolution and anchor.
    */
-View.prototype.calculateCenterZoom = function(resolution, anchor) {
+  calculateCenterZoom(resolution, anchor) {
     let center;
     const currentCenter = this.getCenter();
     const currentResolution = this.getResolution();
@@ -642,14 +632,13 @@ View.prototype.calculateCenterZoom = function(resolution, anchor) {
       center = [x, y];
     }
     return center;
-};
+  }
 
-
-/**
+  /**
    * @private
    * @return {module:ol/size~Size} Viewport size or `[100, 100]` when no viewport is found.
    */
-View.prototype.getSizeFromViewport_ = function() {
+  getSizeFromViewport_() {
     const size = [100, 100];
     const selector = '.ol-viewport[data-view="' + getUid(this) + '"]';
     const element = document.querySelector(selector);
@@ -659,21 +648,19 @@ View.prototype.getSizeFromViewport_ = function() {
       size[1] = parseInt(metrics.height, 10);
     }
     return size;
-};
+  }
 
-
-/**
+  /**
    * Get the constrained center of this view.
    * @param {module:ol/coordinate~Coordinate|undefined} center Center.
    * @return {module:ol/coordinate~Coordinate|undefined} Constrained center.
    * @api
    */
-View.prototype.constrainCenter = function(center) {
+  constrainCenter(center) {
     return this.constraints_.center(center);
-};
+  }
 
-
-/**
+  /**
    * Get the constrained resolution of this view.
    * @param {number|undefined} resolution Resolution.
    * @param {number=} opt_delta Delta. Default is `0`.
@@ -681,52 +668,48 @@ View.prototype.constrainCenter = function(center) {
    * @return {number|undefined} Constrained resolution.
    * @api
    */
-View.prototype.constrainResolution = function(resolution, opt_delta, opt_direction) {
+  constrainResolution(resolution, opt_delta, opt_direction) {
     const delta = opt_delta || 0;
     const direction = opt_direction || 0;
     return this.constraints_.resolution(resolution, delta, direction);
-};
+  }
 
-
-/**
+  /**
    * Get the constrained rotation of this view.
    * @param {number|undefined} rotation Rotation.
    * @param {number=} opt_delta Delta. Default is `0`.
    * @return {number|undefined} Constrained rotation.
    * @api
    */
-View.prototype.constrainRotation = function(rotation, opt_delta) {
+  constrainRotation(rotation, opt_delta) {
     const delta = opt_delta || 0;
     return this.constraints_.rotation(rotation, delta);
-};
+  }
 
-
-/**
+  /**
    * Get the view center.
    * @return {module:ol/coordinate~Coordinate|undefined} The center of the view.
    * @observable
    * @api
    */
-View.prototype.getCenter = function() {
+  getCenter() {
     return (
       /** @type {module:ol/coordinate~Coordinate|undefined} */ (this.get(ViewProperty.CENTER))
     );
-};
+  }
 
-
-/**
+  /**
    * @return {module:ol/View~Constraints} Constraints.
    */
-View.prototype.getConstraints = function() {
+  getConstraints() {
     return this.constraints_;
-};
+  }
 
-
-/**
- * @param {Array.<number>=} opt_hints Destination array.
- * @return {Array.<number>} Hint.
+  /**
+   * @param {Array<number>=} opt_hints Destination array.
+   * @return {Array<number>} Hint.
    */
-View.prototype.getHints = function(opt_hints) {
+  getHints(opt_hints) {
     if (opt_hints !== undefined) {
       opt_hints[0] = this.hints_[0];
       opt_hints[1] = this.hints_[1];
@@ -734,10 +717,9 @@ View.prototype.getHints = function(opt_hints) {
     } else {
       return this.hints_.slice();
     }
-};
+  }
 
-
-/**
+  /**
    * Calculate the extent for the current view state and the passed size.
    * The size is the pixel dimensions of the box into which the calculated extent
    * should fit. In most cases you want to get the extent of the entire map,
@@ -747,7 +729,7 @@ View.prototype.getHints = function(opt_hints) {
    * @return {module:ol/extent~Extent} Extent.
    * @api
    */
-View.prototype.calculateExtent = function(opt_size) {
+  calculateExtent(opt_size) {
     const size = opt_size || this.getSizeFromViewport_();
     const center = /** @type {!module:ol/coordinate~Coordinate} */ (this.getCenter());
     assert(center, 1); // The view center is not defined
@@ -757,102 +739,92 @@ View.prototype.calculateExtent = function(opt_size) {
     assert(rotation !== undefined, 3); // The view rotation is not defined
 
     return getForViewAndSize(center, resolution, rotation, size);
-};
+  }
 
-
-/**
+  /**
    * Get the maximum resolution of the view.
    * @return {number} The maximum resolution of the view.
    * @api
    */
-View.prototype.getMaxResolution = function() {
+  getMaxResolution() {
     return this.maxResolution_;
-};
+  }
 
-
-/**
+  /**
    * Get the minimum resolution of the view.
    * @return {number} The minimum resolution of the view.
    * @api
    */
-View.prototype.getMinResolution = function() {
+  getMinResolution() {
     return this.minResolution_;
-};
+  }
 
-
-/**
+  /**
    * Get the maximum zoom level for the view.
    * @return {number} The maximum zoom level.
    * @api
    */
-View.prototype.getMaxZoom = function() {
+  getMaxZoom() {
     return /** @type {number} */ (this.getZoomForResolution(this.minResolution_));
-};
+  }
 
-
-/**
+  /**
    * Set a new maximum zoom level for the view.
    * @param {number} zoom The maximum zoom level.
    * @api
    */
-View.prototype.setMaxZoom = function(zoom) {
+  setMaxZoom(zoom) {
     this.applyOptions_(this.getUpdatedOptions_({maxZoom: zoom}));
-};
+  }
 
-
-/**
+  /**
    * Get the minimum zoom level for the view.
    * @return {number} The minimum zoom level.
    * @api
    */
-View.prototype.getMinZoom = function() {
+  getMinZoom() {
     return /** @type {number} */ (this.getZoomForResolution(this.maxResolution_));
-};
+  }
 
-
-/**
+  /**
    * Set a new minimum zoom level for the view.
    * @param {number} zoom The minimum zoom level.
    * @api
    */
-View.prototype.setMinZoom = function(zoom) {
+  setMinZoom(zoom) {
     this.applyOptions_(this.getUpdatedOptions_({minZoom: zoom}));
-};
+  }
 
-
-/**
+  /**
    * Get the view projection.
    * @return {module:ol/proj/Projection} The projection of the view.
    * @api
    */
-View.prototype.getProjection = function() {
+  getProjection() {
     return this.projection_;
-};
+  }
 
-
-/**
+  /**
    * Get the view resolution.
    * @return {number|undefined} The resolution of the view.
    * @observable
    * @api
    */
-View.prototype.getResolution = function() {
+  getResolution() {
     return /** @type {number|undefined} */ (this.get(ViewProperty.RESOLUTION));
-};
+  }
 
-
-/**
+  /**
    * Get the resolutions for the view. This returns the array of resolutions
    * passed to the constructor of the View, or undefined if none were given.
- * @return {Array.<number>|undefined} The resolutions of the view.
+   * @return {Array<number>|undefined} The resolutions of the view.
    * @api
    */
-View.prototype.getResolutions = function() {
+  getResolutions() {
     return this.resolutions_;
-};
+  }
 
-
-/**
+  /**
    * Get the resolution for a provided extent (in map units) and size (in pixels).
    * @param {module:ol/extent~Extent} extent Extent.
    * @param {module:ol/size~Size=} opt_size Box pixel size.
@@ -860,21 +832,20 @@ View.prototype.getResolutions = function() {
    *     the given size.
    * @api
    */
-View.prototype.getResolutionForExtent = function(extent, opt_size) {
+  getResolutionForExtent(extent, opt_size) {
     const size = opt_size || this.getSizeFromViewport_();
     const xResolution = getWidth(extent) / size[0];
     const yResolution = getHeight(extent) / size[1];
     return Math.max(xResolution, yResolution);
-};
+  }
 
-
-/**
+  /**
    * Return a function that returns a value between 0 and 1 for a
    * resolution. Exponential scaling is assumed.
    * @param {number=} opt_power Power.
    * @return {function(number): number} Resolution for value function.
    */
-View.prototype.getResolutionForValueFunction = function(opt_power) {
+  getResolutionForValueFunction(opt_power) {
     const power = opt_power || 2;
     const maxResolution = this.maxResolution_;
     const minResolution = this.minResolution_;
@@ -888,27 +859,25 @@ View.prototype.getResolutionForValueFunction = function(opt_power) {
         const resolution = maxResolution / Math.pow(power, value * max);
         return resolution;
       });
-};
+  }
 
-
-/**
+  /**
    * Get the view rotation.
    * @return {number} The rotation of the view in radians.
    * @observable
    * @api
    */
-View.prototype.getRotation = function() {
+  getRotation() {
     return /** @type {number} */ (this.get(ViewProperty.ROTATION));
-};
+  }
 
-
-/**
+  /**
    * Return a function that returns a resolution for a value between
    * 0 and 1. Exponential scaling is assumed.
    * @param {number=} opt_power Power.
    * @return {function(number): number} Value for resolution function.
    */
-View.prototype.getValueForResolutionFunction = function(opt_power) {
+  getValueForResolutionFunction(opt_power) {
     const power = opt_power || 2;
     const maxResolution = this.maxResolution_;
     const minResolution = this.minResolution_;
@@ -922,53 +891,55 @@ View.prototype.getValueForResolutionFunction = function(opt_power) {
         const value = (Math.log(maxResolution / resolution) / Math.log(power)) / max;
         return value;
       });
-};
+  }
 
-
-/**
+  /**
+   * @param {number} pixelRatio Pixel ratio for center rounding.
    * @return {module:ol/View~State} View state.
    */
-View.prototype.getState = function() {
+  getState(pixelRatio) {
     const center = /** @type {module:ol/coordinate~Coordinate} */ (this.getCenter());
     const projection = this.getProjection();
     const resolution = /** @type {number} */ (this.getResolution());
+    const pixelResolution = resolution / pixelRatio;
     const rotation = this.getRotation();
     return (
       /** @type {module:ol/View~State} */ ({
-      center: center.slice(),
+        center: [
+          Math.round(center[0] / pixelResolution) * pixelResolution,
+          Math.round(center[1] / pixelResolution) * pixelResolution
+        ],
         projection: projection !== undefined ? projection : null,
         resolution: resolution,
         rotation: rotation,
         zoom: this.getZoom()
       })
     );
-};
+  }
 
-
-/**
+  /**
    * Get the current zoom level.  If you configured your view with a resolutions
    * array (this is rare), this method may return non-integer zoom levels (so
    * the zoom level is not safe to use as an index into a resolutions array).
    * @return {number|undefined} Zoom.
    * @api
    */
-View.prototype.getZoom = function() {
+  getZoom() {
     let zoom;
     const resolution = this.getResolution();
     if (resolution !== undefined) {
       zoom = this.getZoomForResolution(resolution);
     }
     return zoom;
-};
+  }
 
-
-/**
+  /**
    * Get the zoom level for a resolution.
    * @param {number} resolution The resolution.
    * @return {number|undefined} The zoom level for the provided resolution.
    * @api
    */
-View.prototype.getZoomForResolution = function(resolution) {
+  getZoomForResolution(resolution) {
     let offset = this.minZoom_ || 0;
     let max, zoomFactor;
     if (this.resolutions_) {
@@ -985,22 +956,20 @@ View.prototype.getZoomForResolution = function(resolution) {
       zoomFactor = this.zoomFactor_;
     }
     return offset + Math.log(max / resolution) / Math.log(zoomFactor);
-};
+  }
 
-
-/**
+  /**
    * Get the resolution for a zoom level.
    * @param {number} zoom Zoom level.
    * @return {number} The view resolution for the provided zoom level.
    * @api
    */
-View.prototype.getResolutionForZoom = function(zoom) {
+  getResolutionForZoom(zoom) {
     return /** @type {number} */ (this.constrainResolution(
       this.maxResolution_, zoom - this.minZoom_, 0));
-};
+  }
 
-
-/**
+  /**
    * Fit the given geometry or extent based on the given map size and border.
    * The size is pixel dimensions of the box to fit the extent into.
    * In most cases you will want to use the map size, that is `map.getSize()`.
@@ -1010,7 +979,7 @@ View.prototype.getResolutionForZoom = function(zoom) {
    * @param {module:ol/View~FitOptions=} opt_options Options.
    * @api
    */
-View.prototype.fit = function(geometryOrExtent, opt_options) {
+  fit(geometryOrExtent, opt_options) {
     const options = opt_options || {};
     let size = options.size;
     if (!size) {
@@ -1089,7 +1058,7 @@ View.prototype.fit = function(geometryOrExtent, opt_options) {
     const centerX = centerRotX * cosAngle - centerRotY * sinAngle;
     const centerY = centerRotY * cosAngle + centerRotX * sinAngle;
     const center = [centerX, centerY];
-  const callback = options.callback ? options.callback : UNDEFINED;
+    const callback = options.callback ? options.callback : VOID;
 
     if (options.duration !== undefined) {
       this.animate({
@@ -1101,19 +1070,18 @@ View.prototype.fit = function(geometryOrExtent, opt_options) {
     } else {
       this.setResolution(resolution);
       this.setCenter(center);
-    setTimeout(callback.bind(undefined, true), 0);
+      animationCallback(callback, true);
+    }
   }
-};
 
-
-/**
+  /**
    * Center on coordinate and view position.
    * @param {module:ol/coordinate~Coordinate} coordinate Coordinate.
    * @param {module:ol/size~Size} size Box pixel size.
- * @param {module:ol~Pixel} position Position on the view to center on.
+   * @param {module:ol/pixel~Pixel} position Position on the view to center on.
    * @api
    */
-View.prototype.centerOn = function(coordinate, size, position) {
+  centerOn(coordinate, size, position) {
     // calculate rotated position
     const rotation = this.getRotation();
     const cosAngle = Math.cos(-rotation);
@@ -1130,94 +1098,99 @@ View.prototype.centerOn = function(coordinate, size, position) {
     const centerY = rotY * cosAngle + rotX * sinAngle;
 
     this.setCenter([centerX, centerY]);
-};
+  }
 
-
-/**
+  /**
    * @return {boolean} Is defined.
    */
-View.prototype.isDef = function() {
+  isDef() {
     return !!this.getCenter() && this.getResolution() !== undefined;
-};
+  }
 
-
-/**
+  /**
    * Rotate the view around a given coordinate.
    * @param {number} rotation New rotation value for the view.
    * @param {module:ol/coordinate~Coordinate=} opt_anchor The rotation center.
    * @api
    */
-View.prototype.rotate = function(rotation, opt_anchor) {
+  rotate(rotation, opt_anchor) {
     if (opt_anchor !== undefined) {
       const center = this.calculateCenterRotate(rotation, opt_anchor);
       this.setCenter(center);
     }
     this.setRotation(rotation);
-};
+  }
 
-
-/**
+  /**
    * Set the center of the current view.
    * @param {module:ol/coordinate~Coordinate|undefined} center The center of the view.
    * @observable
    * @api
    */
-View.prototype.setCenter = function(center) {
+  setCenter(center) {
     this.set(ViewProperty.CENTER, center);
     if (this.getAnimating()) {
       this.cancelAnimations();
     }
-};
+  }
 
-
-/**
+  /**
    * @param {module:ol/ViewHint} hint Hint.
    * @param {number} delta Delta.
    * @return {number} New value.
    */
-View.prototype.setHint = function(hint, delta) {
+  setHint(hint, delta) {
     this.hints_[hint] += delta;
     this.changed();
     return this.hints_[hint];
-};
+  }
 
-
-/**
+  /**
    * Set the resolution for this view.
    * @param {number|undefined} resolution The resolution of the view.
    * @observable
    * @api
    */
-View.prototype.setResolution = function(resolution) {
+  setResolution(resolution) {
     this.set(ViewProperty.RESOLUTION, resolution);
     if (this.getAnimating()) {
       this.cancelAnimations();
     }
-};
+  }
 
-
-/**
+  /**
    * Set the rotation for this view.
    * @param {number} rotation The rotation of the view in radians.
    * @observable
    * @api
    */
-View.prototype.setRotation = function(rotation) {
+  setRotation(rotation) {
     this.set(ViewProperty.ROTATION, rotation);
     if (this.getAnimating()) {
       this.cancelAnimations();
     }
-};
+  }
 
-
-/**
+  /**
    * Zoom to a specific zoom level.
    * @param {number} zoom Zoom level.
    * @api
    */
-View.prototype.setZoom = function(zoom) {
+  setZoom(zoom) {
     this.setResolution(this.getResolutionForZoom(zoom));
-};
+  }
+}
+
+
+/**
+ * @param {Function} callback Callback.
+ * @param {*} returnValue Return value.
+ */
+function animationCallback(callback, returnValue) {
+  setTimeout(function() {
+    callback(returnValue);
+  }, 0);
+}
 
 
 /**

src/ol/WebGLMap.js

@@ -1,7 +1,6 @@
 /**
  * @module ol/WebGLMap
  */
-import {inherits} from './util.js';
 import PluggableMap from './PluggableMap.js';
 import {defaults as defaultControls} from './control.js';
 import {defaults as defaultInteractions} from './interaction.js';
@@ -57,16 +56,18 @@ import WebGLVectorLayerRenderer from './renderer/webgl/VectorLayer.js';
  * {@link module:ol/layer/Base}, so layers entered in the options or added
  * with `addLayer` can be groups, which can contain further groups, and so on.
  *
- * @constructor
- * @extends {module:ol/PluggableMap}
- * @param {module:ol/PluggableMap~MapOptions} options Map options.
  * @fires module:ol/MapBrowserEvent~MapBrowserEvent
  * @fires module:ol/MapEvent~MapEvent
  * @fires module:ol/render/Event~RenderEvent#postcompose
  * @fires module:ol/render/Event~RenderEvent#precompose
  * @api
  */
-const WebGLMap = function(options) {
+class WebGLMap extends PluggableMap {
+
+  /**
+   * @param {module:ol/PluggableMap~MapOptions} options Map options.
+   */
+  constructor(options) {
     options = assign({}, options);
     if (!options.controls) {
       options.controls = defaultControls();
@@ -75,13 +76,10 @@ const WebGLMap = function(options) {
       options.interactions = defaultInteractions();
     }
 
-  PluggableMap.call(this, options);
-};
+    super(options);
+  }
 
-inherits(WebGLMap, PluggableMap);
-
-
-WebGLMap.prototype.createRenderer = function() {
+  createRenderer() {
     const renderer = new WebGLMapRenderer(this);
     renderer.registerLayerRenderers([
       WebGLImageLayerRenderer,
@@ -89,6 +87,8 @@ WebGLMap.prototype.createRenderer = function() {
       WebGLVectorLayerRenderer
     ]);
     return renderer;
-};
+  }
+}
+
 
 export default WebGLMap;

src/ol/array.js

@@ -7,7 +7,7 @@
  * Performs a binary search on the provided sorted list and returns the index of the item if found. If it can't be found it'll return -1.
  * https://github.com/darkskyapp/binary-search
  *
- * @param {Array.<*>} haystack Items to search through.
+ * @param {Array<*>} haystack Items to search through.
  * @param {*} needle The item to look for.
  * @param {Function=} opt_comparator Comparator function.
  * @return {number} The index of the item if found, -1 if not.
@@ -53,7 +53,7 @@ export function numberSafeCompareFunction(a, b) {
 
 /**
  * Whether the array contains the given object.
- * @param {Array.<*>} arr The array to test for the presence of the element.
+ * @param {Array<*>} arr The array to test for the presence of the element.
  * @param {*} obj The object for which to test.
  * @return {boolean} The object is in the array.
  */
@@ -63,7 +63,7 @@ export function includes(arr, obj) {
 
 
 /**
- * @param {Array.<number>} arr Array.
+ * @param {Array<number>} arr Array.
  * @param {number} target Target.
  * @param {number} direction 0 means return the nearest, > 0
  *    means return the largest nearest, < 0 means return the
@@ -109,7 +109,7 @@ export function linearFindNearest(arr, target, direction) {
 
 
 /**
- * @param {Array.<*>} arr Array.
+ * @param {Array<*>} arr Array.
  * @param {number} begin Begin index.
  * @param {number} end End index.
  */
@@ -125,8 +125,8 @@ export function reverseSubArray(arr, begin, end) {
 
 
 /**
- * @param {Array.<VALUE>} arr The array to modify.
- * @param {!Array.<VALUE>|VALUE} data The elements or arrays of elements to add to arr.
+ * @param {Array<VALUE>} arr The array to modify.
+ * @param {!Array<VALUE>|VALUE} data The elements or arrays of elements to add to arr.
  * @template VALUE
  */
 export function extend(arr, data) {
@@ -139,7 +139,7 @@ export function extend(arr, data) {
 
 
 /**
- * @param {Array.<VALUE>} arr The array to modify.
+ * @param {Array<VALUE>} arr The array to modify.
  * @param {VALUE} obj The element to remove.
  * @template VALUE
  * @return {boolean} If the element was removed.
@@ -155,7 +155,7 @@ export function remove(arr, obj) {
 
 
 /**
- * @param {Array.<VALUE>} arr The array to search in.
+ * @param {Array<VALUE>} arr The array to search in.
  * @param {function(VALUE, number, ?) : boolean} func The function to compare.
  * @template VALUE
  * @return {VALUE|null} The element found or null.
@@ -194,8 +194,11 @@ export function equals(arr1, arr2) {
 
 
 /**
- * @param {Array.<*>} arr The array to sort (modifies original).
- * @param {Function} compareFnc Comparison function.
+ * Sort the passed array such that the relative order of equal elements is preverved.
+ * See https://en.wikipedia.org/wiki/Sorting_algorithm#Stability for details.
+ * @param {Array<*>} arr The array to sort (modifies original).
+ * @param {!function(*, *): number} compareFnc Comparison function.
+ * @api
  */
 export function stableSort(arr, compareFnc) {
   const length = arr.length;
@@ -214,7 +217,7 @@ export function stableSort(arr, compareFnc) {
 
 
 /**
- * @param {Array.<*>} arr The array to search in.
+ * @param {Array<*>} arr The array to search in.
  * @param {Function} func Comparison function.
  * @return {number} Return index.
  */
@@ -229,7 +232,7 @@ export function findIndex(arr, func) {
 
 
 /**
- * @param {Array.<*>} arr The array to test.
+ * @param {Array<*>} arr The array to test.
  * @param {Function=} opt_func Comparison function.
  * @param {boolean=} opt_strict Strictly sorted (default false).
  * @return {boolean} Return index.

src/ol/color.js

@@ -10,7 +10,7 @@ import {clamp} from './math.js';
  * red, green, and blue should be integers in the range 0..255 inclusive.
  * alpha should be a float in the range 0..1 inclusive. If no alpha value is
  * given then `1` will be used.
- * @typedef {Array.<number>} Color
+ * @typedef {Array<number>} Color
  * @api
  */
 
@@ -84,7 +84,7 @@ export const fromString = (
     const MAX_CACHE_SIZE = 1024;
 
     /**
-     * @type {Object.<string, module:ol/color~Color>}
+     * @type {Object<string, module:ol/color~Color>}
      */
     const cache = {};
 

src/ol/control/Attribution.js

@@ -1,7 +1,6 @@
 /**
  * @module ol/control/Attribution
  */
-import {inherits} from '../util.js';
 import {equals} from '../array.js';
 import Control from '../control/Control.js';
 import {CLASS_CONTROL, CLASS_UNSELECTABLE, CLASS_COLLAPSED} from '../css.js';
@@ -14,7 +13,7 @@ import {visibleAtResolution} from '../layer/Layer.js';
 /**
  * @typedef {Object} Options
  * @property {string} [className='ol-attribution'] CSS class name.
- * @property {Element|string} [target] Specify a target if you
+ * @property {HTMLElement|string} [target] Specify a target if you
  * want the control to be rendered outside of the map's
  * viewport.
  * @property {boolean} [collapsible=true] Specify if attributions can
@@ -26,7 +25,7 @@ import {visibleAtResolution} from '../layer/Layer.js';
  * @property {string} [label='i'] Text label to use for the
  * collapsed attributions button.
  * Instead of text, also an element (e.g. a `span` element) can be used.
- * @property {string|Element} [collapseLabel='»'] Text label to use
+ * @property {string|HTMLElement} [collapseLabel='»'] Text label to use
  * for the expanded attributions button.
  * Instead of text, also an element (e.g. a `span` element) can be used.
  * @property {function(module:ol/MapEvent)} [render] Function called when
@@ -42,20 +41,28 @@ import {visibleAtResolution} from '../layer/Layer.js';
  * By default it will show in the bottom right portion of the map, but this can
  * be changed by using a css selector for `.ol-attribution`.
  *
- * @constructor
- * @extends {module:ol/control/Control}
- * @param {module:ol/control/Attribution~Options=} opt_options Attribution options.
  * @api
  */
-const Attribution = function(opt_options) {
+class Attribution extends Control {
+
+  /**
+   * @param {module:ol/control/Attribution~Options=} opt_options Attribution options.
+   */
+  constructor(opt_options) {
 
     const options = opt_options ? opt_options : {};
 
+    super({
+      element: document.createElement('div'),
+      render: options.render || render,
+      target: options.target
+    });
+
     /**
      * @private
-   * @type {Element}
+     * @type {HTMLElement}
      */
-  this.ulElement_ = document.createElement('UL');
+    this.ulElement_ = document.createElement('ul');
 
     /**
      * @private
@@ -83,7 +90,7 @@ const Attribution = function(opt_options) {
     if (typeof collapseLabel === 'string') {
       /**
        * @private
-     * @type {Element}
+       * @type {HTMLElement}
        */
       this.collapseLabel_ = document.createElement('span');
       this.collapseLabel_.textContent = collapseLabel;
@@ -96,7 +103,7 @@ const Attribution = function(opt_options) {
     if (typeof label === 'string') {
       /**
        * @private
-     * @type {Element}
+       * @type {HTMLElement}
        */
       this.label_ = document.createElement('span');
       this.label_.textContent = label;
@@ -117,20 +124,14 @@ const Attribution = function(opt_options) {
     const cssClasses = className + ' ' + CLASS_UNSELECTABLE + ' ' + CLASS_CONTROL +
         (this.collapsed_ && this.collapsible_ ? ' ' + CLASS_COLLAPSED : '') +
         (this.collapsible_ ? '' : ' ol-uncollapsible');
-  const element = document.createElement('div');
+    const element = this.element;
     element.className = cssClasses;
     element.appendChild(this.ulElement_);
     element.appendChild(button);
 
-  Control.call(this, {
-    element: element,
-    render: options.render || render,
-    target: options.target
-  });
-
     /**
      * A list of currently rendered resolutions.
-   * @type {Array.<string>}
+     * @type {Array<string>}
      * @private
      */
     this.renderedAttributions_ = [];
@@ -141,27 +142,24 @@ const Attribution = function(opt_options) {
      */
     this.renderedVisible_ = true;
 
-};
+  }
 
-inherits(Attribution, Control);
-
-
-/**
+  /**
    * Get a list of visible attributions.
    * @param {module:ol/PluggableMap~FrameState} frameState Frame state.
- * @return {Array.<string>} Attributions.
+   * @return {Array<string>} Attributions.
    * @private
    */
-Attribution.prototype.getSourceAttributions_ = function(frameState) {
+  getSourceAttributions_(frameState) {
     /**
      * Used to determine if an attribution already exists.
-   * @type {!Object.<string, boolean>}
+     * @type {!Object<string, boolean>}
      */
     const lookup = {};
 
     /**
      * A list of visible attributions.
-   * @type {Array.<string>}
+     * @type {Array<string>}
      */
     const visibleAttributions = [];
 
@@ -203,25 +201,13 @@ Attribution.prototype.getSourceAttributions_ = function(frameState) {
       }
     }
     return visibleAttributions;
-};
+  }
 
-
-/**
- * Update the attribution element.
- * @param {module:ol/MapEvent} mapEvent Map event.
- * @this {module:ol/control/Attribution}
- * @api
- */
-export function render(mapEvent) {
-  this.updateElement_(mapEvent.frameState);
-}
-
-
-/**
+  /**
    * @private
    * @param {?module:ol/PluggableMap~FrameState} frameState Frame state.
    */
-Attribution.prototype.updateElement_ = function(frameState) {
+  updateElement_(frameState) {
     if (!frameState) {
       if (this.renderedVisible_) {
         this.element.style.display = 'none';
@@ -246,29 +232,27 @@ Attribution.prototype.updateElement_ = function(frameState) {
 
     // append the attributions
     for (let i = 0, ii = attributions.length; i < ii; ++i) {
-    const element = document.createElement('LI');
+      const element = document.createElement('li');
       element.innerHTML = attributions[i];
       this.ulElement_.appendChild(element);
     }
 
     this.renderedAttributions_ = attributions;
-};
+  }
 
-
-/**
+  /**
    * @param {MouseEvent} event The event to handle
    * @private
    */
-Attribution.prototype.handleClick_ = function(event) {
+  handleClick_(event) {
     event.preventDefault();
     this.handleToggle_();
-};
+  }
 
-
-/**
+  /**
    * @private
    */
-Attribution.prototype.handleToggle_ = function() {
+  handleToggle_() {
     this.element.classList.toggle(CLASS_COLLAPSED);
     if (this.collapsed_) {
       replaceNode(this.collapseLabel_, this.label_);
@@ -276,25 +260,23 @@ Attribution.prototype.handleToggle_ = function() {
       replaceNode(this.label_, this.collapseLabel_);
     }
     this.collapsed_ = !this.collapsed_;
-};
+  }
 
-
-/**
+  /**
    * Return `true` if the attribution is collapsible, `false` otherwise.
    * @return {boolean} True if the widget is collapsible.
    * @api
    */
-Attribution.prototype.getCollapsible = function() {
+  getCollapsible() {
     return this.collapsible_;
-};
+  }
 
-
-/**
+  /**
    * Set whether the attribution should be collapsible.
    * @param {boolean} collapsible True if the widget is collapsible.
    * @api
    */
-Attribution.prototype.setCollapsible = function(collapsible) {
+  setCollapsible(collapsible) {
     if (this.collapsible_ === collapsible) {
       return;
     }
@@ -303,31 +285,43 @@ Attribution.prototype.setCollapsible = function(collapsible) {
     if (!collapsible && this.collapsed_) {
       this.handleToggle_();
     }
-};
+  }
 
-
-/**
+  /**
    * Collapse or expand the attribution according to the passed parameter. Will
    * not do anything if the attribution isn't collapsible or if the current
    * collapsed state is already the one requested.
    * @param {boolean} collapsed True if the widget is collapsed.
    * @api
    */
-Attribution.prototype.setCollapsed = function(collapsed) {
+  setCollapsed(collapsed) {
     if (!this.collapsible_ || this.collapsed_ === collapsed) {
       return;
     }
     this.handleToggle_();
-};
+  }
 
-
-/**
+  /**
    * Return `true` when the attribution is currently collapsed or `false`
    * otherwise.
    * @return {boolean} True if the widget is collapsed.
    * @api
    */
-Attribution.prototype.getCollapsed = function() {
+  getCollapsed() {
     return this.collapsed_;
-};
+  }
+}
+
+
+/**
+ * Update the attribution element.
+ * @param {module:ol/MapEvent} mapEvent Map event.
+ * @this {module:ol/control/Attribution}
+ * @api
+ */
+export function render(mapEvent) {
+  this.updateElement_(mapEvent.frameState);
+}
+
+
 export default Attribution;

src/ol/control/Control.js

@@ -1,8 +1,7 @@
 /**
  * @module ol/control/Control
  */
-import {inherits} from '../util.js';
-import {UNDEFINED} from '../functions.js';
+import {VOID} from '../functions.js';
 import MapEventType from '../MapEventType.js';
 import BaseObject from '../Object.js';
 import {removeNode} from '../dom.js';
@@ -11,13 +10,13 @@ import {listen, unlistenByKey} from '../events.js';
 
 /**
  * @typedef {Object} Options
- * @property {Element} [element] The element is the control's
+ * @property {HTMLElement} [element] The element is the control's
  * container element. This only needs to be specified if you're developing
  * a custom control.
  * @property {function(module:ol/MapEvent)} [render] Function called when
  * the control should be re-rendered. This is called in a `requestAnimationFrame`
  * callback.
- * @property {Element|string} [target] Specify a target if you want
+ * @property {HTMLElement|string} [target] Specify a target if you want
  * the control to be rendered outside of the map's viewport.
  */
 
@@ -44,24 +43,26 @@ import {listen, unlistenByKey} from '../events.js';
  * You can also extend this base for your own control class. See
  * examples/custom-controls for an example of how to do this.
  *
- * @constructor
- * @extends {module:ol/Object}
- * @param {module:ol/control/Control~Options} options Control options.
  * @api
  */
-const Control = function(options) {
+class Control extends BaseObject {
 
-  BaseObject.call(this);
+  /**
+   * @param {module:ol/control/Control~Options} options Control options.
+   */
+  constructor(options) {
+
+    super();
 
     /**
      * @protected
-   * @type {Element}
+     * @type {HTMLElement}
      */
     this.element = options.element ? options.element : null;
 
     /**
      * @private
-   * @type {Element}
+     * @type {HTMLElement}
      */
     this.target_ = null;
 
@@ -73,51 +74,46 @@ const Control = function(options) {
 
     /**
      * @protected
-   * @type {!Array.<module:ol/events~EventsKey>}
+     * @type {!Array<module:ol/events~EventsKey>}
      */
     this.listenerKeys = [];
 
     /**
      * @type {function(module:ol/MapEvent)}
      */
-  this.render = options.render ? options.render : UNDEFINED;
+    this.render = options.render ? options.render : VOID;
 
     if (options.target) {
       this.setTarget(options.target);
     }
 
-};
+  }
 
-inherits(Control, BaseObject);
-
-
-/**
+  /**
    * @inheritDoc
    */
-Control.prototype.disposeInternal = function() {
+  disposeInternal() {
     removeNode(this.element);
-  BaseObject.prototype.disposeInternal.call(this);
-};
+    super.disposeInternal();
+  }
 
-
-/**
+  /**
    * Get the map associated with this control.
    * @return {module:ol/PluggableMap} Map.
    * @api
    */
-Control.prototype.getMap = function() {
+  getMap() {
     return this.map_;
-};
+  }
 
-
-/**
+  /**
    * Remove the control from its current map and attach it to the new map.
    * Subclasses may set up event handlers to get notified about changes to
    * the map here.
    * @param {module:ol/PluggableMap} map Map.
    * @api
    */
-Control.prototype.setMap = function(map) {
+  setMap(map) {
     if (this.map_) {
       removeNode(this.element);
     }
@@ -130,27 +126,29 @@ Control.prototype.setMap = function(map) {
       const target = this.target_ ?
         this.target_ : map.getOverlayContainerStopEvent();
       target.appendChild(this.element);
-    if (this.render !== UNDEFINED) {
+      if (this.render !== VOID) {
         this.listenerKeys.push(listen(map,
           MapEventType.POSTRENDER, this.render, this));
       }
       map.render();
     }
-};
+  }
 
-
-/**
+  /**
    * This function is used to set a target element for the control. It has no
    * effect if it is called after the control has been added to the map (i.e.
    * after `setMap` is called on the control). If no `target` is set in the
    * options passed to the control constructor and if `setTarget` is not called
    * then the control is added to the map's overlay container.
- * @param {Element|string} target Target.
+   * @param {HTMLElement|string} target Target.
    * @api
    */
-Control.prototype.setTarget = function(target) {
+  setTarget(target) {
     this.target_ = typeof target === 'string' ?
       document.getElementById(target) :
       target;
-};
+  }
+}
+
+
 export default Control;

src/ol/control/FullScreen.js

@@ -1,7 +1,6 @@
 /**
  * @module ol/control/FullScreen
  */
-import {inherits} from '../util.js';
 import Control from '../control/Control.js';
 import {CLASS_CONTROL, CLASS_UNSELECTABLE, CLASS_UNSUPPORTED} from '../css.js';
 import {replaceNode} from '../dom.js';
@@ -35,16 +34,16 @@ const getChangeType = (function() {
 /**
  * @typedef {Object} Options
  * @property {string} [className='ol-full-screen'] CSS class name.
- * @property {string|Element} [label='\u2922'] Text label to use for the button.
+ * @property {string|HTMLElement} [label='\u2922'] Text label to use for the button.
  * Instead of text, also an element (e.g. a `span` element) can be used.
- * @property {string|Element} [labelActive='\u00d7'] Text label to use for the
+ * @property {string|HTMLElement} [labelActive='\u00d7'] Text label to use for the
  * button when full-screen is active.
  * Instead of text, also an element (e.g. a `span` element) can be used.
  * @property {string} [tipLabel='Toggle full-screen'] Text label to use for the button tip.
  * @property {boolean} [keys=false] Full keyboard access.
- * @property {Element|string} [target] Specify a target if you want the
+ * @property {HTMLElement|string} [target] Specify a target if you want the
  * control to be rendered outside of the map's viewport.
- * @property {Element|string} [source] The element to be displayed
+ * @property {HTMLElement|string} [source] The element to be displayed
  * fullscreen. When not provided, the element containing the map viewport will
  * be displayed fullscreen.
  */
@@ -61,16 +60,22 @@ const getChangeType = (function() {
  * The [Fullscreen API](http://www.w3.org/TR/fullscreen/) is used to
  * toggle the map in full screen mode.
  *
- *
- * @constructor
- * @extends {module:ol/control/Control}
- * @param {module:ol/control/FullScreen~Options=} opt_options Options.
  * @api
  */
-const FullScreen = function(opt_options) {
+class FullScreen extends Control {
+
+  /**
+   * @param {module:ol/control/FullScreen~Options=} opt_options Options.
+   */
+  constructor(opt_options) {
 
     const options = opt_options ? opt_options : {};
 
+    super({
+      element: document.createElement('div'),
+      target: options.target
+    });
+
     /**
      * @private
      * @type {string}
@@ -82,7 +87,7 @@ const FullScreen = function(opt_options) {
 
     /**
      * @private
-   * @type {Element}
+     * @type {HTMLElement}
      */
     this.labelNode_ = typeof label === 'string' ?
       document.createTextNode(label) : label;
@@ -91,7 +96,7 @@ const FullScreen = function(opt_options) {
 
     /**
      * @private
-   * @type {Element}
+     * @type {HTMLElement}
      */
     this.labelActiveNode_ = typeof labelActive === 'string' ?
       document.createTextNode(labelActive) : labelActive;
@@ -109,15 +114,10 @@ const FullScreen = function(opt_options) {
     const cssClasses = this.cssClassName_ + ' ' + CLASS_UNSELECTABLE +
         ' ' + CLASS_CONTROL + ' ' +
         (!isFullScreenSupported() ? CLASS_UNSUPPORTED : '');
-  const element = document.createElement('div');
+    const element = this.element;
     element.className = cssClasses;
     element.appendChild(button);
 
-  Control.call(this, {
-    element: element,
-    target: options.target
-  });
-
     /**
      * @private
      * @type {boolean}
@@ -126,29 +126,25 @@ const FullScreen = function(opt_options) {
 
     /**
      * @private
-   * @type {Element|string|undefined}
+     * @type {HTMLElement|string|undefined}
      */
     this.source_ = options.source;
 
-};
+  }
 
-inherits(FullScreen, Control);
-
-
-/**
+  /**
    * @param {MouseEvent} event The event to handle
    * @private
    */
-FullScreen.prototype.handleClick_ = function(event) {
+  handleClick_(event) {
     event.preventDefault();
     this.handleFullScreen_();
-};
+  }
 
-
-/**
+  /**
    * @private
    */
-FullScreen.prototype.handleFullScreen_ = function() {
+  handleFullScreen_() {
     if (!isFullScreenSupported()) {
       return;
     }
@@ -174,13 +170,12 @@ FullScreen.prototype.handleFullScreen_ = function() {
         requestFullScreen(element);
       }
     }
-};
+  }
 
-
-/**
+  /**
    * @private
    */
-FullScreen.prototype.handleFullScreenChange_ = function() {
+  handleFullScreenChange_() {
     const button = this.element.firstElementChild;
     const map = this.getMap();
     if (isFullScreen()) {
@@ -193,22 +188,23 @@ FullScreen.prototype.handleFullScreenChange_ = function() {
     if (map) {
       map.updateSize();
     }
-};
+  }
 
-
-/**
+  /**
    * @inheritDoc
    * @api
    */
-FullScreen.prototype.setMap = function(map) {
-  Control.prototype.setMap.call(this, map);
+  setMap(map) {
+    super.setMap(map);
     if (map) {
       this.listenerKeys.push(listen(document,
         getChangeType(),
         this.handleFullScreenChange_, this)
       );
     }
-};
+  }
+}
+
 
 /**
  * @return {boolean} Fullscreen is supported by the current platform.
@@ -235,7 +231,7 @@ function isFullScreen() {
 
 /**
  * Request to fullscreen an element.
- * @param {Element} element Element to request fullscreen
+ * @param {HTMLElement} element Element to request fullscreen
  */
 function requestFullScreen(element) {
   if (element.requestFullscreen) {
@@ -251,7 +247,7 @@ function requestFullScreen(element) {
 
 /**
  * Request to fullscreen an element with keyboard input.
- * @param {Element} element Element to request fullscreen
+ * @param {HTMLElement} element Element to request fullscreen
  */
 function requestFullScreenWithKeys(element) {
   if (element.mozRequestFullScreenWithKeys) {

src/ol/control/MousePosition.js

@@ -1,8 +1,6 @@
 /**
  * @module ol/control/MousePosition
  */
-
-import {inherits} from '../util.js';
 import {listen} from '../events.js';
 import EventType from '../events/EventType.js';
 import {getChangeEventType} from '../Object.js';
@@ -31,9 +29,9 @@ const COORDINATE_FORMAT = 'coordinateFormat';
  * callback.
  * @property {Element|string} [target] Specify a target if you want the
  * control to be rendered outside of the map's viewport.
- * @property {string} [undefinedHTML=' '] Markup to show when coordinates are not
+ * @property {string} [undefinedHTML=' '] Markup to show when coordinates are not
  * available (e.g. when the pointer leaves the map viewport).  By default, the last position
- * will be replaced with `' '` when the pointer leaves the viewport.  To
+ * will be replaced with `' '` (` `) when the pointer leaves the viewport.  To
  * retain the last rendered position, set this option to something falsey (like an empty
  * string `''`).
  */
@@ -46,20 +44,21 @@ const COORDINATE_FORMAT = 'coordinateFormat';
  * By default the control is shown in the top right corner of the map, but this
  * can be changed by using the css selector `.ol-mouse-position`.
  *
- * @constructor
- * @extends {module:ol/control/Control}
- * @param {module:ol/control/MousePosition~Options=} opt_options Mouse position
- *     options.
  * @api
  */
-const MousePosition = function(opt_options) {
+class MousePosition extends Control {
+
+  /**
+   * @param {module:ol/control/MousePosition~Options=} opt_options Mouse position options.
+   */
+  constructor(opt_options) {
 
     const options = opt_options ? opt_options : {};
 
-  const element = document.createElement('DIV');
+    const element = document.createElement('div');
     element.className = options.className !== undefined ? options.className : 'ol-mouse-position';
 
-  Control.call(this, {
+    super({
       element: element,
       render: options.render || render,
       target: options.target
@@ -80,7 +79,7 @@ const MousePosition = function(opt_options) {
      * @private
      * @type {string}
      */
-  this.undefinedHTML_ = 'undefinedHTML' in options ? options.undefinedHTML : ' ';
+    this.undefinedHTML_ = 'undefinedHTML' in options ? options.undefinedHTML : ' ';
 
     /**
      * @private
@@ -108,44 +107,20 @@ const MousePosition = function(opt_options) {
 
     /**
      * @private
-   * @type {module:ol~Pixel}
+     * @type {module:ol/pixel~Pixel}
      */
     this.lastMouseMovePixel_ = null;
 
-};
-
-inherits(MousePosition, Control);
-
-
-/**
- * Update the mouseposition element.
- * @param {module:ol/MapEvent} mapEvent Map event.
- * @this {module:ol/control/MousePosition}
- * @api
- */
-export function render(mapEvent) {
-  const frameState = mapEvent.frameState;
-  if (!frameState) {
-    this.mapProjection_ = null;
-  } else {
-    if (this.mapProjection_ != frameState.viewState.projection) {
-      this.mapProjection_ = frameState.viewState.projection;
-      this.transform_ = null;
   }
-  }
-  this.updateHTML_(this.lastMouseMovePixel_);
-}
 
-
-/**
+  /**
    * @private
    */
-MousePosition.prototype.handleProjectionChanged_ = function() {
+  handleProjectionChanged_() {
     this.transform_ = null;
-};
+  }
 
-
-/**
+  /**
    * Return the coordinate format type used to render the current position or
    * undefined.
    * @return {module:ol/coordinate~CoordinateFormat|undefined} The format to render the current
@@ -153,54 +128,50 @@ MousePosition.prototype.handleProjectionChanged_ = function() {
    * @observable
    * @api
    */
-MousePosition.prototype.getCoordinateFormat = function() {
+  getCoordinateFormat() {
     return (
       /** @type {module:ol/coordinate~CoordinateFormat|undefined} */ (this.get(COORDINATE_FORMAT))
     );
-};
+  }
 
-
-/**
+  /**
    * Return the projection that is used to report the mouse position.
    * @return {module:ol/proj/Projection|undefined} The projection to report mouse
    *     position in.
    * @observable
    * @api
    */
-MousePosition.prototype.getProjection = function() {
+  getProjection() {
     return (
       /** @type {module:ol/proj/Projection|undefined} */ (this.get(PROJECTION))
     );
-};
+  }
 
-
-/**
+  /**
    * @param {Event} event Browser event.
    * @protected
    */
-MousePosition.prototype.handleMouseMove = function(event) {
+  handleMouseMove(event) {
     const map = this.getMap();
     this.lastMouseMovePixel_ = map.getEventPixel(event);
     this.updateHTML_(this.lastMouseMovePixel_);
-};
+  }
 
-
-/**
+  /**
    * @param {Event} event Browser event.
    * @protected
    */
-MousePosition.prototype.handleMouseOut = function(event) {
+  handleMouseOut(event) {
     this.updateHTML_(null);
     this.lastMouseMovePixel_ = null;
-};
+  }
 
-
-/**
+  /**
    * @inheritDoc
    * @api
    */
-MousePosition.prototype.setMap = function(map) {
-  Control.prototype.setMap.call(this, map);
+  setMap(map) {
+    super.setMap(map);
     if (map) {
       const viewport = map.getViewport();
       this.listenerKeys.push(
@@ -212,38 +183,35 @@ MousePosition.prototype.setMap = function(map) {
         );
       }
     }
-};
+  }
 
-
-/**
+  /**
    * Set the coordinate format type used to render the current position.
    * @param {module:ol/coordinate~CoordinateFormat} format The format to render the current
    *     position in.
    * @observable
    * @api
    */
-MousePosition.prototype.setCoordinateFormat = function(format) {
+  setCoordinateFormat(format) {
     this.set(COORDINATE_FORMAT, format);
-};
+  }
 
-
-/**
+  /**
    * Set the projection that is used to report the mouse position.
    * @param {module:ol/proj~ProjectionLike} projection The projection to report mouse
    *     position in.
    * @observable
    * @api
    */
-MousePosition.prototype.setProjection = function(projection) {
+  setProjection(projection) {
     this.set(PROJECTION, getProjection(projection));
-};
+  }
 
-
-/**
- * @param {?module:ol~Pixel} pixel Pixel.
+  /**
+   * @param {?module:ol/pixel~Pixel} pixel Pixel.
    * @private
    */
-MousePosition.prototype.updateHTML_ = function(pixel) {
+  updateHTML_(pixel) {
     let html = this.undefinedHTML_;
     if (pixel && this.mapProjection_) {
       if (!this.transform_) {
@@ -271,7 +239,28 @@ MousePosition.prototype.updateHTML_ = function(pixel) {
       this.element.innerHTML = html;
       this.renderedHTML_ = html;
     }
-};
+  }
+}
+
+
+/**
+ * Update the mouseposition element.
+ * @param {module:ol/MapEvent} mapEvent Map event.
+ * @this {module:ol/control/MousePosition}
+ * @api
+ */
+export function render(mapEvent) {
+  const frameState = mapEvent.frameState;
+  if (!frameState) {
+    this.mapProjection_ = null;
+  } else {
+    if (this.mapProjection_ != frameState.viewState.projection) {
+      this.mapProjection_ = frameState.viewState.projection;
+      this.transform_ = null;
+    }
+  }
+  this.updateHTML_(this.lastMouseMovePixel_);
+}
 
 
 export default MousePosition;

src/ol/control/OverviewMap.js

@@ -1,7 +1,6 @@
 /**
  * @module ol/control/OverviewMap
  */
-import {inherits} from '../util.js';
 import Collection from '../Collection.js';
 import Map from '../Map.js';
 import MapEventType from '../MapEventType.js';
@@ -40,17 +39,17 @@ const MIN_RATIO = 0.1;
  * @typedef {Object} Options
  * @property {string} [className='ol-overviewmap'] CSS class name.
  * @property {boolean} [collapsed=true] Whether the control should start collapsed or not (expanded).
- * @property {string|Element} [collapseLabel='«'] Text label to use for the
+ * @property {string|HTMLElement} [collapseLabel='«'] Text label to use for the
  * expanded overviewmap button. Instead of text, also an element (e.g. a `span` element) can be used.
  * @property {boolean} [collapsible=true] Whether the control can be collapsed or not.
- * @property {string|Element} [label='»'] Text label to use for the collapsed
+ * @property {string|HTMLElement} [label='»'] Text label to use for the collapsed
  * overviewmap button. Instead of text, also an element (e.g. a `span` element) can be used.
- * @property {Array.<module:ol/layer/Layer>|module:ol/Collection.<module:ol/layer/Layer>} [layers]
+ * @property {Array<module:ol/layer/Layer>|module:ol/Collection<module:ol/layer/Layer>} [layers]
  * Layers for the overview map. If not set, then all main map layers are used
  * instead.
  * @property {function(module:ol/MapEvent)} [render] Function called when the control
  * should be re-rendered. This is called in a `requestAnimationFrame` callback.
- * @property {Element|string} [target] Specify a target if you want the control
+ * @property {HTMLElement|string} [target] Specify a target if you want the control
  * to be rendered outside of the map's viewport.
  * @property {string} [tipLabel='Overview map'] Text label to use for the button tip.
  * @property {module:ol/View} [view] Custom view for the overview map. If not provided,
@@ -61,15 +60,24 @@ const MIN_RATIO = 0.1;
 /**
  * Create a new control with a map acting as an overview map for an other
  * defined map.
- * @constructor
- * @extends {module:ol/control/Control}
- * @param {module:ol/control/OverviewMap~Options=} opt_options OverviewMap options.
+ *
  * @api
  */
-const OverviewMap = function(opt_options) {
+class OverviewMap extends Control {
+
+  /**
+   * @param {module:ol/control/OverviewMap~Options=} opt_options OverviewMap options.
+   */
+  constructor(opt_options) {
 
     const options = opt_options ? opt_options : {};
 
+    super({
+      element: document.createElement('div'),
+      render: options.render || render,
+      target: options.target
+    });
+
     /**
      * @type {boolean}
      * @private
@@ -96,7 +104,7 @@ const OverviewMap = function(opt_options) {
     if (typeof collapseLabel === 'string') {
       /**
        * @private
-     * @type {Element}
+       * @type {HTMLElement}
        */
       this.collapseLabel_ = document.createElement('span');
       this.collapseLabel_.textContent = collapseLabel;
@@ -110,7 +118,7 @@ const OverviewMap = function(opt_options) {
     if (typeof label === 'string') {
       /**
        * @private
-     * @type {Element}
+       * @type {HTMLElement}
        */
       this.label_ = document.createElement('span');
       this.label_.textContent = label;
@@ -129,10 +137,10 @@ const OverviewMap = function(opt_options) {
       this.handleClick_, this);
 
     /**
-   * @type {Element}
+     * @type {HTMLElement}
      * @private
      */
-  this.ovmapDiv_ = document.createElement('DIV');
+    this.ovmapDiv_ = document.createElement('div');
     this.ovmapDiv_.className = 'ol-overviewmap-map';
 
     /**
@@ -156,7 +164,7 @@ const OverviewMap = function(opt_options) {
         }).bind(this));
     }
 
-  const box = document.createElement('DIV');
+    const box = document.createElement('div');
     box.className = 'ol-overviewmap-box';
     box.style.boxSizing = 'border-box';
 
@@ -174,17 +182,11 @@ const OverviewMap = function(opt_options) {
     const cssClasses = className + ' ' + CLASS_UNSELECTABLE + ' ' + CLASS_CONTROL +
         (this.collapsed_ && this.collapsible_ ? ' ' + CLASS_COLLAPSED : '') +
         (this.collapsible_ ? '' : ' ol-uncollapsible');
-  const element = document.createElement('div');
+    const element = this.element;
     element.className = cssClasses;
     element.appendChild(this.ovmapDiv_);
     element.appendChild(button);
 
-  Control.call(this, {
-    element: element,
-    render: options.render || render,
-    target: options.target
-  });
-
     /* Interactive map */
 
     const scope = this;
@@ -222,16 +224,13 @@ const OverviewMap = function(opt_options) {
       window.addEventListener('mousemove', move);
       window.addEventListener('mouseup', endMoving);
     });
-};
+  }
 
-inherits(OverviewMap, Control);
-
-
-/**
+  /**
    * @inheritDoc
    * @api
    */
-OverviewMap.prototype.setMap = function(map) {
+  setMap(map) {
     const oldMap = this.getMap();
     if (map === oldMap) {
       return;
@@ -243,7 +242,7 @@ OverviewMap.prototype.setMap = function(map) {
       }
       this.ovmap_.setTarget(null);
     }
-  Control.prototype.setMap.call(this, map);
+    super.setMap(map);
 
     if (map) {
       this.ovmap_.setTarget(this.ovmapDiv_);
@@ -265,15 +264,14 @@ OverviewMap.prototype.setMap = function(map) {
         }
       }
     }
-};
+  }
 
-
-/**
+  /**
    * Handle map property changes.  This only deals with changes to the map's view.
    * @param {module:ol/Object~ObjectEvent} event The propertychange event.
    * @private
    */
-OverviewMap.prototype.handleMapPropertyChange_ = function(event) {
+  handleMapPropertyChange_(event) {
     if (event.key === MapProperty.VIEW) {
       const oldView = /** @type {module:ol/View} */ (event.oldValue);
       if (oldView) {
@@ -282,57 +280,41 @@ OverviewMap.prototype.handleMapPropertyChange_ = function(event) {
       const newView = this.getMap().getView();
       this.bindView_(newView);
     }
-};
+  }
 
-
-/**
+  /**
    * Register listeners for view property changes.
    * @param {module:ol/View} view The view.
    * @private
    */
-OverviewMap.prototype.bindView_ = function(view) {
+  bindView_(view) {
     listen(view,
       getChangeEventType(ViewProperty.ROTATION),
       this.handleRotationChanged_, this);
-};
+  }
 
-
-/**
+  /**
    * Unregister listeners for view property changes.
    * @param {module:ol/View} view The view.
    * @private
    */
-OverviewMap.prototype.unbindView_ = function(view) {
+  unbindView_(view) {
     unlisten(view,
       getChangeEventType(ViewProperty.ROTATION),
       this.handleRotationChanged_, this);
-};
+  }
 
-
-/**
+  /**
    * Handle rotation changes to the main map.
    * TODO: This should rotate the extent rectrangle instead of the
    * overview map's view.
    * @private
    */
-OverviewMap.prototype.handleRotationChanged_ = function() {
+  handleRotationChanged_() {
     this.ovmap_.getView().setRotation(this.getMap().getView().getRotation());
-};
+  }
 
-
-/**
- * Update the overview map element.
- * @param {module:ol/MapEvent} mapEvent Map event.
- * @this {module:ol/control/OverviewMap}
- * @api
- */
-export function render(mapEvent) {
-  this.validateExtent_();
-  this.updateBox_();
-}
-
-
-/**
+  /**
    * Reset the overview map extent if the box size (width or
    * height) is less than the size of the overview map size times minRatio
    * or is greater than the size of the overview size times maxRatio.
@@ -343,7 +325,7 @@ export function render(mapEvent) {
    * main map center location.
    * @private
    */
-OverviewMap.prototype.validateExtent_ = function() {
+  validateExtent_() {
     const map = this.getMap();
     const ovmap = this.ovmap_;
 
@@ -380,15 +362,14 @@ OverviewMap.prototype.validateExtent_ = function() {
     } else if (!containsExtent(ovextent, extent)) {
       this.recenter_();
     }
-};
+  }
 
-
-/**
+  /**
    * Reset the overview map extent to half calculated min and max ratio times
    * the extent of the main map.
    * @private
    */
-OverviewMap.prototype.resetExtent_ = function() {
+  resetExtent_() {
     if (MAX_RATIO === 0 || MIN_RATIO === 0) {
       return;
     }
@@ -411,15 +392,14 @@ OverviewMap.prototype.resetExtent_ = function() {
     const ratio = 1 / (Math.pow(2, steps / 2) * MIN_RATIO);
     scaleFromCenter(extent, ratio);
     ovview.fit(extent);
-};
+  }
 
-
-/**
+  /**
    * Set the center of the overview map to the map center without changing its
    * resolution.
    * @private
    */
-OverviewMap.prototype.recenter_ = function() {
+  recenter_() {
     const map = this.getMap();
     const ovmap = this.ovmap_;
 
@@ -428,14 +408,13 @@ OverviewMap.prototype.recenter_ = function() {
     const ovview = ovmap.getView();
 
     ovview.setCenter(view.getCenter());
-};
+  }
 
-
-/**
+  /**
    * Update the box using the main map extent
    * @private
    */
-OverviewMap.prototype.updateBox_ = function() {
+  updateBox_() {
     const map = this.getMap();
     const ovmap = this.ovmap_;
 
@@ -467,17 +446,15 @@ OverviewMap.prototype.updateBox_ = function() {
       box.style.width = Math.abs((bottomLeft[0] - topRight[0]) / ovresolution) + 'px';
       box.style.height = Math.abs((topRight[1] - bottomLeft[1]) / ovresolution) + 'px';
     }
-};
+  }
 
-
-/**
+  /**
    * @param {number} rotation Target rotation.
    * @param {module:ol/coordinate~Coordinate} coordinate Coordinate.
    * @return {module:ol/coordinate~Coordinate|undefined} Coordinate for rotation and center anchor.
    * @private
    */
-OverviewMap.prototype.calculateCoordinateRotate_ = function(
-  rotation, coordinate) {
+  calculateCoordinateRotate_(rotation, coordinate) {
     let coordinateRotate;
 
     const map = this.getMap();
@@ -494,23 +471,21 @@ OverviewMap.prototype.calculateCoordinateRotate_ = function(
       addCoordinate(coordinateRotate, currentCenter);
     }
     return coordinateRotate;
-};
+  }
 
-
-/**
+  /**
    * @param {MouseEvent} event The event to handle
    * @private
    */
-OverviewMap.prototype.handleClick_ = function(event) {
+  handleClick_(event) {
     event.preventDefault();
     this.handleToggle_();
-};
+  }
 
-
-/**
+  /**
    * @private
    */
-OverviewMap.prototype.handleToggle_ = function() {
+  handleToggle_() {
     this.element.classList.toggle(CLASS_COLLAPSED);
     if (this.collapsed_) {
       replaceNode(this.collapseLabel_, this.label_);
@@ -531,25 +506,23 @@ OverviewMap.prototype.handleToggle_ = function() {
         },
         this);
     }
-};
+  }
 
-
-/**
+  /**
    * Return `true` if the overview map is collapsible, `false` otherwise.
    * @return {boolean} True if the widget is collapsible.
    * @api
    */
-OverviewMap.prototype.getCollapsible = function() {
+  getCollapsible() {
     return this.collapsible_;
-};
+  }
 
-
-/**
+  /**
    * Set whether the overview map should be collapsible.
    * @param {boolean} collapsible True if the widget is collapsible.
    * @api
    */
-OverviewMap.prototype.setCollapsible = function(collapsible) {
+  setCollapsible(collapsible) {
     if (this.collapsible_ === collapsible) {
       return;
     }
@@ -558,40 +531,52 @@ OverviewMap.prototype.setCollapsible = function(collapsible) {
     if (!collapsible && this.collapsed_) {
       this.handleToggle_();
     }
-};
+  }
 
-
-/**
+  /**
    * Collapse or expand the overview map according to the passed parameter. Will
    * not do anything if the overview map isn't collapsible or if the current
    * collapsed state is already the one requested.
    * @param {boolean} collapsed True if the widget is collapsed.
    * @api
    */
-OverviewMap.prototype.setCollapsed = function(collapsed) {
+  setCollapsed(collapsed) {
     if (!this.collapsible_ || this.collapsed_ === collapsed) {
       return;
     }
     this.handleToggle_();
-};
+  }
 
-
-/**
+  /**
    * Determine if the overview map is collapsed.
    * @return {boolean} The overview map is collapsed.
    * @api
    */
-OverviewMap.prototype.getCollapsed = function() {
+  getCollapsed() {
     return this.collapsed_;
-};
+  }
 
-
-/**
+  /**
    * Return the overview map.
    * @return {module:ol/PluggableMap} Overview map.
    * @api
    */
-OverviewMap.prototype.getOverviewMap = function() {
+  getOverviewMap() {
     return this.ovmap_;
-};
+  }
+}
+
+
+/**
+ * Update the overview map element.
+ * @param {module:ol/MapEvent} mapEvent Map event.
+ * @this {module:ol/control/OverviewMap}
+ * @api
+ */
+export function render(mapEvent) {
+  this.validateExtent_();
+  this.updateBox_();
+}
+
+
 export default OverviewMap;

src/ol/control/Rotate.js

@@ -1,19 +1,17 @@
 /**
  * @module ol/control/Rotate
  */
-
 import Control from '../control/Control.js';
 import {CLASS_CONTROL, CLASS_HIDDEN, CLASS_UNSELECTABLE} from '../css.js';
 import {easeOut} from '../easing.js';
 import {listen} from '../events.js';
 import EventType from '../events/EventType.js';
-import {inherits} from '../util.js';
 
 
 /**
  * @typedef {Object} Options
  * @property {string} [className='ol-rotate'] CSS class name.
- * @property {string|Element} [label='⇧'] Text label to use for the rotate button.
+ * @property {string|HTMLElement} [label='⇧'] Text label to use for the rotate button.
  * Instead of text, also an element (e.g. a `span` element) can be used.
  * @property {string} [tipLabel='Reset rotation'] Text label to use for the rotate tip.
  * @property {number} [duration=250] Animation duration in milliseconds.
@@ -22,7 +20,7 @@ import {inherits} from '../util.js';
  * be re-rendered. This is called in a `requestAnimationFrame` callback.
  * @property {function()} [resetNorth] Function called when the control is clicked.
  * This will override the default `resetNorth`.
- * @property {Element|string} [target] Specify a target if you want the control to be
+ * @property {HTMLElement|string} [target] Specify a target if you want the control to be
  * rendered outside of the map's viewport.
  */
 
@@ -33,21 +31,29 @@ import {inherits} from '../util.js';
  * To style this control use css selector `.ol-rotate`. A `.ol-hidden` css
  * selector is added to the button when the rotation is 0.
  *
- * @constructor
- * @extends {module:ol/control/Control}
- * @param {module:ol/control/Rotate~Options=} opt_options Rotate options.
  * @api
  */
-const Rotate = function(opt_options) {
+class Rotate extends Control {
+
+  /**
+   * @param {module:ol/control/Rotate~Options=} opt_options Rotate options.
+   */
+  constructor(opt_options) {
 
     const options = opt_options ? opt_options : {};
 
+    super({
+      element: document.createElement('div'),
+      render: options.render || render,
+      target: options.target
+    });
+
     const className = options.className !== undefined ? options.className : 'ol-rotate';
 
     const label = options.label !== undefined ? options.label : '\u21E7';
 
     /**
-   * @type {Element}
+     * @type {HTMLElement}
      * @private
      */
     this.label_ = null;
@@ -69,22 +75,15 @@ const Rotate = function(opt_options) {
     button.title = tipLabel;
     button.appendChild(this.label_);
 
-  listen(button, EventType.CLICK,
-    Rotate.prototype.handleClick_, this);
+    listen(button, EventType.CLICK, this.handleClick_, this);
 
     const cssClasses = className + ' ' + CLASS_UNSELECTABLE + ' ' + CLASS_CONTROL;
-  const element = document.createElement('div');
+    const element = this.element;
     element.className = cssClasses;
     element.appendChild(button);
 
     this.callResetNorth_ = options.resetNorth ? options.resetNorth : undefined;
 
-  Control.call(this, {
-    element: element,
-    render: options.render || render,
-    target: options.target
-  });
-
     /**
      * @type {number}
      * @private
@@ -107,29 +106,25 @@ const Rotate = function(opt_options) {
       this.element.classList.add(CLASS_HIDDEN);
     }
 
-};
+  }
 
-inherits(Rotate, Control);
-
-
-/**
+  /**
    * @param {MouseEvent} event The event to handle
    * @private
    */
-Rotate.prototype.handleClick_ = function(event) {
+  handleClick_(event) {
     event.preventDefault();
     if (this.callResetNorth_ !== undefined) {
       this.callResetNorth_();
     } else {
       this.resetNorth_();
     }
-};
+  }
 
-
-/**
+  /**
    * @private
    */
-Rotate.prototype.resetNorth_ = function() {
+  resetNorth_() {
     const map = this.getMap();
     const view = map.getView();
     if (!view) {
@@ -148,7 +143,8 @@ Rotate.prototype.resetNorth_ = function() {
         view.setRotation(0);
       }
     }
-};
+  }
+}
 
 
 /**

src/ol/control/ScaleLine.js

@@ -1,7 +1,6 @@
 /**
  * @module ol/control/ScaleLine
  */
-import {inherits} from '../util.js';
 import {getChangeEventType} from '../Object.js';
 import {assert} from '../asserts.js';
 import Control from '../control/Control.js';
@@ -32,7 +31,7 @@ export const Units = {
 
 /**
  * @const
- * @type {Array.<number>}
+ * @type {Array<number>}
  */
 const LEADING_DIGITS = [1, 2, 5];
 
@@ -43,7 +42,7 @@ const LEADING_DIGITS = [1, 2, 5];
  * @property {number} [minWidth=64] Minimum width in pixels.
  * @property {function(module:ol/MapEvent)} [render] Function called when the control
  * should be re-rendered. This is called in a `requestAnimationFrame` callback.
- * @property {Element|string} [target] Specify a target if you want the control
+ * @property {HTMLElement|string} [target] Specify a target if you want the control
  * to be rendered outside of the map's viewport.
  * @property {module:ol/control/ScaleLine~Units|string} [units='metric'] Units.
  */
@@ -59,31 +58,34 @@ const LEADING_DIGITS = [1, 2, 5];
  * By default the scale line will show in the bottom left portion of the map,
  * but this can be changed by using the css selector `.ol-scale-line`.
  *
- * @constructor
- * @extends {module:ol/control/Control}
- * @param {module:ol/control/ScaleLine~Options=} opt_options Scale line options.
  * @api
  */
-const ScaleLine = function(opt_options) {
+class ScaleLine extends Control {
+
+  /**
+   * @param {module:ol/control/ScaleLine~Options=} opt_options Scale line options.
+   */
+  constructor(opt_options) {
 
     const options = opt_options ? opt_options : {};
 
     const className = options.className !== undefined ? options.className : 'ol-scale-line';
 
-  /**
-   * @private
-   * @type {HTMLElement}
-   */
-  this.innerElement_ = document.createElement('DIV');
-  this.innerElement_.className = className + '-inner';
+    super({
+      element: document.createElement('div'),
+      render: options.render || render,
+      target: options.target
+    });
 
     /**
      * @private
      * @type {HTMLElement}
      */
-  this.element_ = document.createElement('DIV');
-  this.element_.className = className + ' ' + CLASS_UNSELECTABLE;
-  this.element_.appendChild(this.innerElement_);
+    this.innerElement_ = document.createElement('div');
+    this.innerElement_.className = className + '-inner';
+
+    this.element.className = className + ' ' + CLASS_UNSELECTABLE;
+    this.element.appendChild(this.innerElement_);
 
     /**
      * @private
@@ -115,12 +117,6 @@ const ScaleLine = function(opt_options) {
      */
     this.renderedHTML_ = '';
 
-  Control.call(this, {
-    element: this.element_,
-    render: options.render || render,
-    target: options.target
-  });
-
     listen(
       this, getChangeEventType(UNITS_PROP),
       this.handleUnitsChanged_, this);
@@ -128,70 +124,47 @@ const ScaleLine = function(opt_options) {
     this.setUnits(/** @type {module:ol/control/ScaleLine~Units} */ (options.units) ||
         Units.METRIC);
 
-};
+  }
 
-inherits(ScaleLine, Control);
-
-
-/**
+  /**
    * Return the units to use in the scale line.
    * @return {module:ol/control/ScaleLine~Units|undefined} The units
    * to use in the scale line.
    * @observable
    * @api
    */
-ScaleLine.prototype.getUnits = function() {
+  getUnits() {
     return (
       /** @type {module:ol/control/ScaleLine~Units|undefined} */ (this.get(UNITS_PROP))
     );
-};
-
-
-/**
- * Update the scale line element.
- * @param {module:ol/MapEvent} mapEvent Map event.
- * @this {module:ol/control/ScaleLine}
- * @api
- */
-export function render(mapEvent) {
-  const frameState = mapEvent.frameState;
-  if (!frameState) {
-    this.viewState_ = null;
-  } else {
-    this.viewState_ = frameState.viewState;
   }
-  this.updateElement_();
-}
 
-
-/**
+  /**
    * @private
    */
-ScaleLine.prototype.handleUnitsChanged_ = function() {
+  handleUnitsChanged_() {
     this.updateElement_();
-};
+  }
 
-
-/**
+  /**
    * Set the units to use in the scale line.
    * @param {module:ol/control/ScaleLine~Units} units The units to use in the scale line.
    * @observable
    * @api
    */
-ScaleLine.prototype.setUnits = function(units) {
+  setUnits(units) {
     this.set(UNITS_PROP, units);
-};
+  }
 
-
-/**
+  /**
    * @private
    */
-ScaleLine.prototype.updateElement_ = function() {
+  updateElement_() {
     const viewState = this.viewState_;
 
     if (!viewState) {
       if (this.renderedVisible_) {
-      this.element_.style.display = 'none';
+        this.element.style.display = 'none';
         this.renderedVisible_ = false;
       }
       return;
@@ -278,7 +251,7 @@ ScaleLine.prototype.updateElement_ = function() {
           Math.pow(10, Math.floor(i / 3));
       width = Math.round(count / pointResolution);
       if (isNaN(width)) {
-      this.element_.style.display = 'none';
+        this.element.style.display = 'none';
         this.renderedVisible_ = false;
         return;
       } else if (width >= this.minWidth_) {
@@ -299,10 +272,29 @@ ScaleLine.prototype.updateElement_ = function() {
     }
 
     if (!this.renderedVisible_) {
-    this.element_.style.display = '';
+      this.element.style.display = '';
       this.renderedVisible_ = true;
     }
 
-};
+  }
+}
+
+
+/**
+ * Update the scale line element.
+ * @param {module:ol/MapEvent} mapEvent Map event.
+ * @this {module:ol/control/ScaleLine}
+ * @api
+ */
+export function render(mapEvent) {
+  const frameState = mapEvent.frameState;
+  if (!frameState) {
+    this.viewState_ = null;
+  } else {
+    this.viewState_ = frameState.viewState;
+  }
+  this.updateElement_();
+}
+
 
 export default ScaleLine;

src/ol/control/Zoom.js

@@ -1,7 +1,6 @@
 /**
  * @module ol/control/Zoom
  */
-import {inherits} from '../util.js';
 import {listen} from '../events.js';
 import EventType from '../events/EventType.js';
 import Control from '../control/Control.js';
@@ -13,14 +12,14 @@ import {easeOut} from '../easing.js';
  * @typedef {Object} Options
  * @property {number} [duration=250] Animation duration in milliseconds.
  * @property {string} [className='ol-zoom'] CSS class name.
- * @property {string|Element} [zoomInLabel='+'] Text label to use for the zoom-in
+ * @property {string|HTMLElement} [zoomInLabel='+'] Text label to use for the zoom-in
  * button. Instead of text, also an element (e.g. a `span` element) can be used.
- * @property {string|Element} [zoomOutLabel='-'] Text label to use for the zoom-out button.
+ * @property {string|HTMLElement} [zoomOutLabel='-'] Text label to use for the zoom-out button.
  * Instead of text, also an element (e.g. a `span` element) can be used.
  * @property {string} [zoomInTipLabel='Zoom in'] Text label to use for the button tip.
  * @property {string} [zoomOutTipLabel='Zoom out'] Text label to use for the button tip.
  * @property {number} [delta=1] The zoom delta applied on each click.
- * @property {Element|string} [target] Specify a target if you want the control to be
+ * @property {HTMLElement|string} [target] Specify a target if you want the control to be
  * rendered outside of the map's viewport.
  */
 
@@ -31,15 +30,22 @@ import {easeOut} from '../easing.js';
  * This control is one of the default controls of a map. To style this control
  * use css selectors `.ol-zoom-in` and `.ol-zoom-out`.
  *
- * @constructor
- * @extends {module:ol/control/Control}
- * @param {module:ol/control/Zoom~Options=} opt_options Zoom options.
  * @api
  */
-const Zoom = function(opt_options) {
+class Zoom extends Control {
+
+  /**
+   * @param {module:ol/control/Zoom~Options=} opt_options Zoom options.
+   */
+  constructor(opt_options) {
 
     const options = opt_options ? opt_options : {};
 
+    super({
+      element: document.createElement('div'),
+      target: options.target
+    });
+
     const className = options.className !== undefined ? options.className : 'ol-zoom';
 
     const delta = options.delta !== undefined ? options.delta : 1;
@@ -60,8 +66,7 @@ const Zoom = function(opt_options) {
       typeof zoomInLabel === 'string' ? document.createTextNode(zoomInLabel) : zoomInLabel
     );
 
-  listen(inElement, EventType.CLICK,
-    Zoom.prototype.handleClick_.bind(this, delta));
+    listen(inElement, EventType.CLICK, this.handleClick_.bind(this, delta));
 
     const outElement = document.createElement('button');
     outElement.className = className + '-out';
@@ -71,47 +76,37 @@ const Zoom = function(opt_options) {
       typeof zoomOutLabel === 'string' ? document.createTextNode(zoomOutLabel) : zoomOutLabel
     );
 
-  listen(outElement, EventType.CLICK,
-    Zoom.prototype.handleClick_.bind(this, -delta));
+    listen(outElement, EventType.CLICK, this.handleClick_.bind(this, -delta));
 
     const cssClasses = className + ' ' + CLASS_UNSELECTABLE + ' ' + CLASS_CONTROL;
-  const element = document.createElement('div');
+    const element = this.element;
     element.className = cssClasses;
     element.appendChild(inElement);
     element.appendChild(outElement);
 
-  Control.call(this, {
-    element: element,
-    target: options.target
-  });
-
     /**
      * @type {number}
      * @private
      */
     this.duration_ = options.duration !== undefined ? options.duration : 250;
 
-};
+  }
 
-inherits(Zoom, Control);
-
-
-/**
+  /**
    * @param {number} delta Zoom delta.
    * @param {MouseEvent} event The event to handle
    * @private
    */
-Zoom.prototype.handleClick_ = function(delta, event) {
+  handleClick_(delta, event) {
     event.preventDefault();
     this.zoomByDelta_(delta);
-};
+  }
 
-
-/**
+  /**
    * @param {number} delta Zoom delta.
    * @private
    */
-Zoom.prototype.zoomByDelta_ = function(delta) {
+  zoomByDelta_(delta) {
     const map = this.getMap();
     const view = map.getView();
     if (!view) {
@@ -135,5 +130,8 @@ Zoom.prototype.zoomByDelta_ = function(delta) {
         view.setResolution(newResolution);
       }
     }
-};
+  }
+}
+
+
 export default Zoom;

src/ol/control/ZoomSlider.js

@@ -1,7 +1,6 @@
 /**
  * @module ol/control/ZoomSlider
  */
-import {inherits} from '../util.js';
 import ViewHint from '../ViewHint.js';
 import Control from '../control/Control.js';
 import {CLASS_CONTROL, CLASS_UNSELECTABLE} from '../css.js';
@@ -42,15 +41,22 @@ const Direction = {
  *
  *     map.addControl(new ZoomSlider());
  *
- * @constructor
- * @extends {module:ol/control/Control}
- * @param {module:ol/control/ZoomSlider~Options=} opt_options Zoom slider options.
  * @api
  */
-const ZoomSlider = function(opt_options) {
+class ZoomSlider extends Control {
+
+  /**
+   * @param {module:ol/control/ZoomSlider~Options=} opt_options Zoom slider options.
+   */
+  constructor(opt_options) {
 
     const options = opt_options ? opt_options : {};
 
+    super({
+      element: document.createElement('div'),
+      render: options.render || render
+    });
+
     /**
      * Will hold the current resolution of the view.
      *
@@ -123,7 +129,7 @@ const ZoomSlider = function(opt_options) {
     const thumbElement = document.createElement('button');
     thumbElement.setAttribute('type', 'button');
     thumbElement.className = className + '-thumb ' + CLASS_UNSELECTABLE;
-  const containerElement = document.createElement('div');
+    const containerElement = this.element;
     containerElement.className = className + ' ' + CLASS_UNSELECTABLE + ' ' + CLASS_CONTROL;
     containerElement.appendChild(thumbElement);
     /**
@@ -141,50 +147,40 @@ const ZoomSlider = function(opt_options) {
 
     listen(containerElement, EventType.CLICK, this.handleContainerClick_, this);
     listen(thumbElement, EventType.CLICK, stopPropagation);
+  }
 
-  Control.call(this, {
-    element: containerElement,
-    render: options.render || render
-  });
-};
-
-inherits(ZoomSlider, Control);
-
-
-/**
+  /**
    * @inheritDoc
    */
-ZoomSlider.prototype.disposeInternal = function() {
+  disposeInternal() {
     this.dragger_.dispose();
-  Control.prototype.disposeInternal.call(this);
-};
+    super.disposeInternal();
+  }
 
-
-/**
+  /**
    * @inheritDoc
    */
-ZoomSlider.prototype.setMap = function(map) {
-  Control.prototype.setMap.call(this, map);
+  setMap(map) {
+    super.setMap(map);
     if (map) {
       map.render();
     }
-};
+  }
 
-
-/**
+  /**
    * Initializes the slider element. This will determine and set this controls
    * direction_ and also constrain the dragging of the thumb to always be within
    * the bounds of the container.
    *
    * @private
    */
-ZoomSlider.prototype.initSlider_ = function() {
+  initSlider_() {
     const container = this.element;
     const containerSize = {
       width: container.offsetWidth, height: container.offsetHeight
     };
 
-  const thumb = container.firstElementChild;
+    const thumb = /** @type {HTMLElement} */ (container.firstElementChild);
     const computedStyle = getComputedStyle(thumb);
     const thumbWidth = thumb.offsetWidth +
         parseFloat(computedStyle['marginRight']) +
@@ -202,7 +198,148 @@ ZoomSlider.prototype.initSlider_ = function() {
       this.heightLimit_ = containerSize.height - thumbHeight;
     }
     this.sliderInitialized_ = true;
-};
+  }
+
+  /**
+   * @param {MouseEvent} event The browser event to handle.
+   * @private
+   */
+  handleContainerClick_(event) {
+    const view = this.getMap().getView();
+
+    const relativePosition = this.getRelativePosition_(
+      event.offsetX - this.thumbSize_[0] / 2,
+      event.offsetY - this.thumbSize_[1] / 2);
+
+    const resolution = this.getResolutionForPosition_(relativePosition);
+
+    view.animate({
+      resolution: view.constrainResolution(resolution),
+      duration: this.duration_,
+      easing: easeOut
+    });
+  }
+
+  /**
+   * Handle dragger start events.
+   * @param {module:ol/pointer/PointerEvent} event The drag event.
+   * @private
+   */
+  handleDraggerStart_(event) {
+    if (!this.dragging_ && event.originalEvent.target === this.element.firstElementChild) {
+      this.getMap().getView().setHint(ViewHint.INTERACTING, 1);
+      this.previousX_ = event.clientX;
+      this.previousY_ = event.clientY;
+      this.dragging_ = true;
+    }
+  }
+
+  /**
+   * Handle dragger drag events.
+   *
+   * @param {module:ol/pointer/PointerEvent|Event} event The drag event.
+   * @private
+   */
+  handleDraggerDrag_(event) {
+    if (this.dragging_) {
+      const element = /** @type {HTMLElement} */ (this.element.firstElementChild);
+      const deltaX = event.clientX - this.previousX_ + parseInt(element.style.left, 10);
+      const deltaY = event.clientY - this.previousY_ + parseInt(element.style.top, 10);
+      const relativePosition = this.getRelativePosition_(deltaX, deltaY);
+      this.currentResolution_ = this.getResolutionForPosition_(relativePosition);
+      this.getMap().getView().setResolution(this.currentResolution_);
+      this.setThumbPosition_(this.currentResolution_);
+      this.previousX_ = event.clientX;
+      this.previousY_ = event.clientY;
+    }
+  }
+
+  /**
+   * Handle dragger end events.
+   * @param {module:ol/pointer/PointerEvent|Event} event The drag event.
+   * @private
+   */
+  handleDraggerEnd_(event) {
+    if (this.dragging_) {
+      const view = this.getMap().getView();
+      view.setHint(ViewHint.INTERACTING, -1);
+
+      view.animate({
+        resolution: view.constrainResolution(this.currentResolution_),
+        duration: this.duration_,
+        easing: easeOut
+      });
+
+      this.dragging_ = false;
+      this.previousX_ = undefined;
+      this.previousY_ = undefined;
+    }
+  }
+
+  /**
+   * Positions the thumb inside its container according to the given resolution.
+   *
+   * @param {number} res The res.
+   * @private
+   */
+  setThumbPosition_(res) {
+    const position = this.getPositionForResolution_(res);
+    const thumb = /** @type {HTMLElement} */ (this.element.firstElementChild);
+
+    if (this.direction_ == Direction.HORIZONTAL) {
+      thumb.style.left = this.widthLimit_ * position + 'px';
+    } else {
+      thumb.style.top = this.heightLimit_ * position + 'px';
+    }
+  }
+
+  /**
+   * Calculates the relative position of the thumb given x and y offsets.  The
+   * relative position scales from 0 to 1.  The x and y offsets are assumed to be
+   * in pixel units within the dragger limits.
+   *
+   * @param {number} x Pixel position relative to the left of the slider.
+   * @param {number} y Pixel position relative to the top of the slider.
+   * @return {number} The relative position of the thumb.
+   * @private
+   */
+  getRelativePosition_(x, y) {
+    let amount;
+    if (this.direction_ === Direction.HORIZONTAL) {
+      amount = x / this.widthLimit_;
+    } else {
+      amount = y / this.heightLimit_;
+    }
+    return clamp(amount, 0, 1);
+  }
+
+  /**
+   * Calculates the corresponding resolution of the thumb given its relative
+   * position (where 0 is the minimum and 1 is the maximum).
+   *
+   * @param {number} position The relative position of the thumb.
+   * @return {number} The corresponding resolution.
+   * @private
+   */
+  getResolutionForPosition_(position) {
+    const fn = this.getMap().getView().getResolutionForValueFunction();
+    return fn(1 - position);
+  }
+
+  /**
+   * Determines the relative position of the slider for the given resolution.  A
+   * relative position of 0 corresponds to the minimum view resolution.  A
+   * relative position of 1 corresponds to the maximum view resolution.
+   *
+   * @param {number} res The resolution.
+   * @return {number} The relative position value (between 0 and 1).
+   * @private
+   */
+  getPositionForResolution_(res) {
+    const fn = this.getMap().getView().getValueForResolutionFunction();
+    return 1 - fn(res);
+  }
+}
 
 
 /**
@@ -226,151 +363,4 @@ export function render(mapEvent) {
 }
 
 
-/**
- * @param {MouseEvent} event The browser event to handle.
- * @private
- */
-ZoomSlider.prototype.handleContainerClick_ = function(event) {
-  const view = this.getMap().getView();
-
-  const relativePosition = this.getRelativePosition_(
-    event.offsetX - this.thumbSize_[0] / 2,
-    event.offsetY - this.thumbSize_[1] / 2);
-
-  const resolution = this.getResolutionForPosition_(relativePosition);
-
-  view.animate({
-    resolution: view.constrainResolution(resolution),
-    duration: this.duration_,
-    easing: easeOut
-  });
-};
-
-
-/**
- * Handle dragger start events.
- * @param {module:ol/pointer/PointerEvent} event The drag event.
- * @private
- */
-ZoomSlider.prototype.handleDraggerStart_ = function(event) {
-  if (!this.dragging_ && event.originalEvent.target === this.element.firstElementChild) {
-    this.getMap().getView().setHint(ViewHint.INTERACTING, 1);
-    this.previousX_ = event.clientX;
-    this.previousY_ = event.clientY;
-    this.dragging_ = true;
-  }
-};
-
-
-/**
- * Handle dragger drag events.
- *
- * @param {module:ol/pointer/PointerEvent|Event} event The drag event.
- * @private
- */
-ZoomSlider.prototype.handleDraggerDrag_ = function(event) {
-  if (this.dragging_) {
-    const element = this.element.firstElementChild;
-    const deltaX = event.clientX - this.previousX_ + parseInt(element.style.left, 10);
-    const deltaY = event.clientY - this.previousY_ + parseInt(element.style.top, 10);
-    const relativePosition = this.getRelativePosition_(deltaX, deltaY);
-    this.currentResolution_ = this.getResolutionForPosition_(relativePosition);
-    this.getMap().getView().setResolution(this.currentResolution_);
-    this.setThumbPosition_(this.currentResolution_);
-    this.previousX_ = event.clientX;
-    this.previousY_ = event.clientY;
-  }
-};
-
-
-/**
- * Handle dragger end events.
- * @param {module:ol/pointer/PointerEvent|Event} event The drag event.
- * @private
- */
-ZoomSlider.prototype.handleDraggerEnd_ = function(event) {
-  if (this.dragging_) {
-    const view = this.getMap().getView();
-    view.setHint(ViewHint.INTERACTING, -1);
-
-    view.animate({
-      resolution: view.constrainResolution(this.currentResolution_),
-      duration: this.duration_,
-      easing: easeOut
-    });
-
-    this.dragging_ = false;
-    this.previousX_ = undefined;
-    this.previousY_ = undefined;
-  }
-};
-
-
-/**
- * Positions the thumb inside its container according to the given resolution.
- *
- * @param {number} res The res.
- * @private
- */
-ZoomSlider.prototype.setThumbPosition_ = function(res) {
-  const position = this.getPositionForResolution_(res);
-  const thumb = this.element.firstElementChild;
-
-  if (this.direction_ == Direction.HORIZONTAL) {
-    thumb.style.left = this.widthLimit_ * position + 'px';
-  } else {
-    thumb.style.top = this.heightLimit_ * position + 'px';
-  }
-};
-
-
-/**
- * Calculates the relative position of the thumb given x and y offsets.  The
- * relative position scales from 0 to 1.  The x and y offsets are assumed to be
- * in pixel units within the dragger limits.
- *
- * @param {number} x Pixel position relative to the left of the slider.
- * @param {number} y Pixel position relative to the top of the slider.
- * @return {number} The relative position of the thumb.
- * @private
- */
-ZoomSlider.prototype.getRelativePosition_ = function(x, y) {
-  let amount;
-  if (this.direction_ === Direction.HORIZONTAL) {
-    amount = x / this.widthLimit_;
-  } else {
-    amount = y / this.heightLimit_;
-  }
-  return clamp(amount, 0, 1);
-};
-
-
-/**
- * Calculates the corresponding resolution of the thumb given its relative
- * position (where 0 is the minimum and 1 is the maximum).
- *
- * @param {number} position The relative position of the thumb.
- * @return {number} The corresponding resolution.
- * @private
- */
-ZoomSlider.prototype.getResolutionForPosition_ = function(position) {
-  const fn = this.getMap().getView().getResolutionForValueFunction();
-  return fn(1 - position);
-};
-
-
-/**
- * Determines the relative position of the slider for the given resolution.  A
- * relative position of 0 corresponds to the minimum view resolution.  A
- * relative position of 1 corresponds to the maximum view resolution.
- *
- * @param {number} res The resolution.
- * @return {number} The relative position value (between 0 and 1).
- * @private
- */
-ZoomSlider.prototype.getPositionForResolution_ = function(res) {
-  const fn = this.getMap().getView().getValueForResolutionFunction();
-  return 1 - fn(res);
-};
-
 export default ZoomSlider;

src/ol/control/ZoomToExtent.js

@@ -1,7 +1,6 @@
 /**
  * @module ol/control/ZoomToExtent
  */
-import {inherits} from '../util.js';
 import {listen} from '../events.js';
 import EventType from '../events/EventType.js';
 import Control from '../control/Control.js';
@@ -11,9 +10,9 @@ import {CLASS_CONTROL, CLASS_UNSELECTABLE} from '../css.js';
 /**
  * @typedef {Object} Options
  * @property {string} [className='ol-zoom-extent'] Class name.
- * @property {Element|string} [target] Specify a target if you want the control
+ * @property {HTMLElement|string} [target] Specify a target if you want the control
  * to be rendered outside of the map's viewport.
- * @property {string|Element} [label='E'] Text label to use for the button.
+ * @property {string|HTMLElement} [label='E'] Text label to use for the button.
  * Instead of text, also an element (e.g. a `span` element) can be used.
  * @property {string} [tipLabel='Fit to extent'] Text label to use for the button tip.
  * @property {module:ol/extent~Extent} [extent] The extent to zoom to. If undefined the validity
@@ -26,14 +25,21 @@ import {CLASS_CONTROL, CLASS_UNSELECTABLE} from '../css.js';
  * A button control which, when pressed, changes the map view to a specific
  * extent. To style this control use the css selector `.ol-zoom-extent`.
  *
- * @constructor
- * @extends {module:ol/control/Control}
- * @param {module:ol/control/ZoomToExtent~Options=} opt_options Options.
  * @api
  */
-const ZoomToExtent = function(opt_options) {
+class ZoomToExtent extends Control {
+
+  /**
+   * @param {module:ol/control/ZoomToExtent~Options=} opt_options Options.
+   */
+  constructor(opt_options) {
     const options = opt_options ? opt_options : {};
 
+    super({
+      element: document.createElement('div'),
+      target: options.target
+    });
+
     /**
      * @type {module:ol/extent~Extent}
      * @protected
@@ -54,36 +60,29 @@ const ZoomToExtent = function(opt_options) {
     listen(button, EventType.CLICK, this.handleClick_, this);
 
     const cssClasses = className + ' ' + CLASS_UNSELECTABLE + ' ' + CLASS_CONTROL;
-  const element = document.createElement('div');
+    const element = this.element;
     element.className = cssClasses;
     element.appendChild(button);
+  }
 
-  Control.call(this, {
-    element: element,
-    target: options.target
-  });
-};
-
-inherits(ZoomToExtent, Control);
-
-
-/**
+  /**
    * @param {MouseEvent} event The event to handle
    * @private
    */
-ZoomToExtent.prototype.handleClick_ = function(event) {
+  handleClick_(event) {
     event.preventDefault();
     this.handleZoomToExtent();
-};
+  }
 
-
-/**
+  /**
    * @protected
    */
-ZoomToExtent.prototype.handleZoomToExtent = function() {
+  handleZoomToExtent() {
     const map = this.getMap();
     const view = map.getView();
     const extent = !this.extent ? view.getProjection().getExtent() : this.extent;
     view.fit(extent);
-};
+  }
+}
+
 export default ZoomToExtent;

src/ol/control/util.js

@@ -34,7 +34,7 @@ import Zoom from './Zoom.js';
  *
  * @param {module:ol/control/util~DefaultsOptions=} opt_options
  * Defaults options.
- * @return {module:ol/Collection.<module:ol/control/Control>}
+ * @return {module:ol/Collection<module:ol/control/Control>}
  * Controls.
  * @function module:ol/control.defaults
  * @api

src/ol/coordinate.js

@@ -7,7 +7,7 @@ import {padNumber} from './string.js';
 
 /**
  * An array of numbers representing an xy coordinate. Example: `[16, 48]`.
- * @typedef {Array.<number>} Coordinate
+ * @typedef {Array<number>} Coordinate
  * @api
  */
 
@@ -82,7 +82,7 @@ export function closestOnCircle(coordinate, circle) {
  * is outside the segment.
  *
  * @param {module:ol/coordinate~Coordinate} coordinate The coordinate.
- * @param {Array.<module:ol/coordinate~Coordinate>} segment The two coordinates
+ * @param {Array<module:ol/coordinate~Coordinate>} segment The two coordinates
  * of the segment.
  * @return {module:ol/coordinate~Coordinate} The foot of the perpendicular of
  * the coordinate to the segment.
@@ -328,7 +328,7 @@ export function distance(coord1, coord2) {
  * Calculate the squared distance from a coordinate to a line segment.
  *
  * @param {module:ol/coordinate~Coordinate} coordinate Coordinate of the point.
- * @param {Array.<module:ol/coordinate~Coordinate>} segment Line segment (2
+ * @param {Array<module:ol/coordinate~Coordinate>} segment Line segment (2
  * coordinates).
  * @return {number} Squared distance from the point to the line segment.
  */

src/ol/css.js

@@ -62,7 +62,7 @@ export const CLASS_COLLAPSED = 'ol-collapsed';
  * Get the list of font families from a font spec.  Note that this doesn't work
  * for font families that have commas in them.
  * @param {string} The CSS font property.
- * @return {Object.<string>} The font families (or null if the input spec is invalid).
+ * @return {Object<string>} The font families (or null if the input spec is invalid).
  */
 export const getFontFamilies = (function() {
   let style;

src/ol/dom.js

@@ -10,7 +10,7 @@
  * @return {CanvasRenderingContext2D} The context.
  */
 export function createCanvasContext2D(opt_width, opt_height) {
-  const canvas = /** @type {HTMLCanvasElement} */ (document.createElement('CANVAS'));
+  const canvas = /** @type {HTMLCanvasElement} */ (document.createElement('canvas'));
   if (opt_width) {
     canvas.width = opt_width;
   }

src/ol/events.js

@@ -12,7 +12,7 @@ import {clear} from './obj.js';
  * @property {boolean} callOnce
  * @property {number} [deleteIndex]
  * @property {module:ol/events~ListenerFunction} listener
- * @property {EventTarget|module:ol/events/EventTarget} target
+ * @property {module:ol/events/Target~EventTargetLike} target
  * @property {string} type
  * @api
  */
@@ -73,9 +73,9 @@ export function findListener(listeners, listener, opt_this, opt_setDeleteIndex)
 
 
 /**
- * @param {module:ol/events/EventTarget~EventTargetLike} target Target.
+ * @param {module:ol/events/Target~EventTargetLike} target Target.
  * @param {string} type Type.
- * @return {Array.<module:ol/events~EventsKey>|undefined} Listeners.
+ * @return {Array<module:ol/events~EventsKey>|undefined} Listeners.
  */
 export function getListeners(target, type) {
   const listenerMap = target.ol_lm;
@@ -86,8 +86,8 @@ export function getListeners(target, type) {
 /**
  * Get the lookup of listeners.  If one does not exist on the target, it is
  * created.
- * @param {module:ol/events/EventTarget~EventTargetLike} target Target.
- * @return {!Object.<string, Array.<module:ol/events~EventsKey>>} Map of
+ * @param {module:ol/events/Target~EventTargetLike} target Target.
+ * @return {!Object<string, Array<module:ol/events~EventsKey>>} Map of
  *     listeners by event type.
  */
 function getListenerMap(target) {
@@ -103,7 +103,7 @@ function getListenerMap(target) {
  * Clean up all listener objects of the given type.  All properties on the
  * listener objects will be removed, and if no listeners remain in the listener
  * map, it will be removed from the target.
- * @param {module:ol/events/EventTarget~EventTargetLike} target Target.
+ * @param {module:ol/events/Target~EventTargetLike} target Target.
  * @param {string} type Type.
  */
 function removeListeners(target, type) {
@@ -127,12 +127,12 @@ function removeListeners(target, type) {
 
 /**
  * Registers an event listener on an event target. Inspired by
- * {@link https://google.github.io/closure-library/api/source/closure/goog/events/events.js.src.html}
+ * https://google.github.io/closure-library/api/source/closure/goog/events/events.js.src.html
  *
  * This function efficiently binds a `listener` to a `this` object, and returns
  * a key for use with {@link module:ol/events~unlistenByKey}.
  *
- * @param {module:ol/events/EventTarget~EventTargetLike} target Event target.
+ * @param {module:ol/events/Target~EventTargetLike} target Event target.
  * @param {string} type Event type.
  * @param {module:ol/events~ListenerFunction} listener Listener.
  * @param {Object=} opt_this Object referenced by the `this` keyword in the
@@ -170,7 +170,7 @@ export function listen(target, type, listener, opt_this, opt_once) {
 
 /**
  * Registers a one-off event listener on an event target. Inspired by
- * {@link https://google.github.io/closure-library/api/source/closure/goog/events/events.js.src.html}
+ * https://google.github.io/closure-library/api/source/closure/goog/events/events.js.src.html
  *
  * This function efficiently binds a `listener` as self-unregistering listener
  * to a `this` object, and returns a key for use with
@@ -181,7 +181,7 @@ export function listen(target, type, listener, opt_this, opt_once) {
  * function, the self-unregistering listener will be turned into a permanent
  * listener.
  *
- * @param {module:ol/events/EventTarget~EventTargetLike} target Event target.
+ * @param {module:ol/events/Target~EventTargetLike} target Event target.
  * @param {string} type Event type.
  * @param {module:ol/events~ListenerFunction} listener Listener.
  * @param {Object=} opt_this Object referenced by the `this` keyword in the
@@ -195,12 +195,12 @@ export function listenOnce(target, type, listener, opt_this) {
 
 /**
  * Unregisters an event listener on an event target. Inspired by
- * {@link https://google.github.io/closure-library/api/source/closure/goog/events/events.js.src.html}
+ * https://google.github.io/closure-library/api/source/closure/goog/events/events.js.src.html
  *
  * To return a listener, this function needs to be called with the exact same
  * arguments that were used for a previous {@link module:ol/events~listen} call.
  *
- * @param {module:ol/events/EventTarget~EventTargetLike} target Event target.
+ * @param {module:ol/events/Target~EventTargetLike} target Event target.
  * @param {string} type Event type.
  * @param {module:ol/events~ListenerFunction} listener Listener.
  * @param {Object=} opt_this Object referenced by the `this` keyword in the
@@ -219,7 +219,7 @@ export function unlisten(target, type, listener, opt_this) {
 
 /**
  * Unregisters event listeners on an event target. Inspired by
- * {@link https://google.github.io/closure-library/api/source/closure/goog/events/events.js.src.html}
+ * https://google.github.io/closure-library/api/source/closure/goog/events/events.js.src.html
  *
  * The argument passed to this function is the key returned from
  * {@link module:ol/events~listen} or {@link module:ol/events~listenOnce}.
@@ -246,9 +246,9 @@ export function unlistenByKey(key) {
 
 /**
  * Unregisters all event listeners on an event target. Inspired by
- * {@link https://google.github.io/closure-library/api/source/closure/goog/events/events.js.src.html}
+ * https://google.github.io/closure-library/api/source/closure/goog/events/events.js.src.html
  *
- * @param {module:ol/events/EventTarget~EventTargetLike} target Target.
+ * @param {module:ol/events/Target~EventTargetLike} target Target.
  */
 export function unlistenAll(target) {
   const listenerMap = getListenerMap(target);

src/ol/events/Event.js

@@ -1,20 +1,23 @@
 /**
  * @module ol/events/Event
  */
+
 /**
  * @classdesc
  * Stripped down implementation of the W3C DOM Level 2 Event interface.
- * @see {@link https://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-interface}
+ * See https://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-interface.
  *
  * This implementation only provides `type` and `target` properties, and
  * `stopPropagation` and `preventDefault` methods. It is meant as base class
  * for higher level events defined in the library, and works with
- * {@link module:ol/events/EventTarget~EventTarget}.
- *
- * @constructor
+ * {@link module:ol/events/Target~Target}.
+ */
+class Event {
+
+  /**
    * @param {string} type Type.
    */
-const Event = function(type) {
+  constructor(type) {
 
     /**
      * @type {boolean}
@@ -34,25 +37,27 @@ const Event = function(type) {
      * @api
      */
     this.target = null;
-
-};
-
-
-/**
- * Stop event propagation.
- * @function
- * @api
- */
-Event.prototype.preventDefault =
+  }
 
   /**
    * Stop event propagation.
    * @function
    * @api
    */
-  Event.prototype.stopPropagation = function() {
+  preventDefault() {
     this.propagationStopped = true;
-  };
+  }
+
+  /**
+   * Stop event propagation.
+   * @function
+   * @api
+   */
+  stopPropagation() {
+    this.propagationStopped = true;
+  }
+
+}
 
 
 /**

src/ol/events/EventTarget.js

@@ -1,167 +0,0 @@
-/**
- * @module ol/events/EventTarget
- */
-import {inherits} from '../util.js';
-import Disposable from '../Disposable.js';
-import {unlistenAll} from '../events.js';
-import {UNDEFINED} from '../functions.js';
-import Event from '../events/Event.js';
-
-
-/**
- * @typedef {EventTarget|module:ol/events/EventTarget} EventTargetLike
- */
-
-
-/**
- * @classdesc
- * A simplified implementation of the W3C DOM Level 2 EventTarget interface.
- * @see {@link https://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-EventTarget}
- *
- * There are two important simplifications compared to the specification:
- *
- * 1. The handling of `useCapture` in `addEventListener` and
- *    `removeEventListener`. There is no real capture model.
- * 2. The handling of `stopPropagation` and `preventDefault` on `dispatchEvent`.
- *    There is no event target hierarchy. When a listener calls
- *    `stopPropagation` or `preventDefault` on an event object, it means that no
- *    more listeners after this one will be called. Same as when the listener
- *    returns false.
- *
- * @constructor
- * @extends {module:ol/Disposable}
- */
-const EventTarget = function() {
-
-  Disposable.call(this);
-
-  /**
-   * @private
-   * @type {!Object.<string, number>}
-   */
-  this.pendingRemovals_ = {};
-
-  /**
-   * @private
-   * @type {!Object.<string, number>}
-   */
-  this.dispatching_ = {};
-
-  /**
-   * @private
-   * @type {!Object.<string, Array.<module:ol/events~ListenerFunction>>}
-   */
-  this.listeners_ = {};
-
-};
-
-inherits(EventTarget, Disposable);
-
-
-/**
- * @param {string} type Type.
- * @param {module:ol/events~ListenerFunction} listener Listener.
- */
-EventTarget.prototype.addEventListener = function(type, listener) {
-  let listeners = this.listeners_[type];
-  if (!listeners) {
-    listeners = this.listeners_[type] = [];
-  }
-  if (listeners.indexOf(listener) === -1) {
-    listeners.push(listener);
-  }
-};
-
-
-/**
- * @param {{type: string,
- *     target: (EventTarget|module:ol/events/EventTarget|undefined)}|module:ol/events/Event|
- *     string} event Event or event type.
- * @return {boolean|undefined} `false` if anyone called preventDefault on the
- *     event object or if any of the listeners returned false.
- */
-EventTarget.prototype.dispatchEvent = function(event) {
-  const evt = typeof event === 'string' ? new Event(event) : event;
-  const type = evt.type;
-  evt.target = this;
-  const listeners = this.listeners_[type];
-  let propagate;
-  if (listeners) {
-    if (!(type in this.dispatching_)) {
-      this.dispatching_[type] = 0;
-      this.pendingRemovals_[type] = 0;
-    }
-    ++this.dispatching_[type];
-    for (let i = 0, ii = listeners.length; i < ii; ++i) {
-      if (listeners[i].call(this, evt) === false || evt.propagationStopped) {
-        propagate = false;
-        break;
-      }
-    }
-    --this.dispatching_[type];
-    if (this.dispatching_[type] === 0) {
-      let pendingRemovals = this.pendingRemovals_[type];
-      delete this.pendingRemovals_[type];
-      while (pendingRemovals--) {
-        this.removeEventListener(type, UNDEFINED);
-      }
-      delete this.dispatching_[type];
-    }
-    return propagate;
-  }
-};
-
-
-/**
- * @inheritDoc
- */
-EventTarget.prototype.disposeInternal = function() {
-  unlistenAll(this);
-};
-
-
-/**
- * Get the listeners for a specified event type. Listeners are returned in the
- * order that they will be called in.
- *
- * @param {string} type Type.
- * @return {Array.<module:ol/events~ListenerFunction>} Listeners.
- */
-EventTarget.prototype.getListeners = function(type) {
-  return this.listeners_[type];
-};
-
-
-/**
- * @param {string=} opt_type Type. If not provided,
- *     `true` will be returned if this EventTarget has any listeners.
- * @return {boolean} Has listeners.
- */
-EventTarget.prototype.hasListener = function(opt_type) {
-  return opt_type ?
-    opt_type in this.listeners_ :
-    Object.keys(this.listeners_).length > 0;
-};
-
-
-/**
- * @param {string} type Type.
- * @param {module:ol/events~ListenerFunction} listener Listener.
- */
-EventTarget.prototype.removeEventListener = function(type, listener) {
-  const listeners = this.listeners_[type];
-  if (listeners) {
-    const index = listeners.indexOf(listener);
-    if (type in this.pendingRemovals_) {
-      // make listener a no-op, and remove later in #dispatchEvent()
-      listeners[index] = UNDEFINED;
-      ++this.pendingRemovals_[type];
-    } else {
-      listeners.splice(index, 1);
-      if (listeners.length === 0) {
-        delete this.listeners_[type];
-      }
-    }
-  }
-};
-export default EventTarget;

src/ol/events/Target.js

@@ -0,0 +1,165 @@
+/**
+ * @module ol/events/Target
+ */
+import Disposable from '../Disposable.js';
+import {unlistenAll} from '../events.js';
+import {VOID} from '../functions.js';
+import Event from '../events/Event.js';
+
+
+/**
+ * @typedef {EventTarget|module:ol/events/Target} EventTargetLike
+ */
+
+
+/**
+ * @classdesc
+ * A simplified implementation of the W3C DOM Level 2 EventTarget interface.
+ * See https://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-EventTarget.
+ *
+ * There are two important simplifications compared to the specification:
+ *
+ * 1. The handling of `useCapture` in `addEventListener` and
+ *    `removeEventListener`. There is no real capture model.
+ * 2. The handling of `stopPropagation` and `preventDefault` on `dispatchEvent`.
+ *    There is no event target hierarchy. When a listener calls
+ *    `stopPropagation` or `preventDefault` on an event object, it means that no
+ *    more listeners after this one will be called. Same as when the listener
+ *    returns false.
+ */
+class Target extends Disposable {
+  constructor() {
+
+    super();
+
+    /**
+     * @private
+     * @type {!Object<string, number>}
+     */
+    this.pendingRemovals_ = {};
+
+    /**
+     * @private
+     * @type {!Object<string, number>}
+     */
+    this.dispatching_ = {};
+
+    /**
+     * @private
+     * @type {!Object<string, Array<module:ol/events~ListenerFunction>>}
+     */
+    this.listeners_ = {};
+
+  }
+
+  /**
+   * @param {string} type Type.
+   * @param {module:ol/events~ListenerFunction} listener Listener.
+   */
+  addEventListener(type, listener) {
+    let listeners = this.listeners_[type];
+    if (!listeners) {
+      listeners = this.listeners_[type] = [];
+    }
+    if (listeners.indexOf(listener) === -1) {
+      listeners.push(listener);
+    }
+  }
+
+  /**
+   * Dispatches an event and calls all listeners listening for events
+   * of this type. The event parameter can either be a string or an
+   * Object with a `type` property.
+   *
+   * @param {{type: string,
+   *     target: (module:ol/events/Target~EventTargetLike|undefined)}|
+   *     module:ol/events/Event|string} event Event object.
+   * @return {boolean|undefined} `false` if anyone called preventDefault on the
+   *     event object or if any of the listeners returned false.
+   * @function
+   * @api
+   */
+  dispatchEvent(event) {
+    const evt = typeof event === 'string' ? new Event(event) : event;
+    const type = evt.type;
+    evt.target = this;
+    const listeners = this.listeners_[type];
+    let propagate;
+    if (listeners) {
+      if (!(type in this.dispatching_)) {
+        this.dispatching_[type] = 0;
+        this.pendingRemovals_[type] = 0;
+      }
+      ++this.dispatching_[type];
+      for (let i = 0, ii = listeners.length; i < ii; ++i) {
+        if (listeners[i].call(this, evt) === false || evt.propagationStopped) {
+          propagate = false;
+          break;
+        }
+      }
+      --this.dispatching_[type];
+      if (this.dispatching_[type] === 0) {
+        let pendingRemovals = this.pendingRemovals_[type];
+        delete this.pendingRemovals_[type];
+        while (pendingRemovals--) {
+          this.removeEventListener(type, VOID);
+        }
+        delete this.dispatching_[type];
+      }
+      return propagate;
+    }
+  }
+
+  /**
+   * @inheritDoc
+   */
+  disposeInternal() {
+    unlistenAll(this);
+  }
+
+  /**
+   * Get the listeners for a specified event type. Listeners are returned in the
+   * order that they will be called in.
+   *
+   * @param {string} type Type.
+   * @return {Array<module:ol/events~ListenerFunction>} Listeners.
+   */
+  getListeners(type) {
+    return this.listeners_[type];
+  }
+
+  /**
+   * @param {string=} opt_type Type. If not provided,
+   *     `true` will be returned if this event target has any listeners.
+   * @return {boolean} Has listeners.
+   */
+  hasListener(opt_type) {
+    return opt_type ?
+      opt_type in this.listeners_ :
+      Object.keys(this.listeners_).length > 0;
+  }
+
+  /**
+   * @param {string} type Type.
+   * @param {module:ol/events~ListenerFunction} listener Listener.
+   */
+  removeEventListener(type, listener) {
+    const listeners = this.listeners_[type];
+    if (listeners) {
+      const index = listeners.indexOf(listener);
+      if (type in this.pendingRemovals_) {
+        // make listener a no-op, and remove later in #dispatchEvent()
+        listeners[index] = VOID;
+        ++this.pendingRemovals_[type];
+      } else {
+        listeners.splice(index, 1);
+        if (listeners.length === 0) {
+          delete this.listeners_[type];
+        }
+      }
+    }
+  }
+}
+
+
+export default Target;

src/ol/events/condition.js

@@ -237,7 +237,7 @@ export const mouseOnly = function(mapBrowserEvent) {
 /**
  * Return `true` if the event originates from a primary pointer in
  * contact with the surface or if the left mouse button is pressed.
- * @see http://www.w3.org/TR/pointerevents/#button-states
+ * See http://www.w3.org/TR/pointerevents/#button-states.
  *
  * @param {module:ol/MapBrowserEvent} mapBrowserEvent Map browser event.
  * @return {boolean} True if the event originates from a primary pointer.

src/ol/extent.js

@@ -8,14 +8,14 @@ import Relationship from './extent/Relationship.js';
 
 /**
  * An array of numbers representing an extent: `[minx, miny, maxx, maxy]`.
- * @typedef {Array.<number>} Extent
+ * @typedef {Array<number>} Extent
  * @api
  */
 
 /**
  * Build an extent that includes all given coordinates.
  *
- * @param {Array.<module:ol/coordinate~Coordinate>} coordinates Coordinates.
+ * @param {Array<module:ol/coordinate~Coordinate>} coordinates Coordinates.
  * @return {module:ol/extent~Extent} Bounding extent.
  * @api
  */
@@ -29,8 +29,8 @@ export function boundingExtent(coordinates) {
 
 
 /**
- * @param {Array.<number>} xs Xs.
- * @param {Array.<number>} ys Ys.
+ * @param {Array<number>} xs Xs.
+ * @param {Array<number>} ys Ys.
  * @param {module:ol/extent~Extent=} opt_extent Destination extent.
  * @private
  * @return {module:ol/extent~Extent} Extent.
@@ -249,7 +249,7 @@ export function createOrUpdateFromCoordinate(coordinate, opt_extent) {
 
 
 /**
- * @param {Array.<module:ol/coordinate~Coordinate>} coordinates Coordinates.
+ * @param {Array<module:ol/coordinate~Coordinate>} coordinates Coordinates.
  * @param {module:ol/extent~Extent=} opt_extent Extent.
  * @return {module:ol/extent~Extent} Extent.
  */
@@ -260,7 +260,7 @@ export function createOrUpdateFromCoordinates(coordinates, opt_extent) {
 
 
 /**
- * @param {Array.<number>} flatCoordinates Flat coordinates.
+ * @param {Array<number>} flatCoordinates Flat coordinates.
  * @param {number} offset Offset.
  * @param {number} end End.
  * @param {number} stride Stride.
@@ -273,7 +273,7 @@ export function createOrUpdateFromFlatCoordinates(flatCoordinates, offset, end,
 }
 
 /**
- * @param {Array.<Array.<module:ol/coordinate~Coordinate>>} rings Rings.
+ * @param {Array<Array<module:ol/coordinate~Coordinate>>} rings Rings.
  * @param {module:ol/extent~Extent=} opt_extent Extent.
  * @return {module:ol/extent~Extent} Extent.
  */
@@ -342,7 +342,7 @@ export function extendCoordinate(extent, coordinate) {
 
 /**
  * @param {module:ol/extent~Extent} extent Extent.
- * @param {Array.<module:ol/coordinate~Coordinate>} coordinates Coordinates.
+ * @param {Array<module:ol/coordinate~Coordinate>} coordinates Coordinates.
  * @return {module:ol/extent~Extent} Extent.
  */
 export function extendCoordinates(extent, coordinates) {
@@ -355,7 +355,7 @@ export function extendCoordinates(extent, coordinates) {
 
 /**
  * @param {module:ol/extent~Extent} extent Extent.
- * @param {Array.<number>} flatCoordinates Flat coordinates.
+ * @param {Array<number>} flatCoordinates Flat coordinates.
  * @param {number} offset Offset.
  * @param {number} end End.
  * @param {number} stride Stride.
@@ -371,7 +371,7 @@ export function extendFlatCoordinates(extent, flatCoordinates, offset, end, stri
 
 /**
  * @param {module:ol/extent~Extent} extent Extent.
- * @param {Array.<Array.<module:ol/coordinate~Coordinate>>} rings Rings.
+ * @param {Array<Array<module:ol/coordinate~Coordinate>>} rings Rings.
  * @return {module:ol/extent~Extent} Extent.
  */
 export function extendRings(extent, rings) {

src/ol/featureloader.js

@@ -1,7 +1,7 @@
 /**
  * @module ol/featureloader
  */
-import {UNDEFINED} from './functions.js';
+import {VOID} from './functions.js';
 import FormatType from './format/FormatType.js';
 
 
@@ -39,7 +39,7 @@ import FormatType from './format/FormatType.js';
 /**
  * @param {string|module:ol/featureloader~FeatureUrlFunction} url Feature URL service.
  * @param {module:ol/format/Feature} format Feature format.
- * @param {function(this:module:ol/VectorTile, Array.<module:ol/Feature>, module:ol/proj/Projection, module:ol/extent~Extent)|function(this:module:ol/source/Vector, Array.<module:ol/Feature>)} success
+ * @param {function(this:module:ol/VectorTile, Array<module:ol/Feature>, module:ol/proj/Projection, module:ol/extent~Extent)|function(this:module:ol/source/Vector, Array<module:ol/Feature>)} success
  *     Function called with the loaded features and optionally with the data
  *     projection. Called with the vector tile or source as `this`.
  * @param {function(this:module:ol/VectorTile)|function(this:module:ol/source/Vector)} failure
@@ -118,12 +118,12 @@ export function loadFeaturesXhr(url, format, success, failure) {
 export function xhr(url, format) {
   return loadFeaturesXhr(url, format,
     /**
-     * @param {Array.<module:ol/Feature>} features The loaded features.
+     * @param {Array<module:ol/Feature>} features The loaded features.
      * @param {module:ol/proj/Projection} dataProjection Data
      * projection.
      * @this {module:ol/source/Vector}
      */
     function(features, dataProjection) {
       this.addFeatures(features);
-    }, /* FIXME handle error */ UNDEFINED);
+    }, /* FIXME handle error */ VOID);
 }

src/ol/format/EsriJSON.js

@@ -1,7 +1,6 @@
 /**
  * @module ol/format/EsriJSON
  */
-import {inherits} from '../util.js';
 import Feature from '../Feature.js';
 import {assert} from '../asserts.js';
 import {containsExtent} from '../extent.js';
@@ -24,7 +23,7 @@ import {get as getProjection} from '../proj.js';
 
 /**
  * @const
- * @type {Object.<module:ol/geom/GeometryType, function(EsriJSONGeometry): module:ol/geom/Geometry>}
+ * @type {Object<module:ol/geom/GeometryType, function(EsriJSONGeometry): module:ol/geom/Geometry>}
  */
 const GEOMETRY_READERS = {};
 GEOMETRY_READERS[GeometryType.POINT] = readPointGeometry;
@@ -37,7 +36,7 @@ GEOMETRY_READERS[GeometryType.MULTI_POLYGON] = readMultiPolygonGeometry;
 
 /**
  * @const
- * @type {Object.<string, function(module:ol/geom/Geometry, module:ol/format/Feature~WriteOptions=): (EsriJSONGeometry)>}
+ * @type {Object<string, function(module:ol/geom/Geometry, module:ol/format/Feature~WriteOptions=): (EsriJSONGeometry)>}
  */
 const GEOMETRY_WRITERS = {};
 GEOMETRY_WRITERS[GeometryType.POINT] = writePointGeometry;
@@ -58,16 +57,18 @@ GEOMETRY_WRITERS[GeometryType.MULTI_POLYGON] = writeMultiPolygonGeometry;
  * @classdesc
  * Feature format for reading and writing data in the EsriJSON format.
  *
- * @constructor
- * @extends {module:ol/format/JSONFeature}
- * @param {module:ol/format/EsriJSON~Options=} opt_options Options.
  * @api
  */
-const EsriJSON = function(opt_options) {
+class EsriJSON extends JSONFeature {
+
+  /**
+   * @param {module:ol/format/EsriJSON~Options=} opt_options Options.
+   */
+  constructor(opt_options) {
 
     const options = opt_options ? opt_options : {};
 
-  JSONFeature.call(this);
+    super();
 
     /**
      * Name of the geometry attribute for features.
@@ -76,9 +77,134 @@ const EsriJSON = function(opt_options) {
      */
     this.geometryName_ = options.geometryName;
 
-};
+  }
 
-inherits(EsriJSON, JSONFeature);
+  /**
+   * @inheritDoc
+   */
+  readFeatureFromObject(object, opt_options) {
+    const esriJSONFeature = /** @type {EsriJSONFeature} */ (object);
+    const geometry = readGeometry(esriJSONFeature.geometry, opt_options);
+    const feature = new Feature();
+    if (this.geometryName_) {
+      feature.setGeometryName(this.geometryName_);
+    }
+    feature.setGeometry(geometry);
+    if (opt_options && opt_options.idField &&
+      esriJSONFeature.attributes[opt_options.idField]) {
+      feature.setId(/** @type {number} */(esriJSONFeature.attributes[opt_options.idField]));
+    }
+    if (esriJSONFeature.attributes) {
+      feature.setProperties(esriJSONFeature.attributes);
+    }
+    return feature;
+  }
+
+  /**
+   * @inheritDoc
+   */
+  readFeaturesFromObject(object, opt_options) {
+    const esriJSONObject = /** @type {EsriJSONObject} */ (object);
+    const options = opt_options ? opt_options : {};
+    if (esriJSONObject.features) {
+      const esriJSONFeatureCollection = /** @type {EsriJSONFeatureCollection} */ (object);
+      /** @type {Array<module:ol/Feature>} */
+      const features = [];
+      const esriJSONFeatures = esriJSONFeatureCollection.features;
+      options.idField = object.objectIdFieldName;
+      for (let i = 0, ii = esriJSONFeatures.length; i < ii; ++i) {
+        features.push(this.readFeatureFromObject(esriJSONFeatures[i], options));
+      }
+      return features;
+    } else {
+      return [this.readFeatureFromObject(object, options)];
+    }
+  }
+
+  /**
+   * @inheritDoc
+   */
+  readGeometryFromObject(object, opt_options) {
+    return readGeometry(/** @type {EsriJSONGeometry} */(object), opt_options);
+  }
+
+  /**
+   * @inheritDoc
+   */
+  readProjectionFromObject(object) {
+    const esriJSONObject = /** @type {EsriJSONObject} */ (object);
+    if (esriJSONObject.spatialReference && esriJSONObject.spatialReference.wkid) {
+      const crs = esriJSONObject.spatialReference.wkid;
+      return getProjection('EPSG:' + crs);
+    } else {
+      return null;
+    }
+  }
+
+  /**
+   * Encode a geometry as a EsriJSON object.
+   *
+   * @param {module:ol/geom/Geometry} geometry Geometry.
+   * @param {module:ol/format/Feature~WriteOptions=} opt_options Write options.
+   * @return {EsriJSONGeometry} Object.
+   * @override
+   * @api
+   */
+  writeGeometryObject(geometry, opt_options) {
+    return writeGeometry(geometry, this.adaptOptions(opt_options));
+  }
+
+  /**
+   * Encode a feature as a esriJSON Feature object.
+   *
+   * @param {module:ol/Feature} feature Feature.
+   * @param {module:ol/format/Feature~WriteOptions=} opt_options Write options.
+   * @return {Object} Object.
+   * @override
+   * @api
+   */
+  writeFeatureObject(feature, opt_options) {
+    opt_options = this.adaptOptions(opt_options);
+    const object = {};
+    const geometry = feature.getGeometry();
+    if (geometry) {
+      object['geometry'] = writeGeometry(geometry, opt_options);
+      if (opt_options && opt_options.featureProjection) {
+        object['geometry']['spatialReference'] = /** @type {EsriJSONCRS} */({
+          wkid: getProjection(opt_options.featureProjection).getCode().split(':').pop()
+        });
+      }
+    }
+    const properties = feature.getProperties();
+    delete properties[feature.getGeometryName()];
+    if (!isEmpty(properties)) {
+      object['attributes'] = properties;
+    } else {
+      object['attributes'] = {};
+    }
+    return object;
+  }
+
+  /**
+   * Encode an array of features as a EsriJSON object.
+   *
+   * @param {Array<module:ol/Feature>} features Features.
+   * @param {module:ol/format/Feature~WriteOptions=} opt_options Write options.
+   * @return {Object} EsriJSON Object.
+   * @override
+   * @api
+   */
+  writeFeaturesObject(features, opt_options) {
+    opt_options = this.adaptOptions(opt_options);
+    const objects = [];
+    for (let i = 0, ii = features.length; i < ii; ++i) {
+      objects.push(this.writeFeatureObject(features[i], opt_options));
+    }
+    return /** @type {EsriJSONFeatureCollection} */ ({
+      'features': objects
+    });
+  }
+}
 
 
 /**
@@ -126,9 +252,9 @@ function readGeometry(object, opt_options) {
  * Checks if any polygons in this array contain any other polygons in this
  * array. It is used for checking for holes.
  * Logic inspired by: https://github.com/Esri/terraformer-arcgis-parser
- * @param {Array.<!Array.<!Array.<number>>>} rings Rings.
+ * @param {Array<!Array<!Array<number>>>} rings Rings.
  * @param {module:ol/geom/GeometryLayout} layout Geometry layout.
- * @return {Array.<!Array.<!Array.<number>>>} Transformed rings.
+ * @return {Array<!Array<!Array<number>>>} Transformed rings.
  */
 function convertRings(rings, layout) {
   const flatRing = [];
@@ -250,7 +376,7 @@ function readMultiPointGeometry(object) {
 function readMultiPolygonGeometry(object) {
   const layout = getGeometryLayout(object);
   return new MultiPolygon(
-    /** @type {Array.<Array.<Array.<Array.<number>>>>} */(object.rings),
+    /** @type {Array<Array<Array<Array<number>>>>} */(object.rings),
     layout);
 }
 
@@ -413,121 +539,6 @@ function writeMultiPolygonGeometry(geometry, opt_options) {
 }
 
 
-/**
- * Read a feature from a EsriJSON Feature source.  Only works for Feature,
- * use `readFeatures` to read FeatureCollection source.
- *
- * @function
- * @param {ArrayBuffer|Document|Node|Object|string} source Source.
- * @param {module:ol/format/Feature~ReadOptions=} opt_options Read options.
- * @return {module:ol/Feature} Feature.
- * @api
- */
-EsriJSON.prototype.readFeature;
-
-
-/**
- * Read all features from a EsriJSON source.  Works with both Feature and
- * FeatureCollection sources.
- *
- * @function
- * @param {ArrayBuffer|Document|Node|Object|string} source Source.
- * @param {module:ol/format/Feature~ReadOptions=} opt_options Read options.
- * @return {Array.<module:ol/Feature>} Features.
- * @api
- */
-EsriJSON.prototype.readFeatures;
-
-
-/**
- * @inheritDoc
- */
-EsriJSON.prototype.readFeatureFromObject = function(object, opt_options) {
-  const esriJSONFeature = /** @type {EsriJSONFeature} */ (object);
-  const geometry = readGeometry(esriJSONFeature.geometry, opt_options);
-  const feature = new Feature();
-  if (this.geometryName_) {
-    feature.setGeometryName(this.geometryName_);
-  }
-  feature.setGeometry(geometry);
-  if (opt_options && opt_options.idField &&
-    esriJSONFeature.attributes[opt_options.idField]) {
-    feature.setId(/** @type {number} */(esriJSONFeature.attributes[opt_options.idField]));
-  }
-  if (esriJSONFeature.attributes) {
-    feature.setProperties(esriJSONFeature.attributes);
-  }
-  return feature;
-};
-
-
-/**
- * @inheritDoc
- */
-EsriJSON.prototype.readFeaturesFromObject = function(object, opt_options) {
-  const esriJSONObject = /** @type {EsriJSONObject} */ (object);
-  const options = opt_options ? opt_options : {};
-  if (esriJSONObject.features) {
-    const esriJSONFeatureCollection = /** @type {EsriJSONFeatureCollection} */ (object);
-    /** @type {Array.<module:ol/Feature>} */
-    const features = [];
-    const esriJSONFeatures = esriJSONFeatureCollection.features;
-    options.idField = object.objectIdFieldName;
-    for (let i = 0, ii = esriJSONFeatures.length; i < ii; ++i) {
-      features.push(this.readFeatureFromObject(esriJSONFeatures[i], options));
-    }
-    return features;
-  } else {
-    return [this.readFeatureFromObject(object, options)];
-  }
-};
-
-
-/**
- * Read a geometry from a EsriJSON source.
- *
- * @function
- * @param {ArrayBuffer|Document|Node|Object|string} source Source.
- * @param {module:ol/format/Feature~ReadOptions=} opt_options Read options.
- * @return {module:ol/geom/Geometry} Geometry.
- * @api
- */
-EsriJSON.prototype.readGeometry;
-
-
-/**
- * @inheritDoc
- */
-EsriJSON.prototype.readGeometryFromObject = function(object, opt_options) {
-  return readGeometry(/** @type {EsriJSONGeometry} */(object), opt_options);
-};
-
-
-/**
- * Read the projection from a EsriJSON source.
- *
- * @function
- * @param {ArrayBuffer|Document|Node|Object|string} source Source.
- * @return {module:ol/proj/Projection} Projection.
- * @api
- */
-EsriJSON.prototype.readProjection;
-
-
-/**
- * @inheritDoc
- */
-EsriJSON.prototype.readProjectionFromObject = function(object) {
-  const esriJSONObject = /** @type {EsriJSONObject} */ (object);
-  if (esriJSONObject.spatialReference && esriJSONObject.spatialReference.wkid) {
-    const crs = esriJSONObject.spatialReference.wkid;
-    return getProjection('EPSG:' + crs);
-  } else {
-    return null;
-  }
-};
-
-
 /**
  * @param {module:ol/geom/Geometry} geometry Geometry.
  * @param {module:ol/format/Feature~WriteOptions=} opt_options Write options.
@@ -540,106 +551,4 @@ function writeGeometry(geometry, opt_options) {
 }
 
 
-/**
- * Encode a geometry as a EsriJSON string.
- *
- * @function
- * @param {module:ol/geom/Geometry} geometry Geometry.
- * @param {module:ol/format/Feature~WriteOptions=} opt_options Write options.
- * @return {string} EsriJSON.
- * @api
- */
-EsriJSON.prototype.writeGeometry;
-
-
-/**
- * Encode a geometry as a EsriJSON object.
- *
- * @param {module:ol/geom/Geometry} geometry Geometry.
- * @param {module:ol/format/Feature~WriteOptions=} opt_options Write options.
- * @return {EsriJSONGeometry} Object.
- * @override
- * @api
- */
-EsriJSON.prototype.writeGeometryObject = function(geometry, opt_options) {
-  return writeGeometry(geometry, this.adaptOptions(opt_options));
-};
-
-
-/**
- * Encode a feature as a EsriJSON Feature string.
- *
- * @function
- * @param {module:ol/Feature} feature Feature.
- * @param {module:ol/format/Feature~WriteOptions=} opt_options Write options.
- * @return {string} EsriJSON.
- * @api
- */
-EsriJSON.prototype.writeFeature;
-
-
-/**
- * Encode a feature as a esriJSON Feature object.
- *
- * @param {module:ol/Feature} feature Feature.
- * @param {module:ol/format/Feature~WriteOptions=} opt_options Write options.
- * @return {Object} Object.
- * @override
- * @api
- */
-EsriJSON.prototype.writeFeatureObject = function(feature, opt_options) {
-  opt_options = this.adaptOptions(opt_options);
-  const object = {};
-  const geometry = feature.getGeometry();
-  if (geometry) {
-    object['geometry'] = writeGeometry(geometry, opt_options);
-    if (opt_options && opt_options.featureProjection) {
-      object['geometry']['spatialReference'] = /** @type {EsriJSONCRS} */({
-        wkid: getProjection(opt_options.featureProjection).getCode().split(':').pop()
-      });
-    }
-  }
-  const properties = feature.getProperties();
-  delete properties[feature.getGeometryName()];
-  if (!isEmpty(properties)) {
-    object['attributes'] = properties;
-  } else {
-    object['attributes'] = {};
-  }
-  return object;
-};
-
-
-/**
- * Encode an array of features as EsriJSON.
- *
- * @function
- * @param {Array.<module:ol/Feature>} features Features.
- * @param {module:ol/format/Feature~WriteOptions=} opt_options Write options.
- * @return {string} EsriJSON.
- * @api
- */
-EsriJSON.prototype.writeFeatures;
-
-
-/**
- * Encode an array of features as a EsriJSON object.
- *
- * @param {Array.<module:ol/Feature>} features Features.
- * @param {module:ol/format/Feature~WriteOptions=} opt_options Write options.
- * @return {Object} EsriJSON Object.
- * @override
- * @api
- */
-EsriJSON.prototype.writeFeaturesObject = function(features, opt_options) {
-  opt_options = this.adaptOptions(opt_options);
-  const objects = [];
-  for (let i = 0, ii = features.length; i < ii; ++i) {
-    objects.push(this.writeFeatureObject(features[i], opt_options));
-  }
-  return /** @type {EsriJSONFeatureCollection} */ ({
-    'features': objects
-  });
-};
-
 export default EsriJSON;

src/ol/format/Feature.js

@@ -8,14 +8,14 @@ import {get as getProjection, equivalent as equivalentProjection, transformExten
 
 /**
  * @typedef {Object} ReadOptions
- * @property {module:ol/proj~ProjectionLike} dataProjection Projection of the data we are reading.
+ * @property {module:ol/proj~ProjectionLike} [dataProjection] Projection of the data we are reading.
  * If not provided, the projection will be derived from the data (where possible) or
  * the `dataProjection` of the format is assigned (where set). If the projection
  * can not be derived from the data and if no `dataProjection` is set for a format,
  * the features will not be reprojected.
- * @property {module:ol/extent~Extent} extent Tile extent of the tile being read. This is only used and
+ * @property {module:ol/extent~Extent} [extent] Tile extent of the tile being read. This is only used and
  * required for {@link module:ol/format/MVT}.
- * @property {module:ol/proj~ProjectionLike} featureProjection Projection of the feature geometries
+ * @property {module:ol/proj~ProjectionLike} [featureProjection] Projection of the feature geometries
  * created by the format reader. If not provided, features will be returned in the
  * `dataProjection`.
  */
@@ -23,11 +23,11 @@ import {get as getProjection, equivalent as equivalentProjection, transformExten
 
 /**
  * @typedef {Object} WriteOptions
- * @property {module:ol/proj~ProjectionLike} dataProjection Projection of the data we are writing.
+ * @property {module:ol/proj~ProjectionLike} [dataProjection] Projection of the data we are writing.
  * If not provided, the `dataProjection` of the format is assigned (where set).
  * If no `dataProjection` is set for a format, the features will be returned
  * in the `featureProjection`.
- * @property {module:ol/proj~ProjectionLike} featureProjection Projection of the feature geometries
+ * @property {module:ol/proj~ProjectionLike} [featureProjection] Projection of the feature geometries
  * that will be serialized by the format writer. If not provided, geometries are assumed
  * to be in the `dataProjection` if that is set; in other words, they are not transformed.
  * @property {boolean} [rightHanded] When writing geometries, follow the right-hand
@@ -56,11 +56,11 @@ import {get as getProjection, equivalent as equivalentProjection, transformExten
  * {@link module:ol/Feature~Feature} objects from a variety of commonly used geospatial
  * file formats.  See the documentation for each format for more details.
  *
- * @constructor
  * @abstract
  * @api
  */
-const FeatureFormat = function() {
+class FeatureFormat {
+  constructor() {
 
     /**
      * @protected
@@ -74,17 +74,16 @@ const FeatureFormat = function() {
      */
     this.defaultFeatureProjection = null;
 
-};
+  }
 
-
-/**
+  /**
    * Adds the data projection to the read options.
    * @param {Document|Node|Object|string} source Source.
    * @param {module:ol/format/Feature~ReadOptions=} opt_options Options.
    * @return {module:ol/format/Feature~ReadOptions|undefined} Options.
    * @protected
    */
-FeatureFormat.prototype.getReadOptions = function(source, opt_options) {
+  getReadOptions(source, opt_options) {
     let options;
     if (opt_options) {
       options = {
@@ -94,10 +93,9 @@ FeatureFormat.prototype.getReadOptions = function(source, opt_options) {
       };
     }
     return this.adaptOptions(options);
-};
+  }
 
-
-/**
+  /**
    * Sets the `dataProjection` on the options, if no `dataProjection`
    * is set.
    * @param {module:ol/format/Feature~WriteOptions|module:ol/format/Feature~ReadOptions|undefined} options
@@ -106,31 +104,28 @@ FeatureFormat.prototype.getReadOptions = function(source, opt_options) {
    * @return {module:ol/format/Feature~WriteOptions|module:ol/format/Feature~ReadOptions|undefined}
    *     Updated options.
    */
-FeatureFormat.prototype.adaptOptions = function(options) {
+  adaptOptions(options) {
     return assign({
       dataProjection: this.dataProjection,
       featureProjection: this.defaultFeatureProjection
     }, options);
-};
+  }
 
-
-/**
+  /**
    * Get the extent from the source of the last {@link readFeatures} call.
    * @return {module:ol/extent~Extent} Tile extent.
    */
-FeatureFormat.prototype.getLastExtent = function() {
+  getLastExtent() {
     return null;
-};
+  }
 
-
-/**
+  /**
    * @abstract
    * @return {module:ol/format/FormatType} Format.
    */
-FeatureFormat.prototype.getType = function() {};
+  getType() {}
 
-
-/**
+  /**
    * Read a single feature from a source.
    *
    * @abstract
@@ -138,21 +133,19 @@ FeatureFormat.prototype.getType = function() {};
    * @param {module:ol/format/Feature~ReadOptions=} opt_options Read options.
    * @return {module:ol/Feature} Feature.
    */
-FeatureFormat.prototype.readFeature = function(source, opt_options) {};
+  readFeature(source, opt_options) {}
 
-
-/**
+  /**
    * Read all features from a source.
    *
    * @abstract
    * @param {Document|Node|ArrayBuffer|Object|string} source Source.
    * @param {module:ol/format/Feature~ReadOptions=} opt_options Read options.
- * @return {Array.<module:ol/Feature>} Features.
+   * @return {Array<module:ol/Feature>} Features.
    */
-FeatureFormat.prototype.readFeatures = function(source, opt_options) {};
+  readFeatures(source, opt_options) {}
 
-
-/**
+  /**
    * Read a single geometry from a source.
    *
    * @abstract
@@ -160,20 +153,18 @@ FeatureFormat.prototype.readFeatures = function(source, opt_options) {};
    * @param {module:ol/format/Feature~ReadOptions=} opt_options Read options.
    * @return {module:ol/geom/Geometry} Geometry.
    */
-FeatureFormat.prototype.readGeometry = function(source, opt_options) {};
+  readGeometry(source, opt_options) {}
 
-
-/**
+  /**
    * Read the projection from a source.
    *
    * @abstract
    * @param {Document|Node|Object|string} source Source.
    * @return {module:ol/proj/Projection} Projection.
    */
-FeatureFormat.prototype.readProjection = function(source) {};
+  readProjection(source) {}
 
-
-/**
+  /**
    * Encode a feature in this format.
    *
    * @abstract
@@ -181,21 +172,19 @@ FeatureFormat.prototype.readProjection = function(source) {};
    * @param {module:ol/format/Feature~WriteOptions=} opt_options Write options.
    * @return {string} Result.
    */
-FeatureFormat.prototype.writeFeature = function(feature, opt_options) {};
+  writeFeature(feature, opt_options) {}
 
-
-/**
+  /**
    * Encode an array of features in this format.
    *
    * @abstract
- * @param {Array.<module:ol/Feature>} features Features.
+   * @param {Array<module:ol/Feature>} features Features.
    * @param {module:ol/format/Feature~WriteOptions=} opt_options Write options.
    * @return {string} Result.
    */
-FeatureFormat.prototype.writeFeatures = function(features, opt_options) {};
+  writeFeatures(features, opt_options) {}
 
-
-/**
+  /**
    * Write a single geometry in this format.
    *
    * @abstract
@@ -203,14 +192,15 @@ FeatureFormat.prototype.writeFeatures = function(features, opt_options) {};
    * @param {module:ol/format/Feature~WriteOptions=} opt_options Write options.
    * @return {string} Result.
    */
-FeatureFormat.prototype.writeGeometry = function(geometry, opt_options) {};
+  writeGeometry(geometry, opt_options) {}
+}
 
 export default FeatureFormat;
 
 /**
  * @param {module:ol/geom/Geometry|module:ol/extent~Extent} geometry Geometry.
  * @param {boolean} write Set to true for writing, false for reading.
- * @param {(module:ol/format/Feature~WriteOptions|module:ol/format/Feature~ReadOptions)=} opt_options
+ * @param {module:ol/format/Feature~WriteOptions|module:ol/format/Feature~ReadOptions|undefined} opt_options
  *     Options.
  * @return {module:ol/geom/Geometry|module:ol/extent~Extent} Transformed geometry.
  */
@@ -244,8 +234,8 @@ export function transformWithOptions(geometry, write, opt_options) {
     const power = Math.pow(10, opt_options.decimals);
     // if decimals option on write, round each coordinate appropriately
     /**
-     * @param {Array.<number>} coordinates Coordinates.
-     * @return {Array.<number>} Transformed coordinates.
+     * @param {Array<number>} coordinates Coordinates.
+     * @return {Array<number>} Transformed coordinates.
      */
     const transform = function(coordinates) {
       for (let i = 0, ii = coordinates.length; i < ii; ++i) {

src/ol/format/GML.js

@@ -9,10 +9,8 @@ import GML3 from '../format/GML3.js';
  * version 3.1.1.
  * Currently only supports GML 3.1.1 Simple Features profile.
  *
- * @constructor
  * @param {module:ol/format/GMLBase~Options=} opt_options
  *     Optional configuration object.
- * @extends {module:ol/format/GMLBase}
  * @api
  */
 const GML = GML3;
@@ -22,7 +20,7 @@ const GML = GML3;
  * Encode an array of features in GML 3.1.1 Simple Features.
  *
  * @function
- * @param {Array.<module:ol/Feature>} features Features.
+ * @param {Array<module:ol/Feature>} features Features.
  * @param {module:ol/format/Feature~WriteOptions=} opt_options Options.
  * @return {string} Result.
  * @api
@@ -34,7 +32,7 @@ GML.prototype.writeFeatures;
  * Encode an array of features in the GML 3.1.1 format as an XML node.
  *
  * @function
- * @param {Array.<module:ol/Feature>} features Features.
+ * @param {Array<module:ol/Feature>} features Features.
  * @param {module:ol/format/Feature~WriteOptions=} opt_options Options.
  * @return {Node} Node.
  * @api