Update package version to 6.0.0-beta.6

2019-04-17 18:24:29 -07:00
204 changed files with 2041 additions and 16212 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/changelog/upgrade-notes.md
+++ b/changelog/upgrade-notes.md
@@ -4,38 +4,6 @@

 #### 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.
@@ -64,9 +32,9 @@ Previously, this options only constrained the view *center*. This behaviour can

 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
+##### Zoom 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`.
+Previously, maps showed multiple worlds at low zoom levels. Now, the view is restricted to show only one world. To get the previous behavior, configure the `ol/View` with `multiWorld: true`.

 ##### Removal of deprecated methods

@@ -130,14 +98,6 @@ If you were previously using `VectorTile` layers with `renderMode: 'vector'`, yo

 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.
--- 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
@@ -59,9 +59,7 @@ function includeAugments(doclet) {
          });
        }
        cls._hideConstructor = true;
-        if (!cls.undocumented) {
-          cls._documented = true;
-        }
+        delete cls.undocumented;
      }
    }
  }
@@ -152,9 +150,6 @@ exports.handlers = {
        // 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/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/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/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/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()
@@ -52,21 +51,21 @@ const zoomtoswitzerland =
    document.getElementById('zoomtoswitzerland');
 zoomtoswitzerland.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]});
 }, 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/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/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/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() {
@@ -68,14 +57,15 @@ exportButton.addEventListener('click', function() {
  const extent = map.getView().calculateExtent(size);

  map.once('rendercomplete', function() {
-    toJpeg(map.getTargetElement(), 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().fit(extent, {
-        size: size
+        size: size,
+        constrainResolution: false
      });
      exportButton.disabled = false;
      document.body.style.cursor = 'auto';
--- a/examples/extent-constrained.js
+++ b/examples/extent-constrained.js
@@ -2,8 +2,8 @@ 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';
+import {defaults as defaultControls} from '../src/ol/control/util';
+import ZoomSlider from '../src/ol/control/ZoomSlider';

 const view = new View({
  center: [328627.563458, 5921296.662223],
--- 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-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])
@@ -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.js
+++ b/examples/filter-points-webgl.js
@@ -1,16 +1,18 @@
 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';
+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 {clamp, lerp} from '../src/ol/math';
+import Stamen from '../src/ol/source/Stamen';

+const features = [];
 const vectorSource = new Vector({
+  features: [],
  attributions: 'NASA'
 });

@@ -36,16 +38,15 @@ updateStatusText();
 class WebglPointsLayer extends VectorLayer {
  createRenderer() {
    return new WebGLPointsLayerRenderer(this, {
-      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
        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;
+        return lerp(oldColor[component], newColor[component], ratio) / 255;
      },
      sizeCallback: function(feature) {
        return 18 * clamp(feature.get('mass') / 200000, 0, 1) + 8;
@@ -108,28 +109,26 @@ function loadData() {
  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(',');
+    let prevIndex = 0;
+    let line;
+    while ((curIndex = csv.indexOf('\n', prevIndex)) > 0) {
+      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
+      // skip header
+      if (prevIndex === 0) {
        continue;
      }

+      const coords = fromLonLat([parseFloat(line[4]), parseFloat(line[3])]);
+
      features.push(new Feature({
        mass: parseFloat(line[1]) || 0,
        year: parseInt(line[2]) || 0,
        geometry: new Point(coords)
      }));
    }
-
    vectorSource.addFeatures(features);
  };
  client.send();
--- a/examples/full-screen-drag-rotate-and-zoom.css
+++ b/examples/full-screen-drag-rotate-and-zoom.css
@@ -1,6 +1,5 @@
 .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,5 @@
 .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,5 @@
 .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/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.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,8 +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>
--- 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
@@ -107,7 +108,7 @@ 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'
      })
    }),
--- 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/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: ER67WIiPdCQvhgsUjoWK
-    value: Get your own API key at https://www.maptiler.com/cloud/
+    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 = 'ER67WIiPdCQvhgsUjoWK';
+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,21 @@ const vectorLayer = new VectorLayer({
 const map = new Map({
  target: 'map',
  view: new View({
-    center: fromLonLat(center),
-    zoom: 4
-  }),
-  layers: [mbLayer, vectorLayer]
+    center: [-10997148, 4569099],
+    zoom: 4,
+    minZoom: 1,
+    extent: [-Infinity, -20048966.10, Infinity, 20048966.10],
+    smoothExtentConstraint: false,
+    smoothResolutionConstraint: false
+  })
 });
+
+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: ER67WIiPdCQvhgsUjoWK
-    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=ER67WIiPdCQvhgsUjoWK');
+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
@@ -9,6 +9,6 @@ resources:
  - resources/mapbox-streets-v6-style.js
 cloak:
  - key: pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q
-    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>
--- a/examples/mapbox-vector-tiles.html
+++ b/examples/mapbox-vector-tiles.html
@@ -9,6 +9,6 @@ resources:
  - resources/mapbox-streets-v6-style.js
 cloak:
  - key: pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q
-    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>
--- 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/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/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/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,7 +122,7 @@
          <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;
--- 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
+    value: Your Mapbox access token from http://mapbox.com/ here
 ---
 <div id="map" class="map"></div>
 <div style="display: none;">
--- 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/examples/webpack/worker-loader.js
+++ b/examples/webpack/worker-loader.js
@@ -1,17 +0,0 @@
-const build = require('../../tasks/serialize-workers').build;
-
-function loader() {
-  const callback = this.async();
-  const minify = this.mode === 'production';
-
-  build(this.resource, {minify})
-    .then(chunk => {
-      for (const filePath in chunk.modules) {
-        this.addDependency(filePath);
-      }
-      callback(null, chunk.code);
-    })
-    .catch(callback);
-}
-
-module.exports = loader;
--- a/examples/wms-time.js
+++ b/examples/wms-time.js
@@ -46,7 +46,7 @@ function updateInfo() {

 function setTime() {
  startDate.setMinutes(startDate.getMinutes() + 15);
-  if (startDate > new Date()) {
+  if (startDate > Date.now()) {
    startDate = threeHoursAgo();
  }
  layers[1].getSource().updateParams({'TIME': startDate.toISOString()});
--- a/examples/worker.html
+++ b/examples/worker.html
@@ -1,10 +0,0 @@
---
-layout: example.html
-title: Worker
-shortdesc: This example should be deleted.
-docs: >
-  When you move the map, a message is sent to a worker.  In response, the woker sends a
-  message back with the version identifier.
-tags: "worker"
---
-<div id="map" class="map"></div>
--- a/examples/worker.js
+++ b/examples/worker.js
@@ -1,35 +0,0 @@
-/* eslint-disable no-console */
-
-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 {create as createVersionWorker} from '../src/ol/worker/version.js';
-
-
-const map = new Map({
-  layers: [
-    new TileLayer({
-      source: new OSM()
-    })
-  ],
-  target: 'map',
-  view: new View({
-    center: [0, 0],
-    zoom: 2
-  })
-});
-
-const worker = createVersionWorker();
-worker.addEventListener('error', function(error) {
-  console.error('worker error', error);
-});
-
-worker.addEventListener('message', function(event) {
-  console.log('message from worker:', event.data);
-});
-
-map.on('moveend', function(event) {
-  const state = event.frameState.viewState;
-  worker.postMessage({zoom: state.zoom, center: state.center});
-});
--- a/examples/zoomify.html
+++ b/examples/zoomify.html
@@ -11,6 +11,5 @@ tags: "zoomify, deep zoom, IIP, pixel, projection"
  <select id="zoomifyProtocol">
    <option value="zoomify">Zoomify</option>
    <option value="iip">IIP</option>
-    <option value="zoomifyretina">Zoomify Retina</option>
  </select>
 </div>
--- a/examples/zoomify.js
+++ b/examples/zoomify.js
@@ -12,8 +12,6 @@ const iipUrl = 'http://vips.vtech.fr/cgi-bin/iipsrv.fcgi?FIF=' + '/mnt/MD1/AD00/

 const layer = new TileLayer({
  source: new Zoomify({
-    tileSize: 256,
-    tilePixelRatio: 1,
    url: zoomifyUrl,
    size: [imgWidth, imgHeight],
    crossOrigin: 'anonymous'
@@ -22,15 +20,12 @@ const layer = new TileLayer({

 const extent = [0, -imgHeight, imgWidth, 0];

-const resolutions = layer.getSource().getTileGrid().getResolutions();
-
 const map = new Map({
  layers: [layer],
  target: 'map',
  view: new View({
    // adjust zoom levels to those provided by the source
-    minResolution: resolutions[resolutions.length - 1],
-    maxResolution: resolutions[0],
+    resolutions: layer.getSource().getTileGrid().getResolutions(),
    // constrain the center: center cannot be set outside this extent
    extent: extent
  })
@@ -41,73 +36,17 @@ const control = document.getElementById('zoomifyProtocol');
 control.addEventListener('change', function(event) {
  const value = event.currentTarget.value;
  if (value === 'iip') {
-    const extent = [0, -imgHeight, imgWidth, 0];
-    layer.setSource(
-      new Zoomify({
-        tileSize: 256,
-        tilePixelRatio: 1,
-        url: iipUrl,
-        size: [imgWidth, imgHeight],
-        crossOrigin: 'anonymous'
-      })
-    );
-    const resolutions = layer.getSource().getTileGrid().getResolutions();
-    map.setView(
-      new View({
-        // adjust zoom levels to those provided by the source
-        minResolution: resolutions[resolutions.length - 1],
-        maxResolution: resolutions[0],
-        // constrain the center: center cannot be set outside this extent
-        extent: extent
-      })
-    );
-    map.getView().fit(extent);
+    layer.setSource(new Zoomify({
+      url: iipUrl,
+      size: [imgWidth, imgHeight],
+      crossOrigin: 'anonymous'
+    }));
  } else if (value === 'zoomify') {
-    const extent = [0, -imgHeight, imgWidth, 0];
-    layer.setSource(
-      new Zoomify({
-        tileSize: 256,
-        tilePixelRatio: 1,
-        url: zoomifyUrl,
-        size: [imgWidth, imgHeight],
-        crossOrigin: 'anonymous'
-      })
-    );
-    const resolutions = layer.getSource().getTileGrid().getResolutions();
-    map.setView(
-      new View({
-        // adjust zoom levels to those provided by the source
-        minResolution: resolutions[resolutions.length - 1],
-        maxResolution: resolutions[0],
-        // constrain the center: center cannot be set outside this extent
-        extent: extent
-      })
-    );
-    map.getView().fit(extent);
-  } else if (value === 'zoomifyretina') {
-    const pixelRatio = 4;
-    // Be careful! Image extent will be modified by pixel ratio
-    const extent = [0, -imgHeight / pixelRatio, imgWidth / pixelRatio, 0];
-    layer.setSource(
-      new Zoomify({
-        tileSize: 256 / pixelRatio,
-        tilePixelRatio: pixelRatio,
-        url: zoomifyUrl,
-        size: [imgWidth / pixelRatio, imgHeight / pixelRatio],
-        crossOrigin: 'anonymous'
-      })
-    );
-    const resolutions = layer.getSource().getTileGrid().getResolutions();
-    map.setView(
-      new View({
-        // adjust zoom levels to those provided by the source
-        minResolution: resolutions[resolutions.length - 1] / pixelRatio,
-        maxResolution: resolutions[0],
-        // constrain the center: center cannot be set outside this extent
-        extent: extent
-      })
-    );
-    map.getView().fit(extent);
+    layer.setSource(new Zoomify({
+      url: zoomifyUrl,
+      size: [imgWidth, imgHeight],
+      crossOrigin: 'anonymous'
+    }));
  }

 });
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "ol",
-  "version": "6.0.0-beta.11",
+  "version": "6.0.0-beta.6",
  "description": "OpenLayers mapping library",
  "keywords": [
    "map",
@@ -22,9 +22,9 @@
    "build-index": "npm run build-package && node tasks/generate-index",
    "build-legacy": "shx rm -rf build && npm run build-index && webpack --config config/webpack-config-legacy-build.js && cleancss --source-map src/ol/ol.css -o build/legacy/ol.css",
    "copy-css": "shx cp src/ol/ol.css build/ol/ol.css",
-    "transpile": "shx rm -rf build/ol && shx mkdir -p build/ol && shx cp -rf src/ol build/ol/src && node tasks/serialize-workers && tsc --project config/tsconfig-build.json",
+    "transpile": "shx rm -rf build/ol && shx mkdir -p build/ol && shx cp -rf src/ol build/ol/src && tsc --project config/tsconfig-build.json",
    "typecheck": "tsc --pretty",
-    "apidoc": "jsdoc -R config/jsdoc/api/index.md -c config/jsdoc/api/conf.json -P package.json -d build/apidoc"
+    "apidoc": "jsdoc config/jsdoc/api/index.md -c config/jsdoc/api/conf.json -P package.json -d build/apidoc"
  },
  "main": "index.js",
  "repository": {
@@ -38,67 +38,57 @@
  "dependencies": {
    "pbf": "3.2.0",
    "pixelworks": "1.1.0",
-    "rbush": "^3.0.0"
+    "rbush": "2.0.2"
  },
  "devDependencies": {
-    "@babel/core": "^7.4.0",
-    "@babel/preset-env": "^7.4.4",
    "@openlayers/eslint-plugin": "^4.0.0-beta.2",
    "@types/arcgis-rest-api": "^10.4.4",
    "@types/geojson": "^7946.0.7",
    "@types/pbf": "^3.0.1",
+    "@types/rbush": "^2.0.2",
    "@types/topojson-specification": "^1.0.1",
-    "babel-loader": "^8.0.5",
    "buble": "^0.19.7",
    "buble-loader": "^0.5.1",
    "chaikin-smooth": "^1.0.4",
    "clean-css-cli": "4.3.0",
-    "copy-webpack-plugin": "^5.0.3",
-    "coveralls": "3.0.4",
-    "eslint": "^6.0.0",
-    "eslint-config-openlayers": "^12.0.0",
+    "copy-webpack-plugin": "^5.0.2",
+    "coveralls": "3.0.3",
+    "eslint": "^5.16.0",
+    "eslint-config-openlayers": "^11.0.0",
    "expect.js": "0.3.1",
-    "front-matter": "^3.0.2",
-    "fs-extra": "^8.0.0",
-    "glob": "^7.1.4",
+    "front-matter": "^3.0.1",
+    "fs-extra": "^7.0.1",
+    "glob": "^7.1.2",
    "globby": "^9.2.0",
    "handlebars": "4.1.2",
-    "html-to-image": "^0.1.0",
    "istanbul": "0.4.5",
-    "istanbul-instrumenter-loader": "^3.0.1",
-    "jquery": "3.4.1",
-    "jsdoc": "3.6.2",
-    "jsdoc-plugin-typescript": "^2.0.1",
-    "karma": "^4.1.0",
+    "jquery": "3.4.0",
+    "jsdoc": "3.5.5",
+    "jsdoc-plugin-typescript": "^1.0.7",
+    "karma": "^4.0.1",
    "karma-chrome-launcher": "2.2.0",
    "karma-coverage": "^1.1.2",
-    "karma-coverage-istanbul-reporter": "^2.0.5",
    "karma-firefox-launcher": "^1.1.0",
    "karma-mocha": "1.3.0",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-webpack": "^4.0.0-rc.2",
-    "loglevelnext": "^3.0.1",
+    "loglevelnext": "^3.0.0",
    "marked": "0.6.2",
-    "mocha": "6.1.4",
-    "ol-mapbox-style": "^5.0.0-beta.2",
-    "pixelmatch": "^5.0.0",
+    "mocha": "6.1.3",
+    "ol-mapbox-style": "^4.3.1",
+    "pixelmatch": "^4.0.2",
    "pngjs": "^3.4.0",
    "proj4": "2.5.0",
-    "puppeteer": "~1.18.0",
-    "rollup": "^1.12.0",
-    "rollup-plugin-babel": "^4.3.2",
-    "rollup-plugin-commonjs": "^10.0.0",
-    "rollup-plugin-node-resolve": "^5.0.0",
-    "rollup-plugin-terser": "^5.0.0",
-    "serve-static": "^1.14.0",
+    "puppeteer": "~1.14.0",
+    "serve-static": "^1.13.2",
    "shx": "^0.3.2",
-    "sinon": "^7.3.2",
+    "sinon": "^7.3.1",
    "terser-webpack-plugin": "^1.2.3",
-    "typescript": "^3.4.5",
+    "typescript": "^3.2.2",
    "url-polyfill": "^1.1.5",
    "walk": "^2.3.9",
-    "webpack": "4.35.0",
-    "webpack-cli": "^3.3.2",
+    "webpack": "4.30.0",
+    "webpack-cli": "^3.3.0",
    "webpack-dev-middleware": "^3.6.2",
    "webpack-dev-server": "^3.3.1",
    "yargs": "^13.2.2"
--- a/rendering/cases/heatmap-layer/main.js
+++ b/rendering/cases/heatmap-layer/main.js
@@ -1,10 +1,10 @@
 import Map from '../../../src/ol/Map.js';
 import View from '../../../src/ol/View.js';
 import TileLayer from '../../../src/ol/layer/Tile.js';
-import XYZ from '../../../src/ol/source/XYZ.js';
-import {Heatmap as HeatmapLayer} from '../../../src/ol/layer.js';
-import VectorSource from '../../../src/ol/source/Vector.js';
-import KML from '../../../src/ol/format/KML.js';
+import XYZ from '../../../src/ol/source/XYZ';
+import {Heatmap as HeatmapLayer} from '../../../src/ol/layer';
+import VectorSource from '../../../src/ol/source/Vector';
+import KML from '../../../src/ol/format/KML';

 const vector = new HeatmapLayer({
  source: new VectorSource({
--- a/rendering/cases/layer-group/expected.png
+++ b/rendering/cases/layer-group/expected.png
--- a/rendering/cases/layer-group/main.js
+++ b/rendering/cases/layer-group/main.js
@@ -1,30 +0,0 @@
-import Map from '../../../src/ol/Map.js';
-import View from '../../../src/ol/View.js';
-import {Group as LayerGroup, Tile as TileLayer} from '../../../src/ol/layer.js';
-import XYZ from '../../../src/ol/source/XYZ.js';
-
-new Map({
-  target: 'map',
-  view: new View({
-    center: [0, 0],
-    zoom: 3
-  }),
-  layers: new LayerGroup({
-    opacity: 0.75,
-    layers: [
-      new TileLayer({
-        opacity: 0.25,
-        source: new XYZ({
-          url: '/data/tiles/satellite/{z}/{x}/{y}.jpg'
-        })
-      }),
-      new TileLayer({
-        source: new XYZ({
-          url: '/data/tiles/stamen-labels/{z}/{x}/{y}.png'
-        })
-      })
-    ]
-  })
-});
-
-render();
--- a/rendering/cases/layer-image/main.js
+++ b/rendering/cases/layer-image/main.js
@@ -5,7 +5,7 @@ import {
  get as getProjection,
  transform,
  transformExtent
-} from '../../../src/ol/proj.js';
+} from '../../../src/ol/proj';
 import ImageLayer from '../../../src/ol/layer/Image.js';
 const center = transform([-122.416667, 37.783333], 'EPSG:4326', 'EPSG:3857');

--- a/rendering/cases/layer-tile-extent/main.js
+++ b/rendering/cases/layer-tile-extent/main.js
@@ -5,9 +5,9 @@
 import Map from '../../../src/ol/Map.js';
 import View from '../../../src/ol/View.js';
 import TileLayer from '../../../src/ol/layer/Tile.js';
-import {fromLonLat} from '../../../src/ol/proj.js';
+import {fromLonLat} from '../../../src/ol/proj';
 import {transformExtent} from '../../../src/ol/proj.js';
-import XYZ from '../../../src/ol/source/XYZ.js';
+import XYZ from '../../../src/ol/source/XYZ';

 const center = fromLonLat([7, 50]);
 const extent = transformExtent([2, 47, 10, 53], 'EPSG:4326', 'EPSG:3857');
--- a/rendering/cases/layer-tile-none-square/main.js
+++ b/rendering/cases/layer-tile-none-square/main.js
@@ -1,7 +1,7 @@
 import Map from '../../../src/ol/Map.js';
 import View from '../../../src/ol/View.js';
 import TileLayer from '../../../src/ol/layer/Tile.js';
-import XYZ from '../../../src/ol/source/XYZ.js';
+import XYZ from '../../../src/ol/source/XYZ';
 import {createXYZ} from '../../../src/ol/tilegrid.js';

 const center = [-10997148, 4569099];
--- a/rendering/cases/layer-tile-opacity/main.js
+++ b/rendering/cases/layer-tile-opacity/main.js
@@ -1,8 +1,8 @@
 import Map from '../../../src/ol/Map.js';
 import View from '../../../src/ol/View.js';
 import TileLayer from '../../../src/ol/layer/Tile.js';
-import {fromLonLat} from '../../../src/ol/proj.js';
-import XYZ from '../../../src/ol/source/XYZ.js';
+import {fromLonLat} from '../../../src/ol/proj';
+import XYZ from '../../../src/ol/source/XYZ';

 const center = fromLonLat([8.6, 50.1]);

--- a/rendering/cases/layer-tile-simple/main.js
+++ b/rendering/cases/layer-tile-simple/main.js
@@ -1,8 +1,8 @@
 import Map from '../../../src/ol/Map.js';
 import View from '../../../src/ol/View.js';
 import TileLayer from '../../../src/ol/layer/Tile.js';
-import {fromLonLat} from '../../../src/ol/proj.js';
-import XYZ from '../../../src/ol/source/XYZ.js';
+import {fromLonLat} from '../../../src/ol/proj';
+import XYZ from '../../../src/ol/source/XYZ';

 const center = fromLonLat([8.6, 50.1]);

--- a/rendering/cases/layer-tile-transition/main.js
+++ b/rendering/cases/layer-tile-transition/main.js
@@ -1,8 +1,8 @@
 import Map from '../../../src/ol/Map.js';
 import View from '../../../src/ol/View.js';
 import TileLayer from '../../../src/ol/layer/Tile.js';
-import {fromLonLat} from '../../../src/ol/proj.js';
-import XYZ from '../../../src/ol/source/XYZ.js';
+import {fromLonLat} from '../../../src/ol/proj';
+import XYZ from '../../../src/ol/source/XYZ';

 const center = fromLonLat([8.6, 50.1]);

--- a/rendering/cases/layer-tile-two-layers/main.js
+++ b/rendering/cases/layer-tile-two-layers/main.js
@@ -1,8 +1,8 @@
 import Map from '../../../src/ol/Map.js';
 import View from '../../../src/ol/View.js';
 import TileLayer from '../../../src/ol/layer/Tile.js';
-import {fromLonLat} from '../../../src/ol/proj.js';
-import XYZ from '../../../src/ol/source/XYZ.js';
+import {fromLonLat} from '../../../src/ol/proj';
+import XYZ from '../../../src/ol/source/XYZ';

 const center = fromLonLat([8.6, 50.1]);

--- a/rendering/cases/layer-vector-decluttering/expected.png
+++ b/rendering/cases/layer-vector-decluttering/expected.png
--- a/rendering/cases/layer-vector-decluttering/main.js
+++ b/rendering/cases/layer-vector-decluttering/main.js
@@ -7,7 +7,6 @@ import Point from '../../../src/ol/geom/Point.js';
 import Style from '../../../src/ol/style/Style.js';
 import Text from '../../../src/ol/style/Text.js';
 import CircleStyle from '../../../src/ol/style/Circle.js';
-import Fill from '../../../src/ol/style/Fill.js';
 import Stroke from '../../../src/ol/style/Stroke.js';
 import LineString from '../../../src/ol/geom/LineString.js';

@@ -60,10 +59,9 @@ source1.addFeature(new Feature({
 }));
 layer1.setStyle(function(feature) {
  return new Style({
-    zIndex: feature.get('zIndex'),
    image: new CircleStyle({
      radius: 15,
-      fill: new Fill({
+      stroke: new Stroke({
        color: 'blue'
      })
    })
@@ -71,7 +69,7 @@ layer1.setStyle(function(feature) {
 });
 map.addLayer(layer1);

-center = [center[0] + 500, center[1] + 700];
+center = [center[0] + 500, center[1] + 500];
 const feature2 = new Feature({
  geometry: new Point(center),
  text: 'center',
@@ -90,16 +88,15 @@ source2.addFeature(new Feature({
 }));
 layer2.setStyle(function(feature) {
  return new Style({
-    zIndex: feature.get('zIndex'),
    text: new Text({
      text: feature.get('text'),
-      font: 'italic bold 18px Ubuntu'
+      font: '16px Ubuntu'
    })
  });
 });
 map.addLayer(layer2);

-center = [center[0] + 500, center[1] + 300];
+center = [center[0] + 500, center[1] + 500];
 source3.addFeature(new Feature({
  geometry: new Point(center),
  text: 'center'
@@ -115,17 +112,16 @@ source3.addFeature(new Feature({
 layer3.setStyle(function(feature) {
  return new Style({
    image: new CircleStyle({
-      radius: 10,
+      radius: 5,
      stroke: new Stroke({
-        color: 'red',
-        width: 8
+        color: 'red'
      })
    }),
    text: new Text({
      text: feature.get('text'),
-      font: 'italic bold 18px Ubuntu',
+      font: '16px Ubuntu',
      textBaseline: 'bottom',
-      offsetY: -12
+      offsetY: -5
    })
  });
 });
@@ -134,12 +130,11 @@ map.addLayer(layer3);
 center = [center[0] - 2000, center[1] - 2000];
 const point = new Feature(new Point(center));
 point.setStyle(new Style({
-  zIndex: 1,
+  zIndex: 2,
  image: new CircleStyle({
    radius: 8,
    stroke: new Stroke({
-      color: 'blue',
-      width: 4
+      color: 'blue'
    })
  })
 }));
@@ -148,7 +143,7 @@ const line = new Feature(new LineString([
  [center[0] + 650, center[1] - 200]
 ]));
 line.setStyle(new Style({
-  zIndex: 2,
+  zIndex: 1,
  stroke: new Stroke({
    color: '#CCC',
    width: 12
@@ -156,7 +151,7 @@ line.setStyle(new Style({
  text: new Text({
    placement: 'line',
    text: 'east-west',
-    font: 'italic bold 18px Ubuntu',
+    font: '16px Ubuntu',
    overflow: true
  })
 }));
@@ -164,4 +159,4 @@ source4.addFeature(point);
 source4.addFeature(line);
 map.addLayer(layer4);

-render({tolerance: 0.007});
+render({tolerance: 0.02});
--- a/rendering/cases/layer-vector-polygon-partial/main.js
+++ b/rendering/cases/layer-vector-polygon-partial/main.js
@@ -42,8 +42,7 @@ const layer = new VectorLayer({
 const view = new View({
  center: [-9.5, 78],
  zoom: 2,
-  projection: 'EPSG:4326',
-  multiWorld: true
+  projection: 'EPSG:4326'
 });
 new Map({
  pixelRatio: 1,
--- a/rendering/cases/layer-vectorimage-decluttering/expected.png
+++ b/rendering/cases/layer-vectorimage-decluttering/expected.png
--- a/rendering/cases/layer-vectorimage-decluttering/main.js
+++ b/rendering/cases/layer-vectorimage-decluttering/main.js
@@ -1,154 +1,55 @@
+import Feature from '../../../src/ol/Feature.js';
 import Map from '../../../src/ol/Map.js';
 import View from '../../../src/ol/View.js';
 import VectorSource from '../../../src/ol/source/Vector.js';
-import VectorImageLayer from '../../../src/ol/layer/VectorImage.js';
-import Feature from '../../../src/ol/Feature.js';
-import Point from '../../../src/ol/geom/Point.js';
 import Style from '../../../src/ol/style/Style.js';
-import Text from '../../../src/ol/style/Text.js';
-import CircleStyle from '../../../src/ol/style/Circle.js';
-import Fill from '../../../src/ol/style/Fill.js';
 import Stroke from '../../../src/ol/style/Stroke.js';
+import VectorImageLayer from '../../../src/ol/layer/VectorImage.js';
+import CircleStyle from '../../../src/ol/style/Circle.js';
+import Point from '../../../src/ol/geom/Point.js';
 import LineString from '../../../src/ol/geom/LineString.js';
+import Text from '../../../src/ol/style/Text.js';

-let center = [1825927.7316762917, 6143091.089223046];
-const map = new Map({
-  pixelRatio: 1,
-  target: 'map',
-  view: new View({
-    center: center,
-    zoom: 13
-  })
-});
+const center = [1825927.7316762917, 6143091.089223046];

-const source1 = new VectorSource();
-const layer1 = new VectorImageLayer({
-  declutter: true,
-  source: source1
-});
-
-const source2 = new VectorSource();
-const layer2 = new VectorImageLayer({
-  declutter: true,
-  source: source2
-});
-
-const source3 = new VectorSource();
-const layer3 = new VectorImageLayer({
-  declutter: true,
-  source: source3
-});
-
-const source4 = new VectorSource();
-const layer4 = new VectorImageLayer({
-  declutter: true,
-  source: source4
-});
-
-const feature1 = new Feature({
-  geometry: new Point(center),
-  zIndex: 2
-});
-source1.addFeature(feature1);
-source1.addFeature(new Feature({
-  geometry: new Point([center[0] - 540, center[1]]),
-  zIndex: 3
-}));
-source1.addFeature(new Feature({
-  geometry: new Point([center[0] + 540, center[1]]),
-  zIndex: 1
-}));
-layer1.setStyle(function(feature) {
-  return new Style({
-    zIndex: feature.get('zIndex'),
-    image: new CircleStyle({
-      radius: 15,
-      fill: new Fill({
-        color: 'blue'
+const source = new VectorSource();
+const vectorLayer1 = new VectorImageLayer({
+  source: source,
+  style: function(feature) {
+    return new Style({
+      image: new CircleStyle({
+        radius: 15,
+        stroke: new Stroke({
+          color: 'blue'
+        })
+      }),
+      text: new Text({
+        text: feature.get('text'),
+        font: '16px Ubuntu'
      })
-    })
-  });
+    });
+  }
 });
-map.addLayer(layer1);

-center = [center[0] + 500, center[1] + 700];
-const feature2 = new Feature({
-  geometry: new Point(center),
-  text: 'center',
-  zIndex: 2
-});
-source2.addFeature(feature2);
-source2.addFeature(new Feature({
-  geometry: new Point([center[0] - 540, center[1]]),
-  text: 'west',
-  zIndex: 3
-}));
-source2.addFeature(new Feature({
-  geometry: new Point([center[0] + 540, center[1]]),
-  text: 'east',
-  zIndex: 1
-}));
-layer2.setStyle(function(feature) {
-  return new Style({
-    zIndex: feature.get('zIndex'),
-    text: new Text({
-      text: feature.get('text'),
-      font: 'italic bold 18px Ubuntu'
-    })
-  });
-});
-map.addLayer(layer2);
-
-center = [center[0] + 500, center[1] + 300];
-source3.addFeature(new Feature({
+const centerFeature = new Feature({
  geometry: new Point(center),
  text: 'center'
-}));
-source3.addFeature(new Feature({
+});
+source.addFeature(centerFeature);
+source.addFeature(new Feature({
  geometry: new Point([center[0] - 540, center[1]]),
  text: 'west'
 }));
-source3.addFeature(new Feature({
+source.addFeature(new Feature({
  geometry: new Point([center[0] + 540, center[1]]),
  text: 'east'
 }));
-layer3.setStyle(function(feature) {
-  return new Style({
-    image: new CircleStyle({
-      radius: 10,
-      stroke: new Stroke({
-        color: 'red',
-        width: 8
-      })
-    }),
-    text: new Text({
-      text: feature.get('text'),
-      font: 'italic bold 18px Ubuntu',
-      textBaseline: 'bottom',
-      offsetY: -12
-    })
-  });
-});
-map.addLayer(layer3);

-center = [center[0] - 2000, center[1] - 2000];
-const point = new Feature(new Point(center));
-point.setStyle(new Style({
-  zIndex: 1,
-  image: new CircleStyle({
-    radius: 8,
-    stroke: new Stroke({
-      color: 'blue',
-      width: 4
-    })
-  })
-}));
 const line = new Feature(new LineString([
  [center[0] - 650, center[1] - 200],
  [center[0] + 650, center[1] - 200]
 ]));
 line.setStyle(new Style({
-  zIndex: 2,
  stroke: new Stroke({
    color: '#CCC',
    width: 12
@@ -156,12 +57,23 @@ line.setStyle(new Style({
  text: new Text({
    placement: 'line',
    text: 'east-west',
-    font: 'italic bold 18px Ubuntu',
-    overflow: true
+    font: '16px Ubuntu'
  })
 }));
-source4.addFeature(point);
-source4.addFeature(line);
-map.addLayer(layer4);
+source.addFeature(line);

-render({tolerance: 0.007});
+const map = new Map({
+  pixelRatio: 1,
+  layers: [
+    vectorLayer1
+  ],
+  target: 'map',
+  view: new View({
+    center: center,
+    zoom: 13
+  })
+});
+
+map.getView().fit(source.getExtent());
+
+render({tolerance: 0.02});
--- a/rendering/cases/layer-vectortile-rotate-hidpi/main.js
+++ b/rendering/cases/layer-vectortile-rotate-hidpi/main.js
@@ -1,9 +1,9 @@
 import Map from '../../../src/ol/Map.js';
 import View from '../../../src/ol/View.js';
-import VectorTileSource from '../../../src/ol/source/VectorTile.js';
-import MVT from '../../../src/ol/format/MVT.js';
-import {createXYZ} from '../../../src/ol/tilegrid.js';
-import VectorTileLayer from '../../../src/ol/layer/VectorTile.js';
+import VectorTileSource from '../../../src/ol/source/VectorTile';
+import MVT from '../../../src/ol/format/MVT';
+import {createXYZ} from '../../../src/ol/tilegrid';
+import VectorTileLayer from '../../../src/ol/layer/VectorTile';

 const map = new Map({
  pixelRatio: 2,
--- a/rendering/cases/layer-vectortile-rotate-vector/main.js
+++ b/rendering/cases/layer-vectortile-rotate-vector/main.js
@@ -1,16 +1,16 @@
 import Map from '../../../src/ol/Map.js';
 import View from '../../../src/ol/View.js';
-import VectorTileSource from '../../../src/ol/source/VectorTile.js';
-import MVT from '../../../src/ol/format/MVT.js';
-import {createXYZ} from '../../../src/ol/tilegrid.js';
-import VectorTileLayer from '../../../src/ol/layer/VectorTile.js';
-import VectorSource from '../../../src/ol/source/Vector.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 Style from '../../../src/ol/style/Style.js';
-import CircleStyle from '../../../src/ol/style/Circle.js';
-import Fill from '../../../src/ol/style/Fill.js';
+import VectorTileSource from '../../../src/ol/source/VectorTile';
+import MVT from '../../../src/ol/format/MVT';
+import {createXYZ} from '../../../src/ol/tilegrid';
+import VectorTileLayer from '../../../src/ol/layer/VectorTile';
+import VectorSource from '../../../src/ol/source/Vector';
+import Feature from '../../../src/ol/Feature';
+import Point from '../../../src/ol/geom/Point';
+import VectorLayer from '../../../src/ol/layer/Vector';
+import Style from '../../../src/ol/style/Style';
+import CircleStyle from '../../../src/ol/style/Circle';
+import Fill from '../../../src/ol/style/Fill';

 const vectorSource = new VectorSource({
  features: [
--- a/rendering/cases/layer-vectortile-rotate/main.js
+++ b/rendering/cases/layer-vectortile-rotate/main.js
@@ -1,9 +1,9 @@
 import Map from '../../../src/ol/Map.js';
 import View from '../../../src/ol/View.js';
-import VectorTileSource from '../../../src/ol/source/VectorTile.js';
-import MVT from '../../../src/ol/format/MVT.js';
-import {createXYZ} from '../../../src/ol/tilegrid.js';
-import VectorTileLayer from '../../../src/ol/layer/VectorTile.js';
+import VectorTileSource from '../../../src/ol/source/VectorTile';
+import MVT from '../../../src/ol/format/MVT';
+import {createXYZ} from '../../../src/ol/tilegrid';
+import VectorTileLayer from '../../../src/ol/layer/VectorTile';

 const map = new Map({
  layers: [
--- a/rendering/cases/layer-vectortile-simple/main.js
+++ b/rendering/cases/layer-vectortile-simple/main.js
@@ -1,9 +1,9 @@
 import Map from '../../../src/ol/Map.js';
 import View from '../../../src/ol/View.js';
-import VectorTileSource from '../../../src/ol/source/VectorTile.js';
-import MVT from '../../../src/ol/format/MVT.js';
-import {createXYZ} from '../../../src/ol/tilegrid.js';
-import VectorTileLayer from '../../../src/ol/layer/VectorTile.js';
+import VectorTileSource from '../../../src/ol/source/VectorTile';
+import MVT from '../../../src/ol/format/MVT';
+import {createXYZ} from '../../../src/ol/tilegrid';
+import VectorTileLayer from '../../../src/ol/layer/VectorTile';

 new Map({
  layers: [
--- a/rendering/cases/multiple-layers/expected.png
+++ b/rendering/cases/multiple-layers/expected.png
--- a/rendering/cases/multiple-layers/main.js
+++ b/rendering/cases/multiple-layers/main.js
@@ -4,13 +4,16 @@ import {Vector as VectorLayer, Tile as TileLayer} from '../../../src/ol/layer.js
 import {Vector as VectorSource, XYZ} from '../../../src/ol/source.js';
 import GeoJSON from '../../../src/ol/format/GeoJSON.js';
 import {Style, Stroke} from '../../../src/ol/style.js';
-import Feature from '../../../src/ol/Feature.js';
-import Point from '../../../src/ol/geom/Point.js';

-const map = new Map({
+new Map({
  layers: [
+    new TileLayer({
+      source: new XYZ({
+        url: '/data/tiles/satellite/{z}/{x}/{y}.jpg',
+        maxZoom: 3
+      })
+    }),
    new VectorLayer({
-      zIndex: 1,
      style: new Style({
        stroke: new Stroke({
          color: 'rgba(255,255,255,0.5)',
@@ -21,12 +24,6 @@ const map = new Map({
        url: '/data/countries.json',
        format: new GeoJSON()
      })
-    }),
-    new TileLayer({
-      source: new XYZ({
-        url: '/data/tiles/satellite/{z}/{x}/{y}.jpg',
-        maxZoom: 3
-      })
    })
  ],
  target: 'map',
@@ -36,11 +33,4 @@ const map = new Map({
  })
 });

-const unmanaged = new VectorLayer({
-  source: new VectorSource({
-    features: [new Feature(new Point([0, 0]))]
-  })
-});
-unmanaged.setMap(map);
-
 render();
--- a/rendering/cases/webgl-points/main.js
+++ b/rendering/cases/webgl-points/main.js
@@ -1,11 +1,11 @@
 import Map from '../../../src/ol/Map.js';
 import View from '../../../src/ol/View.js';
 import TileLayer from '../../../src/ol/layer/Tile.js';
-import XYZ from '../../../src/ol/source/XYZ.js';
-import {Vector as VectorLayer} from '../../../src/ol/layer.js';
-import VectorSource from '../../../src/ol/source/Vector.js';
-import KML from '../../../src/ol/format/KML.js';
-import WebGLPointsLayerRenderer from '../../../src/ol/renderer/webgl/PointsLayer.js';
+import XYZ from '../../../src/ol/source/XYZ';
+import {Vector as VectorLayer} from '../../../src/ol/layer';
+import VectorSource from '../../../src/ol/source/Vector';
+import KML from '../../../src/ol/format/KML';
+import WebGLPointsLayerRenderer from '../../../src/ol/renderer/webgl/PointsLayer';

 class CustomLayer extends VectorLayer {
  createRenderer() {
--- a/rendering/test.js
+++ b/rendering/test.js
@@ -357,7 +357,7 @@ if (require.main === module) {
    option('puppeteer-args', {
      describe: 'Additional args for Puppeteer',
      type: 'array',
-      default: process.env.CI ? ['--no-sandbox', '--disable-setuid-sandbox', '--disable-dev-shm-usage'] : []
+      default: process.env.CI ? ['--no-sandbox', '--disable-setuid-sandbox'] : []
    }).
    parse();

--- a/rendering/webpack.config.js
+++ b/rendering/webpack.config.js
@@ -22,16 +22,5 @@ module.exports = {
  context: __dirname,
  target: 'web',
  entry: entry,
-  devtool: 'source-map',
-  module: {
-    rules: [{
-      test: /\.js$/,
-      use: {
-        loader: path.join(__dirname, '../examples/webpack/worker-loader.js')
-      },
-      include: [
-        path.join(__dirname, '../src/ol/worker')
-      ]
-    }]
-  }
+  devtool: 'source-map'
 };
--- a/src/ol/Feature.js
+++ b/src/ol/Feature.js
@@ -57,11 +57,10 @@ import BaseObject, {getChangeEventType} from './Object.js';
 * ```
 *
 * @api
- * @template {import("./geom/Geometry.js").default} Geometry
 */
 class Feature extends BaseObject {
  /**
-   * @param {Geometry|Object<string, *>=} opt_geometryOrProperties
+   * @param {import("./geom/Geometry.js").default|Object<string, *>=} opt_geometryOrProperties
   *     You may pass a Geometry object directly, or an object literal containing
   *     properties. If you pass an object literal, you may include a Geometry
   *     associated with a `geometry` key.
@@ -107,7 +106,7 @@ class Feature extends BaseObject {

    if (opt_geometryOrProperties) {
      if (typeof /** @type {?} */ (opt_geometryOrProperties).getSimplifiedGeometry === 'function') {
-        const geometry = /** @type {Geometry} */ (opt_geometryOrProperties);
+        const geometry = /** @type {import("./geom/Geometry.js").default} */ (opt_geometryOrProperties);
        this.setGeometry(geometry);
      } else {
        /** @type {Object<string, *>} */
@@ -141,13 +140,13 @@ class Feature extends BaseObject {
   * Get the feature's default geometry.  A feature may have any number of named
   * geometries.  The "default" geometry (the one that is rendered by default) is
   * set when calling {@link module:ol/Feature~Feature#setGeometry}.
-   * @return {Geometry|undefined} The default geometry for the feature.
+   * @return {import("./geom/Geometry.js").default|undefined} The default geometry for the feature.
   * @api
   * @observable
   */
  getGeometry() {
    return (
-      /** @type {Geometry|undefined} */ (this.get(this.geometryName_))
+      /** @type {import("./geom/Geometry.js").default|undefined} */ (this.get(this.geometryName_))
    );
  }

@@ -219,7 +218,7 @@ class Feature extends BaseObject {
  /**
   * Set the default geometry for the feature.  This will update the property
   * with the name returned by {@link module:ol/Feature~Feature#getGeometryName}.
-   * @param {Geometry|undefined} geometry The new geometry.
+   * @param {import("./geom/Geometry.js").default|undefined} geometry The new geometry.
   * @api
   * @observable
   */
--- a/src/ol/Geolocation.js
+++ b/src/ol/Geolocation.js
@@ -6,6 +6,7 @@ import {listen} from './events.js';
 import Event from './events/Event.js';
 import EventType from './events/EventType.js';
 import {circular as circularPolygon} from './geom/Polygon.js';
+import {GEOLOCATION} from './has.js';
 import {toRadians} from './math.js';
 import {get as getProjection, getTransformFromProjections, identityTransform} from './proj.js';

@@ -82,7 +83,7 @@ class GeolocationError extends Event {
 *       window.console.log(geolocation.getPosition());
 *     });
 *
- * @fires module:ol/events/Event~Event#event:error
+ * @fires error
 * @api
 */
 class Geolocation extends BaseObject {
@@ -159,7 +160,7 @@ class Geolocation extends BaseObject {
   * @private
   */
  handleTrackingChanged_() {
-    if ('geolocation' in navigator) {
+    if (GEOLOCATION) {
      const tracking = this.getTracking();
      if (tracking && this.watchId_ === undefined) {
        this.watchId_ = navigator.geolocation.watchPosition(
@@ -203,6 +204,12 @@ class Geolocation extends BaseObject {
    this.changed();
  }

+  /**
+   * Triggered when the Geolocation returns an error.
+   * @event error
+   * @api
+   */
+
  /**
   * @private
   * @param {PositionError} error error object.
--- a/src/ol/Image.js
+++ b/src/ol/Image.js
@@ -6,7 +6,6 @@ import ImageState from './ImageState.js';
 import {listenOnce, unlistenByKey} from './events.js';
 import EventType from './events/EventType.js';
 import {getHeight} from './extent.js';
-import {IMAGE_DECODE} from './has.js';


 /**
@@ -59,9 +58,9 @@ class ImageWrapper extends ImageBase {

    /**
     * @private
-     * @type {function():void}
+     * @type {Array<import("./events.js").EventsKey>}
     */
-    this.unlisten_ = null;
+    this.imageListenerKeys_ = null;

    /**
     * @protected
@@ -121,12 +120,13 @@ class ImageWrapper extends ImageBase {
    if (this.state == ImageState.IDLE || this.state == ImageState.ERROR) {
      this.state = ImageState.LOADING;
      this.changed();
+      this.imageListenerKeys_ = [
+        listenOnce(this.image_, EventType.ERROR,
+          this.handleImageError_, this),
+        listenOnce(this.image_, EventType.LOAD,
+          this.handleImageLoad_, this)
+      ];
      this.imageLoadFunction_(this, this.src_);
-      this.unlisten_ = listenImage(
-        this.image_,
-        this.handleImageLoad_.bind(this),
-        this.handleImageError_.bind(this)
-      );
    }
  }

@@ -143,54 +143,10 @@ class ImageWrapper extends ImageBase {
   * @private
   */
  unlistenImage_() {
-    if (this.unlisten_) {
-      this.unlisten_();
-      this.unlisten_ = null;
-    }
+    this.imageListenerKeys_.forEach(unlistenByKey);
+    this.imageListenerKeys_ = null;
  }
 }

-/**
- * @param {HTMLCanvasElement|HTMLImageElement|HTMLVideoElement} image Image element.
- * @param {function():any} loadHandler Load callback function.
- * @param {function():any} errorHandler Error callback function.
- * @return {function():void} Callback to stop listening.
- */
-export function listenImage(image, loadHandler, errorHandler) {
-  const img = /** @type {HTMLImageElement} */ (image);
-
-  if (IMAGE_DECODE) {
-    const promise = img.decode();
-    let listening = true;
-    const unlisten = function() {
-      listening = false;
-    };
-    promise.then(function() {
-      if (listening) {
-        loadHandler();
-      }
-    }).catch(function(error) {
-      if (listening) {
-        // FIXME: Unconditionally call errorHandler() when this bug is fixed upstream:
-        //        https://bugs.webkit.org/show_bug.cgi?id=198527
-        if (error.name === 'EncodingError' && error.message === 'Invalid image type.') {
-          loadHandler();
-        } else {
-          errorHandler();
-        }
-      }
-    });
-    return unlisten;
-  }
-
-  const listenerKeys = [
-    listenOnce(img, EventType.LOAD, loadHandler),
-    listenOnce(img, EventType.ERROR, errorHandler)
-  ];
-  return function unlisten() {
-    listenerKeys.forEach(unlistenByKey);
-  };
-}
-

 export default ImageWrapper;
--- a/src/ol/ImageTile.js
+++ b/src/ol/ImageTile.js
@@ -4,7 +4,8 @@
 import Tile from './Tile.js';
 import TileState from './TileState.js';
 import {createCanvasContext2D} from './dom.js';
-import {listenImage} from './Image.js';
+import {listenOnce, unlistenByKey} from './events.js';
+import EventType from './events/EventType.js';


 class ImageTile extends Tile {
@@ -46,9 +47,9 @@ class ImageTile extends Tile {

    /**
     * @private
-     * @type {function():void}
+     * @type {Array<import("./events.js").EventsKey>}
     */
-    this.unlisten_ = null;
+    this.imageListenerKeys_ = null;

    /**
     * @private
@@ -133,12 +134,13 @@ class ImageTile extends Tile {
    if (this.state == TileState.IDLE) {
      this.state = TileState.LOADING;
      this.changed();
+      this.imageListenerKeys_ = [
+        listenOnce(this.image_, EventType.ERROR,
+          this.handleImageError_, this),
+        listenOnce(this.image_, EventType.LOAD,
+          this.handleImageLoad_, this)
+      ];
      this.tileLoadFunction_(this, this.src_);
-      this.unlisten_ = listenImage(
-        this.image_,
-        this.handleImageLoad_.bind(this),
-        this.handleImageError_.bind(this)
-      );
    }
  }

@@ -148,10 +150,8 @@ class ImageTile extends Tile {
   * @private
   */
  unlistenImage_() {
-    if (this.unlisten_) {
-      this.unlisten_();
-      this.unlisten_ = null;
-    }
+    this.imageListenerKeys_.forEach(unlistenByKey);
+    this.imageListenerKeys_ = null;
  }
 }

--- a/src/ol/Map.js
+++ b/src/ol/Map.js
@@ -2,7 +2,7 @@
 * @module ol/Map
 */
 import PluggableMap from './PluggableMap.js';
-import {defaults as defaultControls} from './control.js';
+import {defaults as defaultControls} from './control/util.js';
 import {defaults as defaultInteractions} from './interaction.js';
 import {assign} from './obj.js';
 import CompositeMapRenderer from './renderer/Composite.js';
--- a/src/ol/MapBrowserEventHandler.js
+++ b/src/ol/MapBrowserEventHandler.js
@@ -260,6 +260,12 @@ class MapBrowserEventHandler extends EventTarget {
        this.dragging_);
      this.dispatchEvent(newEvent);
    }
+
+    // Some native android browser triggers mousemove events during small period
+    // of time. See: https://code.google.com/p/android/issues/detail?id=5491 or
+    // https://code.google.com/p/android/issues/detail?id=19827
+    // ex: Galaxy Tab P3110 + Android 4.1.1
+    pointerEvent.preventDefault();
  }

  /**
--- a/src/ol/PluggableMap.js
+++ b/src/ol/PluggableMap.js
@@ -22,7 +22,7 @@ import {listen, unlistenByKey, unlisten} from './events.js';
 import EventType from './events/EventType.js';
 import {createEmpty, clone, createOrUpdateEmpty, equals, getForViewAndSize, isEmpty} from './extent.js';
 import {TRUE} from './functions.js';
-import {DEVICE_PIXEL_RATIO, IMAGE_DECODE} from './has.js';
+import {DEVICE_PIXEL_RATIO, TOUCH} from './has.js';
 import LayerGroup from './layer/Group.js';
 import {hasArea} from './size.js';
 import {DROP} from './structs/PriorityQueue.js';
@@ -39,11 +39,9 @@ import {create as createTransform, apply as applyTransform} from './transform.js
 * @property {boolean} animate
 * @property {import("./transform.js").Transform} coordinateToPixelTransform
 * @property {null|import("./extent.js").Extent} extent
- * @property {Array<DeclutterItems>} declutterItems
 * @property {import("./coordinate.js").Coordinate} focus
 * @property {number} index
 * @property {Array<import("./layer/Layer.js").State>} layerStatesArray
- * @property {number} layerIndex
 * @property {import("./transform.js").Transform} pixelToCoordinateTransform
 * @property {Array<PostRenderFunction>} postRenderFunctions
 * @property {import("./size.js").Size} size
@@ -55,13 +53,6 @@ import {create as createTransform, apply as applyTransform} from './transform.js
 */


-/**
- * @typedef {Object} DeclutterItems
- * @property {Array<*>} items Declutter items of an executor.
- * @property {number} opacity Layer opacity.
- */
-
-
 /**
 * @typedef {function(PluggableMap, ?FrameState): any} PostRenderFunction
 */
@@ -230,7 +221,7 @@ class PluggableMap extends BaseObject {
     * @type {!HTMLElement}
     */
    this.viewport_ = document.createElement('div');
-    this.viewport_.className = 'ol-viewport' + ('ontouchstart' in window ? ' ol-touch' : '');
+    this.viewport_.className = 'ol-viewport' + (TOUCH ? ' ol-touch' : '');
    this.viewport_.style.position = 'relative';
    this.viewport_.style.overflow = 'hidden';
    this.viewport_.style.width = '100%';
@@ -301,16 +292,6 @@ class PluggableMap extends BaseObject {
     */
    this.interactions = optionsInternal.interactions || new Collection();

-    /**
-     * @type {import("./events/Target.js").default}
-     */
-    this.labelCache_ = null;
-
-    /**
-     * @type {import("./events.js").EventsKey}
-     */
-    this.labelCacheListenerKey_;
-
    /**
     * @type {Collection<import("./Overlay.js").default>}
     * @private
@@ -328,7 +309,7 @@ class PluggableMap extends BaseObject {
     * @type {import("./renderer/Map.js").default}
     * @private
     */
-    this.renderer_ = null;
+    this.renderer_ = this.createRenderer();

    /**
     * @type {function(Event): void|undefined}
@@ -529,6 +510,10 @@ class PluggableMap extends BaseObject {
      removeEventListener(EventType.RESIZE, this.handleResize_, false);
      this.handleResize_ = undefined;
    }
+    if (this.animationDelayKey_) {
+      cancelAnimationFrame(this.animationDelayKey_);
+      this.animationDelayKey_ = undefined;
+    }
    this.setTarget(null);
    super.disposeInternal();
  }
@@ -777,21 +762,6 @@ class PluggableMap extends BaseObject {
    return layers;
  }

-  /**
-   * @return {boolean} Layers have sources that are still loading.
-   */
-  getLoading() {
-    const layerStatesArray = this.getLayerGroup().getLayerStatesArray();
-    for (let i = 0, ii = layerStatesArray.length; i < ii; ++i) {
-      const layer = layerStatesArray[i].layer;
-      const source = /** @type {import("./layer/Layer.js").default} */ (layer).getSource();
-      if (source && source.loading) {
-        return true;
-      }
-    }
-    return false;
-  }
-
  /**
   * Get the pixel for a coordinate.  This takes a coordinate in the map view
   * projection and returns the corresponding pixel.
@@ -967,7 +937,7 @@ class PluggableMap extends BaseObject {
      if (frameState) {
        const hints = frameState.viewHints;
        if (hints[ViewHint.ANIMATING] || hints[ViewHint.INTERACTING]) {
-          const lowOnFrameBudget = !IMAGE_DECODE && Date.now() - frameState.time > 8;
+          const lowOnFrameBudget = Date.now() - frameState.time > 8;
          maxTotalLoading = lowOnFrameBudget ? 0 : 8;
          maxNewLoads = lowOnFrameBudget ? 0 : 2;
        }
@@ -979,7 +949,7 @@ class PluggableMap extends BaseObject {
    }

    if (frameState && this.hasListener(RenderEventType.RENDERCOMPLETE) && !frameState.animate &&
-        !this.tileQueue_.getTilesLoading() && !this.getLoading()) {
+        !this.tileQueue_.getTilesLoading() && !getLoading(this.getLayers().getArray())) {
      this.renderer_.dispatchRenderEvent(RenderEventType.RENDERCOMPLETE, frameState);
    }

@@ -1023,14 +993,7 @@ class PluggableMap extends BaseObject {
    }

    if (!targetElement) {
-      if (this.renderer_) {
-        this.renderer_.dispose();
-        this.renderer_ = null;
-      }
-      if (this.animationDelayKey_) {
-        cancelAnimationFrame(this.animationDelayKey_);
-        this.animationDelayKey_ = undefined;
-      }
+      this.renderer_.removeLayerRenderers();
      removeNode(this.viewport_);
      if (this.handleResize_ !== undefined) {
        removeEventListener(EventType.RESIZE, this.handleResize_, false);
@@ -1038,9 +1001,6 @@ class PluggableMap extends BaseObject {
      }
    } else {
      targetElement.appendChild(this.viewport_);
-      if (!this.renderer_) {
-        this.renderer_ = this.createRenderer();
-      }

      const keyboardEventTarget = !this.keyboardEventTarget_ ?
        targetElement : this.keyboardEventTarget_;
@@ -1051,7 +1011,7 @@ class PluggableMap extends BaseObject {

      if (!this.handleResize_) {
        this.handleResize_ = this.updateSize.bind(this);
-        window.addEventListener(EventType.RESIZE, this.handleResize_, false);
+        addEventListener(EventType.RESIZE, this.handleResize_, false);
      }
    }

@@ -1141,25 +1101,12 @@ class PluggableMap extends BaseObject {
    this.animationDelay_();
  }

-  /**
-   * Redraws all text after new fonts have loaded
-   */
-  redrawText() {
-    const layerStates = this.getLayerGroup().getLayerStatesArray();
-    for (let i = 0, ii = layerStates.length; i < ii; ++i) {
-      const layer = layerStates[i].layer;
-      if (layer.hasRenderer()) {
-        layer.getRenderer().handleFontsChanged();
-      }
-    }
-  }
-
  /**
   * Request a map rendering (at the next animation frame).
   * @api
   */
  render() {
-    if (this.renderer_ && this.animationDelayKey_ === undefined) {
+    if (this.animationDelayKey_ === undefined) {
      this.animationDelayKey_ = requestAnimationFrame(this.animationDelay_);
    }
  }
@@ -1225,14 +1172,12 @@ class PluggableMap extends BaseObject {
    if (size !== undefined && hasArea(size) && view && view.isDef()) {
      const viewHints = view.getHints(this.frameState_ ? this.frameState_.viewHints : undefined);
      viewState = view.getState(this.pixelRatio_);
-      frameState = {
+      frameState = /** @type {FrameState} */ ({
        animate: false,
        coordinateToPixelTransform: this.coordinateToPixelTransform_,
-        declutterItems: previousFrameState ? previousFrameState.declutterItems : [],
        extent: extent,
        focus: this.focus_ ? this.focus_ : viewState.center,
        index: this.frameIndex_++,
-        layerIndex: 0,
        layerStatesArray: this.getLayerGroup().getLayerStatesArray(),
        pixelRatio: this.pixelRatio_,
        pixelToCoordinateTransform: this.pixelToCoordinateTransform_,
@@ -1245,7 +1190,7 @@ class PluggableMap extends BaseObject {
        viewState: viewState,
        viewHints: viewHints,
        wantedTiles: {}
-      };
+      });
    }

    if (frameState) {
@@ -1451,3 +1396,23 @@ function createOptionsInternal(options) {

 }
 export default PluggableMap;
+
+/**
+ * @param  {Array<import("./layer/Base.js").default>} layers Layers.
+ * @return {boolean} Layers have sources that are still loading.
+ */
+function getLoading(layers) {
+  for (let i = 0, ii = layers.length; i < ii; ++i) {
+    const layer = layers[i];
+    if (typeof /** @type {?} */ (layer).getLayers === 'function') {
+      return getLoading(/** @type {LayerGroup} */ (layer).getLayers().getArray());
+    } else {
+      const source = /** @type {import("./layer/Layer.js").default} */ (
+        layer).getSource();
+      if (source && source.loading) {
+        return true;
+      }
+    }
+  }
+  return false;
+}
--- a/src/ol/View.js
+++ b/src/ol/View.js
@@ -21,9 +21,9 @@ import {clamp, modulo} from './math.js';
 import {assign} from './obj.js';
 import {createProjection, METERS_PER_UNIT} from './proj.js';
 import Units from './proj/Units.js';
-import {equals} from './coordinate.js';
-import {easeOut} from './easing.js';
-import {createMinMaxResolution} from './resolutionconstraint.js';
+import {equals} from './coordinate';
+import {easeOut} from './easing';
+import {createMinMaxResolution} from './resolutionconstraint';


 /**
@@ -191,11 +191,6 @@ const DEFAULT_MIN_ZOOM = 0;
 * This is the object to act upon to change the center, resolution,
 * and rotation of the map.
 *
- * A View has a `projection`. The projection determines the
- * coordinate system of the center, and its units determine the units of the
- * resolution (projection units per pixel). The default projection is
- * Spherical Mercator (EPSG:3857).
- *
 * ### The view states
 *
 * An View is determined by three states: `center`, `resolution`,
@@ -207,6 +202,11 @@ const DEFAULT_MIN_ZOOM = 0;
 * methods are available, as well as `getResolutionForZoom` and
 * `getZoomForResolution` to switch from one system to the other.
 *
+ * A View has a `projection`. The projection determines the
+ * coordinate system of the center, and its units determine the units of the
+ * resolution (projection units per pixel). The default projection is
+ * Spherical Mercator (EPSG:3857).
+ *
 * ### The constraints
 *
 * `setCenter`, `setResolution` and `setRotation` can be used to change the
@@ -218,7 +218,7 @@ const DEFAULT_MIN_ZOOM = 0;
 *
 * The *resolution constraint* typically restricts min/max values and
 * snaps to specific resolutions. It is determined by the following
- * options: `resolutions`, `maxResolution`, `maxZoom` and `zoomFactor`.
+ * options: `resolutions`, `maxResolution`, `maxZoom`, and `zoomFactor`.
 * If `resolutions` is set, the other three options are ignored. See
 * documentation for each option for more information. By default, the view
 * only has a min/max restriction and allow intermediary zoom levels when
@@ -226,7 +226,7 @@ const DEFAULT_MIN_ZOOM = 0;
 *
 * The *rotation constraint* snaps to specific angles. It is determined
 * by the following options: `enableRotation` and `constrainRotation`.
- * By default rotation is allowed and its value is snapped to zero when approaching the
+ * By default the rotation value is snapped to zero when approaching the
 * horizontal.
 *
 * The *center constraint* is determined by the `extent` option. By
@@ -1409,19 +1409,11 @@ function animationCallback(callback, returnValue) {
 */
 export function createCenterConstraint(options) {
  if (options.extent !== undefined) {
-    const smooth = options.smoothExtentConstraint !== undefined ? options.smoothExtentConstraint : true;
-    return createExtent(options.extent, options.constrainOnlyCenter, smooth);
+    return createExtent(options.extent, options.constrainOnlyCenter,
+      options.smoothExtentConstraint !== undefined ? options.smoothExtentConstraint : true);
+  } else {
+    return centerNone;
  }
-
-  const projection = createProjection(options.projection, 'EPSG:3857');
-  if (options.multiWorld !== true && projection.isGlobal()) {
-    const extent = projection.getExtent().slice();
-    extent[0] = -Infinity;
-    extent[2] = Infinity;
-    return createExtent(extent, false, false);
-  }
-
-  return centerNone;
 }


--- a/src/ol/control.js
+++ b/src/ol/control.js
@@ -1,10 +1,6 @@
 /**
 * @module ol/control
 */
-import Collection from './Collection.js';
-import Attribution from './control/Attribution.js';
-import Rotate from './control/Rotate.js';
-import Zoom from './control/Zoom.js';

 export {default as Attribution} from './control/Attribution.js';
 export {default as Control} from './control/Control.js';
@@ -16,59 +12,4 @@ export {default as ScaleLine} from './control/ScaleLine.js';
 export {default as Zoom} from './control/Zoom.js';
 export {default as ZoomSlider} from './control/ZoomSlider.js';
 export {default as ZoomToExtent} from './control/ZoomToExtent.js';
-
-/**
- * @typedef {Object} DefaultsOptions
- * @property {boolean} [attribution=true] Include
- * {@link module:ol/control/Attribution~Attribution}.
- * @property {import("./control/Attribution.js").Options} [attributionOptions]
- * Options for {@link module:ol/control/Attribution~Attribution}.
- * @property {boolean} [rotate=true] Include
- * {@link module:ol/control/Rotate~Rotate}.
- * @property {import("./control/Rotate.js").Options} [rotateOptions] Options
- * for {@link module:ol/control/Rotate~Rotate}.
- * @property {boolean} [zoom] Include {@link module:ol/control/Zoom~Zoom}.
- * @property {import("./control/Zoom.js").Options} [zoomOptions] Options for
- * {@link module:ol/control/Zoom~Zoom}.
- * @api
- */
-
-
-/**
- * Set of controls included in maps by default. Unless configured otherwise,
- * this returns a collection containing an instance of each of the following
- * controls:
- * * {@link module:ol/control/Zoom~Zoom}
- * * {@link module:ol/control/Rotate~Rotate}
- * * {@link module:ol/control/Attribution~Attribution}
- *
- * @param {DefaultsOptions=} opt_options
- * Defaults options.
- * @return {Collection<import("./control/Control.js").default>}
- * Controls.
- * @api
- */
-export function defaults(opt_options) {
-
-  const options = opt_options ? opt_options : {};
-
-  const controls = new Collection();
-
-  const zoomControl = options.zoom !== undefined ? options.zoom : true;
-  if (zoomControl) {
-    controls.push(new Zoom(options.zoomOptions));
-  }
-
-  const rotateControl = options.rotate !== undefined ? options.rotate : true;
-  if (rotateControl) {
-    controls.push(new Rotate(options.rotateOptions));
-  }
-
-  const attributionControl = options.attribution !== undefined ?
-    options.attribution : true;
-  if (attributionControl) {
-    controls.push(new Attribution(options.attributionOptions));
-  }
-
-  return controls;
-}
+export {defaults} from './control/util.js';
--- a/src/ol/control/OverviewMap.js
+++ b/src/ol/control/OverviewMap.js
@@ -1,8 +1,8 @@
 /**
 * @module ol/control/OverviewMap
 */
-import PluggableMap from '../PluggableMap.js';
-import CompositeMapRenderer from '../renderer/Composite.js';
+import Collection from '../Collection.js';
+import Map from '../Map.js';
 import MapEventType from '../MapEventType.js';
 import MapProperty from '../MapProperty.js';
 import {getChangeEventType} from '../Object.js';
@@ -35,13 +35,6 @@ const MAX_RATIO = 0.75;
 const MIN_RATIO = 0.1;


-class ControlledMap extends PluggableMap {
-  createRenderer() {
-    return new CompositeMapRenderer(this);
-  }
-}
-
-
 /**
 * @typedef {Object} Options
 * @property {string} [className='ol-overviewmap'] CSS class name.
@@ -51,8 +44,8 @@ class ControlledMap extends PluggableMap {
 * @property {boolean} [collapsible=true] Whether the control can be collapsed or not.
 * @property {string|HTMLElement} [label='»'] Text label to use for the collapsed
 * overviewmap button. Instead of text, also an element (e.g. a `span` element) can be used.
- * @property {Array<import("../layer/Layer.js").default>|import("../Collection.js").default<import("../layer/Layer.js").default>} [layers]
- * Layers for the overview map.
+ * @property {Array<import("../layer/Layer.js").default>|import("../Collection.js").default<import("../layer/Layer.js").default>} layers
+ * Layers for the overview map (mandatory).
 * @property {function(import("../MapEvent.js").default)} [render] Function called when the control
 * should be re-rendered. This is called in a `requestAnimationFrame` callback.
 * @property {HTMLElement|string} [target] Specify a target if you want the control
@@ -150,18 +143,24 @@ class OverviewMap extends Control {
    this.ovmapDiv_.className = 'ol-overviewmap-map';

    /**
-     * @type {ControlledMap}
+     * @type {import("../Map.js").default}
     * @private
     */
-    this.ovmap_ = new ControlledMap({
+    this.ovmap_ = new Map({
+      controls: new Collection(),
+      interactions: new Collection(),
      view: options.view
    });
    const ovmap = this.ovmap_;

    if (options.layers) {
-      options.layers.forEach(function(layer) {
-        ovmap.addLayer(layer);
-      });
+      /** @type {Array<import("../layer/Layer.js").default>} */ (options.layers).forEach(
+        /**
+         * @param {import("../layer/Layer.js").default} layer Layer.
+         */
+        (function(layer) {
+          ovmap.addLayer(layer);
+        }).bind(this));
    }

    const box = document.createElement('div');
--- a/src/ol/control/util.js
+++ b/src/ol/control/util.js
@@ -0,0 +1,65 @@
+/**
+ * @module ol/control/util
+ */
+import Collection from '../Collection.js';
+import Attribution from './Attribution.js';
+import Rotate from './Rotate.js';
+import Zoom from './Zoom.js';
+
+
+/**
+ * @typedef {Object} DefaultsOptions
+ * @property {boolean} [attribution=true] Include
+ * {@link module:ol/control/Attribution~Attribution}.
+ * @property {import("./Attribution.js").Options} [attributionOptions]
+ * Options for {@link module:ol/control/Attribution~Attribution}.
+ * @property {boolean} [rotate=true] Include
+ * {@link module:ol/control/Rotate~Rotate}.
+ * @property {import("./Rotate.js").Options} [rotateOptions] Options
+ * for {@link module:ol/control/Rotate~Rotate}.
+ * @property {boolean} [zoom] Include {@link module:ol/control/Zoom~Zoom}.
+ * @property {import("./Zoom.js").Options} [zoomOptions] Options for
+ * {@link module:ol/control/Zoom~Zoom}.
+ * @api
+ */
+
+
+/**
+ * Set of controls included in maps by default. Unless configured otherwise,
+ * this returns a collection containing an instance of each of the following
+ * controls:
+ * * {@link module:ol/control/Zoom~Zoom}
+ * * {@link module:ol/control/Rotate~Rotate}
+ * * {@link module:ol/control/Attribution~Attribution}
+ *
+ * @param {DefaultsOptions=} opt_options
+ * Defaults options.
+ * @return {Collection<import("./Control.js").default>}
+ * Controls.
+ * @function module:ol/control.defaults
+ * @api
+ */
+export function defaults(opt_options) {
+
+  const options = opt_options ? opt_options : {};
+
+  const controls = new Collection();
+
+  const zoomControl = options.zoom !== undefined ? options.zoom : true;
+  if (zoomControl) {
+    controls.push(new Zoom(options.zoomOptions));
+  }
+
+  const rotateControl = options.rotate !== undefined ? options.rotate : true;
+  if (rotateControl) {
+    controls.push(new Rotate(options.rotateOptions));
+  }
+
+  const attributionControl = options.attribution !== undefined ?
+    options.attribution : true;
+  if (attributionControl) {
+    controls.push(new Attribution(options.attributionOptions));
+  }
+
+  return controls;
+}
--- a/src/ol/events/EventType.js
+++ b/src/ol/events/EventType.js
@@ -14,13 +14,6 @@ export default {
   */
  CHANGE: 'change',

-  /**
-   * Generic error event. Triggered when an error occurs.
-   * @event module:ol/events/Event~Event#error
-   * @api
-   */
-  ERROR: 'error',
-
  CLEAR: 'clear',
  CONTEXTMENU: 'contextmenu',
  CLICK: 'click',
@@ -28,6 +21,7 @@ export default {
  DRAGENTER: 'dragenter',
  DRAGOVER: 'dragover',
  DROP: 'drop',
+  ERROR: 'error',
  KEYDOWN: 'keydown',
  KEYPRESS: 'keypress',
  LOAD: 'load',
--- a/src/ol/format.js
+++ b/src/ol/format.js
@@ -7,7 +7,6 @@ export {default as GeoJSON} from './format/GeoJSON.js';
 export {default as GML} from './format/GML.js';
 export {default as GPX} from './format/GPX.js';
 export {default as IGC} from './format/IGC.js';
-export {default as IIIFInfo} from './format/IIIFInfo.js';
 export {default as KML} from './format/KML.js';
 export {default as MVT} from './format/MVT.js';
 export {default as OWS} from './format/OWS.js';
--- a/Show More
+++ b/Show More