Merge pull request #8411 from tschaub/release-v5.1.0

Release v5.1.0

.babelrc

@@ -1,9 +0,0 @@
-{
-  "plugins": ["jsdoc-closure"],
-  "parserOpts": {
-    "parser": "recast"
-  },
-  "generatorOpts": {
-    "generator": "recast"
-  }
-}

.github/ISSUE_TEMPLATE.md

@@ -1,8 +1,9 @@
+<!--
 Thank you for your interest in making OpenLayers better!
 
-To keep this project manageable for maintainers, we ask you to please check all boxes below before submitting an issue.
+If you are reporting a bug, please link to an example that reproduces the problem.  This will make it easier for people who may want to help you debug.
 
-- [ ] I am submitting a bug or feature request, not a usage question. Go to https://stackoverflow.com/questions/tagged/openlayers for questions.
-- [ ] I have searched GitHub to see if a similar bug or feature request has already been reported.
-- [ ] I have verified that the issue is present in the latest version of OpenLayers (see 'LATEST' on https://openlayers.org/).
-- [ ] If reporting a bug, I have created a [CodePen](https://codepen.io) or prepared a stack trace (using the latest version and unminified code, so e.g. `ol-debug.js`, not `ol.js`) that shows the issue.
+If you have a usage question, you might want to try Stack Overflow first: https://stackoverflow.com/questions/tagged/openlayers
+
+Thanks
+-->

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,8 +1,13 @@
+<!--
 Thank you for your interest in making OpenLayers better!
 
-In order to get your proposed changes merged into the master branch, we ask you to please make sure the following boxes are checked *before* submitting your pull request.
+Before submitting a pull request, it is best to open an issue describing the bug you are fixing or the feature you are proposing to add.
 
-- [ ] This pull request addresses an issue that has been marked with the 'Pull request accepted' label & I have added the link to that issue.
-- [ ] It contains one or more small, incremental, logically separate commits, with no merge commits.
-- [ ] I have used clear commit messages.
-- [ ] Existing tests pass for me locally & I have added or updated tests for new or changed functionality.
+Here are some other tips that make pull requests easier to review:
+
+ * Commits in the branch are small and logically separated (with no unnecessary merge commits).
+ * Commit messages are clear.
+ * Existing tests pass, new functionality is covered by new tests, and fixes have regression tests.
+
+Thanks
+-->

.gitignore

@@ -1,5 +1,4 @@
 /build/
 /coverage/
 /dist/
-/node_modules/
-src/index.js
+node_modules/

changelog/upgrade-notes.md

@@ -1,6 +1,28 @@
 ## Upgrade notes
 
-### Next release
+### 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`
+
+The module name is now `ol/source/UTFGrid` (`ol.source.UTFGrid` in the full build).
+
+#### Renaming of the `defaultDataProjection` in the options and property of the `ol/format/Feature` class and its subclasses
+
+The `defaultDataProjection` option is now named `dataProjection`. The protected property available on the class is also renamed.
+
+#### `transition` option of `ol/source/VectorTile` is ignored
+
+The `transition` option to get an opacity transition to fade in tiles has been  disabled for `ol/source/VectorTile`. Vector tiles are now always rendered without an opacity transition.
+
+#### `ol/style/Fill` with `CanvasGradient` or `CanvasPattern`
+
+The origin for gradients and patterns has changed from the top-left corner of the extent of the geometry being filled to 512 css pixel increments from map coordinate `[0, 0]`. This allows repeat patterns to be aligned properly with vector tiles. For seamless repeat patterns, width and height of the pattern image must be a factor of two (2, 4, 8, ..., 512).
 
 #### Removal of the renderer option for maps
 
@@ -143,14 +165,37 @@ var poly = circularPolygon(center, radius);
 
 #### Removal of optional this arguments.
 
-The following methods did get the optional this (i.e. opt_this) arguments removed. Please use closures, the es6 arrow function or the bind method to achieve this effect (Bind is explained here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind).
+The optional this (i.e. opt_this) arguments were removed from the following methods. Please use closures, the es6 arrow function or the bind method to achieve this effect (Bind is explained here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind).
 
 * Collection#forEach
 * geom/LineString#forEachSegment
 * Observable#on, #once, #un
+* Map#forEachLayerAtPixel
 * source/TileUTFGrid#forDataAtCoordinateAndResolution
 * source/Vector#forEachFeature, #forEachFeatureInExtent, #forEachFeatureIntersectingExtent
 
+
+#### `Map#forEachLayerAtPixel` parameters have changed
+
+If you are using the layer filter, please note that you now have to pass in the layer filter via an `AtPixelOptions` object. If you are not using the layer filter the usage has not changed.
+
+Old syntax:
+```
+    map.forEachLayerAtPixel(pixel, callback, callbackThis, layerFilterFn, layerFilterThis);
+```
+
+New syntax:
+
+```
+    map.forEachLayerAtPixel(pixel, callback, {
+        layerFilter: layerFilterFn
+    });
+```
+
+To bind a function to a this, please use the bind method of the function (See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind).
+
+This change is due to the introduction of the `hitTolerance` parameter which can be passed in via this `AtPixelOptions` object, too.
+
 ### v4.6.0
 
 #### Renamed `exceedLength` option of `ol.style.Text` to `overflow`

changelog/v5.0.0.md

@@ -0,0 +1,667 @@
+# v5.0.0
+
+The main theme of the v5.0.0 release is an improved developer/user experience with OpenLayers. Toward this end, we have reworked the library as a set of ES Modules, completely removing any dependency on the Closure Compiler, and improving compatibility with mainstream module bundlers.
+
+See the [hosted examples](https://openlayers.org/en/latest/examples/), [API docs](https://openlayers.org/en/latest/apidoc/), and [bundle tutorial](https://openlayers.org/en/latest/doc/tutorials/bundle.html) for the new syntax, but basic usage looks like this:
+
+```js
+import 'ol/ol.css';
+import {Map, View} from 'ol';
+import TileLayer from 'ol/layer/Tile';
+import OSM from 'ol/source/OSM';
+
+const map = new Map({
+  target: 'map',
+  layers: [
+    new TileLayer({
+      source: new OSM()
+    })
+  ],
+  view: new View({
+    center: [0, 0],
+    zoom: 0
+  })
+});
+```
+
+See below for specific notes on upgrading from 4.x releases.  We'll be working on updating the website with improved documentation and examples.  Take a look at the issue tracker if you're interested in contributing.
+
+### Upgrade Notes
+
+#### Renamed `ol/source/TileUTFGrid` to `ol/source/UTFGrid`
+
+The module name is now `ol/source/UTFGrid` (`ol.source.UTFGrid` in the full build).
+
+#### Renaming of the `defaultDataProjection` in the options and property of the `ol/format/Feature` class and its subclasses
+
+The `defaultDataProjection` option is now named `dataProjection`. The protected property available on the class is also renamed.
+
+#### `transition` option of `ol/source/VectorTile` is ignored
+
+The `transition` option to get an opacity transition to fade in tiles has been  disabled for `ol/source/VectorTile`. Vector tiles are now always rendered without an opacity transition.
+
+#### `ol/style/Fill` with `CanvasGradient` or `CanvasPattern`
+
+The origin for gradients and patterns has changed from the top-left corner of the extent of the geometry being filled to 512 css pixel increments from map coordinate `[0, 0]`. This allows repeat patterns to be aligned properly with vector tiles. For seamless repeat patterns, width and height of the pattern image must be a factor of two (2, 4, 8, ..., 512).
+
+#### Removal of the renderer option for maps
+
+The `renderer` option has been removed from the `Map` constructor.  The purpose of this change is to avoid bundling code in your application that you do not need.  Previously, code for both the Canvas and WebGL renderers was included in all applications - even though most people only use one renderer.  The `Map` constructor now gives you a Canvas (2D) based renderer.  If you want to try the WebGL renderer, you can import the constructor from `ol/WebGLMap`.
+
+Old code:
+```js
+import Map from 'ol/Map';
+
+const canvasMap = new Map({
+  renderer: ['canvas']
+  // other options...
+});
+
+const webglMap = new Map({
+  renderer: ['webgl']
+  // other options...
+});
+```
+
+New code:
+```js
+import Map from 'ol/Map';
+import WebGLMap from 'ol/WebGLMap';
+
+const canvasMap = new Map({
+  // options...
+});
+
+const webglMap = new WebGLMap({
+  // options...
+});
+```
+
+#### Removal of ol.FeatureStyleFunction
+
+The signature of the vector style function passed to the feature has changed. The function now always takes the `feature` and the `resolution` as arguments, the `feature` is no longer bound to `this`.
+
+Old code:
+```js
+feature.setStyle(function(resolution) {
+  var text = this.get('name');
+  ...
+});
+```
+
+New code:
+```js
+feature.setStyle(function(feature, resolution) {
+  var text = feature.get('name');
+  ...
+});
+```
+
+#### Changed behavior of the `Draw` interaction
+
+For better drawing experience, two changes were made to the behavior of the Draw interaction:
+
+ 1. On long press, the current vertex can be dragged to its desired position.
+ 2. On touch move (e.g. when panning the map on a mobile device), no draw cursor is shown, and the geometry being drawn is not updated. But because of 1., the draw cursor will appear on long press. Mouse moves are not affected by this change.
+
+#### Changes in proj4 integration
+
+Because relying on a globally available proj4 is not practical with ES modules, we have made a change to the way we integrate proj4:
+
+ * The `setProj4()` function from the `ol/proj` module was removed.
+ * A new `ol/proj/proj4` module with a `register()` function was added. Regardless of whether the application imports `proj4` or uses a global `proj4`, this function needs to be called with the proj4 instance as argument whenever projection definitions were added to proj4's registry with (`proj4.defs`).
+
+It is also recommended to no longer use a global `proj4`. Instead,
+
+    npm install proj4
+
+and import it:
+
+```js
+import proj4 from 'proj4';
+```
+
+Applications can be updated by importing the `register` function from the `ol/proj/proj4` module
+
+```js
+import {register} from 'ol/proj/proj4'
+```
+
+and calling it before using projections, and any time the proj4 registry was changed by `proj4.defs()` calls:
+
+```js
+register(proj4);
+```
+
+#### Removal of logos
+
+The map and sources no longer accept a `logo` option.  Instead, if you wish to append a logo to your map, add the desired markup directly in your HTML.  In addition, you can use the `attributions` property of a source to display arbitrary markup per-source with the attribution control.
+
+#### Replacement of `ol/Sphere` constructor with `ol/sphere` functions
+
+The `ol/Sphere` constructor has been removed.  If you were using the `getGeodesicArea` method, use the `getArea` function instead.  If you were using the `haversineDistance` method, use the `getDistance` function instead.
+
+Examples before:
+```js
+// using ol@4
+import Sphere from 'ol/sphere';
+
+var sphere = new Sphere(Sphere.DEFAULT_RADIUS);
+var area = sphere.getGeodesicArea(polygon);
+var distance = sphere.haversineDistance(g1, g2);
+```
+
+Examples after:
+```js
+// using ol@5
+import {circular as circularPolygon} from 'ol/geom/Polygon';
+import {getArea, getDistance} from 'ol/sphere';
+
+var area = getArea(polygon);
+var distance = getDistance(g1, g2);
+var circle = circularPolygon(center, radius);
+```
+
+#### New signature for the `circular` function for creating polygons
+
+The `circular` function exported from `ol/geom/Polygon` no longer requires a `Sphere` as the first argument.
+
+Example before:
+```js
+// using ol@4
+import Polygon from 'ol/geom/polygon';
+import Sphere from 'ol/sphere';
+
+var poly = Polygon.circular(new Sphere(Sphere.DEFAULT_RADIUS), center, radius);
+```
+
+Example after:
+```js
+// using ol@5
+import {circular as circularPolygon} from 'ol/geom/Polygon';
+
+var poly = circularPolygon(center, radius);
+```
+
+#### Removal of optional this arguments.
+
+The optional this (i.e. opt_this) arguments were removed from the following methods. Please use closures, the es6 arrow function or the bind method to achieve this effect (Bind is explained here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind).
+
+* Collection#forEach
+* geom/LineString#forEachSegment
+* Observable#on, #once, #un
+* Map#forEachLayerAtPixel
+* source/TileUTFGrid#forDataAtCoordinateAndResolution
+* source/Vector#forEachFeature, #forEachFeatureInExtent, #forEachFeatureIntersectingExtent
+
+
+#### `Map#forEachLayerAtPixel` parameters have changed
+ 
+If you are using the layer filter, please note that you now have to pass in the layer filter via an `AtPixelOptions` object. If you are not using the layer filter the usage has not changed.
+
+Old syntax:
+```
+    map.forEachLayerAtPixel(pixel, callback, callbackThis, layerFilterFn, layerFilterThis);
+```
+
+New syntax:
+
+```
+    map.forEachLayerAtPixel(pixel, callback, {
+        layerFilter: layerFilterFn
+    });
+```
+
+To bind a function to a this, please use the bind method of the function (See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind).
+
+This change is due to the introduction of the `hitTolerance` parameter which can be passed in via this `AtPixelOptions` object, too.
+
+### New Features and Fixes
+
+ * [#8314](https://github.com/openlayers/openlayers/pull/8314) - Accept hitTolerance in map.forEachLayerAtPixel() ([@simonseyock](https://github.com/simonseyock))
+ * [#7750](https://github.com/openlayers/openlayers/pull/7750) - Don't assume fill for canvas polygon hit detection. ([@schmidtk](https://github.com/schmidtk))
+ * [#8305](https://github.com/openlayers/openlayers/pull/8305) - Update quickstart and tutorials for v5 ([@ahocevar](https://github.com/ahocevar))
+ * [#8301](https://github.com/openlayers/openlayers/pull/8301) - Do not render vectors in image mode ([@ahocevar](https://github.com/ahocevar))
+ * [#8302](https://github.com/openlayers/openlayers/pull/8302) - Ignore node_modules everywhere ([@ahocevar](https://github.com/ahocevar))
+ * [#8299](https://github.com/openlayers/openlayers/pull/8299) - Make classes in ol/ available as named exports from ol ([@ahocevar](https://github.com/ahocevar))
+ * [#8298](https://github.com/openlayers/openlayers/pull/8298) - Add README for ol package ([@ahocevar](https://github.com/ahocevar))
+ * [#8295](https://github.com/openlayers/openlayers/pull/8295) - Prepare for building/publishing v5 ([@ahocevar](https://github.com/ahocevar))
+ * [#8296](https://github.com/openlayers/openlayers/pull/8296) - Fix style documentation ([@fredj](https://github.com/fredj))
+ * [#8294](https://github.com/openlayers/openlayers/pull/8294) - Remove non-functional type checks from testing ([@ahocevar](https://github.com/ahocevar))
+ * [#8292](https://github.com/openlayers/openlayers/pull/8292) - Remove now unneeded single quotes in examples ([@fredj](https://github.com/fredj))
+ * [#8291](https://github.com/openlayers/openlayers/pull/8291) - Graticule code cleanup ([@fredj](https://github.com/fredj))
+ * [#8287](https://github.com/openlayers/openlayers/pull/8287) - Rename ol/source/TileUTFGrid to ol/source/UTFGrid ([@fredj](https://github.com/fredj))
+ * [#8286](https://github.com/openlayers/openlayers/pull/8286) - Fix class name property in Overlay documentation ([@fredj](https://github.com/fredj))
+ * [#8281](https://github.com/openlayers/openlayers/pull/8281) - Rename default data projection ([@gberaudo](https://github.com/gberaudo))
+ * [#8283](https://github.com/openlayers/openlayers/pull/8283) - Remove references to tutorials/custom-builds.html ([@fredj](https://github.com/fredj))
+ * [#8280](https://github.com/openlayers/openlayers/pull/8280) - Add missing property in VectorTile options, remove params from createRenderer ([@fredj](https://github.com/fredj))
+ * [#8277](https://github.com/openlayers/openlayers/pull/8277) - Fix code block in comment ([@ahocevar](https://github.com/ahocevar))
+ * [#8273](https://github.com/openlayers/openlayers/pull/8273) - Remove the externs/ directory ([@ahocevar](https://github.com/ahocevar))
+ * [#8246](https://github.com/openlayers/openlayers/pull/8246) - Don't go back to not moving when dragging ([@ahocevar](https://github.com/ahocevar))
+ * [#8258](https://github.com/openlayers/openlayers/pull/8258) - Use Webpack 4 for tests (and examples) ([@ahocevar](https://github.com/ahocevar))
+ * [#8250](https://github.com/openlayers/openlayers/pull/8250) - Fix various jsdoc types ([@fredj](https://github.com/fredj))
+ * [#8245](https://github.com/openlayers/openlayers/pull/8245) - Fix vector tile docs and types ([@ahocevar](https://github.com/ahocevar))
+ * [#8233](https://github.com/openlayers/openlayers/pull/8233) - Use rollup instead of webpack for the full build ([@ahocevar](https://github.com/ahocevar))
+ * [#8231](https://github.com/openlayers/openlayers/pull/8231) - Fix JSTS usage with OL classes injected ([@bjornharrtell](https://github.com/bjornharrtell))
+ * [#8229](https://github.com/openlayers/openlayers/pull/8229) - Support layers instead of renderers for ol/source/Raster ([@ahocevar](https://github.com/ahocevar))
+ * [#8227](https://github.com/openlayers/openlayers/pull/8227) - Better vectortile experience ([@ahocevar](https://github.com/ahocevar))
+ * [#8225](https://github.com/openlayers/openlayers/pull/8225) - renderMode: 'image' fixes for ol/layer/Vector ([@ahocevar](https://github.com/ahocevar))
+ * [#8226](https://github.com/openlayers/openlayers/pull/8226) - Accept renderers as sources for the Raster source ([@ahocevar](https://github.com/ahocevar))
+ * [#8210](https://github.com/openlayers/openlayers/pull/8210) - Align patterns and gradients to a grid ([@ahocevar](https://github.com/ahocevar))
+ * [#8201](https://github.com/openlayers/openlayers/pull/8201) - Remove babelrc, transform using babel-core ([@ahocevar](https://github.com/ahocevar))
+ * [#8203](https://github.com/openlayers/openlayers/pull/8203) - Type checking complete ([@ahocevar](https://github.com/ahocevar))
+ * [#8204](https://github.com/openlayers/openlayers/pull/8204) - Document ol/control~defaults in the right place ([@ahocevar](https://github.com/ahocevar))
+ * [#8200](https://github.com/openlayers/openlayers/pull/8200) - Set textAlign to the canvas context ([@fredj](https://github.com/fredj))
+ * [#8194](https://github.com/openlayers/openlayers/pull/8194) - miscellaneous code cleanup ([@fredj](https://github.com/fredj))
+ * [#8189](https://github.com/openlayers/openlayers/pull/8189) - More apidoc fixes ([@ahocevar](https://github.com/ahocevar))
+ * [#8191](https://github.com/openlayers/openlayers/pull/8191) - Do not scale text outline width ([@ahocevar](https://github.com/ahocevar))
+ * [#8187](https://github.com/openlayers/openlayers/pull/8187) - Hide attribution control if there are no attributions ([@tschaub](https://github.com/tschaub))
+ * [#8186](https://github.com/openlayers/openlayers/pull/8186) - Updates to get the examples building ([@tschaub](https://github.com/tschaub))
+ * [#8180](https://github.com/openlayers/openlayers/pull/8180) - Fix some JSDoc issues ([@ahocevar](https://github.com/ahocevar))
+ * [#8175](https://github.com/openlayers/openlayers/pull/8175) - More typing fixes ([@fredj](https://github.com/fredj))
+ * [#8177](https://github.com/openlayers/openlayers/pull/8177) - Remove documentation related to the closure compiler ([@gberaudo](https://github.com/gberaudo))
+ * [#8174](https://github.com/openlayers/openlayers/pull/8174) - Fix typo in ol/style/Image~Options typedef ([@fredj](https://github.com/fredj))
+ * [#8172](https://github.com/openlayers/openlayers/pull/8172) - Ignore 'this' type in function typedef ([@fredj](https://github.com/fredj))
+ * [#8173](https://github.com/openlayers/openlayers/pull/8173) - Fix typing in ol/xml module ([@fredj](https://github.com/fredj))
+ * [#8169](https://github.com/openlayers/openlayers/pull/8169) - Shorter module paths for default exports ([@fredj](https://github.com/fredj))
+ * [#8171](https://github.com/openlayers/openlayers/pull/8171) - Remove wrong override tags ([@fredj](https://github.com/fredj))
+ * [#8170](https://github.com/openlayers/openlayers/pull/8170) - Basic apidocs ([@ahocevar](https://github.com/ahocevar))
+ * [#8167](https://github.com/openlayers/openlayers/pull/8167) - Remove externs/oli.js ([@tschaub](https://github.com/tschaub))
+ * [#8166](https://github.com/openlayers/openlayers/pull/8166) - Updated type annotations ([@tschaub](https://github.com/tschaub))
+ * [#8165](https://github.com/openlayers/openlayers/pull/8165) - Update linter config ([@tschaub](https://github.com/tschaub))
+ * [#8163](https://github.com/openlayers/openlayers/pull/8163) - Fix type syntax ([@ahocevar](https://github.com/ahocevar))
+ * [#8161](https://github.com/openlayers/openlayers/pull/8161) - Fix skipping of texts with background ([@ahocevar](https://github.com/ahocevar))
+ * [#8156](https://github.com/openlayers/openlayers/pull/8156) -  fix assert 36 on error documentation #8147 ([@mainakae](https://github.com/mainakae))
+ * [#8143](https://github.com/openlayers/openlayers/pull/8143) - Shorter module paths for default exports ([@openlayers](https://github.com/openlayers))
+ * [#8137](https://github.com/openlayers/openlayers/pull/8137) - Avoid `this` at top level of modules ([@tschaub](https://github.com/tschaub))
+ * [#8138](https://github.com/openlayers/openlayers/pull/8138) - Update tasks to use native async/await ([@tschaub](https://github.com/tschaub))
+ * [#8139](https://github.com/openlayers/openlayers/pull/8139) - Add @module annotation for ol/control/util ([@tschaub](https://github.com/tschaub))
+ * [#8135](https://github.com/openlayers/openlayers/pull/8135) - Break the circular dependency: overview map, map, controls, overview map ([@tschaub](https://github.com/tschaub))
+ * [#8132](https://github.com/openlayers/openlayers/pull/8132) - Add minZoom to the createResolutionConstraint function return type ([@fredj](https://github.com/fredj))
+ * [#8129](https://github.com/openlayers/openlayers/pull/8129) - Fix some types ([@ahocevar](https://github.com/ahocevar))
+ * [#8127](https://github.com/openlayers/openlayers/pull/8127) - Move RasterOperationType into ol/source/Raster ([@fredj](https://github.com/fredj))
+ * [#8123](https://github.com/openlayers/openlayers/pull/8123) - More Jsdoc module fixes ([@fredj](https://github.com/fredj))
+ * [#8125](https://github.com/openlayers/openlayers/pull/8125) - Shorter module paths for default exports ([@ahocevar](https://github.com/ahocevar))
+ * [#8122](https://github.com/openlayers/openlayers/pull/8122) - Remove unused 'format' options from Cluster source constructor ([@fredj](https://github.com/fredj))
+ * [#8121](https://github.com/openlayers/openlayers/pull/8121) - More Jsdoc module fixes ([@fredj](https://github.com/fredj))
+ * [#8117](https://github.com/openlayers/openlayers/pull/8117) - Re-export style constructors from ol/style ([@tschaub](https://github.com/tschaub))
+ * [#8115](https://github.com/openlayers/openlayers/pull/8115) - Re-export layer constructors from ol/layer ([@tschaub](https://github.com/tschaub))
+ * [#8114](https://github.com/openlayers/openlayers/pull/8114) - Re-export interaction constructors from ol/interaction ([@tschaub](https://github.com/tschaub))
+ * [#8116](https://github.com/openlayers/openlayers/pull/8116) - Re-export source constructors from ol/source ([@tschaub](https://github.com/tschaub))
+ * [#8113](https://github.com/openlayers/openlayers/pull/8113) - Re-export geometry constructors from ol/geom ([@tschaub](https://github.com/tschaub))
+ * [#8112](https://github.com/openlayers/openlayers/pull/8112) - Re-export format constructors from ol/format ([@tschaub](https://github.com/tschaub))
+ * [#8111](https://github.com/openlayers/openlayers/pull/8111) - Re-export control constructors ([@tschaub](https://github.com/tschaub))
+ * [#8118](https://github.com/openlayers/openlayers/pull/8118) - Use list for cloak entries ([@tschaub](https://github.com/tschaub))
+ * [#8109](https://github.com/openlayers/openlayers/pull/8109) - Make any falsey undefinedHTML retain the mouse position ([@tschaub](https://github.com/tschaub))
+ * [#8103](https://github.com/openlayers/openlayers/pull/8103) - Fix some jsdoc path types ([@ahocevar](https://github.com/ahocevar))
+ * [#7784](https://github.com/openlayers/openlayers/pull/7784) - Adds option to retain MousePosition when pointer leaves viewport ([@pedros007](https://github.com/pedros007))
+ * [#8101](https://github.com/openlayers/openlayers/pull/8101) - More Jsdoc module fixes ([@fredj](https://github.com/fredj))
+ * [#7908](https://github.com/openlayers/openlayers/pull/7908) - ScaleLine fix for non-degree based units ([@hyperknot](https://github.com/hyperknot))
+ * [#8099](https://github.com/openlayers/openlayers/pull/8099) - More Jsdoc module fixes ([@openlayers](https://github.com/openlayers))
+ * [#8098](https://github.com/openlayers/openlayers/pull/8098) - Remove externs/olx.js and src/ol/typedefs.js ([@tschaub](https://github.com/tschaub))
+ * [#8096](https://github.com/openlayers/openlayers/pull/8096) - Fix rotation default ([@ahocevar](https://github.com/ahocevar))
+ * [#8081](https://github.com/openlayers/openlayers/pull/8081) - Move olx.render.* and related typedefs to ol/render/* ([@pfirpfel](https://github.com/pfirpfel))
+ * [#8087](https://github.com/openlayers/openlayers/pull/8087) - Move various typedefs out of typdefs.js ([@pfirpfel](https://github.com/pfirpfel))
+ * [#8052](https://github.com/openlayers/openlayers/pull/8052) - More Jsdoc module fixes ([@fredj](https://github.com/fredj))
+ * [#8048](https://github.com/openlayers/openlayers/pull/8048) - Remove all comments from shaders ([@fredj](https://github.com/fredj))
+ * [#8089](https://github.com/openlayers/openlayers/pull/8089) - Allow unprefixed WMTS tileMatrix identifiers ([@fredj](https://github.com/fredj))
+ * [#8088](https://github.com/openlayers/openlayers/pull/8088) - Correct type for TextPlacement (jsdoc) ([@camptocamp](https://github.com/camptocamp))
+ * [#8083](https://github.com/openlayers/openlayers/pull/8083) - Move structs typedefs to ol/structs/* ([@pfirpfel](https://github.com/pfirpfel))
+ * [#8077](https://github.com/openlayers/openlayers/pull/8077) - Add hasFeature method to ol.source.Vector ([@icholy](https://github.com/icholy))
+ * [#8080](https://github.com/openlayers/openlayers/pull/8080) - #8079 Mark functions setRotateWithView and setSnapToPixel of ol/style/Image with @api ([@iagafonov](https://github.com/iagafonov))
+ * [#8084](https://github.com/openlayers/openlayers/pull/8084) - Move ol.Reproj* typedefs to ol/reproj ([@pfirpfel](https://github.com/pfirpfel))
+ * [#8082](https://github.com/openlayers/openlayers/pull/8082) - Remove unused typedefs ([@pfirpfel](https://github.com/pfirpfel))
+ * [#8076](https://github.com/openlayers/openlayers/pull/8076) - Move olx.style.* and ol.Style* to ol/style/* ([@pfirpfel](https://github.com/pfirpfel))
+ * [#8075](https://github.com/openlayers/openlayers/pull/8075) - Move olx.tilegrid.* to ol/tilegrid/* ([@pfirpfel](https://github.com/pfirpfel))
+ * [#8073](https://github.com/openlayers/openlayers/pull/8073) - Remove dependency on deprecated sinon@5 ([@tschaub](https://github.com/tschaub))
+ * [#7994](https://github.com/openlayers/openlayers/pull/7994) - Explicit renderer dependencies ([@tschaub](https://github.com/tschaub))
+ * [#7863](https://github.com/openlayers/openlayers/pull/7863) - Add note about null geom in VectorSource.forEachFeature ([@fredj](https://github.com/fredj))
+ * [#8055](https://github.com/openlayers/openlayers/pull/8055) - Mark optional property with square brackets ([@fredj](https://github.com/fredj))
+ * [#8054](https://github.com/openlayers/openlayers/pull/8054) - Generate correct includes list for `build-index` script on windows hosts. ([@lilliputten](https://github.com/lilliputten))
+ * [#8053](https://github.com/openlayers/openlayers/pull/8053) - Don't import from 'functions' multiple times ([@fredj](https://github.com/fredj))
+ * [#8041](https://github.com/openlayers/openlayers/pull/8041) - Remove olx typedefs ol/source ([@fgravin](https://github.com/fgravin))
+ * [#8026](https://github.com/openlayers/openlayers/pull/8026) - [doc] dispatchChangeEvent -> changed ([@nyurik](https://github.com/nyurik))
+ * [#8003](https://github.com/openlayers/openlayers/pull/8003) - Add an example showing Chaikins smoothing algorithm ([@marcjansen](https://github.com/marcjansen))
+ * [#8044](https://github.com/openlayers/openlayers/pull/8044) - Rename constructor options typedef to 'Options' ([@fredj](https://github.com/fredj))
+ * [#8042](https://github.com/openlayers/openlayers/pull/8042) - Only process loaded tiles ([@ahocevar](https://github.com/ahocevar))
+ * [#8036](https://github.com/openlayers/openlayers/pull/8036) - Move the temporary arrays to the module level ([@fredj](https://github.com/fredj))
+ * [#8032](https://github.com/openlayers/openlayers/pull/8032) - Start removing externs for `ol/source` ([@romanzoller](https://github.com/romanzoller))
+ * [#8038](https://github.com/openlayers/openlayers/pull/8038) - Fix ZoomToExtent default tipLabel value ([@fredj](https://github.com/fredj))
+ * [#8034](https://github.com/openlayers/openlayers/pull/8034) - More Jsdoc module fixes ([@fredj](https://github.com/fredj))
+ * [#8029](https://github.com/openlayers/openlayers/pull/8029) - More Jsdoc module fixes ([@fredj](https://github.com/fredj))
+ * [#8030](https://github.com/openlayers/openlayers/pull/8030) - Set `user-select: text` for .ol-selectable ([@walkermatt](https://github.com/walkermatt))
+ * [#8025](https://github.com/openlayers/openlayers/pull/8025) - Move olx.layer.* to ol/layer/* ([@romanzoller](https://github.com/romanzoller))
+ * [#8023](https://github.com/openlayers/openlayers/pull/8023) -  Module type changes for ol.webgl ([@fredj](https://github.com/fredj))
+ * [#8021](https://github.com/openlayers/openlayers/pull/8021) - Move olx.ViewState to ol/View ([@fredj](https://github.com/fredj))
+ * [#8012](https://github.com/openlayers/openlayers/pull/8012) - More Jsdoc module fixes ([@fredj](https://github.com/fredj))
+ * [#8015](https://github.com/openlayers/openlayers/pull/8015) - Remove some typedefs from src/ol/typedefs.js ([@fredj](https://github.com/fredj))
+ * [#8016](https://github.com/openlayers/openlayers/pull/8016) - Move olx.layer.BaseOptions to ol/layer/Base ([@romanzoller](https://github.com/romanzoller))
+ * [#8005](https://github.com/openlayers/openlayers/pull/8005) - Add vector tile selection example ([@chrismayer](https://github.com/chrismayer))
+ * [#7999](https://github.com/openlayers/openlayers/pull/7999) - More Jsdoc module fixes ([@fredj](https://github.com/fredj))
+ * [#7998](https://github.com/openlayers/openlayers/pull/7998) - More Jsdoc module fixes ([@fredj](https://github.com/fredj))
+ * [#7992](https://github.com/openlayers/openlayers/pull/7992) - Fix freeze on export PDF example ([@trenneman](https://github.com/trenneman))
+ * [#7997](https://github.com/openlayers/openlayers/pull/7997) - Jsdoc module ([@fredj](https://github.com/fredj))
+ * [#7986](https://github.com/openlayers/openlayers/pull/7986) - Use module syntax for type annotations ([@fredj](https://github.com/fredj))
+ * [#7996](https://github.com/openlayers/openlayers/pull/7996) - 4.6.5 ([@openlayers](https://github.com/openlayers))
+ * [#7993](https://github.com/openlayers/openlayers/pull/7993) - Module types ([@tschaub](https://github.com/tschaub))
+ * [#7989](https://github.com/openlayers/openlayers/pull/7989) - Redistribute olx types for ol/interaction ([@ahocevar](https://github.com/ahocevar))
+ * [#7991](https://github.com/openlayers/openlayers/pull/7991) - Fix some type paths ([@ahocevar](https://github.com/ahocevar))
+ * [#7985](https://github.com/openlayers/openlayers/pull/7985) - Use path type instead of ol.tilegrid ([@fredj](https://github.com/fredj))
+ * [#7983](https://github.com/openlayers/openlayers/pull/7983) - Use path type instead of ol.Extent ([@ahocevar](https://github.com/ahocevar))
+ * [#7980](https://github.com/openlayers/openlayers/pull/7980) - Use module syntax for type annotations ([@fredj](https://github.com/fredj))
+ * [#7979](https://github.com/openlayers/openlayers/pull/7979) - Mark optional property with square brackets ([@fredj](https://github.com/fredj))
+ * [#7975](https://github.com/openlayers/openlayers/pull/7975) - Mark optional property with square brackets ([@fredj](https://github.com/fredj))
+ * [#7960](https://github.com/openlayers/openlayers/pull/7960) - Fix memory leak in CanvasImageRenderer ([@PetroDE](https://github.com/PetroDE))
+ * [#7974](https://github.com/openlayers/openlayers/pull/7974) - Fix spelling ([@fredj](https://github.com/fredj))
+ * [#7973](https://github.com/openlayers/openlayers/pull/7973) - Remove setAttributeNS function from ol/xml ([@fredj](https://github.com/fredj))
+ * [#7971](https://github.com/openlayers/openlayers/pull/7971) - Use module syntax for type annotations ([@tschaub](https://github.com/tschaub))
+ * [#7968](https://github.com/openlayers/openlayers/pull/7968) - More types in the right places ([@tschaub](https://github.com/tschaub))
+ * [#7966](https://github.com/openlayers/openlayers/pull/7966) - Remove namespaces from olx.js ([@tschaub](https://github.com/tschaub))
+ * [#7965](https://github.com/openlayers/openlayers/pull/7965) - Redistribute types from externs/olx.js ([@tschaub](https://github.com/tschaub))
+ * [#7608](https://github.com/openlayers/openlayers/pull/7608) - Facilitate the removal of externs/olx.js ([@tschaub](https://github.com/tschaub))
+ * [#7964](https://github.com/openlayers/openlayers/pull/7964) - Coordinate type typo ([@tschaub](https://github.com/tschaub))
+ * [#7961](https://github.com/openlayers/openlayers/pull/7961) - Correct type for style ([@tschaub](https://github.com/tschaub))
+ * [#7958](https://github.com/openlayers/openlayers/pull/7958) - miscellaneous fixes to the types annotation ([@fredj](https://github.com/fredj))
+ * [#7953](https://github.com/openlayers/openlayers/pull/7953) - Get rid of externs/olx.js and src/ol/typedefs.js typedefs for ol/ and ol/events/ ([@ahocevar](https://github.com/ahocevar))
+ * [#7956](https://github.com/openlayers/openlayers/pull/7956) - Make sure namespaces are populated after they were created ([@ahocevar](https://github.com/ahocevar))
+ * [#7952](https://github.com/openlayers/openlayers/pull/7952) - Fix typo in jsdoc type ([@fredj](https://github.com/fredj))
+ * [#7948](https://github.com/openlayers/openlayers/pull/7948) - Better type definition ([@fredj](https://github.com/fredj))
+ * [#7946](https://github.com/openlayers/openlayers/pull/7946) - New typedef syntax and module path types for some modules ([@ahocevar](https://github.com/ahocevar))
+ * [#7944](https://github.com/openlayers/openlayers/pull/7944) - Make wrap work with points in the vector-labels example ([@ahocevar](https://github.com/ahocevar))
+ * [#7933](https://github.com/openlayers/openlayers/pull/7933) - Better code indentation ([@fredj](https://github.com/fredj))
+ * [#7930](https://github.com/openlayers/openlayers/pull/7930) - Use listen function instead of on ([@openlayers](https://github.com/openlayers))
+ * [#7929](https://github.com/openlayers/openlayers/pull/7929) - Remove unused devDependencies ([@openlayers](https://github.com/openlayers))
+ * [#7927](https://github.com/openlayers/openlayers/pull/7927) - Remove unused deps, unused tasks, and outdated info ([@tschaub](https://github.com/tschaub))
+ * [#7923](https://github.com/openlayers/openlayers/pull/7923) - Fix exports and use of constants ([@ahocevar](https://github.com/ahocevar))
+ * [#7914](https://github.com/openlayers/openlayers/pull/7914) - Some easy window cleanups ([@gberaudo](https://github.com/gberaudo))
+ * [#7915](https://github.com/openlayers/openlayers/pull/7915) - Untie feature loader and XML code ([@gberaudo](https://github.com/gberaudo))
+ * [#7918](https://github.com/openlayers/openlayers/pull/7918) - Move the nullFunction to ol/functions ([@fredj](https://github.com/fredj))
+ * [#7910](https://github.com/openlayers/openlayers/pull/7910) - Better code indentation ([@fredj](https://github.com/fredj))
+ * [#7904](https://github.com/openlayers/openlayers/pull/7904) - Add focus condition, e.g. for wheel zoom ([@ahocevar](https://github.com/ahocevar))
+ * [#7902](https://github.com/openlayers/openlayers/pull/7902) - Add a unicode symbol for symbol font detection ([@ahocevar](https://github.com/ahocevar))
+ * [#7899](https://github.com/openlayers/openlayers/pull/7899) - Use nomnom@1.8.1 ([@tschaub](https://github.com/tschaub))
+ * [#7897](https://github.com/openlayers/openlayers/pull/7897) - Better variables scoping ([@fredj](https://github.com/fredj))
+ * [#7894](https://github.com/openlayers/openlayers/pull/7894) - More named exports, fewer static members ([@tschaub](https://github.com/tschaub))
+ * [#7881](https://github.com/openlayers/openlayers/pull/7881) - Better variables scoping ([@fredj](https://github.com/fredj))
+ * [#7888](https://github.com/openlayers/openlayers/pull/7888) - Rework away static members from pointer related classes ([@bjornharrtell](https://github.com/bjornharrtell))
+ * [#7880](https://github.com/openlayers/openlayers/pull/7880) - Named exports from ol/style/Style ([@tschaub](https://github.com/tschaub))
+ * [#7872](https://github.com/openlayers/openlayers/pull/7872) - More named export ([@fredj](https://github.com/fredj))
+ * [#7874](https://github.com/openlayers/openlayers/pull/7874) - Cleaning up exports ([@tschaub](https://github.com/tschaub))
+ * [#7871](https://github.com/openlayers/openlayers/pull/7871) - Memory optimization ([@fredj](https://github.com/fredj))
+ * [#7870](https://github.com/openlayers/openlayers/pull/7870) - Use exported function from ol/webgl ([@fredj](https://github.com/fredj))
+ * [#7868](https://github.com/openlayers/openlayers/pull/7868) - Named export ([@fredj](https://github.com/fredj))
+ * [#7861](https://github.com/openlayers/openlayers/pull/7861) - Named exports from ol/structs/PriorityQueue ([@fredj](https://github.com/fredj))
+ * [#7860](https://github.com/openlayers/openlayers/pull/7860) - Don't export private constant from ol/webgl ([@openlayers](https://github.com/openlayers))
+ * [#7855](https://github.com/openlayers/openlayers/pull/7855) - More named exports ([@tschaub](https://github.com/tschaub))
+ * [#7851](https://github.com/openlayers/openlayers/pull/7851) - Replacing static functions with named exports ([@tschaub](https://github.com/tschaub))
+ * [#7852](https://github.com/openlayers/openlayers/pull/7852) - Rename extent ([@nicholas-l](https://github.com/nicholas-l))
+ * [#7840](https://github.com/openlayers/openlayers/pull/7840) - More export renaming ([@raiyni](https://github.com/raiyni))
+ * [#7843](https://github.com/openlayers/openlayers/pull/7843) - Better code indentation ([@fredj](https://github.com/fredj))
+ * [#7842](https://github.com/openlayers/openlayers/pull/7842) - Allow setting the label cache size ([@ahocevar](https://github.com/ahocevar))
+ * [#7791](https://github.com/openlayers/openlayers/pull/7791) - Named exports from ol/tilecoord ([@marcjansen](https://github.com/marcjansen))
+ * [#7835](https://github.com/openlayers/openlayers/pull/7835) - Add and use a constant for the collapsed CSS class ([@marcjansen](https://github.com/marcjansen))
+ * [#7834](https://github.com/openlayers/openlayers/pull/7834) - Named exports from ol/transform ([@marcjansen](https://github.com/marcjansen))
+ * [#7831](https://github.com/openlayers/openlayers/pull/7831) - Add new maxTilesLoading option to ol/PluggableMap ([@fredj](https://github.com/fredj))
+ * [#7833](https://github.com/openlayers/openlayers/pull/7833) - Fix createEmptyTexture function call in ol/webgl/Context ([@fredj](https://github.com/fredj))
+ * [#7832](https://github.com/openlayers/openlayers/pull/7832) - Webgl Layer and Context named exports ([@fgravin](https://github.com/fgravin))
+ * [#7826](https://github.com/openlayers/openlayers/pull/7826) - Better code indentation and modules renaming ([@fredj](https://github.com/fredj))
+ * [#7828](https://github.com/openlayers/openlayers/pull/7828) - Refactor constraints static methods to module functions ([@bjornharrtell](https://github.com/bjornharrtell))
+ * [#7827](https://github.com/openlayers/openlayers/pull/7827) - Named exports from ol/render/canvas ([@tschaub](https://github.com/tschaub))
+ * [#7823](https://github.com/openlayers/openlayers/pull/7823) - Replace static members with named exports ([@fredj](https://github.com/fredj))
+ * [#7820](https://github.com/openlayers/openlayers/pull/7820) - ol/geom/flat/* exports ([@raiyni](https://github.com/raiyni))
+ * [#7824](https://github.com/openlayers/openlayers/pull/7824) - Fix code indentation ([@fredj](https://github.com/fredj))
+ * [#7821](https://github.com/openlayers/openlayers/pull/7821) - Add new canvas instruction array in ol/render/canvas/Instruction ([@fredj](https://github.com/fredj))
+ * [#7817](https://github.com/openlayers/openlayers/pull/7817) - Remove more private static members ([@tschaub](https://github.com/tschaub))
+ * [#7814](https://github.com/openlayers/openlayers/pull/7814) - Remove more private static members ([@tschaub](https://github.com/tschaub))
+ * [#7816](https://github.com/openlayers/openlayers/pull/7816) - Use toString instead of asString in asColorLike ([@openlayers](https://github.com/openlayers))
+ * [#7811](https://github.com/openlayers/openlayers/pull/7811) - Remove ol.FeatureStyleFunction support ([@fredj](https://github.com/fredj))
+ * [#7815](https://github.com/openlayers/openlayers/pull/7815) -  Remove private statics from webgl related modules ([@bjornharrtell](https://github.com/bjornharrtell))
+ * [#7803](https://github.com/openlayers/openlayers/pull/7803) - Remove private static members from constructors ([@tschaub](https://github.com/tschaub))
+ * [#7808](https://github.com/openlayers/openlayers/pull/7808) - Make sure the requested image size matches the desired ratio ([@ahocevar](https://github.com/ahocevar))
+ * [#7807](https://github.com/openlayers/openlayers/pull/7807) - Run typecheck after tests, because of its current verbosity ([@ahocevar](https://github.com/ahocevar))
+ * [#7805](https://github.com/openlayers/openlayers/pull/7805) - Remove private static members from constructors ([@fredj](https://github.com/fredj))
+ * [#7806](https://github.com/openlayers/openlayers/pull/7806) - Fix rotate import ([@ahocevar](https://github.com/ahocevar))
+ * [#7800](https://github.com/openlayers/openlayers/pull/7800) - More named exports ([@tschaub](https://github.com/tschaub))
+ * [#7741](https://github.com/openlayers/openlayers/pull/7741) - Type checking and full build creation ([@ahocevar](https://github.com/ahocevar))
+ * [#7797](https://github.com/openlayers/openlayers/pull/7797) - Better default export names for WebGL modules ([@tschaub](https://github.com/tschaub))
+ * [#7794](https://github.com/openlayers/openlayers/pull/7794) - Call animation callback in a timeout ([@tschaub](https://github.com/tschaub))
+ * [#7793](https://github.com/openlayers/openlayers/pull/7793) - More renaming of default exports ([@tschaub](https://github.com/tschaub))
+ * [#7799](https://github.com/openlayers/openlayers/pull/7799) - Use tmpSize to reduce garbage generation ([@fredj](https://github.com/fredj))
+ * [#7788](https://github.com/openlayers/openlayers/pull/7788) - Fix shaders generation ([@fredj](https://github.com/fredj))
+ * [#7789](https://github.com/openlayers/openlayers/pull/7789) - Use STATIC_DRAW as default WebGL buffer usage ([@fredj](https://github.com/fredj))
+ * [#7787](https://github.com/openlayers/openlayers/pull/7787) - More renaming ([@fredj](https://github.com/fredj))
+ * [#7782](https://github.com/openlayers/openlayers/pull/7782) - Named exports from specific proj modules ([@tschaub](https://github.com/tschaub))
+ * [#7780](https://github.com/openlayers/openlayers/pull/7780) - More named exports ([@tschaub](https://github.com/tschaub))
+ * [#7783](https://github.com/openlayers/openlayers/pull/7783) - Named exports from ol/xml ([@raiyni](https://github.com/raiyni))
+ * [#7774](https://github.com/openlayers/openlayers/pull/7774) - Pass destination extent to avoid garbage generation ([@fredj](https://github.com/fredj))
+ * [#7771](https://github.com/openlayers/openlayers/pull/7771) - Named exports from loadingstrategy ([@marcjansen](https://github.com/marcjansen))
+ * [#7772](https://github.com/openlayers/openlayers/pull/7772) - Named exports from filter module ([@marcjansen](https://github.com/marcjansen))
+ * [#7770](https://github.com/openlayers/openlayers/pull/7770) - Rename _ol_render_Box_ to RenderBox ([@marcjansen](https://github.com/marcjansen))
+ * [#7763](https://github.com/openlayers/openlayers/pull/7763) - Use the temporary extent in VectorTileLayer ([@fredj](https://github.com/fredj))
+ * [#7765](https://github.com/openlayers/openlayers/pull/7765) - Named exports from events condition ([@marcjansen](https://github.com/marcjansen))
+ * [#7767](https://github.com/openlayers/openlayers/pull/7767) - Transformation functions: Fix spelling and use the symbol × ([@marcjansen](https://github.com/marcjansen))
+ * [#7764](https://github.com/openlayers/openlayers/pull/7764) - Named exports from ol/has ([@tschaub](https://github.com/tschaub))
+ * [#7761](https://github.com/openlayers/openlayers/pull/7761) - Rename _ol_render_canvas_Instruction_ to CanvasInstruction ([@fredj](https://github.com/fredj))
+ * [#7749](https://github.com/openlayers/openlayers/pull/7749) - Check if the sketch feature is defined in finishDrawing ([@fredj](https://github.com/fredj))
+ * [#7745](https://github.com/openlayers/openlayers/pull/7745) - More named exports ([@fredj](https://github.com/fredj))
+ * [#7743](https://github.com/openlayers/openlayers/pull/7743) - Set enableHighAccuracy in geolocation example ([@fredj](https://github.com/fredj))
+ * [#7738](https://github.com/openlayers/openlayers/pull/7738) - Named exports from ol/events ([@tschaub](https://github.com/tschaub))
+ * [#7724](https://github.com/openlayers/openlayers/pull/7724) - Update prism library ([@fredj](https://github.com/fredj))
+ * [#7727](https://github.com/openlayers/openlayers/pull/7727) - Deactivate transition effect for semi transparent layer example ([@fredj](https://github.com/fredj))
+ * [#7726](https://github.com/openlayers/openlayers/pull/7726) - Named exports from ol/string ([@fredj](https://github.com/fredj))
+ * [#7725](https://github.com/openlayers/openlayers/pull/7725) - Remove extra comment ([@fredj](https://github.com/fredj))
+ * [#7721](https://github.com/openlayers/openlayers/pull/7721) - More renaming ([@fredj](https://github.com/fredj))
+ * [#7716](https://github.com/openlayers/openlayers/pull/7716) - Better variables scoping ([@fredj](https://github.com/fredj))
+ * [#7698](https://github.com/openlayers/openlayers/pull/7698) - Fix for loop in color test ([@fredj](https://github.com/fredj))
+ * [#7703](https://github.com/openlayers/openlayers/pull/7703) - Improved drawing experience on touch devices ([@ahocevar](https://github.com/ahocevar))
+ * [#7713](https://github.com/openlayers/openlayers/pull/7713) - Better variables scoping ([@fredj](https://github.com/fredj))
+ * [#7711](https://github.com/openlayers/openlayers/pull/7711) - Do not use (I)CLA anymore ([@bartvde](https://github.com/bartvde))
+ * [#7709](https://github.com/openlayers/openlayers/pull/7709) - More named export ([@fredj](https://github.com/fredj))
+ * [#7705](https://github.com/openlayers/openlayers/pull/7705) - More renaming ([@fredj](https://github.com/fredj))
+ * [#7700](https://github.com/openlayers/openlayers/pull/7700) - Fix ScaleLine control for Projections in degrees ([@pedros007](https://github.com/pedros007))
+ * [#7697](https://github.com/openlayers/openlayers/pull/7697) - Use const and let ([@tschaub](https://github.com/tschaub))
+ * [#7695](https://github.com/openlayers/openlayers/pull/7695) - More renaming ([@tschaub](https://github.com/tschaub))
+ * [#7693](https://github.com/openlayers/openlayers/pull/7693) - More import renaming ([@fredj](https://github.com/fredj))
+ * [#7678](https://github.com/openlayers/openlayers/pull/7678) - Add jsDelivr hits badge ([@LukasDrgon](https://github.com/LukasDrgon))
+ * [#7686](https://github.com/openlayers/openlayers/pull/7686) - More import renaming ([@tschaub](https://github.com/tschaub))
+ * [#7669](https://github.com/openlayers/openlayers/pull/7669) - Use declutter tree only for text and image replays ([@ahocevar](https://github.com/ahocevar))
+ * [#7683](https://github.com/openlayers/openlayers/pull/7683) - Move IGCZ enum to src/ol/format/IGC.js ([@fredj](https://github.com/fredj))
+ * [#7682](https://github.com/openlayers/openlayers/pull/7682) - Add new condition to MouseWheelZoom interaction ([@fredj](https://github.com/fredj))
+ * [#7676](https://github.com/openlayers/openlayers/pull/7676) - Check fonts against two reference fonts ([@ahocevar](https://github.com/ahocevar))
+ * [#7668](https://github.com/openlayers/openlayers/pull/7668) - Hit detect text background ([@ahocevar](https://github.com/ahocevar))
+ * [#7661](https://github.com/openlayers/openlayers/pull/7661) - Background fill stroke ([@ahocevar](https://github.com/ahocevar))
+ * [#7654](https://github.com/openlayers/openlayers/pull/7654) - Add named export for transformWithOptions function ([@fredj](https://github.com/fredj))
+ * [#7652](https://github.com/openlayers/openlayers/pull/7652) - More renaming ([@fredj](https://github.com/fredj))
+ * [#7649](https://github.com/openlayers/openlayers/pull/7649) - Named Map export for ol/Map ([@raiyni](https://github.com/raiyni))
+ * [#7646](https://github.com/openlayers/openlayers/pull/7646) - Named export for Polyline format and SimpleGeometry ([@openlayers](https://github.com/openlayers))
+ * [#7650](https://github.com/openlayers/openlayers/pull/7650) -  Rename _ol_PluggableMap_ to PluggableMap ([@fredj](https://github.com/fredj))
+ * [#7642](https://github.com/openlayers/openlayers/pull/7642) - Don't store private function into GPX ([@fredj](https://github.com/fredj))
+ * [#7643](https://github.com/openlayers/openlayers/pull/7643) - Replace ol/Sphere with ol/sphere ([@tschaub](https://github.com/tschaub))
+ * [#7644](https://github.com/openlayers/openlayers/pull/7644) - Named exports from ol/math module ([@raiyni](https://github.com/raiyni))
+ * [#7636](https://github.com/openlayers/openlayers/pull/7636) - Named exports from the ol/array module ([@marcjansen](https://github.com/marcjansen))
+ * [#7614](https://github.com/openlayers/openlayers/pull/7614) - Remove opt_this from the API ([@KlausBenndorf](https://github.com/KlausBenndorf))
+ * [#7640](https://github.com/openlayers/openlayers/pull/7640) - Remove unneeded and already skipped test ([@openlayers](https://github.com/openlayers))
+ * [#7637](https://github.com/openlayers/openlayers/pull/7637) - Named exports from the ol/color module ([@marcjansen](https://github.com/marcjansen))
+ * [#7639](https://github.com/openlayers/openlayers/pull/7639) - Don't store private function into GeoJSON ([@fredj](https://github.com/fredj))
+ * [#7635](https://github.com/openlayers/openlayers/pull/7635) - More module renaming ([@fredj](https://github.com/fredj))
+ * [#7632](https://github.com/openlayers/openlayers/pull/7632) - Named exports from ol/css module ([@marcjansen](https://github.com/marcjansen))
+ * [#7634](https://github.com/openlayers/openlayers/pull/7634) - Rename _ol_layer_Tile_ to TileLayer ([@marcjansen](https://github.com/marcjansen))
+ * [#7633](https://github.com/openlayers/openlayers/pull/7633) - Import assert function directly ([@marcjansen](https://github.com/marcjansen))
+ * [#7631](https://github.com/openlayers/openlayers/pull/7631) - More named export and rename ([@fredj](https://github.com/fredj))
+ * [#7627](https://github.com/openlayers/openlayers/pull/7627) - Nicer import name ([@fredj](https://github.com/fredj))
+ * [#7622](https://github.com/openlayers/openlayers/pull/7622) - Named export ([@fredj](https://github.com/fredj))
+ * [#7624](https://github.com/openlayers/openlayers/pull/7624) - Remove eslint-plugin-openlayers-internal rules ([@fredj](https://github.com/fredj))
+ * [#7625](https://github.com/openlayers/openlayers/pull/7625) - Named export for ol/control and ol/interaction ([@fredj](https://github.com/fredj))
+ * [#7623](https://github.com/openlayers/openlayers/pull/7623) - Named export for ol/tileurlfunction ([@fredj](https://github.com/fredj))
+ * [#7621](https://github.com/openlayers/openlayers/pull/7621) - Replace ZeroClipboard with Clipboard.js ([@fredj](https://github.com/fredj))
+ * [#7620](https://github.com/openlayers/openlayers/pull/7620) - Rename variables in format modules ([@tschaub](https://github.com/tschaub))
+ * [#7619](https://github.com/openlayers/openlayers/pull/7619) - More variable renaming ([@fredj](https://github.com/fredj))
+ * [#7612](https://github.com/openlayers/openlayers/pull/7612) - Better import name for _ol_ext_* import ([@fredj](https://github.com/fredj))
+ * [#7611](https://github.com/openlayers/openlayers/pull/7611) - Change olx.SphereMetricOptions to SphereMetricOptions ([@fredj](https://github.com/fredj))
+ * [#7615](https://github.com/openlayers/openlayers/pull/7615) - Remove logos ([@tschaub](https://github.com/tschaub))
+ * [#7610](https://github.com/openlayers/openlayers/pull/7610) - More variable renaming ([@fredj](https://github.com/fredj))
+ * [#7609](https://github.com/openlayers/openlayers/pull/7609) - Redistribute a few types and docs ([@tschaub](https://github.com/tschaub))
+ * [#7598](https://github.com/openlayers/openlayers/pull/7598) - Modular proj4 integration ([@ahocevar](https://github.com/ahocevar))
+ * [#7607](https://github.com/openlayers/openlayers/pull/7607) - Rename interaction variables ([@tschaub](https://github.com/tschaub))
+ * [#7599](https://github.com/openlayers/openlayers/pull/7599) - Rename event variables ([@marcjansen](https://github.com/marcjansen))
+ * [#7605](https://github.com/openlayers/openlayers/pull/7605) - Better import and class name in ol/format/filter/ ([@fredj](https://github.com/fredj))
+ * [#7604](https://github.com/openlayers/openlayers/pull/7604) - Named exports from ol/functions ([@fredj](https://github.com/fredj))
+ * [#7603](https://github.com/openlayers/openlayers/pull/7603) - Simplify default export ([@fredj](https://github.com/fredj))
+ * [#7602](https://github.com/openlayers/openlayers/pull/7602) - Remove now unused DEVICE_ORIENTATION ([@fredj](https://github.com/fredj))
+ * [#7597](https://github.com/openlayers/openlayers/pull/7597) - More es6 named export ([@fredj](https://github.com/fredj))
+ * [#7600](https://github.com/openlayers/openlayers/pull/7600) - Simplify default export of ol/events/KeyCode ([@marcjansen](https://github.com/marcjansen))
+ * [#7594](https://github.com/openlayers/openlayers/pull/7594) - Rename control variables ([@tschaub](https://github.com/tschaub))
+ * [#7593](https://github.com/openlayers/openlayers/pull/7593) - Simplify default export ([@tschaub](https://github.com/tschaub))
+ * [#7591](https://github.com/openlayers/openlayers/pull/7591) - Rename geometry variables ([@tschaub](https://github.com/tschaub))
+ * [#7586](https://github.com/openlayers/openlayers/pull/7586) - Named exports from ol/dom ([@fredj](https://github.com/fredj))
+ * [#7581](https://github.com/openlayers/openlayers/pull/7581) - Named exports from ol/proj ([@tschaub](https://github.com/tschaub))
+ * [#7585](https://github.com/openlayers/openlayers/pull/7585) - Remove leftovers olx.animation typedefs ([@fredj](https://github.com/fredj))
+ * [#7584](https://github.com/openlayers/openlayers/pull/7584) - Named exports from ol/easing ([@fredj](https://github.com/fredj))
+ * [#7582](https://github.com/openlayers/openlayers/pull/7582) - Remove default export from ol/extent ([@ahocevar](https://github.com/ahocevar))
+ * [#7580](https://github.com/openlayers/openlayers/pull/7580) - No default export from lowercase modules ([@tschaub](https://github.com/tschaub))
+ * [#7575](https://github.com/openlayers/openlayers/pull/7575) - Add named exports for extent ([@ahocevar](https://github.com/ahocevar))
+ * [#7579](https://github.com/openlayers/openlayers/pull/7579) - VectorImageTile: call changed() before removing listeners on dispose ([@mbleichner](https://github.com/mbleichner))
+ * [#7578](https://github.com/openlayers/openlayers/pull/7578) - Remove deprecated functionality from 4.x ([@tschaub](https://github.com/tschaub))
+ * [#7577](https://github.com/openlayers/openlayers/pull/7577) - Redistribute things in ol/index.js ([@tschaub](https://github.com/tschaub))
+ * [#7576](https://github.com/openlayers/openlayers/pull/7576) - Named exports from ol/index.js ([@tschaub](https://github.com/tschaub))
+ * [#7570](https://github.com/openlayers/openlayers/pull/7570) - Transform sources to ES modules ([@tschaub](https://github.com/tschaub))
+ * [#7569](https://github.com/openlayers/openlayers/pull/7569) - Remove unnecessary require ([@tschaub](https://github.com/tschaub))
+ * [#7568](https://github.com/openlayers/openlayers/pull/7568) - Remove unneeded configs from test ([@ahocevar](https://github.com/ahocevar))
+ * [#7566](https://github.com/openlayers/openlayers/pull/7566) - Proper projection construction ([@tschaub](https://github.com/tschaub))
+ * [#7565](https://github.com/openlayers/openlayers/pull/7565) - Release v4.6.4 ([@openlayers](https://github.com/openlayers))
+ * [#7563](https://github.com/openlayers/openlayers/pull/7563) - Use full precision for the declutter box ([@ahocevar](https://github.com/ahocevar))
+ * [#7559](https://github.com/openlayers/openlayers/pull/7559) - Handle skipping and unskipping features with renderMode: 'image' ([@ahocevar](https://github.com/ahocevar))
+ * [#7562](https://github.com/openlayers/openlayers/pull/7562) - Remove unused, confusing projection code ([@ahocevar](https://github.com/ahocevar))
+ * [#7555](https://github.com/openlayers/openlayers/pull/7555) - Release v4.6.3 ([@openlayers](https://github.com/openlayers))
+ * [#7554](https://github.com/openlayers/openlayers/pull/7554) - Only compose image vector frame when the replay group has changed ([@ahocevar](https://github.com/ahocevar))
+ * [#7550](https://github.com/openlayers/openlayers/pull/7550) - Update examples to d3.js v4 ([@fredj](https://github.com/fredj))
+ * [#7548](https://github.com/openlayers/openlayers/pull/7548) - Fix pull request link ([@openlayers](https://github.com/openlayers))
+ * [#7547](https://github.com/openlayers/openlayers/pull/7547) - Release v4.6.2 ([@openlayers](https://github.com/openlayers))
+ * [#7546](https://github.com/openlayers/openlayers/pull/7546) - Do not request features for wrapped extent ([@ahocevar](https://github.com/ahocevar))
+ * [#7545](https://github.com/openlayers/openlayers/pull/7545) - Release v4.6.1 ([@openlayers](https://github.com/openlayers))
+ * [#7543](https://github.com/openlayers/openlayers/pull/7543) - Donut polygon labels do not get a chance to get rendered ([@ahocevar](https://github.com/ahocevar))
+ * [#7542](https://github.com/openlayers/openlayers/pull/7542) - Still respect deprecated exceedLength option ([@ahocevar](https://github.com/ahocevar))
+ * [#7541](https://github.com/openlayers/openlayers/pull/7541) - Fix case of vectorrendertype.js ([@ahocevar](https://github.com/ahocevar))
+
+
+<details>
+ <summary>Dependency Updates</summary>
+
+ * [#8315](https://github.com/openlayers/openlayers/pull/8315) - Update eslint to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#8309](https://github.com/openlayers/openlayers/pull/8309) - Update eslint to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#8311](https://github.com/openlayers/openlayers/pull/8311) - Update webpack to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#8310](https://github.com/openlayers/openlayers/pull/8310) - Update rollup to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#8297](https://github.com/openlayers/openlayers/pull/8297) - Update rollup to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#8293](https://github.com/openlayers/openlayers/pull/8293) - Update rollup to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#8285](https://github.com/openlayers/openlayers/pull/8285) - Update google-closure-compiler to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#8275](https://github.com/openlayers/openlayers/pull/8275) - Update serve to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#8271](https://github.com/openlayers/openlayers/pull/8271) - chore(package): update google-closure-compiler to version 20180610.0.1 ([@openlayers](https://github.com/openlayers))
+ * [#8270](https://github.com/openlayers/openlayers/pull/8270) - chore(package): update rollup to version 0.60.7 ([@openlayers](https://github.com/openlayers))
+ * [#8266](https://github.com/openlayers/openlayers/pull/8266) - chore(package): update rollup to version 0.60.4 ([@openlayers](https://github.com/openlayers))
+ * [#8261](https://github.com/openlayers/openlayers/pull/8261) - Update rollup to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#8260](https://github.com/openlayers/openlayers/pull/8260) - Update sinon to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#8252](https://github.com/openlayers/openlayers/pull/8252) - Update rollup to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#8248](https://github.com/openlayers/openlayers/pull/8248) - Update serve to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#8247](https://github.com/openlayers/openlayers/pull/8247) - Update rollup to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#8241](https://github.com/openlayers/openlayers/pull/8241) - Update recast to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#8230](https://github.com/openlayers/openlayers/pull/8230) - Update serve to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#8208](https://github.com/openlayers/openlayers/pull/8208) - Update marked to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#8205](https://github.com/openlayers/openlayers/pull/8205) - Update mocha to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#8179](https://github.com/openlayers/openlayers/pull/8179) - Update google-closure-compiler to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#8146](https://github.com/openlayers/openlayers/pull/8146) - Update coveralls to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#8145](https://github.com/openlayers/openlayers/pull/8145) - Update fs-extra to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#8140](https://github.com/openlayers/openlayers/pull/8140) - Update sinon to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#8131](https://github.com/openlayers/openlayers/pull/8131) - Update babel-plugin-jsdoc-closure to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#8130](https://github.com/openlayers/openlayers/pull/8130) - Update babel-plugin-jsdoc-closure to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#8128](https://github.com/openlayers/openlayers/pull/8128) - Update babel-plugin-jsdoc-closure to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#8124](https://github.com/openlayers/openlayers/pull/8124) - Update babel-plugin-jsdoc-closure to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#8102](https://github.com/openlayers/openlayers/pull/8102) - Update babel-plugin-jsdoc-closure to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#8095](https://github.com/openlayers/openlayers/pull/8095) - Update babel-plugin-jsdoc-closure to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#8094](https://github.com/openlayers/openlayers/pull/8094) - Update babel-plugin-jsdoc-closure to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#8093](https://github.com/openlayers/openlayers/pull/8093) - chore(package): update serve to version 6.5.5 ([@openlayers](https://github.com/openlayers))
+ * [#8090](https://github.com/openlayers/openlayers/pull/8090) - chore(package): update url-polyfill to version 1.0.13 ([@openlayers](https://github.com/openlayers))
+ * [#8091](https://github.com/openlayers/openlayers/pull/8091) - chore(package): update karma-firefox-launcher to version 1.1.0 ([@openlayers](https://github.com/openlayers))
+ * [#8085](https://github.com/openlayers/openlayers/pull/8085) - Update mocha to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#8071](https://github.com/openlayers/openlayers/pull/8071) - Update mocha to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#8060](https://github.com/openlayers/openlayers/pull/8060) - Update google-closure-compiler to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#8039](https://github.com/openlayers/openlayers/pull/8039) - Update google-closure-compiler to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#8028](https://github.com/openlayers/openlayers/pull/8028) - Update marked to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#8019](https://github.com/openlayers/openlayers/pull/8019) - Update mocha to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#8017](https://github.com/openlayers/openlayers/pull/8017) - Update marked to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#8018](https://github.com/openlayers/openlayers/pull/8018) - Update recast to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#8014](https://github.com/openlayers/openlayers/pull/8014) - Update recast to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#8009](https://github.com/openlayers/openlayers/pull/8009) - chore(package): update sinon to version 5.0.0 ([@openlayers](https://github.com/openlayers))
+ * [#8008](https://github.com/openlayers/openlayers/pull/8008) - Update eslint to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#8000](https://github.com/openlayers/openlayers/pull/8000) - Update karma-webpack to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#7990](https://github.com/openlayers/openlayers/pull/7990) - Update eslint to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#7984](https://github.com/openlayers/openlayers/pull/7984) - Update sinon to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#7981](https://github.com/openlayers/openlayers/pull/7981) - Update sinon to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#7977](https://github.com/openlayers/openlayers/pull/7977) - Update sinon to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#7972](https://github.com/openlayers/openlayers/pull/7972) - Update sinon to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#7963](https://github.com/openlayers/openlayers/pull/7963) - chore(package): update url-polyfill to version 1.0.11 ([@openlayers](https://github.com/openlayers))
+ * [#7962](https://github.com/openlayers/openlayers/pull/7962) - chore(package): update serve to version 6.5.2 ([@openlayers](https://github.com/openlayers))
+ * [#7959](https://github.com/openlayers/openlayers/pull/7959) - Update babel-plugin-jsdoc-closure to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#7957](https://github.com/openlayers/openlayers/pull/7957) - Update recast to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#7950](https://github.com/openlayers/openlayers/pull/7950) - Update mocha to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#7945](https://github.com/openlayers/openlayers/pull/7945) - Update babel-plugin-jsdoc-closure to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#7943](https://github.com/openlayers/openlayers/pull/7943) - Update mocha to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#7940](https://github.com/openlayers/openlayers/pull/7940) - Update babel-plugin-jsdoc-closure to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#7938](https://github.com/openlayers/openlayers/pull/7938) - Update mocha to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#7925](https://github.com/openlayers/openlayers/pull/7925) - Update eslint to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#7921](https://github.com/openlayers/openlayers/pull/7921) - Update clean-css-cli to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#7916](https://github.com/openlayers/openlayers/pull/7916) - chore(package): update html-webpack-plugin to version 3.0.1 ([@openlayers](https://github.com/openlayers))
+ * [#7905](https://github.com/openlayers/openlayers/pull/7905) - Update karma-webpack to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#7903](https://github.com/openlayers/openlayers/pull/7903) - Update marked to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#7901](https://github.com/openlayers/openlayers/pull/7901) - Update karma-webpack to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#7898](https://github.com/openlayers/openlayers/pull/7898) - chore(package): update karma-webpack to version 2.0.11 ([@openlayers](https://github.com/openlayers))
+ * [#7893](https://github.com/openlayers/openlayers/pull/7893) - Update sinon to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#7891](https://github.com/openlayers/openlayers/pull/7891) - chore(package): update recast to version 0.14.4 ([@openlayers](https://github.com/openlayers))
+ * [#7886](https://github.com/openlayers/openlayers/pull/7886) - Update sinon to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#7882](https://github.com/openlayers/openlayers/pull/7882) - Update sinon to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#7876](https://github.com/openlayers/openlayers/pull/7876) - Update recast to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#7877](https://github.com/openlayers/openlayers/pull/7877) - Update webpack-merge to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#7865](https://github.com/openlayers/openlayers/pull/7865) - Update marked to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#7866](https://github.com/openlayers/openlayers/pull/7866) - Update eslint to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#7867](https://github.com/openlayers/openlayers/pull/7867) - Update recast to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#7858](https://github.com/openlayers/openlayers/pull/7858) - Update recast to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#7850](https://github.com/openlayers/openlayers/pull/7850) - Update marked to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#7849](https://github.com/openlayers/openlayers/pull/7849) - Update recast to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#7848](https://github.com/openlayers/openlayers/pull/7848) - Update nomnom to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#7847](https://github.com/openlayers/openlayers/pull/7847) - Update eslint to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#7845](https://github.com/openlayers/openlayers/pull/7845) - chore(package): update marked to version 0.3.14 ([@openlayers](https://github.com/openlayers))
+ * [#7841](https://github.com/openlayers/openlayers/pull/7841) - Greenkeeper/babel plugin jsdoc closure 1.2.0 ([@openlayers](https://github.com/openlayers))
+ * [#7822](https://github.com/openlayers/openlayers/pull/7822) - Update mocha to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#7813](https://github.com/openlayers/openlayers/pull/7813) - Update recast to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#7809](https://github.com/openlayers/openlayers/pull/7809) - Update webpack to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#7812](https://github.com/openlayers/openlayers/pull/7812) - chore(package): update sinon to version 4.3.0 ([@openlayers](https://github.com/openlayers))
+ * [#7777](https://github.com/openlayers/openlayers/pull/7777) - Update babel-minify-webpack-plugin to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#7759](https://github.com/openlayers/openlayers/pull/7759) - Update eslint to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#7746](https://github.com/openlayers/openlayers/pull/7746) - Update sinon to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#7735](https://github.com/openlayers/openlayers/pull/7735) - Update sinon to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#7729](https://github.com/openlayers/openlayers/pull/7729) - Update jquery to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#7732](https://github.com/openlayers/openlayers/pull/7732) - Update sinon to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#7731](https://github.com/openlayers/openlayers/pull/7731) - Update webpack-dev-server to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#7728](https://github.com/openlayers/openlayers/pull/7728) - Update eslint to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#7720](https://github.com/openlayers/openlayers/pull/7720) - Update mocha to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#7712](https://github.com/openlayers/openlayers/pull/7712) - Update sinon to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#7702](https://github.com/openlayers/openlayers/pull/7702) - Update webpack-dev-server to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#7701](https://github.com/openlayers/openlayers/pull/7701) - Update sinon to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#7691](https://github.com/openlayers/openlayers/pull/7691) - Update webpack-dev-server to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#7688](https://github.com/openlayers/openlayers/pull/7688) - Update marked to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#7685](https://github.com/openlayers/openlayers/pull/7685) - Update sinon to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#7681](https://github.com/openlayers/openlayers/pull/7681) - Update eslint to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#7680](https://github.com/openlayers/openlayers/pull/7680) - Update webpack-dev-server to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#7667](https://github.com/openlayers/openlayers/pull/7667) - Update mocha to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#7656](https://github.com/openlayers/openlayers/pull/7656) - Update eslint to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#7655](https://github.com/openlayers/openlayers/pull/7655) - Update marked to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#7651](https://github.com/openlayers/openlayers/pull/7651) - Update karma to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#7647](https://github.com/openlayers/openlayers/pull/7647) - Update rbush to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#7596](https://github.com/openlayers/openlayers/pull/7596) - Update karma-webpack to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#7589](https://github.com/openlayers/openlayers/pull/7589) - chore(package): update karma-webpack to version 2.0.8 ([@openlayers](https://github.com/openlayers))
+ * [#7571](https://github.com/openlayers/openlayers/pull/7571) - Update eslint to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#7567](https://github.com/openlayers/openlayers/pull/7567) - Update fs-extra to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#7558](https://github.com/openlayers/openlayers/pull/7558) - Update eslint to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#7552](https://github.com/openlayers/openlayers/pull/7552) - Update jscodeshift to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#7551](https://github.com/openlayers/openlayers/pull/7551) - Update sinon to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+
+</details>

changelog/v5.0.1.md

@@ -0,0 +1,8 @@
+# 5.0.1
+
+The v5.0.1 release helps reduce bundle sizes for bundlers that support the `"sideEffects": "false"`option in `package.json`, and fixes website documentation regarding cdn locations and debug build which has been replaced by source maps.
+
+## Fixes
+
+ * [#8341](https://github.com/openlayers/openlayers/pull/8341) - Set sideEffects: false flag ([@ahocevar](https://github.com/ahocevar))
+ * [#8342](https://github.com/openlayers/openlayers/pull/8342) - Fix links and description in quickstart tutorial ([@ahocevar](https://github.com/ahocevar))

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>

config/jsdoc/api/template/publish.js

@@ -313,7 +313,7 @@ exports.publish = function(taffyData, opts, tutorials) {
 
         if (example.match(/^\s*<caption>([\s\S]+?)<\/caption>(\s*[\n\r])([\s\S]+)$/i)) {
           caption = RegExp.$1;
-          code    = RegExp.$3;
+          code = RegExp.$3;
         }
 
         return {

config/rollup.js

@@ -0,0 +1,21 @@
+// Rollup configuration for the full build
+
+import noderesolve from 'rollup-plugin-node-resolve';
+import commonjs from 'rollup-plugin-commonjs';
+import {uglify} from 'rollup-plugin-uglify';
+import buble from 'rollup-plugin-buble';
+import sourcemaps from 'rollup-plugin-sourcemaps';
+
+export default {
+  input: 'build/index.js',
+  output: [
+    {file: 'build/ol.js', format: 'iife', sourcemap: true}
+  ],
+  plugins: [
+    noderesolve(),
+    commonjs(),
+    buble(),
+    uglify(),
+    sourcemaps()
+  ]
+};

config/webpack.js

@@ -1,14 +0,0 @@
-const webpack = require('webpack');
-const MinifyPlugin = require('babel-minify-webpack-plugin');
-
-module.exports = {
-  entry: './src/index.js',
-  output: {
-    filename: 'build/ol.js'
-  },
-  devtool: 'source-map',
-  plugins: [
-    new webpack.optimize.ModuleConcatenationPlugin(),
-    new MinifyPlugin()
-  ]
-};

doc/quickstart.hbs

@@ -5,6 +5,11 @@ layout: doc.hbs
 
 # Quick Start
 
+This primer shows you how to put a simple map on a web page.
+
+**For production, we strongly recommend bundling the application together with its dependencies, as explained in the [Building an OpenLayers Application](./tutorials/bundle.html) tutorial.**
+
+
 ## Put a map on a page
 
 Below you'll find a complete working example.  Create a new file, copy in the contents below, and open in a browser:
@@ -13,14 +18,14 @@ Below you'll find a complete working example.  Create a new file, copy in the co
 <!doctype html>
 <html lang="en">
   <head>
-    <link rel="stylesheet" href="https://openlayers.org/en/{{ latest }}/css/ol.css" type="text/css">
+    <link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/{{ latest }}/css/ol.css" type="text/css">
     <style>
       .map {
         height: 400px;
         width: 100%;
       }
     </style>
-    <script src="https://openlayers.org/en/{{ latest }}/build/ol.js" type="text/javascript"></script>
+    <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/{{ latest }}/build/ol.js"></script>
     <title>OpenLayers example</title>
   </head>
   <body>
@@ -55,7 +60,7 @@ To include a map a web page you will need 3 things:
 ### Include OpenLayers
 
 ```xml
-  <script src="https://openlayers.org/en/{{ latest }}/build/ol.js" type="text/javascript"></script>
+  <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/{{ latest }}/build/ol.js"></script>
 ```
 
 The first part is to include the JavaScript library. For the purpose of this tutorial, here we simply point to the openlayers.org website to get the whole library. In a production environment, we would build a custom version of the library including only the module needed for our application.

doc/tutorials/background.md

@@ -0,0 +1,49 @@
+---
+title: Introduction
+layout: doc.hbs
+---
+
+# Introduction
+
+## Objectives
+
+OpenLayers is a modular, high-performance, feature-packed library for displaying and interacting with maps and geospatial data.
+
+The library comes with built-in support for a wide range of commercial and free image and vector tile sources, and the most popular open and proprietary vector data formats. With OpenLayers's map projection support, data can be in any projection.
+
+## Public API
+
+OpenLayers is available as [`ol` npm package](https://npmjs.com/package/ol), which provides all modules of the officially supported [API](../../apidoc).
+
+## Renderers and Browser Support
+
+By default, OpenLayers uses a performance optimized Canvas renderer. An experimental WebGL renderer (without text rendering support) is also avaialble.
+
+OpenLayers runs on all modern browsers that support [HTML5](https://html.spec.whatwg.org/multipage/) and [ECMAScript 5](http://www.ecma-international.org/ecma-262/5.1/). This includes Chrome, Firefox, Safari and Edge. For older browsers and platforms like Internet Explorer (down to version 9) and Android 4.x, [polyfills](http://polyfill.io), the application bundle needs to be transpiled (e.g. using [Babel](https://babeljs.io)) and bundled with polyfills for `requestAnimationFrame`, `Element.prototype.classList` and `URL`.
+
+The library is intended for use on both desktop/laptop and mobile devices, and supports pointer and touch interactions.
+
+## Module and Naming Conventions
+
+OpenLayers modules with CamelCase names provide classes as default exports, and may contain additional constants or functions as named exports:
+
+```js
+import Map from 'ol/Map';
+import View from 'ol/View';
+```
+
+Class hierarchies grouped by their parent are provided in a subfolder of the package, e.g. `layer/`.
+
+For convenience, these are also available as named exports, e.g.
+
+```js
+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';
+```

doc/tutorials/browserify.md

@@ -1,87 +0,0 @@
----
-title: Basic project setup using NPM and Browserify
-layout: doc.hbs
----
-
-# Introduction
-
-When going beyond modifying existing examples you might be looking for a way to setup your own code with dependency management together with external dependencies like OpenLayers.
-
-This tutorial serves as a suggested project setup using NPM and Browserify for the most basic needs. There are several other options, and in particular you might be interested in a more modern one (ES2015) [using Webpack with OpenLayers](https://gist.github.com/tschaub/79025aef325cd2837364400a105405b8).
-
-## Initial steps
-
-Create a new empty directory for your project and navigate to it by running `mkdir new-project && cd new-project`. Initialize your project using `npm init` and answer the questions asked.
-
-Add OpenLayers as dependency to your application with `npm install --save ol`.
-
-At this point you can ask NPM to add required development dependencies by running
-```
-npm install --save-dev cssify browserify cssify http-server uglify-js watchify
-npm install --save-dev babelify babel-plugin-transform-es2015-modules-commonjs
-```
-We will be using `cssify` to include the css definitions required by OpenLayers in our bundle. `watchify`, `http-server` and `uglify-js` are used to monitor for changes and to build into a minified bundle. `babelify` and `babel-plugin-transform-es2015-modules-commonjs` are used to make the `ol` package, which was created using ES2015 modules, work with CommonJS.
-
-## Application code and index.html
-
-Place your application code in `index.js`. Here is a simple starting point:
-
-```js
-require('ol/ol.css');
-var ol_Map = require('ol/map').default;
-var ol_layer_Tile = require('ol/layer/tile').default;
-var ol_source_OSM = require('ol/source/osm').default;
-var ol_View = require('ol/view').default;
-
-var map = new ol_Map({
-  target: 'map',
-  layers: [
-    new ol_layer_Tile({
-      source: new ol_source_OSM()
-    })
-  ],
-  view: new ol_View({
-    center: [0, 0],
-    zoom: 0
-  })
-});
-```
-
-You will also need an `ìndex.html` file that will use your bundle. Here is a simple example:
-
-```html
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>Using Browserify with OpenLayers</title>
-    <style>
-      #map {
-        width: 400px;
-        height: 250px;
-      }
-    </style>
-  </head>
-  <body>
-    <div id="map"></div>
-    <script src="bundle.js"></script>
-  </body>
-</html>
-```
-
-## Creating a bundle
-
-With simple scripts you can introduce the commands `npm run build` and `npm start` to manually build your bundle and watch for changes, respectively. Add the following to the script section in `package.json`:
-
-```json
-"scripts": {
-  "start": "watchify index.js -g cssify --outfile bundle.js & http-server",
-  "build": "browserify -g cssify index.js | uglifyjs --compress --output bundle.js"
-}
-```
-Now to test your application open http://localhost:8080/ in your browser. `watchify` will update `bundle.js` whenever you change something. You simply need to reload the page in your browser to see the changes.
-```
-$ npm start
-```
-
-Note that `bundle.js` will contain your application code and all dependencies used in your application. From OpenLayers, it only contains the required components.

doc/tutorials/bundle.md

@@ -0,0 +1,93 @@
+---
+title: Basic project setup using NPM and Parcel
+layout: doc.hbs
+---
+
+# Introduction
+
+Modern JavaScript works best when using and authoring modules. The recommended way of using OpenLayers is installing the [`ol`](https://npmjs.com/package/ol) package. This tutorial walks you through setting up a simple dev environment, which requires [node](https://nodejs.org) for everything to work.
+
+In this tutorial, we will be using [Parcel](https://parceljs.org) to bundle our application. There are several other options, some of which are linked from the [README](https://npmjs.com/package/ol).
+
+## Initial steps
+
+Create a new empty directory for your project and navigate to it by running `mkdir new-project && cd new-project`. Initialize your project using `npm init` and answer the questions asked.
+
+Add OpenLayers as dependency to your application with
+
+    npm install ol
+
+At this point you can ask NPM to add required development dependencies by running
+
+    npm install --save-dev parcel-bundler
+
+## Application code and index.html
+
+Place your application code in `index.js`. Here is a simple starting point:
+
+```js
+import 'ol/ol.css';
+import {Map, View} from 'ol';
+import TileLayer from 'ol/layer/Tile';
+import OSM from 'ol/source/OSM';
+
+const map = new Map({
+  target: 'map',
+  layers: [
+    new TileLayer({
+      source: new OSM()
+    })
+  ],
+  view: new View({
+    center: [0, 0],
+    zoom: 0
+  })
+});
+```
+
+You will also need an `ìndex.html` file that will use your bundle. Here is a simple example:
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Using Parcel with OpenLayers</title>
+    <style>
+      #map {
+        width: 400px;
+        height: 250px;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="map"></div>
+    <script src="./index.js"></script>
+  </body>
+</html>
+```
+
+## Creating a bundle
+
+With simple scripts you can introduce the commands `npm run build` and `npm start` to manually build your bundle and watch for changes, respectively. Add the following to the script section in `package.json`:
+
+```json
+"scripts": {
+  "test": "echo \"Error: no test specified\" && exit 1",
+  "start": "parcel index.html",
+  "build": "parcel build --public-url . index.html"
+}
+```
+That's it. Now to run your application, enter
+
+    npm start
+
+in your console. To test your application, open http://localhost:1234/ in your browser. Whenever you change something, the page will reload automatically to show the result of your changes.
+
+Note that a single JavaScript file with all your application code and all dependencies used in your application has been created. From the OpenLayers package, it only contains the required components.
+
+To create a production bundle of your application, simply type
+
+    npm run build
+
+and copy the `dist/` folder to your production server.

doc/tutorials/concepts.hbs

@@ -6,48 +6,58 @@ layout: doc.hbs
 # Basic Concepts
 
 ## Map
-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 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()`.
 
 ```xml
 <div id="map" style="width: 100%, height: 400px"></div>
 <script>
-  var map = new ol.Map({target: 'map'});
+  import Map from 'ol/Map';
+
+  var map = new Map({target: 'map'});
 </script>
 ```
 
 ## View
-`ol.Map` is not responsible for things like center, zoom level and projection of the map. Instead, these are properties of an `ol.View` instance.
+`Map` is not responsible for things like center, zoom level and projection of the map. Instead, these are properties of a `View` instance.
 
 ```js
-  map.setView(new ol.View({
+  import View from 'ol/View';
+
+  map.setView(new View({
     center: [0, 0],
     zoom: 2
   }));
 ```
 
-An `ol.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.
+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.
 
 The `zoom` option is a convenient way to specify the map resolution. The available zoom levels are determined by `maxZoom` (default: 28), `zoomFactor` (default: 2) and `maxResolution` (default is calculated in such a way that the projection's validity extent fits in a 256x256 pixel tile). Starting at zoom level 0 with a resolution of `maxResolution` units per pixel, subsequent zoom levels are calculated by dividing the previous zoom level's resolution by `zoomFactor`, until zoom level `maxZoom` is reached.
 
 
 ## Source
-To get remote data for a layer, OpenLayers 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.
+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.
 
 ```js
-  var osmSource = new ol.source.OSM();
+  import OSM from 'ol/source/OSM';
+
+  var osmSource = OSM();
 ```
 
 ## Layer
-A layer is a visual representation of data from a `source`. OpenLayers has three basic types of layers: `ol.layer.Tile`, `ol.layer.Image` and `ol.layer.Vector`.
+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`.
 
-`ol.layer.Tile` is for layer sources that provide pre-rendered, tiled images in grids that are organized by zoom levels for specific resolutions.
+`layer/Tile` is for layer sources that provide pre-rendered, tiled images in grids that are organized by zoom levels for specific resolutions.
 
-`ol.layer.Image` is for server rendered images that are available for arbitrary extents and resolutions.
+`layer/Image` is for server rendered images that are available for arbitrary extents and resolutions.
 
-`ol.layer.Vector` is for vector data that is rendered client-side.
+`layer/Vector` is for vector data that is rendered client-side.
+
+`layer/VectorTile` is for tiled vector data that is rendered client-side.
 
 ```js
-  var osmLayer = new ol.layer.Tile({source: osmSource});
+  import TileLayer from 'ol/layer/Tile';
+
+  var osmLayer = new TileLayer({source: osmSource});
   map.addLayer(osmLayer);
 ```
 
@@ -59,11 +69,16 @@ The above snippets can be conflated to a self contained map configuration with v
 ```xml
 <div id="map" style="width: 100%, height: 400px"></div>
 <script>
-  new ol.Map({
+  import Map from 'ol/Map';
+  import View from 'ol/View';
+  import OSM from 'ol/source/OSM';
+  import TileLayer from 'ol/source/Tile';
+
+  new Map({
     layers: [
-      new ol.layer.Tile({source: new ol.source.OSM()})
+      new TileLayer({source: new ol.source.OSM()})
     ],
-    view: new ol.View({
+    view: new View({
       center: [0, 0],
       zoom: 2
     }),

doc/tutorials/index.hbs

@@ -5,8 +5,7 @@ layout: doc.hbs
 
 # Tutorials
 
-* [Introduction to OpenLayers](introduction.html)
+* [Building an OpenLayers Application](bundle.html)
 * [Basic Concepts](concepts.html)
-* [Create Custom Builds](custom-builds.html)
-* [Bundle Application and OpenLayers using Browserify](browserify.html)
+* [Some Background on OpenLayers](background.html)
 * [Raster Reprojection](raster-reprojection.html)

doc/tutorials/introduction.md

@@ -1,39 +0,0 @@
----
-title: Introduction
-layout: doc.hbs
----
-
-# Introduction
-
-## Objectives
-With version 3, the OpenLayers web mapping library was fundamentally redesigned. The widely used version 2 dates from the early days of Javascript development, and was increasingly showing its age. So it has been rewritten from the ground up to use modern design patterns.
-
-The initial release aims to support much of the functionality provided by version 2, with support for a wide range of commercial and free tile sources, and the most popular open-source vector data formats. As with version 2, data can be in any projection. The initial release also adds some additional functionality, such as the ability to easily rotate or animate maps.
-
-It is also designed such that major new features, such as displaying 3D maps, or using WebGL to quickly display large vector data sets, can be added in later releases.
-
-## Public API
-Using the advanced optimizations of the Closure Compiler means that properties and methods are renamed – `longMeaningfulName` might become `xB` – and so are effectively unusable in applications using the library. To be usable, they have to be explicitly `exported`. This means the exported names, those not renamed, effectively become the public API of the library. These __exportable__ properties and methods are marked in the source, and documented in the [API docs](../../apidoc). This is the officially supported API of the library. A build containing all these exportable names is known as a __full build__. A hosted version of this is available, which can be used by any application.
-
-## Custom Builds
-Unlike in, say, Node, where a module's exports are fixed in the source, with Closure Compiler, exports can be defined at compile time. This makes it easy to create builds that are customized to the needs of a particular site or application: a __custom build__ only exports those properties and methods needed by the site or application. As the full build is large, and will probably become larger as new features are added to the API, it's recommended that sites create a custom build for production software.
-
-## Renderers and Browser Support
-The library currently includes two renderers: Canvas and WebGL. Both of them support both raster data from tile/image servers, and vector data; WebGL however does not support labels. Clearly only those browsers that [support Canvas](http://caniuse.com/canvas) can use the Canvas renderer. Equally, the WebGL renderer can only be used on those devices and [browsers](http://caniuse.com/webgl) that support WebGL.
-
-OpenLayers runs on all modern browsers that support [HTML5](https://html.spec.whatwg.org/multipage/) and [ECMAScript 5](http://www.ecma-international.org/ecma-262/5.1/). This includes Chrome, Firefox, Safari and Edge. For older browsers and platforms like Internet Explorer (down to version 9) and Android 4.x, [polyfills](http://polyfill.io) for `requestAnimationFrame` and `Element.prototype.classList` are required, and using the KML format requires a polyfill for `URL`.
-
-The library is intended for use on both desktop/laptop and mobile devices.
-
-## Objects and Naming Conventions
-The top-level namespace is `ol` (basically, `var ol = {};`). Subdivisions of this are:
-
-* further namespaces, such as `ol.layer`; these have a lower-case initial
-* simple objects containing static properties and methods, such as `ol.easing`; these also have a lower-case initial
-* types, which have an upper-case initial. These are mainly 'classes', which here means a constructor function with prototypal inheritance, such as `ol.Map` or `ol.layer.Vector` (the Vector class within the layer namespace). There are however other, simpler, types, such as `ol.Extent`, which is an array.
-
-Class namespaces, such as `ol.layer` have a base class type with the same name, such as `ol.layer.Layer`. These are mainly abstract classes, from which the other subclasses inherit.
-
-Source files are similarly organised, with a directory for each class namespace. Names are however all lower-case, for example, `ol/layer/vector.js`.
-
-OpenLayers follows the convention that the names of private properties and methods, that is, those that are not part of the API, end in an underscore. In general, instance properties are private and accessed using accessors.

doc/tutorials/raster-reprojection.md

@@ -10,18 +10,22 @@ Transformation of the map projections of the image happens directly in a web bro
 The view in any Proj4js supported coordinate reference system is possible and previously incompatible layers can now be combined and overlaid.
 
 # Usage
-The API usage is very simple. Just specify proper projection (using [EPSG](https://epsg.io) code) on `ol.View`:
-``` javascript
-var map = new ol.Map({
+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`;
+
+var map = new Map({
   target: 'map',
-  view: new ol.View({
+  view: new View({
     projection: 'EPSG:3857', //HERE IS THE VIEW PROJECTION
     center: [0, 0],
     zoom: 2
   }),
   layers: [
-    new ol.layer.Tile({
-      source: new ol.source.TileWMS({
+    new TileLayer({
+      source: new TileWMS({
         projection: 'EPSG:4326', //HERE IS THE DATA SOURCE PROJECTION
         url: 'http://demo.boundlessgeo.com/geoserver/wms',
         params: {
@@ -32,7 +36,7 @@ var map = new ol.Map({
   ]
 });
 ```
-If a source (based on `ol.source.TileImage` or `ol.source.Image`) has a projection different from the current `ol.View`’s projection then the reprojection happens automatically under the hood.
+If a source (based on `ol/source/TileImage` or `ol/source/Image`) has a projection different from the current `ol/View`’s projection then the reprojection happens automatically under the hood.
 
 ### Examples
 - [Raster reprojection demo](https://openlayers.org/en/master/examples/reprojection.html)
@@ -41,26 +45,29 @@ If a source (based on `ol.source.TileImage` or `ol.source.Image`) has a projecti
 - [Image reprojection](https://openlayers.org/en/master/examples/reprojection-image.html)
 
 ### Custom projection
-The easiest way to use a custom projection is to add the [Proj4js](http://proj4js.org/) library to your project and then define the projection using a proj4 definition string.
+The easiest way to use a custom projection is to add the [Proj4js](http://proj4js.org/) library to your project and then define the projection using a proj4 definition string. It can be installed with
+
+    npm install proj4
+
 Following example shows definition of a [British National Grid](https://epsg.io/27700):
 
-``` html
-<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.4.4/proj4.js"></script>
-```
+```js
+import proj4 from 'proj4';
+import {get as getProjection, register} from 'ol/proj';
 
-``` javascript
 proj4.defs('EPSG:27700', '+proj=tmerc +lat_0=49 +lon_0=-2 +k=0.9996012717 ' +
     '+x_0=400000 +y_0=-100000 +ellps=airy ' +
     '+towgs84=446.448,-125.157,542.06,0.15,0.247,0.842,-20.489 ' +
     '+units=m +no_defs');
-var proj27700 = ol.proj.get('EPSG:27700');
+register(proj4);
+var proj27700 = getProjection('EPSG:27700');
 proj27700.setExtent([0, 0, 700000, 1300000]);
 ```
 
 ### Change of the view projection
-To switch the projection used to display the map you have to set a new `ol.View` with selected projection on the `ol.Map`:
+To switch the projection used to display the map you have to set a new `ol/View` with selected projection on the `ol/Map`:
 ``` javascript
-map.setView(new ol.View({
+map.setView(new View({
     projection: 'EPSG:27700',
     center: [400000, 650000],
     zoom: 4
@@ -69,16 +76,16 @@ map.setView(new ol.View({
 
 ## TileGrid and Extents
 When reprojection is needed, new tiles (in the target projection) are under the hood created from the original source tiles.
-The TileGrid of the reprojected tiles is by default internally constructed using `ol.tilegrid.getForProjection(projection)`.
+The TileGrid of the reprojected tiles is by default internally constructed using `ol/tilegrid~getForProjection(projection)`.
 The projection should have extent defined (see above) for this to work properly.
 
-Alternatively, a custom target TileGrid can be constructed manually and set on the source instance using `ol.source.TileImage#setTileGridForProjection(projection, tilegrid)`.
+Alternatively, a custom target TileGrid can be constructed manually and set on the source instance using `ol/source/TileImage~setTileGridForProjection(projection, tilegrid)`.
 This TileGrid will then be used when reprojecting to the specified projection instead of creating the default one.
 In certain cases, this can be used to optimize performance (by tweaking tile sizes) or visual quality (by specifying resolutions).
 
 # How it works
 
-The reprojection process is based on triangles -- the target raster is divided into a limited number of triangles with vertices transformed using `ol.proj` capabilities ([proj4js](http://proj4js.org/) is usually utilized to define custom transformations).
+The reprojection process is based on triangles -- the target raster is divided into a limited number of triangles with vertices transformed using `ol/proj` capabilities ([proj4js](http://proj4js.org/) is usually utilized to define custom transformations).
 The reprojection of pixels inside the triangle is approximated with an affine transformation (with rendering hardware-accelerated by the canvas 2d context):
 
 <img src="raster-reprojection-resources/how-it-works.jpg" alt="How it works" width="600" />
@@ -102,10 +109,6 @@ For debugging, rendering of the reprojection edges can be enabled by `ol.source.
 
 # Advanced
 
-### Disabling reprojection
-In case you are creating a custom build of OpenLayers and do not need the reprojection code, you can reduce the build size by setting `ol.ENABLE_RASTER_REPROJECTION` to `false`, which completely disables the reprojection support.
-See [Custom builds](custom-builds.html#defines) tutorial on how to do this.
-
 ### Triangulation precision threshold
 The default [triangulation error threshold](#dynamic-triangulation) in pixels is given by `ERROR_THRESHOLD` (0.5 pixel).
 In case a different threshold needs to be defined for different sources, the `reprojectionErrorThreshold` option can be passed when constructing the tile image source.
@@ -126,7 +129,7 @@ Setting such a limit is demonstrated in the [reprojection demo example](https://
 
 ### Resolution calculation
 When determining source tiles to load, the ideal source resolution needs to be calculated.
-The `ol.reproj.calculateSourceResolution(sourceProj, targetProj, targetCenter, targetResolution)` function calculates the ideal value in order to achieve pixel mapping as close as possible to 1:1 during reprojection, which is then used to select proper zoom level from the source.
+The `ol/reproj~calculateSourceResolution(sourceProj, targetProj, targetCenter, targetResolution)` function calculates the ideal value in order to achieve pixel mapping as close as possible to 1:1 during reprojection, which is then used to select proper zoom level from the source.
 
 It is, however, generally not practical to use the same source zoom level for the whole target zoom level -- different projections can have significantly different resolutions in different parts of the world (e.g. polar regions in EPSG:3857 vs EPSG:4326) and enforcing a single resolution for the whole zoom level would result in some tiles being scaled up/down, possibly requiring a huge number of source tiles to be loaded.
 Therefore, the resolution mapping is calculated separately for each reprojected tile (in the middle of the tile extent).

examples/canvas-gradient-pattern.html

@@ -3,10 +3,11 @@ layout: example.html
 title: Styling feature with CanvasGradient or CanvasPattern
 shortdesc: Example showing the countries vector layer styled with patterns and gradients.
 docs: >
-  First this example creates a reusable [`CanvasPattern`](https://developer.mozilla.org/en-US/docs/Web/API/CanvasPattern)
+  This example creates a [`CanvasPattern`](https://developer.mozilla.org/en-US/docs/Web/API/CanvasPattern)
   and a [`CanvasGradient`](https://developer.mozilla.org/en/docs/Web/API/CanvasGradient). The countries are loaded from
-  a GeoJSON file. A style function determines for each country whether to use a fill with the pregenerated
-  CanvasGradient (rainbow colors) or a CanvasPattern (repeating stacked circles).
+  a GeoJSON file. A style function determines for each country whether to use a fill with the
+  CanvasGradient (rainbow colors) or a CanvasPattern (repeating stacked circles). **Note**: For seamless repeat patterns,
+  image width and height of the pattern image must be a factor of two (2, 4, 8, ..., 512).
 tags: "canvas, gradient, pattern, style"
 ---
 <div id="map" class="map"></div>

examples/canvas-gradient-pattern.js

@@ -1,6 +1,5 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
-import {getWidth} from '../src/ol/extent.js';
 import GeoJSON from '../src/ol/format/GeoJSON.js';
 import {DEVICE_PIXEL_RATIO} from '../src/ol/has.js';
 import VectorLayer from '../src/ol/layer/Vector.js';
@@ -16,14 +15,8 @@ const context = canvas.getContext('2d');
 const pixelRatio = DEVICE_PIXEL_RATIO;
 
 // Generate a rainbow gradient
-function gradient(feature, resolution) {
-  const extent = feature.getGeometry().getExtent();
-  // Gradient starts on the left edge of each feature, and ends on the right.
-  // Coordinate origin is the top-left corner of the extent of the geometry, so
-  // we just divide the geometry's extent width by resolution and multiply with
-  // pixelRatio to match the renderer's pixel coordinate system.
-  const grad = context.createLinearGradient(0, 0,
-    getWidth(extent) / resolution * pixelRatio, 0);
+const gradient = (function() {
+  const grad = context.createLinearGradient(0, 0, 512 * pixelRatio, 0);
   grad.addColorStop(0, 'red');
   grad.addColorStop(1 / 6, 'orange');
   grad.addColorStop(2 / 6, 'yellow');
@@ -32,24 +25,24 @@ function gradient(feature, resolution) {
   grad.addColorStop(5 / 6, 'blue');
   grad.addColorStop(1, 'purple');
   return grad;
-}
+})();
 
 // Generate a canvasPattern with two circles on white background
 const pattern = (function() {
-  canvas.width = 11 * pixelRatio;
-  canvas.height = 11 * pixelRatio;
+  canvas.width = 8 * pixelRatio;
+  canvas.height = 8 * pixelRatio;
   // white background
   context.fillStyle = 'white';
   context.fillRect(0, 0, canvas.width, canvas.height);
   // outer circle
   context.fillStyle = 'rgba(102, 0, 102, 0.5)';
   context.beginPath();
-  context.arc(5 * pixelRatio, 5 * pixelRatio, 4 * pixelRatio, 0, 2 * Math.PI);
+  context.arc(4 * pixelRatio, 4 * pixelRatio, 3 * pixelRatio, 0, 2 * Math.PI);
   context.fill();
   // inner circle
   context.fillStyle = 'rgb(55, 0, 170)';
   context.beginPath();
-  context.arc(5 * pixelRatio, 5 * pixelRatio, 2 * pixelRatio, 0, 2 * Math.PI);
+  context.arc(4 * pixelRatio, 4 * pixelRatio, 1.5 * pixelRatio, 0, 2 * Math.PI);
   context.fill();
   return context.createPattern(canvas, 'repeat');
 }());
@@ -69,12 +62,11 @@ const style = new Style({
  * which either contains the aboove gradient or pattern.
  *
  * @param {module:ol/Feature~Feature} feature The feature to style.
- * @param {number} resolution Resolution.
  * @return {module:ol/style/Style} The style to use for the feature.
  */
-const getStackedStyle = function(feature, resolution) {
+const getStackedStyle = function(feature) {
   const id = feature.getId();
-  fill.setColor(id > 'J' ? gradient(feature, resolution) : pattern);
+  fill.setColor(id > 'J' ? gradient : pattern);
   return style;
 };
 
@@ -94,7 +86,7 @@ const map = new Map({
   ],
   target: 'map',
   view: new View({
-    center: fromLonLat([7, 52]),
+    center: fromLonLat([16, 48]),
     zoom: 3
   })
 });

examples/color-manipulation.js

@@ -1,4 +1,3 @@
-// NOCOMPILE
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
 import ImageLayer from '../src/ol/layer/Image.js';

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/d3.js

@@ -1,4 +1,3 @@
-// NOCOMPILE
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
 import {getWidth, getCenter} from '../src/ol/extent.js';

examples/device-orientation.js

@@ -1,4 +1,3 @@
-// NOCOMPILE
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
 import {defaults as defaultControls} from '../src/ol/control.js';

examples/earthquake-clusters.js

@@ -136,7 +136,7 @@ const map = new Map({
   layers: [raster, vector],
   interactions: defaultInteractions().extend([new Select({
     condition: function(evt) {
-      return  evt.type == 'pointermove' ||
+      return evt.type == 'pointermove' ||
           evt.type == 'singleclick';
     },
     style: selectStyleFunction

examples/export-map.js

@@ -1,5 +1,3 @@
-// NOCOMPILE
-// this example uses FileSaver.js for which we don't have an externs file.
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
 import {defaults as defaultControls} from '../src/ol/control.js';

examples/export-pdf.js

@@ -1,4 +1,3 @@
-// NOCOMPILE
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
 import {defaults as defaultControls} from '../src/ol/control.js';

examples/flight-animation.js

@@ -1,4 +1,3 @@
-// NOCOMPILE
 import Feature from '../src/ol/Feature.js';
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';

examples/geojson-vt.js

@@ -1,4 +1,3 @@
-// NOCOMPILE
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
 import GeoJSON from '../src/ol/format/GeoJSON.js';

examples/icon.js

@@ -71,9 +71,9 @@ map.on('click', function(evt) {
     const coordinates = feature.getGeometry().getCoordinates();
     popup.setPosition(coordinates);
     $(element).popover({
-      'placement': 'top',
-      'html': true,
-      'content': feature.get('name')
+      placement: 'top',
+      html: true,
+      content: feature.get('name')
     });
     $(element).popover('show');
   } else {

examples/jsts.html

@@ -7,6 +7,6 @@ docs: >
   with OpenLayers.
 tags: "vector, jsts, buffer"
 resources:
-  - https://cdn.rawgit.com/bjornharrtell/jsts/gh-pages/1.4.0/jsts.min.js
+  - https://cdn.rawgit.com/bjornharrtell/jsts/gh-pages/1.6.0/jsts.min.js
 ---
 <div id="map" class="map"></div>

examples/jsts.js

@@ -1,5 +1,3 @@
-// NOCOMPILE
-// this example uses JSTS for which we don't have an externs file.
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
 import GeoJSON from '../src/ol/format/GeoJSON.js';
@@ -7,7 +5,8 @@ import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
 import {fromLonLat} from '../src/ol/proj.js';
 import OSM from '../src/ol/source/OSM.js';
 import VectorSource from '../src/ol/source/Vector.js';
-
+import LinearRing from '../src/ol/geom/LinearRing.js';
+import {Point, LineString, Polygon, MultiPoint, MultiLineString, MultiPolygon} from '../src/ol/geom.js';
 
 const source = new VectorSource();
 fetch('data/geojson/roads-seoul.geojson').then(function(response) {
@@ -17,6 +16,7 @@ fetch('data/geojson/roads-seoul.geojson').then(function(response) {
   const features = format.readFeatures(json, {featureProjection: 'EPSG:3857'});
 
   const parser = new jsts.io.OL3Parser();
+  parser.inject(Point, LineString, LinearRing, Polygon, MultiPoint, MultiLineString, MultiPolygon);
 
   for (let i = 0; i < features.length; i++) {
     const feature = features[i];

examples/overlay.js

@@ -51,12 +51,11 @@ map.on('click', function(evt) {
 
   $(element).popover('destroy');
   popup.setPosition(coordinate);
-  // the keys are quoted to prevent renaming in ADVANCED mode.
   $(element).popover({
-    'placement': 'top',
-    'animation': false,
-    'html': true,
-    'content': '<p>The location you clicked was:</p><code>' + hdms + '</code>'
+    placement: 'top',
+    animation: false,
+    html: true,
+    content: '<p>The location you clicked was:</p><code>' + hdms + '</code>'
   });
   $(element).popover('show');
 });

examples/raster.js

@@ -1,5 +1,3 @@
-// NOCOMPILE
-// this example uses d3 for which we don't have an externs file.
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
 import {Image as ImageLayer, Tile as TileLayer} from '../src/ol/layer.js';

examples/region-growing.js

@@ -1,4 +1,3 @@
-// NOCOMPILE
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
 import {Image as ImageLayer, Tile as TileLayer} from '../src/ol/layer.js';

examples/sea-level.js

@@ -1,4 +1,3 @@
-// NOCOMPILE
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
 import {Image as ImageLayer, Tile as TileLayer} from '../src/ol/layer.js';

examples/select-features.js

@@ -27,7 +27,7 @@ const map = new Map({
   })
 });
 
-let select = null;  // ref to currently selected interaction
+let select = null; // ref to currently selected interaction
 
 // select interaction working on "singleclick"
 const selectSingleClick = new Select();

examples/shaded-relief.js

@@ -1,4 +1,3 @@
-// NOCOMPILE
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
 import {Image as ImageLayer, Tile as TileLayer} from '../src/ol/layer.js';

examples/templates/example.html

@@ -7,7 +7,7 @@
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" type="text/css">
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css">
     <link rel="stylesheet" href="./resources/prism/prism.css" type="text/css">
-    <link rel="stylesheet" href="../css/ol.css" type="text/css">
+    <link rel="stylesheet" href="./css/ol.css" type="text/css">
     <link rel="stylesheet" href="./resources/layout.css" type="text/css">
     {{{ extraHead.local }}}
     {{{ css.tag }}}

examples/topolis.js

@@ -1,6 +1,3 @@
-// NOCOMPILE
-// this example uses topolis and toastr for which we don't have an externs file.
-
 import Feature from '../src/ol/Feature.js';
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';

examples/turf.js

@@ -1,5 +1,3 @@
-// NOCOMPILE
-// this example uses turf.js for which we don't have an externs file.
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
 import GeoJSON from '../src/ol/format/GeoJSON.js';

examples/utfgrid.html

@@ -1,11 +1,11 @@
 ---
 layout: example.html
-title: Tiled UTFGrid
-shortdesc: This example shows how to read data from a TileUTFGrid layer.
+title: UTFGrid
+shortdesc: This example shows how to read data from a UTFGrid source.
 docs: >
   <p>Point to a country to see its name and flag.</p>
   Tiles made with [TileMill](http://tilemill.com). Hosting on MapBox.com or with open-source [TileServer](https://github.com/klokantech/tileserver-php/).
-tags: "utfgrid, tileutfgrid, tilejson"
+tags: "utfgrid, tilejson"
 cloak:
   - key: pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiRk1kMWZaSSJ9.E5BkluenyWQMsBLsuByrmg
     value: Your Mapbox access token from http://mapbox.com/ here

examples/utfgrid.js

@@ -3,7 +3,7 @@ import Overlay from '../src/ol/Overlay.js';
 import View from '../src/ol/View.js';
 import TileLayer from '../src/ol/layer/Tile.js';
 import TileJSON from '../src/ol/source/TileJSON.js';
-import UTFGrid from '../src/ol/source/TileUTFGrid.js';
+import UTFGrid from '../src/ol/source/UTFGrid.js';
 
 const key = 'pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiRk1kMWZaSSJ9.E5BkluenyWQMsBLsuByrmg';
 

examples/webpack/config.js

@@ -1,10 +1,7 @@
-const MinifyPlugin = require('babel-minify-webpack-plugin');
 const CopyPlugin = require('copy-webpack-plugin');
 const ExampleBuilder = require('./example-builder');
 const fs = require('fs');
-const merge = require('webpack-merge');
 const path = require('path');
-const webpack = require('webpack');
 
 const src = path.join(__dirname, '..');
 
@@ -17,66 +14,48 @@ examples.forEach(example => {
   entry[example] = `./${example}.js`;
 });
 
-const main = {
+module.exports = {
   context: src,
   target: 'web',
   entry: entry,
-  plugins: [
-    new webpack.optimize.CommonsChunkPlugin({
+  module: {
+    rules: [{
+      use: {
+        loader: 'buble-loader'
+      },
+      test: /\.js$/,
+      include: [
+        path.join(__dirname, '..', '..', 'src'),
+        path.join(__dirname, '..')
+      ]
+    }]
+  },
+  optimization: {
+    runtimeChunk: {
+      name: 'common'
+    },
+    splitChunks: {
       name: 'common',
+      chunks: 'initial',
       minChunks: 2
-    }),
+    }
+  },
+  plugins: [
     new ExampleBuilder({
       templates: path.join(__dirname, '..', 'templates'),
       common: 'common'
     }),
     new CopyPlugin([
-      {from: '../css', to: 'css'},
+      {from: '../src/ol/ol.css', to: 'css'},
       {from: 'data', to: 'data'},
       {from: 'resources', to: 'resources'},
       {from: 'Jugl.js', to: 'Jugl.js'},
       {from: 'index.html', to: 'index.html'}
     ])
   ],
+  devtool: 'source-map',
   output: {
     filename: '[name].js',
     path: path.join(__dirname, '..', '..', 'build', 'examples')
   }
 };
-
-// configuration specific to the dev environment
-const dev = {
-  devtool: 'source-map',
-  plugins: [
-    new webpack.EnvironmentPlugin(
-      Object.assign({NODE_ENV: 'development'}, process.env)
-    )
-  ]
-};
-
-// configuration specific to the prod environment
-const prod = {
-  plugins: [
-    new webpack.EnvironmentPlugin(
-      Object.assign({NODE_ENV: 'production'}, process.env)
-    ),
-    new MinifyPlugin()
-  ]
-};
-
-
-module.exports = env => {
-  let config;
-
-  switch (env) {
-    case 'prod': {
-      config = merge(main, prod);
-      break;
-    }
-    default: {
-      config = merge(main, dev);
-    }
-  }
-
-  return config;
-};

examples/webpack/example-builder.js

@@ -5,6 +5,7 @@ const marked = require('marked');
 const path = require('path');
 const pkg = require('../../package.json');
 const promisify = require('util').promisify;
+const RawSource = require('webpack-sources').RawSource;
 
 const readFile = promisify(fs.readFile);
 const isCssRegEx = /\.css$/;
@@ -60,6 +61,28 @@ function createWordIndex(exampleData) {
   return index;
 }
 
+/**
+ * Gets the source for the chunk that matches the jsPath
+ * @param {Object} chunk Chunk.
+ * @param {string} jsName Name of the file.
+ * @return {string} The source.
+ */
+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, jsName);
+      if (jsSource) {
+        return jsSource;
+      }
+    }
+    if (module.identifier.endsWith(jsName)) {
+      return module.source;
+    }
+  }
+}
+
 /**
  * A webpack plugin that builds the html files for our examples.
  * @param {Object} config Plugin configuration.  Requires a `templates` property
@@ -77,7 +100,7 @@ function ExampleBuilder(config) {
  * @param {Object} compiler The webpack compiler.
  */
 ExampleBuilder.prototype.apply = function(compiler) {
-  compiler.plugin('emit', async (compilation, callback) => {
+  compiler.hooks.emit.tapPromise('ExampleBuilder', async (compilation) => {
     const chunks = compilation.getStats().toJson().chunks
       .filter(chunk => chunk.names[0] !== this.common);
 
@@ -94,19 +117,11 @@ ExampleBuilder.prototype.apply = function(compiler) {
       });
 
       for (const file in assets) {
-        compilation.assets[file] = {
-          source: () => assets[file],
-          size: () => assets[file].length
-        };
+        compilation.assets[file] = new RawSource(assets[file]);
       }
     });
 
-    try {
-      await Promise.all(promises);
-    } catch (err) {
-      callback(err);
-      return;
-    }
+    await Promise.all(promises);
 
     const info = {
       examples: exampleData,
@@ -114,12 +129,7 @@ ExampleBuilder.prototype.apply = function(compiler) {
     };
 
     const indexSource = `var info = ${JSON.stringify(info)}`;
-    compilation.assets['index.js'] = {
-      source: () => indexSource,
-      size: () => indexSource.length
-    };
-
-    callback();
+    compilation.assets['index.js'] = new RawSource(indexSource);
   });
 };
 
@@ -141,15 +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;
-  for (let i = 0, ii = chunk.modules.length; i < ii; ++i) {
-    const module = chunk.modules[i];
-    if (module.identifier == jsPath) {
-      jsSource = module.source;
-      break;
-    }
-  }
+  let jsSource = getJsSource(chunk, path.join('.', jsName));
   jsSource = jsSource.replace(/'\.\.\/src\//g, '\'');
   if (data.cloak) {
     for (const entry of data.cloak) {

examples/zoomify.js

@@ -8,7 +8,7 @@ const imgHeight = 6100;
 
 const zoomifyUrl = 'http://vips.vtech.fr/cgi-bin/iipsrv.fcgi?zoomify=' +
     '/mnt/MD1/AD00/plan_CHU-4HD-01/FOND.TIF/';
-const iipUrl = 'http://vips.vtech.fr/cgi-bin/iipsrv.fcgi?FIF=' + '/mnt/MD1/AD00/plan_CHU-4HD-01/FOND.TIF' +  '&JTL={z},{tileIndex}';
+const iipUrl = 'http://vips.vtech.fr/cgi-bin/iipsrv.fcgi?FIF=' + '/mnt/MD1/AD00/plan_CHU-4HD-01/FOND.TIF' + '&JTL={z},{tileIndex}';
 
 const layer = new TileLayer({
   source: new Zoomify({

externs/bingmaps.js

@@ -1,165 +0,0 @@
-/**
- * @externs
- */
-
-
-/**
- * @constructor
- */
-var BingMapsCoverageArea = function() {};
-
-
-/**
- * @type {Array.<number>}
- */
-BingMapsCoverageArea.prototype.bbox;
-
-
-/**
- * @type {number}
- */
-BingMapsCoverageArea.prototype.zoomMax;
-
-
-/**
- * @type {number}
- */
-BingMapsCoverageArea.prototype.zoomMin;
-
-
-/**
- * @constructor
- */
-var BingMapsImageryProvider = function() {};
-
-
-/**
- * @type {string}
- */
-BingMapsImageryProvider.prototype.attribution;
-
-
-/**
- * @type {Array.<BingMapsCoverageArea>}
- */
-BingMapsImageryProvider.prototype.coverageAreas;
-
-
-/**
- * @constructor
- */
-var BingMapsImageryMetadataResponse = function() {};
-
-
-/**
- * @type {string}
- */
-BingMapsImageryMetadataResponse.prototype.authenticationResultCode;
-
-
-/**
- * @type {string}
- */
-BingMapsImageryMetadataResponse.prototype.copyright;
-
-
-/**
- * @type {Array.<BingMapsResourceSet>}
- */
-BingMapsImageryMetadataResponse.prototype.resourceSets;
-
-
-/**
- * @type {number}
- */
-BingMapsImageryMetadataResponse.prototype.statusCode;
-
-
-/**
- * @type {string}
- */
-BingMapsImageryMetadataResponse.prototype.statusDescription;
-
-
-/**
- * @type {string}
- */
-BingMapsImageryMetadataResponse.prototype.traceId;
-
-
-/**
- * @constructor
- */
-var BingMapsResource = function() {};
-
-
-/**
- * @type {number}
- */
-BingMapsResource.prototype.imageHeight;
-
-
-/**
- * @type {string}
- */
-BingMapsResource.prototype.imageUrl;
-
-
-/**
- * @type {Array.<string>}
- */
-BingMapsResource.prototype.imageUrlSubdomains;
-
-
-/**
- * @type {number}
- */
-BingMapsResource.prototype.imageWidth;
-
-
-/**
- * @type {Array.<BingMapsImageryProvider>}
- */
-BingMapsResource.prototype.imageryProviders;
-
-
-/**
- * @type {Object}
- */
-BingMapsResource.prototype.vintageEnd;
-
-
-/**
- * @type {Object}
- */
-BingMapsResource.prototype.vintageStart;
-
-
-/**
- * @type {number}
- */
-BingMapsResource.prototype.zoomMax;
-
-
-/**
- * @type {number}
- */
-BingMapsResource.prototype.zoomMin;
-
-
-/**
- * @constructor
- */
-var BingMapsResourceSet = function() {};
-
-
-/**
- * @type {number}
- */
-BingMapsResourceSet.prototype.estimatedTotal;
-
-
-/**
- * @type {Array.<BingMapsResource>}
- */
-BingMapsResourceSet.prototype.resources;

externs/bootstrap.js

@@ -1,20 +0,0 @@
-/**
- * @fileoverview Externs for bootstrap.js
- *
- * @see http://twitter.github.com/bootstrap/javascript.html
- * @externs
- */
-
-
-/**
- * @param {string|Object.<string,*>=} opt_option
- * @return {!jQuery}
- */
-jQuery.prototype.popover = function(opt_option) {};
-
-
-/**
- * @param {string|Object.<string,*>=} opt_option
- * @return {!jQuery}
- */
-jQuery.prototype.tooltip = function(opt_option) {};

externs/cartodb.js

@@ -1,34 +0,0 @@
-/**
- * @externs
- */
-
-
-
-/**
- * @constructor
- */
-var CartoDBLayerInfo = function() {};
-
-
-/**
- * @type {string}
- */
-CartoDBLayerInfo.prototype.layergroupid;
-
-
-/**
- * @type {string}
- */
-CartoDBLayerInfo.prototype.updated_at;
-
-
-/**
- * @type {Object}
- */
-CartoDBLayerInfo.prototype.metadata;
-
-
-/**
- * @type {{http: string, https: string}}
- */
-CartoDBLayerInfo.prototype.cdn_url;

externs/closure-compiler.js

@@ -1,9 +0,0 @@
-/**
- * @fileoverview Definitions for externs that are either missing or incorrect
- * in the current release version of the closure compiler we use.
- *
- * The entries must be removed once they are available/correct in the
- * version we use.
- *
- * @externs
- */

externs/esrijson.js

@@ -1,198 +0,0 @@
-
-/**
- * @fileoverview Externs for EsriJSON.
- * @see http://resources.arcgis.com/en/help/rest/apiref/geometry.html
- * @externs
- */
-
-
-
-/**
- * @constructor
- */
-var EsriJSONObject = function() {};
-
-
-/**
- * @type {!EsriJSONCRS}
- */
-EsriJSONObject.prototype.spatialReference;
-
-
-
-/**
- * @constructor
- */
-var EsriJSONCRS = function() {};
-
-
-/**
- * CRS well know identifier.
- * @type {number}
- */
-EsriJSONCRS.prototype.wkid;
-
-
-
-/**
- * @constructor
- * @extends {EsriJSONObject}
- */
-var EsriJSONPoint = function() {};
-
-
-/**
- * M value of point.
- * @type {number}
- */
-EsriJSONPoint.prototype.m;
-
-
-/**
- * X coordinate of point.
- * @type {number}
- */
-EsriJSONPoint.prototype.x;
-
-
-
-/**
- * Y coordinate of point.
- * @type {number}
- */
-EsriJSONPoint.prototype.y;
-
-
-/**
- * Z coordinate of point.
- * @type {number|undefined}
- */
-EsriJSONPoint.prototype.z;
-
-
-/**
- * @constructor
- * @extends {EsriJSONObject}
- */
-var EsriJSONMultipoint = function() {};
-
-
-/**
- * Does Multipoint have M values?
- * @type {boolean|undefined}
- */
-EsriJSONMultipoint.prototype.hasM;
-
-
-/**
- * Does Multipoint have Z values?
- * @type {boolean|undefined}
- */
-EsriJSONMultipoint.prototype.hasZ;
-
-
-/**
- * @type {!Array.<!Array.<number>>}
- */
-EsriJSONMultipoint.prototype.points;
-
-
-/**
- * @constructor
- * @extends {EsriJSONObject}
- */
-var EsriJSONPolyline = function() {};
-
-
-/**
- * Does Polyline have M values?
- * @type {boolean|undefined}
- */
-EsriJSONPolyline.prototype.hasM;
-
-
-/**
- * Does Polyline have Z values?
- * @type {boolean|undefined}
- */
-EsriJSONPolyline.prototype.hasZ;
-
-
-/**
- * @type {!Array.<!Array.<!Array.<number>>>}
- */
-EsriJSONPolyline.prototype.paths;
-
-
-/**
- * @constructor
- * @extends {EsriJSONObject}
- */
-var EsriJSONPolygon = function() {};
-
-
-/**
- * Does Polygon have M values?
- * @type {boolean|undefined}
- */
-EsriJSONPolygon.prototype.hasM;
-
-
-/**
- * Does Polygon have Z values?
- * @type {boolean|undefined}
- */
-EsriJSONPolygon.prototype.hasZ;
-
-
-/**
- * @type {!Array.<!Array.<!Array.<number>>>}
- */
-EsriJSONPolygon.prototype.rings;
-
-
-/**
- * @typedef {(EsriJSONPoint|EsriJSONMultipoint|EsriJSONPolyline|
-           EsriJSONPolygon)}
- */
-var EsriJSONGeometry;
-
-
-/**
- * @constructor
- * @extends {EsriJSONObject}
- */
-var EsriJSONFeature = function() {};
-
-
-/**
- * @type {EsriJSONGeometry}
- */
-EsriJSONFeature.prototype.geometry;
-
-
-/**
- * @type {Object.<string, *>}
- */
-EsriJSONFeature.prototype.attributes;
-
-
-
-/**
- * @constructor
- * @extends {EsriJSONObject}
- */
-var EsriJSONFeatureCollection = function() {};
-
-
-/**
- * @type {!Array.<EsriJSONFeature>}
- */
-EsriJSONFeatureCollection.prototype.features;
-
-
-/**
- * The name of the attribute that contains ids.
- * @type {string}
- */
-EsriJSONFeatureCollection.prototype.objectIdFieldName;

externs/example.js

@@ -1,23 +0,0 @@
-/**
- * @type {Object}
- */
-let common;
-
-
-/**
- * @param {string=} opt_default Default renderer.
- * @return {string} Renderer type.
- */
-common.getRendererFromQueryString = function(opt_default) {};
-
-
-/**
- * @param {function(new:ol.style.Style, module:ol/style/Style~Options=)} Style Style constructor.
- * @param {function(new:ol.style.Fill, module:ol/style/Fill~Options=)} Fill Fill constructor.
- * @param {function(new:ol.style.Stroke, module:ol/style/Stroke~Options=)} Stroke Stroke constructor.
- * @param {function(new:ol.style.Icon, module:ol/style/Icon~Options=)} Icon Icon constructor.
- * @param {function(new:ol.style.Text, module:ol/style/Text~Options=)} Text Text constructor.
- * @return {function((module:ol/Feature~Feature|ol.render.Feature), number):
- *     Array.<ol.style.Style>}
- */
-const createMapboxStreetsV6Style = function(Style, Fill, Stroke, Icon, Text) {};

externs/geojson.js

@@ -1,155 +0,0 @@
-
-/**
- * @fileoverview Externs for GeoJSON.
- * @see http://geojson.org/geojson-spec.html
- * @externs
- */
-
-
-
-/**
- * @constructor
- */
-var GeoJSONObject = function() {};
-
-
-/**
- * @type {!Array.<number>|undefined}
- */
-GeoJSONObject.prototype.bbox;
-
-
-/**
- * @type {string}
- */
-GeoJSONObject.prototype.type;
-
-
-/**
- * @type {!GeoJSONCRS|undefined}
- */
-GeoJSONObject.prototype.crs;
-
-
-
-/**
- * @constructor
- */
-var GeoJSONCRS = function() {};
-
-
-/**
- * CRS type. One of `link` or `name`.
- * @type {string}
- */
-GeoJSONCRS.prototype.type;
-
-
-/**
- * @type {!GeoJSONCRSName|!GeoJSONLink}
- */
-GeoJSONCRS.prototype.properties;
-
-
-/**
- * @constructor
- */
-var GeoJSONCRSName = function() {};
-
-
-/**
- * @type {string}
- */
-GeoJSONCRSName.prototype.name;
-
-
-
-/**
- * @constructor
- * @extends {GeoJSONObject}
- */
-var GeoJSONGeometry = function() {};
-
-
-/**
- * @type {!Array.<number>|!Array.<!Array.<number>>|
- *        !Array.<!Array.<!Array.<number>>>}
- */
-GeoJSONGeometry.prototype.coordinates;
-
-
-
-/**
- * @constructor
- * @extends {GeoJSONObject}
- */
-var GeoJSONGeometryCollection = function() {};
-
-
-/**
- * @type {!Array.<GeoJSONGeometry>}
- */
-GeoJSONGeometryCollection.prototype.geometries;
-
-
-
-/**
- * @constructor
- * @extends {GeoJSONObject}
- */
-var GeoJSONFeature = function() {};
-
-
-/**
- * @type {GeoJSONGeometry|GeoJSONGeometryCollection}
- */
-GeoJSONFeature.prototype.geometry;
-
-
-/**
- * @type {number|string|undefined}
- */
-GeoJSONFeature.prototype.id;
-
-
-/**
- * @type {Object.<string, *>}
- */
-GeoJSONFeature.prototype.properties;
-
-
-/**
- * @type {string|undefined}
- */
-GeoJSONFeature.prototype.geometry_name;
-
-
-/**
- * @constructor
- * @extends {GeoJSONObject}
- */
-var GeoJSONFeatureCollection = function() {};
-
-
-/**
- * @type {!Array.<GeoJSONFeature>}
- */
-GeoJSONFeatureCollection.prototype.features;
-
-
-
-/**
- * @constructor
- */
-var GeoJSONLink = function() {};
-
-
-/**
- * @type {string}
- */
-GeoJSONLink.prototype.href;
-
-/**
- * @type {string}
- */
-GeoJSONLink.prototype.type;

externs/proj4js.js

@@ -1,37 +0,0 @@
-/**
- * @externs
- * @see http://proj4js.org/
- */
-
-
-/**
- * @constructor
- */
-var Proj4 = function() {};
-
-
-/**
- * @param {ol.Coordinate} coordinates
- * @return {ol.Coordinate}
- */
-Proj4.prototype.forward = function(coordinates) {};
-
-
-/**
- * @param {ol.Coordinate} coordinates
- * @return {ol.Coordinate}
- */
-Proj4.prototype.inverse = function(coordinates) {};
-
-
-/**
- * @param {string} name
- * @param {(string|Object)=} opt_def
- * @return {undefined|Object.<string, Object.<{axis: string, units: string, to_meter: number}>>}
- */
-Proj4.prototype.defs = function(name, opt_def) {};
-
-/**
- * @type {Proj4}
- */
-var proj4;

externs/readme.md

@@ -1,3 +0,0 @@
-# Externs
-
-TODO: remove this directory

externs/tilejson.js

@@ -1,120 +0,0 @@
-/**
- * @externs
- * @see https://github.com/mapbox/tilejson-spec
- * @see https://github.com/mapbox/utfgrid-spec
- */
-
-
-/**
- * @constructor
- */
-var TileJSON = function() {};
-
-
-/**
- * @type {string}
- */
-TileJSON.prototype.tilejson;
-
-
-/**
- * @type {string|undefined}
- */
-TileJSON.prototype.name;
-
-
-/**
- * @type {string|undefined}
- */
-TileJSON.prototype.description;
-
-
-/**
- * @type {string|undefined}
- */
-TileJSON.prototype.version;
-
-
-/**
- * @type {string|undefined}
- */
-TileJSON.prototype.attribution;
-
-
-/**
- * @type {string|undefined}
- */
-TileJSON.prototype.template;
-
-
-/**
- * @type {string|undefined}
- */
-TileJSON.prototype.legend;
-
-
-/**
- * @type {string|undefined}
- */
-TileJSON.prototype.scheme;
-
-
-/**
- * @type {!Array.<string>}
- */
-TileJSON.prototype.tiles;
-
-
-/**
- * @type {!Array.<string>|undefined}
- */
-TileJSON.prototype.grids;
-
-
-/**
- * @type {number|undefined}
- */
-TileJSON.prototype.minzoom;
-
-
-/**
- * @type {number|undefined}
- */
-TileJSON.prototype.maxzoom;
-
-
-/**
- * @type {!Array.<number>|undefined}
- */
-TileJSON.prototype.bounds;
-
-
-/**
- * @type {!Array.<number>|undefined}
- */
-TileJSON.prototype.center;
-
-
-
-/**
- * @constructor
- */
-var UTFGridJSON = function() {};
-
-
-/**
- * @type {!Array.<string>}
- */
-UTFGridJSON.prototype.grid;
-
-
-/**
- * @type {!Array.<string>}
- */
-UTFGridJSON.prototype.keys;
-
-
-/**
- * @type {!Object.<string, Object>|undefined}
- */
-UTFGridJSON.prototype.data;

externs/topojson.js

@@ -1,177 +0,0 @@
-
-/**
- * @fileoverview Externs for TopoJSON.
- * @see https://github.com/mbostock/topojson/wiki/Specification
- * @externs
- */
-
-
-
-/**
- * @constructor
- */
-var TopoJSONTopology = function() {};
-
-
-/**
- * @type {string}
- */
-TopoJSONTopology.prototype.type;
-
-
-/**
- * @type {TopoJSONTransform|undefined}
- */
-TopoJSONTopology.prototype.transform;
-
-
-/**
- * @type {Object.<string, (TopoJSONGeometry|TopoJSONGeometryCollection)>}
- */
-TopoJSONTopology.prototype.objects;
-
-
-/**
- * @type {!Array.<Array.<Array.<number>>>}
- */
-TopoJSONTopology.prototype.arcs;
-
-
-
-/**
- * @constructor
- */
-var TopoJSONTransform = function() {};
-
-
-/**
- * @type {!Array.<number>}
- */
-TopoJSONTransform.prototype.scale;
-
-
-/**
- * @type {!Array.<number>}
- */
-TopoJSONTransform.prototype.translate;
-
-
-
-/**
- * @constructor
- */
-var TopoJSONGeometry = function() {};
-
-
-/**
- * @type {string}
- */
-TopoJSONGeometry.prototype.type;
-
-
-/**
- * @type {string|number|undefined}
- */
-TopoJSONGeometry.prototype.id;
-
-
-/**
- * @type {Object.<string, *>|undefined}
- */
-TopoJSONGeometry.prototype.properties;
-
-
-/**
- * @constructor
- */
-var TopoJSONGeometryCollection = function() {};
-
-
-/**
- * @type {Array.<TopoJSONGeometry>}
- */
-TopoJSONGeometryCollection.prototype.geometries;
-
-
-
-/**
- * @constructor
- * @extends {TopoJSONGeometry}
- */
-var TopoJSONPoint = function() {};
-
-
-/**
- * @type {!Array.<number>}
- */
-TopoJSONPoint.prototype.coordinates;
-
-
-
-/**
- * @constructor
- * @extends {TopoJSONGeometry}
- */
-var TopoJSONLineString = function() {};
-
-
-/**
- * @type {!Array.<number>}
- */
-TopoJSONLineString.prototype.arcs;
-
-
-
-/**
- * @constructor
- * @extends {TopoJSONGeometry}
- */
-var TopoJSONPolygon = function() {};
-
-
-/**
- * @type {!Array.<Array.<number>>}
- */
-TopoJSONPolygon.prototype.arcs;
-
-
-
-/**
- * @constructor
- * @extends {TopoJSONGeometry}
- */
-var TopoJSONMultiPoint = function() {};
-
-
-/**
- * @type {!Array.<Array.<number>>}
- */
-TopoJSONMultiPoint.prototype.coordinates;
-
-
-
-/**
- * @constructor
- * @extends {TopoJSONGeometry}
- */
-var TopoJSONMultiLineString = function() {};
-
-
-/**
- * @type {!Array.<Array.<number>>}
- */
-TopoJSONMultiLineString.prototype.arcs;
-
-
-
-/**
- * @constructor
- * @extends {TopoJSONGeometry}
- */
-var TopoJSONMultiPolygon = function() {};
-
-
-/**
- * @type {!Array.<Array.<Array.<number>>>}
- */
-TopoJSONMultiPolygon.prototype.arcs;

package.json

@@ -1,31 +1,29 @@
 {
-  "name": "openlayers",
-  "version": "5.0.0-beta.12",
-  "description": "Build tools and sources for developing OpenLayers based mapping applications",
+  "name": "ol",
+  "version": "5.1.0",
+  "description": "OpenLayers mapping library",
   "keywords": [
     "map",
     "mapping",
     "ol"
   ],
+  "private": true,
   "homepage": "https://openlayers.org/",
   "scripts": {
     "lint": "eslint tasks test src/ol examples config",
     "pretest": "npm run lint",
-    "posttest": "npm run typecheck",
     "test": "npm run karma -- --single-run",
     "karma": "karma start test/karma.config.js",
-    "serve-examples": "mkdir -p build/examples && webpack --config examples/webpack/config.js --watch & serve build/examples",
-    "build-examples": "webpack --config examples/webpack/config.js --env=prod",
-    "build-index": "node tasks/generate-index.js",
-    "prebuild": "npm run build-index",
-    "build": "webpack --config config/webpack.js",
-    "presrc-closure": "npm run prebuild",
-    "src-closure": "babel -q --out-dir build/src-closure src/",
-    "pretypecheck": "npm run src-closure",
-    "typecheck": "node tasks/typecheck",
+    "serve-examples": "webpack-dev-server --config examples/webpack/config.js --mode development --watch",
+    "build-examples": "webpack --config examples/webpack/config.js --mode production",
+    "build-package": "npm run transpile && npm run copy-css && node tasks/prepare-package",
+    "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"
@@ -34,31 +32,25 @@
   "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-cli": "6.26.0",
-    "babel-minify-webpack-plugin": "^0.3.0",
-    "babel-plugin-jsdoc-closure": "1.5.1",
-    "chaikin-smooth": "1.0.4",
+    "buble": "^0.19.3",
+    "buble-loader": "^0.5.1",
+    "chaikin-smooth": "^1.0.4",
     "clean-css-cli": "4.1.11",
-    "copy-webpack-plugin": "^4.0.1",
+    "copy-webpack-plugin": "^4.4.1",
     "coveralls": "3.0.1",
-    "eslint": "4.19.1",
-    "eslint-config-openlayers": "^9.2.0",
+    "eslint": "5.0.1",
+    "eslint-config-openlayers": "^11.0.0",
     "expect.js": "0.3.1",
     "front-matter": "^2.1.2",
-    "fs-extra": "^6.0.0",
-    "google-closure-compiler": "20180506.0.0",
+    "fs-extra": "^7.0.0",
+    "glob": "^7.1.2",
     "handlebars": "4.0.11",
-    "html-webpack-plugin": "^3.0.1",
     "istanbul": "0.4.5",
     "jquery": "3.3.1",
     "jsdoc": "3.5.5",
@@ -68,22 +60,31 @@
     "karma-firefox-launcher": "^1.1.0",
     "karma-mocha": "1.3.0",
     "karma-sauce-launcher": "1.2.0",
-    "karma-webpack": "3.0.0",
-    "marked": "0.3.19",
-    "mocha": "5.1.1",
+    "karma-sourcemap-loader": "^0.3.7",
+    "karma-webpack": "4.0.0-beta.0",
+    "marked": "0.4.0",
+    "mocha": "5.2.0",
     "mustache": "^2.3.0",
     "pixelmatch": "^4.0.2",
     "proj4": "2.4.4",
-    "recast": "0.14.7",
-    "serve": "^6.5.5",
-    "sinon": "^5.0.1",
+    "rollup": "0.63.4",
+    "rollup-plugin-buble": "0.19.2",
+    "rollup-plugin-commonjs": "9.1.3",
+    "rollup-plugin-node-resolve": "3.3.0",
+    "rollup-plugin-sourcemaps": "0.4.2",
+    "rollup-plugin-uglify": "4.0.0",
+    "sinon": "^6.0.0",
+    "uglifyjs-webpack-plugin": "^1.2.5",
     "url-polyfill": "^1.0.13",
     "walk": "^2.3.9",
-    "webpack": "3.11.0",
-    "webpack-merge": "4.1.2"
+    "webpack": "4.16.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,40 +1,44 @@
 /**
  * @module ol/AssertionError
  */
-import {VERSION, inherits} from './index.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 ? VERSION.split('-')[0] : 'latest';
+class AssertionError extends Error {
 
   /**
-   * @type {string}
+   * @param {number} code Error code.
    */
-  this.message = 'Assertion failed. See https://openlayers.org/en/' + path +
-      '/doc/errors/#' + code + ' for details.';
+  constructor(code) {
+    const path = VERSION.split('-')[0];
+    const message = 'Assertion failed. See https://openlayers.org/en/' + path +
+    '/doc/errors/#' + code + ' for details.';
 
-  /**
-   * Error code. The meaning of the code can be found on
-   * {@link 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}
-   * @api
-   */
-  this.code = code;
+    super(message);
 
-  this.name = 'AssertionError';
+    /**
+     * Error code. The meaning of the code can be found on
+     * 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}
+     * @api
+     */
+    this.code = code;
 
-};
+    /**
+     * @type {string}
+     */
+    this.name = 'AssertionError';
 
-inherits(AssertionError, Error);
+    // Re-assign message, see https://github.com/Rich-Harris/buble/issues/40
+    this.message = message;
+  }
+
+}
 
 export default AssertionError;

src/ol/Collection.js

@@ -1,7 +1,6 @@
 /**
  * @module ol/Collection
  */
-import {inherits} from './index.js';
 import AssertionError from './AssertionError.js';
 import CollectionEventType from './CollectionEventType.js';
 import BaseObject from './Object.js';
@@ -21,26 +20,26 @@ const Property = {
  * @classdesc
  * Events emitted by {@link module:ol/Collection~Collection} instances are instances of this
  * type.
- *
- * @constructor
- * @extends {module:ol/events/Event}
- * @param {module:ol/CollectionEventType} type Type.
- * @param {*=} opt_element Element.
  */
-export const CollectionEvent = function(type, opt_element) {
-
-  Event.call(this, type);
+export class CollectionEvent extends Event {
 
   /**
-   * The element that is added to or removed from the collection.
-   * @type {*}
-   * @api
+   * @param {module:ol/CollectionEventType} type Type.
+   * @param {*=} opt_element Element.
    */
-  this.element = opt_element;
+  constructor(type, opt_element) {
+    super(type);
 
-};
+    /**
+     * The element that is added to or removed from the collection.
+     * @type {*}
+     * @api
+     */
+    this.element = opt_element;
 
-inherits(CollectionEvent, Event);
+  }
+
+}
 
 
 /**
@@ -57,247 +56,231 @@ 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) {
-
-  BaseObject.call(this);
-
-  const options = opt_options || {};
+class Collection extends BaseObject {
 
   /**
-   * @private
-   * @type {boolean}
+   * @param {Array.<T>=} opt_array Array.
+   * @param {module:ol/Collection~Options=} opt_options Collection options.
    */
-  this.unique_ = !!options.unique;
+  constructor(opt_array, opt_options) {
 
-  /**
-   * @private
-   * @type {!Array.<T>}
-   */
-  this.array_ = opt_array ? opt_array : [];
+    super();
 
-  if (this.unique_) {
-    for (let i = 0, ii = this.array_.length; i < ii; ++i) {
-      this.assertUnique_(this.array_[i], i);
-    }
-  }
+    const options = opt_options || {};
 
-  this.updateLength_();
+    /**
+     * @private
+     * @type {boolean}
+     */
+    this.unique_ = !!options.unique;
 
-};
+    /**
+     * @private
+     * @type {!Array.<T>}
+     */
+    this.array_ = opt_array ? opt_array : [];
 
-inherits(Collection, BaseObject);
-
-
-/**
- * Remove all elements from the collection.
- * @api
- */
-Collection.prototype.clear = function() {
-  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.
- * @api
- */
-Collection.prototype.extend = function(arr) {
-  let i, ii;
-  for (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
- *     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) {
-  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.
- * @api
- */
-Collection.prototype.getArray = function() {
-  return this.array_;
-};
-
-
-/**
- * Get the element at the provided index.
- * @param {number} index Index.
- * @return {T} Element.
- * @api
- */
-Collection.prototype.item = function(index) {
-  return this.array_[index];
-};
-
-
-/**
- * Get the length of this collection.
- * @return {number} The length of the array.
- * @observable
- * @api
- */
-Collection.prototype.getLength = function() {
-  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) {
-  if (this.unique_) {
-    this.assertUnique_(elem);
-  }
-  this.array_.splice(index, 0, 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() {
-  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) {
-  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) {
-  const arr = this.array_;
-  let i, ii;
-  for (i = 0, ii = arr.length; i < ii; ++i) {
-    if (arr[i] === elem) {
-      return this.removeAt(i);
-    }
-  }
-  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) {
-  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) {
-  const n = this.getLength();
-  if (index < n) {
     if (this.unique_) {
-      this.assertUnique_(elem, index);
+      for (let i = 0, ii = this.array_.length; i < ii; ++i) {
+        this.assertUnique_(this.array_[i], i);
+      }
     }
-    const prev = this.array_[index];
-    this.array_[index] = elem;
-    this.dispatchEvent(
-      new CollectionEvent(CollectionEventType.REMOVE, prev));
+
+    this.updateLength_();
+
+  }
+
+  /**
+   * Remove all elements from the collection.
+   * @api
+   */
+  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.
+   * @api
+   */
+  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
+   *     for every element. This function takes 3 arguments (the element, the
+   *     index and the array). The return value is ignored.
+   * @api
+   */
+  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.
+   * @api
+   */
+  getArray() {
+    return this.array_;
+  }
+
+  /**
+   * Get the element at the provided index.
+   * @param {number} index Index.
+   * @return {T} Element.
+   * @api
+   */
+  item(index) {
+    return this.array_[index];
+  }
+
+  /**
+   * Get the length of this collection.
+   * @return {number} The length of the array.
+   * @observable
+   * @api
+   */
+  getLength() {
+    return /** @type {number} */ (this.get(Property.LENGTH));
+  }
+
+  /**
+   * Insert an element at the provided index.
+   * @param {number} index Index.
+   * @param {T} elem Element.
+   * @api
+   */
+  insertAt(index, elem) {
+    if (this.unique_) {
+      this.assertUnique_(elem);
+    }
+    this.array_.splice(index, 0, elem);
+    this.updateLength_();
     this.dispatchEvent(
       new CollectionEvent(CollectionEventType.ADD, elem));
-  } else {
-    let j;
-    for (j = n; j < index; ++j) {
-      this.insertAt(j, undefined);
-    }
-    this.insertAt(index, elem);
   }
-};
 
+  /**
+   * Remove the last element of the collection and return it.
+   * Return `undefined` if the collection is empty.
+   * @return {T|undefined} Element.
+   * @api
+   */
+  pop() {
+    return this.removeAt(this.getLength() - 1);
+  }
 
-/**
- * @private
- */
-Collection.prototype.updateLength_ = function() {
-  this.set(Property.LENGTH, this.array_.length);
-};
+  /**
+   * Insert the provided element at the end of the collection.
+   * @param {T} elem Element.
+   * @return {number} New length of the collection.
+   * @api
+   */
+  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
+   */
+  remove(elem) {
+    const arr = this.array_;
+    for (let i = 0, ii = arr.length; i < ii; ++i) {
+      if (arr[i] === elem) {
+        return this.removeAt(i);
+      }
+    }
+    return undefined;
+  }
 
-/**
- * @private
- * @param {T} elem Element.
- * @param {number=} opt_except Optional index to ignore.
- */
-Collection.prototype.assertUnique_ = function(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);
+  /**
+   * 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
+   */
+  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
+   */
+  setAt(index, elem) {
+    const n = this.getLength();
+    if (index < n) {
+      if (this.unique_) {
+        this.assertUnique_(elem, index);
+      }
+      const prev = this.array_[index];
+      this.array_[index] = elem;
+      this.dispatchEvent(
+        new CollectionEvent(CollectionEventType.REMOVE, prev));
+      this.dispatchEvent(
+        new CollectionEvent(CollectionEventType.ADD, elem));
+    } else {
+      for (let j = n; j < index; ++j) {
+        this.insertAt(j, undefined);
+      }
+      this.insertAt(index, elem);
     }
   }
-};
+
+  /**
+   * @private
+   */
+  updateLength_() {
+    this.set(Property.LENGTH, this.array_.length);
+  }
+
+  /**
+   * @private
+   * @param {T} elem Element.
+   * @param {number=} opt_except Optional index to ignore.
+   */
+  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

@@ -5,9 +5,18 @@ import {UNDEFINED} from './functions.js';
 
 /**
  * Objects that need to clean up after themselves.
- * @constructor
  */
-const Disposable = function() {};
+class Disposable {
+  /**
+   * Clean up.
+   */
+  dispose() {
+    if (!this.disposed_) {
+      this.disposed_ = true;
+      this.disposeInternal();
+    }
+  }
+}
 
 /**
  * The object has already been disposed.
@@ -16,16 +25,6 @@ const Disposable = function() {};
  */
 Disposable.prototype.disposed_ = false;
 
-/**
- * Clean up.
- */
-Disposable.prototype.dispose = function() {
-  if (!this.disposed_) {
-    this.disposed_ = true;
-    this.disposeInternal();
-  }
-};
-
 /**
  * Extension point for disposable objects.
  * @protected

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 './index.js';
 import BaseObject, {getChangeEventType} from './Object.js';
 import Geometry from './geom/Geometry.js';
 import Style from './style/Style.js';
@@ -51,235 +50,224 @@ import Style from './style/Style.js';
  * var point = feature.getGeometry();
  * ```
  *
- * @constructor
- * @extends {module:ol/Object}
- * @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) {
-
-  BaseObject.call(this);
+class Feature extends BaseObject {
 
   /**
-   * @private
-   * @type {number|string|undefined}
+   * @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.
    */
-  this.id_ = undefined;
+  constructor(opt_geometryOrProperties) {
 
-  /**
-   * @type {string}
-   * @private
-   */
-  this.geometryName_ = 'geometry';
+    super();
 
-  /**
-   * User provided style.
-   * @private
-   * @type {module:ol/style/Style|Array.<module:ol/style/Style>|module:ol/style/Style~StyleFunction}
-   */
-  this.style_ = null;
+    /**
+     * @private
+     * @type {number|string|undefined}
+     */
+    this.id_ = undefined;
 
-  /**
-   * @private
-   * @type {module:ol/style/Style~StyleFunction|undefined}
-   */
-  this.styleFunction_ = undefined;
+    /**
+     * @type {string}
+     * @private
+     */
+    this.geometryName_ = 'geometry';
 
-  /**
-   * @private
-   * @type {?module:ol/events~EventsKey}
-   */
-  this.geometryChangeKey_ = null;
+    /**
+     * User provided style.
+     * @private
+     * @type {module:ol/style/Style|Array.<module:ol/style/Style>|module:ol/style/Style~StyleFunction}
+     */
+    this.style_ = null;
 
-  listen(
-    this, getChangeEventType(this.geometryName_),
-    this.handleGeometryChanged_, this);
+    /**
+     * @private
+     * @type {module:ol/style/Style~StyleFunction|undefined}
+     */
+    this.styleFunction_ = undefined;
 
-  if (opt_geometryOrProperties !== undefined) {
-    if (opt_geometryOrProperties instanceof Geometry ||
-        !opt_geometryOrProperties) {
-      const geometry = opt_geometryOrProperties;
-      this.setGeometry(geometry);
-    } else {
-      /** @type {Object.<string, *>} */
-      const properties = opt_geometryOrProperties;
-      this.setProperties(properties);
+    /**
+     * @private
+     * @type {?module:ol/events~EventsKey}
+     */
+    this.geometryChangeKey_ = null;
+
+    listen(
+      this, getChangeEventType(this.geometryName_),
+      this.handleGeometryChanged_, this);
+
+    if (opt_geometryOrProperties !== undefined) {
+      if (opt_geometryOrProperties instanceof Geometry ||
+          !opt_geometryOrProperties) {
+        const geometry = opt_geometryOrProperties;
+        this.setGeometry(geometry);
+      } else {
+        /** @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() {
-  const clone = new Feature(this.getProperties());
-  clone.setGeometryName(this.getGeometryName());
-  const geometry = this.getGeometry();
-  if (geometry) {
-    clone.setGeometry(geometry.clone());
+  /**
+   * 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
+   */
+  clone() {
+    const clone = new Feature(this.getProperties());
+    clone.setGeometryName(this.getGeometryName());
+    const geometry = this.getGeometry();
+    if (geometry) {
+      clone.setGeometry(geometry.clone());
+    }
+    const style = this.getStyle();
+    if (style) {
+      clone.setStyle(style);
+    }
+    return clone;
   }
-  const style = this.getStyle();
-  if (style) {
-    clone.setStyle(style);
+
+  /**
+   * 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}.
+   * @return {module:ol/geom/Geometry|undefined} The default geometry for the feature.
+   * @api
+   * @observable
+   */
+  getGeometry() {
+    return (
+      /** @type {module:ol/geom/Geometry|undefined} */ (this.get(this.geometryName_))
+    );
   }
-  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}.
- * @return {module:ol/geom/Geometry|undefined} The default geometry for the feature.
- * @api
- * @observable
- */
-Feature.prototype.getGeometry = function() {
-  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() {
-  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() {
-  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.
- * @api
- */
-Feature.prototype.getStyle = function() {
-  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() {
-  return this.styleFunction_;
-};
-
-
-/**
- * @private
- */
-Feature.prototype.handleGeometryChange_ = function() {
-  this.changed();
-};
-
-
-/**
- * @private
- */
-Feature.prototype.handleGeometryChanged_ = function() {
-  if (this.geometryChangeKey_) {
-    unlistenByKey(this.geometryChangeKey_);
-    this.geometryChangeKey_ = null;
+  /**
+   * 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
+   */
+  getId() {
+    return this.id_;
   }
-  const geometry = this.getGeometry();
-  if (geometry) {
-    this.geometryChangeKey_ = listen(geometry,
-      EventType.CHANGE, this.handleGeometryChange_, this);
+
+  /**
+   * 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
+   */
+  getGeometryName() {
+    return this.geometryName_;
   }
-  this.changed();
-};
 
+  /**
+   * 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.
+   * @api
+   */
+  getStyle() {
+    return this.style_;
+  }
 
-/**
- * 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) {
-  this.set(this.geometryName_, geometry);
-};
+  /**
+   * Get the feature's style function.
+   * @return {module:ol/style/Style~StyleFunction|undefined} Return a function
+   * representing the current style of this feature.
+   * @api
+   */
+  getStyleFunction() {
+    return this.styleFunction_;
+  }
 
+  /**
+   * @private
+   */
+  handleGeometryChange_() {
+    this.changed();
+  }
 
-/**
- * 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.
- * @api
- * @fires module:ol/events/Event~Event#event:change
- */
-Feature.prototype.setStyle = function(style) {
-  this.style_ = style;
-  this.styleFunction_ = !style ? undefined : createStyleFunction(style);
-  this.changed();
-};
+  /**
+   * @private
+   */
+  handleGeometryChanged_() {
+    if (this.geometryChangeKey_) {
+      unlistenByKey(this.geometryChangeKey_);
+      this.geometryChangeKey_ = null;
+    }
+    const geometry = this.getGeometry();
+    if (geometry) {
+      this.geometryChangeKey_ = listen(geometry,
+        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
+   */
+  setGeometry(geometry) {
+    this.set(this.geometryName_, geometry);
+  }
 
-/**
- * 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
- * {@link module:ol/source/Vector~VectorSource#getFeatureById} method.
- * @param {number|string|undefined} id The feature id.
- * @api
- * @fires module:ol/events/Event~Event#event:change
- */
-Feature.prototype.setId = function(id) {
-  this.id_ = id;
-  this.changed();
-};
+  /**
+   * 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.
+   * @api
+   * @fires module:ol/events/Event~Event#event:change
+   */
+  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
+   * {@link module:ol/source/Vector~VectorSource#getFeatureById} method.
+   * @param {number|string|undefined} id The feature id.
+   * @api
+   * @fires module:ol/events/Event~Event#event:change
+   */
+  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) {
-  unlisten(
-    this, getChangeEventType(this.geometryName_),
-    this.handleGeometryChanged_, this);
-  this.geometryName_ = name;
-  listen(
-    this, getChangeEventType(this.geometryName_),
-    this.handleGeometryChanged_, this);
-  this.handleGeometryChanged_();
-};
+  /**
+   * 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
+   */
+  setGeometryName(name) {
+    unlisten(
+      this, getChangeEventType(this.geometryName_),
+      this.handleGeometryChanged_, this);
+    this.geometryName_ = name;
+    listen(
+      this, getChangeEventType(this.geometryName_),
+      this.handleGeometryChanged_, this);
+    this.handleGeometryChanged_();
+  }
+}
 
 
 /**

src/ol/Geolocation.js

@@ -1,7 +1,6 @@
 /**
  * @module ol/Geolocation
  */
-import {inherits} from './index.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,307 +43,293 @@ 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) {
-
-  BaseObject.call(this);
-
-  const options = opt_options || {};
+class Geolocation extends BaseObject {
 
   /**
-   * The unprojected (EPSG:4326) device position.
-   * @private
-   * @type {module:ol/coordinate~Coordinate}
+   * @param {module:ol/Geolocation~Options=} opt_options Options.
    */
-  this.position_ = null;
+  constructor(opt_options) {
 
-  /**
-   * @private
-   * @type {module:ol/proj~TransformFunction}
-   */
-  this.transform_ = identityTransform;
+    super();
 
-  /**
-   * @private
-   * @type {number|undefined}
-   */
-  this.watchId_ = undefined;
+    const options = opt_options || {};
 
-  listen(
-    this, getChangeEventType(GeolocationProperty.PROJECTION),
-    this.handleProjectionChanged_, this);
-  listen(
-    this, getChangeEventType(GeolocationProperty.TRACKING),
-    this.handleTrackingChanged_, this);
+    /**
+     * The unprojected (EPSG:4326) device position.
+     * @private
+     * @type {module:ol/coordinate~Coordinate}
+     */
+    this.position_ = null;
+
+    /**
+     * @private
+     * @type {module:ol/proj~TransformFunction}
+     */
+    this.transform_ = identityTransform;
+
+    /**
+     * @private
+     * @type {number|undefined}
+     */
+    this.watchId_ = undefined;
+
+    listen(
+      this, getChangeEventType(GeolocationProperty.PROJECTION),
+      this.handleProjectionChanged_, this);
+    listen(
+      this, getChangeEventType(GeolocationProperty.TRACKING),
+      this.handleTrackingChanged_, this);
+
+    if (options.projection !== undefined) {
+      this.setProjection(options.projection);
+    }
+    if (options.trackingOptions !== undefined) {
+      this.setTrackingOptions(options.trackingOptions);
+    }
+
+    this.setTracking(options.tracking !== undefined ? options.tracking : false);
 
-  if (options.projection !== undefined) {
-    this.setProjection(options.projection);
-  }
-  if (options.trackingOptions !== undefined) {
-    this.setTrackingOptions(options.trackingOptions);
   }
 
-  this.setTracking(options.tracking !== undefined ? options.tracking : false);
+  /**
+   * @inheritDoc
+   */
+  disposeInternal() {
+    this.setTracking(false);
+    super.disposeInternal();
+  }
 
-};
-
-inherits(Geolocation, BaseObject);
-
-
-/**
- * @inheritDoc
- */
-Geolocation.prototype.disposeInternal = function() {
-  this.setTracking(false);
-  BaseObject.prototype.disposeInternal.call(this);
-};
-
-
-/**
- * @private
- */
-Geolocation.prototype.handleProjectionChanged_ = function() {
-  const projection = this.getProjection();
-  if (projection) {
-    this.transform_ = getTransformFromProjections(
-      getProjection('EPSG:4326'), projection);
-    if (this.position_) {
-      this.set(GeolocationProperty.POSITION, this.transform_(this.position_));
+  /**
+   * @private
+   */
+  handleProjectionChanged_() {
+    const projection = this.getProjection();
+    if (projection) {
+      this.transform_ = getTransformFromProjections(
+        getProjection('EPSG:4326'), projection);
+      if (this.position_) {
+        this.set(GeolocationProperty.POSITION, this.transform_(this.position_));
+      }
     }
   }
-};
 
-
-/**
- * @private
- */
-Geolocation.prototype.handleTrackingChanged_ = function() {
-  if (GEOLOCATION) {
-    const tracking = this.getTracking();
-    if (tracking && this.watchId_ === undefined) {
-      this.watchId_ = navigator.geolocation.watchPosition(
-        this.positionChange_.bind(this),
-        this.positionError_.bind(this),
-        this.getTrackingOptions());
-    } else if (!tracking && this.watchId_ !== undefined) {
-      navigator.geolocation.clearWatch(this.watchId_);
-      this.watchId_ = undefined;
+  /**
+   * @private
+   */
+  handleTrackingChanged_() {
+    if (GEOLOCATION) {
+      const tracking = this.getTracking();
+      if (tracking && this.watchId_ === undefined) {
+        this.watchId_ = navigator.geolocation.watchPosition(
+          this.positionChange_.bind(this),
+          this.positionError_.bind(this),
+          this.getTrackingOptions());
+      } else if (!tracking && this.watchId_ !== undefined) {
+        navigator.geolocation.clearWatch(this.watchId_);
+        this.watchId_ = undefined;
+      }
     }
   }
-};
 
-
-/**
- * @private
- * @param {GeolocationPosition} position position event.
- */
-Geolocation.prototype.positionChange_ = function(position) {
-  const coords = position.coords;
-  this.set(GeolocationProperty.ACCURACY, coords.accuracy);
-  this.set(GeolocationProperty.ALTITUDE,
-    coords.altitude === null ? undefined : coords.altitude);
-  this.set(GeolocationProperty.ALTITUDE_ACCURACY,
-    coords.altitudeAccuracy === null ?
-      undefined : coords.altitudeAccuracy);
-  this.set(GeolocationProperty.HEADING, coords.heading === null ?
-    undefined : toRadians(coords.heading));
-  if (!this.position_) {
-    this.position_ = [coords.longitude, coords.latitude];
-  } else {
-    this.position_[0] = coords.longitude;
-    this.position_[1] = coords.latitude;
+  /**
+   * @private
+   * @param {Position} position position event.
+   */
+  positionChange_(position) {
+    const coords = position.coords;
+    this.set(GeolocationProperty.ACCURACY, coords.accuracy);
+    this.set(GeolocationProperty.ALTITUDE,
+      coords.altitude === null ? undefined : coords.altitude);
+    this.set(GeolocationProperty.ALTITUDE_ACCURACY,
+      coords.altitudeAccuracy === null ?
+        undefined : coords.altitudeAccuracy);
+    this.set(GeolocationProperty.HEADING, coords.heading === null ?
+      undefined : toRadians(coords.heading));
+    if (!this.position_) {
+      this.position_ = [coords.longitude, coords.latitude];
+    } else {
+      this.position_[0] = coords.longitude;
+      this.position_[1] = coords.latitude;
+    }
+    const projectedPosition = this.transform_(this.position_);
+    this.set(GeolocationProperty.POSITION, projectedPosition);
+    this.set(GeolocationProperty.SPEED,
+      coords.speed === null ? undefined : coords.speed);
+    const geometry = circularPolygon(this.position_, coords.accuracy);
+    geometry.applyTransform(this.transform_);
+    this.set(GeolocationProperty.ACCURACY_GEOMETRY, geometry);
+    this.changed();
   }
-  const projectedPosition = this.transform_(this.position_);
-  this.set(GeolocationProperty.POSITION, projectedPosition);
-  this.set(GeolocationProperty.SPEED,
-    coords.speed === null ? undefined : coords.speed);
-  const geometry = circularPolygon(this.position_, coords.accuracy);
-  geometry.applyTransform(this.transform_);
-  this.set(GeolocationProperty.ACCURACY_GEOMETRY, geometry);
-  this.changed();
-};
 
-/**
- * Triggered when the Geolocation returns an error.
- * @event error
- * @api
- */
+  /**
+   * Triggered when the Geolocation returns an error.
+   * @event error
+   * @api
+   */
 
-/**
- * @private
- * @param {GeolocationPositionError} error error object.
- */
-Geolocation.prototype.positionError_ = function(error) {
-  error.type = EventType.ERROR;
-  this.setTracking(false);
-  this.dispatchEvent(/** @type {{type: string, target: undefined}} */ (error));
-};
+  /**
+   * @private
+   * @param {PositionError} error error object.
+   */
+  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
+   */
+  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
+   */
+  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
+   */
+  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
+   */
+  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.
+   * @return {number|undefined} The heading of the device in radians from north.
+   * @observable
+   * @api
+   */
+  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
+   */
+  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
+   */
+  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
+   */
+  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
+   */
+  getTracking() {
+    return /** @type {boolean} */ (this.get(GeolocationProperty.TRACKING));
+  }
+
+  /**
+   * Get the tracking options.
+   * 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
+   */
+  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
+   */
+  setProjection(projection) {
+    this.set(GeolocationProperty.PROJECTION, getProjection(projection));
+  }
+
+  /**
+   * Enable or disable tracking.
+   * @param {boolean} tracking Enable tracking.
+   * @observable
+   * @api
+   */
+  setTracking(tracking) {
+    this.set(GeolocationProperty.TRACKING, tracking);
+  }
+
+  /**
+   * Set the tracking options.
+   * 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
+   */
+  setTrackingOptions(options) {
+    this.set(GeolocationProperty.TRACKING_OPTIONS, options);
+  }
+}
 
 
-/**
- * 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() {
-  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() {
-  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() {
-  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() {
-  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.
- * @return {number|undefined} The heading of the device in radians from north.
- * @observable
- * @api
- */
-Geolocation.prototype.getHeading = function() {
-  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() {
-  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() {
-  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() {
-  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() {
-  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
- *     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));
-};
-
-
-/**
- * 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) {
-  this.set(GeolocationProperty.PROJECTION, getProjection(projection));
-};
-
-
-/**
- * Enable or disable tracking.
- * @param {boolean} tracking Enable tracking.
- * @observable
- * @api
- */
-Geolocation.prototype.setTracking = function(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
- *     [HTML5 Geolocation spec
- *     ](http://www.w3.org/TR/geolocation-API/#position_options_interface).
- * @observable
- * @api
- */
-Geolocation.prototype.setTrackingOptions = function(options) {
-  this.set(GeolocationProperty.TRACKING_OPTIONS, options);
-};
 export default Geolocation;

src/ol/Image.js

@@ -1,7 +1,6 @@
 /**
  * @module ol/Image
  */
-import {inherits} from './index.js';
 import ImageBase from './ImageBase.js';
 import ImageState from './ImageState.js';
 import {listenOnce, unlistenByKey} from './events.js';
@@ -28,132 +27,126 @@ import {getHeight} from './extent.js';
  */
 
 
-/**
- * @constructor
- * @extends {module:ol/ImageBase}
- * @param {module:ol/extent~Extent} extent Extent.
- * @param {number|undefined} resolution Resolution.
- * @param {number} pixelRatio Pixel ratio.
- * @param {string} src Image source URI.
- * @param {?string} crossOrigin Cross origin.
- * @param {module:ol/Image~LoadFunction} imageLoadFunction Image load function.
- */
-const ImageWrapper = function(extent, resolution, pixelRatio, src, crossOrigin, imageLoadFunction) {
-
-  ImageBase.call(this, extent, resolution, pixelRatio, ImageState.IDLE);
+class ImageWrapper extends ImageBase {
 
   /**
-   * @private
-   * @type {string}
+   * @param {module:ol/extent~Extent} extent Extent.
+   * @param {number|undefined} resolution Resolution.
+   * @param {number} pixelRatio Pixel ratio.
+   * @param {string} src Image source URI.
+   * @param {?string} crossOrigin Cross origin.
+   * @param {module:ol/Image~LoadFunction} imageLoadFunction Image load function.
    */
-  this.src_ = src;
+  constructor(extent, resolution, pixelRatio, src, crossOrigin, imageLoadFunction) {
+
+    super(extent, resolution, pixelRatio, ImageState.IDLE);
+
+    /**
+     * @private
+     * @type {string}
+     */
+    this.src_ = src;
+
+    /**
+     * @private
+     * @type {HTMLCanvasElement|HTMLImageElement|HTMLVideoElement}
+     */
+    this.image_ = new Image();
+    if (crossOrigin !== null) {
+      this.image_.crossOrigin = crossOrigin;
+    }
+
+    /**
+     * @private
+     * @type {Array.<module:ol/events~EventsKey>}
+     */
+    this.imageListenerKeys_ = null;
+
+    /**
+     * @protected
+     * @type {module:ol/ImageState}
+     */
+    this.state = ImageState.IDLE;
+
+    /**
+     * @private
+     * @type {module:ol/Image~LoadFunction}
+     */
+    this.imageLoadFunction_ = imageLoadFunction;
 
-  /**
-   * @private
-   * @type {HTMLCanvasElement|Image|HTMLVideoElement}
-   */
-  this.image_ = new Image();
-  if (crossOrigin !== null) {
-    this.image_.crossOrigin = crossOrigin;
   }
 
   /**
-   * @private
-   * @type {Array.<module:ol/events~EventsKey>}
+   * @inheritDoc
+   * @api
    */
-  this.imageListenerKeys_ = null;
-
-  /**
-   * @protected
-   * @type {module:ol/ImageState}
-   */
-  this.state = ImageState.IDLE;
-
-  /**
-   * @private
-   * @type {module:ol/Image~LoadFunction}
-   */
-  this.imageLoadFunction_ = imageLoadFunction;
-
-};
-
-inherits(ImageWrapper, ImageBase);
-
-
-/**
- * @inheritDoc
- * @api
- */
-ImageWrapper.prototype.getImage = function() {
-  return this.image_;
-};
-
-
-/**
- * Tracks loading or read errors.
- *
- * @private
- */
-ImageWrapper.prototype.handleImageError_ = function() {
-  this.state = ImageState.ERROR;
-  this.unlistenImage_();
-  this.changed();
-};
-
-
-/**
- * Tracks successful image load.
- *
- * @private
- */
-ImageWrapper.prototype.handleImageLoad_ = function() {
-  if (this.resolution === undefined) {
-    this.resolution = getHeight(this.extent) / this.image_.height;
+  getImage() {
+    return this.image_;
   }
-  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() {
-  if (this.state == ImageState.IDLE || this.state == ImageState.ERROR) {
-    this.state = ImageState.LOADING;
+  /**
+   * Tracks loading or read errors.
+   *
+   * @private
+   */
+  handleImageError_() {
+    this.state = ImageState.ERROR;
+    this.unlistenImage_();
     this.changed();
-    this.imageListenerKeys_ = [
-      listenOnce(this.image_, EventType.ERROR,
-        this.handleImageError_, this),
-      listenOnce(this.image_, EventType.LOAD,
-        this.handleImageLoad_, this)
-    ];
-    this.imageLoadFunction_(this, this.src_);
   }
-};
 
+  /**
+   * Tracks successful image load.
+   *
+   * @private
+   */
+  handleImageLoad_() {
+    if (this.resolution === undefined) {
+      this.resolution = getHeight(this.extent) / this.image_.height;
+    }
+    this.state = ImageState.LOADED;
+    this.unlistenImage_();
+    this.changed();
+  }
 
-/**
- * @param {HTMLCanvasElement|Image|HTMLVideoElement} image Image.
- */
-ImageWrapper.prototype.setImage = function(image) {
-  this.image_ = image;
-};
+  /**
+   * 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
+   */
+  load() {
+    if (this.state == ImageState.IDLE || this.state == ImageState.ERROR) {
+      this.state = ImageState.LOADING;
+      this.changed();
+      this.imageListenerKeys_ = [
+        listenOnce(this.image_, EventType.ERROR,
+          this.handleImageError_, this),
+        listenOnce(this.image_, EventType.LOAD,
+          this.handleImageLoad_, this)
+      ];
+      this.imageLoadFunction_(this, this.src_);
+    }
+  }
 
+  /**
+   * @param {HTMLCanvasElement|HTMLImageElement|HTMLVideoElement} image Image.
+   */
+  setImage(image) {
+    this.image_ = image;
+  }
+
+  /**
+   * Discards event handlers which listen for load completion or errors.
+   *
+   * @private
+   */
+  unlistenImage_() {
+    this.imageListenerKeys_.forEach(unlistenByKey);
+    this.imageListenerKeys_ = null;
+  }
+}
 
-/**
- * Discards event handlers which listen for load completion or errors.
- *
- * @private
- */
-ImageWrapper.prototype.unlistenImage_ = function() {
-  this.imageListenerKeys_.forEach(unlistenByKey);
-  this.imageListenerKeys_ = null;
-};
 
 export default ImageWrapper;

src/ol/ImageBase.js

@@ -1,103 +1,97 @@
 /**
  * @module ol/ImageBase
  */
-import {inherits} from './index.js';
 import EventTarget from './events/EventTarget.js';
 import EventType from './events/EventType.js';
 
 /**
- * @constructor
  * @abstract
- * @extends {module:ol/events/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) {
+class ImageBase extends EventTarget {
 
-  EventTarget.call(this);
+  /**
+   * @param {module:ol/extent~Extent} extent Extent.
+   * @param {number|undefined} resolution Resolution.
+   * @param {number} pixelRatio Pixel ratio.
+   * @param {module:ol/ImageState} state State.
+   */
+  constructor(extent, resolution, pixelRatio, state) {
+
+    super();
+
+    /**
+     * @protected
+     * @type {module:ol/extent~Extent}
+     */
+    this.extent = extent;
+
+    /**
+     * @private
+     * @type {number}
+     */
+    this.pixelRatio_ = pixelRatio;
+
+    /**
+     * @protected
+     * @type {number|undefined}
+     */
+    this.resolution = resolution;
+
+    /**
+     * @protected
+     * @type {module:ol/ImageState}
+     */
+    this.state = state;
+
+  }
 
   /**
    * @protected
-   * @type {module:ol/extent~Extent}
    */
-  this.extent = extent;
+  changed() {
+    this.dispatchEvent(EventType.CHANGE);
+  }
 
   /**
-   * @private
-   * @type {number}
+   * @return {module:ol/extent~Extent} Extent.
    */
-  this.pixelRatio_ = pixelRatio;
+  getExtent() {
+    return this.extent;
+  }
 
   /**
-   * @protected
-   * @type {number|undefined}
+   * @abstract
+   * @return {HTMLCanvasElement|HTMLImageElement|HTMLVideoElement} Image.
    */
-  this.resolution = resolution;
+  getImage() {}
 
   /**
-   * @protected
-   * @type {module:ol/ImageState}
+   * @return {number} PixelRatio.
    */
-  this.state = state;
+  getPixelRatio() {
+    return this.pixelRatio_;
+  }
 
-};
+  /**
+   * @return {number} Resolution.
+   */
+  getResolution() {
+    return /** @type {number} */ (this.resolution);
+  }
 
-inherits(ImageBase, EventTarget);
+  /**
+   * @return {module:ol/ImageState} State.
+   */
+  getState() {
+    return this.state;
+  }
 
+  /**
+   * Load not yet loaded URI.
+   * @abstract
+   */
+  load() {}
+}
 
-/**
- * @protected
- */
-ImageBase.prototype.changed = function() {
-  this.dispatchEvent(EventType.CHANGE);
-};
-
-
-/**
- * @return {module:ol/extent~Extent} Extent.
- */
-ImageBase.prototype.getExtent = function() {
-  return this.extent;
-};
-
-
-/**
- * @abstract
- * @return {HTMLCanvasElement|Image|HTMLVideoElement} Image.
- */
-ImageBase.prototype.getImage = function() {};
-
-
-/**
- * @return {number} PixelRatio.
- */
-ImageBase.prototype.getPixelRatio = function() {
-  return this.pixelRatio_;
-};
-
-
-/**
- * @return {number} Resolution.
- */
-ImageBase.prototype.getResolution = function() {
-  return /** @type {number} */ (this.resolution);
-};
-
-
-/**
- * @return {module:ol/ImageState} State.
- */
-ImageBase.prototype.getState = function() {
-  return this.state;
-};
-
-
-/**
- * Load not yet loaded URI.
- * @abstract
- */
-ImageBase.prototype.load = function() {};
 
 export default ImageBase;

src/ol/ImageCanvas.js

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

src/ol/ImageTile.js

@@ -1,7 +1,6 @@
 /**
  * @module ol/ImageTile
  */
-import {inherits} from './index.js';
 import Tile from './Tile.js';
 import TileState from './TileState.js';
 import {createCanvasContext2D} from './dom.js';
@@ -14,159 +13,151 @@ import EventType from './events/EventType.js';
  * @api
  */
 
-/**
- * @constructor
- * @extends {module:ol/Tile}
- * @param {module:ol/tilecoord~TileCoord} tileCoord Tile coordinate.
- * @param {module:ol/TileState} state State.
- * @param {string} src Image source URI.
- * @param {?string} crossOrigin Cross origin.
- * @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) {
-
-  Tile.call(this, tileCoord, state, opt_options);
+class ImageTile extends Tile {
 
   /**
-   * @private
-   * @type {?string}
+   * @param {module:ol/tilecoord~TileCoord} tileCoord Tile coordinate.
+   * @param {module:ol/TileState} state State.
+   * @param {string} src Image source URI.
+   * @param {?string} crossOrigin Cross origin.
+   * @param {module:ol/Tile~LoadFunction} tileLoadFunction Tile load function.
+   * @param {module:ol/Tile~Options=} opt_options Tile options.
    */
-  this.crossOrigin_ = crossOrigin;
+  constructor(tileCoord, state, src, crossOrigin, tileLoadFunction, opt_options) {
+
+    super(tileCoord, state, opt_options);
+
+    /**
+     * @private
+     * @type {?string}
+     */
+    this.crossOrigin_ = crossOrigin;
+
+    /**
+     * Image URI
+     *
+     * @private
+     * @type {string}
+     */
+    this.src_ = src;
+
+    /**
+     * @private
+     * @type {HTMLImageElement|HTMLCanvasElement}
+     */
+    this.image_ = new Image();
+    if (crossOrigin !== null) {
+      this.image_.crossOrigin = crossOrigin;
+    }
+
+    /**
+     * @private
+     * @type {Array.<module:ol/events~EventsKey>}
+     */
+    this.imageListenerKeys_ = null;
+
+    /**
+     * @private
+     * @type {module:ol/Tile~LoadFunction}
+     */
+    this.tileLoadFunction_ = tileLoadFunction;
+
+  }
 
   /**
-   * Image URI
+   * @inheritDoc
+   */
+  disposeInternal() {
+    if (this.state == TileState.LOADING) {
+      this.unlistenImage_();
+      this.image_ = getBlankImage();
+    }
+    if (this.interimTile) {
+      this.interimTile.dispose();
+    }
+    this.state = TileState.ABORT;
+    this.changed();
+    super.disposeInternal();
+  }
+
+  /**
+   * Get the HTML image element for this tile (may be a Canvas, Image, or Video).
+   * @return {HTMLCanvasElement|HTMLImageElement|HTMLVideoElement} Image.
+   * @api
+   */
+  getImage() {
+    return this.image_;
+  }
+
+  /**
+   * @inheritDoc
+   */
+  getKey() {
+    return this.src_;
+  }
+
+  /**
+   * Tracks loading or read errors.
    *
    * @private
-   * @type {string}
    */
-  this.src_ = src;
-
-  /**
-   * @private
-   * @type {Image|HTMLCanvasElement}
-   */
-  this.image_ = new Image();
-  if (crossOrigin !== null) {
-    this.image_.crossOrigin = crossOrigin;
-  }
-
-  /**
-   * @private
-   * @type {Array.<module:ol/events~EventsKey>}
-   */
-  this.imageListenerKeys_ = null;
-
-  /**
-   * @private
-   * @type {module:ol/Tile~LoadFunction}
-   */
-  this.tileLoadFunction_ = tileLoadFunction;
-
-};
-
-inherits(ImageTile, Tile);
-
-
-/**
- * @inheritDoc
- */
-ImageTile.prototype.disposeInternal = function() {
-  if (this.state == TileState.LOADING) {
+  handleImageError_() {
+    this.state = TileState.ERROR;
     this.unlistenImage_();
     this.image_ = getBlankImage();
+    this.changed();
   }
-  if (this.interimTile) {
-    this.interimTile.dispose();
+
+  /**
+   * Tracks successful image load.
+   *
+   * @private
+   */
+  handleImageLoad_() {
+    if (this.image_.naturalWidth && this.image_.naturalHeight) {
+      this.state = TileState.LOADED;
+    } else {
+      this.state = TileState.EMPTY;
+    }
+    this.unlistenImage_();
+    this.changed();
   }
-  this.state = TileState.ABORT;
-  this.changed();
-  Tile.prototype.disposeInternal.call(this);
-};
 
-
-/**
- * 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() {
-  return this.image_;
-};
-
-
-/**
- * @inheritDoc
- */
-ImageTile.prototype.getKey = function() {
-  return this.src_;
-};
-
-
-/**
- * Tracks loading or read errors.
- *
- * @private
- */
-ImageTile.prototype.handleImageError_ = function() {
-  this.state = TileState.ERROR;
-  this.unlistenImage_();
-  this.image_ = getBlankImage();
-  this.changed();
-};
-
-
-/**
- * Tracks successful image load.
- *
- * @private
- */
-ImageTile.prototype.handleImageLoad_ = function() {
-  if (this.image_.naturalWidth && this.image_.naturalHeight) {
-    this.state = TileState.LOADED;
-  } else {
-    this.state = TileState.EMPTY;
-  }
-  this.unlistenImage_();
-  this.changed();
-};
-
-
-/**
- * @inheritDoc
- * @api
- */
-ImageTile.prototype.load = function() {
-  if (this.state == TileState.ERROR) {
-    this.state = TileState.IDLE;
-    this.image_ = new Image();
-    if (this.crossOrigin_ !== null) {
-      this.image_.crossOrigin = this.crossOrigin_;
+  /**
+   * @inheritDoc
+   * @api
+   */
+  load() {
+    if (this.state == TileState.ERROR) {
+      this.state = TileState.IDLE;
+      this.image_ = new Image();
+      if (this.crossOrigin_ !== null) {
+        this.image_.crossOrigin = this.crossOrigin_;
+      }
+    }
+    if (this.state == TileState.IDLE) {
+      this.state = TileState.LOADING;
+      this.changed();
+      this.imageListenerKeys_ = [
+        listenOnce(this.image_, EventType.ERROR,
+          this.handleImageError_, this),
+        listenOnce(this.image_, EventType.LOAD,
+          this.handleImageLoad_, this)
+      ];
+      this.tileLoadFunction_(this, this.src_);
     }
   }
-  if (this.state == TileState.IDLE) {
-    this.state = TileState.LOADING;
-    this.changed();
-    this.imageListenerKeys_ = [
-      listenOnce(this.image_, EventType.ERROR,
-        this.handleImageError_, this),
-      listenOnce(this.image_, EventType.LOAD,
-        this.handleImageLoad_, this)
-    ];
-    this.tileLoadFunction_(this, this.src_);
+
+  /**
+   * Discards event handlers which listen for load completion or errors.
+   *
+   * @private
+   */
+  unlistenImage_() {
+    this.imageListenerKeys_.forEach(unlistenByKey);
+    this.imageListenerKeys_ = null;
   }
-};
-
-
-/**
- * Discards event handlers which listen for load completion or errors.
- *
- * @private
- */
-ImageTile.prototype.unlistenImage_ = function() {
-  this.imageListenerKeys_.forEach(unlistenByKey);
-  this.imageListenerKeys_ = null;
-};
+}
 
 
 /**

src/ol/Kinetic.js

@@ -6,124 +6,123 @@
  * @classdesc
  * Implementation of inertial deceleration for map movement.
  *
- * @constructor
- * @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) {
+class Kinetic {
 
   /**
-   * @private
-   * @type {number}
+   * @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).
    */
-  this.decay_ = decay;
+  constructor(decay, minVelocity, delay) {
 
-  /**
-   * @private
-   * @type {number}
-   */
-  this.minVelocity_ = minVelocity;
+    /**
+     * @private
+     * @type {number}
+     */
+    this.decay_ = decay;
 
-  /**
-   * @private
-   * @type {number}
-   */
-  this.delay_ = delay;
+    /**
+     * @private
+     * @type {number}
+     */
+    this.minVelocity_ = minVelocity;
 
-  /**
-   * @private
-   * @type {Array.<number>}
-   */
-  this.points_ = [];
+    /**
+     * @private
+     * @type {number}
+     */
+    this.delay_ = delay;
 
-  /**
-   * @private
-   * @type {number}
-   */
-  this.angle_ = 0;
+    /**
+     * @private
+     * @type {Array.<number>}
+     */
+    this.points_ = [];
 
-  /**
-   * @private
-   * @type {number}
-   */
-  this.initialVelocity_ = 0;
-};
+    /**
+     * @private
+     * @type {number}
+     */
+    this.angle_ = 0;
 
-
-/**
- * FIXME empty description for jsdoc
- */
-Kinetic.prototype.begin = function() {
-  this.points_.length = 0;
-  this.angle_ = 0;
-  this.initialVelocity_ = 0;
-};
-
-
-/**
- * @param {number} x X.
- * @param {number} y Y.
- */
-Kinetic.prototype.update = function(x, y) {
-  this.points_.push(x, y, Date.now());
-};
-
-
-/**
- * @return {boolean} Whether we should do kinetic animation.
- */
-Kinetic.prototype.end = function() {
-  if (this.points_.length < 6) {
-    // at least 2 points are required (i.e. there must be at least 6 elements
-    // in the array)
-    return false;
-  }
-  const delay = Date.now() - this.delay_;
-  const lastIndex = this.points_.length - 3;
-  if (this.points_[lastIndex + 2] < delay) {
-    // the last tracked point is too old, which means that the user stopped
-    // panning before releasing the map
-    return false;
+    /**
+     * @private
+     * @type {number}
+     */
+    this.initialVelocity_ = 0;
   }
 
-  // get the first point which still falls into the delay time
-  let firstIndex = lastIndex - 3;
-  while (firstIndex > 0 && this.points_[firstIndex + 2] > delay) {
-    firstIndex -= 3;
+  /**
+   * FIXME empty description for jsdoc
+   */
+  begin() {
+    this.points_.length = 0;
+    this.angle_ = 0;
+    this.initialVelocity_ = 0;
   }
 
-  const duration = this.points_[lastIndex + 2] - this.points_[firstIndex + 2];
-  // we don't want a duration of 0 (divide by zero)
-  // we also make sure the user panned for a duration of at least one frame
-  // (1/60s) to compute sane displacement values
-  if (duration < 1000 / 60) {
-    return false;
+  /**
+   * @param {number} x X.
+   * @param {number} y Y.
+   */
+  update(x, y) {
+    this.points_.push(x, y, Date.now());
   }
 
-  const dx = this.points_[lastIndex] - this.points_[firstIndex];
-  const dy = this.points_[lastIndex + 1] - this.points_[firstIndex + 1];
-  this.angle_ = Math.atan2(dy, dx);
-  this.initialVelocity_ = Math.sqrt(dx * dx + dy * dy) / duration;
-  return this.initialVelocity_ > this.minVelocity_;
-};
+  /**
+   * @return {boolean} Whether we should do kinetic animation.
+   */
+  end() {
+    if (this.points_.length < 6) {
+      // at least 2 points are required (i.e. there must be at least 6 elements
+      // in the array)
+      return false;
+    }
+    const delay = Date.now() - this.delay_;
+    const lastIndex = this.points_.length - 3;
+    if (this.points_[lastIndex + 2] < delay) {
+      // the last tracked point is too old, which means that the user stopped
+      // panning before releasing the map
+      return false;
+    }
 
+    // get the first point which still falls into the delay time
+    let firstIndex = lastIndex - 3;
+    while (firstIndex > 0 && this.points_[firstIndex + 2] > delay) {
+      firstIndex -= 3;
+    }
 
-/**
- * @return {number} Total distance travelled (pixels).
- */
-Kinetic.prototype.getDistance = function() {
-  return (this.minVelocity_ - this.initialVelocity_) / this.decay_;
-};
+    const duration = this.points_[lastIndex + 2] - this.points_[firstIndex + 2];
+    // we don't want a duration of 0 (divide by zero)
+    // we also make sure the user panned for a duration of at least one frame
+    // (1/60s) to compute sane displacement values
+    if (duration < 1000 / 60) {
+      return false;
+    }
 
+    const dx = this.points_[lastIndex] - this.points_[firstIndex];
+    const dy = this.points_[lastIndex + 1] - this.points_[firstIndex + 1];
+    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).
+   */
+  getDistance() {
+    return (this.minVelocity_ - this.initialVelocity_) / this.decay_;
+  }
+
+  /**
+   * @return {number} Angle of the kinetic panning animation (radians).
+   */
+  getAngle() {
+    return this.angle_;
+  }
+}
 
-/**
- * @return {number} Angle of the kinetic panning animation (radians).
- */
-Kinetic.prototype.getAngle = function() {
-  return this.angle_;
-};
 export default Kinetic;

src/ol/Map.js

@@ -1,7 +1,6 @@
 /**
  * @module ol/Map
  */
-import {inherits} from './index.js';
 import PluggableMap from './PluggableMap.js';
 import {defaults as defaultControls} from './control/util.js';
 import {defaults as defaultInteractions} from './interaction.js';
@@ -57,38 +56,40 @@ 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) {
-  options = assign({}, options);
-  if (!options.controls) {
-    options.controls = defaultControls();
-  }
-  if (!options.interactions) {
-    options.interactions = defaultInteractions();
+class Map extends PluggableMap {
+
+  /**
+   * @param {module:ol/PluggableMap~MapOptions} options Map options.
+   */
+  constructor(options) {
+    options = assign({}, options);
+    if (!options.controls) {
+      options.controls = defaultControls();
+    }
+    if (!options.interactions) {
+      options.interactions = defaultInteractions();
+    }
+
+    super(options);
   }
 
-  PluggableMap.call(this, options);
-};
+  createRenderer() {
+    const renderer = new CanvasMapRenderer(this);
+    renderer.registerLayerRenderers([
+      CanvasImageLayerRenderer,
+      CanvasTileLayerRenderer,
+      CanvasVectorLayerRenderer,
+      CanvasVectorTileLayerRenderer
+    ]);
+    return renderer;
+  }
+}
 
-inherits(Map, PluggableMap);
-
-Map.prototype.createRenderer = function() {
-  const renderer = new CanvasMapRenderer(this);
-  renderer.registerLayerRenderers([
-    CanvasImageLayerRenderer,
-    CanvasTileLayerRenderer,
-    CanvasVectorLayerRenderer,
-    CanvasVectorTileLayerRenderer
-  ]);
-  return renderer;
-};
 
 export default Map;

src/ol/MapBrowserEvent.js

@@ -1,82 +1,81 @@
 /**
  * @module ol/MapBrowserEvent
  */
-import {inherits} from './index.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}
- * @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) {
-
-  MapEvent.call(this, type, map, opt_frameState);
+class MapBrowserEvent extends MapEvent {
 
   /**
-   * The original browser event.
-   * @const
-   * @type {Event}
-   * @api
+   * @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.
    */
-  this.originalEvent = browserEvent;
+  constructor(type, map, browserEvent, opt_dragging, opt_frameState) {
+
+    super(type, map, opt_frameState);
+
+    /**
+     * The original browser event.
+     * @const
+     * @type {Event}
+     * @api
+     */
+    this.originalEvent = browserEvent;
+
+    /**
+     * The map pixel relative to the viewport corresponding to the original browser event.
+     * @type {module:ol/pixel~Pixel}
+     * @api
+     */
+    this.pixel = map.getEventPixel(browserEvent);
+
+    /**
+     * The coordinate in view projection corresponding to the original browser event.
+     * @type {module:ol/coordinate~Coordinate}
+     * @api
+     */
+    this.coordinate = map.getCoordinateFromPixel(this.pixel);
+
+    /**
+     * Indicates if the map is currently being dragged. Only set for
+     * `POINTERDRAG` and `POINTERMOVE` events. Default is `false`.
+     *
+     * @type {boolean}
+     * @api
+     */
+    this.dragging = opt_dragging !== undefined ? opt_dragging : false;
+
+  }
 
   /**
-   * The map pixel relative to the viewport corresponding to the original browser event.
-   * @type {module:ol~Pixel}
+   * Prevents the default browser action.
+   * See https://developer.mozilla.org/en-US/docs/Web/API/event.preventDefault.
+   * @override
    * @api
    */
-  this.pixel = map.getEventPixel(browserEvent);
+  preventDefault() {
+    super.preventDefault();
+    this.originalEvent.preventDefault();
+  }
 
   /**
-   * The coordinate in view projection corresponding to the original browser event.
-   * @type {module:ol/coordinate~Coordinate}
+   * Prevents further propagation of the current event.
+   * See https://developer.mozilla.org/en-US/docs/Web/API/event.stopPropagation.
+   * @override
    * @api
    */
-  this.coordinate = map.getCoordinateFromPixel(this.pixel);
-
-  /**
-   * Indicates if the map is currently being dragged. Only set for
-   * `POINTERDRAG` and `POINTERMOVE` events. Default is `false`.
-   *
-   * @type {boolean}
-   * @api
-   */
-  this.dragging = opt_dragging !== undefined ? opt_dragging : false;
-
-};
-
-inherits(MapBrowserEvent, MapEvent);
+  stopPropagation() {
+    super.stopPropagation();
+    this.originalEvent.stopPropagation();
+  }
+}
 
 
-/**
- * Prevents the default browser action.
- * @see https://developer.mozilla.org/en-US/docs/Web/API/event.preventDefault
- * @override
- * @api
- */
-MapBrowserEvent.prototype.preventDefault = function() {
-  MapEvent.prototype.preventDefault.call(this);
-  this.originalEvent.preventDefault();
-};
-
-
-/**
- * Prevents further propagation of the current event.
- * @see https://developer.mozilla.org/en-US/docs/Web/API/event.stopPropagation
- * @override
- * @api
- */
-MapBrowserEvent.prototype.stopPropagation = function() {
-  MapEvent.prototype.stopPropagation.call(this);
-  this.originalEvent.stopPropagation();
-};
 export default MapBrowserEvent;

src/ol/MapBrowserEventHandler.js

@@ -1,7 +1,6 @@
 /**
  * @module ol/MapBrowserEventHandler
  */
-import {inherits} from './index.js';
 import {DEVICE_PIXEL_RATIO} from './has.js';
 import MapBrowserEventType from './MapBrowserEventType.js';
 import MapBrowserPointerEvent from './MapBrowserPointerEvent.js';
@@ -10,326 +9,317 @@ import EventTarget from './events/EventTarget.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) {
-
-  EventTarget.call(this);
+class MapBrowserEventHandler extends EventTarget {
 
   /**
-   * This is the element that we will listen to the real events on.
-   * @type {module:ol/PluggableMap}
-   * @private
+   * @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.
    */
-  this.map_ = map;
+  constructor(map, moveTolerance) {
 
-  /**
-   * @type {number}
-   * @private
-   */
-  this.clickTimeoutId_ = 0;
+    super();
 
-  /**
-   * @type {boolean}
-   * @private
-   */
-  this.dragging_ = false;
+    /**
+     * This is the element that we will listen to the real events on.
+     * @type {module:ol/PluggableMap}
+     * @private
+     */
+    this.map_ = map;
 
-  /**
-   * @type {!Array.<module:ol/events~EventsKey>}
-   * @private
-   */
-  this.dragListenerKeys_ = [];
-
-  /**
-   * @type {number}
-   * @private
-   */
-  this.moveTolerance_ = moveTolerance ?
-    moveTolerance * DEVICE_PIXEL_RATIO : DEVICE_PIXEL_RATIO;
-
-  /**
-   * The most recent "down" type event (or null if none have occurred).
-   * Set on pointerdown.
-   * @type {module:ol/pointer/PointerEvent}
-   * @private
-   */
-  this.down_ = null;
-
-  const element = this.map_.getViewport();
-
-  /**
-   * @type {number}
-   * @private
-   */
-  this.activePointers_ = 0;
-
-  /**
-   * @type {!Object.<number, boolean>}
-   * @private
-   */
-  this.trackedTouches_ = {};
-
-  /**
-   * Event handler which generates pointer events for
-   * the viewport element.
-   *
-   * @type {module:ol/pointer/PointerEventHandler}
-   * @private
-   */
-  this.pointerEventHandler_ = new PointerEventHandler(element);
-
-  /**
-   * Event handler which generates pointer events for
-   * the document (used when dragging).
-   *
-   * @type {module:ol/pointer/PointerEventHandler}
-   * @private
-   */
-  this.documentPointerEventHandler_ = null;
-
-  /**
-   * @type {?module:ol/events~EventsKey}
-   * @private
-   */
-  this.pointerdownListenerKey_ = listen(this.pointerEventHandler_,
-    PointerEventType.POINTERDOWN,
-    this.handlePointerDown_, this);
-
-  /**
-   * @type {?module:ol/events~EventsKey}
-   * @private
-   */
-  this.relayedListenerKey_ = listen(this.pointerEventHandler_,
-    PointerEventType.POINTERMOVE,
-    this.relayEvent_, this);
-
-};
-
-inherits(MapBrowserEventHandler, EventTarget);
-
-
-/**
- * @param {module:ol/pointer/PointerEvent} pointerEvent Pointer
- * event.
- * @private
- */
-MapBrowserEventHandler.prototype.emulateClick_ = function(pointerEvent) {
-  let newEvent = new MapBrowserPointerEvent(
-    MapBrowserEventType.CLICK, this.map_, pointerEvent);
-  this.dispatchEvent(newEvent);
-  if (this.clickTimeoutId_ !== 0) {
-    // double-click
-    clearTimeout(this.clickTimeoutId_);
+    /**
+     * @type {number}
+     * @private
+     */
     this.clickTimeoutId_ = 0;
-    newEvent = new MapBrowserPointerEvent(
-      MapBrowserEventType.DBLCLICK, this.map_, pointerEvent);
+
+    /**
+     * @type {boolean}
+     * @private
+     */
+    this.dragging_ = false;
+
+    /**
+     * @type {!Array.<module:ol/events~EventsKey>}
+     * @private
+     */
+    this.dragListenerKeys_ = [];
+
+    /**
+     * @type {number}
+     * @private
+     */
+    this.moveTolerance_ = moveTolerance ?
+      moveTolerance * DEVICE_PIXEL_RATIO : DEVICE_PIXEL_RATIO;
+
+    /**
+     * The most recent "down" type event (or null if none have occurred).
+     * Set on pointerdown.
+     * @type {module:ol/pointer/PointerEvent}
+     * @private
+     */
+    this.down_ = null;
+
+    const element = this.map_.getViewport();
+
+    /**
+     * @type {number}
+     * @private
+     */
+    this.activePointers_ = 0;
+
+    /**
+     * @type {!Object.<number, boolean>}
+     * @private
+     */
+    this.trackedTouches_ = {};
+
+    /**
+     * Event handler which generates pointer events for
+     * the viewport element.
+     *
+     * @type {module:ol/pointer/PointerEventHandler}
+     * @private
+     */
+    this.pointerEventHandler_ = new PointerEventHandler(element);
+
+    /**
+     * Event handler which generates pointer events for
+     * the document (used when dragging).
+     *
+     * @type {module:ol/pointer/PointerEventHandler}
+     * @private
+     */
+    this.documentPointerEventHandler_ = null;
+
+    /**
+     * @type {?module:ol/events~EventsKey}
+     * @private
+     */
+    this.pointerdownListenerKey_ = listen(this.pointerEventHandler_,
+      PointerEventType.POINTERDOWN,
+      this.handlePointerDown_, this);
+
+    /**
+     * @type {?module:ol/events~EventsKey}
+     * @private
+     */
+    this.relayedListenerKey_ = listen(this.pointerEventHandler_,
+      PointerEventType.POINTERMOVE,
+      this.relayEvent_, this);
+
+  }
+
+  /**
+   * @param {module:ol/pointer/PointerEvent} pointerEvent Pointer
+   * event.
+   * @private
+   */
+  emulateClick_(pointerEvent) {
+    let newEvent = new MapBrowserPointerEvent(
+      MapBrowserEventType.CLICK, this.map_, pointerEvent);
     this.dispatchEvent(newEvent);
-  } else {
-    // click
-    this.clickTimeoutId_ = setTimeout(function() {
+    if (this.clickTimeoutId_ !== 0) {
+      // double-click
+      clearTimeout(this.clickTimeoutId_);
       this.clickTimeoutId_ = 0;
-      const newEvent = new MapBrowserPointerEvent(
-        MapBrowserEventType.SINGLECLICK, this.map_, pointerEvent);
+      newEvent = new MapBrowserPointerEvent(
+        MapBrowserEventType.DBLCLICK, this.map_, 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) {
-  const event = pointerEvent;
-
-  if (event.type == MapBrowserEventType.POINTERUP ||
-      event.type == MapBrowserEventType.POINTERCANCEL) {
-    delete this.trackedTouches_[event.pointerId];
-  } else if (event.type == MapBrowserEventType.POINTERDOWN) {
-    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) {
-  this.updateActivePointers_(pointerEvent);
-  const newEvent = new MapBrowserPointerEvent(
-    MapBrowserEventType.POINTERUP, this.map_, pointerEvent);
-  this.dispatchEvent(newEvent);
-
-  // We emulate click events on left mouse button click, touch contact, and pen
-  // contact. isMouseActionButton returns true in these cases (evt.button is set
-  // to 0).
-  // See http://www.w3.org/TR/pointerevents/#button-states
-  // We only fire click, singleclick, and doubleclick if nobody has called
-  // event.stopPropagation() or event.preventDefault().
-  if (!newEvent.propagationStopped && !this.dragging_ && this.isMouseActionButton_(pointerEvent)) {
-    this.emulateClick_(this.down_);
+    } else {
+      // click
+      this.clickTimeoutId_ = setTimeout(function() {
+        this.clickTimeoutId_ = 0;
+        const newEvent = new MapBrowserPointerEvent(
+          MapBrowserEventType.SINGLECLICK, this.map_, pointerEvent);
+        this.dispatchEvent(newEvent);
+      }.bind(this), 250);
+    }
   }
 
-  if (this.activePointers_ === 0) {
+  /**
+   * Keeps track on how many pointers are currently active.
+   *
+   * @param {module:ol/pointer/PointerEvent} pointerEvent Pointer
+   * event.
+   * @private
+   */
+  updateActivePointers_(pointerEvent) {
+    const event = pointerEvent;
+
+    if (event.type == MapBrowserEventType.POINTERUP ||
+        event.type == MapBrowserEventType.POINTERCANCEL) {
+      delete this.trackedTouches_[event.pointerId];
+    } else if (event.type == MapBrowserEventType.POINTERDOWN) {
+      this.trackedTouches_[event.pointerId] = true;
+    }
+    this.activePointers_ = Object.keys(this.trackedTouches_).length;
+  }
+
+  /**
+   * @param {module:ol/pointer/PointerEvent} pointerEvent Pointer
+   * event.
+   * @private
+   */
+  handlePointerUp_(pointerEvent) {
+    this.updateActivePointers_(pointerEvent);
+    const newEvent = new MapBrowserPointerEvent(
+      MapBrowserEventType.POINTERUP, this.map_, pointerEvent);
+    this.dispatchEvent(newEvent);
+
+    // We emulate click events on left mouse button click, touch contact, and pen
+    // contact. isMouseActionButton returns true in these cases (evt.button is set
+    // to 0).
+    // See http://www.w3.org/TR/pointerevents/#button-states
+    // We only fire click, singleclick, and doubleclick if nobody has called
+    // event.stopPropagation() or event.preventDefault().
+    if (!newEvent.propagationStopped && !this.dragging_ && this.isMouseActionButton_(pointerEvent)) {
+      this.emulateClick_(this.down_);
+    }
+
+    if (this.activePointers_ === 0) {
+      this.dragListenerKeys_.forEach(unlistenByKey);
+      this.dragListenerKeys_.length = 0;
+      this.dragging_ = false;
+      this.down_ = null;
+      this.documentPointerEventHandler_.dispose();
+      this.documentPointerEventHandler_ = null;
+    }
+  }
+
+  /**
+   * @param {module:ol/pointer/PointerEvent} pointerEvent Pointer
+   * event.
+   * @return {boolean} If the left mouse button was pressed.
+   * @private
+   */
+  isMouseActionButton_(pointerEvent) {
+    return pointerEvent.button === 0;
+  }
+
+  /**
+   * @param {module:ol/pointer/PointerEvent} pointerEvent Pointer
+   * event.
+   * @private
+   */
+  handlePointerDown_(pointerEvent) {
+    this.updateActivePointers_(pointerEvent);
+    const newEvent = new MapBrowserPointerEvent(
+      MapBrowserEventType.POINTERDOWN, this.map_, pointerEvent);
+    this.dispatchEvent(newEvent);
+
+    this.down_ = pointerEvent;
+
+    if (this.dragListenerKeys_.length === 0) {
+      /* Set up a pointer event handler on the `document`,
+       * which is required when the pointer is moved outside
+       * the viewport when dragging.
+       */
+      this.documentPointerEventHandler_ =
+          new PointerEventHandler(document);
+
+      this.dragListenerKeys_.push(
+        listen(this.documentPointerEventHandler_,
+          MapBrowserEventType.POINTERMOVE,
+          this.handlePointerMove_, this),
+        listen(this.documentPointerEventHandler_,
+          MapBrowserEventType.POINTERUP,
+          this.handlePointerUp_, this),
+        /* Note that the listener for `pointercancel is set up on
+         * `pointerEventHandler_` and not `documentPointerEventHandler_` like
+         * the `pointerup` and `pointermove` listeners.
+         *
+         * The reason for this is the following: `TouchSource.vacuumTouches_()`
+         * issues `pointercancel` events, when there was no `touchend` for a
+         * `touchstart`. Now, let's say a first `touchstart` is registered on
+         * `pointerEventHandler_`. The `documentPointerEventHandler_` is set up.
+         * But `documentPointerEventHandler_` doesn't know about the first
+         * `touchstart`. If there is no `touchend` for the `touchstart`, we can
+         * only receive a `touchcancel` from `pointerEventHandler_`, because it is
+         * only registered there.
+         */
+        listen(this.pointerEventHandler_,
+          MapBrowserEventType.POINTERCANCEL,
+          this.handlePointerUp_, this)
+      );
+    }
+  }
+
+  /**
+   * @param {module:ol/pointer/PointerEvent} pointerEvent Pointer
+   * event.
+   * @private
+   */
+  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.
+    if (this.isMoving_(pointerEvent)) {
+      this.dragging_ = true;
+      const newEvent = new MapBrowserPointerEvent(
+        MapBrowserEventType.POINTERDRAG, this.map_, pointerEvent,
+        this.dragging_);
+      this.dispatchEvent(newEvent);
+    }
+
+    // Some native android browser triggers mousemove events during small period
+    // of time. See: https://code.google.com/p/android/issues/detail?id=5491 or
+    // 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
+   */
+  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
+   */
+  isMoving_(pointerEvent) {
+    return this.dragging_ ||
+        Math.abs(pointerEvent.clientX - this.down_.clientX) > this.moveTolerance_ ||
+        Math.abs(pointerEvent.clientY - this.down_.clientY) > this.moveTolerance_;
+  }
+
+  /**
+   * @inheritDoc
+   */
+  disposeInternal() {
+    if (this.relayedListenerKey_) {
+      unlistenByKey(this.relayedListenerKey_);
+      this.relayedListenerKey_ = null;
+    }
+    if (this.pointerdownListenerKey_) {
+      unlistenByKey(this.pointerdownListenerKey_);
+      this.pointerdownListenerKey_ = null;
+    }
+
     this.dragListenerKeys_.forEach(unlistenByKey);
     this.dragListenerKeys_.length = 0;
-    this.dragging_ = false;
-    this.down_ = null;
-    this.documentPointerEventHandler_.dispose();
-    this.documentPointerEventHandler_ = null;
+
+    if (this.documentPointerEventHandler_) {
+      this.documentPointerEventHandler_.dispose();
+      this.documentPointerEventHandler_ = null;
+    }
+    if (this.pointerEventHandler_) {
+      this.pointerEventHandler_.dispose();
+      this.pointerEventHandler_ = null;
+    }
+    super.disposeInternal();
   }
-};
+}
 
 
-/**
- * @param {module:ol/pointer/PointerEvent} pointerEvent Pointer
- * event.
- * @return {boolean} If the left mouse button was pressed.
- * @private
- */
-MapBrowserEventHandler.prototype.isMouseActionButton_ = function(pointerEvent) {
-  return pointerEvent.button === 0;
-};
-
-
-/**
- * @param {module:ol/pointer/PointerEvent} pointerEvent Pointer
- * event.
- * @private
- */
-MapBrowserEventHandler.prototype.handlePointerDown_ = function(pointerEvent) {
-  this.updateActivePointers_(pointerEvent);
-  const newEvent = new MapBrowserPointerEvent(
-    MapBrowserEventType.POINTERDOWN, this.map_, pointerEvent);
-  this.dispatchEvent(newEvent);
-
-  this.down_ = pointerEvent;
-
-  if (this.dragListenerKeys_.length === 0) {
-    /* Set up a pointer event handler on the `document`,
-     * which is required when the pointer is moved outside
-     * the viewport when dragging.
-     */
-    this.documentPointerEventHandler_ =
-        new PointerEventHandler(document);
-
-    this.dragListenerKeys_.push(
-      listen(this.documentPointerEventHandler_,
-        MapBrowserEventType.POINTERMOVE,
-        this.handlePointerMove_, this),
-      listen(this.documentPointerEventHandler_,
-        MapBrowserEventType.POINTERUP,
-        this.handlePointerUp_, this),
-      /* Note that the listener for `pointercancel is set up on
-       * `pointerEventHandler_` and not `documentPointerEventHandler_` like
-       * the `pointerup` and `pointermove` listeners.
-       *
-       * The reason for this is the following: `TouchSource.vacuumTouches_()`
-       * issues `pointercancel` events, when there was no `touchend` for a
-       * `touchstart`. Now, let's say a first `touchstart` is registered on
-       * `pointerEventHandler_`. The `documentPointerEventHandler_` is set up.
-       * But `documentPointerEventHandler_` doesn't know about the first
-       * `touchstart`. If there is no `touchend` for the `touchstart`, we can
-       * only receive a `touchcancel` from `pointerEventHandler_`, because it is
-       * only registered there.
-       */
-      listen(this.pointerEventHandler_,
-        MapBrowserEventType.POINTERCANCEL,
-        this.handlePointerUp_, this)
-    );
-  }
-};
-
-
-/**
- * @param {module:ol/pointer/PointerEvent} pointerEvent Pointer
- * event.
- * @private
- */
-MapBrowserEventHandler.prototype.handlePointerMove_ = function(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.
-  if (this.isMoving_(pointerEvent)) {
-    this.dragging_ = true;
-    const newEvent = new MapBrowserPointerEvent(
-      MapBrowserEventType.POINTERDRAG, this.map_, pointerEvent,
-      this.dragging_);
-    this.dispatchEvent(newEvent);
-  }
-
-  // Some native android browser triggers mousemove events during small period
-  // of time. See: https://code.google.com/p/android/issues/detail?id=5491 or
-  // 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) {
-  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) {
-  return Math.abs(pointerEvent.clientX - this.down_.clientX) > this.moveTolerance_ ||
-      Math.abs(pointerEvent.clientY - this.down_.clientY) > this.moveTolerance_;
-};
-
-
-/**
- * @inheritDoc
- */
-MapBrowserEventHandler.prototype.disposeInternal = function() {
-  if (this.relayedListenerKey_) {
-    unlistenByKey(this.relayedListenerKey_);
-    this.relayedListenerKey_ = null;
-  }
-  if (this.pointerdownListenerKey_) {
-    unlistenByKey(this.pointerdownListenerKey_);
-    this.pointerdownListenerKey_ = null;
-  }
-
-  this.dragListenerKeys_.forEach(unlistenByKey);
-  this.dragListenerKeys_.length = 0;
-
-  if (this.documentPointerEventHandler_) {
-    this.documentPointerEventHandler_.dispose();
-    this.documentPointerEventHandler_ = null;
-  }
-  if (this.pointerEventHandler_) {
-    this.pointerEventHandler_.dispose();
-    this.pointerEventHandler_ = null;
-  }
-  EventTarget.prototype.disposeInternal.call(this);
-};
 export default MapBrowserEventHandler;

src/ol/MapBrowserPointerEvent.js

@@ -1,32 +1,29 @@
 /**
  * @module ol/MapBrowserPointerEvent
  */
-import {inherits} from './index.js';
 import MapBrowserEvent from './MapBrowserEvent.js';
 
-/**
- * @constructor
- * @extends {module:ol/MapBrowserEvent}
- * @param {string} type Event type.
- * @param {module:ol/PluggableMap} map Map.
- * @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) {
-
-  MapBrowserEvent.call(this, type, map, pointerEvent.originalEvent, opt_dragging,
-    opt_frameState);
+class MapBrowserPointerEvent extends MapBrowserEvent {
 
   /**
-   * @const
-   * @type {module:ol/pointer/PointerEvent}
+   * @param {string} type Event type.
+   * @param {module:ol/PluggableMap} map Map.
+   * @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.
    */
-  this.pointerEvent = pointerEvent;
+  constructor(type, map, pointerEvent, opt_dragging, opt_frameState) {
 
-};
+    super(type, map, pointerEvent.originalEvent, opt_dragging, opt_frameState);
+
+    /**
+     * @const
+     * @type {module:ol/pointer/PointerEvent}
+     */
+    this.pointerEvent = pointerEvent;
+
+  }
+
+}
 
-inherits(MapBrowserPointerEvent, MapBrowserEvent);
 export default MapBrowserPointerEvent;

src/ol/MapEvent.js

@@ -1,39 +1,40 @@
 /**
  * @module ol/MapEvent
  */
-import {inherits} from './index.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}
- * @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) {
-
-  Event.call(this, type);
+class MapEvent extends Event {
 
   /**
-   * The map where the event occurred.
-   * @type {module:ol/PluggableMap}
-   * @api
+   * @param {string} type Event type.
+   * @param {module:ol/PluggableMap} map Map.
+   * @param {?module:ol/PluggableMap~FrameState=} opt_frameState Frame state.
    */
-  this.map = map;
+  constructor(type, map, opt_frameState) {
 
-  /**
-   * The frame state at the time of the event.
-   * @type {?module:ol/PluggableMap~FrameState}
-   * @api
-   */
-  this.frameState = opt_frameState !== undefined ? opt_frameState : null;
+    super(type);
 
-};
+    /**
+     * The map where the event occurred.
+     * @type {module:ol/PluggableMap}
+     * @api
+     */
+    this.map = map;
+
+    /**
+     * The frame state at the time of the event.
+     * @type {?module:ol/PluggableMap~FrameState}
+     * @api
+     */
+    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 './index.js';
+import {getUid} from './util.js';
 import ObjectEventType from './ObjectEventType.js';
 import Observable from './Observable.js';
 import Event from './events/Event.js';
@@ -10,35 +10,36 @@ import {assign} from './obj.js';
 
 /**
  * @classdesc
- * Events emitted by {@link module:ol/Object~BaseObject} instances are instances of
- * this type.
- *
- * @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);
+ * Events emitted by {@link module:ol/Object~BaseObject} instances are instances of this type.
+  */
+class ObjectEvent extends Event {
 
   /**
-   * The name of the property whose value is changing.
-   * @type {string}
-   * @api
+   * @param {string} type The event type.
+   * @param {string} key The property name.
+   * @param {*} oldValue The old value for `key`.
    */
-  this.key = key;
+  constructor(type, key, oldValue) {
+    super(type);
 
-  /**
-   * The old value. To get the new value use `e.target.get(e.key)` where
-   * `e` is the event object.
-   * @type {*}
-   * @api
-   */
-  this.oldValue = oldValue;
+    /**
+     * The name of the property whose value is changing.
+     * @type {string}
+     * @api
+     */
+    this.key = key;
 
-};
-inherits(ObjectEvent, Event);
+    /**
+     * The old value. To get the new value use `e.target.get(e.key)` where
+     * `e` is the event object.
+     * @type {*}
+     * @api
+     */
+    this.oldValue = oldValue;
+
+  }
+
+}
 
 
 /**
@@ -81,33 +82,126 @@ 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);
-
-  // Call {@link module:ol~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.
-  getUid(this);
+class BaseObject extends Observable {
 
   /**
-   * @private
-   * @type {!Object.<string, *>}
+   * @param {Object.<string, *>=} opt_values An object with key-value pairs.
    */
-  this.values_ = {};
+  constructor(opt_values) {
+    super();
 
-  if (opt_values !== undefined) {
-    this.setProperties(opt_values);
+    // 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.
+    getUid(this);
+
+    /**
+     * @private
+     * @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);
+      }
+    }
+  }
+}
 
 
 /**
@@ -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,7 +1,6 @@
 /**
  * @module ol/Observable
  */
-import {inherits} from './index.js';
 import {listen, unlistenByKey, unlisten, listenOnce} from './events.js';
 import EventTarget from './events/EventTarget.js';
 import EventType from './events/EventType.js';
@@ -14,25 +13,102 @@ 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
+     * @type {number}
+     */
+    this.revision_ = 0;
+
+  }
 
   /**
-   * @private
-   * @type {number}
+   * Increases the revision counter and dispatches a 'change' event.
+   * @api
    */
-  this.revision_ = 0;
+  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_;
+  }
 
-inherits(Observable, EventTarget);
+  /**
+   * 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);
+    }
+  }
+}
 
 
 /**
@@ -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/README.md

@@ -0,0 +1,50 @@
+# 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,7 +1,6 @@
 /**
  * @module ol/Tile
  */
-import {inherits} from './index.js';
 import TileState from './TileState.js';
 import {easeIn} from './easing.js';
 import EventTarget from './events/EventTarget.js';
@@ -44,221 +43,221 @@ import EventType from './events/EventType.js';
  * @classdesc
  * Base class for tiles.
  *
- * @constructor
  * @abstract
- * @extends {module:ol/events/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);
-
-  const options = opt_options ? opt_options : {};
+  */
+class Tile extends EventTarget {
 
   /**
-   * @type {module:ol/tilecoord~TileCoord}
+   * @param {module:ol/tilecoord~TileCoord} tileCoord Tile coordinate.
+   * @param {module:ol/TileState} state State.
+   * @param {module:ol/Tile~Options=} opt_options Tile options.
    */
-  this.tileCoord = tileCoord;
+  constructor(tileCoord, state, opt_options) {
+    super();
+
+    const options = opt_options ? opt_options : {};
+
+    /**
+     * @type {module:ol/tilecoord~TileCoord}
+     */
+    this.tileCoord = tileCoord;
+
+    /**
+     * @protected
+     * @type {module:ol/TileState}
+     */
+    this.state = state;
+
+    /**
+     * An "interim" tile for this tile. The interim tile may be used while this
+     * one is loading, for "smooth" transitions when changing params/dimensions
+     * on the source.
+     * @type {module:ol/Tile}
+     */
+    this.interimTile = null;
+
+    /**
+     * A key assigned to the tile. This is used by the tile source to determine
+     * if this tile can effectively be used, or if a new tile should be created
+     * and this one be used as an interim tile for this new tile.
+     * @type {string}
+     */
+    this.key = '';
+
+    /**
+     * The duration for the opacity transition.
+     * @type {number}
+     */
+    this.transition_ = options.transition === undefined ? 250 : options.transition;
+
+    /**
+     * Lookup of start times for rendering transitions.  If the start time is
+     * equal to -1, the transition is complete.
+     * @type {Object.<number, number>}
+     */
+    this.transitionStarts_ = {};
+
+  }
 
   /**
    * @protected
-   * @type {module:ol/TileState}
    */
-  this.state = state;
+  changed() {
+    this.dispatchEvent(EventType.CHANGE);
+  }
 
   /**
-   * An "interim" tile for this tile. The interim tile may be used while this
-   * one is loading, for "smooth" transitions when changing params/dimensions
-   * on the source.
-   * @type {module:ol/Tile}
+   * @return {string} Key.
    */
-  this.interimTile = null;
+  getKey() {
+    return this.key + '/' + this.tileCoord;
+  }
 
   /**
-   * A key assigned to the tile. This is used by the tile source to determine
-   * if this tile can effectively be used, or if a new tile should be created
-   * and this one be used as an interim tile for this new tile.
-   * @type {string}
+   * 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.
    */
-  this.key = '';
+  getInterimTile() {
+    if (!this.interimTile) {
+      //empty chain
+      return this;
+    }
+    let tile = this.interimTile;
 
-  /**
-   * The duration for the opacity transition.
-   * @type {number}
-   */
-  this.transition_ = options.transition === undefined ? 250 : options.transition;
+    // find the first loaded tile and return it. Since the chain is sorted in
+    // decreasing order of creation time, there is no need to search the remainder
+    // of the list (all those tiles correspond to older requests and will be
+    // cleaned up by refreshInterimChain)
+    do {
+      if (tile.getState() == TileState.LOADED) {
+        return tile;
+      }
+      tile = tile.interimTile;
+    } while (tile);
 
-  /**
-   * Lookup of start times for rendering transitions.  If the start time is
-   * equal to -1, the transition is complete.
-   * @type {Object.<number, number>}
-   */
-  this.transitionStarts_ = {};
-
-};
-
-inherits(Tile, EventTarget);
-
-
-/**
- * @protected
- */
-Tile.prototype.changed = function() {
-  this.dispatchEvent(EventType.CHANGE);
-};
-
-
-/**
- * @return {string} Key.
- */
-Tile.prototype.getKey = function() {
-  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() {
-  if (!this.interimTile) {
-    //empty chain
+    // we can not find a better tile
     return this;
   }
-  let tile = this.interimTile;
 
-  // find the first loaded tile and return it. Since the chain is sorted in
-  // decreasing order of creation time, there is no need to search the remainder
-  // of the list (all those tiles correspond to older requests and will be
-  // cleaned up by refreshInterimChain)
-  do {
-    if (tile.getState() == TileState.LOADED) {
-      return tile;
+  /**
+   * Goes through the chain of interim tiles and discards sections of the chain
+   * that are no longer relevant.
+   */
+  refreshInterimChain() {
+    if (!this.interimTile) {
+      return;
     }
-    tile = tile.interimTile;
-  } while (tile);
 
-  // we can not find a better tile
-  return this;
-};
+    let tile = this.interimTile;
+    let prev = this;
 
-/**
- * Goes through the chain of interim tiles and discards sections of the chain
- * that are no longer relevant.
- */
-Tile.prototype.refreshInterimChain = function() {
-  if (!this.interimTile) {
-    return;
+    do {
+      if (tile.getState() == TileState.LOADED) {
+        //we have a loaded tile, we can discard the rest of the list
+        //we would could abort any LOADING tile request
+        //older than this tile (i.e. any LOADING tile following this entry in the chain)
+        tile.interimTile = null;
+        break;
+      } else if (tile.getState() == TileState.LOADING) {
+        //keep this LOADING tile any loaded tiles later in the chain are
+        //older than this tile, so we're still interested in the request
+        prev = tile;
+      } else if (tile.getState() == TileState.IDLE) {
+        //the head of the list is the most current tile, we don't need
+        //to start any other requests for this chain
+        prev.interimTile = tile.interimTile;
+      } else {
+        prev = tile;
+      }
+      tile = prev.interimTile;
+    } while (tile);
   }
 
-  let tile = this.interimTile;
-  let prev = this;
+  /**
+   * Get the tile coordinate for this tile.
+   * @return {module:ol/tilecoord~TileCoord} The tile coordinate.
+   * @api
+   */
+  getTileCoord() {
+    return this.tileCoord;
+  }
 
-  do {
-    if (tile.getState() == TileState.LOADED) {
-      //we have a loaded tile, we can discard the rest of the list
-      //we would could abort any LOADING tile request
-      //older than this tile (i.e. any LOADING tile following this entry in the chain)
-      tile.interimTile = null;
-      break;
-    } else if (tile.getState() == TileState.LOADING) {
-      //keep this LOADING tile any loaded tiles later in the chain are
-      //older than this tile, so we're still interested in the request
-      prev = tile;
-    } else if (tile.getState() == TileState.IDLE) {
-      //the head of the list is the most current tile, we don't need
-      //to start any other requests for this chain
-      prev.interimTile = tile.interimTile;
-    } else {
-      prev = tile;
+  /**
+   * @return {module:ol/TileState} State.
+   */
+  getState() {
+    return this.state;
+  }
+
+  /**
+   * @param {module:ol/TileState} state 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
+   */
+  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.
+   */
+  getAlpha(id, time) {
+    if (!this.transition_) {
+      return 1;
     }
-    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() {
-  return this.tileCoord;
-};
+    let start = this.transitionStarts_[id];
+    if (!start) {
+      start = time;
+      this.transitionStarts_[id] = start;
+    } else if (start === -1) {
+      return 1;
+    }
 
-
-/**
- * @return {module:ol/TileState} State.
- */
-Tile.prototype.getState = function() {
-  return this.state;
-};
-
-/**
- * @param {module:ol/TileState} state State.
- */
-Tile.prototype.setState = function(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() {};
-
-/**
- * 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) {
-  if (!this.transition_) {
-    return 1;
+    const delta = time - start + (1000 / 60); // avoid rendering at 0
+    if (delta >= this.transition_) {
+      return 1;
+    }
+    return easeIn(delta / this.transition_);
   }
 
-  let start = this.transitionStarts_[id];
-  if (!start) {
-    start = time;
-    this.transitionStarts_[id] = start;
-  } else if (start === -1) {
-    return 1;
+  /**
+   * 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.
+   */
+  inTransition(id) {
+    if (!this.transition_) {
+      return false;
+    }
+    return this.transitionStarts_[id] !== -1;
   }
 
-  const delta = time - start + (1000 / 60); // avoid rendering at 0
-  if (delta >= this.transition_) {
-    return 1;
+  /**
+   * Mark a transition as complete.
+   * @param {number} id An id for the renderer.
+   */
+  endTransition(id) {
+    if (this.transition_) {
+      this.transitionStarts_[id] = -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) {
-  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) {
-  if (this.transition_) {
-    this.transitionStarts_[id] = -1;
-  }
-};
 export default Tile;

src/ol/TileCache.js

@@ -1,56 +1,53 @@
 /**
  * @module ol/TileCache
  */
-import {inherits} from './index.js';
 import LRUCache from './structs/LRUCache.js';
 import {fromKey, getKey} from './tilecoord.js';
 
-/**
- * @constructor
- * @extends {module:ol/structs/LRUCache.<module:ol/Tile>}
- * @param {number=} opt_highWaterMark High water mark.
- * @struct
- */
-const TileCache = function(opt_highWaterMark) {
+class TileCache extends LRUCache {
 
-  LRUCache.call(this, opt_highWaterMark);
+  /**
+   * @param {number=} opt_highWaterMark High water mark.
+   */
+  constructor(opt_highWaterMark) {
 
-};
+    super(opt_highWaterMark);
 
-inherits(TileCache, LRUCache);
+  }
 
-
-/**
- * @param {!Object.<string, module:ol/TileRange>} usedTiles Used tiles.
- */
-TileCache.prototype.expireCache = function(usedTiles) {
-  while (this.canExpireCache()) {
-    const tile = this.peekLast();
-    const zKey = tile.tileCoord[0].toString();
-    if (zKey in usedTiles && usedTiles[zKey].contains(tile.tileCoord)) {
-      break;
-    } else {
-      this.pop().dispose();
+  /**
+   * @param {!Object.<string, module:ol/TileRange>} usedTiles Used tiles.
+   */
+  expireCache(usedTiles) {
+    while (this.canExpireCache()) {
+      const tile = this.peekLast();
+      const zKey = tile.tileCoord[0].toString();
+      if (zKey in usedTiles && usedTiles[zKey].contains(tile.tileCoord)) {
+        break;
+      } else {
+        this.pop().dispose();
+      }
     }
   }
-};
 
-
-/**
- * Prune all tiles from the cache that don't have the same z as the newest tile.
- */
-TileCache.prototype.pruneExceptNewestZ = function() {
-  if (this.getCount() === 0) {
-    return;
-  }
-  const key = this.peekFirstKey();
-  const tileCoord = fromKey(key);
-  const z = tileCoord[0];
-  this.forEach(function(tile) {
-    if (tile.tileCoord[0] !== z) {
-      this.remove(getKey(tile.tileCoord));
-      tile.dispose();
+  /**
+   * Prune all tiles from the cache that don't have the same z as the newest tile.
+   */
+  pruneExceptNewestZ() {
+    if (this.getCount() === 0) {
+      return;
     }
-  }, this);
-};
+    const key = this.peekFirstKey();
+    const tileCoord = fromKey(key);
+    const z = tileCoord[0];
+    this.forEach(function(tile) {
+      if (tile.tileCoord[0] !== z) {
+        this.remove(getKey(tile.tileCoord));
+        tile.dispose();
+      }
+    }, this);
+  }
+}
+
+
 export default TileCache;

src/ol/TileQueue.js

@@ -1,7 +1,6 @@
 /**
  * @module ol/TileQueue
  */
-import {inherits} from './index.js';
 import TileState from './TileState.js';
 import {listen, unlisten} from './events.js';
 import EventType from './events/EventType.js';
@@ -13,128 +12,117 @@ 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.
        */
-    function(element) {
-      return tilePriorityFunction.apply(null, element);
-    },
-    /**
+      function(element) {
+        return tilePriorityFunction.apply(null, element);
+      },
+      /**
        * @param {Array} element Element.
        * @return {string} Key.
        */
-    function(element) {
-      return (
-        /** @type {module:ol/Tile} */ (element[0]).getKey()
-      );
-    });
+      function(element) {
+        return (/** @type {module:ol/Tile} */ (element[0]).getKey());
+      });
 
-  /**
-   * @private
-   * @type {function(): ?}
-   */
-  this.tileChangeCallback_ = tileChangeCallback;
+    /**
+     * @private
+     * @type {function(): ?}
+     */
+    this.tileChangeCallback_ = tileChangeCallback;
 
-  /**
-   * @private
-   * @type {number}
-   */
-  this.tilesLoading_ = 0;
+    /**
+     * @private
+     * @type {number}
+     */
+    this.tilesLoading_ = 0;
 
-  /**
-   * @private
-   * @type {!Object.<string,boolean>}
-   */
-  this.tilesLoadingKeys_ = {};
+    /**
+     * @private
+     * @type {!Object.<string,boolean>}
+     */
+    this.tilesLoadingKeys_ = {};
 
-};
-
-inherits(TileQueue, PriorityQueue);
-
-
-/**
- * @inheritDoc
- */
-TileQueue.prototype.enqueue = function(element) {
-  const added = PriorityQueue.prototype.enqueue.call(this, 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() {
-  return this.tilesLoading_;
-};
-
-
-/**
- * @param {module:ol/events/Event} event Event.
- * @protected
- */
-TileQueue.prototype.handleTileChange = function(event) {
-  const tile = /** @type {module:ol/Tile} */ (event.target);
-  const state = tile.getState();
-  if (state === TileState.LOADED || state === TileState.ERROR ||
-      state === TileState.EMPTY || state === TileState.ABORT) {
-    unlisten(tile, EventType.CHANGE,
-      this.handleTileChange, this);
-    const tileKey = tile.getKey();
-    if (tileKey in this.tilesLoadingKeys_) {
-      delete this.tilesLoadingKeys_[tileKey];
-      --this.tilesLoading_;
+  /**
+   * @inheritDoc
+   */
+  enqueue(element) {
+    const added = super.enqueue(element);
+    if (added) {
+      const tile = element[0];
+      listen(tile, EventType.CHANGE, this.handleTileChange, this);
     }
-    this.tileChangeCallback_();
+    return added;
   }
-};
 
+  /**
+   * @return {number} Number of tiles loading.
+   */
+  getTilesLoading() {
+    return this.tilesLoading_;
+  }
 
-/**
- * @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) {
-  let newLoads = 0;
-  let abortedTiles = false;
-  let state, tile, tileKey;
-  while (this.tilesLoading_ < maxTotalLoading && newLoads < maxNewLoads &&
-         this.getCount() > 0) {
-    tile = /** @type {module:ol/Tile} */ (this.dequeue()[0]);
-    tileKey = tile.getKey();
-    state = tile.getState();
-    if (state === TileState.ABORT) {
-      abortedTiles = true;
-    } else if (state === TileState.IDLE && !(tileKey in this.tilesLoadingKeys_)) {
-      this.tilesLoadingKeys_[tileKey] = true;
-      ++this.tilesLoading_;
-      ++newLoads;
-      tile.load();
+  /**
+   * @param {module:ol/events/Event} event Event.
+   * @protected
+   */
+  handleTileChange(event) {
+    const tile = /** @type {module:ol/Tile} */ (event.target);
+    const state = tile.getState();
+    if (state === TileState.LOADED || state === TileState.ERROR ||
+        state === TileState.EMPTY || state === TileState.ABORT) {
+      unlisten(tile, EventType.CHANGE, this.handleTileChange, this);
+      const tileKey = tile.getKey();
+      if (tileKey in this.tilesLoadingKeys_) {
+        delete this.tilesLoadingKeys_[tileKey];
+        --this.tilesLoading_;
+      }
+      this.tileChangeCallback_();
     }
   }
-  if (newLoads === 0 && abortedTiles) {
-    // Do not stop the render loop when all wanted tiles were aborted due to
-    // a small, saturated tile cache.
-    this.tileChangeCallback_();
+
+  /**
+   * @param {number} maxTotalLoading Maximum number tiles to load simultaneously.
+   * @param {number} maxNewLoads Maximum number of new tiles to load.
+   */
+  loadMoreTiles(maxTotalLoading, maxNewLoads) {
+    let newLoads = 0;
+    let abortedTiles = false;
+    let state, tile, tileKey;
+    while (this.tilesLoading_ < maxTotalLoading && newLoads < maxNewLoads &&
+           this.getCount() > 0) {
+      tile = /** @type {module:ol/Tile} */ (this.dequeue()[0]);
+      tileKey = tile.getKey();
+      state = tile.getState();
+      if (state === TileState.ABORT) {
+        abortedTiles = true;
+      } else if (state === TileState.IDLE && !(tileKey in this.tilesLoadingKeys_)) {
+        this.tilesLoadingKeys_[tileKey] = true;
+        ++this.tilesLoading_;
+        ++newLoads;
+        tile.load();
+      }
+    }
+    if (newLoads === 0 && abortedTiles) {
+      // Do not stop the render loop when all wanted tiles were aborted due to
+      // a small, saturated tile cache.
+      this.tileChangeCallback_();
+    }
   }
-};
+}
+
+
 export default TileQueue;

src/ol/TileRange.js

@@ -1,40 +1,128 @@
 /**
  * @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
- * @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) {
+class TileRange {
 
   /**
-   * @type {number}
+   * @param {number} minX Minimum X.
+   * @param {number} maxX Maximum X.
+   * @param {number} minY Minimum Y.
+   * @param {number} maxY Maximum Y.
    */
-  this.minX = minX;
+  constructor(minX, maxX, minY, maxY) {
+
+    /**
+     * @type {number}
+     */
+    this.minX = minX;
+
+    /**
+     * @type {number}
+     */
+    this.maxX = maxX;
+
+    /**
+     * @type {number}
+     */
+    this.minY = minY;
+
+    /**
+     * @type {number}
+     */
+    this.maxY = maxY;
+
+  }
 
   /**
-   * @type {number}
+   * @param {module:ol/tilecoord~TileCoord} tileCoord Tile coordinate.
+   * @return {boolean} Contains tile coordinate.
    */
-  this.maxX = maxX;
+  contains(tileCoord) {
+    return this.containsXY(tileCoord[1], tileCoord[2]);
+  }
 
   /**
-   * @type {number}
+   * @param {module:ol/TileRange} tileRange Tile range.
+   * @return {boolean} Contains.
    */
-  this.minY = minY;
+  containsTileRange(tileRange) {
+    return this.minX <= tileRange.minX && tileRange.maxX <= this.maxX &&
+       this.minY <= tileRange.minY && tileRange.maxY <= this.maxY;
+  }
 
   /**
-   * @type {number}
+   * @param {number} x Tile coordinate x.
+   * @param {number} y Tile coordinate y.
+   * @return {boolean} Contains coordinate.
    */
-  this.maxY = maxY;
+  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/VectorImageTile.js

@@ -1,7 +1,7 @@
 /**
  * @module ol/VectorImageTile
  */
-import {getUid, inherits} from './index.js';
+import {getUid} from './util.js';
 import Tile from './Tile.js';
 import TileState from './TileState.js';
 import {createCanvasContext2D} from './dom.js';
@@ -9,6 +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';
 
 
 /**
@@ -20,280 +21,299 @@ import {loadFeaturesXhr} from './featureloader.js';
  */
 
 
-/**
- * @constructor
- * @extends {module:ol/Tile}
- * @param {module:ol/tilecoord~TileCoord} tileCoord Tile coordinate.
- * @param {module:ol/TileState} state State.
- * @param {number} sourceRevision Source revision.
- * @param {module:ol/format/Feature} format Feature format.
- * @param {module:ol/Tile~LoadFunction} tileLoadFunction Tile load function.
- * @param {module:ol/tilecoord~TileCoord} urlTileCoord Wrapped tile coordinate for source urls.
- * @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 {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,
- *     module:ol/format/Feature, module:ol/Tile~LoadFunction)} tileClass Class to
- *     instantiate for source tiles.
- * @param {function(this: module:ol/source/VectorTile, module:ol/events/Event)} handleTileChange
- *     Function to call when a source tile's state changes.
- * @param {module:ol/Tile~Options=} opt_options Tile options.
- */
-const VectorImageTile = function(tileCoord, state, sourceRevision, format,
-  tileLoadFunction, urlTileCoord, tileUrlFunction, sourceTileGrid, tileGrid,
-  sourceTiles, pixelRatio, projection, tileClass, handleTileChange, opt_options) {
-
-  Tile.call(this, tileCoord, state, opt_options);
+class VectorImageTile extends Tile {
 
   /**
-   * @private
-   * @type {!Object.<string, CanvasRenderingContext2D>}
+   * @param {module:ol/tilecoord~TileCoord} tileCoord Tile coordinate.
+   * @param {module:ol/TileState} state State.
+   * @param {number} sourceRevision Source revision.
+   * @param {module:ol/format/Feature} format Feature format.
+   * @param {module:ol/Tile~LoadFunction} tileLoadFunction Tile load function.
+   * @param {module:ol/tilecoord~TileCoord} urlTileCoord Wrapped tile coordinate for source urls.
+   * @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 {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,
+   *     module:ol/format/Feature, module:ol/Tile~LoadFunction)} tileClass Class to
+   *     instantiate for source tiles.
+   * @param {function(this: module:ol/source/VectorTile, module:ol/events/Event)} handleTileChange
+   *     Function to call when a source tile's state changes.
+   * @param {number} zoom Integer zoom to render the tile for.
    */
-  this.context_ = {};
+  constructor(tileCoord, state, sourceRevision, format, tileLoadFunction,
+    urlTileCoord, tileUrlFunction, sourceTileGrid, tileGrid, sourceTiles,
+    pixelRatio, projection, tileClass, handleTileChange, zoom) {
 
-  /**
-   * @private
-   * @type {module:ol/featureloader~FeatureLoader}
-   */
-  this.loader_;
+    super(tileCoord, state, {transition: 0});
 
-  /**
-   * @private
-   * @type {!Object.<string, module:ol/VectorImageTile~ReplayState>}
-   */
-  this.replayState_ = {};
+    /**
+     * @private
+     * @type {!Object.<string, CanvasRenderingContext2D>}
+     */
+    this.context_ = {};
 
-  /**
-   * @private
-   * @type {Object.<string, module:ol/VectorTile>}
-   */
-  this.sourceTiles_ = sourceTiles;
+    /**
+     * @private
+     * @type {module:ol/featureloader~FeatureLoader}
+     */
+    this.loader_;
 
-  /**
-   * Keys of source tiles used by this tile. Use with {@link #getTile}.
-   * @type {Array.<string>}
-   */
-  this.tileKeys = [];
+    /**
+     * @private
+     * @type {!Object.<string, module:ol/VectorImageTile~ReplayState>}
+     */
+    this.replayState_ = {};
 
-  /**
-   * @type {number}
-   */
-  this.sourceRevision_ = sourceRevision;
+    /**
+     * @private
+     * @type {Object.<string, module:ol/VectorTile>}
+     */
+    this.sourceTiles_ = sourceTiles;
 
-  /**
-   * @type {module:ol/tilecoord~TileCoord}
-   */
-  this.wrappedTileCoord = urlTileCoord;
+    /**
+     * Keys of source tiles used by this tile. Use with {@link #getTile}.
+     * @type {Array.<string>}
+     */
+    this.tileKeys = [];
 
-  /**
-   * @type {Array.<module:ol/events~EventsKey>}
-   */
-  this.loadListenerKeys_ = [];
+    /**
+     * @type {module:ol/extent~Extent}
+     */
+    this.extent = null;
 
-  /**
-   * @type {Array.<module:ol/events~EventsKey>}
-   */
-  this.sourceTileListenerKeys_ = [];
+    /**
+     * @type {number}
+     */
+    this.sourceRevision_ = sourceRevision;
 
-  if (urlTileCoord) {
-    const extent = tileGrid.getTileCoordExtent(urlTileCoord);
-    const resolution = tileGrid.getResolution(tileCoord[0]);
-    const sourceZ = sourceTileGrid.getZForResolution(resolution);
-    sourceTileGrid.forEachTileCoord(extent, sourceZ, function(sourceTileCoord) {
-      let sharedExtent = getIntersection(extent,
-        sourceTileGrid.getTileCoordExtent(sourceTileCoord));
-      const sourceExtent = sourceTileGrid.getExtent();
-      if (sourceExtent) {
-        sharedExtent = getIntersection(sharedExtent, sourceExtent, sharedExtent);
-      }
-      if (getWidth(sharedExtent) / resolution >= 0.5 &&
-          getHeight(sharedExtent) / resolution >= 0.5) {
-        // only include source tile if overlap is at least 1 pixel
-        const sourceTileKey = sourceTileCoord.toString();
-        let sourceTile = sourceTiles[sourceTileKey];
-        if (!sourceTile) {
-          const tileUrl = tileUrlFunction(sourceTileCoord, pixelRatio, projection);
-          sourceTile = sourceTiles[sourceTileKey] = new tileClass(sourceTileCoord,
-            tileUrl == undefined ? TileState.EMPTY : TileState.IDLE,
-            tileUrl == undefined ? '' : tileUrl,
-            format, tileLoadFunction);
-          this.sourceTileListenerKeys_.push(
-            listen(sourceTile, EventType.CHANGE, handleTileChange));
+    /**
+     * @type {module:ol/tilecoord~TileCoord}
+     */
+    this.wrappedTileCoord = urlTileCoord;
+
+    /**
+     * @type {Array.<module:ol/events~EventsKey>}
+     */
+    this.loadListenerKeys_ = [];
+
+    /**
+     * @type {Array.<module:ol/events~EventsKey>}
+     */
+    this.sourceTileListenerKeys_ = [];
+
+    if (urlTileCoord) {
+      const extent = this.extent = tileGrid.getTileCoordExtent(urlTileCoord);
+      const resolution = tileGrid.getResolution(zoom);
+      const sourceZ = sourceTileGrid.getZForResolution(resolution);
+      const useLoadedOnly = zoom != tileCoord[0];
+      let loadCount = 0;
+      sourceTileGrid.forEachTileCoord(extent, sourceZ, function(sourceTileCoord) {
+        let sharedExtent = getIntersection(extent,
+          sourceTileGrid.getTileCoordExtent(sourceTileCoord));
+        const sourceExtent = sourceTileGrid.getExtent();
+        if (sourceExtent) {
+          sharedExtent = getIntersection(sharedExtent, sourceExtent, sharedExtent);
         }
-        sourceTile.consumers++;
-        this.tileKeys.push(sourceTileKey);
-      }
-    }.bind(this));
-  }
-
-};
-
-inherits(VectorImageTile, Tile);
-
-
-/**
- * @inheritDoc
- */
-VectorImageTile.prototype.disposeInternal = function() {
-  this.state = TileState.ABORT;
-  this.changed();
-  if (this.interimTile) {
-    this.interimTile.dispose();
-  }
-
-  for (let i = 0, ii = this.tileKeys.length; i < ii; ++i) {
-    const sourceTileKey = this.tileKeys[i];
-    const sourceTile = this.getTile(sourceTileKey);
-    sourceTile.consumers--;
-    if (sourceTile.consumers == 0) {
-      delete this.sourceTiles_[sourceTileKey];
-      sourceTile.dispose();
-    }
-  }
-  this.tileKeys.length = 0;
-  this.sourceTiles_ = null;
-  this.loadListenerKeys_.forEach(unlistenByKey);
-  this.loadListenerKeys_.length = 0;
-  this.sourceTileListenerKeys_.forEach(unlistenByKey);
-  this.sourceTileListenerKeys_.length = 0;
-  Tile.prototype.disposeInternal.call(this);
-};
-
-
-/**
- * @param {module:ol/layer/Layer} layer Layer.
- * @return {CanvasRenderingContext2D} The rendering context.
- */
-VectorImageTile.prototype.getContext = function(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) {
-  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) {
-  const key = getUid(layer).toString();
-  if (!(key in this.replayState_)) {
-    this.replayState_[key] = {
-      dirty: false,
-      renderedRenderOrder: null,
-      renderedRevision: -1,
-      renderedTileRevision: -1
-    };
-  }
-  return this.replayState_[key];
-};
-
-
-/**
- * @inheritDoc
- */
-VectorImageTile.prototype.getKey = function() {
-  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) {
-  return this.sourceTiles_[tileKey];
-};
-
-
-/**
- * @inheritDoc
- */
-VectorImageTile.prototype.load = function() {
-  // 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;
-  // Source tiles with ERROR state - we track them because they can still have
-  // an ERROR state after another load attempt.
-  const errorSourceTiles = {};
-
-  if (this.state == TileState.IDLE) {
-    this.setState(TileState.LOADING);
-  }
-  if (this.state == TileState.LOADING) {
-    this.tileKeys.forEach(function(sourceTileKey) {
-      const sourceTile = this.getTile(sourceTileKey);
-      if (sourceTile.state == TileState.IDLE) {
-        sourceTile.setLoader(this.loader_);
-        sourceTile.load();
-      }
-      if (sourceTile.state == TileState.LOADING) {
-        const key = listen(sourceTile, EventType.CHANGE, function(e) {
-          const state = sourceTile.getState();
-          if (state == TileState.LOADED ||
-              state == TileState.ERROR) {
-            const uid = getUid(sourceTile);
-            if (state == TileState.ERROR) {
-              errorSourceTiles[uid] = true;
-            } else {
-              --leftToLoad;
-              delete errorSourceTiles[uid];
-            }
-            if (leftToLoad - Object.keys(errorSourceTiles).length == 0) {
-              this.finishLoading_();
-            }
+        if (getWidth(sharedExtent) / resolution >= 0.5 &&
+            getHeight(sharedExtent) / resolution >= 0.5) {
+          // only include source tile if overlap is at least 1 pixel
+          ++loadCount;
+          const sourceTileKey = sourceTileCoord.toString();
+          let sourceTile = sourceTiles[sourceTileKey];
+          if (!sourceTile && !useLoadedOnly) {
+            const tileUrl = tileUrlFunction(sourceTileCoord, pixelRatio, projection);
+            sourceTile = sourceTiles[sourceTileKey] = new tileClass(sourceTileCoord,
+              tileUrl == undefined ? TileState.EMPTY : TileState.IDLE,
+              tileUrl == undefined ? '' : tileUrl,
+              format, tileLoadFunction);
+            this.sourceTileListenerKeys_.push(
+              listen(sourceTile, EventType.CHANGE, handleTileChange));
           }
-        }.bind(this));
-        this.loadListenerKeys_.push(key);
-        ++leftToLoad;
+          if (sourceTile && (!useLoadedOnly || sourceTile.getState() == TileState.LOADED)) {
+            sourceTile.consumers++;
+            this.tileKeys.push(sourceTileKey);
+          }
+        }
+      }.bind(this));
+
+      if (useLoadedOnly && loadCount == this.tileKeys.length) {
+        this.finishLoading_();
       }
-    }.bind(this));
-  }
-  if (leftToLoad - Object.keys(errorSourceTiles).length == 0) {
-    setTimeout(this.finishLoading_.bind(this), 0);
-  }
-};
 
+      if (zoom <= tileCoord[0] && this.state != TileState.LOADED) {
+        while (zoom > tileGrid.getMinZoom()) {
+          const tile = new VectorImageTile(tileCoord, state, sourceRevision,
+            format, tileLoadFunction, urlTileCoord, tileUrlFunction,
+            sourceTileGrid, tileGrid, sourceTiles, pixelRatio, projection,
+            tileClass, UNDEFINED, --zoom);
+          if (tile.state == TileState.LOADED) {
+            this.interimTile = tile;
+            break;
+          }
+        }
+      }
+    }
 
-/**
- * @private
- */
-VectorImageTile.prototype.finishLoading_ = function() {
-  let loaded = this.tileKeys.length;
-  let empty = 0;
-  for (let i = loaded - 1; i >= 0; --i) {
-    const state = this.getTile(this.tileKeys[i]).getState();
-    if (state != TileState.LOADED) {
-      --loaded;
-    }
-    if (state == TileState.EMPTY) {
-      ++empty;
-    }
   }
-  if (loaded == this.tileKeys.length) {
+
+  /**
+   * @inheritDoc
+   */
+  disposeInternal() {
+    this.state = TileState.ABORT;
+    this.changed();
+    if (this.interimTile) {
+      this.interimTile.dispose();
+    }
+
+    for (let i = 0, ii = this.tileKeys.length; i < ii; ++i) {
+      const sourceTileKey = this.tileKeys[i];
+      const sourceTile = this.getTile(sourceTileKey);
+      sourceTile.consumers--;
+      if (sourceTile.consumers == 0) {
+        delete this.sourceTiles_[sourceTileKey];
+        sourceTile.dispose();
+      }
+    }
+    this.tileKeys.length = 0;
+    this.sourceTiles_ = null;
     this.loadListenerKeys_.forEach(unlistenByKey);
     this.loadListenerKeys_.length = 0;
-    this.setState(TileState.LOADED);
-  } else {
-    this.setState(empty == this.tileKeys.length ? TileState.EMPTY : TileState.ERROR);
+    this.sourceTileListenerKeys_.forEach(unlistenByKey);
+    this.sourceTileListenerKeys_.length = 0;
+    super.disposeInternal();
   }
-};
+
+  /**
+   * @param {module:ol/layer/Layer} layer Layer.
+   * @return {CanvasRenderingContext2D} The rendering context.
+   */
+  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.
+   */
+  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.
+   */
+  getReplayState(layer) {
+    const key = getUid(layer).toString();
+    if (!(key in this.replayState_)) {
+      this.replayState_[key] = {
+        dirty: false,
+        renderedRenderOrder: null,
+        renderedRevision: -1,
+        renderedTileRevision: -1
+      };
+    }
+    return this.replayState_[key];
+  }
+
+  /**
+   * @inheritDoc
+   */
+  getKey() {
+    return this.tileKeys.join('/') + '-' + this.sourceRevision_;
+  }
+
+  /**
+   * @param {string} tileKey Key (tileCoord) of the source tile.
+   * @return {module:ol/VectorTile} Source tile.
+   */
+  getTile(tileKey) {
+    return this.sourceTiles_[tileKey];
+  }
+
+  /**
+   * @inheritDoc
+   */
+  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;
+    // Source tiles with ERROR state - we track them because they can still have
+    // an ERROR state after another load attempt.
+    const errorSourceTiles = {};
+
+    if (this.state == TileState.IDLE) {
+      this.setState(TileState.LOADING);
+    }
+    if (this.state == TileState.LOADING) {
+      this.tileKeys.forEach(function(sourceTileKey) {
+        const sourceTile = this.getTile(sourceTileKey);
+        if (sourceTile.state == TileState.IDLE) {
+          sourceTile.setLoader(this.loader_);
+          sourceTile.load();
+        }
+        if (sourceTile.state == TileState.LOADING) {
+          const key = listen(sourceTile, EventType.CHANGE, function(e) {
+            const state = sourceTile.getState();
+            if (state == TileState.LOADED ||
+                state == TileState.ERROR) {
+              const uid = getUid(sourceTile);
+              if (state == TileState.ERROR) {
+                errorSourceTiles[uid] = true;
+              } else {
+                --leftToLoad;
+                delete errorSourceTiles[uid];
+              }
+              if (leftToLoad - Object.keys(errorSourceTiles).length == 0) {
+                this.finishLoading_();
+              }
+            }
+          }.bind(this));
+          this.loadListenerKeys_.push(key);
+          ++leftToLoad;
+        }
+      }.bind(this));
+    }
+    if (leftToLoad - Object.keys(errorSourceTiles).length == 0) {
+      setTimeout(this.finishLoading_.bind(this), 0);
+    }
+  }
+
+  /**
+   * @private
+   */
+  finishLoading_() {
+    let loaded = this.tileKeys.length;
+    let empty = 0;
+    for (let i = loaded - 1; i >= 0; --i) {
+      const state = this.getTile(this.tileKeys[i]).getState();
+      if (state != TileState.LOADED) {
+        --loaded;
+      }
+      if (state == TileState.EMPTY) {
+        ++empty;
+      }
+    }
+    if (loaded == this.tileKeys.length) {
+      this.loadListenerKeys_.forEach(unlistenByKey);
+      this.loadListenerKeys_.length = 0;
+      this.setState(TileState.LOADED);
+    } else {
+      this.setState(empty == this.tileKeys.length ? TileState.EMPTY : TileState.ERROR);
+    }
+  }
+}
+
 
 export default VectorImageTile;
 

src/ol/VectorTile.js

@@ -1,88 +1,10 @@
 /**
  * @module ol/VectorTile
  */
-import {getUid, inherits} from './index.js';
+import {getUid} from './util.js';
 import Tile from './Tile.js';
 import TileState from './TileState.js';
 
-/**
- * @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}
- * @param {module:ol/tilecoord~TileCoord} tileCoord Tile coordinate.
- * @param {module:ol/TileState} state State.
- * @param {string} src Data source url.
- * @param {module:ol/format/Feature} format Feature format.
- * @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) {
-
-  Tile.call(this, tileCoord, state, opt_options);
-
-  /**
-   * @type {number}
-   */
-  this.consumers = 0;
-
-  /**
-   * @private
-   * @type {module:ol/extent~Extent}
-   */
-  this.extent_ = null;
-
-  /**
-   * @private
-   * @type {module:ol/format/Feature}
-   */
-  this.format_ = format;
-
-  /**
-   * @private
-   * @type {Array.<module:ol/Feature>}
-   */
-  this.features_ = null;
-
-  /**
-   * @private
-   * @type {module:ol/featureloader~FeatureLoader}
-   */
-  this.loader_;
-
-  /**
-   * Data projection
-   * @private
-   * @type {module:ol/proj/Projection}
-   */
-  this.projection_;
-
-  /**
-   * @private
-   * @type {Object.<string, module:ol/render/ReplayGroup>}
-   */
-  this.replayGroups_ = {};
-
-  /**
-   * @private
-   * @type {module:ol/Tile~LoadFunction}
-   */
-  this.tileLoadFunction_ = tileLoadFunction;
-
-  /**
-   * @private
-   * @type {string}
-   */
-  this.url_ = src;
-
-};
-
-inherits(VectorTile, Tile);
-
 /**
  * @const
  * @type {module:ol/extent~Extent}
@@ -91,168 +13,231 @@ const DEFAULT_EXTENT = [0, 0, 4096, 4096];
 
 
 /**
- * @inheritDoc
- */
-VectorTile.prototype.disposeInternal = function() {
-  this.features_ = null;
-  this.replayGroups_ = {};
-  this.state = TileState.ABORT;
-  this.changed();
-  Tile.prototype.disposeInternal.call(this);
-};
-
-
-/**
- * Gets the extent of the vector tile.
- * @return {module:ol/extent~Extent} The extent.
+ * @typedef {function(new: module:ol/VectorTile, module:ol/tilecoord~TileCoord,
+ * module:ol/TileState, string, ?string, module:ol/Tile~LoadFunction)} TileClass
  * @api
  */
-VectorTile.prototype.getExtent = function() {
-  return this.extent_ || DEFAULT_EXTENT;
-};
 
+class VectorTile extends Tile {
 
-/**
- * Get the feature format assigned for reading this tile's features.
- * @return {module:ol/format/Feature} Feature format.
- * @api
- */
-VectorTile.prototype.getFormat = function() {
-  return this.format_;
-};
+  /**
+   * @param {module:ol/tilecoord~TileCoord} tileCoord Tile coordinate.
+   * @param {module:ol/TileState} state State.
+   * @param {string} src Data source url.
+   * @param {module:ol/format/Feature} format Feature format.
+   * @param {module:ol/Tile~LoadFunction} tileLoadFunction Tile load function.
+   * @param {module:ol/Tile~Options=} opt_options Tile options.
+   */
+  constructor(tileCoord, state, src, format, tileLoadFunction, opt_options) {
 
+    super(tileCoord, state, opt_options);
 
-/**
- * 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.
- * @api
- */
-VectorTile.prototype.getFeatures = function() {
-  return this.features_;
-};
+    /**
+     * @type {number}
+     */
+    this.consumers = 0;
 
+    /**
+     * @private
+     * @type {module:ol/extent~Extent}
+     */
+    this.extent_ = null;
 
-/**
- * @inheritDoc
- */
-VectorTile.prototype.getKey = function() {
-  return this.url_;
-};
+    /**
+     * @private
+     * @type {module:ol/format/Feature}
+     */
+    this.format_ = format;
 
+    /**
+     * @private
+     * @type {Array.<module:ol/Feature>}
+     */
+    this.features_ = null;
 
-/**
- * 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() {
-  return this.projection_;
-};
+    /**
+     * @private
+     * @type {module:ol/featureloader~FeatureLoader}
+     */
+    this.loader_;
 
+    /**
+     * Data projection
+     * @private
+     * @type {module:ol/proj/Projection}
+     */
+    this.projection_ = null;
 
-/**
- * @param {module:ol/layer/Layer} layer Layer.
- * @param {string} key Key.
- * @return {module:ol/render/ReplayGroup} Replay group.
- */
-VectorTile.prototype.getReplayGroup = function(layer, key) {
-  return this.replayGroups_[getUid(layer) + ',' + key];
-};
+    /**
+     * @private
+     * @type {Object.<string, module:ol/render/ReplayGroup>}
+     */
+    this.replayGroups_ = {};
 
+    /**
+     * @private
+     * @type {module:ol/Tile~LoadFunction}
+     */
+    this.tileLoadFunction_ = tileLoadFunction;
+
+    /**
+     * @private
+     * @type {string}
+     */
+    this.url_ = src;
 
-/**
- * @inheritDoc
- */
-VectorTile.prototype.load = function() {
-  if (this.state == TileState.IDLE) {
-    this.setState(TileState.LOADING);
-    this.tileLoadFunction_(this, this.url_);
-    this.loader_(null, NaN, null);
   }
-};
 
+  /**
+   * @inheritDoc
+   */
+  disposeInternal() {
+    this.features_ = null;
+    this.replayGroups_ = {};
+    this.state = TileState.ABORT;
+    this.changed();
+    super.disposeInternal();
+  }
 
-/**
- * Handler for successful tile load.
- * @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) {
-  this.setProjection(dataProjection);
-  this.setFeatures(features);
-  this.setExtent(extent);
-};
+  /**
+   * Gets the extent of the vector tile.
+   * @return {module:ol/extent~Extent} The extent.
+   * @api
+   */
+  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
+   */
+  getFormat() {
+    return this.format_;
+  }
 
-/**
- * Handler for tile load errors.
- */
-VectorTile.prototype.onError = function() {
-  this.setState(TileState.ERROR);
-};
+  /**
+   * 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.
+   * @api
+   */
+  getFeatures() {
+    return this.features_;
+  }
 
+  /**
+   * @inheritDoc
+   */
+  getKey() {
+    return this.url_;
+  }
 
-/**
- * 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
- * set to `[0, 0, tilePixelSize, tilePixelSize]`, where `tilePixelSize` is
- * calculated by multiplying the tile size with the tile pixel ratio. For
- * sources using {@link module:ol/format/MVT~MVT} as feature format, the
- * {@link module:ol/format/MVT~MVT#getLastExtent} method will return the correct
- * extent. The default is `[0, 0, 4096, 4096]`.
- * @param {module:ol/extent~Extent} extent The extent.
- * @api
- */
-VectorTile.prototype.setExtent = function(extent) {
-  this.extent_ = extent;
-};
+  /**
+   * Get the feature projection of features returned by
+   * {@link module:ol/VectorTile~VectorTile#getFeatures}.
+   * @return {module:ol/proj/Projection} Feature projection.
+   * @api
+   */
+  getProjection() {
+    return this.projection_;
+  }
 
+  /**
+   * @param {module:ol/layer/Layer} layer Layer.
+   * @param {string} key Key.
+   * @return {module:ol/render/ReplayGroup} Replay group.
+   */
+  getReplayGroup(layer, key) {
+    return this.replayGroups_[getUid(layer) + ',' + key];
+  }
 
-/**
- * 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.
- * @api
- */
-VectorTile.prototype.setFeatures = function(features) {
-  this.features_ = features;
-  this.setState(TileState.LOADED);
-};
+  /**
+   * @inheritDoc
+   */
+  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 {module:ol/proj/Projection} dataProjection Data projection.
+   * @param {module:ol/extent~Extent} extent Extent.
+   */
+  onLoad(features, dataProjection, extent) {
+    this.setProjection(dataProjection);
+    this.setFeatures(features);
+    this.setExtent(extent);
+  }
 
-/**
- * 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) {
-  this.projection_ = projection;
-};
+  /**
+   * Handler for tile load errors.
+   */
+  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
+   * set to `[0, 0, tilePixelSize, tilePixelSize]`, where `tilePixelSize` is
+   * calculated by multiplying the tile size with the tile pixel ratio. For
+   * sources using {@link module:ol/format/MVT~MVT} as feature format, the
+   * {@link module:ol/format/MVT~MVT#getLastExtent} method will return the correct
+   * extent. The default is `[0, 0, 4096, 4096]`.
+   * @param {module:ol/extent~Extent} extent The extent.
+   * @api
+   */
+  setExtent(extent) {
+    this.extent_ = extent;
+  }
 
-/**
- * @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) {
-  this.replayGroups_[getUid(layer) + ',' + key] = replayGroup;
-};
+  /**
+   * 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.
+   * @api
+   */
+  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
+   */
+  setProjection(projection) {
+    this.projection_ = projection;
+  }
 
-/**
- * Set the feature loader for reading this tile's features.
- * @param {module:ol/featureloader~FeatureLoader} loader Feature loader.
- * @api
- */
-VectorTile.prototype.setLoader = function(loader) {
-  this.loader_ = loader;
-};
+  /**
+   * @param {module:ol/layer/Layer} layer Layer.
+   * @param {string} key Key.
+   * @param {module:ol/render/ReplayGroup} replayGroup Replay group.
+   */
+  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
+   */
+  setLoader(loader) {
+    this.loader_ = loader;
+  }
+}
 
 export default VectorTile;

src/ol/WebGLMap.js

@@ -1,7 +1,6 @@
 /**
  * @module ol/WebGLMap
  */
-import {inherits} from './index.js';
 import PluggableMap from './PluggableMap.js';
 import {defaults as defaultControls} from './control.js';
 import {defaults as defaultInteractions} from './interaction.js';
@@ -57,38 +56,39 @@ 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) {
-  options = assign({}, options);
-  if (!options.controls) {
-    options.controls = defaultControls();
-  }
-  if (!options.interactions) {
-    options.interactions = defaultInteractions();
+class WebGLMap extends PluggableMap {
+
+  /**
+   * @param {module:ol/PluggableMap~MapOptions} options Map options.
+   */
+  constructor(options) {
+    options = assign({}, options);
+    if (!options.controls) {
+      options.controls = defaultControls();
+    }
+    if (!options.interactions) {
+      options.interactions = defaultInteractions();
+    }
+
+    super(options);
   }
 
-  PluggableMap.call(this, options);
-};
+  createRenderer() {
+    const renderer = new WebGLMapRenderer(this);
+    renderer.registerLayerRenderers([
+      WebGLImageLayerRenderer,
+      WebGLTileLayerRenderer,
+      WebGLVectorLayerRenderer
+    ]);
+    return renderer;
+  }
+}
 
-inherits(WebGLMap, PluggableMap);
-
-
-WebGLMap.prototype.createRenderer = function() {
-  const renderer = new WebGLMapRenderer(this);
-  renderer.registerLayerRenderers([
-    WebGLImageLayerRenderer,
-    WebGLTileLayerRenderer,
-    WebGLVectorLayerRenderer
-  ]);
-  return renderer;
-};
 
 export default WebGLMap;

src/ol/array.js

@@ -26,7 +26,7 @@ export function binarySearch(haystack, needle, opt_comparator) {
     cmp = +comparator(haystack[mid], needle);
 
     if (cmp < 0.0) { /* Too low. */
-      low  = mid + 1;
+      low = mid + 1;
 
     } else { /* Key found or too high */
       high = mid;

src/ol/colorlike.js

@@ -8,8 +8,9 @@ import {toString} from './color.js';
  * A type accepted by CanvasRenderingContext2D.fillStyle
  * or CanvasRenderingContext2D.strokeStyle.
  * Represents a color, pattern, or gradient. The origin for patterns and
- * gradients as fill style is the top-left corner of the extent of the geometry
- * being filled.
+ * gradients as fill style is an increment of 512 css pixels from map coordinate
+ * `[0, 0]`. For seamless repeat patterns, width and height of the pattern image
+ * must be a factor of two (2, 4, 8, ..., 512).
  *
  * @typedef {string|CanvasPattern|CanvasGradient} ColorLike
  * @api

src/ol/control/Attribution.js

@@ -1,7 +1,6 @@
 /**
  * @module ol/control/Attribution
  */
-import {inherits} from '../index.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,168 +41,276 @@ 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) {
-
-  const options = opt_options ? opt_options : {};
+class Attribution extends Control {
 
   /**
-   * @private
-   * @type {Element}
+   * @param {module:ol/control/Attribution~Options=} opt_options Attribution options.
    */
-  this.ulElement_ = document.createElement('UL');
+  constructor(opt_options) {
 
-  /**
-   * @private
-   * @type {boolean}
-   */
-  this.collapsed_ = options.collapsed !== undefined ? options.collapsed : true;
+    const options = opt_options ? opt_options : {};
 
-  /**
-   * @private
-   * @type {boolean}
-   */
-  this.collapsible_ = options.collapsible !== undefined ?
-    options.collapsible : true;
+    super({
+      element: document.createElement('div'),
+      render: options.render || render,
+      target: options.target
+    });
 
-  if (!this.collapsible_) {
-    this.collapsed_ = false;
-  }
-
-  const className = options.className !== undefined ? options.className : 'ol-attribution';
-
-  const tipLabel = options.tipLabel !== undefined ? options.tipLabel : 'Attributions';
-
-  const collapseLabel = options.collapseLabel !== undefined ? options.collapseLabel : '\u00BB';
-
-  if (typeof collapseLabel === 'string') {
     /**
      * @private
-     * @type {Element}
+     * @type {HTMLElement}
      */
-    this.collapseLabel_ = document.createElement('span');
-    this.collapseLabel_.textContent = collapseLabel;
-  } else {
-    this.collapseLabel_ = collapseLabel;
-  }
+    this.ulElement_ = document.createElement('UL');
 
-  const label = options.label !== undefined ? options.label : 'i';
-
-  if (typeof label === 'string') {
     /**
      * @private
-     * @type {Element}
+     * @type {boolean}
      */
-    this.label_ = document.createElement('span');
-    this.label_.textContent = label;
-  } else {
-    this.label_ = label;
+    this.collapsed_ = options.collapsed !== undefined ? options.collapsed : true;
+
+    /**
+     * @private
+     * @type {boolean}
+     */
+    this.collapsible_ = options.collapsible !== undefined ?
+      options.collapsible : true;
+
+    if (!this.collapsible_) {
+      this.collapsed_ = false;
+    }
+
+    const className = options.className !== undefined ? options.className : 'ol-attribution';
+
+    const tipLabel = options.tipLabel !== undefined ? options.tipLabel : 'Attributions';
+
+    const collapseLabel = options.collapseLabel !== undefined ? options.collapseLabel : '\u00BB';
+
+    if (typeof collapseLabel === 'string') {
+      /**
+       * @private
+       * @type {HTMLElement}
+       */
+      this.collapseLabel_ = document.createElement('span');
+      this.collapseLabel_.textContent = collapseLabel;
+    } else {
+      this.collapseLabel_ = collapseLabel;
+    }
+
+    const label = options.label !== undefined ? options.label : 'i';
+
+    if (typeof label === 'string') {
+      /**
+       * @private
+       * @type {HTMLElement}
+       */
+      this.label_ = document.createElement('span');
+      this.label_.textContent = label;
+    } else {
+      this.label_ = label;
+    }
+
+
+    const activeLabel = (this.collapsible_ && !this.collapsed_) ?
+      this.collapseLabel_ : this.label_;
+    const button = document.createElement('button');
+    button.setAttribute('type', 'button');
+    button.title = tipLabel;
+    button.appendChild(activeLabel);
+
+    listen(button, EventType.CLICK, this.handleClick_, this);
+
+    const cssClasses = className + ' ' + CLASS_UNSELECTABLE + ' ' + CLASS_CONTROL +
+        (this.collapsed_ && this.collapsible_ ? ' ' + CLASS_COLLAPSED : '') +
+        (this.collapsible_ ? '' : ' ol-uncollapsible');
+    const element = this.element;
+    element.className = cssClasses;
+    element.appendChild(this.ulElement_);
+    element.appendChild(button);
+
+    /**
+     * A list of currently rendered resolutions.
+     * @type {Array.<string>}
+     * @private
+     */
+    this.renderedAttributions_ = [];
+
+    /**
+     * @private
+     * @type {boolean}
+     */
+    this.renderedVisible_ = true;
+
   }
 
-
-  const activeLabel = (this.collapsible_ && !this.collapsed_) ?
-    this.collapseLabel_ : this.label_;
-  const button = document.createElement('button');
-  button.setAttribute('type', 'button');
-  button.title = tipLabel;
-  button.appendChild(activeLabel);
-
-  listen(button, EventType.CLICK, this.handleClick_, this);
-
-  const cssClasses = className + ' ' + CLASS_UNSELECTABLE + ' ' + CLASS_CONTROL +
-      (this.collapsed_ && this.collapsible_ ? ' ' + CLASS_COLLAPSED : '') +
-      (this.collapsible_ ? '' : ' ol-uncollapsible');
-  const element = document.createElement('div');
-  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>}
+   * Get a list of visible attributions.
+   * @param {module:ol/PluggableMap~FrameState} frameState Frame state.
+   * @return {Array.<string>} Attributions.
    * @private
    */
-  this.renderedAttributions_ = [];
+  getSourceAttributions_(frameState) {
+    /**
+     * Used to determine if an attribution already exists.
+     * @type {!Object.<string, boolean>}
+     */
+    const lookup = {};
 
-  /**
-   * @private
-   * @type {boolean}
-   */
-  this.renderedVisible_ = true;
+    /**
+     * A list of visible attributions.
+     * @type {Array.<string>}
+     */
+    const visibleAttributions = [];
 
-};
+    const layerStatesArray = frameState.layerStatesArray;
+    const resolution = frameState.viewState.resolution;
+    for (let i = 0, ii = layerStatesArray.length; i < ii; ++i) {
+      const layerState = layerStatesArray[i];
+      if (!visibleAtResolution(layerState, resolution)) {
+        continue;
+      }
 
-inherits(Attribution, Control);
+      const source = layerState.layer.getSource();
+      if (!source) {
+        continue;
+      }
 
+      const attributionGetter = source.getAttributions();
+      if (!attributionGetter) {
+        continue;
+      }
 
-/**
- * Get a list of visible attributions.
- * @param {module:ol/PluggableMap~FrameState} frameState Frame state.
- * @return {Array.<string>} Attributions.
- * @private
- */
-Attribution.prototype.getSourceAttributions_ = function(frameState) {
-  /**
-   * Used to determine if an attribution already exists.
-   * @type {!Object.<string, boolean>}
-   */
-  const lookup = {};
+      const attributions = attributionGetter(frameState);
+      if (!attributions) {
+        continue;
+      }
 
-  /**
-   * A list of visible attributions.
-   * @type {Array.<string>}
-   */
-  const visibleAttributions = [];
-
-  const layerStatesArray = frameState.layerStatesArray;
-  const resolution = frameState.viewState.resolution;
-  for (let i = 0, ii = layerStatesArray.length; i < ii; ++i) {
-    const layerState = layerStatesArray[i];
-    if (!visibleAtResolution(layerState, resolution)) {
-      continue;
-    }
-
-    const source = layerState.layer.getSource();
-    if (!source) {
-      continue;
-    }
-
-    const attributionGetter = source.getAttributions();
-    if (!attributionGetter) {
-      continue;
-    }
-
-    const attributions = attributionGetter(frameState);
-    if (!attributions) {
-      continue;
-    }
-
-    if (Array.isArray(attributions)) {
-      for (let j = 0, jj = attributions.length; j < jj; ++j) {
-        if (!(attributions[j] in lookup)) {
-          visibleAttributions.push(attributions[j]);
-          lookup[attributions[j]] = true;
+      if (Array.isArray(attributions)) {
+        for (let j = 0, jj = attributions.length; j < jj; ++j) {
+          if (!(attributions[j] in lookup)) {
+            visibleAttributions.push(attributions[j]);
+            lookup[attributions[j]] = true;
+          }
+        }
+      } else {
+        if (!(attributions in lookup)) {
+          visibleAttributions.push(attributions);
+          lookup[attributions] = true;
         }
       }
-    } else {
-      if (!(attributions in lookup)) {
-        visibleAttributions.push(attributions);
-        lookup[attributions] = true;
+    }
+    return visibleAttributions;
+  }
+
+  /**
+   * @private
+   * @param {?module:ol/PluggableMap~FrameState} frameState Frame state.
+   */
+  updateElement_(frameState) {
+    if (!frameState) {
+      if (this.renderedVisible_) {
+        this.element.style.display = 'none';
+        this.renderedVisible_ = false;
       }
+      return;
+    }
+
+    const attributions = this.getSourceAttributions_(frameState);
+
+    const visible = attributions.length > 0;
+    if (this.renderedVisible_ != visible) {
+      this.element.style.display = visible ? '' : 'none';
+      this.renderedVisible_ = visible;
+    }
+
+    if (equals(attributions, this.renderedAttributions_)) {
+      return;
+    }
+
+    removeChildren(this.ulElement_);
+
+    // append the attributions
+    for (let i = 0, ii = attributions.length; i < ii; ++i) {
+      const element = document.createElement('LI');
+      element.innerHTML = attributions[i];
+      this.ulElement_.appendChild(element);
+    }
+
+    this.renderedAttributions_ = attributions;
+  }
+
+  /**
+   * @param {MouseEvent} event The event to handle
+   * @private
+   */
+  handleClick_(event) {
+    event.preventDefault();
+    this.handleToggle_();
+  }
+
+  /**
+   * @private
+   */
+  handleToggle_() {
+    this.element.classList.toggle(CLASS_COLLAPSED);
+    if (this.collapsed_) {
+      replaceNode(this.collapseLabel_, this.label_);
+    } else {
+      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
+   */
+  getCollapsible() {
+    return this.collapsible_;
+  }
+
+  /**
+   * Set whether the attribution should be collapsible.
+   * @param {boolean} collapsible True if the widget is collapsible.
+   * @api
+   */
+  setCollapsible(collapsible) {
+    if (this.collapsible_ === collapsible) {
+      return;
+    }
+    this.collapsible_ = collapsible;
+    this.element.classList.toggle('ol-uncollapsible');
+    if (!collapsible && this.collapsed_) {
+      this.handleToggle_();
     }
   }
-  return visibleAttributions;
-};
+
+  /**
+   * 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
+   */
+  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
+   */
+  getCollapsed() {
+    return this.collapsed_;
+  }
+}
 
 
 /**
@@ -217,117 +324,4 @@ export function render(mapEvent) {
 }
 
 
-/**
- * @private
- * @param {?module:ol/PluggableMap~FrameState} frameState Frame state.
- */
-Attribution.prototype.updateElement_ = function(frameState) {
-  if (!frameState) {
-    if (this.renderedVisible_) {
-      this.element.style.display = 'none';
-      this.renderedVisible_ = false;
-    }
-    return;
-  }
-
-  const attributions = this.getSourceAttributions_(frameState);
-
-  const visible = attributions.length > 0;
-  if (this.renderedVisible_ != visible) {
-    this.element.style.display = visible ? '' : 'none';
-    this.renderedVisible_ = visible;
-  }
-
-  if (equals(attributions, this.renderedAttributions_)) {
-    return;
-  }
-
-  removeChildren(this.ulElement_);
-
-  // append the attributions
-  for (let i = 0, ii = attributions.length; i < ii; ++i) {
-    const element = document.createElement('LI');
-    element.innerHTML = attributions[i];
-    this.ulElement_.appendChild(element);
-  }
-
-  this.renderedAttributions_ = attributions;
-};
-
-
-/**
- * @param {Event} event The event to handle
- * @private
- */
-Attribution.prototype.handleClick_ = function(event) {
-  event.preventDefault();
-  this.handleToggle_();
-};
-
-
-/**
- * @private
- */
-Attribution.prototype.handleToggle_ = function() {
-  this.element.classList.toggle(CLASS_COLLAPSED);
-  if (this.collapsed_) {
-    replaceNode(this.collapseLabel_, this.label_);
-  } else {
-    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() {
-  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) {
-  if (this.collapsible_ === collapsible) {
-    return;
-  }
-  this.collapsible_ = collapsible;
-  this.element.classList.toggle('ol-uncollapsible');
-  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) {
-  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() {
-  return this.collapsed_;
-};
 export default Attribution;

src/ol/control/Control.js

@@ -1,7 +1,6 @@
 /**
  * @module ol/control/Control
  */
-import {inherits} from '../index.js';
 import {UNDEFINED} from '../functions.js';
 import MapEventType from '../MapEventType.js';
 import BaseObject from '../Object.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,113 +43,112 @@ 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) {
-
-  BaseObject.call(this);
+class Control extends BaseObject {
 
   /**
-   * @protected
-   * @type {Element}
+   * @param {module:ol/control/Control~Options} options Control options.
    */
-  this.element = options.element ? options.element : null;
+  constructor(options) {
 
-  /**
-   * @private
-   * @type {Element}
-   */
-  this.target_ = null;
+    super();
 
-  /**
-   * @private
-   * @type {module:ol/PluggableMap}
-   */
-  this.map_ = null;
+    /**
+     * @protected
+     * @type {HTMLElement}
+     */
+    this.element = options.element ? options.element : null;
 
-  /**
-   * @protected
-   * @type {!Array.<module:ol/events~EventsKey>}
-   */
-  this.listenerKeys = [];
+    /**
+     * @private
+     * @type {HTMLElement}
+     */
+    this.target_ = null;
 
-  /**
-   * @type {function(module:ol/MapEvent)}
-   */
-  this.render = options.render ? options.render : UNDEFINED;
+    /**
+     * @private
+     * @type {module:ol/PluggableMap}
+     */
+    this.map_ = null;
 
-  if (options.target) {
-    this.setTarget(options.target);
-  }
+    /**
+     * @protected
+     * @type {!Array.<module:ol/events~EventsKey>}
+     */
+    this.listenerKeys = [];
 
-};
+    /**
+     * @type {function(module:ol/MapEvent)}
+     */
+    this.render = options.render ? options.render : UNDEFINED;
 
-inherits(Control, BaseObject);
-
-
-/**
- * @inheritDoc
- */
-Control.prototype.disposeInternal = function() {
-  removeNode(this.element);
-  BaseObject.prototype.disposeInternal.call(this);
-};
-
-
-/**
- * Get the map associated with this control.
- * @return {module:ol/PluggableMap} Map.
- * @api
- */
-Control.prototype.getMap = function() {
-  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) {
-  if (this.map_) {
-    removeNode(this.element);
-  }
-  for (let i = 0, ii = this.listenerKeys.length; i < ii; ++i) {
-    unlistenByKey(this.listenerKeys[i]);
-  }
-  this.listenerKeys.length = 0;
-  this.map_ = map;
-  if (this.map_) {
-    const target = this.target_ ?
-      this.target_ : map.getOverlayContainerStopEvent();
-    target.appendChild(this.element);
-    if (this.render !== UNDEFINED) {
-      this.listenerKeys.push(listen(map,
-        MapEventType.POSTRENDER, this.render, this));
+    if (options.target) {
+      this.setTarget(options.target);
     }
-    map.render();
+
   }
-};
+
+  /**
+   * @inheritDoc
+   */
+  disposeInternal() {
+    removeNode(this.element);
+    super.disposeInternal();
+  }
+
+  /**
+   * Get the map associated with this control.
+   * @return {module:ol/PluggableMap} Map.
+   * @api
+   */
+  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
+   */
+  setMap(map) {
+    if (this.map_) {
+      removeNode(this.element);
+    }
+    for (let i = 0, ii = this.listenerKeys.length; i < ii; ++i) {
+      unlistenByKey(this.listenerKeys[i]);
+    }
+    this.listenerKeys.length = 0;
+    this.map_ = map;
+    if (this.map_) {
+      const target = this.target_ ?
+        this.target_ : map.getOverlayContainerStopEvent();
+      target.appendChild(this.element);
+      if (this.render !== UNDEFINED) {
+        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 {HTMLElement|string} target Target.
+   * @api
+   */
+  setTarget(target) {
+    this.target_ = typeof target === 'string' ?
+      document.getElementById(target) :
+      target;
+  }
+}
 
 
-/**
- * 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.
- * @api
- */
-Control.prototype.setTarget = function(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 '../index.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,154 +60,151 @@ 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) {
-
-  const options = opt_options ? opt_options : {};
+class FullScreen extends Control {
 
   /**
-   * @private
-   * @type {string}
+   * @param {module:ol/control/FullScreen~Options=} opt_options Options.
    */
-  this.cssClassName_ = options.className !== undefined ? options.className :
-    'ol-full-screen';
+  constructor(opt_options) {
 
-  const label = options.label !== undefined ? options.label : '\u2922';
+    const options = opt_options ? opt_options : {};
 
-  /**
-   * @private
-   * @type {Element}
-   */
-  this.labelNode_ = typeof label === 'string' ?
-    document.createTextNode(label) : label;
+    super({
+      element: document.createElement('div'),
+      target: options.target
+    });
 
-  const labelActive = options.labelActive !== undefined ? options.labelActive : '\u00d7';
+    /**
+     * @private
+     * @type {string}
+     */
+    this.cssClassName_ = options.className !== undefined ? options.className :
+      'ol-full-screen';
 
-  /**
-   * @private
-   * @type {Element}
-   */
-  this.labelActiveNode_ = typeof labelActive === 'string' ?
-    document.createTextNode(labelActive) : labelActive;
+    const label = options.label !== undefined ? options.label : '\u2922';
 
-  const tipLabel = options.tipLabel ? options.tipLabel : 'Toggle full-screen';
-  const button = document.createElement('button');
-  button.className = this.cssClassName_ + '-' + isFullScreen();
-  button.setAttribute('type', 'button');
-  button.title = tipLabel;
-  button.appendChild(this.labelNode_);
+    /**
+     * @private
+     * @type {HTMLElement}
+     */
+    this.labelNode_ = typeof label === 'string' ?
+      document.createTextNode(label) : label;
 
-  listen(button, EventType.CLICK,
-    this.handleClick_, this);
+    const labelActive = options.labelActive !== undefined ? options.labelActive : '\u00d7';
 
-  const cssClasses = this.cssClassName_ + ' ' + CLASS_UNSELECTABLE +
-      ' ' + CLASS_CONTROL + ' ' +
-      (!isFullScreenSupported() ? CLASS_UNSUPPORTED : '');
-  const element = document.createElement('div');
-  element.className = cssClasses;
-  element.appendChild(button);
+    /**
+     * @private
+     * @type {HTMLElement}
+     */
+    this.labelActiveNode_ = typeof labelActive === 'string' ?
+      document.createTextNode(labelActive) : labelActive;
 
-  Control.call(this, {
-    element: element,
-    target: options.target
-  });
+    const tipLabel = options.tipLabel ? options.tipLabel : 'Toggle full-screen';
+    const button = document.createElement('button');
+    button.className = this.cssClassName_ + '-' + isFullScreen();
+    button.setAttribute('type', 'button');
+    button.title = tipLabel;
+    button.appendChild(this.labelNode_);
 
-  /**
-   * @private
-   * @type {boolean}
-   */
-  this.keys_ = options.keys !== undefined ? options.keys : false;
+    listen(button, EventType.CLICK,
+      this.handleClick_, this);
 
-  /**
-   * @private
-   * @type {Element|string|undefined}
-   */
-  this.source_ = options.source;
+    const cssClasses = this.cssClassName_ + ' ' + CLASS_UNSELECTABLE +
+        ' ' + CLASS_CONTROL + ' ' +
+        (!isFullScreenSupported() ? CLASS_UNSUPPORTED : '');
+    const element = this.element;
+    element.className = cssClasses;
+    element.appendChild(button);
 
-};
+    /**
+     * @private
+     * @type {boolean}
+     */
+    this.keys_ = options.keys !== undefined ? options.keys : false;
 
-inherits(FullScreen, Control);
+    /**
+     * @private
+     * @type {HTMLElement|string|undefined}
+     */
+    this.source_ = options.source;
 
-
-/**
- * @param {Event} event The event to handle
- * @private
- */
-FullScreen.prototype.handleClick_ = function(event) {
-  event.preventDefault();
-  this.handleFullScreen_();
-};
-
-
-/**
- * @private
- */
-FullScreen.prototype.handleFullScreen_ = function() {
-  if (!isFullScreenSupported()) {
-    return;
   }
-  const map = this.getMap();
-  if (!map) {
-    return;
+
+  /**
+   * @param {MouseEvent} event The event to handle
+   * @private
+   */
+  handleClick_(event) {
+    event.preventDefault();
+    this.handleFullScreen_();
   }
-  if (isFullScreen()) {
-    exitFullScreen();
-  } else {
-    let element;
-    if (this.source_) {
-      element = typeof this.source_ === 'string' ?
-        document.getElementById(this.source_) :
-        this.source_;
-    } else {
-      element = map.getTargetElement();
+
+  /**
+   * @private
+   */
+  handleFullScreen_() {
+    if (!isFullScreenSupported()) {
+      return;
     }
-    if (this.keys_) {
-      requestFullScreenWithKeys(element);
-
+    const map = this.getMap();
+    if (!map) {
+      return;
+    }
+    if (isFullScreen()) {
+      exitFullScreen();
     } else {
-      requestFullScreen(element);
+      let element;
+      if (this.source_) {
+        element = typeof this.source_ === 'string' ?
+          document.getElementById(this.source_) :
+          this.source_;
+      } else {
+        element = map.getTargetElement();
+      }
+      if (this.keys_) {
+        requestFullScreenWithKeys(element);
+
+      } else {
+        requestFullScreen(element);
+      }
     }
   }
-};
 
-
-/**
- * @private
- */
-FullScreen.prototype.handleFullScreenChange_ = function() {
-  const button = this.element.firstElementChild;
-  const map = this.getMap();
-  if (isFullScreen()) {
-    button.className = this.cssClassName_ + '-true';
-    replaceNode(this.labelActiveNode_, this.labelNode_);
-  } else {
-    button.className = this.cssClassName_ + '-false';
-    replaceNode(this.labelNode_, this.labelActiveNode_);
+  /**
+   * @private
+   */
+  handleFullScreenChange_() {
+    const button = this.element.firstElementChild;
+    const map = this.getMap();
+    if (isFullScreen()) {
+      button.className = this.cssClassName_ + '-true';
+      replaceNode(this.labelActiveNode_, this.labelNode_);
+    } else {
+      button.className = this.cssClassName_ + '-false';
+      replaceNode(this.labelNode_, this.labelActiveNode_);
+    }
+    if (map) {
+      map.updateSize();
+    }
   }
-  if (map) {
-    map.updateSize();
-  }
-};
 
-
-/**
- * @inheritDoc
- * @api
- */
-FullScreen.prototype.setMap = function(map) {
-  Control.prototype.setMap.call(this, map);
-  if (map) {
-    this.listenerKeys.push(listen(document,
-      getChangeType(),
-      this.handleFullScreenChange_, this)
-    );
+  /**
+   * @inheritDoc
+   * @api
+   */
+  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 '../index.js';
 import {listen} from '../events.js';
 import EventType from '../events/EventType.js';
 import {getChangeEventType} from '../Object.js';
@@ -46,75 +44,203 @@ 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 {
 
-  const options = opt_options ? opt_options : {};
+  /**
+   * @param {module:ol/control/MousePosition~Options=} opt_options Mouse position options.
+   */
+  constructor(opt_options) {
 
-  const element = document.createElement('DIV');
-  element.className = options.className !== undefined ? options.className : 'ol-mouse-position';
+    const options = opt_options ? opt_options : {};
 
-  Control.call(this, {
-    element: element,
-    render: options.render || render,
-    target: options.target
-  });
+    const element = document.createElement('DIV');
+    element.className = options.className !== undefined ? options.className : 'ol-mouse-position';
 
-  listen(this,
-    getChangeEventType(PROJECTION),
-    this.handleProjectionChanged_, this);
+    super({
+      element: element,
+      render: options.render || render,
+      target: options.target
+    });
+
+    listen(this,
+      getChangeEventType(PROJECTION),
+      this.handleProjectionChanged_, this);
+
+    if (options.coordinateFormat) {
+      this.setCoordinateFormat(options.coordinateFormat);
+    }
+    if (options.projection) {
+      this.setProjection(options.projection);
+    }
+
+    /**
+     * @private
+     * @type {string}
+     */
+    this.undefinedHTML_ = 'undefinedHTML' in options ? options.undefinedHTML : ' ';
+
+    /**
+     * @private
+     * @type {boolean}
+     */
+    this.renderOnMouseOut_ = !!this.undefinedHTML_;
+
+    /**
+     * @private
+     * @type {string}
+     */
+    this.renderedHTML_ = element.innerHTML;
+
+    /**
+     * @private
+     * @type {module:ol/proj/Projection}
+     */
+    this.mapProjection_ = null;
+
+    /**
+     * @private
+     * @type {?module:ol/proj~TransformFunction}
+     */
+    this.transform_ = null;
+
+    /**
+     * @private
+     * @type {module:ol/pixel~Pixel}
+     */
+    this.lastMouseMovePixel_ = null;
 
-  if (options.coordinateFormat) {
-    this.setCoordinateFormat(options.coordinateFormat);
-  }
-  if (options.projection) {
-    this.setProjection(options.projection);
   }
 
   /**
    * @private
-   * @type {string}
    */
-  this.undefinedHTML_ = 'undefinedHTML' in options ? options.undefinedHTML : ' ';
+  handleProjectionChanged_() {
+    this.transform_ = null;
+  }
 
   /**
-   * @private
-   * @type {boolean}
+   * 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
+   *     position in.
+   * @observable
+   * @api
    */
-  this.renderOnMouseOut_ = !!this.undefinedHTML_;
+  getCoordinateFormat() {
+    return (
+      /** @type {module:ol/coordinate~CoordinateFormat|undefined} */ (this.get(COORDINATE_FORMAT))
+    );
+  }
 
   /**
-   * @private
-   * @type {string}
+   * 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
    */
-  this.renderedHTML_ = element.innerHTML;
+  getProjection() {
+    return (
+      /** @type {module:ol/proj/Projection|undefined} */ (this.get(PROJECTION))
+    );
+  }
 
   /**
-   * @private
-   * @type {module:ol/proj/Projection}
+   * @param {Event} event Browser event.
+   * @protected
    */
-  this.mapProjection_ = null;
+  handleMouseMove(event) {
+    const map = this.getMap();
+    this.lastMouseMovePixel_ = map.getEventPixel(event);
+    this.updateHTML_(this.lastMouseMovePixel_);
+  }
 
   /**
-   * @private
-   * @type {?module:ol/proj~TransformFunction}
+   * @param {Event} event Browser event.
+   * @protected
    */
-  this.transform_ = null;
+  handleMouseOut(event) {
+    this.updateHTML_(null);
+    this.lastMouseMovePixel_ = null;
+  }
 
   /**
-   * @private
-   * @type {module:ol~Pixel}
+   * @inheritDoc
+   * @api
    */
-  this.lastMouseMovePixel_ = null;
+  setMap(map) {
+    super.setMap(map);
+    if (map) {
+      const viewport = map.getViewport();
+      this.listenerKeys.push(
+        listen(viewport, EventType.MOUSEMOVE, this.handleMouseMove, this)
+      );
+      if (this.renderOnMouseOut_) {
+        this.listenerKeys.push(
+          listen(viewport, EventType.MOUSEOUT, this.handleMouseOut, this)
+        );
+      }
+    }
+  }
 
-};
+  /**
+   * 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
+   */
+  setCoordinateFormat(format) {
+    this.set(COORDINATE_FORMAT, format);
+  }
 
-inherits(MousePosition, Control);
+  /**
+   * 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
+   */
+  setProjection(projection) {
+    this.set(PROJECTION, getProjection(projection));
+  }
+
+  /**
+   * @param {?module:ol/pixel~Pixel} pixel Pixel.
+   * @private
+   */
+  updateHTML_(pixel) {
+    let html = this.undefinedHTML_;
+    if (pixel && this.mapProjection_) {
+      if (!this.transform_) {
+        const projection = this.getProjection();
+        if (projection) {
+          this.transform_ = getTransformFromProjections(
+            this.mapProjection_, projection);
+        } else {
+          this.transform_ = identityTransform;
+        }
+      }
+      const map = this.getMap();
+      const coordinate = map.getCoordinateFromPixel(pixel);
+      if (coordinate) {
+        this.transform_(coordinate, coordinate);
+        const coordinateFormat = this.getCoordinateFormat();
+        if (coordinateFormat) {
+          html = coordinateFormat(coordinate);
+        } else {
+          html = coordinate.toString();
+        }
+      }
+    }
+    if (!this.renderedHTML_ || html !== this.renderedHTML_) {
+      this.element.innerHTML = html;
+      this.renderedHTML_ = html;
+    }
+  }
+}
 
 
 /**
@@ -137,141 +263,4 @@ export function render(mapEvent) {
 }
 
 
-/**
- * @private
- */
-MousePosition.prototype.handleProjectionChanged_ = function() {
-  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
- *     position in.
- * @observable
- * @api
- */
-MousePosition.prototype.getCoordinateFormat = function() {
-  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() {
-  return (
-    /** @type {module:ol/proj/Projection|undefined} */ (this.get(PROJECTION))
-  );
-};
-
-
-/**
- * @param {Event} event Browser event.
- * @protected
- */
-MousePosition.prototype.handleMouseMove = function(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) {
-  this.updateHTML_(null);
-  this.lastMouseMovePixel_ = null;
-};
-
-
-/**
- * @inheritDoc
- * @api
- */
-MousePosition.prototype.setMap = function(map) {
-  Control.prototype.setMap.call(this, map);
-  if (map) {
-    const viewport = map.getViewport();
-    this.listenerKeys.push(
-      listen(viewport, EventType.MOUSEMOVE, this.handleMouseMove, this)
-    );
-    if (this.renderOnMouseOut_) {
-      this.listenerKeys.push(
-        listen(viewport, EventType.MOUSEOUT, this.handleMouseOut, this)
-      );
-    }
-  }
-};
-
-
-/**
- * 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) {
-  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) {
-  this.set(PROJECTION, getProjection(projection));
-};
-
-
-/**
- * @param {?module:ol~Pixel} pixel Pixel.
- * @private
- */
-MousePosition.prototype.updateHTML_ = function(pixel) {
-  let html = this.undefinedHTML_;
-  if (pixel && this.mapProjection_) {
-    if (!this.transform_) {
-      const projection = this.getProjection();
-      if (projection) {
-        this.transform_ = getTransformFromProjections(
-          this.mapProjection_, projection);
-      } else {
-        this.transform_ = identityTransform;
-      }
-    }
-    const map = this.getMap();
-    const coordinate = map.getCoordinateFromPixel(pixel);
-    if (coordinate) {
-      this.transform_(coordinate, coordinate);
-      const coordinateFormat = this.getCoordinateFormat();
-      if (coordinateFormat) {
-        html = coordinateFormat(coordinate);
-      } else {
-        html = coordinate.toString();
-      }
-    }
-  }
-  if (!this.renderedHTML_ || html !== this.renderedHTML_) {
-    this.element.innerHTML = html;
-    this.renderedHTML_ = html;
-  }
-};
-
-
 export default MousePosition;