Version and beta tag for v6.0.0-beta.1

2019-02-04 14:00:42 +01:00
533 changed files with 7578 additions and 74613 deletions
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -27,10 +27,6 @@ jobs:
          name: Run Tests
          command: npm test

-      - store_artifacts:
-          path: coverage/
-          destination: coverage
-
      - store_artifacts:
          path: rendering/cases/
          destination: rendering
@@ -42,11 +38,3 @@ jobs:
      - store_artifacts:
          path: build/examples
          destination: examples
-
-      - run:
-          name: Build API Docs
-          command: npm run apidoc
-
-      - store_artifacts:
-          path: build/apidoc
-          destination: apidoc
--- a/.github/FUNDING.yml
+++ b/.github/FUNDING.yml
@@ -1,8 +0,0 @@
-# These are supported funding model platforms
-
-github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
-patreon: # Replace with a single Patreon username
-open_collective: openlayers
-ko_fi: # Replace with a single Ko-fi username
-tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
-custom: # Replace with a single custom sponsorship URL
--- a/.github/stale.yml
+++ b/.github/stale.yml
@@ -1,17 +0,0 @@
-# Number of days of inactivity before an issue becomes stale
-daysUntilStale: 60
-# Number of days of inactivity before a stale issue is closed
-daysUntilClose: 7
-# Issues with these labels will never be considered stale
-exemptLabels:
-  - blocker
-  - regression
-# Label to use when marking an issue as stale
-staleLabel: stale
-# Comment to post when marking an issue as stale. Set to `false` to disable
-markComment: >
-  This issue has been automatically marked as stale because it has not had
-  recent activity. It will be closed if no further activity occurs. Thank you
-  for your contributions.
-# Comment to post when closing a stale issue. Set to `false` to disable
-closeComment: false
--- a/LICENSE.md
+++ b/LICENSE.md
@@ -1,25 +1,26 @@
-BSD 2-Clause License
+Copyright 2005-present OpenLayers Contributors. All rights reserved.

-Copyright 2005-present, OpenLayers Contributors
-All rights reserved.
-
-Redistribution and use in source and binary forms, with or without
-modification, are permitted provided that the following conditions are met:
+Redistribution and use in source and binary forms, with or without modification,
+are permitted provided that the following conditions are met:

 1. Redistributions of source code must retain the above copyright notice, this
-   list of conditions and the following disclaimer.
+list of conditions and the following disclaimer.

 2. Redistributions in binary form must reproduce the above copyright notice,
-   this list of conditions and the following disclaimer in the documentation
-   and/or other materials provided with the distribution.
+this list of conditions and the following disclaimer in the documentation and/or
+other materials provided with the distribution.

-THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
-AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
-IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
-DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
-FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
-DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
-SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
-CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
-OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+THIS SOFTWARE IS PROVIDED BY OPENLAYERS CONTRIBUTORS ``AS IS'' AND ANY EXPRESS
+OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
+MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT
+SHALL COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT,
+INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
+PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF
+LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE
+OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF
+ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+
+The views and conclusions contained in the software and documentation are those
+of the authors and should not be interpreted as representing official policies,
+either expressed or implied, of OpenLayers Contributors.
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
 # OpenLayers

-[OpenLayers](https://openlayers.org/) is a high-performance, feature-packed library for creating interactive maps on the web. It can display map tiles, vector data and markers loaded from any source on any web page. OpenLayers has been developed to further the use of geographic information of all kinds. It is completely free, Open Source JavaScript, released under the [BSD 2-Clause License](https://opensource.org/licenses/BSD-2-Clause).
+[OpenLayers](https://openlayers.org/) is a high-performance, feature-packed library for creating interactive maps on the web. It can display map tiles, vector data and markers loaded from any source on any web page. OpenLayers has been developed to further the use of geographic information of all kinds. It is completely free, Open Source JavaScript, released under the 2-clause BSD License (also known as the FreeBSD).

 ## Getting Started

@@ -41,13 +41,14 @@ See the following examples for more detail on bundling OpenLayers with your appl
 * Using [Parcel](https://github.com/openlayers/ol-parcel)
 * Using [Browserify](https://github.com/openlayers/ol-browserify)

-## IntelliSense support and type checking for VS Code
+## TypeScript and VS Code IntelliSense support

-The `ol` package contains a `src/` folder with JSDoc annotated sources. TypeScript can get type definitions from these sources with a `jsconfig.json` config file in the project root:
+The `ol` package contains a `src/` folder with JSDoc annotated sources. TypeScript can get type definitions from these sources with a `tsconfig.json` like this:
 ```js
 {
  "compilerOptions": {
-    "checkJs": true,
+    // Enable JavaScript support
+    "allowJs": true,
    // Point to the JSDoc typed sources when using modules from the ol package
    "baseUrl": "./",
    "paths": {
@@ -56,14 +57,11 @@ The `ol` package contains a `src/` folder with JSDoc annotated sources. TypeScri
    }
  },
  "include": [
-    "**/*.js",
+    // Include JavaScript files from the ol package
    "node_modules/ol/**/*.js"
  ]
 }
 ```
-Project template with this configuration: https://gist.github.com/9a7253cb4712e8bf38d75d8ac898e36c.
-
-Note that the above only works when authoring in plain JavaScript. For similar configurations with a `tsconfig.json` in TypeScript projects, your mileage may vary.

 ## Supported Browsers

--- a/changelog/upgrade-notes.md
+++ b/changelog/upgrade-notes.md
@@ -4,77 +4,11 @@

 #### Backwards incompatible changes

-#### Removal of `TOUCH` constant from `ol/has`
-
-If you were previously using this constant, you can check if `'ontouchstart'` is defined in `window` instead.
-
-```js
-if ('ontouchstart' in window) {
-  // ...
-}
-```
-
-#### Removal of `GEOLOCATION` constant from `ol/has`
-
-If you were previously using this constant, you can check if `'geolocation'` is defined in `navigator` instead.
-
-```js
-if ('geolocation' in navigator) {
-  // ...
-}
-```
-
-#### Removal of CSS print rules
-
-The CSS media print rules were removed from the `ol.css` file. To get the previous behavior, use the following CSS:
-
-```css
-@media print {
-  .ol-control {
-    display: none;
-  }
-}
-```
-
-#### 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).
-
-* `forEachCorner` in `ol/extent`
-* `LRUCache#forEach`
-* `RBush#forEach` and `RBush#forEachInExtent`
-
-##### The `setCenter`, `setZoom`, `setResolution` and `setRotation` methods on `ol/View` do not bypass constraints anymore
-
-Previously, these methods allowed setting values that were inconsistent with the given view constraints.
-This is no longer the case and all changes to the view state now follow the same logic:
-target values are provided and constraints are applied on these to determine the actual values to be used.
-
-##### Removal of the `constrainResolution` option on `View.fit`, `PinchZoom`, `MouseWheelZoom` and `ol/interaction.js`
-
-The `constrainResolution` option is now only supported by the `View` class. A `View.setConstrainResolution` method was added as well.
-
-Generally, the responsibility of applying center/rotation/resolutions constraints was moved from interactions and controls to the `View` class.
-
-##### The view `extent` option now applies to the whole viewport
-
-Previously, this options only constrained the view *center*. This behaviour can still be obtained by specifying `constrainCenterOnly` in the view options.
-
-As a side effect, the view `rotate` method is gone and has been replaced with `adjustRotation` which takes a delta as input.
-
-##### The view is constrained so only one world is visible
-
-Previously, maps showed multiple worlds at low zoom levels. In addition, it used to be possible to pan off the north or south edge of the world.  Now, the view is restricted to show only one world, and you cannot pan off the edge. To get the previous behavior, configure the `ol/View` with `multiWorld: true`.
-
-##### Removal of deprecated methods
+##### Removal of the deprecated "inherits" function

 The `inherits` function that was used to inherit the prototype methods from one constructor into another has been removed.
 The standard ECMAScript classes should be used instead.

-The deprecated `getSnapToPixel` and `setSnapToPixel` functions from the `ImageStyle` class have been removed.
-
 ##### New internal tile coordinates

 Previously, the internal tile coordinates used in the library had an unusual row order – the origin of the tile coordinate system was at the top left as expected, but the rows increased upwards.  This meant that all tile coordinates within a tile grid's extent had negative `y` values.
@@ -126,18 +60,6 @@ In addition (this should be exceedingly rare), if you previously created a `ol/t

 If you were previously using `VectorTile` layers with `renderMode: 'vector'`, you have to remove this configuration option. That mode was removed. `'hybrid'` (default) and `'image'` are still available.

-##### Removal of the "renderMode" option for vector layers
-
-If you were previously using `Vector` layers with `renderMode: 'image'`, you have to remove this configuration option. Instead, use the new `ol/layer/VectorImage` layer with your `ol/source/Vector`.
-
-##### New declutter behavior
-
-If a map has more than one layer with `declutter` set to true, decluttering now considers all `Vector` and `VectorTile` layers, instead of decluttering each layer separately. Only `VectorImage` layers continue to be decluttered separately. The higher the z-index of a layer, the higher the priority of its decluttered items.
-
-Within a layer, the declutter order has changed. Previously, styles with a lower `zIndex` were prioritized over those with a higher `zIndex`. Now the opposite order is used.
-
-On vector layers, even if decluttered images or texts have a lower z-Index than polygons or lines, they will now be rendered on top of the polygons or lines. For vector tile layers, this was the case already in previous releases.
-
 ##### New `prerender` and `postrender` layer events replace old `precompose`, `render` and `postcompose` events

 If you were previously registering for `precompose` and `postcompose` events, you should now register for `prerender` and `postrender` events on layers.  Instead of the previous `render` event, you should now listen for `postrender`. Layers are no longer composed to a single Canvas element.  Instead, they are added to the map viewport as individual elements.
@@ -171,58 +93,6 @@ Due to the constraint above (layers can only be added to a single map), the over

 Previously, a graticule was not a layer.  Now it is.  See the graticule example for details on how to add a graticule layer to your map.

-##### `ol/format/Feature` API change
-
-The `getLastExtent()` method, which was required for custom `tileLoadFunction`s in `ol/source/Vector`, has been removed because it is no longer needed (see below).
-
-##### `ol/VectorTile` API changes
-
-* Removal of the `getProjection()` and `setProjection()` methods. These were used in custom `tileLoadFunction`s on `ol/source/VectorTile`, which work differently now (see below).
-* Removal of the `getExtent()` and `setExtent()` methods. These were used in custom `tileLoadFunction`s on `ol/source/VectorTile`, which work differently now (see below).
-
-##### Custom tileLoadFunction on a VectorTile source needs changes
-
-Previously, applications needed to call `setProjection()` and `setExtent()` on the tile in a custom `tileLoadFunction` on `ol/source/VectorTile`. The format's `getLastExtent()` method was used to get the extent. All this is no longer needed. Instead, the `extent` (first argument to the loader function) and `projection` (third argument to the loader function) are simply passed as `extent` and `featureProjection` options to the format's `readFeatures()` method.
-
-Example for an old `tileLoadFunction`:
-
-```js
-function(tile, url) {
-  tile.setLoader(function() {
-    fetch(url).then(function(response) {
-      response.arrayBuffer().then(function(data) {
-        var format = tile.getFormat();
-        tile.setProjection(format.readProjection(data));
-        tile.setFeatures(format.readFeatures(data, {
-          // featureProjection is not required for ol/format/MVT
-          featureProjection: map.getView().getProjection()
-        }));
-        tile.setExtent(format.getLastExtent());
-      })
-    })
-  }
-});
-```
-
-This function needs to be changed to:
-
-```js
-function(tile, url) {
-  tile.setLoader(function(extent, resolution, projection) {
-    fetch(url).then(function(response) {
-      response.arrayBuffer().then(function(data) {
-        var format = tile.getFormat();
-        tile.setFeatures(format.readFeatures(data, {
-          // extent is only required for ol/format/MVT
-          extent: extent,
-          featureProjection: projection
-        }));
-      })
-    })
-  }
-});
-```
-
 ##### Drop of support for the experimental WebGL renderer

 The WebGL map and layers renderers are gone, replaced by a `WebGLHelper` function that provides a lightweight,
@@ -248,19 +118,8 @@ The removed classes and components are:
 Following the removal of the experimental WebGL renderer, the AtlasManager has been removed as well. The atlas was only used by this renderer.
 The non API `getChecksum` functions of the style is also removed.

-##### Change of the behavior of the vector source's clear() and refresh() methods
-
-The `ol/source/Vector#clear()` method no longer triggers a reload of the data from the server. If you were previously using `clear()` to refetch from the server, you now have to use `refresh()`.
-
-The `ol/source/Vector#refresh()` method now removes all features from the source and triggers a reload of the data from the server. If you were previously using the `refresh()` method to re-render a vector layer, you should instead call `ol/layer/Vector#changed()`.
-
 #### Other changes

-##### Allow declutter in image render mode
-
-It is now possible to configure vector tile layers with `declutter: true` and `renderMode: 'image'`. However, note that decluttering will be done per tile, resulting in labels and point symbols getting cut off at tile boundaries.
-Until now, using both options forced the render mode to be `hybrid`.
-
 ##### Always load tiles while animating or interacting

 `ol/PluggableMap` and subclasses no longer support the `loadTilesWhileAnimating` and `loadTilesWhileInteracting` options. These options were used to enable tile loading during animations and interactions. With the new DOM composition render strategy, it is no longer necessary to postpone tile loading until after animations or interactions.
--- a/config/jsdoc/api/index.md
+++ b/config/jsdoc/api/index.md
@@ -1,43 +1,43 @@
 <table><tr>
 <th width="33.3%">Map</th><th width="33.3%">View</th><th width="33.3%">Layers</th>
 </tr><tr>
-<td><p>A <a href="module-ol_Map-Map.html">map</a> is made of <a href="module-ol_layer_Base-BaseLayer.html">layers</a>, a <a href="module-ol_View-View.html">view</a> to visualize them, <a href="module-ol_interaction_Interaction-Interaction.html">interactions</a> to modify map content and <a href="module-ol_control_Control-Control.html">controls</a> with UI components.</p>
-<a href="module-ol_Map-Map.html">Overview</a><br>
-<a href="module-ol_Map-Map.html#Map">Creation</a><br>
-<a href="module-ol_MapBrowserEvent-MapBrowserEvent.html">Events</a></td>
+<td><p>A [map](module-ol_Map-Map.html) is made of [layers](module-ol_layer_Base-BaseLayer.html), a [view](module-ol_View-View.html) to visualize them, [interactions](module-ol_interaction_Interaction-Interaction.html) to modify map content and [controls](module-ol_control_Control-Control.html) with UI components.</p>
+[Overview](module-ol_Map-Map.html)<br>
+[Creation](module-ol_Map-Map.html#Map)<br>
+[Events](module-ol_MapBrowserEvent-MapBrowserEvent.html)</td>
 <td><p>The view manages the visual parameters of the map view, like resolution or rotation.</p>
-<a href="module-ol_View-View.html">View</a> with center, projection, resolution and rotation</td>
-<td><p>Layers are lightweight containers that get their data from <a href="module-ol_source_Source-Source.html">sources</a>.</p>
-<a href="module-ol_layer_Tile-TileLayer.html">ol/layer/Tile</a><br>
-<a href="module-ol_layer_Image-ImageLayer.html">ol/layer/Image</a><br>
-<a href="module-ol_layer_Vector-VectorLayer.html">ol/layer/Vector</a><br>
-<a href="module-ol_layer_VectorTile-VectorTileLayer.html">ol/layer/VectorTile</a></td>
+[View](module-ol_View-View.html) with center, projection, resolution and rotation</td>
+<td><p>Layers are lightweight containers that get their data from [sources](module-ol_source_Source-Source.html).</p>
+[ol/layer/Tile](module-ol_layer_Tile-TileLayer.html)<br>
+[ol/layer/Image](module-ol_layer_Image-ImageLayer.html)<br>
+[ol/layer/Vector](module-ol_layer_Vector-VectorLayer.html)<br>
+[ol/layer/VectorTile](module-ol_layer_VectorTile-VectorTileLayer.html)</td>
 </tr><tr>
 <th>Controls</th><th>Interactions</th><th>Sources and formats</th>
 </tr><tr>
-<td><a href="module-ol_control_util.html#.defaults">Map default controls</a><br>
-<a href="module-ol_control_Control-Control.html">All controls</a>
+<td>[Map default controls](module-ol_control_util.html#.defaults)<br>
+[All controls](module-ol_control_Control-Control.html)
 </td>
 <td>
-<a href="module-ol_interaction.html#~defaults">Map default interactions</a><br>
-Interactions for <a href="module-ol_Feature-Feature.html">vector features</a>
-<ul><li><a href="module-ol_interaction_Select-Select.html">ol/interaction/Select</a></li>
-<li><a href="module-ol_interaction_Draw-Draw.html">ol/interaction/Draw</a></li>
-<li><a href="module-ol_interaction_Modify-Modify.html">ol/interaction/Modify</a></li></ul>
-<a href="module-ol_interaction_Interaction-Interaction.html">All interactions</a></td>
-<td><a href="module-ol_source_Tile-TileSource.html">Tile sources</a> for <a href="module-ol_layer_Tile-TileLayer.html">ol/layer/Tile</a>
-<br><a href="module-ol_source_Image-ImageSource.html">Image sources</a> for <a href="module-ol_layer_Image-ImageLayer.html">ol/layer/Image</a>
-<br><a href="module-ol_source_Vector-VectorSource.html">Vector sources</a> for <a href="module-ol_layer_Vector-VectorLayer.html">ol/layer/Vector</a>
-<br><a href="module-ol_source_VectorTile-VectorTile.html">Vector tile sources</a> for <a href="module-ol_layer_VectorTile-VectorTileLayer.html">ol/layer/VectorTile</a>
-<br><a href="module-ol_format_Feature-FeatureFormat.html">Formats</a> for reading/writing vector data
-<br><a href="module-ol_format_WMSCapabilities-WMSCapabilities.html">ol/format/WMSCapabilities</a></td></tr>
+[Map default interactions](module-ol_interaction.html#~defaults)<br>
+Interactions for [vector features](module-ol_Feature-Feature.html)
+<ul><li>[ol/interaction/Select](module-ol_interaction_Select-Select.html)</li>
+<li>[ol/interaction/Draw](module-ol_interaction_Draw-Draw.html)</li>
+<li>[ol/interaction/Modify](module-ol_interaction_Modify-Modify.html)</li></ul>
+[All interactions](module-ol_interaction_Interaction-Interaction.html)</td>
+<td>[Tile sources](module-ol_source_Tile-TileSource.html) for [ol/layer/Tile](module-ol_layer_Tile-TileLayer.html)
+<br>[Image sources](module-ol_source_Image-ImageSource.html) for [ol/layer/Image](module-ol_layer_Image-ImageLayer.html)
+<br>[Vector sources](module-ol_source_Vector-VectorSource.html) for [ol/layer/Vector](module-ol_layer_Vector-VectorLayer.html)
+<br>[Vector tile sources](module-ol_source_VectorTile-VectorTile.html) for [ol/layer/VectorTile](module-ol_layer_VectorTile-VectorTileLayer.html)
+<br>[Formats](module-ol_format_Feature-FeatureFormat.html) for reading/writing vector data
+<br>[ol/format/WMSCapabilities](module-ol_format_WMSCapabilities-WMSCapabilities.html)</td></tr>
 <tr><th>Projections</th><th>Observable objects</th><th>Other components</th></tr>
-<tr><td><p>All coordinates and extents need to be provided in view projection (default: EPSG:3857). To transform, use <a href="module-ol_proj.html#.transform">ol/proj#transform()</a> and <a href="module-ol_proj.html#.transformExtent">ol/proj#transformExtent()</a>.</p>
-<a href="module-ol_proj.html">ol/proj</a></td>
-<td><p>Changes to all <a href="module-ol_Object-BaseObject.html">ol/Object</a>s can be observed by calling the <a href="module-ol_Object-BaseObject.html#on">object.on('propertychange')</a> method.  Listeners receive an <a href="module-ol_Object-ObjectEvent.html">ol/Object.ObjectEvent</a> with information on the changed property and old value.</p>
+<tr><td><p>All coordinates and extents need to be provided in view projection (default: EPSG:3857). To transform, use [ol/proj#transform()](module-ol_proj.html#.transform) and [ol/proj#transformExtent()](module-ol_proj.html#.transformExtent).</p>
+[ol/proj](module-ol_proj.html)</td>
+<td><p>Changes to all [ol/Object](module-ol_Object-BaseObject.html)s can be observed by calling the [object.on('propertychange')](module-ol_Object-BaseObject.html#on) method.  Listeners receive an [ol/Object.ObjectEvent](module-ol_Object-ObjectEvent.html) with information on the changed property and old value.</p>
 <td>
-<a href="module-ol_Geolocation.html">ol/Geolocation</a><br>
-<a href="module-ol_Overlay-Overlay.html">ol/Overlay</a><br></td>
+[ol/Geolocation](module-ol_Geolocation.html)<br>
+[ol/Overlay](module-ol_Overlay-Overlay.html)<br></td>
 </tr></table>

 &nbsp;
--- a/config/jsdoc/api/plugins/api.js
+++ b/config/jsdoc/api/plugins/api.js
@@ -31,24 +31,6 @@ function hasApiMembers(doclet) {
 }

 function includeAugments(doclet) {
-  // Make sure that `observables` and `fires` are taken from an already processed `class` doclet.
-  // This is necessary because JSDoc generates multiple doclets with the same longname.
-  const cls = classes[doclet.longname];
-  if (cls.observables && !doclet.observables) {
-    doclet.observables = cls.observables;
-  }
-  if (doclet.fires && cls.fires) {
-    for (let i = 0, ii = cls.fires.length; i < ii; ++i) {
-      const fires = cls.fires[i];
-      if (doclet.fires.indexOf(fires) == -1) {
-        doclet.fires.push(fires);
-      }
-    }
-  }
-  if (cls.fires && !doclet.fires) {
-    doclet.fires = cls.fires;
-  }
-
  const augments = doclet.augments;
  if (augments) {
    let cls;
@@ -77,9 +59,7 @@ function includeAugments(doclet) {
          });
        }
        cls._hideConstructor = true;
-        if (!cls.undocumented) {
-          cls._documented = true;
-        }
+        delete cls.undocumented;
      }
    }
  }
@@ -166,13 +146,10 @@ exports.handlers = {
        // constructor from the docs.
        doclet._hideConstructor = true;
        includeAugments(doclet);
-      } else if (!doclet._hideConstructor && !(doclet.kind == 'typedef' && doclet.longname in types)) {
+      } else if (doclet.undocumented !== false && !doclet._hideConstructor && !(doclet.kind == 'typedef' && doclet.longname in types)) {
        // Remove all other undocumented symbols
        doclet.undocumented = true;
      }
-      if (doclet._documented) {
-        delete doclet.undocumented;
-      }
    }
  }

--- a/config/jsdoc/api/plugins/events.js
+++ b/config/jsdoc/api/plugins/events.js
@@ -1,29 +1,32 @@
 const events = {};
+const classes = {};

 exports.handlers = {

  newDoclet: function(e) {
    const doclet = e.doclet;
-    if (doclet.kind !== 'event') {
-      return;
+    let cls;
+    if (doclet.kind == 'event') {
+      cls = doclet.longname.split('#')[0];
+      if (!(cls in events)) {
+        events[cls] = [];
+      }
+      events[cls].push(doclet.longname);
+    } else if (doclet.kind == 'class' && !(doclet.longname in classes)) {
+      classes[doclet.longname] = doclet;
    }
-
-    const cls = doclet.longname.split('#')[0];
-    if (!(cls in events)) {
-      events[cls] = [];
-    }
-    events[cls].push(doclet.longname);
  },

  parseComplete: function(e) {
    const doclets = e.doclets;
-    for (let i = 0, ii = doclets.length - 1; i < ii; ++i) {
-      const doclet = doclets[i];
+    let doclet, i, ii, j, jj, event, fires;
+    for (i = 0, ii = doclets.length - 1; i < ii; ++i) {
+      doclet = doclets[i];
      if (doclet.fires) {
        if (doclet.kind == 'class') {
-          const fires = [];
-          for (let j = 0, jj = doclet.fires.length; j < jj; ++j) {
-            const event = doclet.fires[j].replace('event:', '');
+          fires = [];
+          for (j = 0, jj = doclet.fires.length; j < jj; ++j) {
+            event = doclet.fires[j].replace('event:', '');
            if (events[event]) {
              fires.push.apply(fires, events[event]);
            } else if (doclet.fires[j] !== 'event:ObjectEvent') {
--- a/config/jsdoc/api/plugins/inheritdoc.js
+++ b/config/jsdoc/api/plugins/inheritdoc.js
@@ -1,8 +1,12 @@
 /*
 * This is a hack to prevent inheritDoc tags from entirely removing
 * documentation of the method that inherits the documentation.
+ *
+ * TODO: Remove this hack when https://github.com/jsdoc3/jsdoc/issues/53
+ * is addressed.
 */

+
 exports.defineTags = function(dictionary) {
  dictionary.defineTag('inheritDoc', {
    mustHaveValue: false,
@@ -88,15 +92,10 @@ exports.handlers = {
                    incompleteDoclet.stability = stability;
                    for (key in candidate) {
                      if (candidate.hasOwnProperty(key) &&
-                        keepKeys.indexOf(key) == -1) {
+                          keepKeys.indexOf(key) == -1) {
                        incompleteDoclet[key] = candidate[key];
                      }
                    }
-                    // We have found a matching parent doc and applied it so we
-                    // don't want to ignore this doclet anymore.
-                    incompleteDoclet.ignore = false;
-                    // We found a match so we can stop break
-                    break;
                  }
                }
              }
--- a/config/jsdoc/api/template/publish.js
+++ b/config/jsdoc/api/template/publish.js
@@ -214,39 +214,55 @@ function buildNav(members) {
    }
    return 0;
  });
-
-  function createEntry(type, v) {
-    return {
-      type: type,
-      longname: v.longname,
-      name: v.name,
-      classes: find({
-        kind: 'class',
-        memberof: v.longname
-      }).map(createEntry.bind(this, 'class')),
-      members: find({
-        kind: 'member',
-        memberof: v.longname
-      }),
-      methods: find({
-        kind: 'function',
-        memberof: v.longname
-      }),
-      typedefs: find({
-        kind: 'typedef',
-        memberof: v.longname
-      }),
-      events: find({
-        kind: 'event',
-        memberof: v.longname
-      })
-    };
-  }
  _.each(merged, function(v) {
    // exclude interfaces from sidebar
    if (v.interface !== true) {
      if (v.kind == 'module') {
-        nav.push(createEntry('module', v));
+        nav.push({
+          type: 'module',
+          longname: v.longname,
+          name: v.name,
+          members: find({
+            kind: 'member',
+            memberof: v.longname
+          }),
+          methods: find({
+            kind: 'function',
+            memberof: v.longname
+          }),
+          typedefs: find({
+            kind: 'typedef',
+            memberof: v.longname
+          }),
+          events: find({
+            kind: 'event',
+            memberof: v.longname
+          })
+        });
+      }
+      if (v.kind == 'class') {
+        nav.push({
+          type: 'class',
+          longname: v.longname,
+          name: v.name,
+          members: find({
+            kind: 'member',
+            memberof: v.longname
+          }),
+          methods: find({
+            kind: 'function',
+            memberof: v.longname
+          }),
+          typedefs: find({
+            kind: 'typedef',
+            memberof: v.longname
+          }),
+          fires: v.fires,
+          events: find({
+            kind: 'event',
+            memberof: v.longname
+          })
+        });
      }
    }
  });
--- a/config/jsdoc/api/template/static/scripts/main.js
+++ b/config/jsdoc/api/template/static/scripts/main.js
@@ -12,18 +12,13 @@ $(function () {
                var $item = $(v);

                if ($item.data('name') && regexp.test($item.data('name'))) {
-                    const container = $item.parent().parent().parent();
-                    container.show();
-                    container.closest('.itemMembers').show();
-                    container.closest('.item').show();
                    $item.show();
                    $item.closest('.itemMembers').show();
                    $item.closest('.item').show();
                }
            });
        } else {
-            $el.find('.item, .itemMembers').hide();
-            $('.navigation>ul>li').show();
+            $el.find('.item, .itemMembers').show();
        }

        $el.find('.list').scrollTop(0);
--- a/config/jsdoc/api/template/tmpl/container.tmpl
+++ b/config/jsdoc/api/template/tmpl/container.tmpl
@@ -18,7 +18,7 @@
        <sup class="variation"><?js= doc.variation ?></sup>
    <?js } ?></h2>
    <br>
-    <?js if (doc.stability || doc.kind == 'namespace' || doc.kind == 'module') {
+    <?js if (doc.stability || doc.kind == 'namespace') {
      var ancestors = doc.ancestors.map(a => a.replace(/>\./g, '>').replace(/\.</g, '<')).join('/');
      var parts = [];
      if (ancestors) {
@@ -26,20 +26,7 @@
      }
      var importPath = parts.join('/');
    ?>
-      <?js
-        var nameParts = doc.name.split('/');
-        var moduleName = nameParts[nameParts.length - 1];
-        if(moduleName) {
-          var firstChar = moduleName.charAt(0);
-          moduleName = firstChar.toUpperCase() + moduleName.slice(1);
-          var isClassModule = firstChar.toUpperCase() === firstChar;
-        }
-      ?>
-      <?js if (doc.kind == 'module' && !isClassModule && nameParts.length < 3) {?>
-        <pre class="prettyprint source"><code>import * as ol<?js= moduleName ?> from '<?js= doc.name ?>';</code></pre>
-      <?js } else if(doc.kind !== 'module') { ?>
-        <pre class="prettyprint source"><code>import <?js= doc.name ?> from '<?js= importPath ?>';</code></pre>
-      <?js } ?>
+    <pre class="prettyprint source"><code>import <?js= doc.name ?> from '<?js= importPath ?>';</code></pre>
    <?js } ?>
    <?js if (doc.classdesc) { ?>
        <div class="class-description"><?js= doc.classdesc ?></div>
@@ -156,7 +143,6 @@
        <h3 class="subsection-title">Methods</h3>

        <dl><?js methods.forEach(function(m) { ?>
-            <?js m.parent = doc ?>
            <?js= self.partial('method.tmpl', m) ?>
        <?js }); ?></dl>
    <?js } ?>
--- a/config/jsdoc/api/template/tmpl/method.tmpl
+++ b/config/jsdoc/api/template/tmpl/method.tmpl
@@ -27,10 +27,6 @@ var self = this;
 </dt>
 <dd class="<?js= (data.stability && data.stability !== 'stable') ? 'unstable' : '' ?>">

-<?js if (data.parent && data.parent.kind == 'module' && data.parent.name.split('ol/').length < 3) { ?>
-  <pre class="prettyprint source"><code>import {<?js= data.name ?>} from '<?js= data.parent.name ?>';</code></pre>
-<?js } ?>
-
    <?js if (data.description) { ?>
    <div class="description">
        <?js= data.description ?>
--- a/config/jsdoc/api/template/tmpl/navigation.tmpl
+++ b/config/jsdoc/api/template/tmpl/navigation.tmpl
@@ -10,12 +10,11 @@ function toShortName(name) {
    </div>
    <ul class="list">
    <?js
-    let navbuilder;
-    this.nav.forEach(navbuilder = function (item) {
+    this.nav.forEach(function (item) {
    ?>
        <li class="item" data-name="<?js= item.longname ?>">
            <span class="title">
-                <?js= self.linkto(item.longname, item.type === 'module' ? item.longname.replace('module:', '') : item.name) ?>
+                <?js= self.linkto(item.longname, item.longname.replace('module:', '')) ?>
                <?js if (item.type === 'namespace' &&
                        (item.members.length + item.typedefs.length + item.methods.length +
                         item.events.length > 0)) { ?>
@@ -23,18 +22,6 @@ function toShortName(name) {
            </span>
            <ul class="members itemMembers">
            <?js
-            if (item.classes.length) {
-            ?>
-            <span class="subtitle">Classes</span>
-            <?js
-                item.classes.forEach(function (v) {
-                    navbuilder(v);
-                });
-            }
-            ?>
-            </ul>
-            <ul class="members itemMembers">
-            <?js
            if (item.members.length) {
            ?>
            <span class="subtitle">Members</span>
--- a/config/tsconfig-build.json
+++ b/config/tsconfig-build.json
@@ -37,7 +37,7 @@
    // "noFallthroughCasesInSwitch": true,    /* Report errors for fallthrough cases in switch statement. */

    /* Module Resolution Options */
-    "moduleResolution": "node",            /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
+    // "moduleResolution": "node",            /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
    // "baseUrl": "./",                       /* Base directory to resolve non-absolute module names. */
    // "paths": {},                           /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
    // "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */
--- a/doc/errors/index.md
+++ b/doc/errors/index.md
@@ -220,19 +220,3 @@ Duplicate item added to a unique collection.  For example, it may be that you tr
 ### 59

 Invalid command found in the PBF.  This indicates that the loaded vector tile may be corrupt.
-
-### 60
-
-Missing or invalid `size`.
-
-### 61
-
-Cannot determine IIIF Image API version from provided image information JSON.
-
-### 62
-
-A `WebGLArrayBuffer` must either be of type `ELEMENT_ARRAY_BUFFER` or `ARRAY_BUFFER`.
-
-### 63
-
-Support for the `OES_element_index_uint` WebGL extension is mandatory for WebGL layers.
--- a/doc/faq.md
+++ b/doc/faq.md
@@ -21,7 +21,7 @@ Table of contents:
 * [Why aren't there any features in my source?](#why-aren-t-there-any-features-in-my-source-)
 * [How do I force a re-render of the map?](#how-do-i-force-a-re-render-of-the-map-)
 * [Why are my features not found?](#why-are-my-features-not-found-)
-* [Why is zooming or clicking off, inaccurate?](#user-content-why-is-zooming-or-clicking-off-inaccurate)
+

 ## What projection is OpenLayers using?

@@ -371,30 +371,3 @@ const vectorLayer = new VectorLayer({
 ```

 The recommended value is the size of the largest symbol, line width or label.
-
-## Why is zooming or clicking in the map off/inaccurate?
-
-OpenLayers does not update the map when the container element is resized. This can be caused by progressive updates
-to CSS styles or manually resizing the map. When that happens, any interaction will become inaccurate: the map would zoom in and out, and end up not being centered on the pointer. This makes it hard to do certain interactions, e.g. selecting the desired feature.
-
-There is currently no built-in way to react to element's size changes, as [Resize Observer API](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) is only implemented in Chrome.
-
-There is however an easy to use [polyfill](https://github.com/que-etc/resize-observer-polyfill):
-
-```javascript
-import Map from 'ol/Map';
-import ResizeObserver from 'resize-observer-polyfill';
-
-const mapElement = document.querySelector('#map')
-const map = new Map({
-  target: mapElement
-})
-
-const sizeObserver = new ResizeObserver(() => {
-  map.updateSize()
-})
-sizeObserver.observe(mapElement)
-
-// called when the map is destroyed
-// sizeObserver.disconnect()
-```
--- a/doc/tutorials/concepts.hbs
+++ b/doc/tutorials/concepts.hbs
@@ -75,7 +75,7 @@ The above snippets can be combined into a single script that renders a map with
 import Map from 'ol/Map';
 import View from 'ol/View';
 import OSM from 'ol/source/OSM';
-import TileLayer from 'ol/layer/Tile';
+import TileLayer from 'ol/source/Tile';

 new Map({
  layers: [
--- a/examples/.eslintrc
+++ b/examples/.eslintrc
@@ -5,6 +5,7 @@
    "common": false,
    "createMapboxStreetsV6Style": false,
    "d3": false,
+    "domtoimage": false,
    "geojsonvt": false,
    "GyroNorm": false,
    "jsPDF": false,
--- a/examples/bing-maps.html
+++ b/examples/bing-maps.html
@@ -12,8 +12,9 @@ cloak:
 <div id="map" class="map"></div>
 <select id="layer-select">
   <option value="Aerial">Aerial</option>
-   <option value="AerialWithLabelsOnDemand" selected>Aerial with labels</option>
-   <option value="RoadOnDemand">Road</option>
-   <option value="CanvasDark">Road dark</option>
-   <option value="OrdnanceSurvey">Ordnance Survey</option>
+   <option value="AerialWithLabels" selected>Aerial with labels</option>
+   <option value="Road">Road (static)</option>
+   <option value="RoadOnDemand">Road (dynamic)</option>
+   <option value="collinsBart">Collins Bart</option>
+   <option value="ordnanceSurvey">Ordnance Survey</option>
 </select>
--- a/examples/bing-maps.js
+++ b/examples/bing-maps.js
@@ -5,11 +5,12 @@ import BingMaps from '../src/ol/source/BingMaps.js';


 const styles = [
+  'Road',
  'RoadOnDemand',
  'Aerial',
-  'AerialWithLabelsOnDemand',
-  'CanvasDark',
-  'OrdnanceSurvey'
+  'AerialWithLabels',
+  'collinsBart',
+  'ordnanceSurvey'
 ];
 const layers = [];
 let i, ii;
--- a/examples/center.html
+++ b/examples/center.html
@@ -21,6 +21,8 @@ tags: "center, rotation, openstreetmap"
  <div class="padding-bottom"></div>
  <div class="center"></div>
 </div>
-<button id="zoomtoswitzerland">Zoom to Switzerland</button> (best fit).<br/>
+<button id="zoomtoswitzerlandbest">Zoom to Switzerland</button> (best fit),<br/>
+<button id="zoomtoswitzerlandconstrained">Zoom to Switzerland</button> (respect resolution constraint).<br/>
+<button id="zoomtoswitzerlandnearest">Zoom to Switzerland</button> (nearest),<br/>
 <button id="zoomtolausanne">Zoom to Lausanne</button> (with min resolution),<br/>
 <button id="centerlausanne">Center on Lausanne</button>
--- a/examples/center.js
+++ b/examples/center.js
@@ -5,7 +5,6 @@ import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
 import {OSM, Vector as VectorSource} from '../src/ol/source.js';
 import {Circle as CircleStyle, Fill, Stroke, Style} from '../src/ol/style.js';

-/** @type {VectorSource<import("../src/ol/geom/SimpleGeometry.js").default>} */
 const source = new VectorSource({
  url: 'data/geojson/switzerland.geojson',
  format: new GeoJSON()
@@ -48,25 +47,40 @@ const map = new Map({
  view: view
 });

-const zoomtoswitzerland =
-    document.getElementById('zoomtoswitzerland');
-zoomtoswitzerland.addEventListener('click', function() {
+const zoomtoswitzerlandbest = document.getElementById('zoomtoswitzerlandbest');
+zoomtoswitzerlandbest.addEventListener('click', function() {
  const feature = source.getFeatures()[0];
-  const polygon = feature.getGeometry();
+  const polygon = /** @type {import("../src/ol/geom/SimpleGeometry.js").default} */ (feature.getGeometry());
+  view.fit(polygon, {padding: [170, 50, 30, 150], constrainResolution: false});
+}, false);
+
+const zoomtoswitzerlandconstrained =
+    document.getElementById('zoomtoswitzerlandconstrained');
+zoomtoswitzerlandconstrained.addEventListener('click', function() {
+  const feature = source.getFeatures()[0];
+  const polygon = /** @type {import("../src/ol/geom/SimpleGeometry.js").default} */ (feature.getGeometry());
  view.fit(polygon, {padding: [170, 50, 30, 150]});
 }, false);

+const zoomtoswitzerlandnearest =
+    document.getElementById('zoomtoswitzerlandnearest');
+zoomtoswitzerlandnearest.addEventListener('click', function() {
+  const feature = source.getFeatures()[0];
+  const polygon = /** @type {import("../src/ol/geom/SimpleGeometry.js").default} */ (feature.getGeometry());
+  view.fit(polygon, {padding: [170, 50, 30, 150], nearest: true});
+}, false);
+
 const zoomtolausanne = document.getElementById('zoomtolausanne');
 zoomtolausanne.addEventListener('click', function() {
  const feature = source.getFeatures()[1];
-  const point = feature.getGeometry();
+  const point = /** @type {import("../src/ol/geom/SimpleGeometry.js").default} */ (feature.getGeometry());
  view.fit(point, {padding: [170, 50, 30, 150], minResolution: 50});
 }, false);

 const centerlausanne = document.getElementById('centerlausanne');
 centerlausanne.addEventListener('click', function() {
  const feature = source.getFeatures()[1];
-  const point = feature.getGeometry();
+  const point = /** @type {import("../src/ol/geom/Point.js").default} */ (feature.getGeometry());
  const size = map.getSize();
  view.centerOn(point.getCoordinates(), size, [570, 500]);
 }, false);
--- a/examples/color-manipulation.js
+++ b/examples/color-manipulation.js
@@ -100,7 +100,8 @@ function xyz2rgb(x) {

 const raster = new RasterSource({
  sources: [new Stamen({
-    layer: 'watercolor'
+    layer: 'watercolor',
+    transition: 0
  })],
  operation: function(pixels, data) {
    const hcl = rgb2hcl(pixels[0]);
--- a/examples/custom-interactions.js
+++ b/examples/custom-interactions.js
@@ -129,7 +129,7 @@ const map = new Map({
  layers: [
    new TileLayer({
      source: new TileJSON({
-        url: 'https://a.tiles.mapbox.com/v3/aj.1x1-degrees.json'
+        url: 'https://api.tiles.mapbox.com/v3/mapbox.geography-class.json?secure'
      })
    }),
    new VectorLayer({
--- a/examples/d3.html
+++ b/examples/d3.html
@@ -6,7 +6,7 @@ docs: >
  The example loads TopoJSON geometries and uses d3 (<code>d3.geo.path</code>) to render these geometries to a SVG element.
 tags: "d3"
 resources:
-  - https://unpkg.com/d3@5.9.2/dist/d3.js
+  - https://unpkg.com/d3@4.12.0/build/d3.js
  - https://unpkg.com/topojson@3.0.2/dist/topojson.js
 ---
 <div id="map" class="map"></div>
--- a/examples/d3.js
+++ b/examples/d3.js
@@ -2,7 +2,7 @@ import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
 import {getWidth, getCenter} from '../src/ol/extent.js';
 import {Layer, Tile as TileLayer} from '../src/ol/layer.js';
-import SourceState from '../src/ol/source/State.js';
+import SourceState from '../src/ol/source/State';
 import {fromLonLat, toLonLat} from '../src/ol/proj.js';
 import Stamen from '../src/ol/source/Stamen.js';

@@ -85,7 +85,7 @@ const map = new Map({
 /**
 * Load the topojson data and create an ol/layer/Image for that data.
 */
-d3.json('data/topojson/us.json').then(function(us) {
+d3.json('data/topojson/us.json', function(error, us) {

  const layer = new CanvasLayer({
    features: topojson.feature(us, us.objects.counties)
--- a/examples/data/csv/meteorite_landings.csv
+++ b/examples/data/csv/meteorite_landings.csv
--- a/examples/data/square.svg
+++ b/examples/data/square.svg
@@ -1,7 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-
-<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg">
-  <g>
-    <rect width="20" height="20" style="fill:#fff" />
-  </g>
-</svg>
--- a/examples/device-orientation.js
+++ b/examples/device-orientation.js
@@ -40,6 +40,6 @@ gn.init().then(function() {
    center[0] -= resolution * gamma * 25;
    center[1] += resolution * beta * 25;

-    view.setCenter(center);
+    view.setCenter(view.constrainCenter(center));
  });
 });
--- a/examples/earthquake-clusters.css
+++ b/examples/earthquake-clusters.css
@@ -0,0 +1,18 @@
+#map {
+  position: relative;
+}
+#info {
+  position: absolute;
+  height: 1px;
+  width: 1px;
+  z-index: 100;
+}
+.tooltip.in {
+  opacity: 1;
+}
+.tooltip.top .tooltip-arrow {
+  border-top-color: white;
+}
+.tooltip-inner {
+  border: 2px solid white;
+}
--- a/examples/earthquake-custom-symbol.js
+++ b/examples/earthquake-custom-symbol.js
@@ -26,8 +26,9 @@ const styleFunction = function(feature) {
  scale = size / 10;
  let style = styleCache[size];
  if (!style) {
-    const canvas = document.createElement('canvas');
-    const vectorContext = toContext(canvas.getContext('2d'),
+    const canvas = /** @type {HTMLCanvasElement} */ (document.createElement('canvas'));
+    const vectorContext = toContext(
+      /** @type {CanvasRenderingContext2D} */ (canvas.getContext('2d')),
      {size: [size, size], pixelRatio: 1});
    vectorContext.setStyle(new Style({
      fill: new Fill({color: 'rgba(255, 153, 0, 0.4)'}),
--- a/examples/export-map.css
+++ b/examples/export-map.css
@@ -1,6 +0,0 @@
-.overlay {
-  background-color: yellow;
-  border-radius: 6px;
-  padding: 4px;
-  white-space: nowrap;
-}
--- a/examples/export-map.html
+++ b/examples/export-map.html
@@ -3,13 +3,12 @@ layout: example.html
 title: Map Export
 shortdesc: Example of exporting a map as a PNG image.
 docs: >
-  Example of exporting a map as a PNG image. This example use the <a href="https://www.npmjs.com/package/html-to-image">html-to-image</a>
+  Example of exporting a map as a PNG image. This example use the <a href="https://www.npmjs.com/package/dom-to-image-more">dom-to-image-more</a>
  library.
 tags: "export, png, openstreetmap"
+resources:
+  - https://unpkg.com/dom-to-image-more@2.7.1/dist/dom-to-image-more.min.js
 ---
 <div id="map" class="map"></div>
-<div style="display: none;">
-  <div class="overlay" id="null">Null Island</div>
-</div>
 <a id="export-png" class="btn btn-default"><i class="fa fa-download"></i> Download PNG</a>
 <a id="image-download" download="map.png"></a>
--- a/examples/export-map.js
+++ b/examples/export-map.js
@@ -1,12 +1,9 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
-import Overlay from '../src/ol/Overlay.js';
 import GeoJSON from '../src/ol/format/GeoJSON.js';
 import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
 import {OSM, Vector as VectorSource} from '../src/ol/source.js';

-import {toPng} from 'html-to-image';
-
 const map = new Map({
  layers: [
    new TileLayer({
@@ -26,23 +23,9 @@ const map = new Map({
  })
 });

-map.addOverlay(new Overlay({
-  position: [0, 0],
-  element: document.getElementById('null')
-}));
-
-
-// export options for html-to-image.
-// See: https://github.com/bubkoo/html-to-image#options
-const exportOptions = {
-  filter: function(element) {
-    return element.className ? element.className.indexOf('ol-control') === -1 : true;
-  }
-};
-
 document.getElementById('export-png').addEventListener('click', function() {
  map.once('rendercomplete', function() {
-    toPng(map.getTargetElement(), exportOptions)
+    domtoimage.toPng(map.getViewport().querySelector('.ol-layers'))
      .then(function(dataURL) {
        const link = document.getElementById('image-download');
        link.href = dataURL;
--- a/examples/export-pdf.html
+++ b/examples/export-pdf.html
@@ -7,6 +7,7 @@ docs: >
 tags: "export, pdf, openstreetmap"
 resources:
  - https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/jspdf.min.js
+  - https://unpkg.com/dom-to-image-more@2.7.1/dist/dom-to-image-more.min.js
 ---
 <div class="row-fluid">
  <div class="span12">
--- a/examples/export-pdf.js
+++ b/examples/export-pdf.js
@@ -4,8 +4,6 @@ import WKT from '../src/ol/format/WKT.js';
 import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
 import {OSM, Vector as VectorSource} from '../src/ol/source.js';

-import {toJpeg} from 'html-to-image';
-
 const raster = new TileLayer({
  source: new OSM()
 });
@@ -43,15 +41,6 @@ const dims = {
  a5: [210, 148]
 };

-
-// export options for html-to-image.
-// See: https://github.com/bubkoo/html-to-image#options
-const exportOptions = {
-  filter: function(element) {
-    return element.className.indexOf('ol-control') === -1;
-  }
-};
-
 const exportButton = document.getElementById('export-pdf');

 exportButton.addEventListener('click', function() {
@@ -65,18 +54,16 @@ exportButton.addEventListener('click', function() {
  const width = Math.round(dim[0] * resolution / 25.4);
  const height = Math.round(dim[1] * resolution / 25.4);
  const size = map.getSize();
-  const viewResolution = map.getView().getResolution();
+  const extent = map.getView().calculateExtent(size);

  map.once('rendercomplete', function() {
-    exportOptions.width = width;
-    exportOptions.height = height;
-    toJpeg(map.getViewport(), exportOptions).then(function(dataUrl) {
+    domtoimage.toJpeg(map.getViewport().querySelector('.ol-layers')).then(function(dataUrl) {
      const pdf = new jsPDF('landscape', undefined, format);
      pdf.addImage(dataUrl, 'JPEG', 0, 0, dim[0], dim[1]);
      pdf.save('map.pdf');
      // Reset original map size
      map.setSize(size);
-      map.getView().setResolution(viewResolution);
+      map.getView().fit(extent, {size});
      exportButton.disabled = false;
      document.body.style.cursor = 'auto';
    });
@@ -85,7 +72,6 @@ exportButton.addEventListener('click', function() {
  // Set print size
  const printSize = [width, height];
  map.setSize(printSize);
-  const scaling = Math.min(width / size[0], height / size[1]);
-  map.getView().setResolution(viewResolution / scaling);
+  map.getView().fit(extent, {size: printSize});

 }, false);
--- a/examples/extent-constrained.html
+++ b/examples/extent-constrained.html
@@ -1,9 +0,0 @@
---
-layout: example.html
-title: Constrained Extent
-shortdesc: Example of a view with a constrained extent.
-docs: >
-  This map has a view that is constrained in an extent.  This is done using the `extent` view option. Please note that specifying `constrainOnlyCenter: true` would only apply the extent restriction to the view center.
-tags: "view, extent, constrain, restrict"
---
-<div id="map" class="map"></div>
--- a/examples/extent-constrained.js
+++ b/examples/extent-constrained.js
@@ -1,25 +0,0 @@
-import Map from '../src/ol/Map.js';
-import View from '../src/ol/View.js';
-import TileLayer from '../src/ol/layer/Tile.js';
-import OSM from '../src/ol/source/OSM.js';
-import {defaults as defaultControls} from '../src/ol/control.js';
-import ZoomSlider from '../src/ol/control/ZoomSlider.js';
-
-const view = new View({
-  center: [328627.563458, 5921296.662223],
-  zoom: 8,
-  extent: [-572513.341856, 5211017.966314,
-    916327.095083, 6636950.728974]
-});
-
-new Map({
-  layers: [
-    new TileLayer({
-      source: new OSM()
-    })
-  ],
-  keyboardEventTarget: document,
-  target: 'map',
-  view: view,
-  controls: defaultControls().extend([new ZoomSlider()])
-});
--- a/examples/extent-interaction.js
+++ b/examples/extent-interaction.js
@@ -1,5 +1,6 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
+import {platformModifierKeyOnly} from '../src/ol/events/condition.js';
 import GeoJSON from '../src/ol/format/GeoJSON.js';
 import ExtentInteraction from '../src/ol/interaction/Extent.js';
 import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
@@ -26,7 +27,9 @@ const map = new Map({
  })
 });

-const extent = new ExtentInteraction();
+const extent = new ExtentInteraction({
+  condition: platformModifierKeyOnly
+});
 map.addInteraction(extent);
 extent.setActive(false);

--- a/examples/feature-animation.js
+++ b/examples/feature-animation.js
@@ -21,8 +21,7 @@ const map = new Map({
  target: 'map',
  view: new View({
    center: [0, 0],
-    zoom: 1,
-    multiWorld: true
+    zoom: 1
  })
 });

--- a/examples/feature-move-animation.js
+++ b/examples/feature-move-animation.js
@@ -67,10 +67,10 @@ const routeFeature = new Feature({
  type: 'route',
  geometry: route
 });
-const geoMarker = /** @type Feature<import("../src/ol/geom/Point").default> */(new Feature({
+const geoMarker = new Feature({
  type: 'geoMarker',
  geometry: new Point(routeCoords[0])
-}));
+});
 const startMarker = new Feature({
  type: 'icon',
  geometry: new Point(routeCoords[0])
@@ -133,7 +133,7 @@ const map = new Map({
  layers: [
    new TileLayer({
      source: new BingMaps({
-        imagerySet: 'AerialWithLabelsOnDemand',
+        imagerySet: 'AerialWithLabels',
        key: 'As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5'
      })
    }),
@@ -191,7 +191,7 @@ function stopAnimation(ended) {

  // if animation cancelled set the marker at the beginning
  const coord = ended ? routeCoords[routeLength - 1] : routeCoords[0];
-  const geometry = geoMarker.getGeometry();
+  const geometry = /** @type {import("../src/ol/geom/Point").default} */ (geoMarker.getGeometry());
  geometry.setCoordinates(coord);
  //remove listener
  vectorLayer.un('postrender', moveFeature);
--- a/examples/filter-points-webgl.html
+++ b/examples/filter-points-webgl.html
@@ -1,25 +0,0 @@
---
-layout: example.html
-title: Filtering features with WebGL
-shortdesc: Using WebGL to filter large quantities of features
-docs: >
-  This example shows how to use `ol/renderer/webgl/PointsLayer` to dynamically filter a large amount
-    of point geometries. The above map is based on a dataset from the NASA containing 45k recorded meteorite
-    landing sites. Each meteorite is marked by a circle on the map (the bigger the circle, the heavier
-    the object). A pulse effect has been added, which is slightly offset by the year of the impact.
-
-  Adjusting the sliders causes the objects outside of the date range to be filtered out of the map. This is done using
-    a custom fragment shader on the layer renderer, and by using the `v_opacity` attribute of the rendered objects
-    to store the year of impact.
-
-tags: "webgl, icon, sprite, filter, feature"
---
-<div id="map" class="map"></div>
-<form>
-  <div id="status">Show impacts between <span class="min-year"></span> and <span class="max-year"></span></div>
-
-  <label>Minimum year:</label>
-  <input id="min-year" type="range" min="1850" max="2015" step="1" value="1850"/>
-  <label>Maximum year:</label>
-  <input id="max-year" type="range" min="1850" max="2015" step="1" value="2015"/>
-</form>
--- a/examples/filter-points-webgl.js
+++ b/examples/filter-points-webgl.js
@@ -1,163 +0,0 @@
-import Map from '../src/ol/Map.js';
-import View from '../src/ol/View.js';
-import TileLayer from '../src/ol/layer/Tile.js';
-import Feature from '../src/ol/Feature.js';
-import Point from '../src/ol/geom/Point.js';
-import VectorLayer from '../src/ol/layer/Vector.js';
-import {Vector} from '../src/ol/source.js';
-import {fromLonLat} from '../src/ol/proj.js';
-import WebGLPointsLayerRenderer from '../src/ol/renderer/webgl/PointsLayer.js';
-import {clamp, lerp} from '../src/ol/math.js';
-import Stamen from '../src/ol/source/Stamen.js';
-
-const vectorSource = new Vector({
-  attributions: 'NASA'
-});
-
-const oldColor = [180, 140, 140];
-const newColor = [255, 80, 80];
-
-const startTime = Date.now() * 0.001;
-
-// hanle input values & events
-const minYearInput = document.getElementById('min-year');
-const maxYearInput = document.getElementById('max-year');
-function updateStatusText() {
-  const div = document.getElementById('status');
-  div.querySelector('span.min-year').textContent = minYearInput.value;
-  div.querySelector('span.max-year').textContent = maxYearInput.value;
-}
-minYearInput.addEventListener('input', updateStatusText);
-minYearInput.addEventListener('change', updateStatusText);
-maxYearInput.addEventListener('input', updateStatusText);
-maxYearInput.addEventListener('change', updateStatusText);
-updateStatusText();
-
-class WebglPointsLayer extends VectorLayer {
-  createRenderer() {
-    return new WebGLPointsLayerRenderer(this, {
-      colorCallback: function(feature, color) {
-        // color is interpolated based on year
-        const ratio = clamp((feature.get('year') - 1800) / (2013 - 1800), 0, 1);
-
-        color[0] = lerp(oldColor[0], newColor[0], ratio) / 255;
-        color[1] = lerp(oldColor[1], newColor[1], ratio) / 255;
-        color[2] = lerp(oldColor[2], newColor[2], ratio) / 255;
-        color[3] = 1;
-
-        return color;
-      },
-      sizeCallback: function(feature) {
-        return 18 * clamp(feature.get('mass') / 200000, 0, 1) + 8;
-      },
-      fragmentShader: [
-        'precision mediump float;',
-
-        'uniform float u_time;',
-        'uniform float u_minYear;',
-        'uniform float u_maxYear;',
-
-        'varying vec2 v_texCoord;',
-        'varying float v_opacity;',
-        'varying vec4 v_color;',
-
-        'void main(void) {',
-        '  float impactYear = v_opacity;',
-
-        // filter out pixels if the year is outside of the given range
-        '  if (impactYear < u_minYear || v_opacity > u_maxYear) {',
-        '    discard;',
-        '  }',
-
-        '  vec2 texCoord = v_texCoord * 2.0 - vec2(1.0, 1.0);',
-        '  float sqRadius = texCoord.x * texCoord.x + texCoord.y * texCoord.y;',
-        '  float value = 2.0 * (1.0 - sqRadius);',
-        '  float alpha = smoothstep(0.0, 1.0, value);',
-
-        '  vec3 color = v_color.rgb;',
-        '  float period = 8.0;',
-        '  color.g *= 2.0 * (1.0 - sqrt(mod(u_time + impactYear * 0.025, period) / period));',
-
-        '  gl_FragColor = vec4(color, v_color.a);',
-        '  gl_FragColor.a *= alpha;',
-        '  gl_FragColor.rgb *= gl_FragColor.a;',
-        '}'
-      ].join(' '),
-      opacityCallback: function(feature) {
-        // here the opacity channel of the vertices is used to store the year of impact
-        return feature.get('year');
-      },
-      uniforms: {
-        u_time: function() {
-          return Date.now() * 0.001 - startTime;
-        },
-        u_minYear: function() {
-          return parseInt(minYearInput.value);
-        },
-        u_maxYear: function() {
-          return parseInt(maxYearInput.value);
-        }
-      }
-    });
-  }
-}
-
-
-function loadData() {
-  const client = new XMLHttpRequest();
-  client.open('GET', 'data/csv/meteorite_landings.csv');
-  client.onload = function() {
-    const csv = client.responseText;
-    const features = [];
-
-    let prevIndex = csv.indexOf('\n') + 1; // scan past the header line
-
-    let curIndex;
-    while ((curIndex = csv.indexOf('\n', prevIndex)) != -1) {
-      const line = csv.substr(prevIndex, curIndex - prevIndex).split(',');
-      prevIndex = curIndex + 1;
-
-      const coords = fromLonLat([parseFloat(line[4]), parseFloat(line[3])]);
-      if (isNaN(coords[0]) || isNaN(coords[1])) {
-        // guard against bad data
-        continue;
-      }
-
-      features.push(new Feature({
-        mass: parseFloat(line[1]) || 0,
-        year: parseInt(line[2]) || 0,
-        geometry: new Point(coords)
-      }));
-    }
-
-    vectorSource.addFeatures(features);
-  };
-  client.send();
-}
-
-loadData();
-
-const map = new Map({
-  layers: [
-    new TileLayer({
-      source: new Stamen({
-        layer: 'toner'
-      })
-    }),
-    new WebglPointsLayer({
-      source: vectorSource
-    })
-  ],
-  target: document.getElementById('map'),
-  view: new View({
-    center: [0, 0],
-    zoom: 2
-  })
-});
-
-// animate the map
-function animate() {
-  map.render();
-  window.requestAnimationFrame(animate);
-}
-animate();
--- a/examples/full-screen-drag-rotate-and-zoom.css
+++ b/examples/full-screen-drag-rotate-and-zoom.css
@@ -1,6 +1,8 @@
+.map:-moz-full-screen {
+  height: 100%;
+}
 .map:-webkit-full-screen {
  height: 100%;
-  margin: 0;
 }
 .map:-ms-fullscreen {
  height: 100%;
--- a/examples/full-screen-source.css
+++ b/examples/full-screen-source.css
@@ -1,6 +1,8 @@
+.fullscreen:-moz-full-screen {
+  height: 100%;
+}
 .fullscreen:-webkit-full-screen {
  height: 100%;
-  margin: 0;
 }
 .fullscreen:-ms-fullscreen {
  height: 100%;
--- a/examples/full-screen.css
+++ b/examples/full-screen.css
@@ -1,6 +1,8 @@
+.map:-moz-full-screen {
+  height: 100%;
+}
 .map:-webkit-full-screen {
  height: 100%;
-  margin: 0;
 }
 .map:-ms-fullscreen {
  height: 100%;
--- a/examples/geojson-vt.js
+++ b/examples/geojson-vt.js
@@ -6,7 +6,7 @@ import VectorTileSource from '../src/ol/source/VectorTile.js';
 import {Tile as TileLayer, VectorTile as VectorTileLayer} from '../src/ol/layer.js';
 import Projection from '../src/ol/proj/Projection.js';

-// Converts geojson-vt data to GeoJSON
+
 const replacer = function(key, value) {
  if (value.geometry) {
    let type;
@@ -46,6 +46,11 @@ const replacer = function(key, value) {
  }
 };

+const tilePixels = new Projection({
+  code: 'TILE_PIXELS',
+  units: 'tile-pixels'
+});
+
 const map = new Map({
  layers: [
    new TileLayer({
@@ -68,22 +73,23 @@ fetch(url).then(function(response) {
    debug: 1
  });
  const vectorSource = new VectorTileSource({
-    format: new GeoJSON({
-      // Data returned from geojson-vt is in tile pixel units
-      dataProjection: new Projection({
-        code: 'TILE_PIXELS',
-        units: 'tile-pixels',
-        extent: [0, 0, 4096, 4096]
-      })
-    }),
-    tileUrlFunction: function(tileCoord) {
+    format: new GeoJSON(),
+    tileLoadFunction: function(tile) {
+      const format = tile.getFormat();
+      const tileCoord = tile.getTileCoord();
      const data = tileIndex.getTile(tileCoord[0], tileCoord[1], tileCoord[2]);
-      const geojson = JSON.stringify({
-        type: 'FeatureCollection',
-        features: data ? data.features : []
-      }, replacer);
-      return 'data:application/json;charset=UTF-8,' + geojson;
-    }
+
+      const features = format.readFeatures(
+        JSON.stringify({
+          type: 'FeatureCollection',
+          features: data ? data.features : []
+        }, replacer));
+      tile.setLoader(function() {
+        tile.setFeatures(features);
+        tile.setProjection(tilePixels);
+      });
+    },
+    url: 'data:' // arbitrary url, we don't use it in the tileLoadFunction
  });
  const vectorLayer = new VectorTileLayer({
    source: vectorSource
--- a/examples/getfeatureinfo-image.js
+++ b/examples/getfeatureinfo-image.js
@@ -33,11 +33,8 @@ map.on('singleclick', function(evt) {
    evt.coordinate, viewResolution, 'EPSG:3857',
    {'INFO_FORMAT': 'text/html'});
  if (url) {
-    fetch(url)
-      .then((response) => response.text())
-      .then((html) => {
-        document.getElementById('info').innerHTML = html;
-      });
+    document.getElementById('info').innerHTML =
+        '<iframe seamless src="' + url + '"></iframe>';
  }
 });

--- a/examples/getfeatureinfo-tile.js
+++ b/examples/getfeatureinfo-tile.js
@@ -33,11 +33,8 @@ map.on('singleclick', function(evt) {
    evt.coordinate, viewResolution, 'EPSG:3857',
    {'INFO_FORMAT': 'text/html'});
  if (url) {
-    fetch(url)
-      .then((response) => response.text())
-      .then((html) => {
-        document.getElementById('info').innerHTML = html;
-      });
+    document.getElementById('info').innerHTML =
+        '<iframe seamless src="' + url + '"></iframe>';
  }
 });

--- a/examples/heatmap-earthquakes.html
+++ b/examples/heatmap-earthquakes.html
@@ -4,7 +4,7 @@ title: Earthquakes Heatmap
 shortdesc: Demonstrates the use of a heatmap layer.
 docs: >
  This example parses a KML file and renders the features as a <code>ol/layer/Heatmap</code> layer.
-tags: "heatmap, kml, vector, style, webgl"
+tags: "heatmap, kml, vector, style"
 ---
 <div id="map" class="map"></div>
 <form>
--- a/examples/icon-color.css
+++ b/examples/icon-color.css
@@ -0,0 +1,3 @@
+#map {
+  position: relative;
+}
--- a/examples/icon-color.js
+++ b/examples/icon-color.js
@@ -25,7 +25,7 @@ rome.setStyle(new Style({
  image: new Icon({
    color: '#8959A8',
    crossOrigin: 'anonymous',
-    src: 'data/square.svg'
+    src: 'data/dot.png'
  })
 }));

@@ -56,7 +56,7 @@ const vectorLayer = new VectorLayer({

 const rasterLayer = new TileLayer({
  source: new TileJSON({
-    url: 'https://a.tiles.mapbox.com/v3/aj.1x1-degrees.json',
+    url: 'https://api.tiles.mapbox.com/v3/mapbox.geography-class.json?secure',
    crossOrigin: ''
  })
 });
--- a/examples/icon-sprite-webgl.html
+++ b/examples/icon-sprite-webgl.html
@@ -13,9 +13,5 @@ docs: >

  The dataset contains around 80k points and can be found here: https://www.kaggle.com/NUFORC/ufo-sightings
 tags: "webgl, icon, sprite, point, ufo"
-cloak:
-  - key: pk.eyJ1IjoidHNjaGF1YiIsImEiOiJjaW5zYW5lNHkxMTNmdWttM3JyOHZtMmNtIn0.CDIBD8H-G2Gf-cPkIuWtRg
-    value: Your Mapbox access token from https://mapbox.com/ here
 ---
 <div id="map" class="map"></div>
-<div>Current sighting: <span id="info"></span></div>
--- a/examples/icon-sprite-webgl.js
+++ b/examples/icon-sprite-webgl.js
@@ -1,17 +1,16 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
 import TileLayer from '../src/ol/layer/Tile.js';
-import TileJSON from '../src/ol/source/TileJSON.js';
-import Feature from '../src/ol/Feature.js';
-import Point from '../src/ol/geom/Point.js';
-import VectorLayer from '../src/ol/layer/Vector.js';
-import {Vector} from '../src/ol/source.js';
-import {fromLonLat} from '../src/ol/proj.js';
-import WebGLPointsLayerRenderer from '../src/ol/renderer/webgl/PointsLayer.js';
-import {lerp} from '../src/ol/math.js';
-
-const key = 'pk.eyJ1IjoidHNjaGF1YiIsImEiOiJjaW5zYW5lNHkxMTNmdWttM3JyOHZtMmNtIn0.CDIBD8H-G2Gf-cPkIuWtRg';
+import TileJSON from '../src/ol/source/TileJSON';
+import Feature from '../src/ol/Feature';
+import Point from '../src/ol/geom/Point';
+import VectorLayer from '../src/ol/layer/Vector';
+import {Vector} from '../src/ol/source';
+import {fromLonLat} from '../src/ol/proj';
+import WebGLPointsLayerRenderer from '../src/ol/renderer/webgl/PointsLayer';
+import {lerp} from '../src/ol/math';

+const features = [];
 const vectorSource = new Vector({
  features: [],
  attributions: 'National UFO Reporting Center'
@@ -40,17 +39,16 @@ class WebglPointsLayer extends VectorLayer {
  createRenderer() {
    return new WebGLPointsLayerRenderer(this, {
      texture: texture,
-      colorCallback: function(feature, color) {
+      colorCallback: function(feature, vertex, component) {
+        // component at index 3 is alpha
+        if (component === 3) {
+          return 1;
+        }
+
        // color is interpolated based on year (min is 1910, max is 2013)
        // please note: most values are between 2000-2013
        const ratio = (feature.get('year') - 1950) / (2013 - 1950);
-
-        color[0] = lerp(oldColor[0], newColor[0], ratio * ratio) / 255;
-        color[1] = lerp(oldColor[1], newColor[1], ratio * ratio) / 255;
-        color[2] = lerp(oldColor[2], newColor[2], ratio * ratio) / 255;
-        color[3] = 1;
-
-        return color;
+        return lerp(oldColor[component], newColor[component], ratio * ratio) / 255;
      },
      texCoordCallback: function(feature, component) {
        let coords = shapeTextureCoords[feature.get('shape')];
@@ -72,15 +70,18 @@ function loadData() {
  client.open('GET', 'data/csv/ufo_sighting_data.csv');
  client.onload = function() {
    const csv = client.responseText;
-    const features = [];
-
-    let prevIndex = csv.indexOf('\n') + 1; // scan past the header line
-
    let curIndex;
-    while ((curIndex = csv.indexOf('\n', prevIndex)) != -1) {
-      const line = csv.substr(prevIndex, curIndex - prevIndex).split(',');
+    let prevIndex = 0;
+    let line;
+    while ((curIndex = csv.indexOf('\n', prevIndex)) > 0) {
+      line = csv.substr(prevIndex, curIndex - prevIndex).split(',');
      prevIndex = curIndex + 1;

+      // skip header
+      if (prevIndex === 0) {
+        continue;
+      }
+
      const coords = fromLonLat([parseFloat(line[5]), parseFloat(line[4])]);

      // only keep valid points
@@ -103,11 +104,11 @@ function loadData() {

 loadData();

-const map = new Map({
+new Map({
  layers: [
    new TileLayer({
      source: new TileJSON({
-        url: 'https://api.tiles.mapbox.com/v4/mapbox.world-dark.json?access_token=' + key,
+        url: 'https://api.tiles.mapbox.com/v3/mapbox.world-dark.json?secure',
        crossOrigin: 'anonymous'
      })
    }),
@@ -121,18 +122,3 @@ const map = new Map({
    zoom: 2
  })
 });
-
-const info = document.getElementById('info');
-map.on('pointermove', function(evt) {
-  if (map.getView().getInteracting()) {
-    return;
-  }
-  const pixel = evt.pixel;
-  info.innerText = '';
-  map.forEachFeatureAtPixel(pixel, function(feature) {
-    const datetime = feature.get('datetime');
-    const duration = feature.get('duration');
-    const shape = feature.get('shape');
-    info.innerText = 'On ' + datetime + ', lasted ' + duration + ' seconds and had a "' + shape + '" shape.';
-  });
-});
--- a/examples/icon.css
+++ b/examples/icon.css
@@ -0,0 +1,3 @@
+#map {
+  position: relative;
+}
--- a/examples/icon.js
+++ b/examples/icon.js
@@ -37,7 +37,7 @@ const vectorLayer = new VectorLayer({

 const rasterLayer = new TileLayer({
  source: new TileJSON({
-    url: 'https://a.tiles.mapbox.com/v3/aj.1x1-degrees.json',
+    url: 'https://api.tiles.mapbox.com/v3/mapbox.geography-class.json?secure',
    crossOrigin: ''
  })
 });
--- a/examples/iiif.html
+++ b/examples/iiif.html
@@ -1,16 +0,0 @@
---
-layout: example.html
-title: IIIF Image API
-shortdesc: Example of a IIIF Image API source.
-docs: >
-  Example of a tile source for an International Image Interoperability Framework (IIIF) Image Service.
-  Try any Image API version 1 or 2 service.
-tags: "IIIF, IIIF Image API, tile source"
---
-<div id="map" class="map"></div>
-<div class="controls">
-  <div id="iiif-notification">&nbsp;</div>
-  Enter <code>info.json</code> URL:
-  <input type="text" id="imageInfoUrl" value="https://iiif.ub.uni-leipzig.de/iiif/j2k/0000/0107/0000010732/00000072.jpx/info.json">
-  <button id="display">Display image</button>
-</div>
--- a/examples/iiif.js
+++ b/examples/iiif.js
@@ -1,46 +0,0 @@
-import Map from '../src/ol/Map.js';
-import View from '../src/ol/View.js';
-import TileLayer from '../src/ol/layer/Tile.js';
-import IIIF from '../src/ol/source/IIIF.js';
-import IIIFInfo from '../src/ol/format/IIIFInfo.js';
-
-const layer = new TileLayer(),
-    map = new Map({
-      layers: [layer],
-      target: 'map'
-    }),
-    notifyDiv = document.getElementById('iiif-notification'),
-    urlInput = document.getElementById('imageInfoUrl'),
-    displayButton = document.getElementById('display');
-
-function refreshMap(imageInfoUrl) {
-  fetch(imageInfoUrl).then(function(response) {
-    response.json().then(function(imageInfo) {
-      const options = new IIIFInfo(imageInfo).getTileSourceOptions();
-      if (options === undefined || options.version === undefined) {
-        notifyDiv.textContent = 'Data seems to be no valid IIIF image information.';
-        return;
-      }
-      options.zDirection = -1;
-      const iiifTileSource = new IIIF(options);
-      layer.setSource(iiifTileSource);
-      map.setView(new View({
-        resolutions: iiifTileSource.getTileGrid().getResolutions(),
-        extent: iiifTileSource.getTileGrid().getExtent(),
-        constrainOnlyCenter: true
-      }));
-      map.getView().fit(iiifTileSource.getTileGrid().getExtent());
-      notifyDiv.textContent = '';
-    }).catch(function(body) {
-      notifyDiv.textContent = 'Could not read image info json. ' + body;
-    });
-  }).catch(function() {
-    notifyDiv.textContent = 'Could not read data from URL.';
-  });
-}
-
-displayButton.addEventListener('click', function() {
-  refreshMap(urlInput.value);
-});
-
-refreshMap(urlInput.value);
--- a/examples/index.html
+++ b/examples/index.html
@@ -11,25 +11,9 @@
      body {
        padding-top: 70px;
      }
-      img.header-logo {
-        padding-left: 18px;
-      }
      input.search-query {
        color: #333;
      }
-      @media (max-width: 480px) {
-        input.search-query {
-          width: 110px;
-        }
-        #count {
-          display: none;
-        }
-      }
-      @media (max-width: 374px) {
-        input.search-query {
-          display: none;
-        }
-      }
      .example {
        display: block;
        padding: 10px;
@@ -198,9 +182,9 @@
  <body>

    <header class="navbar navbar-fixed-top" role="navigation">
-      <div class="container-fluid">
+      <div class="container">
        <div class="display-table pull-left">
-          <a class="navbar-brand" href="./"><img class="header-logo" src="./resources/logo-70x70.png">&nbsp;OpenLayers</a>
+          <a class="navbar-brand" href="./"><img src="./resources/logo-70x70.png">&nbsp;OpenLayers Examples</a>
          <form class="navbar-form" role="search">
            <input name="q" type="text" id="keywords" class="search-query" placeholder="Search" autofocus>
            <span id="count"></span>
--- a/examples/interaction-options.html
+++ b/examples/interaction-options.html
@@ -4,11 +4,16 @@ title: Interaction Options
 shortdesc: Shows interaction options for custom scroll and zoom behavior.
 docs: >
  This example uses a custom `ol/interaction/defaults` configuration:
-  by default, wheel/trackpad zoom and drag panning is always active, which
-  can be unexpected on pages with a lot of scrollable content and an embedded
-  map. To perform wheel/trackpad zoom and drag-pan actions only when the map
-  has the focus, set `onFocusOnly: true` as option. This requires a map div
-  with a `tabindex` attribute set.
+
+   * By default, wheel/trackpad zoom and drag panning is always active, which
+     can be unexpected on pages with a lot of scrollable content and an embedded
+     map. To perform wheel/trackpad zoom and drag-pan actions only when the map
+     has the focus, set `onFocusOnly: true` as option. This requires a map div
+     with a `tabindex` attribute set.
+   * By default, pinch-zoom and wheel/trackpad zoom interactions can leave the
+     map at fractional zoom levels. If instead you want to constrain
+     wheel/trackpad zooming to integer zoom levels, set
+     `constrainResolution: true`.
 tags: "trackpad, mousewheel, zoom, scroll, interaction, fractional"
 ---
 <div tabindex="1" id="map" class="map"></div>
--- a/examples/interaction-options.js
+++ b/examples/interaction-options.js
@@ -7,7 +7,7 @@ import OSM from '../src/ol/source/OSM.js';

 const map = new Map({
  interactions: defaultInteractions({
-    onFocusOnly: true
+    constrainResolution: true, onFocusOnly: true
  }),
  layers: [
    new TileLayer({
--- a/examples/layer-spy.js
+++ b/examples/layer-spy.js
@@ -7,7 +7,7 @@ import BingMaps from '../src/ol/source/BingMaps.js';
 const key = 'As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5';

 const roads = new TileLayer({
-  source: new BingMaps({key: key, imagerySet: 'RoadOnDemand'})
+  source: new BingMaps({key: key, imagerySet: 'Road'})
 });

 const imagery = new TileLayer({
--- a/examples/layer-zoom-limits.html
+++ b/examples/layer-zoom-limits.html
@@ -1,13 +0,0 @@
---
-layout: example.html
-title: Layer Zoom Limits
-shortdesc: Using minZoom and maxZoom to control layer visibility.
-docs: >
-  Layers support `minZoom` and `maxZoom` options for controlling visibility based on the view's zoom level.
-  If min or max zoom are set, the layer will only be visible at zoom levels greater than the `minZoom` and
-  less than or equal to the `maxZoom`.  After construction, the layer's `setMinZoom` and `setMaxZoom` can
-  be used to set limits.  This example shows an OSM layer at zoom levels 14 and lower and a USGS layer at
-  zoom levels higher than 14.
-tags: "minZoom, maxZoom, layer"
---
-<div id="map" class="map"></div>
--- a/examples/layer-zoom-limits.js
+++ b/examples/layer-zoom-limits.js
@@ -1,33 +0,0 @@
-import Map from '../src/ol/Map.js';
-import View from '../src/ol/View.js';
-import TileLayer from '../src/ol/layer/Tile.js';
-import OSM from '../src/ol/source/OSM.js';
-import XYZ from '../src/ol/source/XYZ.js';
-import {transformExtent, fromLonLat} from '../src/ol/proj.js';
-
-const mapExtent = [-112.261791, 35.983744, -112.113981, 36.132062];
-
-const map = new Map({
-  target: 'map',
-  layers: [
-    new TileLayer({
-      maxZoom: 14, // visible at zoom levels 14 and below
-      source: new OSM()
-    }),
-    new TileLayer({
-      minZoom: 14, // visible at zoom levels above 14
-      source: new XYZ({
-        attributions: 'Tiles © USGS, rendered with ' +
-        '<a href="http://www.maptiler.com/">MapTiler</a>',
-        url: 'https://tileserver.maptiler.com/grandcanyon/{z}/{x}/{y}.png'
-      })
-    })
-  ],
-  view: new View({
-    center: fromLonLat([-112.18688965, 36.057944835]),
-    zoom: 15,
-    maxZoom: 18,
-    extent: transformExtent(mapExtent, 'EPSG:4326', 'EPSG:3857'),
-    constrainOnlyCenter: true
-  })
-});
--- a/examples/mapbox-layer.html
+++ b/examples/mapbox-layer.html
@@ -3,13 +3,12 @@ layout: example.html
 title: Mapbox-gl Layer
 shortdesc: Example of a Mapbox-gl-js layer integration.
 docs: >
-  Show how to add a mapbox-gl-js layer in an openlayers map. **Note**: Make sure to get your own API key at https://www.maptiler.com/cloud/ when using this example. No map will be visible when the API key has expired.
-tags: "simple, mapbox, vector, tiles, maptiler"
+  Show how to add a mapbox-gl-js layer in an openlayers map. **Note**: Make sure to get your own Mapbox API key when using this example. No map will be visible when the API key has expired.
+tags: "simple, mapbox, vector, tiles"
 resources:
-  - https://unpkg.com/mapbox-gl@0.54.0/dist/mapbox-gl.js
-  - https://unpkg.com/mapbox-gl@0.54.0/dist/mapbox-gl.css
+  - https://unpkg.com/mapbox-gl@0.51.0/dist/mapbox-gl.js
 cloak:
-  - key: get_your_own_D6rA4zTHduk6KOKTXzGB
-    value: Get your own API key at https://www.maptiler.com/cloud/
+  - key: ER67WIiPdCQvhgsUjoWK
+    value: Your Mapbox access token from http://mapbox.com/ here
 ---
 <div id="map" class="map"></div>
--- a/examples/mapbox-layer.js
+++ b/examples/mapbox-layer.js
@@ -1,67 +1,188 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
-import Layer from '../src/ol/layer/Layer.js';
-import {toLonLat, fromLonLat} from '../src/ol/proj.js';
+import Layer from '../src/ol/layer/Layer';
+import {assign} from '../src/ol/obj';
+import {getTransform} from '../src/ol/proj';
+import SourceState from '../src/ol/source/State';
 import {Stroke, Style} from '../src/ol/style.js';
 import VectorLayer from '../src/ol/layer/Vector.js';
 import VectorSource from '../src/ol/source/Vector.js';
 import GeoJSON from '../src/ol/format/GeoJSON.js';

-const center = [-98.8, 37.9];
-const key = 'get_your_own_D6rA4zTHduk6KOKTXzGB';
+class Mapbox extends Layer {

-const mbMap = new mapboxgl.Map({
-  style: 'https://api.maptiler.com/maps/bright/style.json?key=' + key,
-  attributionControl: false,
-  boxZoom: false,
-  center: center,
-  container: 'map',
-  doubleClickZoom: false,
-  dragPan: false,
-  dragRotate: false,
-  interactive: false,
-  keyboard: false,
-  pitchWithRotate: false,
-  scrollZoom: false,
-  touchZoomRotate: false
-});
+  /**
+   * @param {import('./Base.js').Options} options Layer options.
+   */
+  constructor(options) {
+    const baseOptions = assign({}, options);
+    super(baseOptions);

-const mbLayer = new Layer({
-  render: function(frameState) {
-    const canvas = mbMap.getCanvas();
-    const viewState = frameState.viewState;
+    this.baseOptions = baseOptions;

-    const visible = mbLayer.getVisible();
-    canvas.style.display = visible ? 'block' : 'none';
+    /**
+     * @private
+     * @type boolean
+     */
+    this.loaded = false;

-    const opacity = mbLayer.getOpacity();
-    canvas.style.opacity = opacity;
+    this.initMap();
+  }

-    // adjust view parameters in mapbox
-    const rotation = viewState.rotation;
+  initMap() {
+    const map = this.map_;
+    const view = map.getView();
+    const transformToLatLng = getTransform(view.getProjection(), 'EPSG:4326');
+    const center = transformToLatLng(view.getCenter());
+
+    this.centerLastRender = view.getCenter();
+    this.zoomLastRender = view.getZoom();
+    this.centerLastRender = view.getCenter();
+    this.zoomLastRender = view.getZoom();
+
+    const options = assign(this.baseOptions, {
+      attributionControl: false,
+      boxZoom: false,
+      center,
+      container: map.getTargetElement(),
+      doubleClickZoom: false,
+      dragPan: false,
+      dragRotate: false,
+      interactive: false,
+      keyboard: false,
+      pitchWithRotate: false,
+      scrollZoom: false,
+      touchZoomRotate: false,
+      zoom: view.getZoom() - 1
+    });
+
+    this.mbmap = new mapboxgl.Map(options);
+    this.mbmap.on('load', function() {
+      this.mbmap.getCanvas().remove();
+      this.loaded = true;
+      this.map_.render();
+      [
+        'mapboxgl-control-container'
+      ].forEach(className => document.getElementsByClassName(className)[0].remove());
+    }.bind(this));
+
+    this.mbmap.on('render', function() {
+      // Reset offset
+      if (this.centerNextRender) {
+        this.centerLastRender = this.centerNextRender;
+      }
+      if (this.zoomNextRender) {
+        this.zoomLastRender = this.zoomNextRender;
+      }
+      this.updateRenderedPosition([0, 0], 1);
+    }.bind(this));
+
+  }
+
+  /**
+   *
+   * @inheritDoc
+   */
+  render(frameState) {
+    const map = this.map_;
+    const view = map.getView();
+    const transformToLatLng = getTransform(view.getProjection(), 'EPSG:4326');
+
+    this.centerNextRender = view.getCenter();
+    const lastRender = map.getPixelFromCoordinate(this.centerLastRender);
+    const nextRender = map.getPixelFromCoordinate(this.centerNextRender);
+    const centerOffset = [lastRender[0] - nextRender[0], lastRender[1] - nextRender[1]];
+    this.zoomNextRender = view.getZoom();
+    const zoomOffset = Math.pow(2, this.zoomNextRender - this.zoomLastRender);
+    this.updateRenderedPosition(centerOffset, zoomOffset);
+
+    const rotation = frameState.viewState.rotation;
    if (rotation) {
-      mbMap.rotateTo(-rotation * 180 / Math.PI, {
+      this.mbmap.rotateTo(-rotation * 180 / Math.PI, {
        animate: false
      });
    }
-    mbMap.jumpTo({
-      center: toLonLat(viewState.center),
-      zoom: viewState.zoom - 1,
-      animate: false
+
+    // Re-render mbmap
+    const center = transformToLatLng(this.centerNextRender);
+    const zoom = view.getZoom() - 1;
+    this.mbmap.jumpTo({
+      center: center,
+      zoom: zoom
    });
-
-    // cancel the scheduled update & trigger synchronous redraw
-    // see https://github.com/mapbox/mapbox-gl-js/issues/7893#issue-408992184
-    // NOTE: THIS MIGHT BREAK WHEN UPDATING MAPBOX
-    if (mbMap._frame) {
-      mbMap._frame.cancel();
-      mbMap._frame = null;
-    }
-    mbMap._render();
-
-    return canvas;
+    return this.mbmap.getCanvas();
  }
-});
+
+  updateRenderedPosition(centerOffset, zoomOffset) {
+    const style = this.mbmap.getCanvas().style;
+    style.left = Math.round(centerOffset[0]) + 'px';
+    style.top = Math.round(centerOffset[1]) + 'px';
+    style.transform = 'scale(' + zoomOffset + ')';
+  }
+
+  setVisible(visible) {
+    super.setVisible(visible);
+
+    const canvas = this.mbmap.getCanvas();
+    canvas.style.display = visible ? 'block' : 'none';
+  }
+
+  setOpacity(opacity) {
+    super.setOpacity(opacity);
+    const canvas = this.mbmap.getCanvas();
+    canvas.style.opacity = opacity;
+  }
+
+  setZIndex(zindex) {
+    super.setZIndex(zindex);
+    const canvas = this.mbmap.getCanvas();
+    canvas.style.zIndex = zindex;
+  }
+
+  /**
+   * @inheritDoc
+   */
+  getSourceState() {
+    return this.loaded ? SourceState.READY : SourceState.UNDEFINED;
+  }
+
+  setMap(map) {
+    this.map_ = map;
+  }
+
+}
+
+mapboxgl.Map.prototype._setupContainer = function _setupContainer() {
+  const container = this._container;
+  container.classList.add('mapboxgl-map');
+
+  const canvasContainer = this._canvasContainer = container.firstChild;
+
+  this._canvas = document.createElement('canvas');
+  canvasContainer.insertBefore(this._canvas, canvasContainer.firstChild);
+  this._canvas.style.position = 'absolute';
+  this._canvas.addEventListener('webglcontextlost', this._contextLost, false);
+  this._canvas.addEventListener('webglcontextrestored', this._contextRestored, false);
+  this._canvas.setAttribute('tabindex', '0');
+  this._canvas.setAttribute('aria-label', 'Map');
+  this._canvas.className = 'mapboxgl-canvas';
+
+  const dimensions = this._containerDimensions();
+  this._resizeCanvas(dimensions[0], dimensions[1]);
+
+  this._controlContainer = canvasContainer;
+  const controlContainer = this._controlContainer = document.createElement('div');
+  controlContainer.className = 'mapboxgl-control-container';
+  container.appendChild(controlContainer);
+
+  const positions = this._controlPositions = {};
+  ['top-left', 'top-right', 'bottom-left', 'bottom-right'].forEach(function(positionName) {
+    const elem = document.createElement('div');
+    elem.className = 'mapboxgl-ctrl-' + positionName;
+    controlContainer.appendChild(elem);
+    positions[positionName] = elem;
+  });
+};

 const style = new Style({
  stroke: new Stroke({
@@ -81,8 +202,17 @@ const vectorLayer = new VectorLayer({
 const map = new Map({
  target: 'map',
  view: new View({
-    center: fromLonLat(center),
+    center: [-10997148, 4569099],
    zoom: 4
-  }),
-  layers: [mbLayer, vectorLayer]
+  })
 });
+
+const key = 'ER67WIiPdCQvhgsUjoWK';
+const mbLayer = new Mapbox({
+  map: map,
+  container: map.getTarget(),
+  style: 'https://maps.tilehosting.com/styles/bright/style.json?key=' + key
+});
+
+map.addLayer(mbLayer);
+map.addLayer(vectorLayer);
--- a/examples/mapbox-style.html
+++ b/examples/mapbox-style.html
@@ -2,10 +2,10 @@
 layout: example-verbatim.html
 title: Vector tiles created from a Mapbox Style object
 shortdesc: Example of using ol-mapbox-style with tiles from tilehosting.com.
-tags: "vector tiles, mapbox style, ol-mapbox-style, maptiler"
+tags: "vector tiles, mapbox style, ol-mapbox-style"
 cloak:
-  - key: get_your_own_D6rA4zTHduk6KOKTXzGB
-    value: Get your own API key at https://www.maptiler.com/cloud/
+  - key: lirfd6Fegsjkvs0lshxe
+    value: Your API key from http://tilehosting.com/ here
 ---
 <!doctype html>
 <html lang="en">
--- a/examples/mapbox-style.js
+++ b/examples/mapbox-style.js
@@ -1,3 +1,3 @@
 import apply from 'ol-mapbox-style';

-apply('map', 'https://api.maptiler.com/maps/topo/style.json?key=get_your_own_D6rA4zTHduk6KOKTXzGB');
+apply('map', 'https://maps.tilehosting.com/styles/topo/style.json?key=ER67WIiPdCQvhgsUjoWK');
--- a/examples/mapbox-vector-tiles-advanced.html
+++ b/examples/mapbox-vector-tiles-advanced.html
@@ -8,7 +8,7 @@ tags: "mapbox, vector, tiles, mobile"
 resources:
  - resources/mapbox-streets-v6-style.js
 cloak:
-  - key: pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q
-    value: Your Mapbox access token from https://mapbox.com/ here
+  - key: pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiRk1kMWZaSSJ9.E5BkluenyWQMsBLsuByrmg
+    value: Your Mapbox access token from http://mapbox.com/ here
 ---
 <div id="map" class="map"></div>
--- a/examples/mapbox-vector-tiles-advanced.js
+++ b/examples/mapbox-vector-tiles-advanced.js
@@ -8,7 +8,7 @@ import {Fill, Icon, Stroke, Style, Text} from '../src/ol/style.js';
 import TileGrid from '../src/ol/tilegrid/TileGrid.js';


-const key = 'pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q';
+const key = 'pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiRk1kMWZaSSJ9.E5BkluenyWQMsBLsuByrmg';

 // Calculation of resolutions that match zoom levels 1, 3, 5, 7, 9, 11, 13, 15.
 const resolutions = [];
--- a/examples/mapbox-vector-tiles.html
+++ b/examples/mapbox-vector-tiles.html
@@ -8,7 +8,7 @@ tags: "simple, mapbox, vector, tiles"
 resources:
  - resources/mapbox-streets-v6-style.js
 cloak:
-  - key: pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q
-    value: Your Mapbox access token from https://mapbox.com/ here
+  - key: pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiRk1kMWZaSSJ9.E5BkluenyWQMsBLsuByrmg
+    value: Your Mapbox access token from http://mapbox.com/ here
 ---
 <div id="map" class="map"></div>
--- a/examples/mapbox-vector-tiles.js
+++ b/examples/mapbox-vector-tiles.js
@@ -6,7 +6,7 @@ import VectorTileSource from '../src/ol/source/VectorTile.js';
 import {Fill, Icon, Stroke, Style, Text} from '../src/ol/style.js';


-const key = 'pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q';
+const key = 'pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiRk1kMWZaSSJ9.E5BkluenyWQMsBLsuByrmg';

 const map = new Map({
  layers: [
--- a/examples/mapguide-untiled.js
+++ b/examples/mapguide-untiled.js
@@ -3,9 +3,9 @@ import View from '../src/ol/View.js';
 import ImageLayer from '../src/ol/layer/Image.js';
 import ImageMapGuide from '../src/ol/source/ImageMapGuide.js';

-const mdf = 'Library://Samples/Sheboygan/Maps/Sheboygan.MapDefinition';
+const mdf = 'Library://Public/Samples/Sheboygan/Maps/Sheboygan.MapDefinition';
 const agentUrl =
-    'http://138.197.230.93:8008/mapguide/mapagent/mapagent.fcgi?';
+    'http://www.buoyshark.com/mapguide/mapagent/mapagent.fcgi?';
 const bounds = [
  -87.865114442365922,
  43.665065564837931,
@@ -24,9 +24,8 @@ const map = new Map({
        params: {
          MAPDEFINITION: mdf,
          FORMAT: 'PNG',
-          VERSION: '3.0.0',
-          USERNAME: 'OLGuest',
-          PASSWORD: 'olguest'
+          USERNAME: 'OpenLayers',
+          PASSWORD: 'OpenLayers'
        },
        ratio: 2
      })
--- a/examples/measure.css
+++ b/examples/measure.css
@@ -1,4 +1,4 @@
-.ol-tooltip {
+.tooltip {
  position: relative;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 4px;
@@ -6,19 +6,18 @@
  padding: 4px 8px;
  opacity: 0.7;
  white-space: nowrap;
-  font-size: 12px;
 }
-.ol-tooltip-measure {
+.tooltip-measure {
  opacity: 1;
  font-weight: bold;
 }
-.ol-tooltip-static {
+.tooltip-static {
  background-color: #ffcc33;
  color: black;
  border: 1px solid white;
 }
-.ol-tooltip-measure:before,
-.ol-tooltip-static:before {
+.tooltip-measure:before,
+.tooltip-static:before {
  border-top: 6px solid rgba(0, 0, 0, 0.5);
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
@@ -28,6 +27,6 @@
  margin-left: -7px;
  left: 50%;
 }
-.ol-tooltip-static:before {
+.tooltip-static:before {
  border-top-color: #ffcc33;
-}
+}
--- a/examples/measure.js
+++ b/examples/measure.js
@@ -225,7 +225,7 @@ function addInteraction() {

  draw.on('drawend',
    function() {
-      measureTooltipElement.className = 'ol-tooltip ol-tooltip-static';
+      measureTooltipElement.className = 'tooltip tooltip-static';
      measureTooltip.setOffset([0, -7]);
      // unset sketch
      sketch = null;
@@ -245,7 +245,7 @@ function createHelpTooltip() {
    helpTooltipElement.parentNode.removeChild(helpTooltipElement);
  }
  helpTooltipElement = document.createElement('div');
-  helpTooltipElement.className = 'ol-tooltip hidden';
+  helpTooltipElement.className = 'tooltip hidden';
  helpTooltip = new Overlay({
    element: helpTooltipElement,
    offset: [15, 0],
@@ -263,7 +263,7 @@ function createMeasureTooltip() {
    measureTooltipElement.parentNode.removeChild(measureTooltipElement);
  }
  measureTooltipElement = document.createElement('div');
-  measureTooltipElement.className = 'ol-tooltip ol-tooltip-measure';
+  measureTooltipElement.className = 'tooltip tooltip-measure';
  measureTooltip = new Overlay({
    element: measureTooltipElement,
    offset: [0, -15],
--- a/examples/mobile-full-screen.html
+++ b/examples/mobile-full-screen.html
@@ -14,7 +14,6 @@ cloak:
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>Mobile full screen example</title>
-    <link rel="stylesheet" href="../css/ol.css" type="text/css">
    <style type="text/css">
      html, body, .map {
        margin: 0;
--- a/examples/mobile-full-screen.js
+++ b/examples/mobile-full-screen.js
@@ -15,7 +15,7 @@ const map = new Map({
    new TileLayer({
      source: new BingMaps({
        key: 'As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5',
-        imagerySet: 'RoadOnDemand'
+        imagerySet: 'Road'
      })
    })
  ],
--- a/examples/osm-vector-tiles.html
+++ b/examples/osm-vector-tiles.html
@@ -6,7 +6,7 @@ docs: >
  A simple vector tiles map with Mapzen vector tiles. This example uses the TopoJSON format's `layerName` option to determine the layer ("water", "roads", "buildings") for styling. **Note**: [`ol/format/MVT`] is an even more efficient format for vector tiles.
 tags: "vector, tiles, osm, mapzen"
 cloak:
-  - key: uZNs91nMR-muUTP99MyBSg
-    value: Your Nextzen API key from https://developers.nextzen.org/
+  - key: vector-tiles-5eJz6JX
+    value: Your Mapzen API key from https://mapzen.com/developers
 ---
 <div id="map" class="map"></div>
--- a/examples/osm-vector-tiles.js
+++ b/examples/osm-vector-tiles.js
@@ -6,7 +6,7 @@ import {fromLonLat} from '../src/ol/proj.js';
 import VectorTileSource from '../src/ol/source/VectorTile.js';
 import {Fill, Stroke, Style} from '../src/ol/style.js';

-const key = 'uZNs91nMR-muUTP99MyBSg';
+const key = 'vector-tiles-5eJz6JX';

 const roadStyleCache = {};
 const roadColor = {
@@ -67,7 +67,7 @@ const map = new Map({
          layers: ['water', 'roads', 'buildings']
        }),
        maxZoom: 19,
-        url: 'https://tile.nextzen.org/tilezen/vector/v1/all/{z}/{x}/{y}.topojson?api_key=' + key
+        url: 'https://tile.mapzen.com/mapzen/vector/v1/all/{z}/{x}/{y}.topojson?api_key=' + key
      }),
      style: function(feature, resolution) {
        switch (feature.get('layer')) {
--- a/examples/pinch-zoom.html
+++ b/examples/pinch-zoom.html
@@ -5,7 +5,7 @@ shortdesc: Restrict pinch zooming to integer zoom levels.
 docs: >
  By default, the `ol/interaction/PinchZoom` can leave the map at fractional zoom levels.
  If instead you want to constrain pinch zooming to integer zoom levels, set
-  <code>constrainResolution: true</code> when constructing the view.
+  <code>constrainResolution: true</code> when constructing the interaction.
 tags: "pinch, zoom, interaction"
 ---
 <div id="map" class="map"></div>
--- a/examples/pinch-zoom.js
+++ b/examples/pinch-zoom.js
@@ -6,8 +6,10 @@ import OSM from '../src/ol/source/OSM.js';


 const map = new Map({
-  interactions: defaultInteractions().extend([
-    new PinchZoom()
+  interactions: defaultInteractions({pinchZoom: false}).extend([
+    new PinchZoom({
+      constrainResolution: true // force zooming to a integer zoom
+    })
  ]),
  layers: [
    new TileLayer({
@@ -17,7 +19,6 @@ const map = new Map({
  target: 'map',
  view: new View({
    center: [0, 0],
-    zoom: 2,
-    constrainResolution: true
+    zoom: 2
  })
 });
--- a/examples/popup.html
+++ b/examples/popup.html
@@ -7,9 +7,6 @@ docs: >
    Click on the map to get a popup.  The popup is composed of a few basic elements: a container, a close button, and a place for the content.  To anchor the popup to the map, an <code>ol/Overlay</code> is created with the popup container.  A listener is registered for the map's <code>click</code> event to display the popup, and another listener is set as the <code>click</code> handler for the close button to hide the popup.
  </p>
 tags: "overlay, popup"
-cloak:
-  - key: pk.eyJ1IjoidHNjaGF1YiIsImEiOiJjaW5zYW5lNHkxMTNmdWttM3JyOHZtMmNtIn0.CDIBD8H-G2Gf-cPkIuWtRg
-    value: Your Mapbox access token from https://mapbox.com/ here
 ---
 <div id="map" class="map"></div>
 <div id="popup" class="ol-popup">
--- a/examples/popup.js
+++ b/examples/popup.js
@@ -6,7 +6,6 @@ import TileLayer from '../src/ol/layer/Tile.js';
 import {toLonLat} from '../src/ol/proj.js';
 import TileJSON from '../src/ol/source/TileJSON.js';

-const key = 'pk.eyJ1IjoidHNjaGF1YiIsImEiOiJjaW5zYW5lNHkxMTNmdWttM3JyOHZtMmNtIn0.CDIBD8H-G2Gf-cPkIuWtRg';

 /**
 * Elements that make up the popup.
@@ -46,7 +45,7 @@ const map = new Map({
  layers: [
    new TileLayer({
      source: new TileJSON({
-        url: 'https://api.tiles.mapbox.com/v4/mapbox.natural-earth-hypso-bathy.json?access_token=' + key,
+        url: 'https://api.tiles.mapbox.com/v3/mapbox.natural-earth-hypso-bathy.json?secure',
        crossOrigin: 'anonymous'
      })
    })
--- a/examples/preload.js
+++ b/examples/preload.js
@@ -29,7 +29,7 @@ const map2 = new Map({
      preload: 0, // default value
      source: new BingMaps({
        key: 'As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5',
-        imagerySet: 'AerialWithLabelsOnDemand'
+        imagerySet: 'AerialWithLabels'
      })
    })
  ],
--- a/examples/resources/common.js
+++ b/examples/resources/common.js
@@ -38,9 +38,6 @@
          },
          "package.json": {
            content: pkgJson
-          },
-          'sandbox.config.json': {
-            content: '{"template": "parcel"}'
          }
        }
      });
--- a/examples/sea-level.html
+++ b/examples/sea-level.html
@@ -11,7 +11,7 @@ docs: >
 tags: "raster, pixel operation, flood"
 cloak:
  - key: pk.eyJ1IjoidHNjaGF1YiIsImEiOiJjaW5zYW5lNHkxMTNmdWttM3JyOHZtMmNtIn0.CDIBD8H-G2Gf-cPkIuWtRg
-    value: Your Mapbox access token from https://mapbox.com/ here
+    value: Your Mapbox access token from http://mapbox.com/ here
 ---
 <div id="map" class="map"></div>
 <label>
--- a/examples/sea-level.js
+++ b/examples/sea-level.js
@@ -24,7 +24,8 @@ function flood(pixels, data) {
 const key = 'pk.eyJ1IjoidHNjaGF1YiIsImEiOiJjaW5zYW5lNHkxMTNmdWttM3JyOHZtMmNtIn0.CDIBD8H-G2Gf-cPkIuWtRg';
 const elevation = new XYZ({
  url: 'https://api.mapbox.com/v4/mapbox.terrain-rgb/{z}/{x}/{y}.pngraw?access_token=' + key,
-  crossOrigin: 'anonymous'
+  crossOrigin: 'anonymous',
+  transition: 0
 });

 const raster = new RasterSource({
--- a/examples/shaded-relief.js
+++ b/examples/shaded-relief.js
@@ -100,7 +100,8 @@ function shade(inputs, data) {

 const elevation = new XYZ({
  url: 'https://{a-d}.tiles.mapbox.com/v3/aj.sf-dem/{z}/{x}/{y}.png',
-  crossOrigin: 'anonymous'
+  crossOrigin: 'anonymous',
+  transition: 0
 });

 const raster = new Raster({
--- a/examples/side-by-side.css
+++ b/examples/side-by-side.css
@@ -1,10 +0,0 @@
-@media (min-width: 800px) {
-  .wrapper {
-    display: flex;
-  }
-  .half {
-    padding: 0 10px;
-    width: 50%;
-    float: left;
-  }
-}
--- a/examples/side-by-side.html
+++ b/examples/side-by-side.html
@@ -1,21 +0,0 @@
---
-layout: example.html
-title: Shared Views
-shortdesc: Two maps share view properties
-docs: >
-  Two maps (one Road, one Aerial) share the same center, resolution and rotation.
-tags: "side-by-side, bing, bing-maps"
-cloak:
-  - key: As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5
-    value: Your Bing Maps Key from http://www.bingmapsportal.com/ here
---
-<div class="wrapper">
-  <div class="half">
-    <h4>Road</h4>
-    <div id="roadMap" class="map"></div>
-  </div>
-  <div class="half">
-    <h4>Aerial</h4>
-    <div id="aerialMap" class="map"></div>
-  </div>
-</div>
--- a/examples/side-by-side.js
+++ b/examples/side-by-side.js
@@ -1,37 +0,0 @@
-import Map from '../src/ol/Map.js';
-import View from '../src/ol/View.js';
-import TileLayer from '../src/ol/layer/Tile.js';
-import BingMaps from '../src/ol/source/BingMaps.js';
-
-const roadLayer = new TileLayer({
-  source: new BingMaps({
-    key: 'As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5',
-    imagerySet: 'RoadOnDemand',
-    maxZoom: 19
-  })
-});
-
-const aerialLayer = new TileLayer({
-  source: new BingMaps({
-    key: 'As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5',
-    imagerySet: 'Aerial',
-    maxZoom: 19
-  })
-});
-
-const view = new View({
-  center: [-6655.5402445057125, 6709968.258934638],
-  zoom: 13
-});
-
-const map1 = new Map({
-  target: 'roadMap',
-  layers: [roadLayer],
-  view: view
-});
-
-const map2 = new Map({
-  target: 'aerialMap',
-  layers: [aerialLayer],
-  view: view
-});
--- a/examples/templates/example.html
+++ b/examples/templates/example.html
@@ -78,7 +78,7 @@
    <header class="navbar" role="navigation">
      <div class="container">
        <div class="display-table pull-left" id="navbar-logo-container">
-          <a class="navbar-brand" href="./"><img src="./resources/logo-70x70.png">&nbsp;OpenLayers</a>
+          <a class="navbar-brand" href="./"><img src="./resources/logo-70x70.png">&nbsp;OpenLayers Examples</a>
        </div>
        <!-- menu items that get hidden below 768px width -->
        <nav class='collapse navbar-collapse navbar-responsive-collapse'>
@@ -122,18 +122,14 @@
          <a class="copy-button" id="copy-html-button" data-clipboard-target="#example-html-source"><i class="fa fa-clipboard"></i> Copy</a>
        </div>
        <pre><legend>index.html</legend><code id="example-html-source" class="language-markup">&lt;!DOCTYPE html&gt;
-&lt;html lang="en"&gt;
+&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;{{ title }}&lt;/title&gt;
    &lt;!-- The line below is only needed for old environments like Internet Explorer and Android 4.x --&gt;
    &lt;script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"&gt;&lt;/script&gt;{{#if extraHead.remote}}
-{{ indent extraHead.remote spaces=4 }}{{/if}}
+{{ indent extraHead.remote spaces=4 }}{{/if}}{{#if css.source}}
    &lt;style&gt;
-      .map {
-        width: 100%;
-        height:400px;
-      }
-{{#if css.source}}{{ indent css.source spaces=6 }}{{/if}}    &lt;/style&gt;
+{{ indent css.source spaces=6 }}    &lt;/style&gt;{{/if}}
  &lt;/head&gt;
  &lt;body&gt;
 {{ indent contents spaces=4 }}    &lt;script src="index.js"&gt;&lt;/script&gt;
--- a/examples/tilejson.js
+++ b/examples/tilejson.js
@@ -8,7 +8,7 @@ const map = new Map({
  layers: [
    new TileLayer({
      source: new TileJSON({
-        url: 'https://a.tiles.mapbox.com/v3/aj.1x1-degrees.json',
+        url: 'https://api.tiles.mapbox.com/v3/mapbox.geography-class.json?secure',
        crossOrigin: 'anonymous'
      })
    })
--- a/examples/utfgrid.html
+++ b/examples/utfgrid.html
@@ -4,11 +4,11 @@ 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 <a href="http://tilemill.com">TileMill</a>. Hosting on <a href="mapbox.com">mapbox.com</a> or with open-source <a href="https://github.com/klokantech/tileserver-php/">TileServer</a>.
+  Tiles made with [TileMill](http://tilemill.com). Hosting on MapBox.com or with open-source [TileServer](https://github.com/klokantech/tileserver-php/).
 tags: "utfgrid, tilejson"
 cloak:
-  - key: pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q
-    value: Your Mapbox access token from https://mapbox.com/ here
+  - key: pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiRk1kMWZaSSJ9.E5BkluenyWQMsBLsuByrmg
+    value: Your Mapbox access token from http://mapbox.com/ here
 ---
 <div id="map" class="map"></div>
 <div style="display: none;">
--- a/examples/utfgrid.js
+++ b/examples/utfgrid.js
@@ -5,7 +5,7 @@ import TileLayer from '../src/ol/layer/Tile.js';
 import TileJSON from '../src/ol/source/TileJSON.js';
 import UTFGrid from '../src/ol/source/UTFGrid.js';

-const key = 'pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q';
+const key = 'pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiRk1kMWZaSSJ9.E5BkluenyWQMsBLsuByrmg';

 const mapLayer = new TileLayer({
  source: new TileJSON({
--- a/examples/vector-labels.html
+++ b/examples/vector-labels.html
@@ -103,9 +103,6 @@ tags: "geojson, vector, openstreetmap, label"
    <label>Size: </label>
    <input type="text" value="12px" id="points-size" />
    <br />
-    <label>Line height: </label>
-    <input type="text" value="1" id="points-height" />
-    <br />
    <label>Offset X:</label>
    <input type="text" value="0" id="points-offset-x" />
    <br />
@@ -215,9 +212,6 @@ tags: "geojson, vector, openstreetmap, label"
    <label>Size: </label>
    <input type="text" value="12px" id="lines-size" />
    <br />
-    <label>Line height: </label>
-    <input type="text" value="1.2" id="lines-height" />
-    <br />
    <label>Offset X:</label>
    <input type="text" value="0" id="lines-offset-x" />
    <br />
@@ -327,9 +321,6 @@ tags: "geojson, vector, openstreetmap, label"
    <label>Size: </label>
    <input type="text" value="10px" id="polygons-size" />
    <br />
-    <label>Line height: </label>
-    <input type="text" value="1" id="polygons-height" />
-    <br />
    <label>Offset X:</label>
    <input type="text" value="0" id="polygons-offset-x" />
    <br />
--- a/examples/vector-labels.js
+++ b/examples/vector-labels.js
@@ -16,7 +16,6 @@ const myDom = {
    font: document.getElementById('points-font'),
    weight: document.getElementById('points-weight'),
    size: document.getElementById('points-size'),
-    height: document.getElementById('points-height'),
    offsetX: document.getElementById('points-offset-x'),
    offsetY: document.getElementById('points-offset-y'),
    color: document.getElementById('points-color'),
@@ -35,7 +34,6 @@ const myDom = {
    maxangle: document.getElementById('lines-maxangle'),
    overflow: document.getElementById('lines-overflow'),
    size: document.getElementById('lines-size'),
-    height: document.getElementById('lines-height'),
    offsetX: document.getElementById('lines-offset-x'),
    offsetY: document.getElementById('lines-offset-y'),
    color: document.getElementById('lines-color'),
@@ -54,7 +52,6 @@ const myDom = {
    maxangle: document.getElementById('polygons-maxangle'),
    overflow: document.getElementById('polygons-overflow'),
    size: document.getElementById('polygons-size'),
-    height: document.getElementById('polygons-height'),
    offsetX: document.getElementById('polygons-offset-x'),
    offsetY: document.getElementById('polygons-offset-y'),
    color: document.getElementById('polygons-color'),
@@ -87,7 +84,6 @@ const createTextStyle = function(feature, resolution, dom) {
  const align = dom.align.value;
  const baseline = dom.baseline.value;
  const size = dom.size.value;
-  const height = dom.height.value;
  const offsetX = parseInt(dom.offsetX.value, 10);
  const offsetY = parseInt(dom.offsetY.value, 10);
  const weight = dom.weight.value;
@@ -102,7 +98,7 @@ const createTextStyle = function(feature, resolution, dom) {
    document.getElementsByTagName('head')[0].appendChild(openSans);
    openSansAdded = true;
  }
-  const font = weight + ' ' + size + '/' + height + ' ' + dom.font.value;
+  const font = weight + ' ' + size + ' ' + dom.font.value;
  const fillColor = dom.color.value;
  const outlineColor = dom.outline.value;
  const outlineWidth = parseInt(dom.outlineWidth.value, 10);
--- a/examples/webpack/config.js
+++ b/examples/webpack/config.js
@@ -19,25 +19,16 @@ module.exports = {
  context: src,
  target: 'web',
  entry: entry,
-  stats: 'minimal',
  module: {
    rules: [{
-      test: /\.js$/,
      use: {
        loader: 'buble-loader'
      },
+      test: /\.js$/,
      include: [
        path.join(__dirname, '..', '..', 'src'),
        path.join(__dirname, '..')
      ]
-    }, {
-      test: /\.js$/,
-      use: {
-        loader: path.join(__dirname, './worker-loader.js')
-      },
-      include: [
-        path.join(__dirname, '../../src/ol/worker')
-      ]
    }]
  },
  optimization: {
--- a/Show More
+++ b/Show More