Tag for v6.0.0-beta.4

Update puppeteer to the latest version 🚀

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
 
@@ -41,14 +41,13 @@ See the following examples for more detail on bundling OpenLayers with your appl
  * Using [Parcel](https://github.com/openlayers/ol-parcel)
  * Using [Browserify](https://github.com/openlayers/ol-browserify)
 
-## TypeScript and VS Code IntelliSense support
+## IntelliSense support and type checking for VS Code
 
-The `ol` package contains a `src/` folder with JSDoc annotated sources. TypeScript can get type definitions from these sources with a `tsconfig.json` like this:
+The `ol` package contains a `src/` folder with JSDoc annotated sources. TypeScript can get type definitions from these sources with a `jsconfig.json` config file in the project root:
 ```js
 {
   "compilerOptions": {
-    // Enable JavaScript support
-    "allowJs": true,
+    "checkJs": true,
     // Point to the JSDoc typed sources when using modules from the ol package
     "baseUrl": "./",
     "paths": {
@@ -57,11 +56,14 @@ The `ol` package contains a `src/` folder with JSDoc annotated sources. TypeScri
     }
   },
   "include": [
-    // Include JavaScript files from the ol package
+    "**/*.js",
     "node_modules/ol/**/*.js"
   ]
 }
 ```
+Project template with this configuration: https://gist.github.com/9a7253cb4712e8bf38d75d8ac898e36c.
+
+Note that the above only works when authoring in plain JavaScript. For similar configurations with a `tsconfig.json` in TypeScript projects, your mileage may vary.
 
 ## Supported Browsers
 

changelog/upgrade-notes.md

@@ -4,11 +4,35 @@
 
 #### Backwards incompatible changes
 
-##### Removal of the deprecated "inherits" function
+##### The `setCenter`, `setZoom`, `setResolution` and `setRotation` methods on `ol/View` do not bypass constraints anymore
+
+Previously, these methods allowed setting values that were inconsistent with the given view constraints.
+This is no longer the case and all changes to the view state now follow the same logic:
+target values are provided and constraints are applied on these to determine the actual values to be used.
+
+##### Removal of the `constrainResolution` option on `View.fit`, `PinchZoom`, `MouseWheelZoom` and `ol/interaction.js`
+
+The `constrainResolution` option is now only supported by the `View` class. A `View.setConstrainResolution` method was added as well.
+
+Generally, the responsibility of applying center/rotation/resolutions constraints was moved from interactions and controls to the `View` class.
+
+##### The view `extent` option now applies to the whole viewport
+
+Previously, this options only constrained the view *center*. This behaviour can still be obtained by specifying `constrainCenterOnly` in the view options.
+
+As a side effect, the view `rotate` method is gone and has been replaced with `adjustRotation` which takes a delta as input.
+
+##### Zoom is constrained so only one world is visible
+
+Previously, maps showed multiple worlds at low zoom levels. Now, the view is restricted to show only one world. To get the previous behavior, configure the `ol/View` with `multiWorld: true`.
+
+##### Removal of deprecated methods
 
 The `inherits` function that was used to inherit the prototype methods from one constructor into another has been removed.
 The standard ECMAScript classes should be used instead.
 
+The deprecated `getSnapToPixel` and `setSnapToPixel` functions from the `ImageStyle` class have been removed.
+
 ##### New internal tile coordinates
 
 Previously, the internal tile coordinates used in the library had an unusual row order – the origin of the tile coordinate system was at the top left as expected, but the rows increased upwards.  This meant that all tile coordinates within a tile grid's extent had negative `y` values.
@@ -60,6 +84,10 @@ In addition (this should be exceedingly rare), if you previously created a `ol/t
 
 If you were previously using `VectorTile` layers with `renderMode: 'vector'`, you have to remove this configuration option. That mode was removed. `'hybrid'` (default) and `'image'` are still available.
 
+##### Removal of the "renderMode" option for vector layers
+
+If you were previously using `Vector` layers with `renderMode: 'image'`, you have to remove this configuration option. Instead, use the new `ol/layer/VectorImage` layer with your `ol/source/Vector`.
+
 ##### New `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.
@@ -93,6 +121,58 @@ Due to the constraint above (layers can only be added to a single map), the over
 
 Previously, a graticule was not a layer.  Now it is.  See the graticule example for details on how to add a graticule layer to your map.
 
+##### `ol/format/Feature` API change
+
+The `getLastExtent()` method, which was required for custom `tileLoadFunction`s in `ol/source/Vector`, has been removed because it is no longer needed (see below).
+
+##### `ol/VectorTile` API changes
+
+* Removal of the `getProjection()` and `setProjection()` methods. These were used in custom `tileLoadFunction`s on `ol/source/VectorTile`, which work differently now (see below).
+* Removal of the `getExtent()` and `setExtent()` methods. These were used in custom `tileLoadFunction`s on `ol/source/VectorTile`, which work differently now (see below).
+
+##### Custom tileLoadFunction on a VectorTile source needs changes
+
+Previously, applications needed to call `setProjection()` and `setExtent()` on the tile in a custom `tileLoadFunction` on `ol/source/VectorTile`. The format's `getLastExtent()` method was used to get the extent. All this is no longer needed. Instead, the `extent` (first argument to the loader function) and `projection` (third argument to the loader function) are simply passed as `extent` and `featureProjection` options to the format's `readFeatures()` method.
+
+Example for an old `tileLoadFunction`:
+
+```js
+function(tile, url) {
+  tile.setLoader(function() {
+    fetch(url).then(function(response) {
+      response.arrayBuffer().then(function(data) {
+        var format = tile.getFormat();
+        tile.setProjection(format.readProjection(data));
+        tile.setFeatures(format.readFeatures(data, {
+          // featureProjection is not required for ol/format/MVT
+          featureProjection: map.getView().getProjection()
+        }));
+        tile.setExtent(format.getLastExtent());
+      })
+    })
+  }
+});
+```
+
+This function needs to be changed to:
+
+```js
+function(tile, url) {
+  tile.setLoader(function(extent, resolution, projection) {
+    fetch(url).then(function(response) {
+      response.arrayBuffer().then(function(data) {
+        var format = tile.getFormat();
+        tile.setFeatures(format.readFeatures(data, {
+          // extent is only required for ol/format/MVT
+          extent: extent,
+          featureProjection: projection
+        }));
+      })
+    })
+  }
+});
+```
+
 ##### Drop of support for the experimental WebGL renderer
 
 The WebGL map and layers renderers are gone, replaced by a `WebGLHelper` function that provides a lightweight,
@@ -118,8 +198,19 @@ The removed classes and components are:
 Following the removal of the experimental WebGL renderer, the AtlasManager has been removed as well. The atlas was only used by this renderer.
 The non API `getChecksum` functions of the style is also removed.
 
+##### Change of the behavior of the vector source's clear() and refresh() methods
+
+The `ol/source/Vector#clear()` method no longer triggers a reload of the data from the server. If you were previously using `clear()` to refetch from the server, you now have to use `refresh()`.
+
+The `ol/source/Vector#refresh()` method now removes all features from the source and triggers a reload of the data from the server. If you were previously using the `refresh()` method to re-render a vector layer, you should instead call `ol/layer/Vector#changed()`.
+
 #### Other changes
 
+##### Allow declutter in image render mode
+
+It is now possible to configure vector tile layers with `declutter: true` and `renderMode: 'image'`. However, note that decluttering will be done per tile, resulting in labels and point symbols getting cut off at tile boundaries.
+Until now, using both options forced the render mode to be `hybrid`.
+
 ##### Always load tiles while animating or interacting
 
 `ol/PluggableMap` and subclasses no longer support the `loadTilesWhileAnimating` and `loadTilesWhileInteracting` options. These options were used to enable tile loading during animations and interactions. With the new DOM composition render strategy, it is no longer necessary to postpone tile loading until after animations or interactions.

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;
                   }
                 }
               }

config/tsconfig-build.json

@@ -37,7 +37,7 @@
     // "noFallthroughCasesInSwitch": true,    /* Report errors for fallthrough cases in switch statement. */
 
     /* Module Resolution Options */
-    // "moduleResolution": "node",            /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
+    "moduleResolution": "node",            /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
     // "baseUrl": "./",                       /* Base directory to resolve non-absolute module names. */
     // "paths": {},                           /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
     // "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */

doc/faq.md

@@ -21,7 +21,7 @@ Table of contents:
 * [Why aren't there any features in my source?](#why-aren-t-there-any-features-in-my-source-)
 * [How do I force a re-render of the map?](#how-do-i-force-a-re-render-of-the-map-)
 * [Why are my features not found?](#why-are-my-features-not-found-)
-
+* [Why is zooming or clicking off, inaccurate?](#user-content-why-is-zooming-or-clicking-off-inaccurate)
 
 ## What projection is OpenLayers using?
 
@@ -371,3 +371,30 @@ const vectorLayer = new VectorLayer({
 ```
 
 The recommended value is the size of the largest symbol, line width or label.
+
+## Why is zooming or clicking in the map off/inaccurate?
+
+OpenLayers does not update the map when the container element is resized. This can be caused by progressive updates
+to CSS styles or manually resizing the map. When that happens, any interaction will become inaccurate: the map would zoom in and out, and end up not being centered on the pointer. This makes it hard to do certain interactions, e.g. selecting the desired feature.
+
+There is currently no built-in way to react to element's size changes, as [Resize Observer API](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) is only implemented in Chrome.
+
+There is however an easy to use [polyfill](https://github.com/que-etc/resize-observer-polyfill):
+
+```javascript
+import Map from 'ol/Map';
+import ResizeObserver from 'resize-observer-polyfill';
+
+const mapElement = document.querySelector('#map')
+const map = new Map({
+  target: mapElement
+})
+
+const sizeObserver = new ResizeObserver(() => {
+  map.updateSize()
+})
+sizeObserver.observe(mapElement)
+
+// called when the map is destroyed
+// sizeObserver.disconnect()
+```

examples/bing-maps.html

@@ -12,9 +12,8 @@ cloak:
  <div id="map" class="map"></div>
  <select id="layer-select">
    <option value="Aerial">Aerial</option>
-   <option value="AerialWithLabels" selected>Aerial with labels</option>
-   <option value="Road">Road (static)</option>
-   <option value="RoadOnDemand">Road (dynamic)</option>
-   <option value="collinsBart">Collins Bart</option>
-   <option value="ordnanceSurvey">Ordnance Survey</option>
+   <option value="AerialWithLabelsOnDemand" selected>Aerial with labels</option>
+   <option value="RoadOnDemand">Road</option>
+   <option value="CanvasDark">Road dark</option>
+   <option value="OrdnanceSurvey">Ordnance Survey</option>
  </select>

examples/bing-maps.js

@@ -5,12 +5,11 @@ import BingMaps from '../src/ol/source/BingMaps.js';
 
 
 const styles = [
-  'Road',
   'RoadOnDemand',
   'Aerial',
-  'AerialWithLabels',
-  'collinsBart',
-  'ordnanceSurvey'
+  'AerialWithLabelsOnDemand',
+  'CanvasDark',
+  'OrdnanceSurvey'
 ];
 const layers = [];
 let i, ii;

examples/center.html

@@ -21,8 +21,6 @@ tags: "center, rotation, openstreetmap"
   <div class="padding-bottom"></div>
   <div class="center"></div>
 </div>
-<button id="zoomtoswitzerlandbest">Zoom to Switzerland</button> (best fit),<br/>
-<button id="zoomtoswitzerlandconstrained">Zoom to Switzerland</button> (respect resolution constraint).<br/>
-<button id="zoomtoswitzerlandnearest">Zoom to Switzerland</button> (nearest),<br/>
+<button id="zoomtoswitzerland">Zoom to Switzerland</button> (best fit).<br/>
 <button id="zoomtolausanne">Zoom to Lausanne</button> (with min resolution),<br/>
 <button id="centerlausanne">Center on Lausanne</button>

examples/center.js

@@ -47,29 +47,14 @@ const map = new Map({
   view: view
 });
 
-const zoomtoswitzerlandbest = document.getElementById('zoomtoswitzerlandbest');
-zoomtoswitzerlandbest.addEventListener('click', function() {
-  const feature = source.getFeatures()[0];
-  const polygon = /** @type {import("../src/ol/geom/SimpleGeometry.js").default} */ (feature.getGeometry());
-  view.fit(polygon, {padding: [170, 50, 30, 150], constrainResolution: false});
-}, false);
-
-const zoomtoswitzerlandconstrained =
-    document.getElementById('zoomtoswitzerlandconstrained');
-zoomtoswitzerlandconstrained.addEventListener('click', function() {
+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());
   view.fit(polygon, {padding: [170, 50, 30, 150]});
 }, false);
 
-const zoomtoswitzerlandnearest =
-    document.getElementById('zoomtoswitzerlandnearest');
-zoomtoswitzerlandnearest.addEventListener('click', function() {
-  const feature = source.getFeatures()[0];
-  const polygon = /** @type {import("../src/ol/geom/SimpleGeometry.js").default} */ (feature.getGeometry());
-  view.fit(polygon, {padding: [170, 50, 30, 150], nearest: true});
-}, false);
-
 const zoomtolausanne = document.getElementById('zoomtolausanne');
 zoomtolausanne.addEventListener('click', function() {
   const feature = source.getFeatures()[1];

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/earthquake-custom-symbol.js

@@ -26,9 +26,8 @@ const styleFunction = function(feature) {
   scale = size / 10;
   let style = styleCache[size];
   if (!style) {
-    const canvas = /** @type {HTMLCanvasElement} */ (document.createElement('canvas'));
-    const vectorContext = toContext(
-      /** @type {CanvasRenderingContext2D} */ (canvas.getContext('2d')),
+    const canvas = document.createElement('canvas');
+    const vectorContext = toContext(canvas.getContext('2d'),
       {size: [size, size], pixelRatio: 1});
     vectorContext.setStyle(new Style({
       fill: new Fill({color: 'rgba(255, 153, 0, 0.4)'}),

examples/export-pdf.js

@@ -63,7 +63,10 @@ exportButton.addEventListener('click', function() {
       pdf.save('map.pdf');
       // Reset original map size
       map.setSize(size);
-      map.getView().fit(extent, {size});
+      map.getView().fit(extent, {
+        size: size,
+        constrainResolution: false
+      });
       exportButton.disabled = false;
       document.body.style.cursor = 'auto';
     });

examples/extent-constrained.html

@@ -0,0 +1,9 @@
+---
+layout: example.html
+title: Constrained Extent
+shortdesc: Example of a view with a constrained extent.
+docs: >
+  This map has a view that is constrained in an extent.  This is done using the `extent` view option. Please note that specifying `constrainOnlyCenter: true` would only apply the extent restriction to the view center.
+tags: "view, extent, constrain, restrict"
+---
+<div id="map" class="map"></div>

examples/extent-constrained.js

@@ -0,0 +1,25 @@
+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';
+
+const view = new View({
+  center: [328627.563458, 5921296.662223],
+  zoom: 8,
+  extent: [-572513.341856, 5211017.966314,
+    916327.095083, 6636950.728974]
+});
+
+new Map({
+  layers: [
+    new TileLayer({
+      source: new OSM()
+    })
+  ],
+  keyboardEventTarget: document,
+  target: 'map',
+  view: view,
+  controls: defaultControls().extend([new ZoomSlider()])
+});

examples/feature-move-animation.js

@@ -133,7 +133,7 @@ const map = new Map({
   layers: [
     new TileLayer({
       source: new BingMaps({
-        imagerySet: 'AerialWithLabels',
+        imagerySet: 'AerialWithLabelsOnDemand',
         key: 'As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5'
       })
     }),

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

@@ -1,6 +1,3 @@
-.map:-moz-full-screen {
-  height: 100%;
-}
 .map:-webkit-full-screen {
   height: 100%;
 }

examples/full-screen-source.css

@@ -1,6 +1,3 @@
-.fullscreen:-moz-full-screen {
-  height: 100%;
-}
 .fullscreen:-webkit-full-screen {
   height: 100%;
 }

examples/full-screen.css

@@ -1,6 +1,3 @@
-.map:-moz-full-screen {
-  height: 100%;
-}
 .map:-webkit-full-screen {
   height: 100%;
 }

examples/getfeatureinfo-image.js

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

examples/getfeatureinfo-tile.js

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

examples/icon-color.css

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

examples/icon.css

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

examples/interaction-options.html

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

examples/interaction-options.js

@@ -7,7 +7,7 @@ import OSM from '../src/ol/source/OSM.js';
 
 const map = new Map({
   interactions: defaultInteractions({
-    constrainResolution: true, onFocusOnly: true
+    onFocusOnly: true
   }),
   layers: [
     new TileLayer({

examples/layer-spy.js

@@ -7,7 +7,7 @@ import BingMaps from '../src/ol/source/BingMaps.js';
 const key = 'As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5';
 
 const roads = new TileLayer({
-  source: new BingMaps({key: key, imagerySet: 'Road'})
+  source: new BingMaps({key: key, imagerySet: 'RoadOnDemand'})
 });
 
 const imagery = new TileLayer({

examples/mapbox-layer.js

@@ -203,7 +203,11 @@ const map = new Map({
   target: 'map',
   view: new View({
     center: [-10997148, 4569099],
-    zoom: 4
+    zoom: 4,
+    minZoom: 1,
+    extent: [-Infinity, -20048966.10, Infinity, 20048966.10],
+    smoothExtentConstraint: false,
+    smoothResolutionConstraint: false
   })
 });
 

examples/mapbox-vector-tiles-advanced.html

@@ -8,7 +8,7 @@ tags: "mapbox, vector, tiles, mobile"
 resources:
   - resources/mapbox-streets-v6-style.js
 cloak:
-  - key: pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiRk1kMWZaSSJ9.E5BkluenyWQMsBLsuByrmg
+  - key: pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q
     value: Your Mapbox access token from http://mapbox.com/ here
 ---
 <div id="map" class="map"></div>

examples/mapbox-vector-tiles-advanced.js

@@ -8,7 +8,7 @@ import {Fill, Icon, Stroke, Style, Text} from '../src/ol/style.js';
 import TileGrid from '../src/ol/tilegrid/TileGrid.js';
 
 
-const key = 'pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiRk1kMWZaSSJ9.E5BkluenyWQMsBLsuByrmg';
+const key = 'pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q';
 
 // Calculation of resolutions that match zoom levels 1, 3, 5, 7, 9, 11, 13, 15.
 const resolutions = [];

examples/mapbox-vector-tiles.html

@@ -8,7 +8,7 @@ tags: "simple, mapbox, vector, tiles"
 resources:
   - resources/mapbox-streets-v6-style.js
 cloak:
-  - key: pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiRk1kMWZaSSJ9.E5BkluenyWQMsBLsuByrmg
+  - key: pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q
     value: Your Mapbox access token from http://mapbox.com/ here
 ---
 <div id="map" class="map"></div>

examples/mapbox-vector-tiles.js

@@ -6,7 +6,7 @@ import VectorTileSource from '../src/ol/source/VectorTile.js';
 import {Fill, Icon, Stroke, Style, Text} from '../src/ol/style.js';
 
 
-const key = 'pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiRk1kMWZaSSJ9.E5BkluenyWQMsBLsuByrmg';
+const key = 'pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q';
 
 const map = new Map({
   layers: [

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/mobile-full-screen.html

@@ -14,6 +14,7 @@ cloak:
     <meta http-equiv="X-UA-Compatible" content="chrome=1">
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
     <title>Mobile full screen example</title>
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
     <style type="text/css">
       html, body, .map {
         margin: 0;

examples/mobile-full-screen.js

@@ -15,7 +15,7 @@ const map = new Map({
     new TileLayer({
       source: new BingMaps({
         key: 'As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5',
-        imagerySet: 'Road'
+        imagerySet: 'RoadOnDemand'
       })
     })
   ],

examples/pinch-zoom.html

@@ -5,7 +5,7 @@ shortdesc: Restrict pinch zooming to integer zoom levels.
 docs: >
   By default, the `ol/interaction/PinchZoom` can leave the map at fractional zoom levels.
   If instead you want to constrain pinch zooming to integer zoom levels, set
-  <code>constrainResolution: true</code> when constructing the interaction.
+  <code>constrainResolution: true</code> when constructing the view.
 tags: "pinch, zoom, interaction"
 ---
 <div id="map" class="map"></div>

examples/pinch-zoom.js

@@ -6,10 +6,8 @@ import OSM from '../src/ol/source/OSM.js';
 
 
 const map = new Map({
-  interactions: defaultInteractions({pinchZoom: false}).extend([
-    new PinchZoom({
-      constrainResolution: true // force zooming to a integer zoom
-    })
+  interactions: defaultInteractions().extend([
+    new PinchZoom()
   ]),
   layers: [
     new TileLayer({
@@ -19,6 +17,7 @@ const map = new Map({
   target: 'map',
   view: new View({
     center: [0, 0],
-    zoom: 2
+    zoom: 2,
+    constrainResolution: true
   })
 });

examples/preload.js

@@ -29,7 +29,7 @@ const map2 = new Map({
       preload: 0, // default value
       source: new BingMaps({
         key: 'As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5',
-        imagerySet: 'AerialWithLabels'
+        imagerySet: 'AerialWithLabelsOnDemand'
       })
     })
   ],

examples/resources/common.js

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

examples/templates/example.html

@@ -127,9 +127,13 @@
     <title>{{ title }}</title>
     <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
     <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>{{#if extraHead.remote}}
-{{ indent extraHead.remote spaces=4 }}{{/if}}{{#if css.source}}
+{{ indent extraHead.remote spaces=4 }}{{/if}}
     <style>
-{{ indent css.source spaces=6 }}    </style>{{/if}}
+      .map {
+        width: 100%;
+        height:400px;
+      }
+{{#if css.source}}{{ indent css.source spaces=6 }}{{/if}}    </style>
   </head>
   <body>
 {{ indent contents spaces=4 }}    <script src="index.js"></script>

examples/utfgrid.html

@@ -7,7 +7,7 @@ docs: >
   Tiles made with [TileMill](http://tilemill.com). Hosting on MapBox.com or with open-source [TileServer](https://github.com/klokantech/tileserver-php/).
 tags: "utfgrid, tilejson"
 cloak:
-  - key: pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiRk1kMWZaSSJ9.E5BkluenyWQMsBLsuByrmg
+  - key: pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q
     value: Your Mapbox access token from http://mapbox.com/ here
 ---
 <div id="map" class="map"></div>

examples/utfgrid.js

@@ -5,7 +5,7 @@ import TileLayer from '../src/ol/layer/Tile.js';
 import TileJSON from '../src/ol/source/TileJSON.js';
 import UTFGrid from '../src/ol/source/UTFGrid.js';
 
-const key = 'pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiRk1kMWZaSSJ9.E5BkluenyWQMsBLsuByrmg';
+const key = 'pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q';
 
 const mapLayer = new TileLayer({
   source: new TileJSON({

examples/vector-labels.html

@@ -103,6 +103,9 @@ tags: "geojson, vector, openstreetmap, label"
     <label>Size: </label>
     <input type="text" value="12px" id="points-size" />
     <br />
+    <label>Line height: </label>
+    <input type="text" value="1" id="points-height" />
+    <br />
     <label>Offset X:</label>
     <input type="text" value="0" id="points-offset-x" />
     <br />
@@ -212,6 +215,9 @@ tags: "geojson, vector, openstreetmap, label"
     <label>Size: </label>
     <input type="text" value="12px" id="lines-size" />
     <br />
+    <label>Line height: </label>
+    <input type="text" value="1.2" id="lines-height" />
+    <br />
     <label>Offset X:</label>
     <input type="text" value="0" id="lines-offset-x" />
     <br />
@@ -321,6 +327,9 @@ tags: "geojson, vector, openstreetmap, label"
     <label>Size: </label>
     <input type="text" value="10px" id="polygons-size" />
     <br />
+    <label>Line height: </label>
+    <input type="text" value="1" id="polygons-height" />
+    <br />
     <label>Offset X:</label>
     <input type="text" value="0" id="polygons-offset-x" />
     <br />

examples/vector-labels.js

@@ -16,6 +16,7 @@ const myDom = {
     font: document.getElementById('points-font'),
     weight: document.getElementById('points-weight'),
     size: document.getElementById('points-size'),
+    height: document.getElementById('points-height'),
     offsetX: document.getElementById('points-offset-x'),
     offsetY: document.getElementById('points-offset-y'),
     color: document.getElementById('points-color'),
@@ -34,6 +35,7 @@ const myDom = {
     maxangle: document.getElementById('lines-maxangle'),
     overflow: document.getElementById('lines-overflow'),
     size: document.getElementById('lines-size'),
+    height: document.getElementById('lines-height'),
     offsetX: document.getElementById('lines-offset-x'),
     offsetY: document.getElementById('lines-offset-y'),
     color: document.getElementById('lines-color'),
@@ -52,6 +54,7 @@ const myDom = {
     maxangle: document.getElementById('polygons-maxangle'),
     overflow: document.getElementById('polygons-overflow'),
     size: document.getElementById('polygons-size'),
+    height: document.getElementById('polygons-height'),
     offsetX: document.getElementById('polygons-offset-x'),
     offsetY: document.getElementById('polygons-offset-y'),
     color: document.getElementById('polygons-color'),
@@ -84,6 +87,7 @@ const createTextStyle = function(feature, resolution, dom) {
   const align = dom.align.value;
   const baseline = dom.baseline.value;
   const size = dom.size.value;
+  const height = dom.height.value;
   const offsetX = parseInt(dom.offsetX.value, 10);
   const offsetY = parseInt(dom.offsetY.value, 10);
   const weight = dom.weight.value;
@@ -98,7 +102,7 @@ const createTextStyle = function(feature, resolution, dom) {
     document.getElementsByTagName('head')[0].appendChild(openSans);
     openSansAdded = true;
   }
-  const font = weight + ' ' + size + ' ' + dom.font.value;
+  const font = weight + ' ' + size + '/' + height + ' ' + dom.font.value;
   const fillColor = dom.color.value;
   const outlineColor = dom.outline.value;
   const outlineWidth = parseInt(dom.outlineWidth.value, 10);

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ol",
-  "version": "6.0.0-beta.1",
+  "version": "6.0.0-beta.4",
   "description": "OpenLayers mapping library",
   "keywords": [
     "map",
@@ -36,36 +36,36 @@
     "url": "https://github.com/openlayers/openlayers/issues"
   },
   "dependencies": {
-    "pbf": "3.1.0",
+    "pbf": "3.2.0",
     "pixelworks": "1.1.0",
     "rbush": "2.0.2"
   },
   "devDependencies": {
     "@openlayers/eslint-plugin": "^4.0.0-beta.1",
-    "@types/arcgis-rest-api": "^10.4.3",
-    "@types/geojson": "^7946.0.5",
+    "@types/arcgis-rest-api": "^10.4.4",
+    "@types/geojson": "^7946.0.6",
     "@types/pbf": "^3.0.1",
     "@types/rbush": "^2.0.2",
-    "@types/topojson-specification": "^1.0.0",
-    "buble": "^0.19.6",
+    "@types/topojson-specification": "^1.0.1",
+    "buble": "^0.19.7",
     "buble-loader": "^0.5.1",
     "chaikin-smooth": "^1.0.4",
     "clean-css-cli": "4.2.1",
-    "copy-webpack-plugin": "^4.6.0",
-    "coveralls": "3.0.1",
-    "eslint": "^5.8.0",
+    "copy-webpack-plugin": "^5.0.1",
+    "coveralls": "3.0.3",
+    "eslint": "^5.15.2",
     "eslint-config-openlayers": "^11.0.0",
     "expect.js": "0.3.1",
     "front-matter": "^3.0.1",
     "fs-extra": "^7.0.1",
     "glob": "^7.1.2",
-    "globby": "^8.0.1",
-    "handlebars": "4.0.11",
+    "globby": "^9.1.0",
+    "handlebars": "4.1.1",
     "istanbul": "0.4.5",
     "jquery": "3.3.1",
     "jsdoc": "3.5.5",
-    "jsdoc-plugin-typescript": "^1.0.6",
-    "karma": "^4.0.0",
+    "jsdoc-plugin-typescript": "^1.0.7",
+    "karma": "^4.0.1",
     "karma-chrome-launcher": "2.2.0",
     "karma-coverage": "^1.1.2",
     "karma-firefox-launcher": "^1.1.0",
@@ -73,25 +73,25 @@
     "karma-sourcemap-loader": "^0.3.7",
     "karma-webpack": "^4.0.0-rc.2",
     "loglevelnext": "^3.0.0",
-    "marked": "0.6.0",
-    "mocha": "5.2.0",
-    "ol-mapbox-style": "^3.6.3",
+    "marked": "0.6.1",
+    "mocha": "6.0.2",
+    "ol-mapbox-style": "^4.2.1",
     "pixelmatch": "^4.0.2",
-    "pngjs": "^3.3.3",
+    "pngjs": "^3.4.0",
     "proj4": "2.5.0",
-    "puppeteer": "^1.11.0",
+    "puppeteer": "~1.14.0",
     "serve-static": "^1.13.2",
     "shx": "^0.3.2",
-    "sinon": "^7.2.3",
-    "terser-webpack-plugin": "^1.2.1",
+    "sinon": "^7.2.7",
+    "terser-webpack-plugin": "^1.2.3",
     "typescript": "^3.2.2",
-    "url-polyfill": "^1.1.3",
+    "url-polyfill": "^1.1.5",
     "walk": "^2.3.9",
-    "webpack": "4.29.0",
-    "webpack-cli": "^3.2.0",
-    "webpack-dev-middleware": "^3.5.1",
-    "webpack-dev-server": "^3.1.14",
-    "yargs": "^12.0.2"
+    "webpack": "4.29.6",
+    "webpack-cli": "^3.3.0",
+    "webpack-dev-middleware": "^3.6.1",
+    "webpack-dev-server": "^3.2.1",
+    "yargs": "^13.2.2"
   },
   "eslintConfig": {
     "extends": "openlayers",

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-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';
+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-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';
+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';
+import XYZ from '../../../src/ol/source/XYZ';
+
+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-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';
+import XYZ from '../../../src/ol/source/XYZ';
+
+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,162 @@
+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 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({
+    image: new CircleStyle({
+      radius: 15,
+      stroke: new Stroke({
+        color: 'blue'
+      })
+    })
+  });
+});
+map.addLayer(layer1);
+
+center = [center[0] + 500, center[1] + 500];
+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({
+    text: new Text({
+      text: feature.get('text'),
+      font: '16px Ubuntu'
+    })
+  });
+});
+map.addLayer(layer2);
+
+center = [center[0] + 500, center[1] + 500];
+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: 5,
+      stroke: new Stroke({
+        color: 'red'
+      })
+    }),
+    text: new Text({
+      text: feature.get('text'),
+      font: '16px Ubuntu',
+      textBaseline: 'bottom',
+      offsetY: -5
+    })
+  });
+});
+map.addLayer(layer3);
+
+center = [center[0] - 2000, center[1] - 2000];
+const point = new Feature(new Point(center));
+point.setStyle(new Style({
+  zIndex: 2,
+  image: new CircleStyle({
+    radius: 8,
+    stroke: new Stroke({
+      color: 'blue'
+    })
+  })
+}));
+const line = new Feature(new LineString([
+  [center[0] - 650, center[1] - 200],
+  [center[0] + 650, center[1] - 200]
+]));
+line.setStyle(new Style({
+  zIndex: 1,
+  stroke: new Stroke({
+    color: '#CCC',
+    width: 12
+  }),
+  text: new Text({
+    placement: 'line',
+    text: 'east-west',
+    font: '16px Ubuntu',
+    overflow: true
+  })
+}));
+source4.addFeature(point);
+source4.addFeature(line);
+map.addLayer(layer4);
+
+render({tolerance: 0.02});

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

@@ -0,0 +1,54 @@
+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'
+});
+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,79 @@
+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 VectorImageLayer from '../../../src/ol/layer/VectorImage.js';
+import CircleStyle from '../../../src/ol/style/Circle.js';
+import Point from '../../../src/ol/geom/Point.js';
+import LineString from '../../../src/ol/geom/LineString.js';
+import Text from '../../../src/ol/style/Text.js';
+
+const center = [1825927.7316762917, 6143091.089223046];
+
+const source = new VectorSource();
+const vectorLayer1 = new VectorImageLayer({
+  source: source,
+  style: function(feature) {
+    return new Style({
+      image: new CircleStyle({
+        radius: 15,
+        stroke: new Stroke({
+          color: 'blue'
+        })
+      }),
+      text: new Text({
+        text: feature.get('text'),
+        font: '16px Ubuntu'
+      })
+    });
+  }
+});
+
+const centerFeature = new Feature({
+  geometry: new Point(center),
+  text: 'center'
+});
+source.addFeature(centerFeature);
+source.addFeature(new Feature({
+  geometry: new Point([center[0] - 540, center[1]]),
+  text: 'west'
+}));
+source.addFeature(new Feature({
+  geometry: new Point([center[0] + 540, center[1]]),
+  text: 'east'
+}));
+
+const line = new Feature(new LineString([
+  [center[0] - 650, center[1] - 200],
+  [center[0] + 650, center[1] - 200]
+]));
+line.setStyle(new Style({
+  stroke: new Stroke({
+    color: '#CCC',
+    width: 12
+  }),
+  text: new Text({
+    placement: 'line',
+    text: 'east-west',
+    font: '16px Ubuntu'
+  })
+}));
+source.addFeature(line);
+
+const map = new Map({
+  pixelRatio: 1,
+  layers: [
+    vectorLayer1
+  ],
+  target: 'map',
+  view: new View({
+    center: center,
+    zoom: 13
+  })
+});
+
+map.getView().fit(source.getExtent());
+
+render({tolerance: 0.02});

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';
+import MVT from '../../../src/ol/format/MVT';
+import {createXYZ} from '../../../src/ol/tilegrid';
+import VectorTileLayer from '../../../src/ol/layer/VectorTile';
+
+const map = new Map({
+  pixelRatio: 2,
+  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/map-pan/main.js

@@ -0,0 +1,29 @@
+import Feature from '../../../src/ol/Feature.js';
+import Point from '../../../src/ol/geom/Point.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';
+
+const map = new Map({
+  pixelRatio: 1,
+  target: 'map',
+  layers: [
+    new VectorLayer({
+      source: new VectorSource({
+        features: [new Feature({
+          geometry: new Point([0, 0])
+        })]
+      })
+    })
+  ],
+  view: new View({
+    projection: 'EPSG:4326',
+    center: [0, 0],
+    resolution: 1,
+    multiWorld: true
+  })
+});
+map.getView().setCenter([10, 10]);
+
+render();

rendering/cases/map/main.js

@@ -0,0 +1,27 @@
+import Feature from '../../../src/ol/Feature.js';
+import Point from '../../../src/ol/geom/Point.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';
+
+new Map({
+  pixelRatio: 1,
+  target: 'map',
+  layers: [
+    new VectorLayer({
+      source: new VectorSource({
+        features: [new Feature({
+          geometry: new Point([0, 0])
+        })]
+      })
+    })
+  ],
+  view: new View({
+    projection: 'EPSG:4326',
+    center: [0, 0],
+    resolution: 1
+  })
+});
+
+render();

rendering/cases/multipoint-style/main.js

@@ -0,0 +1,169 @@
+import Feature from '../../../src/ol/Feature.js';
+import MultiPoint from '../../../src/ol/geom/MultiPoint.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 CircleStyle from '../../../src/ol/style/Circle.js';
+import Fill from '../../../src/ol/style/Fill.js';
+import Style from '../../../src/ol/style/Style.js';
+import Stroke from '../../../src/ol/style/Stroke.js';
+
+const vectorSource = new VectorSource();
+
+let feature;
+feature = new Feature({
+  geometry: new MultiPoint([[-20, 18]])
+});
+feature.setStyle(new Style({
+  image: new CircleStyle({
+    radius: 2,
+    fill: new Fill({
+      color: '#91E339'
+    })
+  })
+}));
+vectorSource.addFeature(feature);
+
+feature = new Feature({
+  geometry: new MultiPoint([[-10, 18]])
+});
+feature.setStyle(new Style({
+  image: new CircleStyle({
+    radius: 4,
+    fill: new Fill({
+      color: '#5447E6'
+    })
+  })
+}));
+vectorSource.addFeature(feature);
+
+feature = new Feature({
+  geometry: new MultiPoint([[4, 18]])
+});
+feature.setStyle(new Style({
+  image: new CircleStyle({
+    radius: 6,
+    fill: new Fill({
+      color: '#92A8A6'
+    })
+  })
+}));
+vectorSource.addFeature(feature);
+
+feature = new Feature({
+  geometry: new MultiPoint([[-20, 3]])
+});
+feature.setStyle(new Style({
+  image: new CircleStyle({
+    radius: 2,
+    fill: new Fill({
+      color: '#91E339'
+    }),
+    stroke: new Stroke({
+      color: '#000000',
+      width: 1
+    })
+  })
+}));
+vectorSource.addFeature(feature);
+
+feature = new Feature({
+  geometry: new MultiPoint([[-10, 3]])
+});
+feature.setStyle(new Style({
+  image: new CircleStyle({
+    radius: 4,
+    fill: new Fill({
+      color: '#5447E6'
+    }),
+    stroke: new Stroke({
+      color: '#000000',
+      width: 2
+    })
+  })
+}));
+vectorSource.addFeature(feature);
+
+feature = new Feature({
+  geometry: new MultiPoint([[4, 3]])
+});
+feature.setStyle(new Style({
+  image: new CircleStyle({
+    radius: 6,
+    fill: new Fill({
+      color: '#92A8A6'
+    }),
+    stroke: new Stroke({
+      color: '#000000',
+      width: 3
+    })
+  })
+}));
+vectorSource.addFeature(feature);
+
+feature = new Feature({
+  geometry: new MultiPoint([[-20, -15]])
+});
+feature.setStyle(new Style({
+  image: new CircleStyle({
+    radius: 2,
+    stroke: new Stroke({
+      color: '#256308',
+      width: 1
+    })
+  })
+}));
+vectorSource.addFeature(feature);
+
+feature = new Feature({
+  geometry: new MultiPoint([[-10, -15]])
+});
+feature.setStyle(new Style({
+  image: new CircleStyle({
+    radius: 4,
+    fill: new Fill({
+      color: 'rgba(0, 0, 255, 0.3)'
+    }),
+    stroke: new Stroke({
+      color: '#256308',
+      width: 2
+    })
+  })
+}));
+vectorSource.addFeature(feature);
+
+feature = new Feature({
+  geometry: new MultiPoint([[4, -15]])
+});
+feature.setStyle(new Style({
+  image: new CircleStyle({
+    radius: 6,
+    fill: new Fill({
+      color: 'rgba(235, 45, 70, 0.6)'
+    }),
+    stroke: new Stroke({
+      color: '#256308',
+      width: 3
+    })
+  })
+}));
+vectorSource.addFeature(feature);
+
+const vectorLayer = new VectorLayer({
+  source: vectorSource
+});
+
+new Map({
+  layers: [
+    vectorLayer
+  ],
+  target: 'map',
+  view: new View({
+    projection: 'EPSG:4326',
+    center: [0, 0],
+    zoom: 1
+  })
+});
+
+render();

rendering/cases/point-style/main.js

@@ -0,0 +1,169 @@
+import Feature from '../../../src/ol/Feature.js';
+import Point from '../../../src/ol/geom/Point.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 CircleStyle from '../../../src/ol/style/Circle.js';
+import Fill from '../../../src/ol/style/Fill.js';
+import Style from '../../../src/ol/style/Style.js';
+import Stroke from '../../../src/ol/style/Stroke.js';
+
+const vectorSource = new VectorSource();
+
+let feature;
+feature = new Feature({
+  geometry: new Point([-20, 18])
+});
+feature.setStyle(new Style({
+  image: new CircleStyle({
+    radius: 2,
+    fill: new Fill({
+      color: '#91E339'
+    })
+  })
+}));
+vectorSource.addFeature(feature);
+
+feature = new Feature({
+  geometry: new Point([-10, 18])
+});
+feature.setStyle(new Style({
+  image: new CircleStyle({
+    radius: 4,
+    fill: new Fill({
+      color: '#5447E6'
+    })
+  })
+}));
+vectorSource.addFeature(feature);
+
+feature = new Feature({
+  geometry: new Point([4, 18])
+});
+feature.setStyle(new Style({
+  image: new CircleStyle({
+    radius: 6,
+    fill: new Fill({
+      color: '#92A8A6'
+    })
+  })
+}));
+vectorSource.addFeature(feature);
+
+feature = new Feature({
+  geometry: new Point([-20, 3])
+});
+feature.setStyle(new Style({
+  image: new CircleStyle({
+    radius: 2,
+    fill: new Fill({
+      color: '#91E339'
+    }),
+    stroke: new Stroke({
+      color: '#000000',
+      width: 1
+    })
+  })
+}));
+vectorSource.addFeature(feature);
+
+feature = new Feature({
+  geometry: new Point([-10, 3])
+});
+feature.setStyle(new Style({
+  image: new CircleStyle({
+    radius: 4,
+    fill: new Fill({
+      color: '#5447E6'
+    }),
+    stroke: new Stroke({
+      color: '#000000',
+      width: 2
+    })
+  })
+}));
+vectorSource.addFeature(feature);
+
+feature = new Feature({
+  geometry: new Point([4, 3])
+});
+feature.setStyle(new Style({
+  image: new CircleStyle({
+    radius: 6,
+    fill: new Fill({
+      color: '#92A8A6'
+    }),
+    stroke: new Stroke({
+      color: '#000000',
+      width: 3
+    })
+  })
+}));
+vectorSource.addFeature(feature);
+
+feature = new Feature({
+  geometry: new Point([-20, -15])
+});
+feature.setStyle(new Style({
+  image: new CircleStyle({
+    radius: 2,
+    stroke: new Stroke({
+      color: '#256308',
+      width: 1
+    })
+  })
+}));
+vectorSource.addFeature(feature);
+
+feature = new Feature({
+  geometry: new Point([-10, -15])
+});
+feature.setStyle(new Style({
+  image: new CircleStyle({
+    radius: 4,
+    fill: new Fill({
+      color: 'rgba(0, 0, 255, 0.3)'
+    }),
+    stroke: new Stroke({
+      color: '#256308',
+      width: 2
+    })
+  })
+}));
+vectorSource.addFeature(feature);
+
+feature = new Feature({
+  geometry: new Point([4, -15])
+});
+feature.setStyle(new Style({
+  image: new CircleStyle({
+    radius: 6,
+    fill: new Fill({
+      color: 'rgba(235, 45, 70, 0.6)'
+    }),
+    stroke: new Stroke({
+      color: '#256308',
+      width: 3
+    })
+  })
+}));
+vectorSource.addFeature(feature);
+
+const vectorLayer = new VectorLayer({
+  source: vectorSource
+});
+
+new Map({
+  layers: [
+    vectorLayer
+  ],
+  target: 'map',
+  view: new View({
+    projection: 'EPSG:4326',
+    center: [0, 0],
+    zoom: 1
+  })
+});
+
+render();

rendering/cases/regularshape-style/main.js

@@ -0,0 +1,114 @@
+import Feature from '../../../src/ol/Feature.js';
+import Point from '../../../src/ol/geom/Point.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 Fill from '../../../src/ol/style/Fill.js';
+import RegularShape from '../../../src/ol/style/RegularShape.js';
+import Style from '../../../src/ol/style/Style.js';
+import Stroke from '../../../src/ol/style/Stroke.js';
+
+const vectorSource = new VectorSource();
+function createFeatures(stroke, fill, offSet = [0, 0]) {
+  let feature;
+  feature = new Feature({
+    geometry: new Point([-15 + offSet[0], 15 + offSet[1]])
+  });
+  // square
+  feature.setStyle(new Style({
+    image: new RegularShape({
+      fill: fill,
+      stroke: stroke,
+      points: 4,
+      radius: 10,
+      angle: Math.PI / 4
+    })
+  }));
+  vectorSource.addFeature(feature);
+
+  feature = new Feature({
+    geometry: new Point([8 + offSet[0], 15 + offSet[1]])
+  });
+  // triangle
+  feature.setStyle(new Style({
+    image: new RegularShape({
+      fill: fill,
+      stroke: stroke,
+      points: 3,
+      radius: 10,
+      rotation: Math.PI / 4,
+      angle: 0
+    })
+  }));
+  vectorSource.addFeature(feature);
+
+  feature = new Feature({
+    geometry: new Point([-10 + offSet[0], -8 + offSet[1]])
+  });
+  // star
+  feature.setStyle(new Style({
+    image: new RegularShape({
+      fill: fill,
+      stroke: stroke,
+      points: 5,
+      radius: 10,
+      radius2: 4,
+      angle: 0
+    })
+  }));
+  vectorSource.addFeature(feature);
+
+  feature = new Feature({
+    geometry: new Point([12 + offSet[0], -8 + offSet[1]])
+  });
+  // cross
+  feature.setStyle(new Style({
+    image: new RegularShape({
+      fill: fill,
+      stroke: stroke,
+      points: 4,
+      radius: 10,
+      radius2: 0,
+      angle: 0
+    })
+  }));
+  vectorSource.addFeature(feature);
+}
+
+createFeatures(
+  new Stroke({width: 2}),
+  new Fill({color: 'red'})
+);
+createFeatures(
+  new Stroke({
+    lineDash: [10, 5]
+  }),
+  null,
+  [50, 50]
+);
+createFeatures(
+  new Stroke({
+    lineDash: [10, 5],
+    lineDashOffset: 5
+  }),
+  null,
+  [-50, -50]
+);
+
+createFeatures(new Stroke(), new Fill(), [50, -50]);
+
+const vectorLayer = new VectorLayer({
+  source: vectorSource
+});
+
+new Map({
+  target: 'map',
+  layers: [vectorLayer],
+  view: new View({
+    center: [0, 0],
+    resolution: 1
+  })
+});
+
+render();

rendering/cases/source-raster/main.js

@@ -0,0 +1,32 @@
+import Map from '../../../src/ol/Map.js';
+import View from '../../../src/ol/View.js';
+import ImageLayer from '../../../src/ol/layer/Image.js';
+import RasterSource from '../../../src/ol/source/Raster.js';
+import XYZ from '../../../src/ol/source/XYZ.js';
+
+const raster = new RasterSource({
+  sources: [new XYZ({
+    url: '/data/tiles/osm/{z}/{x}/{y}.png',
+    transition: 0
+  })],
+  threads: 0, // Avoid using workers to work with puppeteer
+  operation: function(pixels) {
+    const pixel = pixels[0];
+    const red = pixel[0];
+    pixel[0] = pixel[2];
+    pixel[2] = red;
+    return pixel;
+  }
+});
+
+new Map({
+  layers: [new ImageLayer({source: raster})],
+  target: 'map',
+  view: new View({
+    center: [0, 0],
+    zoom: 0
+  })
+});
+
+render();
+

rendering/cases/source-tilewms-gutter0/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 TileWMS from '../../../src/ol/source/TileWMS.js';
+
+const tileWms = new TileWMS({
+  params: {
+    'LAYERS': 'layer'
+  },
+  gutter: 0,
+  url: '/data/tiles/wms/wms0.png',
+  transition: 0
+});
+
+new Map({
+  pixelRatio: 1,
+  layers: [new TileLayer({source: tileWms})],
+  target: 'map',
+  view: new View({
+    center: [0, 0],
+    zoom: 5
+  })
+});
+
+render();
+

rendering/cases/source-tilewms-gutter20/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 TileWMS from '../../../src/ol/source/TileWMS.js';
+
+const tileWms = new TileWMS({
+  params: {
+    'LAYERS': 'layer'
+  },
+  gutter: 20,
+  url: '/data/tiles/wms/wms20.png',
+  transition: 0
+});
+
+new Map({
+  pixelRatio: 1,
+  layers: [new TileLayer({source: tileWms})],
+  target: 'map',
+  view: new View({
+    center: [0, 0],
+    zoom: 5
+  })
+});
+
+render();
+

rendering/cases/text-style-linestring-nice/main.js

@@ -0,0 +1,134 @@
+import Map from '../../../src/ol/Map.js';
+import View from '../../../src/ol/View.js';
+import Feature from '../../../src/ol/Feature.js';
+import VectorLayer from '../../../src/ol/layer/Vector.js';
+import VectorSource from '../../../src/ol/source/Vector.js';
+import Text from '../../../src/ol/style/Text.js';
+import Style from '../../../src/ol/style/Style.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';
+
+
+const vectorSource = new VectorSource();
+
+const nicePath = [
+  20, 33, 40, 31, 60, 30, 80, 31, 100, 33, 120, 37, 140, 39, 160, 40,
+  180, 39, 200, 37, 220, 33, 240, 31, 260, 30, 280, 31, 300, 33
+];
+
+const lineString1 = new LineString(nicePath, 'XY');
+const feature1 = new Feature({geometry: lineString1});
+feature1.setStyle(new Style({
+  stroke: new Stroke({color: 'blue'}),
+  text: new Text({
+    text: 'Hello world',
+    font: '10px Ubuntu',
+    placement: 'line'
+  })
+}));
+vectorSource.addFeature(feature1);
+
+const lineString2 = lineString1.clone();
+lineString2.translate(0, 30);
+const feature2 = new Feature({geometry: lineString2});
+feature2.setStyle(new Style({
+  stroke: new Stroke({color: 'blue'}),
+  text: new Text({
+    text: 'Scale 2',
+    font: 'normal 400 12px/1 Ubuntu',
+    scale: 2,
+    textBaseline: 'bottom',
+    textAlign: 'right',
+    placement: 'line'
+  })
+}));
+vectorSource.addFeature(feature2);
+
+const lineString3 = lineString2.clone();
+lineString3.translate(0, 30);
+const feature3 = new Feature({geometry: lineString3});
+feature3.setStyle(new Style({
+  stroke: new Stroke({color: 'blue'}),
+  text: new Text({
+    font: 'italic bold 0.75em Ubuntu',
+    text: 'Set properties'
+  })
+}));
+feature3.getStyle().getText().setTextAlign('left');
+feature3.getStyle().getText().setOffsetX(10);
+feature3.getStyle().getText().setOffsetY(-10);
+feature3.getStyle().getText().setPlacement('line');
+feature3.getStyle().getText().setScale(1.1);
+feature3.getStyle().getText().setStroke(new Stroke({color: '#00F7F8'}));
+feature3.getStyle().getText().setFill(new Fill({color: '#006772'}));
+
+vectorSource.addFeature(feature3);
+
+const lineString4 = lineString3.clone();
+lineString4.translate(0, 30);
+const feature4 = new Feature({geometry: lineString4});
+feature4.setStyle(new Style({
+  stroke: new Stroke({color: 'blue'}),
+  text: new Text({
+    text: 'negative offsetX',
+    font: 'normal 400 10px/1 Ubuntu',
+    offsetX: -10,
+    textAlign: 'start',
+    textBaseline: 'top',
+    placement: 'line'
+  })
+}));
+vectorSource.addFeature(feature4);
+
+const lineString5 = lineString4.clone();
+lineString5.translate(0, 30);
+const feature5 = new Feature({geometry: lineString5});
+feature5.setStyle(new Style({
+  stroke: new Stroke({color: 'blue'}),
+  text: new Text({
+    text: 'Small text',
+    font: '10px Ubuntu',
+    offsetY: 5,
+    scale: 0.7,
+    textAlign: 'end',
+    placement: 'line'
+  })
+}));
+vectorSource.addFeature(feature5);
+
+const lineString6 = lineString5.clone();
+lineString6.translate(0, 30);
+const feature6 = new Feature({geometry: lineString6});
+feature6.setStyle(new Style({
+  stroke: new Stroke({color: 'blue'}),
+  text: new Text({
+    text: 'FILL AND STROKE',
+    font: '10px Ubuntu',
+    placement: 'line',
+    fill: new Fill({color: '#FFC0CB'}),
+    stroke: new Stroke({
+      color: '#00FF00',
+      width: 1
+    })
+  })
+}));
+vectorSource.addFeature(feature6);
+
+const map = new Map({
+  pixelRatio: 1,
+  layers: [
+    new VectorLayer({
+      source: vectorSource
+    })
+  ],
+  target: 'map',
+  view: new View({
+    center: [0, 0],
+    resolution: 1,
+    rotation: Math.PI / 4
+  })
+});
+map.getView().fit(vectorSource.getExtent());
+
+render({tolerance: 0.02});

rendering/cases/text-style-linestring-ugly/main.js

@@ -0,0 +1,138 @@
+import Map from '../../../src/ol/Map.js';
+import View from '../../../src/ol/View.js';
+import Feature from '../../../src/ol/Feature.js';
+import VectorLayer from '../../../src/ol/layer/Vector.js';
+import VectorSource from '../../../src/ol/source/Vector.js';
+import Text from '../../../src/ol/style/Text.js';
+import Style from '../../../src/ol/style/Style.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';
+
+
+const vectorSource = new VectorSource();
+
+const uglyPath = [163, 22, 159, 30, 150, 30, 143, 24, 151, 17];
+
+const lineString1 = new LineString(uglyPath, 'XY');
+const feature1 = new Feature({geometry: lineString1});
+feature1.setStyle(new Style({
+  stroke: new Stroke({color: 'blue'}),
+  text: new Text({
+    text: 'Hello world',
+    font: '10px Ubuntu',
+    placement: 'line',
+    overflow: true
+  })
+}));
+vectorSource.addFeature(feature1);
+
+const lineString2 = lineString1.clone();
+lineString2.translate(0, 30);
+const feature2 = new Feature({geometry: lineString2});
+feature2.setStyle(new Style({
+  stroke: new Stroke({color: 'red'}),
+  text: new Text({
+    text: 'Scale 2',
+    scale: 2,
+    textBaseline: 'bottom',
+    textAlign: 'right',
+    placement: 'line',
+    font: 'italic bold 0.5em Ubuntu',
+    overflow: true
+  })
+}));
+vectorSource.addFeature(feature2);
+
+const lineString3 = lineString2.clone();
+lineString3.translate(0, 30);
+const feature3 = new Feature({geometry: lineString3});
+feature3.setStyle(new Style({
+  stroke: new Stroke({color: 'blue'}),
+  text: new Text({
+    text: 'Set properties'
+  })
+}));
+feature3.getStyle().getText().setTextAlign('left');
+feature3.getStyle().getText().setOffsetX(10);
+feature3.getStyle().getText().setOffsetY(-10);
+feature3.getStyle().getText().setOverflow(true);
+feature3.getStyle().getText().setPlacement('line');
+feature3.getStyle().getText().setScale(1.2);
+feature3.getStyle().getText().setStroke(new Stroke({color: '#00F7F8'}));
+feature3.getStyle().getText().setFill(new Fill({color: '#006772'}));
+feature3.getStyle().getText().setMaxAngle(Math.PI);
+
+vectorSource.addFeature(feature3);
+
+const lineString4 = lineString3.clone();
+lineString4.translate(0, 30);
+const feature4 = new Feature({geometry: lineString4});
+feature4.setStyle(new Style({
+  stroke: new Stroke({color: 'red'}),
+  text: new Text({
+    text: 'PLEASE OMIT ME IM UGLY',
+    font: '10px Ubuntu',
+    offsetX: -10,
+    textAlign: 'start',
+    textBaseline: 'top',
+    placement: 'line',
+    overflow: true
+  })
+}));
+vectorSource.addFeature(feature4);
+
+const lineString5 = lineString4.clone();
+lineString5.translate(0, 30);
+const feature5 = new Feature({geometry: lineString5});
+feature5.setStyle(new Style({
+  stroke: new Stroke({color: 'blue'}),
+  text: new Text({
+    text: 'Small text',
+    font: '10px Ubuntu',
+    offsetY: 5,
+    scale: 0.7,
+    rotation: 4,
+    textAlign: 'end',
+    placement: 'line',
+    maxAngle: Math.PI,
+    overflow: true
+  })
+}));
+vectorSource.addFeature(feature5);
+
+const lineString6 = lineString5.clone();
+lineString6.translate(0, 30);
+const feature6 = new Feature({geometry: lineString6});
+feature6.setStyle(new Style({
+  stroke: new Stroke({color: 'blue'}),
+  text: new Text({
+    text: 'FILL AND STROKE',
+    font: '10px Ubuntu',
+    placement: 'line',
+    overflow: true,
+    fill: new Fill({color: '#FFC0CB'}),
+    stroke: new Stroke({
+      color: '#00FF00'
+    })
+  })
+}));
+vectorSource.addFeature(feature6);
+
+const map = new Map({
+  pixelRatio: 1,
+  layers: [
+    new VectorLayer({
+      source: vectorSource
+    })
+  ],
+  target: 'map',
+  view: new View({
+    center: [0, 0],
+    resolution: 1,
+    rotation: -(Math.PI / 4)
+  })
+});
+map.getView().fit(vectorSource.getExtent());
+
+render({tolerance: 0.02});

rendering/cases/text-style-overlap/main.js

@@ -0,0 +1,106 @@
+import Map from '../../../src/ol/Map.js';
+import View from '../../../src/ol/View.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 VectorSource from '../../../src/ol/source/Vector.js';
+import Text from '../../../src/ol/style/Text.js';
+import Style from '../../../src/ol/style/Style.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';
+
+const nicePath = [
+  20, 33, 40, 31, 60, 30, 80, 31, 100, 33, 120, 37, 140, 39, 160, 40,
+  180, 39, 200, 37, 220, 33, 240, 31, 260, 30, 280, 31, 300, 33
+];
+
+const vectorSource = new VectorSource();
+const pointStyle = new Style({
+  text: new Text({
+    text: 'Point Label',
+    font: 'Ubuntu',
+    fill: new Fill({
+      color: 'red'
+    }),
+    stroke: new Stroke({
+      color: 'black'
+    })
+  })
+});
+const lineStyle = new Style({
+  stroke: new Stroke({color: 'blue'}),
+  text: new Text({
+    text: 'Line Label',
+    font: 'Ubuntu',
+    fill: new Fill({
+      color: 'red'
+    }),
+    stroke: new Stroke({
+      color: 'black'
+    }),
+    placement: 'line'
+  })
+});
+
+const pointFeature1 = new Feature({
+  geometry: new Point([160, 100])
+});
+pointFeature1.setStyle(pointStyle.clone());
+pointFeature1.getStyle().getText().setText('POINT ONE');
+vectorSource.addFeature(pointFeature1);
+
+const pointFeature2 = new Feature({
+  geometry: new Point([170, 105])
+});
+pointFeature2.setStyle(pointStyle.clone());
+pointFeature2.getStyle().getText().setText('POINT TWO');
+pointFeature2.getStyle().getText().setFill(new Fill({color: 'green'}));
+vectorSource.addFeature(pointFeature2);
+
+const pointFeature3 = new Feature({
+  geometry: new Point([150, 95])
+});
+pointFeature3.setStyle(pointStyle.clone());
+pointFeature3.getStyle().getText().setText('POINT THREE');
+pointFeature3.getStyle().getText().setFill(new Fill({color: 'yellow'}));
+vectorSource.addFeature(pointFeature3);
+
+const lineString1 = new LineString(nicePath, 'XY');
+const lineFeature1 = new Feature({geometry: lineString1});
+lineFeature1.setStyle(lineStyle);
+lineFeature1.getStyle().getText().setText('LINE ONE');
+vectorSource.addFeature(lineFeature1);
+
+const lineString2 = lineString1.clone();
+lineString2.translate(10, 10);
+const lineFeature2 = new Feature({geometry: lineString2});
+lineFeature2.setStyle(lineStyle.clone());
+lineFeature2.getStyle().getText().setText('LINE TWO');
+lineFeature2.getStyle().getText().setFill(new Fill({color: 'green'}));
+vectorSource.addFeature(lineFeature2);
+
+const lineString3 = lineString1.clone();
+lineString3.translate(-10, 10);
+const lineFeature3 = new Feature({geometry: lineString3});
+lineFeature3.setStyle(lineStyle.clone());
+lineFeature3.getStyle().getText().setText('LINE THREE');
+lineFeature3.getStyle().getText().setFill(new Fill({color: 'yellow'}));
+vectorSource.addFeature(lineFeature3);
+
+const map = new Map({
+  pixelRatio: 1,
+  layers: [
+    new VectorLayer({
+      source: vectorSource
+    })
+  ],
+  target: 'map',
+  view: new View({
+    center: [0, 0],
+    resolution: 1
+  })
+});
+map.getView().fit(vectorSource.getExtent());
+
+render({tolerance: 0.02});

rendering/cases/text-style/main.js

@@ -20,7 +20,7 @@ feature = new Feature({
 feature.setStyle(new Style({
   text: new Text({
     text: 'hello',
-    font: '14px sans-serif',
+    font: '12px Ubuntu',
     scale: 2,
     fill: new Fill({
       color: 'red'
@@ -39,7 +39,7 @@ feature = new Feature({
 feature.setStyle(new Style({
   text: new Text({
     text: 'upside down',
-    font: '14px sans-serif',
+    font: '12px Ubuntu',
     rotation: Math.PI,
     stroke: new Stroke({
       color: 'red',
@@ -55,6 +55,7 @@ feature = new Feature({
 });
 feature.setStyle(new Style({
   text: new Text({
+    font: 'Ubuntu',
     text: 'rotateWithView',
     rotateWithView: true,
     stroke: new Stroke({
@@ -71,7 +72,7 @@ feature = new Feature({
 feature.setStyle(new Style({
   text: new Text({
     text: 'hello',
-    font: '14px sans-serif',
+    font: '12px Ubuntu',
     padding: [1, 2, 3, 5],
     backgroundFill: new Fill({
       color: 'rgba(55, 55, 55, 0.25)'
@@ -91,7 +92,7 @@ feature = new Feature({
 feature.setStyle(new Style({
   text: new Text({
     text: 'hello',
-    font: '14px sans-serif',
+    font: '12px Ubuntu',
     padding: [1, 2, 3, 5],
     backgroundFill: new Fill({
       color: 'rgba(55, 55, 55, 0.25)'