Publish with beta tag

Include full filename in import specifier

.circleci/config.yml

@@ -27,6 +27,10 @@ jobs:
           name: Run Tests
           command: npm test
 
+      - store_artifacts:
+          path: coverage/
+          destination: coverage
+
       - store_artifacts:
           path: rendering/cases/
           destination: rendering
@@ -38,3 +42,11 @@ jobs:
       - store_artifacts:
           path: build/examples
           destination: examples
+
+      - run:
+          name: Build API Docs
+          command: npm run apidoc
+
+      - store_artifacts:
+          path: build/apidoc
+          destination: apidoc

.github/FUNDING.yml

@@ -0,0 +1,8 @@
+# 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

.github/stale.yml

@@ -0,0 +1,17 @@
+# 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

LICENSE.md

@@ -1,26 +1,25 @@
-Copyright 2005-present OpenLayers Contributors. All rights reserved.
+BSD 2-Clause License
 
-Redistribution and use in source and binary forms, with or without modification,
-are permitted provided that the following conditions are met:
+Copyright 2005-present, OpenLayers Contributors
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
 
 1. Redistributions of source code must retain the above copyright notice, this
-list of conditions and the following disclaimer.
+   list of conditions and the following disclaimer.
 
 2. Redistributions in binary form must reproduce the above copyright notice,
-this list of conditions and the following disclaimer in the documentation and/or
-other materials provided with the distribution.
+   this list of conditions and the following disclaimer in the documentation
+   and/or other materials provided with the distribution.
 
-THIS SOFTWARE IS PROVIDED BY OPENLAYERS CONTRIBUTORS ``AS IS'' AND ANY EXPRESS
-OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
-MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT
-SHALL COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT,
-INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
-LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
-PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF
-LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE
-OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF
-ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
-
-The views and conclusions contained in the software and documentation are those
-of the authors and should not be interpreted as representing official policies,
-either expressed or implied, of OpenLayers Contributors.
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

README.md

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

changelog/upgrade-notes.md

@@ -4,6 +4,38 @@
 
 #### Backwards incompatible changes
 
+#### Removal of `GEOLOCATION` constant from `ol/has`
+
+If you were previously using this constant, you can check if `'geolocation'` is define in `navigator` instead.
+
+```js
+if ('geolocation' in navigator) {
+  // ...
+}
+```
+
+#### Removal of CSS print rules
+
+The CSS media print rules were removed from the `ol.css` file. To get the previous behavior, use the following CSS:
+
+```css
+@media print {
+  .ol-control {
+    display: none;
+  }
+}
+```
+
+#### Removal of optional this arguments
+
+The optional this (i.e. opt_this) arguments were removed from the following methods.
+Please use closures, the es6 arrow function or the bind method to achieve this effect (Bind is explained here:
+https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind).
+
+* `forEachCorner` in `ol/extent`
+* `LRUCache#forEach`
+* `RBush#forEach` and `RBush#forEachInExtent`
+
 ##### The `setCenter`, `setZoom`, `setResolution` and `setRotation` methods on `ol/View` do not bypass constraints anymore
 
 Previously, these methods allowed setting values that were inconsistent with the given view constraints.
@@ -12,7 +44,7 @@ target values are provided and constraints are applied on these to determine the
 
 ##### Removal of the `constrainResolution` option on `View.fit`, `PinchZoom`, `MouseWheelZoom` and `ol/interaction.js`
 
-The `constrainResolution` option is now only supported by the `View` class. A `View.setResolutionConstrained` method was added as well.
+The `constrainResolution` option is now only supported by the `View` class. A `View.setConstrainResolution` method was added as well.
 
 Generally, the responsibility of applying center/rotation/resolutions constraints was moved from interactions and controls to the `View` class.
 
@@ -22,6 +54,10 @@ 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
+
+Previously, maps showed multiple worlds at low zoom levels. In addition, it used to be possible to pan off the north or south edge of the world.  Now, the view is restricted to show only one world, and you cannot pan off the edge. To get the previous behavior, configure the `ol/View` with `multiWorld: true`.
+
 ##### Removal of deprecated methods
 
 The `inherits` function that was used to inherit the prototype methods from one constructor into another has been removed.
@@ -84,6 +120,14 @@ 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.

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 [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>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>The view manages the visual parameters of the map view, like resolution or rotation.</p>
-[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>
+<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>
 </tr><tr>
 <th>Controls</th><th>Interactions</th><th>Sources and formats</th>
 </tr><tr>
-<td>[Map default controls](module-ol_control_util.html#.defaults)<br>
-[All controls](module-ol_control_Control-Control.html)
+<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>
 <td>
-[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>
+<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>
 <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 [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>
+<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>
 <td>
-[ol/Geolocation](module-ol_Geolocation.html)<br>
-[ol/Overlay](module-ol_Overlay-Overlay.html)<br></td>
+<a href="module-ol_Geolocation.html">ol/Geolocation</a><br>
+<a href="module-ol_Overlay-Overlay.html">ol/Overlay</a><br></td>
 </tr></table>
 
 &nbsp;

config/jsdoc/api/plugins/events.js

@@ -1,32 +1,29 @@
 const events = {};
-const classes = {};
 
 exports.handlers = {
 
   newDoclet: function(e) {
     const doclet = e.doclet;
-    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;
+    if (doclet.kind !== 'event') {
+      return;
     }
+
+    const cls = doclet.longname.split('#')[0];
+    if (!(cls in events)) {
+      events[cls] = [];
+    }
+    events[cls].push(doclet.longname);
   },
 
   parseComplete: function(e) {
     const doclets = e.doclets;
-    let doclet, i, ii, j, jj, event, fires;
-    for (i = 0, ii = doclets.length - 1; i < ii; ++i) {
-      doclet = doclets[i];
+    for (let i = 0, ii = doclets.length - 1; i < ii; ++i) {
+      const doclet = doclets[i];
       if (doclet.fires) {
         if (doclet.kind == 'class') {
-          fires = [];
-          for (j = 0, jj = doclet.fires.length; j < jj; ++j) {
-            event = doclet.fires[j].replace('event:', '');
+          const fires = [];
+          for (let j = 0, jj = doclet.fires.length; j < jj; ++j) {
+            const event = doclet.fires[j].replace('event:', '');
             if (events[event]) {
               fires.push.apply(fires, events[event]);
             } else if (doclet.fires[j] !== 'event:ObjectEvent') {

config/jsdoc/api/plugins/inheritdoc.js

@@ -1,12 +1,8 @@
 /*
  * This is a hack to prevent inheritDoc tags from entirely removing
  * documentation of the method that inherits the documentation.
- *
- * TODO: Remove this hack when https://github.com/jsdoc3/jsdoc/issues/53
- * is addressed.
  */
 
-
 exports.defineTags = function(dictionary) {
   dictionary.defineTag('inheritDoc', {
     mustHaveValue: false,
@@ -92,10 +88,15 @@ exports.handlers = {
                     incompleteDoclet.stability = stability;
                     for (key in candidate) {
                       if (candidate.hasOwnProperty(key) &&
-                          keepKeys.indexOf(key) == -1) {
+                        keepKeys.indexOf(key) == -1) {
                         incompleteDoclet[key] = candidate[key];
                       }
                     }
+                    // We have found a matching parent doc and applied it so we
+                    // don't want to ignore this doclet anymore.
+                    incompleteDoclet.ignore = false;
+                    // We found a match so we can stop break
+                    break;
                   }
                 }
               }

doc/errors/index.md

@@ -220,3 +220,11 @@ 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.

examples/.eslintrc

@@ -5,7 +5,6 @@
     "common": false,
     "createMapboxStreetsV6Style": false,
     "d3": false,
-    "domtoimage": false,
     "geojsonvt": false,
     "GyroNorm": false,
     "jsPDF": false,

examples/center.js

@@ -5,6 +5,7 @@ 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()
@@ -51,21 +52,21 @@ const zoomtoswitzerland =
     document.getElementById('zoomtoswitzerland');
 zoomtoswitzerland.addEventListener('click', function() {
   const feature = source.getFeatures()[0];
-  const polygon = /** @type {import("../src/ol/geom/SimpleGeometry.js").default} */ (feature.getGeometry());
+  const polygon = 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 = /** @type {import("../src/ol/geom/SimpleGeometry.js").default} */ (feature.getGeometry());
+  const point = 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 = /** @type {import("../src/ol/geom/Point.js").default} */ (feature.getGeometry());
+  const point = feature.getGeometry();
   const size = map.getSize();
   view.centerOn(point.getCoordinates(), size, [570, 500]);
 }, false);

examples/color-manipulation.js

@@ -100,8 +100,7 @@ function xyz2rgb(x) {
 
 const raster = new RasterSource({
   sources: [new Stamen({
-    layer: 'watercolor',
-    transition: 0
+    layer: 'watercolor'
   })],
   operation: function(pixels, data) {
     const hcl = rgb2hcl(pixels[0]);

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@4.12.0/build/d3.js
+  - https://unpkg.com/d3@5.9.2/dist/d3.js
   - https://unpkg.com/topojson@3.0.2/dist/topojson.js
 ---
 <div id="map" class="map"></div>

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';
+import SourceState from '../src/ol/source/State.js';
 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', function(error, us) {
+d3.json('data/topojson/us.json').then(function(us) {
 
   const layer = new CanvasLayer({
     features: topojson.feature(us, us.objects.counties)

examples/data/square.svg

@@ -0,0 +1,7 @@
+<?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>

examples/device-orientation.js

@@ -40,6 +40,6 @@ gn.init().then(function() {
     center[0] -= resolution * gamma * 25;
     center[1] += resolution * beta * 25;
 
-    view.setCenter(view.constrainCenter(center));
+    view.setCenter(center);
   });
 });

examples/earthquake-clusters.css

@@ -1,18 +0,0 @@
-#map {
-  position: relative;
-}
-#info {
-  position: absolute;
-  height: 1px;
-  width: 1px;
-  z-index: 100;
-}
-.tooltip.in {
-  opacity: 1;
-}
-.tooltip.top .tooltip-arrow {
-  border-top-color: white;
-}
-.tooltip-inner {
-  border: 2px solid white;
-}

examples/export-map.css

@@ -0,0 +1,6 @@
+.overlay {
+  background-color: yellow;
+  border-radius: 6px;
+  padding: 4px;
+  white-space: nowrap;
+}

examples/export-map.html

@@ -3,12 +3,13 @@ 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/dom-to-image-more">dom-to-image-more</a>
+  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>
   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>

examples/export-map.js

@@ -1,9 +1,12 @@
 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({
@@ -23,9 +26,23 @@ 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() {
-    domtoimage.toPng(map.getViewport().querySelector('.ol-layers'))
+    toPng(map.getTargetElement(), exportOptions)
       .then(function(dataURL) {
         const link = document.getElementById('image-download');
         link.href = dataURL;

examples/export-pdf.html

@@ -7,7 +7,6 @@ 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">

examples/export-pdf.js

@@ -4,6 +4,8 @@ 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()
 });
@@ -41,6 +43,15 @@ 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() {
@@ -57,15 +68,14 @@ exportButton.addEventListener('click', function() {
   const extent = map.getView().calculateExtent(size);
 
   map.once('rendercomplete', function() {
-    domtoimage.toJpeg(map.getViewport().querySelector('.ol-layers')).then(function(dataUrl) {
+    toJpeg(map.getTargetElement(), exportOptions).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,
-        constrainResolution: false
+        size: size
       });
       exportButton.disabled = false;
       document.body.style.cursor = 'auto';

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/util';
-import ZoomSlider from '../src/ol/control/ZoomSlider';
+import {defaults as defaultControls} from '../src/ol/control.js';
+import ZoomSlider from '../src/ol/control/ZoomSlider.js';
 
 const view = new View({
   center: [328627.563458, 5921296.662223],

examples/extent-interaction.js

@@ -1,6 +1,5 @@
 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';
@@ -27,9 +26,7 @@ const map = new Map({
   })
 });
 
-const extent = new ExtentInteraction({
-  condition: platformModifierKeyOnly
-});
+const extent = new ExtentInteraction();
 map.addInteraction(extent);
 extent.setActive(false);
 

examples/feature-move-animation.js

@@ -67,10 +67,10 @@ const routeFeature = new Feature({
   type: 'route',
   geometry: route
 });
-const geoMarker = new Feature({
+const geoMarker = /** @type Feature<import("../src/ol/geom/Point").default> */(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 = /** @type {import("../src/ol/geom/Point").default} */ (geoMarker.getGeometry());
+  const geometry = geoMarker.getGeometry();
   geometry.setCoordinates(coord);
   //remove listener
   vectorLayer.un('postrender', moveFeature);

examples/filter-points-webgl.html

@@ -0,0 +1,25 @@
+---
+layout: example.html
+title: Filtering features with WebGL
+shortdesc: Using WebGL to filter large quantities of features
+docs: >
+  This example shows how to use `ol/renderer/webgl/PointsLayer` to dynamically filter a large amount
+    of point geometries. The above map is based on a dataset from the NASA containing 45k recorded meteorite
+    landing sites. Each meteorite is marked by a circle on the map (the bigger the circle, the heavier
+    the object). A pulse effect has been added, which is slightly offset by the year of the impact.
+
+  Adjusting the sliders causes the objects outside of the date range to be filtered out of the map. This is done using
+    a custom fragment shader on the layer renderer, and by using the `v_opacity` attribute of the rendered objects
+    to store the year of impact.
+
+tags: "webgl, icon, sprite, filter, feature"
+---
+<div id="map" class="map"></div>
+<form>
+  <div id="status">Show impacts between <span class="min-year"></span> and <span class="max-year"></span></div>
+
+  <label>Minimum year:</label>
+  <input id="min-year" type="range" min="1850" max="2015" step="1" value="1850"/>
+  <label>Maximum year:</label>
+  <input id="max-year" type="range" min="1850" max="2015" step="1" value="2015"/>
+</form>

examples/filter-points-webgl.js

@@ -0,0 +1,163 @@
+import Map from '../src/ol/Map.js';
+import View from '../src/ol/View.js';
+import TileLayer from '../src/ol/layer/Tile.js';
+import Feature from '../src/ol/Feature.js';
+import Point from '../src/ol/geom/Point.js';
+import VectorLayer from '../src/ol/layer/Vector.js';
+import {Vector} from '../src/ol/source.js';
+import {fromLonLat} from '../src/ol/proj.js';
+import WebGLPointsLayerRenderer from '../src/ol/renderer/webgl/PointsLayer.js';
+import {clamp, lerp} from '../src/ol/math.js';
+import Stamen from '../src/ol/source/Stamen.js';
+
+const vectorSource = new Vector({
+  attributions: 'NASA'
+});
+
+const oldColor = [180, 140, 140];
+const newColor = [255, 80, 80];
+
+const startTime = Date.now() * 0.001;
+
+// hanle input values & events
+const minYearInput = document.getElementById('min-year');
+const maxYearInput = document.getElementById('max-year');
+function updateStatusText() {
+  const div = document.getElementById('status');
+  div.querySelector('span.min-year').textContent = minYearInput.value;
+  div.querySelector('span.max-year').textContent = maxYearInput.value;
+}
+minYearInput.addEventListener('input', updateStatusText);
+minYearInput.addEventListener('change', updateStatusText);
+maxYearInput.addEventListener('input', updateStatusText);
+maxYearInput.addEventListener('change', updateStatusText);
+updateStatusText();
+
+class WebglPointsLayer extends VectorLayer {
+  createRenderer() {
+    return new WebGLPointsLayerRenderer(this, {
+      colorCallback: function(feature, color) {
+        // color is interpolated based on year
+        const ratio = clamp((feature.get('year') - 1800) / (2013 - 1800), 0, 1);
+
+        color[0] = lerp(oldColor[0], newColor[0], ratio) / 255;
+        color[1] = lerp(oldColor[1], newColor[1], ratio) / 255;
+        color[2] = lerp(oldColor[2], newColor[2], ratio) / 255;
+        color[3] = 1;
+
+        return color;
+      },
+      sizeCallback: function(feature) {
+        return 18 * clamp(feature.get('mass') / 200000, 0, 1) + 8;
+      },
+      fragmentShader: [
+        'precision mediump float;',
+
+        'uniform float u_time;',
+        'uniform float u_minYear;',
+        'uniform float u_maxYear;',
+
+        'varying vec2 v_texCoord;',
+        'varying float v_opacity;',
+        'varying vec4 v_color;',
+
+        'void main(void) {',
+        '  float impactYear = v_opacity;',
+
+        // filter out pixels if the year is outside of the given range
+        '  if (impactYear < u_minYear || v_opacity > u_maxYear) {',
+        '    discard;',
+        '  }',
+
+        '  vec2 texCoord = v_texCoord * 2.0 - vec2(1.0, 1.0);',
+        '  float sqRadius = texCoord.x * texCoord.x + texCoord.y * texCoord.y;',
+        '  float value = 2.0 * (1.0 - sqRadius);',
+        '  float alpha = smoothstep(0.0, 1.0, value);',
+
+        '  vec3 color = v_color.rgb;',
+        '  float period = 8.0;',
+        '  color.g *= 2.0 * (1.0 - sqrt(mod(u_time + impactYear * 0.025, period) / period));',
+
+        '  gl_FragColor = vec4(color, v_color.a);',
+        '  gl_FragColor.a *= alpha;',
+        '  gl_FragColor.rgb *= gl_FragColor.a;',
+        '}'
+      ].join(' '),
+      opacityCallback: function(feature) {
+        // here the opacity channel of the vertices is used to store the year of impact
+        return feature.get('year');
+      },
+      uniforms: {
+        u_time: function() {
+          return Date.now() * 0.001 - startTime;
+        },
+        u_minYear: function() {
+          return parseInt(minYearInput.value);
+        },
+        u_maxYear: function() {
+          return parseInt(maxYearInput.value);
+        }
+      }
+    });
+  }
+}
+
+
+function loadData() {
+  const client = new XMLHttpRequest();
+  client.open('GET', 'data/csv/meteorite_landings.csv');
+  client.onload = function() {
+    const csv = client.responseText;
+    const features = [];
+
+    let prevIndex = csv.indexOf('\n') + 1; // scan past the header line
+
+    let curIndex;
+    while ((curIndex = csv.indexOf('\n', prevIndex)) != -1) {
+      const line = csv.substr(prevIndex, curIndex - prevIndex).split(',');
+      prevIndex = curIndex + 1;
+
+      const coords = fromLonLat([parseFloat(line[4]), parseFloat(line[3])]);
+      if (isNaN(coords[0]) || isNaN(coords[1])) {
+        // guard against bad data
+        continue;
+      }
+
+      features.push(new Feature({
+        mass: parseFloat(line[1]) || 0,
+        year: parseInt(line[2]) || 0,
+        geometry: new Point(coords)
+      }));
+    }
+
+    vectorSource.addFeatures(features);
+  };
+  client.send();
+}
+
+loadData();
+
+const map = new Map({
+  layers: [
+    new TileLayer({
+      source: new Stamen({
+        layer: 'toner'
+      })
+    }),
+    new WebglPointsLayer({
+      source: vectorSource
+    })
+  ],
+  target: document.getElementById('map'),
+  view: new View({
+    center: [0, 0],
+    zoom: 2
+  })
+});
+
+// animate the map
+function animate() {
+  map.render();
+  window.requestAnimationFrame(animate);
+}
+animate();

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

@@ -1,5 +1,6 @@
 .map:-webkit-full-screen {
   height: 100%;
+  margin: 0;
 }
 .map:-ms-fullscreen {
   height: 100%;

examples/full-screen-source.css

@@ -1,5 +1,6 @@
 .fullscreen:-webkit-full-screen {
   height: 100%;
+  margin: 0;
 }
 .fullscreen:-ms-fullscreen {
   height: 100%;

examples/full-screen.css

@@ -1,5 +1,6 @@
 .map:-webkit-full-screen {
   height: 100%;
+  margin: 0;
 }
 .map:-ms-fullscreen {
   height: 100%;

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"
+tags: "heatmap, kml, vector, style, webgl"
 ---
 <div id="map" class="map"></div>
 <form>

examples/icon-color.css

@@ -1,3 +0,0 @@
-#map {
-  position: relative;
-}

examples/icon-color.js

@@ -25,7 +25,7 @@ rome.setStyle(new Style({
   image: new Icon({
     color: '#8959A8',
     crossOrigin: 'anonymous',
-    src: 'data/dot.png'
+    src: 'data/square.svg'
   })
 }));
 

examples/icon-sprite-webgl.js

@@ -1,16 +1,15 @@
 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';
-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';
+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 features = [];
 const vectorSource = new Vector({
   features: [],
   attributions: 'National UFO Reporting Center'
@@ -39,16 +38,17 @@ class WebglPointsLayer extends VectorLayer {
   createRenderer() {
     return new WebGLPointsLayerRenderer(this, {
       texture: texture,
-      colorCallback: function(feature, vertex, component) {
-        // component at index 3 is alpha
-        if (component === 3) {
-          return 1;
-        }
-
+      colorCallback: function(feature, color) {
         // 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);
-        return lerp(oldColor[component], newColor[component], ratio * ratio) / 255;
+
+        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;
       },
       texCoordCallback: function(feature, component) {
         let coords = shapeTextureCoords[feature.get('shape')];
@@ -70,17 +70,14 @@ function loadData() {
   client.open('GET', 'data/csv/ufo_sighting_data.csv');
   client.onload = function() {
     const csv = client.responseText;
-    let curIndex;
-    let prevIndex = 0;
-    let line;
-    while ((curIndex = csv.indexOf('\n', prevIndex)) > 0) {
-      line = csv.substr(prevIndex, curIndex - prevIndex).split(',');
-      prevIndex = curIndex + 1;
+    const features = [];
 
-      // skip header
-      if (prevIndex === 0) {
-        continue;
-      }
+    let prevIndex = csv.indexOf('\n') + 1; // scan past the header line
+
+    let curIndex;
+    while ((curIndex = csv.indexOf('\n', prevIndex)) != -1) {
+      const line = csv.substr(prevIndex, curIndex - prevIndex).split(',');
+      prevIndex = curIndex + 1;
 
       const coords = fromLonLat([parseFloat(line[5]), parseFloat(line[4])]);
 

examples/icon.css

@@ -1,3 +0,0 @@
-#map {
-  position: relative;
-}

examples/iiif.html

@@ -0,0 +1,16 @@
+---
+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>

examples/iiif.js

@@ -0,0 +1,46 @@
+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);

examples/index.html

@@ -11,9 +11,25 @@
       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;
@@ -182,9 +198,9 @@
   <body>
 
     <header class="navbar navbar-fixed-top" role="navigation">
-      <div class="container">
+      <div class="container-fluid">
         <div class="display-table pull-left">
-          <a class="navbar-brand" href="./"><img src="./resources/logo-70x70.png">&nbsp;OpenLayers Examples</a>
+          <a class="navbar-brand" href="./"><img class="header-logo" src="./resources/logo-70x70.png">&nbsp;OpenLayers</a>
           <form class="navbar-form" role="search">
             <input name="q" type="text" id="keywords" class="search-query" placeholder="Search" autofocus>
             <span id="count"></span>

examples/mapbox-layer.html

@@ -6,9 +6,10 @@ docs: >
   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.51.0/dist/mapbox-gl.js
+  - https://unpkg.com/mapbox-gl@0.54.0/dist/mapbox-gl.js
+  - https://unpkg.com/mapbox-gl@0.54.0/dist/mapbox-gl.css
 cloak:
   - key: ER67WIiPdCQvhgsUjoWK
-    value: Your Mapbox access token from http://mapbox.com/ here
+    value: Your Mapbox access token from https://mapbox.com/ here
 ---
 <div id="map" class="map"></div>

examples/mapbox-layer.js

@@ -1,188 +1,67 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.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 Layer from '../src/ol/layer/Layer.js';
+import {toLonLat, fromLonLat} from '../src/ol/proj.js';
 import {Stroke, Style} from '../src/ol/style.js';
 import VectorLayer from '../src/ol/layer/Vector.js';
 import VectorSource from '../src/ol/source/Vector.js';
 import GeoJSON from '../src/ol/format/GeoJSON.js';
 
-class Mapbox extends Layer {
+const center = [-98.8, 37.9];
+const key = 'ER67WIiPdCQvhgsUjoWK';
 
-  /**
-   * @param {import('./Base.js').Options} options Layer options.
-   */
-  constructor(options) {
-    const baseOptions = assign({}, options);
-    super(baseOptions);
+const mbMap = new mapboxgl.Map({
+  style: 'https://maps.tilehosting.com/styles/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
+});
 
-    this.baseOptions = baseOptions;
+const mbLayer = new Layer({
+  render: function(frameState) {
+    const canvas = mbMap.getCanvas();
+    const viewState = frameState.viewState;
 
-    /**
-     * @private
-     * @type boolean
-     */
-    this.loaded = false;
+    const visible = mbLayer.getVisible();
+    canvas.style.display = visible ? 'block' : 'none';
 
-    this.initMap();
-  }
+    const opacity = mbLayer.getOpacity();
+    canvas.style.opacity = opacity;
 
-  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;
+    // adjust view parameters in mapbox
+    const rotation = viewState.rotation;
     if (rotation) {
-      this.mbmap.rotateTo(-rotation * 180 / Math.PI, {
+      mbMap.rotateTo(-rotation * 180 / Math.PI, {
         animate: false
       });
     }
-
-    // Re-render mbmap
-    const center = transformToLatLng(this.centerNextRender);
-    const zoom = view.getZoom() - 1;
-    this.mbmap.jumpTo({
-      center: center,
-      zoom: zoom
+    mbMap.jumpTo({
+      center: toLonLat(viewState.center),
+      zoom: viewState.zoom - 1,
+      animate: false
     });
-    return this.mbmap.getCanvas();
+
+    // 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;
   }
-
-  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({
@@ -202,21 +81,8 @@ const vectorLayer = new VectorLayer({
 const map = new Map({
   target: 'map',
   view: new View({
-    center: [-10997148, 4569099],
-    zoom: 4,
-    minZoom: 1,
-    extent: [-Infinity, -20048966.10, Infinity, 20048966.10],
-    smoothExtentConstraint: false,
-    smoothResolutionConstraint: false
-  })
+    center: fromLonLat(center),
+    zoom: 4
+  }),
+  layers: [mbLayer, vectorLayer]
 });
-
-const key = 'ER67WIiPdCQvhgsUjoWK';
-const mbLayer = new Mapbox({
-  map: map,
-  container: map.getTarget(),
-  style: 'https://maps.tilehosting.com/styles/bright/style.json?key=' + key
-});
-
-map.addLayer(mbLayer);
-map.addLayer(vectorLayer);

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 http://mapbox.com/ here
+    value: Your Mapbox access token from https://mapbox.com/ here
 ---
 <div id="map" class="map"></div>

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 http://mapbox.com/ here
+    value: Your Mapbox access token from https://mapbox.com/ here
 ---
 <div id="map" class="map"></div>

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://Public/Samples/Sheboygan/Maps/Sheboygan.MapDefinition';
+const mdf = 'Library://Samples/Sheboygan/Maps/Sheboygan.MapDefinition';
 const agentUrl =
-    'http://www.buoyshark.com/mapguide/mapagent/mapagent.fcgi?';
+    'http://138.197.230.93:8008/mapguide/mapagent/mapagent.fcgi?';
 const bounds = [
   -87.865114442365922,
   43.665065564837931,
@@ -24,8 +24,9 @@ const map = new Map({
         params: {
           MAPDEFINITION: mdf,
           FORMAT: 'PNG',
-          USERNAME: 'OpenLayers',
-          PASSWORD: 'OpenLayers'
+          VERSION: '3.0.0',
+          USERNAME: 'OLGuest',
+          PASSWORD: 'olguest'
         },
         ratio: 2
       })

examples/measure.css

@@ -1,4 +1,4 @@
-.tooltip {
+.ol-tooltip {
   position: relative;
   background: rgba(0, 0, 0, 0.5);
   border-radius: 4px;
@@ -6,18 +6,19 @@
   padding: 4px 8px;
   opacity: 0.7;
   white-space: nowrap;
+  font-size: 12px;
 }
-.tooltip-measure {
+.ol-tooltip-measure {
   opacity: 1;
   font-weight: bold;
 }
-.tooltip-static {
+.ol-tooltip-static {
   background-color: #ffcc33;
   color: black;
   border: 1px solid white;
 }
-.tooltip-measure:before,
-.tooltip-static:before {
+.ol-tooltip-measure:before,
+.ol-tooltip-static:before {
   border-top: 6px solid rgba(0, 0, 0, 0.5);
   border-right: 6px solid transparent;
   border-left: 6px solid transparent;
@@ -27,6 +28,6 @@
   margin-left: -7px;
   left: 50%;
 }
-.tooltip-static:before {
+.ol-tooltip-static:before {
   border-top-color: #ffcc33;
-}
+}

examples/measure.js

@@ -225,7 +225,7 @@ function addInteraction() {
 
   draw.on('drawend',
     function() {
-      measureTooltipElement.className = 'tooltip tooltip-static';
+      measureTooltipElement.className = 'ol-tooltip ol-tooltip-static';
       measureTooltip.setOffset([0, -7]);
       // unset sketch
       sketch = null;
@@ -245,7 +245,7 @@ function createHelpTooltip() {
     helpTooltipElement.parentNode.removeChild(helpTooltipElement);
   }
   helpTooltipElement = document.createElement('div');
-  helpTooltipElement.className = 'tooltip hidden';
+  helpTooltipElement.className = 'ol-tooltip hidden';
   helpTooltip = new Overlay({
     element: helpTooltipElement,
     offset: [15, 0],
@@ -263,7 +263,7 @@ function createMeasureTooltip() {
     measureTooltipElement.parentNode.removeChild(measureTooltipElement);
   }
   measureTooltipElement = document.createElement('div');
-  measureTooltipElement.className = 'tooltip tooltip-measure';
+  measureTooltipElement.className = 'ol-tooltip ol-tooltip-measure';
   measureTooltip = new Overlay({
     element: measureTooltipElement,
     offset: [0, -15],

examples/resources/common.js

@@ -38,6 +38,9 @@
           },
           "package.json": {
             content: pkgJson
+          },
+          'sandbox.config.json': {
+            content: '{"template": "parcel"}'
           }
         }
       });

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 http://mapbox.com/ here
+    value: Your Mapbox access token from https://mapbox.com/ here
 ---
 <div id="map" class="map"></div>
 <label>

examples/sea-level.js

@@ -24,8 +24,7 @@ function flood(pixels, data) {
 const key = 'pk.eyJ1IjoidHNjaGF1YiIsImEiOiJjaW5zYW5lNHkxMTNmdWttM3JyOHZtMmNtIn0.CDIBD8H-G2Gf-cPkIuWtRg';
 const elevation = new XYZ({
   url: 'https://api.mapbox.com/v4/mapbox.terrain-rgb/{z}/{x}/{y}.pngraw?access_token=' + key,
-  crossOrigin: 'anonymous',
-  transition: 0
+  crossOrigin: 'anonymous'
 });
 
 const raster = new RasterSource({

examples/shaded-relief.js

@@ -100,8 +100,7 @@ function shade(inputs, data) {
 
 const elevation = new XYZ({
   url: 'https://{a-d}.tiles.mapbox.com/v3/aj.sf-dem/{z}/{x}/{y}.png',
-  crossOrigin: 'anonymous',
-  transition: 0
+  crossOrigin: 'anonymous'
 });
 
 const raster = new Raster({

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 Examples</a>
+          <a class="navbar-brand" href="./"><img src="./resources/logo-70x70.png">&nbsp;OpenLayers</a>
         </div>
         <!-- menu items that get hidden below 768px width -->
         <nav class='collapse navbar-collapse navbar-responsive-collapse'>
@@ -122,14 +122,18 @@
           <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&gt;
+&lt;html lang="en"&gt;
   &lt;head&gt;
     &lt;title&gt;{{ title }}&lt;/title&gt;
     &lt;!-- The line below is only needed for old environments like Internet Explorer and Android 4.x --&gt;
     &lt;script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"&gt;&lt;/script&gt;{{#if extraHead.remote}}
-{{ indent extraHead.remote spaces=4 }}{{/if}}{{#if css.source}}
+{{ indent extraHead.remote spaces=4 }}{{/if}}
     &lt;style&gt;
-{{ indent css.source spaces=6 }}    &lt;/style&gt;{{/if}}
+      .map {
+        width: 100%;
+        height:400px;
+      }
+{{#if css.source}}{{ indent css.source spaces=6 }}{{/if}}    &lt;/style&gt;
   &lt;/head&gt;
   &lt;body&gt;
 {{ indent contents spaces=4 }}    &lt;script src="index.js"&gt;&lt;/script&gt;

examples/utfgrid.html

@@ -8,7 +8,7 @@ docs: >
 tags: "utfgrid, tilejson"
 cloak:
   - key: pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q
-    value: Your Mapbox access token from http://mapbox.com/ here
+    value: Your Mapbox access token from https://mapbox.com/ here
 ---
 <div id="map" class="map"></div>
 <div style="display: none;">

examples/webpack/config.js

@@ -19,16 +19,25 @@ 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: {

examples/webpack/worker-loader.js

@@ -0,0 +1,17 @@
+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;

examples/wms-time.js

@@ -46,7 +46,7 @@ function updateInfo() {
 
 function setTime() {
   startDate.setMinutes(startDate.getMinutes() + 15);
-  if (startDate > Date.now()) {
+  if (startDate > new Date()) {
     startDate = threeHoursAgo();
   }
   layers[1].getSource().updateParams({'TIME': startDate.toISOString()});

examples/worker.html

@@ -0,0 +1,10 @@
+---
+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>

examples/worker.js

@@ -0,0 +1,35 @@
+/* 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});
+});

examples/zoomify.html

@@ -11,5 +11,6 @@ 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>

examples/zoomify.js

@@ -12,6 +12,8 @@ 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'
@@ -20,12 +22,15 @@ 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
-    resolutions: layer.getSource().getTileGrid().getResolutions(),
+    minResolution: resolutions[resolutions.length - 1],
+    maxResolution: resolutions[0],
     // constrain the center: center cannot be set outside this extent
     extent: extent
   })
@@ -36,17 +41,73 @@ const control = document.getElementById('zoomifyProtocol');
 control.addEventListener('change', function(event) {
   const value = event.currentTarget.value;
   if (value === 'iip') {
-    layer.setSource(new Zoomify({
-      url: iipUrl,
-      size: [imgWidth, imgHeight],
-      crossOrigin: 'anonymous'
-    }));
+    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);
   } else if (value === 'zoomify') {
-    layer.setSource(new Zoomify({
-      url: zoomifyUrl,
-      size: [imgWidth, imgHeight],
-      crossOrigin: 'anonymous'
-    }));
+    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);
   }
 
 });

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ol",
-  "version": "5.3.0",
+  "version": "6.0.0-beta.9",
   "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 && 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 && node tasks/serialize-workers && tsc --project config/tsconfig-build.json",
     "typecheck": "tsc --pretty",
-    "apidoc": "jsdoc config/jsdoc/api/index.md -c config/jsdoc/api/conf.json -P package.json -d build/apidoc"
+    "apidoc": "jsdoc -R config/jsdoc/api/index.md -c config/jsdoc/api/conf.json -P package.json -d build/apidoc"
   },
   "main": "index.js",
   "repository": {
@@ -38,60 +38,70 @@
   "dependencies": {
     "pbf": "3.2.0",
     "pixelworks": "1.1.0",
-    "rbush": "2.0.2"
+    "rbush": "^3.0.0"
   },
   "devDependencies": {
-    "@openlayers/eslint-plugin": "^4.0.0-beta.1",
+    "@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.6",
+    "@types/geojson": "^7946.0.7",
     "@types/pbf": "^3.0.1",
-    "@types/rbush": "^2.0.2",
     "@types/topojson-specification": "^1.0.1",
-    "buble": "^0.19.6",
+    "babel-loader": "^8.0.5",
+    "buble": "^0.19.7",
     "buble-loader": "^0.5.1",
     "chaikin-smooth": "^1.0.4",
-    "clean-css-cli": "4.2.1",
-    "copy-webpack-plugin": "^5.0.0",
+    "clean-css-cli": "4.3.0",
+    "copy-webpack-plugin": "^5.0.3",
     "coveralls": "3.0.3",
-    "eslint": "^5.13.0",
-    "eslint-config-openlayers": "^11.0.0",
+    "eslint": "^5.16.0",
+    "eslint-config-openlayers": "^12.0.0",
     "expect.js": "0.3.1",
-    "front-matter": "^3.0.1",
-    "fs-extra": "^7.0.1",
-    "glob": "^7.1.2",
-    "globby": "^9.1.0",
-    "handlebars": "4.1.0",
+    "front-matter": "^3.0.2",
+    "fs-extra": "^8.0.0",
+    "glob": "^7.1.4",
+    "globby": "^9.2.0",
+    "handlebars": "4.1.2",
+    "html-to-image": "^0.1.0",
     "istanbul": "0.4.5",
-    "jquery": "3.3.1",
-    "jsdoc": "3.5.5",
-    "jsdoc-plugin-typescript": "^1.0.7",
-    "karma": "^4.0.0",
+    "istanbul-instrumenter-loader": "^3.0.1",
+    "jquery": "3.4.1",
+    "jsdoc": "3.6.2",
+    "jsdoc-plugin-typescript": "^2.0.1",
+    "karma": "^4.1.0",
     "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.0",
-    "marked": "0.6.1",
-    "mocha": "6.0.2",
-    "ol-mapbox-style": "^4.1.0",
+    "loglevelnext": "^3.0.1",
+    "marked": "0.6.2",
+    "mocha": "6.1.4",
+    "ol-mapbox-style": "^5.0.0-beta.2",
     "pixelmatch": "^4.0.2",
-    "pngjs": "^3.3.3",
+    "pngjs": "^3.4.0",
     "proj4": "2.5.0",
-    "puppeteer": "~1.11.0",
-    "serve-static": "^1.13.2",
+    "puppeteer": "~1.17.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",
     "shx": "^0.3.2",
-    "sinon": "^7.2.3",
-    "terser-webpack-plugin": "^1.2.2",
-    "typescript": "^3.2.2",
-    "url-polyfill": "^1.1.3",
+    "sinon": "^7.3.2",
+    "terser-webpack-plugin": "^1.2.3",
+    "typescript": "^3.4.5",
+    "url-polyfill": "^1.1.5",
     "walk": "^2.3.9",
-    "webpack": "4.29.6",
-    "webpack-cli": "^3.2.3",
-    "webpack-dev-middleware": "^3.5.2",
-    "webpack-dev-server": "^3.1.14",
-    "yargs": "^13.2.0"
+    "webpack": "4.32.2",
+    "webpack-cli": "^3.3.2",
+    "webpack-dev-middleware": "^3.6.2",
+    "webpack-dev-server": "^3.3.1",
+    "yargs": "^13.2.2"
   },
   "eslintConfig": {
     "extends": "openlayers",

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';
-import {Heatmap as HeatmapLayer} from '../../../src/ol/layer';
-import VectorSource from '../../../src/ol/source/Vector';
-import KML from '../../../src/ol/format/KML';
+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';
 
 const vector = new HeatmapLayer({
   source: new VectorSource({

rendering/cases/layer-clipping/main.js

@@ -0,0 +1,61 @@
+import Map from '../../../src/ol/Map.js';
+import View from '../../../src/ol/View.js';
+import XYZ from '../../../src/ol/source/XYZ.js';
+import TileLayer from '../../../src/ol/layer/Tile.js';
+import MultiPolygon from '../../../src/ol/geom/MultiPolygon.js';
+import Style from '../../../src/ol/style/Style.js';
+import Stroke from '../../../src/ol/style/Stroke.js';
+import {getVectorContext} from '../../../src/ol/render.js';
+
+const source = new XYZ({
+  url: '/data/tiles/osm/{z}/{x}/{y}.png',
+  transition: 0
+});
+
+const layer = new TileLayer({
+  source: source
+});
+
+const geometry = new MultiPolygon([
+  [[[-80, -40], [-40, 0], [-80, 40], [-120, 0], [-80, -40]]],
+  [[[80, -40], [120, 0], [80, 40], [40, 0], [80, -40]]]
+]).transform('EPSG:4326', 'EPSG:3857');
+
+const style = new Style({
+  stroke: new Stroke({
+    width: 2,
+    color: 'blue'
+  })
+});
+
+layer.on('prerender', function(event) {
+  const context = event.context;
+  context.save();
+
+  const vectorContext = getVectorContext(event);
+  vectorContext.setStyle(style);
+  vectorContext.drawGeometry(geometry);
+
+  context.clip();
+});
+
+layer.on('postrender', function(event) {
+  const context = event.context;
+  context.restore();
+
+  const vectorContext = getVectorContext(event);
+  vectorContext.setStyle(style);
+  vectorContext.drawGeometry(geometry);
+});
+
+new Map({
+  pixelRatio: 1,
+  target: 'map',
+  layers: [layer],
+  view: new View({
+    center: [0, 0],
+    zoom: 0
+  })
+});
+
+render();

rendering/cases/layer-group/main.js

@@ -0,0 +1,30 @@
+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();

rendering/cases/layer-image/main.js

@@ -0,0 +1,28 @@
+import Map from '../../../src/ol/Map.js';
+import View from '../../../src/ol/View.js';
+import Static from '../../../src/ol/source/ImageStatic.js';
+import {
+  get as getProjection,
+  transform,
+  transformExtent
+} from '../../../src/ol/proj.js';
+import ImageLayer from '../../../src/ol/layer/Image.js';
+const center = transform([-122.416667, 37.783333], 'EPSG:4326', 'EPSG:3857');
+
+new Map({
+  pixelRatio: 1,
+  target: 'map',
+  layers: [new ImageLayer({
+    source: new Static({
+      url: '/data/tiles/osm/5/5/12.png',
+      imageExtent: transformExtent([-123, 37, -122, 38], 'EPSG:4326', 'EPSG:3857'),
+      projection: getProjection('EPSG:3857')
+    })
+  })],
+  view: new View({
+    center,
+    zoom: 8
+  })
+});
+
+render();

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';
+import {fromLonLat} from '../../../src/ol/proj.js';
 import {transformExtent} from '../../../src/ol/proj.js';
-import XYZ from '../../../src/ol/source/XYZ';
+import XYZ from '../../../src/ol/source/XYZ.js';
 
 const center = fromLonLat([7, 50]);
 const extent = transformExtent([2, 47, 10, 53], 'EPSG:4326', 'EPSG:3857');

rendering/cases/layer-tile-none-square/main.js

@@ -0,0 +1,30 @@
+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 {createXYZ} from '../../../src/ol/tilegrid.js';
+
+const center = [-10997148, 4569099];
+
+const layer = new TileLayer({
+  source: new XYZ({
+    url: '/data/tiles/512x256/{z}/{x}/{y}.png',
+    tileGrid: createXYZ({
+      tileSize: [512, 256]
+    }),
+    transition: 0
+  })
+});
+
+const map = new Map({
+  target: 'map',
+  pixelRatio: 1,
+  view: new View({
+    center: center,
+    zoom: 5
+  })
+});
+
+map.addLayer(layer);
+
+render();

rendering/cases/layer-tile-opacity/main.js

@@ -0,0 +1,26 @@
+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';
+
+const center = fromLonLat([8.6, 50.1]);
+
+new Map({
+  layers: [
+    new TileLayer({
+      source: new XYZ({
+        url: '/data/tiles/satellite/{z}/{x}/{y}.jpg',
+        transition: 0
+      }),
+      opacity: 0.2
+    })
+  ],
+  target: 'map',
+  view: new View({
+    center: center,
+    zoom: 3
+  })
+});
+
+render();

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';
-import XYZ from '../../../src/ol/source/XYZ';
+import {fromLonLat} from '../../../src/ol/proj.js';
+import XYZ from '../../../src/ol/source/XYZ.js';
 
 const center = fromLonLat([8.6, 50.1]);
 

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';
-import XYZ from '../../../src/ol/source/XYZ';
+import {fromLonLat} from '../../../src/ol/proj.js';
+import XYZ from '../../../src/ol/source/XYZ.js';
 
 const center = fromLonLat([8.6, 50.1]);
 

rendering/cases/layer-tile-two-layers/main.js

@@ -0,0 +1,35 @@
+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';
+
+const center = fromLonLat([8.6, 50.1]);
+
+const layer1 = new TileLayer({
+  source: new XYZ({
+    url: '/data/tiles/satellite/{z}/{x}/{y}.jpg',
+    transition: 0
+  }),
+  opacity: 0.2
+});
+const layer2 = new TileLayer({
+  source: new XYZ({
+    url: '/data/tiles/stamen-labels/{z}/{x}/{y}.png',
+    transition: 0
+  })
+});
+
+const map = new Map({
+  pixelRatio: 1,
+  layers: [layer1, layer2],
+  target: 'map',
+  view: new View({
+    center: center,
+    zoom: 3
+  })
+});
+
+map.getView().setRotation(Math.PI / 2);
+
+render();

rendering/cases/layer-vector-decluttering/main.js

@@ -0,0 +1,167 @@
+import Map from '../../../src/ol/Map.js';
+import View from '../../../src/ol/View.js';
+import VectorSource from '../../../src/ol/source/Vector.js';
+import VectorLayer from '../../../src/ol/layer/Vector.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 LineString from '../../../src/ol/geom/LineString.js';
+
+let center = [1825927.7316762917, 6143091.089223046];
+const map = new Map({
+  pixelRatio: 1,
+  target: 'map',
+  view: new View({
+    center: center,
+    zoom: 13
+  })
+});
+
+const source1 = new VectorSource();
+const layer1 = new VectorLayer({
+  declutter: true,
+  source: source1
+});
+
+const source2 = new VectorSource();
+const layer2 = new VectorLayer({
+  declutter: true,
+  source: source2
+});
+
+const source3 = new VectorSource();
+const layer3 = new VectorLayer({
+  declutter: true,
+  source: source3
+});
+
+const source4 = new VectorSource();
+const layer4 = new VectorLayer({
+  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'
+      })
+    })
+  });
+});
+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({
+  geometry: new Point(center),
+  text: 'center'
+}));
+source3.addFeature(new Feature({
+  geometry: new Point([center[0] - 540, center[1]]),
+  text: 'west'
+}));
+source3.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
+  }),
+  text: new Text({
+    placement: 'line',
+    text: 'east-west',
+    font: 'italic bold 18px Ubuntu',
+    overflow: true
+  })
+}));
+source4.addFeature(point);
+source4.addFeature(line);
+map.addLayer(layer4);
+
+render({tolerance: 0.007});

rendering/cases/layer-vector-polygon-partial/main.js

@@ -0,0 +1,55 @@
+import Map from '../../../src/ol/Map.js';
+import View from '../../../src/ol/View.js';
+import VectorLayer from '../../../src/ol/layer/Vector.js';
+import VectorSource from '../../../src/ol/source/Vector.js';
+import Feature from '../../../src/ol/Feature.js';
+import Polygon from '../../../src/ol/geom/Polygon.js';
+import Style from '../../../src/ol/style/Style.js';
+import Stroke from '../../../src/ol/style/Stroke.js';
+import Fill from '../../../src/ol/style/Fill.js';
+
+const src = new VectorSource({
+  features: [
+    new Feature(new Polygon([[
+      [-22, 18],
+      [-22, 78],
+      [-9, 78],
+      [-9, 18],
+      [-22, 18]
+    ]])),
+    new Feature(new Polygon([[
+      [-9, 18],
+      [-9, 78],
+      [4, 78],
+      [4, 18],
+      [-9, 18]
+    ]]))
+  ]
+});
+const layer = new VectorLayer({
+  renderBuffer: 0,
+  source: src,
+  style: new Style({
+    stroke: new Stroke({
+      color: [0, 0, 0, 1],
+      width: 2
+    }),
+    fill: new Fill({
+      color: [255, 0, 0, 1]
+    })
+  })
+});
+const view = new View({
+  center: [-9.5, 78],
+  zoom: 2,
+  projection: 'EPSG:4326',
+  multiWorld: true
+});
+new Map({
+  pixelRatio: 1,
+  layers: [layer],
+  target: 'map',
+  view: view
+});
+
+render();

rendering/cases/layer-vector-polygon/main.js

@@ -0,0 +1,43 @@
+import Map from '../../../src/ol/Map.js';
+import View from '../../../src/ol/View.js';
+import VectorLayer from '../../../src/ol/layer/Vector.js';
+import VectorSource from '../../../src/ol/source/Vector.js';
+import Feature from '../../../src/ol/Feature.js';
+import Polygon from '../../../src/ol/geom/Polygon.js';
+import Style from '../../../src/ol/style/Style.js';
+import Fill from '../../../src/ol/style/Fill.js';
+
+const feature = new Feature({
+  geometry: new Polygon([
+    [[-180, -90], [180, -90], [180, 90], [-180, 90], [-180, -90]],
+    [[0, 60], [-17.6336, 24.2705], [-57.0634, 18.5410], [-28.5317, -9.2705], [-35.2671, -48.5410], [0, -30], [35.2671, -48.5410], [28.5317, -9.2705], [57.0634, 18.5410], [17.6336, 24.2705], [0, 60]]
+  ])
+});
+
+const src = new VectorSource({
+  features: [
+    feature
+  ]
+});
+const layer = new VectorLayer({
+  renderBuffer: 0,
+  source: src,
+  style: new Style({
+    fill: new Fill({
+      color: 'blue'
+    })
+  })
+});
+const view = new View({
+  center: [0, 0],
+  zoom: 1,
+  projection: 'EPSG:4326'
+});
+new Map({
+  pixelRatio: 1,
+  layers: [layer],
+  target: 'map',
+  view: view
+});
+
+render();

rendering/cases/layer-vector/main.js

@@ -0,0 +1,110 @@
+import Feature from '../../../src/ol/Feature.js';
+import Map from '../../../src/ol/Map.js';
+import View from '../../../src/ol/View.js';
+import VectorLayer from '../../../src/ol/layer/Vector.js';
+import VectorSource from '../../../src/ol/source/Vector.js';
+import Style from '../../../src/ol/style/Style.js';
+import Stroke from '../../../src/ol/style/Stroke.js';
+import Polygon from '../../../src/ol/geom/Polygon.js';
+import Circle from '../../../src/ol/geom/Circle.js';
+import LineString from '../../../src/ol/geom/LineString.js';
+
+const center = [1825927.7316762917, 6143091.089223046];
+
+const source1 = new VectorSource();
+const source2 = new VectorSource();
+const vectorLayer1 = new VectorLayer({
+  source: source1,
+  style: new Style({
+    stroke: new Stroke({
+      color: '#3399CC',
+      width: 1.25
+    })
+  })
+});
+const vectorLayer2 = new VectorLayer({
+  source: source2,
+  opacity: 0.6
+});
+
+function addCircle(r, source) {
+  source.addFeature(new Feature(new Circle(center, r)));
+}
+
+function addPolygon(r, source) {
+  source.addFeature(new Feature(new Polygon([
+    [
+      [center[0] - r, center[1] - r],
+      [center[0] + r, center[1] - r],
+      [center[0] + r, center[1] + r],
+      [center[0] - r, center[1] + r],
+      [center[0] - r, center[1] - r]
+    ]
+  ])));
+}
+
+const smallLine = new Feature(new LineString([
+  [center[0], center[1] - 1],
+  [center[0], center[1] + 1]
+]));
+smallLine.setStyle(new Style({
+  zIndex: -99,
+  stroke: new Stroke({width: 75, color: 'red'})
+}));
+smallLine.getGeometry().translate(-1000, 1000);
+source1.addFeature(smallLine);
+addPolygon(100, source1);
+addCircle(200, source1);
+addPolygon(250, source1);
+addCircle(500, source1);
+addPolygon(600, source1);
+addPolygon(720, source1);
+
+const smallLine2 = new Feature(new LineString([
+  [center[0], center[1] - 1000],
+  [center[0], center[1] + 1000]
+]));
+smallLine2.setStyle([
+  new Style({
+    stroke: new Stroke({width: 35, color: 'blue'})
+  }),
+  new Style({
+    stroke: new Stroke({width: 15, color: 'green'})
+  })
+]);
+smallLine2.getGeometry().translate(1000, 1000);
+source1.addFeature(smallLine2);
+
+const smallLine3 = new Feature(new LineString([
+  [center[0], center[1] - 1],
+  [center[0], center[1] + 1]
+]));
+smallLine3.setStyle([
+  new Style({
+    stroke: new Stroke({width: 75, color: 'red'})
+  }),
+  new Style({
+    stroke: new Stroke({width: 45, color: 'white'})
+  })
+]);
+smallLine3.getGeometry().translate(-1000, -1000);
+
+addPolygon(400, source2);
+addCircle(400, source2);
+source2.addFeature(smallLine3);
+
+const map = new Map({
+  layers: [
+    vectorLayer1,
+    vectorLayer2
+  ],
+  target: 'map',
+  view: new View({
+    center: center,
+    zoom: 13
+  })
+});
+
+map.getView().setRotation(Math.PI + Math.PI / 4);
+
+render();

rendering/cases/layer-vectorimage-decluttering/main.js

@@ -0,0 +1,167 @@
+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 LineString from '../../../src/ol/geom/LineString.js';
+
+let center = [1825927.7316762917, 6143091.089223046];
+const map = new Map({
+  pixelRatio: 1,
+  target: 'map',
+  view: new View({
+    center: center,
+    zoom: 13
+  })
+});
+
+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'
+      })
+    })
+  });
+});
+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({
+  geometry: new Point(center),
+  text: 'center'
+}));
+source3.addFeature(new Feature({
+  geometry: new Point([center[0] - 540, center[1]]),
+  text: 'west'
+}));
+source3.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
+  }),
+  text: new Text({
+    placement: 'line',
+    text: 'east-west',
+    font: 'italic bold 18px Ubuntu',
+    overflow: true
+  })
+}));
+source4.addFeature(point);
+source4.addFeature(line);
+map.addLayer(layer4);
+
+render({tolerance: 0.007});

rendering/cases/layer-vectorimage/main.js

@@ -0,0 +1,110 @@
+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 Style from '../../../src/ol/style/Style.js';
+import Stroke from '../../../src/ol/style/Stroke.js';
+import Polygon from '../../../src/ol/geom/Polygon.js';
+import Circle from '../../../src/ol/geom/Circle.js';
+import LineString from '../../../src/ol/geom/LineString.js';
+import VectorImageLayer from '../../../src/ol/layer/VectorImage.js';
+
+const center = [1825927.7316762917, 6143091.089223046];
+
+const source1 = new VectorSource();
+const source2 = new VectorSource();
+const vectorLayer1 = new VectorImageLayer({
+  source: source1,
+  style: new Style({
+    stroke: new Stroke({
+      color: '#3399CC',
+      width: 1.25
+    })
+  })
+});
+const vectorLayer2 = new VectorImageLayer({
+  source: source2,
+  opacity: 0.6
+});
+
+function addCircle(r, source) {
+  source.addFeature(new Feature(new Circle(center, r)));
+}
+
+function addPolygon(r, source) {
+  source.addFeature(new Feature(new Polygon([
+    [
+      [center[0] - r, center[1] - r],
+      [center[0] + r, center[1] - r],
+      [center[0] + r, center[1] + r],
+      [center[0] - r, center[1] + r],
+      [center[0] - r, center[1] - r]
+    ]
+  ])));
+}
+
+const smallLine = new Feature(new LineString([
+  [center[0], center[1] - 1],
+  [center[0], center[1] + 1]
+]));
+smallLine.setStyle(new Style({
+  zIndex: -99,
+  stroke: new Stroke({width: 75, color: 'red'})
+}));
+smallLine.getGeometry().translate(-1000, 1000);
+source1.addFeature(smallLine);
+addPolygon(100, source1);
+addCircle(200, source1);
+addPolygon(250, source1);
+addCircle(500, source1);
+addPolygon(600, source1);
+addPolygon(720, source1);
+
+const smallLine2 = new Feature(new LineString([
+  [center[0], center[1] - 1000],
+  [center[0], center[1] + 1000]
+]));
+smallLine2.setStyle([
+  new Style({
+    stroke: new Stroke({width: 35, color: 'blue'})
+  }),
+  new Style({
+    stroke: new Stroke({width: 15, color: 'green'})
+  })
+]);
+smallLine2.getGeometry().translate(1000, 1000);
+source1.addFeature(smallLine2);
+
+const smallLine3 = new Feature(new LineString([
+  [center[0], center[1] - 1],
+  [center[0], center[1] + 1]
+]));
+smallLine3.setStyle([
+  new Style({
+    stroke: new Stroke({width: 75, color: 'red'})
+  }),
+  new Style({
+    stroke: new Stroke({width: 45, color: 'white'})
+  })
+]);
+smallLine3.getGeometry().translate(-1000, -1000);
+
+addPolygon(400, source2);
+addCircle(1000, source2);
+source2.addFeature(smallLine3);
+
+const map = new Map({
+  layers: [
+    vectorLayer1,
+    vectorLayer2
+  ],
+  target: 'map',
+  view: new View({
+    center: center,
+    zoom: 13
+  })
+});
+
+map.getView().setRotation(Math.PI + Math.PI / 4);
+
+render({tolerance: 0.005});

rendering/cases/layer-vectortile-rotate-hidpi/main.js

@@ -0,0 +1,31 @@
+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';
+
+const map = new Map({
+  pixelRatio: 2,
+  layers: [
+    new VectorTileLayer({
+      source: new VectorTileSource({
+        format: new MVT(),
+        tileGrid: createXYZ(),
+        url: '/data/tiles/mapbox-streets-v6/{z}/{x}/{y}.vector.pbf',
+        transition: 0
+      })
+    })
+  ],
+  target: 'map',
+  view: new View({
+    center: [1825927.7316762917, 6143091.089223046],
+    zoom: 14
+  })
+});
+
+map.getView().setRotation(Math.PI / 4);
+render({
+  message: 'Vector tile layer rotates (hidip)',
+  tolerance: 0.01
+});

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';
-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';
+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';
 
 const vectorSource = new VectorSource({
   features: [