Use beta tag

Canvas optimizations

.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

changelog/upgrade-notes.md

@@ -98,6 +98,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') {

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/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/export-map.html

@@ -3,11 +3,9 @@ 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>
 <a id="export-png" class="btn btn-default"><i class="fa fa-download"></i> Download PNG</a>

examples/export-map.js

@@ -4,6 +4,8 @@ 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 +25,17 @@ const map = new Map({
   })
 });
 
+// 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;
+  }
+};
+
 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-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/filter-points-webgl.js

@@ -10,7 +10,6 @@ import WebGLPointsLayerRenderer from '../src/ol/renderer/webgl/PointsLayer';
 import {clamp, lerp} from '../src/ol/math';
 import Stamen from '../src/ol/source/Stamen';
 
-const features = [];
 const vectorSource = new Vector({
   features: [],
   attributions: 'NASA'
@@ -38,15 +37,16 @@ updateStatusText();
 class WebglPointsLayer extends VectorLayer {
   createRenderer() {
     return new WebGLPointsLayerRenderer(this, {
-      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
         const ratio = clamp((feature.get('year') - 1800) / (2013 - 1800), 0, 1);
-        return lerp(oldColor[component], newColor[component], ratio) / 255;
+
+        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;
@@ -109,26 +109,28 @@ function loadData() {
   client.open('GET', 'data/csv/meteorite_landings.csv');
   client.onload = function() {
     const csv = client.responseText;
+    const features = [];
+
+    let prevIndex = csv.indexOf('\n') + 1; // scan past the header line
+
     let curIndex;
-    let prevIndex = 0;
-    let line;
-    while ((curIndex = csv.indexOf('\n', prevIndex)) > 0) {
-      line = csv.substr(prevIndex, curIndex - prevIndex).split(',');
+    while ((curIndex = csv.indexOf('\n', prevIndex)) != -1) {
+      const line = csv.substr(prevIndex, curIndex - prevIndex).split(',');
       prevIndex = curIndex + 1;
 
-      // skip header
-      if (prevIndex === 0) {
+      const coords = fromLonLat([parseFloat(line[4]), parseFloat(line[3])]);
+      if (isNaN(coords[0]) || isNaN(coords[1])) {
+        // guard against bad data
         continue;
       }
 
-      const coords = fromLonLat([parseFloat(line[4]), parseFloat(line[3])]);
-
       features.push(new Feature({
         mass: parseFloat(line[1]) || 0,
         year: parseInt(line[2]) || 0,
         geometry: new Point(coords)
       }));
     }
+
     vectorSource.addFeatures(features);
   };
   client.send();

examples/icon-sprite-webgl.js

@@ -10,7 +10,6 @@ import {fromLonLat} from '../src/ol/proj';
 import WebGLPointsLayerRenderer from '../src/ol/renderer/webgl/PointsLayer';
 import {lerp} from '../src/ol/math';
 
-const features = [];
 const vectorSource = new Vector({
   features: [],
   attributions: 'National UFO Reporting Center'
@@ -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/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,189 +1,12 @@
 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 {toLonLat} from '../src/ol/proj';
 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 {
-
-  /**
-   * @param {import('./Base.js').Options} options Layer options.
-   */
-  constructor(options) {
-    const baseOptions = assign({}, options);
-    super(baseOptions);
-
-    this.baseOptions = baseOptions;
-
-    /**
-     * @private
-     * @type boolean
-     */
-    this.loaded = false;
-
-    this.initMap();
-  }
-
-  initMap() {
-    const map = this.map_;
-    const view = map.getView();
-    const transformToLatLng = getTransform(view.getProjection(), 'EPSG:4326');
-    const center = transformToLatLng(view.getCenter());
-
-    this.centerLastRender = view.getCenter();
-    this.zoomLastRender = view.getZoom();
-    this.centerLastRender = view.getCenter();
-    this.zoomLastRender = view.getZoom();
-
-    const options = assign(this.baseOptions, {
-      attributionControl: false,
-      boxZoom: false,
-      center,
-      container: map.getTargetElement(),
-      doubleClickZoom: false,
-      dragPan: false,
-      dragRotate: false,
-      interactive: false,
-      keyboard: false,
-      pitchWithRotate: false,
-      scrollZoom: false,
-      touchZoomRotate: false,
-      zoom: view.getZoom() - 1
-    });
-
-    this.mbmap = new mapboxgl.Map(options);
-    this.mbmap.on('load', function() {
-      this.mbmap.getCanvas().remove();
-      this.loaded = true;
-      this.map_.render();
-      [
-        'mapboxgl-control-container'
-      ].forEach(className => document.getElementsByClassName(className)[0].remove());
-    }.bind(this));
-
-    this.mbmap.on('render', function() {
-      // Reset offset
-      if (this.centerNextRender) {
-        this.centerLastRender = this.centerNextRender;
-      }
-      if (this.zoomNextRender) {
-        this.zoomLastRender = this.zoomNextRender;
-      }
-      this.updateRenderedPosition([0, 0], 1);
-    }.bind(this));
-
-  }
-
-  /**
-   *
-   * @inheritDoc
-   */
-  render(frameState) {
-    const map = this.map_;
-    const view = map.getView();
-    const transformToLatLng = getTransform(view.getProjection(), 'EPSG:4326');
-
-    this.centerNextRender = view.getCenter();
-    const lastRender = map.getPixelFromCoordinate(this.centerLastRender);
-    const nextRender = map.getPixelFromCoordinate(this.centerNextRender);
-    const centerOffset = [lastRender[0] - nextRender[0], lastRender[1] - nextRender[1]];
-    this.zoomNextRender = view.getZoom();
-    const zoomOffset = Math.pow(2, this.zoomNextRender - this.zoomLastRender);
-    this.updateRenderedPosition(centerOffset, zoomOffset);
-
-    const rotation = frameState.viewState.rotation;
-    if (rotation) {
-      this.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
-    });
-    return this.mbmap.getCanvas();
-  }
-
-  updateRenderedPosition(centerOffset, zoomOffset) {
-    const style = this.mbmap.getCanvas().style;
-    style.left = Math.round(centerOffset[0]) + 'px';
-    style.top = Math.round(centerOffset[1]) + 'px';
-    style.transform = 'scale(' + zoomOffset + ')';
-  }
-
-  setVisible(visible) {
-    super.setVisible(visible);
-
-    const canvas = this.mbmap.getCanvas();
-    canvas.style.display = visible ? 'block' : 'none';
-  }
-
-  setOpacity(opacity) {
-    super.setOpacity(opacity);
-    const canvas = this.mbmap.getCanvas();
-    canvas.style.opacity = opacity;
-  }
-
-  setZIndex(zindex) {
-    super.setZIndex(zindex);
-    const canvas = this.mbmap.getCanvas();
-    canvas.style.zIndex = zindex;
-  }
-
-  /**
-   * @inheritDoc
-   */
-  getSourceState() {
-    return this.loaded ? SourceState.READY : SourceState.UNDEFINED;
-  }
-
-  setMap(map) {
-    this.map_ = map;
-  }
-
-}
-
-mapboxgl.Map.prototype._setupContainer = function _setupContainer() {
-  const container = this._container;
-  container.classList.add('mapboxgl-map');
-
-  const canvasContainer = this._canvasContainer = container.firstChild;
-
-  this._canvas = document.createElement('canvas');
-  canvasContainer.insertBefore(this._canvas, canvasContainer.firstChild);
-  this._canvas.style.position = 'absolute';
-  this._canvas.addEventListener('webglcontextlost', this._contextLost, false);
-  this._canvas.addEventListener('webglcontextrestored', this._contextRestored, false);
-  this._canvas.setAttribute('tabindex', '0');
-  this._canvas.setAttribute('aria-label', 'Map');
-  this._canvas.className = 'mapboxgl-canvas';
-
-  const dimensions = this._containerDimensions();
-  this._resizeCanvas(dimensions[0], dimensions[1]);
-
-  this._controlContainer = canvasContainer;
-  const controlContainer = this._controlContainer = document.createElement('div');
-  controlContainer.className = 'mapboxgl-control-container';
-  container.appendChild(controlContainer);
-
-  const positions = this._controlPositions = {};
-  ['top-left', 'top-right', 'bottom-left', 'bottom-right'].forEach(function(positionName) {
-    const elem = document.createElement('div');
-    elem.className = 'mapboxgl-ctrl-' + positionName;
-    controlContainer.appendChild(elem);
-    positions[positionName] = elem;
-  });
-};
-
 const style = new Style({
   stroke: new Stroke({
     color: '#319FD3',
@@ -211,11 +34,70 @@ const map = new Map({
   })
 });
 
+
+// init Mapbox object
+
+const view = map.getView();
+const center = toLonLat(view.getCenter(), view.getProjection());
 const key = 'ER67WIiPdCQvhgsUjoWK';
-const mbLayer = new Mapbox({
-  map: map,
-  container: map.getTarget(),
-  style: 'https://maps.tilehosting.com/styles/bright/style.json?key=' + key
+
+const mbMap = new mapboxgl.Map({
+  style: 'https://maps.tilehosting.com/styles/bright/style.json?key=' + key,
+  attributionControl: false,
+  boxZoom: false,
+  center: center,
+  container: map.getTargetElement(),
+  doubleClickZoom: false,
+  dragPan: false,
+  dragRotate: false,
+  interactive: false,
+  keyboard: false,
+  pitchWithRotate: false,
+  scrollZoom: false,
+  touchZoomRotate: false,
+  zoom: view.getZoom() - 1
+});
+
+
+// init OL layers
+
+const mbLayer = new Layer({
+  render: function(frameState) {
+    const canvas = mbMap.getCanvas();
+    const view = map.getView();
+
+    const visible = mbLayer.getVisible();
+    canvas.style.display = visible ? 'block' : 'none';
+
+    const opacity = mbLayer.getOpacity();
+    canvas.style.opacity = opacity;
+
+    // adjust view parameters in mapbox
+    const rotation = frameState.viewState.rotation;
+    if (rotation) {
+      mbMap.rotateTo(-rotation * 180 / Math.PI, {
+        animate: false
+      });
+    }
+    const center = toLonLat(view.getCenter(), view.getProjection());
+    const zoom = view.getZoom() - 1;
+    mbMap.jumpTo({
+      center: center,
+      zoom: zoom,
+      animate: false
+    });
+
+    // 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;
+  }
 });
 
 map.addLayer(mbLayer);

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/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/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,7 +122,7 @@
           <a class="copy-button" id="copy-html-button" data-clipboard-target="#example-html-source"><i class="fa fa-clipboard"></i> Copy</a>
         </div>
         <pre><legend>index.html</legend><code id="example-html-source" class="language-markup">&lt;!DOCTYPE html&gt;
-&lt;html&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;

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/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/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.8",
   "description": "OpenLayers mapping library",
   "keywords": [
     "map",
@@ -24,7 +24,7 @@
     "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",
     "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": {
@@ -41,54 +41,60 @@
     "rbush": "2.0.2"
   },
   "devDependencies": {
+    "@babel/core": "^7.4.0",
+    "@babel/preset-env": "^7.4.2",
     "@openlayers/eslint-plugin": "^4.0.0-beta.2",
     "@types/arcgis-rest-api": "^10.4.4",
     "@types/geojson": "^7946.0.7",
     "@types/pbf": "^3.0.1",
     "@types/rbush": "^2.0.2",
     "@types/topojson-specification": "^1.0.1",
+    "babel-loader": "^8.0.5",
     "buble": "^0.19.7",
     "buble-loader": "^0.5.1",
     "chaikin-smooth": "^1.0.4",
     "clean-css-cli": "4.3.0",
-    "copy-webpack-plugin": "^5.0.2",
+    "copy-webpack-plugin": "^5.0.3",
     "coveralls": "3.0.3",
     "eslint": "^5.16.0",
     "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",
+    "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.4.0",
-    "jsdoc": "3.5.5",
-    "jsdoc-plugin-typescript": "^1.0.7",
-    "karma": "^4.0.1",
+    "istanbul-instrumenter-loader": "^3.0.1",
+    "jquery": "3.4.1",
+    "jsdoc": "3.6.2",
+    "jsdoc-plugin-typescript": "^2.0.0",
+    "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",
+    "loglevelnext": "^3.0.1",
     "marked": "0.6.2",
-    "mocha": "6.1.3",
-    "ol-mapbox-style": "^4.3.1",
+    "mocha": "6.1.4",
+    "ol-mapbox-style": "^5.0.0-beta.1",
     "pixelmatch": "^4.0.2",
     "pngjs": "^3.4.0",
     "proj4": "2.5.0",
-    "puppeteer": "~1.14.0",
-    "serve-static": "^1.13.2",
+    "puppeteer": "~1.16.0",
+    "serve-static": "^1.14.0",
     "shx": "^0.3.2",
-    "sinon": "^7.3.1",
+    "sinon": "^7.3.2",
     "terser-webpack-plugin": "^1.2.3",
-    "typescript": "^3.2.2",
+    "typescript": "^3.4.5",
     "url-polyfill": "^1.1.5",
     "walk": "^2.3.9",
-    "webpack": "4.30.0",
-    "webpack-cli": "^3.3.0",
+    "webpack": "4.31.0",
+    "webpack-cli": "^3.3.2",
     "webpack-dev-middleware": "^3.6.2",
     "webpack-dev-server": "^3.3.1",
     "yargs": "^13.2.2"

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

@@ -7,6 +7,7 @@ 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';
 
@@ -59,9 +60,10 @@ source1.addFeature(new Feature({
 }));
 layer1.setStyle(function(feature) {
   return new Style({
+    zIndex: feature.get('zIndex'),
     image: new CircleStyle({
       radius: 15,
-      stroke: new Stroke({
+      fill: new Fill({
         color: 'blue'
       })
     })
@@ -69,7 +71,7 @@ layer1.setStyle(function(feature) {
 });
 map.addLayer(layer1);
 
-center = [center[0] + 500, center[1] + 500];
+center = [center[0] + 500, center[1] + 700];
 const feature2 = new Feature({
   geometry: new Point(center),
   text: 'center',
@@ -88,15 +90,16 @@ source2.addFeature(new Feature({
 }));
 layer2.setStyle(function(feature) {
   return new Style({
+    zIndex: feature.get('zIndex'),
     text: new Text({
       text: feature.get('text'),
-      font: '16px Ubuntu'
+      font: 'italic bold 18px Ubuntu'
     })
   });
 });
 map.addLayer(layer2);
 
-center = [center[0] + 500, center[1] + 500];
+center = [center[0] + 500, center[1] + 300];
 source3.addFeature(new Feature({
   geometry: new Point(center),
   text: 'center'
@@ -112,16 +115,17 @@ source3.addFeature(new Feature({
 layer3.setStyle(function(feature) {
   return new Style({
     image: new CircleStyle({
-      radius: 5,
+      radius: 10,
       stroke: new Stroke({
-        color: 'red'
+        color: 'red',
+        width: 8
       })
     }),
     text: new Text({
       text: feature.get('text'),
-      font: '16px Ubuntu',
+      font: 'italic bold 18px Ubuntu',
       textBaseline: 'bottom',
-      offsetY: -5
+      offsetY: -12
     })
   });
 });
@@ -130,11 +134,12 @@ map.addLayer(layer3);
 center = [center[0] - 2000, center[1] - 2000];
 const point = new Feature(new Point(center));
 point.setStyle(new Style({
-  zIndex: 2,
+  zIndex: 1,
   image: new CircleStyle({
     radius: 8,
     stroke: new Stroke({
-      color: 'blue'
+      color: 'blue',
+      width: 4
     })
   })
 }));
@@ -143,7 +148,7 @@ const line = new Feature(new LineString([
   [center[0] + 650, center[1] - 200]
 ]));
 line.setStyle(new Style({
-  zIndex: 1,
+  zIndex: 2,
   stroke: new Stroke({
     color: '#CCC',
     width: 12
@@ -151,7 +156,7 @@ line.setStyle(new Style({
   text: new Text({
     placement: 'line',
     text: 'east-west',
-    font: '16px Ubuntu',
+    font: 'italic bold 18px Ubuntu',
     overflow: true
   })
 }));
@@ -159,4 +164,4 @@ source4.addFeature(point);
 source4.addFeature(line);
 map.addLayer(layer4);
 
-render({tolerance: 0.02});
+render({tolerance: 0.007});

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

@@ -1,72 +1,19 @@
-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 Feature from '../../../src/ol/Feature.js';
 import Point from '../../../src/ol/geom/Point.js';
-import LineString from '../../../src/ol/geom/LineString.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';
 
-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);
-
+let center = [1825927.7316762917, 6143091.089223046];
 const map = new Map({
   pixelRatio: 1,
-  layers: [
-    vectorLayer1
-  ],
   target: 'map',
   view: new View({
     center: center,
@@ -74,6 +21,147 @@ const map = new Map({
   })
 });
 
-map.getView().fit(source.getExtent());
+const source1 = new VectorSource();
+const layer1 = new VectorImageLayer({
+  declutter: true,
+  source: source1
+});
 
-render({tolerance: 0.02});
+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/multiple-layers/main.js

@@ -4,8 +4,10 @@ import {Vector as VectorLayer, Tile as TileLayer} from '../../../src/ol/layer.js
 import {Vector as VectorSource, XYZ} from '../../../src/ol/source.js';
 import GeoJSON from '../../../src/ol/format/GeoJSON.js';
 import {Style, Stroke} from '../../../src/ol/style.js';
+import Feature from '../../../src/ol/Feature.js';
+import Point from '../../../src/ol/geom/Point.js';
 
-new Map({
+const map = new Map({
   layers: [
     new TileLayer({
       source: new XYZ({
@@ -14,6 +16,7 @@ new Map({
       })
     }),
     new VectorLayer({
+      zIndex: 1,
       style: new Style({
         stroke: new Stroke({
           color: 'rgba(255,255,255,0.5)',
@@ -33,4 +36,11 @@ new Map({
   })
 });
 
+const unmanaged = new VectorLayer({
+  source: new VectorSource({
+    features: [new Feature(new Point([0, 0]))]
+  })
+});
+unmanaged.setMap(map);
+
 render();

src/ol/PluggableMap.js

@@ -39,6 +39,7 @@ import {create as createTransform, apply as applyTransform} from './transform.js
  * @property {boolean} animate
  * @property {import("./transform.js").Transform} coordinateToPixelTransform
  * @property {null|import("./extent.js").Extent} extent
+ * @property {Array<*>} declutterItems
  * @property {import("./coordinate.js").Coordinate} focus
  * @property {number} index
  * @property {Array<import("./layer/Layer.js").State>} layerStatesArray
@@ -1175,6 +1176,7 @@ class PluggableMap extends BaseObject {
       frameState = /** @type {FrameState} */ ({
         animate: false,
         coordinateToPixelTransform: this.coordinateToPixelTransform_,
+        declutterItems: previousFrameState ? previousFrameState.declutterItems : [],
         extent: extent,
         focus: this.focus_ ? this.focus_ : viewState.center,
         index: this.frameIndex_++,

src/ol/View.js

@@ -191,6 +191,11 @@ const DEFAULT_MIN_ZOOM = 0;
  * This is the object to act upon to change the center, resolution,
  * and rotation of the map.
  *
+ * A View has a `projection`. The projection determines the
+ * coordinate system of the center, and its units determine the units of the
+ * resolution (projection units per pixel). The default projection is
+ * Spherical Mercator (EPSG:3857).
+ *
  * ### The view states
  *
  * An View is determined by three states: `center`, `resolution`,
@@ -202,11 +207,6 @@ const DEFAULT_MIN_ZOOM = 0;
  * methods are available, as well as `getResolutionForZoom` and
  * `getZoomForResolution` to switch from one system to the other.
  *
- * A View has a `projection`. The projection determines the
- * coordinate system of the center, and its units determine the units of the
- * resolution (projection units per pixel). The default projection is
- * Spherical Mercator (EPSG:3857).
- *
  * ### The constraints
  *
  * `setCenter`, `setResolution` and `setRotation` can be used to change the
@@ -218,7 +218,7 @@ const DEFAULT_MIN_ZOOM = 0;
  *
  * The *resolution constraint* typically restricts min/max values and
  * snaps to specific resolutions. It is determined by the following
- * options: `resolutions`, `maxResolution`, `maxZoom`, and `zoomFactor`.
+ * options: `resolutions`, `maxResolution`, `maxZoom` and `zoomFactor`.
  * If `resolutions` is set, the other three options are ignored. See
  * documentation for each option for more information. By default, the view
  * only has a min/max restriction and allow intermediary zoom levels when
@@ -226,7 +226,7 @@ const DEFAULT_MIN_ZOOM = 0;
  *
  * The *rotation constraint* snaps to specific angles. It is determined
  * by the following options: `enableRotation` and `constrainRotation`.
- * By default the rotation value is snapped to zero when approaching the
+ * By default rotation is allowed and its value is snapped to zero when approaching the
  * horizontal.
  *
  * The *center constraint* is determined by the `extent` option. By

src/ol/format.js

@@ -7,6 +7,7 @@ export {default as GeoJSON} from './format/GeoJSON.js';
 export {default as GML} from './format/GML.js';
 export {default as GPX} from './format/GPX.js';
 export {default as IGC} from './format/IGC.js';
+export {default as IIIFInfo} from './format/IIIFInfo.js';
 export {default as KML} from './format/KML.js';
 export {default as MVT} from './format/MVT.js';
 export {default as OWS} from './format/OWS.js';

src/ol/format/IIIFInfo.js

@@ -0,0 +1,431 @@
+/**
+ * @module ol/format/IIIFInfo
+ */
+
+import {assert} from '../asserts.js';
+
+
+/**
+ * @typedef {Object} PreferredOptions
+ * @property {string} [format] Preferred image format. Will be used if the image information
+ * indicates support for that format.
+ * @property {string} [quality] IIIF image qualitiy.  Will be used if the image information
+ * indicates support for that quality.
+ */
+
+/**
+ * @typedef {Object} SupportedFeatures
+ * @property {Array<string>} [supports] Supported IIIF image size and region
+ * calculation features.
+ * @property {Array<string>} [formats] Supported image formats.
+ * @property {Array<string>} [qualities] Supported IIIF image qualities.
+ */
+
+/**
+ * @typedef {Object} ImageInformationResponse1_0
+ * @property {string} identifier
+ * @property {number} width
+ * @property {number} height
+ * @property {Array<number>} [scale_factors] Resolution scaling factors.
+ * @property {number} [tile_width]
+ * @property {number} [tile_height]
+ * @property {Array<string>} [formats] Supported image formats.
+ * @property {string} [profile] Compliance level URI.
+ */
+
+/**
+ * @typedef {Object} ImageInformationResponse1_1
+ * @property {string} "@id" The base URI of the image service.
+ * @property {string} "@context" JSON-LD context URI.
+ * @property {number} width Full image width.
+ * @property {number} height Full image height.
+ * @property {Array<number>} [scale_factors] Resolution scaling factors.
+ * @property {number} [tile_width]
+ * @property {number} [tile_height]
+ * @property {Array<string>} [formats] Supported image formats.
+ * @property {string} [profile] Compliance level URI.
+ */
+
+/**
+ * @typedef {Object} TileInfo
+ * @property {Array<number>} scaleFactors Supported resolution scaling factors.
+ * @property {number} width Tile width in pixels.
+ * @property {number} [height] Tile height in pixels. Same as tile width if height is
+ * not given.
+ */
+
+/**
+ * @typedef {Object} IiifProfile
+ * @property {Array<string>} [formats] Supported image formats for the image service.
+ * @property {Array<string>} [qualities] Supported IIIF image qualities.
+ * @property {Array<string>} [supports] Supported features.
+ * @property {number} [maxArea] Maximum area (pixels) available for this image service.
+ * @property {number} [maxHeight] Maximum height.
+ * @property {number} [maxWidth] Maximum width.
+ */
+
+/**
+ * @typedef {Object} ImageInformationResponse2
+ * @property {string} "@id" The base URI of the image service.
+ * @property {string} "@context" JSON-LD context IRI
+ * @property {number} width Full image width.
+ * @property {number} height Full image height.
+ * @property {Array<string|IiifProfile>} profile Additional informations about the image
+ * service's capabilities.
+ * @property {Array<Object<string, number>>} [sizes] Supported full image dimensions.
+ * @property {Array<TileInfo>} [tiles] Supported tile sizes and resolution scaling factors.
+ */
+
+/**
+ * @typedef {Object} ImageInformationResponse3
+ * @property {string} id The base URI of the image service.
+ * @property {string} "@context" JSON-LD context IRI
+ * @property {number} width Full image width.
+ * @property {number} height Full image height.
+ * @property {string} profile Compliance level, one of 'level0', 'level1' or 'level2'
+ * @property {Array<Object<string, number>>} [sizes] Supported full image dimensions.
+ * @property {Array<TileInfo>} [tiles] Supported tile sizes and resolution scaling factors.
+ * @property {number} [maxArea] Maximum area (pixels) available for this image service.
+ * @property {number} [maxHeight] Maximum height.
+ * @property {number} [maxWidth] Maximum width.
+ * @property {Array<string>} [extraQualities] IIIF image qualities supported by the
+ * image service additional to the ones indicated by the compliance level.
+ * @property {Array<string>} [extraFormats] Image formats supported by the
+ * image service additional to the ones indicated by the compliance level.
+ * @property {Array<string>} [extraFeatures] Additional supported features whose support
+ * is not indicated by the compliance level.
+ */
+
+/**
+ * Enum representing the major IIIF Image API versions
+ * @enum {string}
+ */
+const Versions = {
+  VERSION1: 'version1',
+  VERSION2: 'version2',
+  VERSION3: 'version3'
+};
+
+/**
+ * Supported image formats, qualities and supported region / size calculation features
+ * for different image API versions and compliance levels
+ * @const
+ * @type {Object<string, Object<string, SupportedFeatures>>}
+ */
+const IIIF_PROFILE_VALUES = {};
+IIIF_PROFILE_VALUES[Versions.VERSION1] = {
+  'level0': {
+    supports: [],
+    formats: [],
+    qualities: ['native']
+  },
+  'level1': {
+    supports: ['regionByPx', 'sizeByW', 'sizeByH', 'sizeByPct'],
+    formats: ['jpg'],
+    qualities: ['native']
+  },
+  'level2': {
+    supports: ['regionByPx', 'regionByPct', 'sizeByW', 'sizeByH', 'sizeByPct',
+      'sizeByConfinedWh', 'sizeByWh'],
+    formats: ['jpg', 'png'],
+    qualities: ['native', 'color', 'grey', 'bitonal']
+  }
+};
+IIIF_PROFILE_VALUES[Versions.VERSION2] = {
+  'level0': {
+    supports: [],
+    formats: ['jpg'],
+    qualities: ['default']
+  },
+  'level1': {
+    supports: ['regionByPx', 'sizeByW', 'sizeByH', 'sizeByPct'],
+    formats: ['jpg'],
+    qualities: ['default']
+  },
+  'level2': {
+    supports: ['regionByPx', 'regionByPct', 'sizeByW', 'sizeByH', 'sizeByPct',
+      'sizeByConfinedWh', 'sizeByDistortedWh', 'sizeByWh'],
+    formats: ['jpg', 'png'],
+    qualities: ['default', 'bitonal']
+  }
+};
+IIIF_PROFILE_VALUES[Versions.VERSION3] = {
+  'level0': {
+    supports: [],
+    formats: ['jpg'],
+    qualities: ['default']
+  },
+  'level1': {
+    supports: ['regionByPx', 'regionSquare', 'sizeByW', 'sizeByH'],
+    formats: ['jpg'],
+    qualities: ['default']
+  },
+  'level2': {
+    supports: ['regionByPx', 'regionSquare', 'regionByPct',
+      'sizeByW', 'sizeByH', 'sizeByPct', 'sizeByConfinedWh', 'sizeByWh'],
+    formats: ['jpg'],
+    qualities: ['default', 'bitonal']
+  }
+};
+IIIF_PROFILE_VALUES['none'] = {
+  'none': {
+    supports: [],
+    formats: [],
+    qualities: []
+  }
+};
+
+const COMPLIANCE_VERSION1 = new RegExp('^https?\:\/\/library\.stanford\.edu\/iiif\/image-api\/(1\.1\/)?compliance\.html#level[0-2]$');
+const COMPLIANCE_VERSION2 = new RegExp('^https?\:\/\/iiif\.io\/api\/image\/2\/level[0-2](\.json)?$');
+const COMPLIANCE_VERSION3 = new RegExp('(^https?\:\/\/iiif\.io\/api\/image\/3\/level[0-2](\.json)?$)|(^level[0-2]$)');
+
+function generateVersion1Options(iiifInfo) {
+  let levelProfile = iiifInfo.getComplianceLevelSupportedFeatures();
+  // Version 1.0 and 1.1 do not require a profile.
+  if (levelProfile === undefined) {
+    levelProfile = IIIF_PROFILE_VALUES[Versions.VERSION1]['level0'];
+  }
+  return {
+    url: iiifInfo.imageInfo['@id'] === undefined ? undefined : iiifInfo.imageInfo['@id'].replace(/\/?(info.json)?$/g, ''),
+    supports: levelProfile.supports,
+    formats: [...levelProfile.formats, iiifInfo.imageInfo.formats === undefined ?
+      [] : iiifInfo.imageInfo.formats
+    ],
+    qualities: [...levelProfile.qualities, iiifInfo.imageInfo.qualities === undefined ?
+      [] : iiifInfo.imageInfo.qualities
+    ],
+    resolutions: iiifInfo.imageInfo.scale_factors,
+    tileSize: iiifInfo.imageInfo.tile_width !== undefined ? (iiifInfo.imageInfo.tile_height !== undefined ?
+      [iiifInfo.imageInfo.tile_width, iiifInfo.imageInfo.tile_height] : [iiifInfo.imageInfo.tile_width, iiifInfo.imageInfo.tile_width]) :
+      (iiifInfo.imageInfo.tile_height != undefined ? [iiifInfo.imageInfo.tile_height, iiifInfo.imageInfo.tile_height] : undefined)
+  };
+}
+
+function generateVersion2Options(iiifInfo) {
+  const levelProfile = iiifInfo.getComplianceLevelSupportedFeatures(),
+      additionalProfile = Array.isArray(iiifInfo.imageInfo.profile) && iiifInfo.imageInfo.profile.length > 1,
+      profileSupports = additionalProfile && iiifInfo.imageInfo.profile[1].supports ? iiifInfo.imageInfo.profile[1].supports : [],
+      profileFormats = additionalProfile && iiifInfo.imageInfo.profile[1].formats ? iiifInfo.imageInfo.profile[1].formats : [],
+      profileQualities = additionalProfile && iiifInfo.imageInfo.profile[1].qualities ? iiifInfo.imageInfo.profile[1].qualities : [];
+  return {
+    url: iiifInfo.imageInfo['@id'].replace(/\/?(info.json)?$/g, ''),
+    sizes: iiifInfo.imageInfo.sizes === undefined ? undefined : iiifInfo.imageInfo.sizes.map(function(size) {
+      return [size.width, size.height];
+    }),
+    tileSize: iiifInfo.imageInfo.tiles === undefined ? undefined : [
+      iiifInfo.imageInfo.tiles.map(function(tile) {
+        return tile.width;
+      })[0],
+      iiifInfo.imageInfo.tiles.map(function(tile) {
+        return tile.height === undefined ? tile.width : tile.height;
+      })[0]
+    ],
+    resolutions: iiifInfo.imageInfo.tiles === undefined ? undefined :
+      iiifInfo.imageInfo.tiles.map(function(tile) {
+        return tile.scaleFactors;
+      })[0],
+    supports: [...levelProfile.supports, ...profileSupports],
+    formats: [...levelProfile.formats, ...profileFormats],
+    qualities: [...levelProfile.qualities, ...profileQualities]
+  };
+}
+
+function generateVersion3Options(iiifInfo) {
+  const levelProfile = iiifInfo.getComplianceLevelSupportedFeatures();
+  return {
+    url: iiifInfo.imageInfo['id'],
+    sizes: iiifInfo.imageInfo.sizes === undefined ? undefined : iiifInfo.imageInfo.sizes.map(function(size) {
+      return [size.width, size.height];
+    }),
+    tileSize: iiifInfo.imageInfo.tiles === undefined ? undefined : [
+      iiifInfo.imageInfo.tiles.map(function(tile) {
+        return tile.width;
+      })[0],
+      iiifInfo.imageInfo.tiles.map(function(tile) {
+        return tile.height;
+      })[0]
+    ],
+    resolutions: iiifInfo.imageInfo.tiles === undefined ? undefined :
+      iiifInfo.imageInfo.tiles.map(function(tile) {
+        return tile.scaleFactors;
+      })[0],
+    supports: iiifInfo.imageInfo.extraFeatures === undefined ? levelProfile.supports :
+      [...levelProfile.supports, ...iiifInfo.imageInfo.extraFeatures],
+    formats: iiifInfo.imageInfo.extraFormats === undefined ? levelProfile.formats :
+      [...levelProfile.formats, ...iiifInfo.imageInfo.extraFormats],
+    qualities: iiifInfo.imageInfo.extraQualities === undefined ? levelProfile.qualities :
+      [...levelProfile.supports, ...iiifInfo.imageInfo.extraQualities],
+    maxWidth: undefined,
+    maxHeight: undefined,
+    maxArea: undefined
+  };
+}
+
+const versionFunctions = {};
+versionFunctions[Versions.VERSION1] = generateVersion1Options;
+versionFunctions[Versions.VERSION2] = generateVersion2Options;
+versionFunctions[Versions.VERSION3] = generateVersion3Options;
+
+/**
+ * @classdesc
+ * Format for transforming IIIF Image API image information responses into
+ * IIIF tile source ready options
+ *
+ * @api
+ */
+class IIIFInfo {
+
+  /**
+   * @param {string|ImageInformationResponse1_0|ImageInformationResponse1_1|ImageInformationResponse2|ImageInformationResponse3} imageInfo
+   * Deserialized image information JSON response object or JSON response as string
+   */
+  constructor(imageInfo) {
+    this.setImageInfo(imageInfo);
+  }
+
+  /**
+   * @param {string|ImageInformationResponse1_0|ImageInformationResponse1_1|ImageInformationResponse2|ImageInformationResponse3} imageInfo
+   * Deserialized image information JSON response object or JSON response as string
+   * @api
+   */
+  setImageInfo(imageInfo) {
+    if (typeof imageInfo == 'string') {
+      this.imageInfo = JSON.parse(imageInfo);
+    } else {
+      this.imageInfo = imageInfo;
+    }
+  }
+
+  /**
+   * @returns {Versions} Major IIIF version.
+   * @api
+   */
+  getImageApiVersion() {
+    if (this.imageInfo === undefined) {
+      return;
+    }
+    let context = this.imageInfo['@context'] || 'ol-no-context';
+    if (typeof context == 'string') {
+      context = [context];
+    }
+    for (let i = 0; i < context.length; i++) {
+      switch (context[i]) {
+        case 'http://library.stanford.edu/iiif/image-api/1.1/context.json':
+        case 'http://iiif.io/api/image/1/context.json':
+          return Versions.VERSION1;
+        case 'http://iiif.io/api/image/2/context.json':
+          return Versions.VERSION2;
+        case 'http://iiif.io/api/image/3/context.json':
+          return Versions.VERSION3;
+        case 'ol-no-context':
+          // Image API 1.0 has no '@context'
+          if (this.getComplianceLevelEntryFromProfile(Versions.VERSION1) && this.imageInfo.identifier) {
+            return Versions.VERSION1;
+          }
+          break;
+        default:
+      }
+    }
+    assert(false, 61);
+  }
+
+  /**
+   * @param {Versions} version Optional IIIF image API version
+   * @returns {string} Compliance level as it appears in the IIIF image information
+   * response.
+   */
+  getComplianceLevelEntryFromProfile(version) {
+    if (this.imageInfo === undefined || this.imageInfo.profile === undefined) {
+      return;
+    }
+    if (version === undefined) {
+      version = this.getImageApiVersion();
+    }
+    switch (version) {
+      case Versions.VERSION1:
+        if (COMPLIANCE_VERSION1.test(this.imageInfo.profile)) {
+          return this.imageInfo.profile;
+        }
+        break;
+      case Versions.VERSION3:
+        if (COMPLIANCE_VERSION3.test(this.imageInfo.profile)) {
+          return this.imageInfo.profile;
+        }
+        break;
+      case Versions.VERSION2:
+        if (typeof this.imageInfo.profile === 'string' && COMPLIANCE_VERSION2.test(this.imageInfo.profile)) {
+          return this.imageInfo.profile;
+        }
+        if (Array.isArray(this.imageInfo.profile) && this.imageInfo.profile.length > 0
+          && typeof this.imageInfo.profile[0] === 'string' && COMPLIANCE_VERSION2.test(this.imageInfo.profile[0])) {
+          return this.imageInfo.profile[0];
+        }
+        break;
+      default:
+    }
+  }
+
+  /**
+   * @param {Versions} version Optional IIIF image API version
+   * @returns {string} Compliance level, on of 'level0', 'level1' or 'level2' or undefined
+   */
+  getComplianceLevelFromProfile(version) {
+    const complianceLevel = this.getComplianceLevelEntryFromProfile(version);
+    if (complianceLevel === undefined) {
+      return undefined;
+    }
+    const level = complianceLevel.match(/level[0-2](\.json)?$/g);
+    return Array.isArray(level) ? level[0].replace('.json', '') : undefined;
+  }
+
+  /**
+   * @returns {SupportedFeatures} Image formats, qualities and region / size calculation
+   * methods that are supported by the IIIF service.
+   */
+  getComplianceLevelSupportedFeatures() {
+    if (this.imageInfo === undefined) {
+      return;
+    }
+    const version = this.getImageApiVersion();
+    const level = this.getComplianceLevelFromProfile(version);
+    if (level === undefined) {
+      return IIIF_PROFILE_VALUES['none']['none'];
+    }
+    return IIIF_PROFILE_VALUES[version][level];
+  }
+
+  /**
+   * @param {PreferredOptions} opt_preferredOptions Optional options for preferred format and quality.
+   * @returns {import("../source/IIIF.js").Options} IIIF tile source ready constructor options.
+   * @api
+   */
+  getTileSourceOptions(opt_preferredOptions) {
+    const options = opt_preferredOptions || {},
+        version = this.getImageApiVersion();
+    if (version === undefined) {
+      return;
+    }
+    const imageOptions = version === undefined ? undefined : versionFunctions[version](this);
+    if (imageOptions === undefined) {
+      return;
+    }
+    return {
+      url: imageOptions.url,
+      version: version,
+      size: [this.imageInfo.width, this.imageInfo.height],
+      sizes: imageOptions.sizes,
+      format: imageOptions.formats.includes(options.format) ? options.format : 'jpg',
+      supports: imageOptions.supports,
+      quality: options.quality && imageOptions.qualities.includes(options.quality) ?
+        options.quality : imageOptions.qualities.includes('native') ? 'native' : 'default',
+      resolutions: Array.isArray(imageOptions.resolutions) ? imageOptions.resolutions.sort(function(a, b) {
+        return b - a;
+      }) : undefined,
+      tileSize: imageOptions.tileSize
+    };
+  }
+
+}
+
+export default IIIFInfo;
+export {Versions};

src/ol/interaction/DragPan.js

@@ -73,6 +73,10 @@ class DragPan extends PointerInteraction {
    * @inheritDoc
    */
   handleDragEvent(mapBrowserEvent) {
+    if (!this.panning_) {
+      this.panning_ = true;
+      this.getMap().getView().beginInteraction();
+    }
     const targetPointers = this.targetPointers;
     const centroid = centroidFromPointers(targetPointers);
     if (targetPointers.length == this.lastPointersCount_) {
@@ -149,10 +153,6 @@ class DragPan extends PointerInteraction {
       if (view.getAnimating()) {
         view.cancelAnimations();
       }
-      if (!this.panning_) {
-        this.panning_ = true;
-        this.getMap().getView().beginInteraction();
-      }
       if (this.kinetic_) {
         this.kinetic_.begin();
       }

src/ol/interaction/Extent.js

@@ -38,7 +38,7 @@ import {createEditingStyle} from '../style/Style.js';
 const ExtentEventType = {
   /**
    * Triggered after the extent is changed
-   * @event ExtentEventType#extentchanged
+   * @event ExtentEvent#extentchanged
    * @api
    */
   EXTENTCHANGED: 'extentchanged'
@@ -47,10 +47,10 @@ const ExtentEventType = {
 
 /**
  * @classdesc
- * Events emitted by {@link module:ol/interaction/Extent~ExtentInteraction} instances are
+ * Events emitted by {@link module:ol/interaction/Extent~Extent} instances are
  * instances of this type.
  */
-class ExtentInteractionEvent extends Event {
+class ExtentEvent extends Event {
 
   /**
    * @param {import("../extent.js").Extent} extent the new extent
@@ -75,10 +75,10 @@ class ExtentInteractionEvent extends Event {
  * Once drawn, the vector box can be modified by dragging its vertices or edges.
  * This interaction is only supported for mouse devices.
  *
- * @fires Event
+ * @fires ExtentEvent
  * @api
  */
-class ExtentInteraction extends PointerInteraction {
+class Extent extends PointerInteraction {
   /**
    * @param {Options=} opt_options Options.
    */
@@ -399,7 +399,7 @@ class ExtentInteraction extends PointerInteraction {
     //Null extent means no bbox
     this.extent_ = extent ? extent : null;
     this.createOrUpdateExtentFeature_(extent);
-    this.dispatchEvent(new ExtentInteractionEvent(this.extent_));
+    this.dispatchEvent(new ExtentEvent(this.extent_));
   }
 }
 
@@ -470,4 +470,4 @@ function getSegments(extent) {
 }
 
 
-export default ExtentInteraction;
+export default Extent;

src/ol/layer/Base.js

@@ -83,19 +83,20 @@ class BaseLayer extends BaseObject {
   }
 
   /**
+   * @param {boolean=} opt_managed Layer is managed.
    * @return {import("./Layer.js").State} Layer state.
    */
-  getLayerState() {
+  getLayerState(opt_managed) {
     /** @type {import("./Layer.js").State} */
     const state = this.state_ || /** @type {?} */ ({
       layer: this,
-      managed: true
+      managed: opt_managed === undefined ? true : opt_managed
     });
     state.opacity = clamp(Math.round(this.getOpacity() * 100) / 100, 0, 1);
     state.sourceState = this.getSourceState();
     state.visible = this.getVisible();
     state.extent = this.getExtent();
-    state.zIndex = this.getZIndex() || 0;
+    state.zIndex = this.getZIndex() || (state.managed === false ? Infinity : 0);
     state.maxResolution = this.getMaxResolution();
     state.minResolution = Math.max(this.getMinResolution(), 0);
     this.state_ = state;

src/ol/layer/BaseTile.js

@@ -8,6 +8,7 @@ import {assign} from '../obj.js';
 
 /**
  * @typedef {Object} Options
+ * @property {string} [className='ol-layer'] A CSS class name to set to the layer element.
  * @property {number} [opacity=1] Opacity (0, 1).
  * @property {boolean} [visible=true] Visibility.
  * @property {import("../extent.js").Extent} [extent] The bounding extent for layer rendering.  The layer will not be

src/ol/layer/BaseVector.js

@@ -32,8 +32,10 @@ import {createDefaultStyle, toFunction as toStyleFunction} from '../style/Style.
  * temporary layers. The standard way to add a layer to a map and have it managed by the map is to
  * use {@link module:ol/Map#addLayer}.
  * @property {boolean} [declutter=false] Declutter images and text. Decluttering is applied to all
- * image and text styles, and the priority is defined by the z-index of the style. Lower z-index
- * means higher priority.
+ * image and text styles of all Vector and VectorTile layers that have set this to `true`. The priority
+ * is defined by the z-index of the layer, the `zIndex` of the style and the render order of features.
+ * Higher z-index means higher priority. Within the same z-index, a feature rendered before another has
+ * higher priority.
  * @property {import("../style/Style.js").StyleLike} [style] Layer style. See
  * {@link module:ol/style} for default style which will be used if this is not defined.
  * @property {boolean} [updateWhileAnimating=false] When set to `true`, feature batches will

src/ol/layer/Layer.js

@@ -10,6 +10,10 @@ import {assign} from '../obj.js';
 import RenderEventType from '../render/EventType.js';
 import SourceState from '../source/State.js';
 
+/**
+ * @typedef {function(import("../PluggableMap.js").FrameState):HTMLElement} RenderFunction
+ */
+
 
 /**
  * @typedef {Object} Options
@@ -29,6 +33,8 @@ import SourceState from '../source/State.js';
  * the source can be set by calling {@link module:ol/layer/Layer#setSource layer.setSource(source)} after
  * construction.
  * @property {import("../PluggableMap.js").default} [map] Map.
+ * @property {RenderFunction} [render] Render function. Takes the frame state as input and is expected to return an
+ * HTML element. Will overwrite the default rendering for the layer.
  */
 
 
@@ -47,8 +53,10 @@ import SourceState from '../source/State.js';
 
 /**
  * @classdesc
- * Abstract base class; normally only used for creating subclasses and not
- * instantiated in apps.
+ * Base class from which all layer types are derived. This should only be instantiated
+ * in the case where a custom layer is be added to the map with a custom `render` function.
+ * Such a function can be specified in the `options` object, and is expected to return an HTML element.
+ *
  * A visual representation of raster or vector map data.
  * Layers group together those properties that pertain to how the data is to be
  * displayed, irrespective of the source of that data.
@@ -64,6 +72,7 @@ import SourceState from '../source/State.js';
  * @fires import("../render/Event.js").RenderEvent#postrender
  *
  * @template {import("../source/Source.js").default} SourceType
+ * @api
  */
 class Layer extends BaseLayer {
   /**
@@ -100,6 +109,11 @@ class Layer extends BaseLayer {
      */
     this.renderer_ = null;
 
+    // Overwrite default render method with a custom one
+    if (options.render) {
+      this.render = options.render;
+    }
+
     if (options.map) {
       this.setMap(options.map);
     }
@@ -212,12 +226,7 @@ class Layer extends BaseLayer {
     if (map) {
       this.mapPrecomposeKey_ = listen(map, RenderEventType.PRECOMPOSE, function(evt) {
         const renderEvent = /** @type {import("../render/Event.js").default} */ (evt);
-        const layerState = this.getLayerState();
-        layerState.managed = false;
-        if (this.getZIndex() === undefined) {
-          layerState.zIndex = Infinity;
-        }
-        renderEvent.frameState.layerStatesArray.push(layerState);
+        renderEvent.frameState.layerStatesArray.push(this.getLayerState(false));
       }, this);
       this.mapRenderKey_ = listen(this, EventType.CHANGE, map.render, map);
       this.changed();

src/ol/layer/VectorImage.js

@@ -30,9 +30,9 @@ import CanvasVectorImageLayerRenderer from '../renderer/canvas/VectorImageLayer.
  * this layer in its layers collection, and the layer will be rendered on top. This is useful for
  * temporary layers. The standard way to add a layer to a map and have it managed by the map is to
  * use {@link module:ol/Map#addLayer}.
- * @property {boolean} [declutter=false] Declutter images and text. Decluttering is applied to all
- * image and text styles, and the priority is defined by the z-index of the style. Lower z-index
- * means higher priority.
+ * @property {boolean} [declutter=false] Declutter images and text on this layer. The priority is defined
+ * by the `zIndex` of the style and the render order of features. Higher z-index means higher priority.
+ * Within the same z-index, a feature rendered before another has higher priority.
  * @property {import("../style/Style.js").StyleLike} [style] Layer style. See
  * {@link module:ol/style} for default style which will be used if this is not defined.
  * @property {boolean} [updateWhileAnimating=false] When set to `true`, feature batches will

src/ol/layer/VectorTile.js

@@ -46,8 +46,10 @@ import {assign} from '../obj.js';
  * temporary layers. The standard way to add a layer to a map and have it managed by the map is to
  * use {@link module:ol/Map#addLayer}.
  * @property {boolean} [declutter=false] Declutter images and text. Decluttering is applied to all
- * image and text styles, and the priority is defined by the z-index of the style. Lower z-index
- * means higher priority.
+ * image and text styles of all Vector and VectorTile layers that have set this to `true`. The priority
+ * is defined by the z-index of the layer, the `zIndex` of the style and the render order of features.
+ * Higher z-index means higher priority. Within the same z-index, a feature rendered before another has
+ * higher priority.
  * @property {import("../style/Style.js").StyleLike} [style] Layer style. See
  * {@link module:ol/style} for default style which will be used if this is not defined.
  * @property {boolean} [updateWhileAnimating=false] When set to `true`, feature batches will be

src/ol/render.js

@@ -110,3 +110,23 @@ export function getRenderPixel(event, pixel) {
   applyTransform(event.inversePixelTransform.slice(), result);
   return result;
 }
+
+/**
+ * @param {import("./PluggableMap.js").FrameState} frameState Frame state.
+ * @param {?} declutterTree Declutter tree.
+ * @returns {?} Declutter tree.
+ */
+export function renderDeclutterItems(frameState, declutterTree) {
+  if (declutterTree) {
+    declutterTree.clear();
+  }
+  const items = frameState.declutterItems;
+  for (let z = items.length - 1; z >= 0; --z) {
+    const zIndexItems = items[z];
+    for (let i = 0, ii = zIndexItems.length; i < ii; i += 3) {
+      declutterTree = zIndexItems[i].renderDeclutter(zIndexItems[i + 1], zIndexItems[i + 2], declutterTree);
+    }
+  }
+  items.length = 0;
+  return declutterTree;
+}

src/ol/render/canvas/Executor.js

@@ -21,6 +21,7 @@ import {
 import {createCanvasContext2D} from '../../dom.js';
 import {labelCache, defaultTextAlign, measureTextHeight, measureAndCacheTextWidth, measureTextWidths} from '../canvas.js';
 import Disposable from '../../Disposable.js';
+import rbush from 'rbush';
 
 
 /**
@@ -58,15 +59,10 @@ class Executor extends Disposable {
    * @param {number} resolution Resolution.
    * @param {number} pixelRatio Pixel ratio.
    * @param {boolean} overlaps The replay can have overlapping geometries.
-   * @param {?} declutterTree Declutter tree.
    * @param {SerializableInstructions} instructions The serializable instructions
    */
-  constructor(resolution, pixelRatio, overlaps, declutterTree, instructions) {
+  constructor(resolution, pixelRatio, overlaps, instructions) {
     super();
-    /**
-     * @type {?}
-     */
-    this.declutterTree = declutterTree;
 
     /**
      * @protected
@@ -93,6 +89,11 @@ class Executor extends Disposable {
      */
     this.alignFill_;
 
+    /**
+     * @type {Array<*>}
+     */
+    this.declutterItems = [];
+
     /**
      * @protected
      * @type {Array<*>}
@@ -412,8 +413,10 @@ class Executor extends Disposable {
   /**
    * @param {import("../canvas.js").DeclutterGroup} declutterGroup Declutter group.
    * @param {import("../../Feature.js").FeatureLike} feature Feature.
+   * @param {?} declutterTree Declutter tree.
+   * @return {?} Declutter tree.
    */
-  renderDeclutter_(declutterGroup, feature) {
+  renderDeclutter(declutterGroup, feature, declutterTree) {
     if (declutterGroup && declutterGroup.length > 5) {
       const groupCount = declutterGroup[4];
       if (groupCount == 1 || groupCount == declutterGroup.length - 5) {
@@ -425,8 +428,11 @@ class Executor extends Disposable {
           maxY: /** @type {number} */ (declutterGroup[3]),
           value: feature
         };
-        if (!this.declutterTree.collides(box)) {
-          this.declutterTree.insert(box);
+        if (!declutterTree) {
+          declutterTree = rbush(9, undefined);
+        }
+        if (!declutterTree.collides(box)) {
+          declutterTree.insert(box);
           for (let j = 5, jj = declutterGroup.length; j < jj; ++j) {
             const declutterData = /** @type {Array} */ (declutterGroup[j]);
             if (declutterData) {
@@ -443,6 +449,7 @@ class Executor extends Disposable {
         createOrUpdateEmpty(declutterGroup);
       }
     }
+    return declutterTree;
   }
 
   /**
@@ -497,6 +504,7 @@ class Executor extends Disposable {
     featureCallback,
     opt_hitExtent
   ) {
+    this.declutterItems.length = 0;
     /** @type {Array<number>} */
     let pixelCoordinates;
     if (this.pixelCoordinates_ && equals(transform, this.renderedTransform_)) {
@@ -670,7 +678,7 @@ class Executor extends Disposable {
               backgroundFill ? /** @type {Array<*>} */ (lastFillInstruction) : null,
               backgroundStroke ? /** @type {Array<*>} */ (lastStrokeInstruction) : null);
           }
-          this.renderDeclutter_(declutterGroup, feature);
+          this.declutterItems.push(this, declutterGroup, feature);
           ++i;
           break;
         case CanvasInstruction.DRAW_CHARS:
@@ -739,7 +747,7 @@ class Executor extends Disposable {
               }
             }
           }
-          this.renderDeclutter_(declutterGroup, feature);
+          this.declutterItems.push(this, declutterGroup, feature);
           ++i;
           break;
         case CanvasInstruction.END_GEOMETRY:

src/ol/render/canvas/ExecutorGroup.js

@@ -35,18 +35,12 @@ class ExecutorGroup extends Disposable {
    * @param {number} resolution Resolution.
    * @param {number} pixelRatio Pixel ratio.
    * @param {boolean} overlaps The executor group can have overlapping geometries.
-   * @param {?} declutterTree Declutter tree for declutter processing in postrender.
    * @param {!Object<string, !Object<BuilderType, import("./Builder.js").SerializableInstructions>>} allInstructions
    * The serializable instructions.
    * @param {number=} opt_renderBuffer Optional rendering buffer.
    */
-  constructor(maxExtent, resolution, pixelRatio, overlaps, declutterTree, allInstructions, opt_renderBuffer) {
+  constructor(maxExtent, resolution, pixelRatio, overlaps, allInstructions, opt_renderBuffer) {
     super();
-    /**
-     * Declutter tree.
-     * @private
-     */
-    this.declutterTree_ = declutterTree;
 
     /**
      * @private
@@ -128,7 +122,7 @@ class ExecutorGroup extends Disposable {
       for (const builderType in instructionByZindex) {
         const instructions = instructionByZindex[builderType];
         executors[builderType] = new Executor(
-          this.resolution_, this.pixelRatio_, this.overlaps_, this.declutterTree_, instructions);
+          this.resolution_, this.pixelRatio_, this.overlaps_, instructions);
       }
     }
   }
@@ -172,7 +166,7 @@ class ExecutorGroup extends Disposable {
    * @param {number} hitTolerance Hit tolerance in pixels.
    * @param {Object<string, boolean>} skippedFeaturesHash Ids of features to skip.
    * @param {function(import("../../Feature.js").FeatureLike): T} callback Feature callback.
-   * @param {Object<string, import("../canvas.js").DeclutterGroup>} declutterReplays Declutter replays.
+   * @param {Array<import("../../Feature.js").FeatureLike>} declutteredFeatures Decluttered features.
    * @return {T|undefined} Callback result.
    * @template T
    */
@@ -183,7 +177,7 @@ class ExecutorGroup extends Disposable {
     hitTolerance,
     skippedFeaturesHash,
     callback,
-    declutterReplays
+    declutteredFeatures
   ) {
 
     hitTolerance = Math.round(hitTolerance);
@@ -213,12 +207,6 @@ class ExecutorGroup extends Disposable {
     }
 
     const mask = getCircleArray(hitTolerance);
-    let declutteredFeatures;
-    if (this.declutterTree_) {
-      declutteredFeatures = this.declutterTree_.all().map(function(entry) {
-        return entry.value;
-      });
-    }
 
     let builderType;
 
@@ -261,20 +249,10 @@ class ExecutorGroup extends Disposable {
         builderType = ORDER[j];
         executor = executors[builderType];
         if (executor !== undefined) {
-          if (declutterReplays &&
-              (builderType == BuilderType.IMAGE || builderType == BuilderType.TEXT)) {
-            const declutter = declutterReplays[zIndexKey];
-            if (!declutter) {
-              declutterReplays[zIndexKey] = [executor, transform.slice(0)];
-            } else {
-              declutter.push(executor, transform.slice(0));
-            }
-          } else {
-            result = executor.executeHitDetection(context, transform, rotation,
-              skippedFeaturesHash, featureCallback, hitExtent);
-            if (result) {
-              return result;
-            }
+          result = executor.executeHitDetection(context, transform, rotation,
+            skippedFeaturesHash, featureCallback, hitExtent);
+          if (result) {
+            return result;
           }
         }
       }
@@ -446,14 +424,20 @@ export function getCircleArray(radius) {
  * @param {CanvasRenderingContext2D} context Context.
  * @param {number} rotation Rotation.
  * @param {boolean} snapToPixel Snap point symbols and text to integer pixels.
+ * @param {Array<Array<*>>} declutterItems Declutter items.
  */
-export function replayDeclutter(declutterReplays, context, rotation, snapToPixel) {
+export function replayDeclutter(declutterReplays, context, rotation, snapToPixel, declutterItems) {
   const zs = Object.keys(declutterReplays).map(Number).sort(numberSafeCompareFunction);
   const skippedFeatureUids = {};
   for (let z = 0, zz = zs.length; z < zz; ++z) {
     const executorData = declutterReplays[zs[z].toString()];
+    let currentExecutor;
     for (let i = 0, ii = executorData.length; i < ii;) {
       const executor = executorData[i++];
+      if (executor !== currentExecutor) {
+        currentExecutor = executor;
+        declutterItems.push(executor.declutterItems);
+      }
       const transform = executorData[i++];
       executor.execute(context, transform, rotation, skippedFeatureUids, snapToPixel);
     }

src/ol/renderer/Composite.js

@@ -85,7 +85,8 @@ class CompositeMapRenderer extends MapRenderer {
     this.children_.length = 0;
     for (let i = 0, ii = layerStatesArray.length; i < ii; ++i) {
       const layerState = layerStatesArray[i];
-      if (!visibleAtResolution(layerState, viewResolution) || layerState.sourceState != SourceState.READY) {
+      if (!visibleAtResolution(layerState, viewResolution) ||
+        (layerState.sourceState != SourceState.READY && layerState.sourceState != SourceState.UNDEFINED)) {
         continue;
       }
 
@@ -94,11 +95,12 @@ class CompositeMapRenderer extends MapRenderer {
       if (element) {
         const zIndex = layerState.zIndex;
         if (zIndex !== element.style.zIndex) {
-          element.style.zIndex = zIndex;
+          element.style.zIndex = zIndex === Infinity ? Number.MAX_SAFE_INTEGER : zIndex;
         }
         this.children_.push(element);
       }
     }
+    super.renderFrame(frameState);
 
     replaceChildren(this.element_, this.children_);
 

src/ol/renderer/Layer.js

@@ -89,10 +89,11 @@ class LayerRenderer extends Observable {
    * @param {import("../PluggableMap.js").FrameState} frameState Frame state.
    * @param {number} hitTolerance Hit tolerance in pixels.
    * @param {function(import("../Feature.js").FeatureLike, import("../layer/Layer.js").default): T} callback Feature callback.
+   * @param {Array<import("../Feature.js").FeatureLike>} declutteredFeatures Decluttered features.
    * @return {T|void} Callback result.
    * @template T
    */
-  forEachFeatureAtCoordinate(coordinate, frameState, hitTolerance, callback) {}
+  forEachFeatureAtCoordinate(coordinate, frameState, hitTolerance, callback, declutteredFeatures) {}
 
   /**
    * @abstract

src/ol/renderer/Map.js

@@ -10,6 +10,7 @@ import {TRUE} from '../functions.js';
 import {visibleAtResolution} from '../layer/Layer.js';
 import {shared as iconImageCache} from '../style/IconImageCache.js';
 import {compose as composeTransform, makeInverse} from '../transform.js';
+import {renderDeclutterItems} from '../render.js';
 
 /**
  * @abstract
@@ -28,6 +29,11 @@ class MapRenderer extends Disposable {
      */
     this.map_ = map;
 
+    /**
+     * @private
+     */
+    this.declutterTree_ = null;
+
     /**
      * @private
      * @type {!Object<string, import("./Layer.js").default>}
@@ -133,6 +139,12 @@ class MapRenderer extends Disposable {
 
     const layerStates = frameState.layerStatesArray;
     const numLayers = layerStates.length;
+    let declutteredFeatures;
+    if (this.declutterTree_) {
+      declutteredFeatures = this.declutterTree_.all().map(function(entry) {
+        return entry.value;
+      });
+    }
     let i;
     for (i = numLayers - 1; i >= 0; --i) {
       const layerState = layerStates[i];
@@ -144,7 +156,7 @@ class MapRenderer extends Disposable {
           const callback = forEachFeatureAtCoordinate.bind(null, layerState.managed);
           result = layerRenderer.forEachFeatureAtCoordinate(
             source.getWrapX() ? translatedCoordinate : coordinate,
-            frameState, hitTolerance, callback);
+            frameState, hitTolerance, callback, declutteredFeatures);
         }
         if (result) {
           return result;
@@ -252,11 +264,10 @@ class MapRenderer extends Disposable {
 
   /**
    * Render.
-   * @abstract
    * @param {?import("../PluggableMap.js").FrameState} frameState Frame state.
    */
   renderFrame(frameState) {
-    abstract();
+    this.declutterTree_ = renderDeclutterItems(frameState, this.declutterTree_);
   }
 
   /**

src/ol/renderer/canvas/VectorImageLayer.js

@@ -1,5 +1,5 @@
 /**
- * @module ol/renderer/canvas/ImageLayer
+ * @module ol/renderer/canvas/VectorImageLayer
  */
 import ImageCanvas from '../../ImageCanvas.js';
 import ViewHint from '../../ViewHint.js';
@@ -11,6 +11,7 @@ import CanvasVectorLayerRenderer from './VectorLayer.js';
 import {listen} from '../../events.js';
 import EventType from '../../events/EventType.js';
 import ImageState from '../../ImageState.js';
+import {renderDeclutterItems} from '../../render.js';
 
 /**
  * @classdesc
@@ -72,6 +73,7 @@ class CanvasVectorImageLayerRenderer extends CanvasImageLayerRenderer {
       let skippedFeatures = this.skippedFeatures_;
       const context = vectorRenderer.context;
       const imageFrameState = /** @type {import("../../PluggableMap.js").FrameState} */ (assign({}, frameState, {
+        declutterItems: [],
         size: [
           getWidth(renderedExtent) / viewResolution,
           getHeight(renderedExtent) / viewResolution
@@ -86,6 +88,7 @@ class CanvasVectorImageLayerRenderer extends CanvasImageLayerRenderer {
               (vectorRenderer.replayGroupChanged ||
               !equals(skippedFeatures, newSkippedFeatures))) {
           vectorRenderer.renderFrame(imageFrameState, layerState);
+          renderDeclutterItems(imageFrameState, null);
           skippedFeatures = newSkippedFeatures;
           callback();
         }
@@ -123,11 +126,11 @@ class CanvasVectorImageLayerRenderer extends CanvasImageLayerRenderer {
   /**
    * @inheritDoc
    */
-  forEachFeatureAtCoordinate(coordinate, frameState, hitTolerance, callback) {
+  forEachFeatureAtCoordinate(coordinate, frameState, hitTolerance, callback, declutteredFeatures) {
     if (this.vectorRenderer_) {
-      return this.vectorRenderer_.forEachFeatureAtCoordinate(coordinate, frameState, hitTolerance, callback);
+      return this.vectorRenderer_.forEachFeatureAtCoordinate(coordinate, frameState, hitTolerance, callback, declutteredFeatures);
     } else {
-      return super.forEachFeatureAtCoordinate(coordinate, frameState, hitTolerance, callback);
+      return super.forEachFeatureAtCoordinate(coordinate, frameState, hitTolerance, callback, declutteredFeatures);
     }
   }
 }

src/ol/renderer/canvas/VectorLayer.js

@@ -5,11 +5,10 @@ import {getUid} from '../../util.js';
 import ViewHint from '../../ViewHint.js';
 import {listen, unlisten} from '../../events.js';
 import EventType from '../../events/EventType.js';
-import rbush from 'rbush';
 import {buffer, createEmpty, containsExtent, getWidth} from '../../extent.js';
 import {labelCache} from '../../render/canvas.js';
 import CanvasBuilderGroup from '../../render/canvas/BuilderGroup.js';
-import ExecutorGroup from '../../render/canvas/ExecutorGroup.js';
+import ExecutorGroup, {replayDeclutter} from '../../render/canvas/ExecutorGroup.js';
 import CanvasLayerRenderer from './Layer.js';
 import {defaultOrder as defaultRenderOrder, getTolerance as getRenderTolerance, getSquaredTolerance as getSquaredRenderTolerance, renderFeature} from '../vector.js';
 import {toString as transformToString, makeScale, makeInverse} from '../../transform.js';
@@ -28,12 +27,6 @@ class CanvasVectorLayerRenderer extends CanvasLayerRenderer {
 
     super(vectorLayer);
 
-    /**
-     * Declutter tree.
-     * @private
-     */
-    this.declutterTree_ = vectorLayer.getDeclutter() ? rbush(9, undefined) : null;
-
     /**
      * @private
      * @type {boolean}
@@ -138,17 +131,14 @@ class CanvasVectorLayerRenderer extends CanvasLayerRenderer {
       this.clip(context, frameState, clipExtent);
     }
 
-    if (this.declutterTree_) {
-      this.declutterTree_.clear();
-    }
-
 
     const viewHints = frameState.viewHints;
     const snapToPixel = !(viewHints[ViewHint.ANIMATING] || viewHints[ViewHint.INTERACTING]);
 
     const transform = this.getRenderTransform(frameState, width, height, 0);
     const skippedFeatureUids = layerState.managed ? frameState.skippedFeatureUids : {};
-    replayGroup.execute(context, transform, rotation, skippedFeatureUids, snapToPixel);
+    const declutterReplays = /** @type {import("../../layer/Vector.js").default} */ (this.getLayer()).getDeclutter() ? {} : null;
+    replayGroup.execute(context, transform, rotation, skippedFeatureUids, snapToPixel, undefined, declutterReplays);
 
     if (vectorSource.getWrapX() && projection.canWrapX() && !containsExtent(projectionExtent, extent)) {
       let startX = extent[0];
@@ -159,7 +149,7 @@ class CanvasVectorLayerRenderer extends CanvasLayerRenderer {
         --world;
         offsetX = worldWidth * world;
         const transform = this.getRenderTransform(frameState, width, height, offsetX);
-        replayGroup.execute(context, transform, rotation, skippedFeatureUids, snapToPixel);
+        replayGroup.execute(context, transform, rotation, skippedFeatureUids, snapToPixel, undefined, declutterReplays);
         startX += worldWidth;
       }
       world = 0;
@@ -168,10 +158,15 @@ class CanvasVectorLayerRenderer extends CanvasLayerRenderer {
         ++world;
         offsetX = worldWidth * world;
         const transform = this.getRenderTransform(frameState, width, height, offsetX);
-        replayGroup.execute(context, transform, rotation, skippedFeatureUids, snapToPixel);
+        replayGroup.execute(context, transform, rotation, skippedFeatureUids, snapToPixel, undefined, declutterReplays);
         startX -= worldWidth;
       }
     }
+    if (declutterReplays) {
+      const viewHints = frameState.viewHints;
+      const hifi = !(viewHints[ViewHint.ANIMATING] || viewHints[ViewHint.INTERACTING]);
+      replayDeclutter(declutterReplays, context, rotation, hifi, frameState.declutterItems);
+    }
 
     if (clipped) {
       context.restore();
@@ -190,13 +185,13 @@ class CanvasVectorLayerRenderer extends CanvasLayerRenderer {
   /**
    * @inheritDoc
    */
-  forEachFeatureAtCoordinate(coordinate, frameState, hitTolerance, callback, thisArg) {
+  forEachFeatureAtCoordinate(coordinate, frameState, hitTolerance, callback, declutteredFeatures) {
     if (!this.replayGroup_) {
       return undefined;
     } else {
       const resolution = frameState.viewState.resolution;
       const rotation = frameState.viewState.rotation;
-      const layer = this.getLayer();
+      const layer = /** @type {import("../../layer/Vector").default} */ (this.getLayer());
       /** @type {!Object<string, boolean>} */
       const features = {};
       const result = this.replayGroup_.forEachFeatureAtCoordinate(coordinate, resolution, rotation, hitTolerance, {},
@@ -208,9 +203,9 @@ class CanvasVectorLayerRenderer extends CanvasLayerRenderer {
           const key = getUid(feature);
           if (!(key in features)) {
             features[key] = true;
-            return callback.call(thisArg, feature, layer);
+            return callback(feature, layer);
           }
-        }, null);
+        }, layer.getDeclutter() ? declutteredFeatures : null);
       return result;
     }
   }
@@ -299,7 +294,7 @@ class CanvasVectorLayerRenderer extends CanvasLayerRenderer {
 
     const replayGroup = new CanvasBuilderGroup(
       getRenderTolerance(resolution, pixelRatio), extent, resolution,
-      pixelRatio, !!this.declutterTree_);
+      pixelRatio, vectorLayer.getDeclutter());
 
     vectorSource.loadFeatures(extent, resolution, projection);
 
@@ -339,7 +334,7 @@ class CanvasVectorLayerRenderer extends CanvasLayerRenderer {
 
     const replayGroupInstructions = replayGroup.finish();
     const executorGroup = new ExecutorGroup(extent, resolution,
-      pixelRatio, vectorSource.getOverlaps(), this.declutterTree_,
+      pixelRatio, vectorSource.getOverlaps(),
       replayGroupInstructions, vectorLayer.getRenderBuffer());
 
     this.renderedResolution_ = resolution;

src/ol/renderer/canvas/VectorTileLayer.js

@@ -7,7 +7,6 @@ import TileState from '../../TileState.js';
 import ViewHint from '../../ViewHint.js';
 import {listen, unlisten, unlistenByKey} from '../../events.js';
 import EventType from '../../events/EventType.js';
-import rbush from 'rbush';
 import {buffer, containsCoordinate, equals, getIntersection, getTopLeft, intersects} from '../../extent.js';
 import VectorTileRenderType from '../../layer/VectorTileRenderType.js';
 import ReplayType from '../../render/canvas/BuilderType.js';
@@ -103,12 +102,6 @@ class CanvasVectorTileLayerRenderer extends CanvasTileLayerRenderer {
      */
     this.inverseOverlayPixelTransform_ = createTransform();
 
-    /**
-     * Declutter tree.
-     * @private
-     */
-    this.declutterTree_ = layer.getDeclutter() ? rbush(9, undefined) : null;
-
     /**
      * @private
      * @type {boolean}
@@ -138,8 +131,8 @@ class CanvasVectorTileLayerRenderer extends CanvasTileLayerRenderer {
      */
     this.tmpTransform_ = createTransform();
 
-    // Use closest resolution.
-    this.zDirection = 0;
+    // Use nearest lower resolution.
+    this.zDirection = 1;
 
     listen(labelCache, EventType.CLEAR, this.handleFontsChanged_, this);
 
@@ -274,7 +267,7 @@ class CanvasVectorTileLayerRenderer extends CanvasTileLayerRenderer {
         buffer(sharedExtent, layer.getRenderBuffer() * resolution, this.tmpExtent);
       builderState.dirty = false;
       const builderGroup = new CanvasBuilderGroup(0, sharedExtent, resolution,
-        pixelRatio, !!this.declutterTree_);
+        pixelRatio, layer.getDeclutter());
       const squaredTolerance = getSquaredRenderTolerance(resolution, pixelRatio);
 
       /**
@@ -310,7 +303,7 @@ class CanvasVectorTileLayerRenderer extends CanvasTileLayerRenderer {
         null :
         sharedExtent;
       const renderingReplayGroup = new CanvasExecutorGroup(replayExtent, resolution,
-        pixelRatio, source.getOverlaps(), this.declutterTree_, executorGroupInstructions, layer.getRenderBuffer());
+        pixelRatio, source.getOverlaps(), executorGroupInstructions, layer.getRenderBuffer());
       tile.executorGroups[layerUid].push(renderingReplayGroup);
     }
     builderState.renderedRevision = revision;
@@ -322,11 +315,12 @@ class CanvasVectorTileLayerRenderer extends CanvasTileLayerRenderer {
   /**
    * @inheritDoc
    */
-  forEachFeatureAtCoordinate(coordinate, frameState, hitTolerance, callback, thisArg) {
+  forEachFeatureAtCoordinate(coordinate, frameState, hitTolerance, callback, declutteredFeatures) {
     const resolution = frameState.viewState.resolution;
     const rotation = frameState.viewState.rotation;
     hitTolerance = hitTolerance == undefined ? 0 : hitTolerance;
-    const layer = this.getLayer();
+    const layer = /** @type {import("../../layer/VectorTile.js").default} */ (this.getLayer());
+    const declutter = layer.getDeclutter();
     const source = layer.getSource();
     const tileGrid = source.getTileGridForProjection(frameState.viewState.projection);
     /** @type {!Object<string, boolean>} */
@@ -338,7 +332,7 @@ class CanvasVectorTileLayerRenderer extends CanvasTileLayerRenderer {
     let i, ii;
     for (i = 0, ii = renderedTiles.length; i < ii; ++i) {
       const tile = renderedTiles[i];
-      if (!this.declutterTree_) {
+      if (!declutter) {
         // When not decluttering, we only need to consider the tile that contains the given
         // coordinate, because each feature will be rendered for each tile that contains it.
         const tileExtent = tileGrid.getTileCoordExtent(tile.wrappedTileCoord);
@@ -361,9 +355,9 @@ class CanvasVectorTileLayerRenderer extends CanvasTileLayerRenderer {
             }
             if (!(key in features)) {
               features[key] = true;
-              return callback.call(thisArg, feature, layer);
+              return callback(feature, layer);
             }
-          }, null);
+          }, layer.getDeclutter() ? declutteredFeatures : null);
       }
     }
     return found;
@@ -464,9 +458,6 @@ class CanvasVectorTileLayerRenderer extends CanvasTileLayerRenderer {
       context.clearRect(0, 0, width, height);
     }
 
-    if (declutterReplays) {
-      this.declutterTree_.clear();
-    }
     const tiles = this.renderedTiles;
     const tileGrid = source.getTileGridForProjection(frameState.viewState.projection);
     const clips = [];
@@ -522,7 +513,7 @@ class CanvasVectorTileLayerRenderer extends CanvasTileLayerRenderer {
       }
     }
     if (declutterReplays) {
-      replayDeclutter(declutterReplays, context, rotation, hifi);
+      replayDeclutter(declutterReplays, context, rotation, hifi, frameState.declutterItems);
     }
 
     const opacity = layerState.opacity;
@@ -552,9 +543,6 @@ class CanvasVectorTileLayerRenderer extends CanvasTileLayerRenderer {
       frameState.animate = true;
       delete this.renderTileImageQueue_[uid];
       const layer = /** @type {import("../../layer/VectorTile.js").default} */ (this.getLayer());
-      if (this.declutterTree_ && layer.getRenderMode() === VectorTileRenderType.IMAGE) {
-        this.declutterTree_.clear();
-      }
       const viewState = frameState.viewState;
       const tileGrid = layer.getSource().getTileGridForProjection(viewState.projection);
       const tileResolution = tileGrid.getResolution(tile.tileCoord[0]);
@@ -626,20 +614,24 @@ class CanvasVectorTileLayerRenderer extends CanvasTileLayerRenderer {
     const tileGrid = source.getTileGridForProjection(projection);
     const resolution = tileGrid.getResolution(z);
     const context = tile.getContext(layer);
+    // Increase tile size when overzooming for low pixel ratio, to avoid blurry tiles
+    pixelRatio = Math.max(pixelRatio, renderPixelRatio / pixelRatio);
     const size = source.getTilePixelSize(z, pixelRatio, projection);
     context.canvas.width = size[0];
     context.canvas.height = size[1];
-    const canvasTransform = resetTransform(this.tmpTransform_);
     const renderScale = pixelRatio / renderPixelRatio;
-    scaleTransform(canvasTransform, renderScale, renderScale);
-    context.setTransform.apply(context, canvasTransform);
+    if (renderScale !== 1) {
+      const canvasTransform = resetTransform(this.tmpTransform_);
+      scaleTransform(canvasTransform, renderScale, renderScale);
+      context.setTransform.apply(context, canvasTransform);
+    }
     const tileExtent = tileGrid.getTileCoordExtent(tileCoord, this.tmpExtent);
+    const pixelScale = renderPixelRatio / resolution;
+    const transform = resetTransform(this.tmpTransform_);
+    scaleTransform(transform, pixelScale, -pixelScale);
+    translateTransform(transform, -tileExtent[0], -tileExtent[3]);
     for (let i = 0, ii = executorGroups.length; i < ii; ++i) {
       const executorGroup = executorGroups[i];
-      const pixelScale = renderPixelRatio / resolution;
-      const transform = resetTransform(this.tmpTransform_);
-      scaleTransform(transform, pixelScale, -pixelScale);
-      translateTransform(transform, -tileExtent[0], -tileExtent[3]);
       executorGroup.execute(context, transform, 0, {}, true, IMAGE_REPLAYS[layer.getRenderMode()]);
     }
     replayState.renderedTileResolution = tile.wantedResolution;

src/ol/renderer/webgl/PointsLayer.js

@@ -74,11 +74,11 @@ const FRAGMENT_SHADER = `
  * @property {function(import("../../Feature").default, number):number} [texCoordCallback] Will be called on every feature in the
  * source to compute the texture coordinates of each corner of the quad (without effect if no `texture` option defined). This is only done on source change.
  * The second argument is 0 for `u0` component, 1 for `v0`, 2 for `u1`, and 3 for `v1`.
- * @property {function(import("../../Feature").default, number, number):number} [colorCallback] Will be called on every feature in the
- * source to compute the color of each corner of the quad. This is only done on source change.
- * The second argument is 0 for bottom left, 1 for bottom right, 2 for top right and 3 for top left
- * The third argument is 0 for red, 1 for green, 2 for blue and 3 for alpha
- * The return value should be between 0 and 1.
+ * @property {function(import("../../Feature").default, Array<number>=):Array<number>} [colorCallback] Will be called on every feature in the
+ * source to compute the color for use in the fragment shader (available as the `v_color` varying). This is only done on source change.
+ * The return value should be between an array of R, G, B, A values between 0 and 1.  To reduce unnecessary
+ * allocation, the function is called with a reusable array that can serve as the return value after updating
+ * the R, G, B, and A values.
  * @property {function(import("../../Feature").default):number} [opacityCallback] Will be called on every feature in the
  * source to compute the opacity of the quad on screen (from 0 to 1). This is only done on source change.
  * Note: this is multiplied with the color of the point which can also have an alpha value < 1.
@@ -114,6 +114,7 @@ const FRAGMENT_SHADER = `
  *
  * Points are rendered as quads with the following structure:
  *
+ * ```
  *   (u0, v1)      (u1, v1)
  *  [3]----------[2]
  *   |`           |
@@ -124,6 +125,7 @@ const FRAGMENT_SHADER = `
  *   |          ` |
  *  [0]----------[1]
  *   (u0, v0)      (u1, v0)
+ *  ```
  *
  * This uses {@link module:ol/webgl/Helper~WebGLHelper} internally.
  *
@@ -227,9 +229,12 @@ class WebGLPointsLayerRenderer extends LayerRenderer {
     this.texCoordCallback_ = options.texCoordCallback || function(feature, index) {
       return index < 2 ? 0 : 1;
     };
-    this.colorCallback_ = options.colorCallback || function(feature, index, component) {
-      return 1;
+
+    this.colorArray_ = [1, 1, 1, 1];
+    this.colorCallback_ = options.colorCallback || function(feature, color) {
+      return this.colorArray_;
     };
+
     this.rotateWithViewCallback_ = options.rotateWithViewCallback || function() {
       return false;
     };
@@ -293,29 +298,18 @@ class WebGLPointsLayerRenderer extends LayerRenderer {
         const size = this.sizeCallback_(feature);
         const opacity = this.opacityCallback_(feature);
         const rotateWithView = this.rotateWithViewCallback_(feature) ? 1 : 0;
-        const v0_r = this.colorCallback_(feature, 0, 0);
-        const v0_g = this.colorCallback_(feature, 0, 1);
-        const v0_b = this.colorCallback_(feature, 0, 2);
-        const v0_a = this.colorCallback_(feature, 0, 3);
-        const v1_r = this.colorCallback_(feature, 1, 0);
-        const v1_g = this.colorCallback_(feature, 1, 1);
-        const v1_b = this.colorCallback_(feature, 1, 2);
-        const v1_a = this.colorCallback_(feature, 1, 3);
-        const v2_r = this.colorCallback_(feature, 2, 0);
-        const v2_g = this.colorCallback_(feature, 2, 1);
-        const v2_b = this.colorCallback_(feature, 2, 2);
-        const v2_a = this.colorCallback_(feature, 2, 3);
-        const v3_r = this.colorCallback_(feature, 3, 0);
-        const v3_g = this.colorCallback_(feature, 3, 1);
-        const v3_b = this.colorCallback_(feature, 3, 2);
-        const v3_a = this.colorCallback_(feature, 3, 3);
+        const color = this.colorCallback_(feature, this.colorArray_);
+        const red = color[0];
+        const green = color[1];
+        const blue = color[2];
+        const alpha = color[3];
         const baseIndex = this.verticesBuffer_.getArray().length / stride;
 
         this.verticesBuffer_.getArray().push(
-          x, y, -size / 2, -size / 2, u0, v0, opacity, rotateWithView, v0_r, v0_g, v0_b, v0_a,
-          x, y, +size / 2, -size / 2, u1, v0, opacity, rotateWithView, v1_r, v1_g, v1_b, v1_a,
-          x, y, +size / 2, +size / 2, u1, v1, opacity, rotateWithView, v2_r, v2_g, v2_b, v2_a,
-          x, y, -size / 2, +size / 2, u0, v1, opacity, rotateWithView, v3_r, v3_g, v3_b, v3_a
+          x, y, -size / 2, -size / 2, u0, v0, opacity, rotateWithView, red, green, blue, alpha,
+          x, y, +size / 2, -size / 2, u1, v0, opacity, rotateWithView, red, green, blue, alpha,
+          x, y, +size / 2, +size / 2, u1, v1, opacity, rotateWithView, red, green, blue, alpha,
+          x, y, -size / 2, +size / 2, u0, v1, opacity, rotateWithView, red, green, blue, alpha
         );
         this.indicesBuffer_.getArray().push(
           baseIndex, baseIndex + 1, baseIndex + 3,

src/ol/source.js

@@ -5,6 +5,7 @@
 export {default as BingMaps} from './source/BingMaps.js';
 export {default as CartoDB} from './source/CartoDB.js';
 export {default as Cluster} from './source/Cluster.js';
+export {default as IIIF} from './source/IIIF.js';
 export {default as Image} from './source/Image.js';
 export {default as ImageArcGISRest} from './source/ImageArcGISRest.js';
 export {default as ImageCanvas} from './source/ImageCanvas.js';

src/ol/source/IIIF.js

@@ -0,0 +1,289 @@
+/**
+ * @module ol/source/IIIF
+ */
+
+import {DEFAULT_TILE_SIZE} from '../tilegrid/common.js';
+import {getTopLeft} from '../extent.js';
+import {CustomTile} from './Zoomify.js';
+import {Versions} from '../format/IIIFInfo.js';
+import {assert} from '../asserts.js';
+import TileGrid from '../tilegrid/TileGrid.js';
+import TileImage from './TileImage.js';
+
+/**
+ * @typedef {Object} Options
+ * @property {import("./Source.js").AttributionLike} [attributions] Attributions.
+ * @property {boolean} [attributionsCollapsible=true] Attributions are collapsible.
+ * @property {number} [cacheSize]
+ * @property {null|string} [crossOrigin]
+ * @property {import("../extent.js").Extent} [extent=[0, -height, width, 0]]
+ * @property {string} [format='jpg'] Requested image format.
+ * @property {import("../proj.js").ProjectionLike} [projection]
+ * @property {string} [quality] Requested IIIF image quality. Default is 'native'
+ * for version 1, 'default' for versions 2 and 3.
+ * @property {number} [reprojectionErrorThreshold=0.5] Maximum allowed reprojection error (in pixels).
+ * Higher values can increase reprojection performance, but decrease precision.
+ * @property {import("../size.js").Size} size Size of the image [width, height].
+ * @property {import("../size.js").Size[]} [sizes] Supported scaled image sizes.
+ * Content of the IIIF info.json 'sizes' property, but as array of Size objects.
+ * @property {import("./State.js").default} [state] Source state.
+ * @property {Array<string>} [supports=[]] Supported IIIF region and size calculation
+ * features.
+ * @property {number} [tilePixelRatio]
+ * @property {number|import("../size.js").Size} [tileSize] Tile size.
+ * Same tile size is used for all zoom levels. If tile size is a number,
+ * a square tile is assumed. If the IIIF image service supports arbitrary
+ * tiling (sizeByH, sizeByW, sizeByWh or sizeByPct as well as regionByPx or regionByPct
+ * are supported), the default tilesize is 256.
+ * @property {number} [transition]
+ * @property {string} [url] Base URL of the IIIF Image service.
+ * This should be the same as the IIIF Image @id.
+ * @property {Versions} [version=Versions.VERSION2] Service's IIIF Image API version.
+ * @property {number} [zDirection] Indicate which resolution should be used
+ * by a renderer if the views resolution does not match any resolution of the tile source.
+ * If 0, the nearest resolution will be used. If 1, the nearest lower resolution
+ * will be used. If -1, the nearest higher resolution will be used.
+ */
+
+function formatPercentage(percentage) {
+  return percentage.toLocaleString('en', {maximumFractionDigits: 10});
+}
+
+/**
+ * @classdesc
+ * Layer source for IIIF Image API services.
+ * @api
+ */
+class IIIF extends TileImage {
+
+  /**
+   * @param {Options} opt_options Tile source options. Use {@link import("../format/IIIFInfo.js").IIIFInfo}
+   * to parse Image API service information responses into constructor options.
+   * @api
+   */
+  constructor(opt_options) {
+
+    const options = opt_options || {};
+
+    let baseUrl = options.url || '';
+    baseUrl = baseUrl + (baseUrl.lastIndexOf('/') === baseUrl.length - 1 || baseUrl === '' ? '' : '/');
+    const version = options.version || Versions.VERSION2;
+    const sizes = options.sizes || [];
+    const size = options.size;
+    assert(size != undefined && Array.isArray(size) && size.length == 2 &&
+      !isNaN(size[0]) && size[0] > 0 && !isNaN(size[1]) && size[1] > 0, 60);
+    const width = size[0];
+    const height = size[1];
+    const tileSize = options.tileSize;
+    const format = options.format || 'jpg';
+    const quality = options.quality || (options.version == Versions.VERSION1 ? 'native' : 'default');
+    let resolutions = options.resolutions || [];
+    const supports = options.supports || [];
+    const extent = options.extent || [0, -height, width, 0];
+
+    const supportsListedSizes = sizes != undefined && Array.isArray(sizes) && sizes.length > 0;
+    const supportsListedTiles = tileSize != undefined && (Number.isInteger(tileSize) && tileSize > 0 || Array.isArray(tileSize) && tileSize.length > 0);
+    const supportsArbitraryTiling = supports != undefined && Array.isArray(supports) &&
+      (supports.includes('regionByPx') || supports.includes('regionByPct')) &&
+      (supports.includes('sizeByWh') || supports.includes('sizeByH') ||
+      supports.includes('sizeByW') || supports.includes('sizeByPct'));
+
+    let tileWidth,
+        tileHeight,
+        maxZoom;
+
+    resolutions.sort(function(a, b) {
+      return b - a;
+    });
+
+    if (supportsListedTiles || supportsArbitraryTiling) {
+      if (tileSize != undefined) {
+        if (Number.isInteger(tileSize) && tileSize > 0) {
+          tileWidth = tileSize;
+          tileHeight = tileSize;
+        } else if (Array.isArray(tileSize) && tileSize.length > 0) {
+          if (tileSize.length == 1 || tileSize[1] == undefined && Number.isInteger(tileSize[0])) {
+            tileWidth = tileSize[0];
+            tileHeight = tileSize[0];
+          }
+          if (tileSize.length == 2) {
+            if (Number.isInteger(tileSize[0]) && Number.isInteger(tileSize[1])) {
+              tileWidth = tileSize[0];
+              tileHeight = tileSize[1];
+            } else if (tileSize[0] == undefined && Number.isInteger(tileSize[1])) {
+              tileWidth = tileSize[1];
+              tileHeight = tileSize[1];
+            }
+          }
+        }
+      }
+      if (tileWidth === undefined || tileHeight === undefined) {
+        tileWidth = DEFAULT_TILE_SIZE;
+        tileHeight = DEFAULT_TILE_SIZE;
+      }
+      if (resolutions.length == 0) {
+        maxZoom = Math.max(
+          Math.ceil(Math.log(width / tileWidth) / Math.LN2),
+          Math.ceil(Math.log(height / tileHeight) / Math.LN2)
+        );
+        for (let i = maxZoom; i >= 0; i--) {
+          resolutions.push(Math.pow(2, i));
+        }
+      } else {
+        const maxScaleFactor = Math.max([...resolutions]);
+        // TODO maxScaleFactor might not be a power to 2
+        maxZoom = Math.round(Math.log(maxScaleFactor) / Math.LN2);
+      }
+    } else {
+      // No tile support.
+      tileWidth = width;
+      tileHeight = height;
+      resolutions = [];
+      if (supportsListedSizes) {
+        /*
+         * 'sizes' provided. Use full region in different resolutions. Every
+         * resolution has only one tile.
+         */
+        sizes.sort(function(a, b) {
+          return a[0] - b[0];
+        });
+        maxZoom = -1;
+        const ignoredSizesIndex = [];
+        for (let i = 0; i < sizes.length; i++) {
+          const resolution = width / sizes[i][0];
+          if (resolutions.length > 0 && resolutions[resolutions.length - 1] == resolution) {
+            ignoredSizesIndex.push(i);
+            continue;
+          }
+          resolutions.push(resolution);
+          maxZoom++;
+        }
+        if (ignoredSizesIndex.length > 0) {
+          for (let i = 0; i < ignoredSizesIndex.length; i++) {
+            sizes.splice(ignoredSizesIndex[i] - i, 1);
+          }
+        }
+      } else {
+        // No useful image information at all. Try pseudo tile with full image.
+        resolutions.push(1);
+        sizes.push([width, height]);
+        maxZoom = 0;
+      }
+    }
+
+    const tileGrid = new TileGrid({
+      tileSize: [tileWidth, tileHeight],
+      extent: extent,
+      origin: getTopLeft(extent),
+      resolutions: resolutions
+    });
+
+    const tileUrlFunction = function(tileCoord, pixelRatio, projection) {
+      let regionParam,
+          sizeParam;
+      const zoom = tileCoord[0];
+      if (zoom > maxZoom) {
+        return;
+      }
+      const tileX = tileCoord[1],
+          tileY = tileCoord[2],
+          scale = resolutions[zoom];
+      if (tileX === undefined || tileY === undefined || scale === undefined ||
+      tileX < 0 || Math.ceil(width / scale / tileWidth) <= tileX ||
+      tileY < 0 || Math.ceil(height / scale / tileHeight) <= tileY) {
+        return;
+      }
+      if (supportsArbitraryTiling || supportsListedTiles) {
+        const regionX = tileX * tileWidth * scale,
+            regionY = tileY * tileHeight * scale;
+        let regionW = tileWidth * scale,
+            regionH = tileHeight * scale,
+            sizeW = tileWidth,
+            sizeH = tileHeight;
+        if (regionX + regionW > width) {
+          regionW = width - regionX;
+        }
+        if (regionY + regionH > height) {
+          regionH = height - regionY;
+        }
+        if (regionX + tileWidth * scale > width) {
+          sizeW = Math.floor((width - regionX + scale - 1) / scale);
+        }
+        if (regionY + tileHeight * scale > height) {
+          sizeH = Math.floor((height - regionY + scale - 1) / scale);
+        }
+        if (regionX == 0 && regionW == width && regionY == 0 && regionH == height) {
+          // canonical full image region parameter is 'full', not 'x,y,w,h'
+          regionParam = 'full';
+        } else if (!supportsArbitraryTiling || supports.includes('regionByPx')) {
+          regionParam = regionX + ',' + regionY + ',' + regionW + ',' + regionH;
+        } else if (supports.includes('regionByPct')) {
+          const pctX = formatPercentage(regionX / width * 100),
+              pctY = formatPercentage(regionY / height * 100),
+              pctW = formatPercentage(regionW / width * 100),
+              pctH = formatPercentage(regionH / height * 100);
+          regionParam = 'pct:' + pctX + ',' + pctY + ',' + pctW + ',' + pctH;
+        }
+        if (version == Versions.VERSION3 && (!supportsArbitraryTiling || supports.includes('sizeByWh'))) {
+          sizeParam = sizeW + ',' + sizeH;
+        } else if (!supportsArbitraryTiling || supports.includes('sizeByW')) {
+          sizeParam = sizeW + ',';
+        } else if (supports.includes('sizeByH')) {
+          sizeParam = ',' + sizeH;
+        } else if (supports.includes('sizeByWh')) {
+          sizeParam = sizeW + ',' + sizeH;
+        } else if (supports.includes('sizeByPct')) {
+          sizeParam = 'pct:' + formatPercentage(100 / scale);
+        }
+      } else {
+        regionParam = 'full';
+        if (supportsListedSizes) {
+          const regionWidth = sizes[zoom][0],
+              regionHeight = sizes[zoom][1];
+          if (version == Versions.VERSION3) {
+            if (regionWidth == width && regionHeight == height) {
+              sizeParam = 'max';
+            } else {
+              sizeParam = regionWidth + ',' + regionHeight;
+            }
+          } else {
+            if (regionWidth == width) {
+              sizeParam = 'full';
+            } else {
+              sizeParam = regionWidth + ',';
+            }
+          }
+        } else {
+          sizeParam = version == Versions.VERSION3 ? 'max' : 'full';
+        }
+      }
+      return baseUrl + regionParam + '/' + sizeParam + '/0/' + quality + '.' + format;
+    };
+
+    const IiifTileClass = CustomTile.bind(null, tileGrid);
+
+    super({
+      attributions: options.attributions,
+      attributionsCollapsible: options.attributionsCollapsible,
+      cacheSize: options.cacheSize,
+      crossOrigin: options.crossOrigin,
+      projection: options.projection,
+      reprojectionErrorThreshold: options.reprojectionErrorThreshold,
+      state: options.state,
+      tileClass: IiifTileClass,
+      tileGrid: tileGrid,
+      tilePixelRatio: options.tilePixelRatio,
+      tileUrlFunction: tileUrlFunction,
+      transition: options.transition
+    });
+
+    /**
+     * @inheritDoc
+     */
+    this.zDirection = options.zDirection;
+
+  }
+
+}
+
+export default IIIF;

src/ol/source/Raster.js

@@ -227,7 +227,8 @@ class RasterSource extends ImageSource {
         rotation: 0
       }),
       viewHints: [],
-      wantedTiles: {}
+      wantedTiles: {},
+      declutterItems: []
     };
 
     this.setAttributions(function(frameState) {

src/ol/source/TileJSON.js

@@ -4,7 +4,7 @@
 // FIXME check order of async callbacks
 
 /**
- * See http://mapbox.com/developers/api/.
+ * See https://mapbox.com/developers/api/.
  */
 
 

src/ol/source/VectorTile.js

@@ -19,6 +19,7 @@ import {equals} from '../array.js';
 /**
  * @typedef {Object} Options
  * @property {import("./Source.js").AttributionLike} [attributions] Attributions.
+ * @property {boolean} [attributionsCollapsible=true] Attributions are collapsible.
  * @property {number} [cacheSize=128] Cache size.
  * @property {import("../extent.js").Extent} [extent]
  * @property {import("../format/Feature.js").default} [format] Feature format for tiles. Used and required by the default.
@@ -97,6 +98,7 @@ class VectorTile extends UrlTile {
 
     super({
       attributions: options.attributions,
+      attributionsCollapsible: options.attributionsCollapsible,
       cacheSize: options.cacheSize,
       opaque: false,
       projection: projection,

src/ol/source/Zoomify.js

@@ -26,6 +26,7 @@ const TierSizeCalculation = {
 export class CustomTile extends ImageTile {
 
   /**
+   * @param {number} tilePixelRatio Tile pixel ratio to display the tile
    * @param {import("../tilegrid/TileGrid.js").default} tileGrid TileGrid that the tile belongs to.
    * @param {import("../tilecoord.js").TileCoord} tileCoord Tile coordinate.
    * @param {TileState} state State.
@@ -34,8 +35,7 @@ export class CustomTile extends ImageTile {
    * @param {import("../Tile.js").LoadFunction} tileLoadFunction Tile load function.
    * @param {import("../Tile.js").Options=} opt_options Tile options.
    */
-  constructor(tileGrid, tileCoord, state, src, crossOrigin, tileLoadFunction, opt_options) {
-
+  constructor(tilePixelRatio, tileGrid, tileCoord, state, src, crossOrigin, tileLoadFunction, opt_options) {
     super(tileCoord, state, src, crossOrigin, tileLoadFunction, opt_options);
 
     /**
@@ -48,8 +48,11 @@ export class CustomTile extends ImageTile {
      * @private
      * @type {import("../size.js").Size}
      */
-    this.tileSize_ = toSize(tileGrid.getTileSize(tileCoord[0]));
-
+    this.tileSize_ = toSize(tileGrid.getTileSize(tileCoord[0])).map(
+      function(x) {
+        return x * tilePixelRatio;
+      }
+    );
   }
 
   /**
@@ -143,6 +146,7 @@ class Zoomify extends TileImage {
     const extent = options.extent || [0, -size[1], size[0], 0];
     const tierSizeInTiles = [];
     const tileSize = options.tileSize || DEFAULT_TILE_SIZE;
+    const tilePixelRatio = options.tilePixelRatio || 1;
     let tileSizeForTierSizeCalculation = tileSize;
 
     switch (tierSizeCalculation) {
@@ -242,14 +246,14 @@ class Zoomify extends TileImage {
 
     const tileUrlFunction = createFromTileUrlFunctions(urls.map(createFromTemplate));
 
-    const ZoomifyTileClass = CustomTile.bind(null, tileGrid);
+    const ZoomifyTileClass = CustomTile.bind(null, tilePixelRatio, tileGrid);
 
     super({
       attributions: options.attributions,
       cacheSize: options.cacheSize,
       crossOrigin: options.crossOrigin,
       projection: options.projection,
-      tilePixelRatio: options.tilePixelRatio,
+      tilePixelRatio: tilePixelRatio,
       reprojectionErrorThreshold: options.reprojectionErrorThreshold,
       tileClass: ZoomifyTileClass,
       tileGrid: tileGrid,

src/ol/sphere.js

@@ -19,8 +19,9 @@ import GeometryType from './geom/GeometryType.js';
  * @property {import("./proj.js").ProjectionLike} [projection='EPSG:3857']
  * Projection of the  geometry.  By default, the geometry is assumed to be in
  * Web Mercator.
- * @property {number} [radius=6371008.8] Sphere radius.  By default, the radius of the
- * earth is used (Clarke 1866 Authalic Sphere).
+ * @property {number} [radius=6371008.8] Sphere radius.  By default, the
+ * [mean Earth radius](https://en.wikipedia.org/wiki/Earth_radius#Mean_radius)
+ * for the WGS84 ellipsoid is used.
  */
 
 

src/ol/tilegrid/TileGrid.js

@@ -237,6 +237,7 @@ class TileGrid {
   /**
    * Get the extent for this tile grid, if it was configured.
    * @return {import("../extent.js").Extent} Extent.
+   * @api
    */
   getExtent() {
     return this.extent_;

src/ol/webgl.js

@@ -58,36 +58,50 @@ export const ONE_MINUS_SRC_ALPHA = 0x0303;
 
 
 /**
+ * Used by {@link module:ol/webgl/Helper~WebGLHelper} for buffers containing vertices data, such as
+ * position, color, texture coordinate, etc. These vertices are then referenced by an index buffer
+ * to be drawn on screen (see {@link module:ol/webgl.ELEMENT_ARRAY_BUFFER}).
  * @const
  * @type {number}
+ * @api
  */
 export const ARRAY_BUFFER = 0x8892;
 
 
 /**
+ * Used by {@link module:ol/webgl/Helper~WebGLHelper} for buffers containing indices data.
+ * Index buffers are essentially lists of references to vertices defined in a vertex buffer
+ * (see {@link module:ol/webgl.ARRAY_BUFFER}), and define the primitives (triangles) to be drawn.
  * @const
  * @type {number}
+ * @api
  */
 export const ELEMENT_ARRAY_BUFFER = 0x8893;
 
 
 /**
+ * Used by {link module:ol/webgl/Buffer~WebGLArrayBuffer}.
  * @const
  * @type {number}
+ * @api
  */
 export const STREAM_DRAW = 0x88E0;
 
 
 /**
+ * Used by {link module:ol/webgl/Buffer~WebGLArrayBuffer}.
  * @const
  * @type {number}
+ * @api
  */
 export const STATIC_DRAW = 0x88E4;
 
 
 /**
+ * Used by {link module:ol/webgl/Buffer~WebGLArrayBuffer}.
  * @const
  * @type {number}
+ * @api
  */
 export const DYNAMIC_DRAW = 0x88E8;
 

src/ol/webgl/Buffer.js

@@ -4,20 +4,27 @@
 import {STATIC_DRAW, STREAM_DRAW, DYNAMIC_DRAW} from '../webgl.js';
 
 /**
+ * Used to describe the intended usage for the data: `STATIC_DRAW`, `STREAM_DRAW`
+ * or `DYNAMIC_DRAW`.
  * @enum {number}
  */
-const BufferUsage = {
+export const BufferUsage = {
   STATIC_DRAW: STATIC_DRAW,
   STREAM_DRAW: STREAM_DRAW,
   DYNAMIC_DRAW: DYNAMIC_DRAW
 };
 
-
+/**
+ * @classdesc
+ * Object used to store an array of data as well as usage information for that data.
+ * See the documentation of [WebGLRenderingContext.bufferData](https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/bufferData) for more info.
+ * @api
+ */
 class WebGLArrayBuffer {
 
   /**
    * @param {Array<number>=} opt_arr Array.
-   * @param {number=} opt_usage Usage.
+   * @param {number=} opt_usage Usage, either `STATIC_DRAW`, `STREAM_DRAW` or `DYNAMIC_DRAW`. Default is `DYNAMIC_DRAW`.
    */
   constructor(opt_arr, opt_usage) {
 

src/ol/webgl/Helper.js

@@ -28,7 +28,7 @@ import {getContext} from '../webgl';
  */
 
 /**
- * Shader types, either `FRAGMENT_SHADER` or `VERTEX_SHADER`
+ * Shader types, either `FRAGMENT_SHADER` or `VERTEX_SHADER`.
  * @enum {number}
  */
 export const ShaderType = {
@@ -37,9 +37,9 @@ export const ShaderType = {
 };
 
 /**
- * Uniform names used in the default shaders.
- * @const
- * @type {Object.<string,string>}
+ * Uniform names used in the default shaders: `PROJECTION_MATRIX`, `OFFSET_SCALE_MATRIX`.
+ * and `OFFSET_ROTATION_MATRIX`.
+ * @enum {string}
  */
 export const DefaultUniform = {
   PROJECTION_MATRIX: 'u_projectionMatrix',
@@ -48,9 +48,9 @@ export const DefaultUniform = {
 };
 
 /**
- * Attribute names used in the default shaders.
- * @const
- * @type {Object.<string,string>}
+ * Attribute names used in the default shaders: `POSITION`, `TEX_COORD`, `OPACITY`,
+ * `ROTATE_WITH_VIEW`, `OFFSETS` and `COLOR`
+ * @enum {string}
  */
 export const DefaultAttrib = {
   POSITION: 'a_position',
@@ -74,7 +74,7 @@ export const DefaultAttrib = {
 /**
  * @typedef {Object} PostProcessesOptions
  * @property {number} [scaleRatio] Scale ratio; if < 1, the post process will render to a texture smaller than
- * the main canvas that will then be sampled up (useful for saving resource on blur steps).
+ * the main canvas which will then be sampled up (useful for saving resource on blur steps).
  * @property {string} [vertexShader] Vertex shader source
  * @property {string} [fragmentShader] Fragment shader source
  * @property {Object.<string,UniformValue>} [uniforms] Uniform definitions for the post process step
@@ -82,7 +82,7 @@ export const DefaultAttrib = {
 
 /**
  * @typedef {Object} Options
- * @property {Object.<string,UniformValue>} [uniforms] Uniform definitions; property namesmust math the uniform
+ * @property {Object.<string,UniformValue>} [uniforms] Uniform definitions; property names must match the uniform
  * names in the provided or default shaders.
  * @property {Array<PostProcessesOptions>} [postProcesses] Post-processes definitions
  */
@@ -90,7 +90,7 @@ export const DefaultAttrib = {
 /**
  * @typedef {Object} UniformInternalDescription
  * @property {string} name Name
- * @property {UniformLiteralValue=} value Value
+ * @property {UniformValue=} value Value
  * @property {WebGLTexture} [texture] Texture
  * @private
  */
@@ -113,7 +113,7 @@ export const DefaultAttrib = {
  *
  *   * Varyings usually prefixed with `v_` are passed on to the fragment shader
  *
- *   Fragment shaders are used to control the actual color of the pixels rawn on screen. Their only output is `gl_FragColor`.
+ *   Fragment shaders are used to control the actual color of the pixels drawn on screen. Their only output is `gl_FragColor`.
  *
  *   Both shaders can take *uniforms* or *attributes* as input. Attributes are explained later. Uniforms are common, read-only values that
  *   can be changed at every frame and can be of type float, arrays of float or images.
@@ -150,16 +150,16 @@ export const DefaultAttrib = {
  *
  *   The {@link module:ol/webgl/PostProcessingPass~WebGLPostProcessingPass} class is used internally, refer to its documentation for more info.
  *
- * ### Binding WebGL buffers and flushing data into them:
+ * ### Binding WebGL buffers and flushing data into them
  *
- *   Data that must be passed to the GPU has to be transferred using `WebGLArrayBuffer` objects.
- *   A buffer has to be created only once, but must be bound everytime the buffer content should be used for rendering.
- *   This is done using `WebGLHelper.bindBuffer`.
+ *   Data that must be passed to the GPU has to be transferred using {@link module:ol/webgl/Buffer~WebGLArrayBuffer} objects.
+ *   A buffer has to be created only once, but must be bound every time the buffer content will be used for rendering.
+ *   This is done using {@link bindBuffer}.
  *   When the buffer's array content has changed, the new data has to be flushed to the GPU memory; this is done using
- *   `WebGLHelper.flushBufferData`. Note: this operation is expensive and should be done as infrequently as possible.
+ *   {@link flushBufferData}. Note: this operation is expensive and should be done as infrequently as possible.
  *
- *   When binding a `WebGLArrayBuffer`, a `target` parameter must be given: it should be either {@link module:ol/webgl~ARRAY_BUFFER}
- *   (if the buffer contains vertices data) or {@link module:ol/webgl~ELEMENT_ARRAY_BUFFER} (if the buffer contains indices data).
+ *   When binding an array buffer, a `target` parameter must be given: it should be either {@link module:ol/webgl.ARRAY_BUFFER}
+ *   (if the buffer contains vertices data) or {@link module:ol/webgl.ELEMENT_ARRAY_BUFFER} (if the buffer contains indices data).
  *
  *   Examples below:
  *   ```js
@@ -179,8 +179,8 @@ export const DefaultAttrib = {
  * ### Specifying attributes
  *
  *   The GPU only receives the data as arrays of numbers. These numbers must be handled differently depending on what it describes (position, texture coordinate...).
- *   Attributes are used to specify these uses. Use `WebGLHelper.enableAttributeArray` and either
- *   the default attribute names in {@link module:ol/webgl/Helper~DefaultAttrib} or custom ones.
+ *   Attributes are used to specify these uses. Use {@link enableAttributeArray} and either
+ *   the default attribute names in {@link module:ol/webgl/Helper.DefaultAttrib} or custom ones.
  *
  *   Please note that you will have to specify the type and offset of the attributes in the data array. You can refer to the documentation of [WebGLRenderingContext.vertexAttribPointer](https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/vertexAttribPointer) for more explanation.
  *   ```js
@@ -194,7 +194,7 @@ export const DefaultAttrib = {
  *
  * ### Rendering primitives
  *
- *   Once all the steps above have been achieved, rendering primitives to the screen is done using `WebGLHelper.prepareDraw` `drawElements` and `finalizeDraw`.
+ *   Once all the steps above have been achieved, rendering primitives to the screen is done using {@link prepareDraw}, {@link drawElements} and {@link finalizeDraw}.
  *   ```js
  *   // frame preparation step
  *   this.context.prepareDraw(frameState);
@@ -316,12 +316,14 @@ class WebGLHelper extends Disposable {
      * @private
      */
     this.uniforms_ = [];
-    options.uniforms && Object.keys(options.uniforms).forEach(function(name) {
-      this.uniforms_.push({
-        name: name,
-        value: options.uniforms[name]
-      });
-    }.bind(this));
+    if (options.uniforms) {
+      for (const name in options.uniforms) {
+        this.uniforms_.push({
+          name: name,
+          value: options.uniforms[name]
+        });
+      }
+    }
 
     /**
      * An array of PostProcessingPass objects is kept in this variable, built from the steps provided in the

tasks/publish.sh

@@ -76,7 +76,7 @@ main() {
   npm install
   npm run build-package
   cd ${BUILT_PACKAGE}
-  npm publish
+  npm publish --tag beta
 }
 
 if test ${#} -ne 1; then

test/karma.config.js

@@ -2,6 +2,7 @@ const path = require('path');
 
 module.exports = function(karma) {
   karma.set({
+    browsers: ['Chrome'],
     browserDisconnectTolerance: 2,
     frameworks: ['mocha'],
     client: {
@@ -54,7 +55,12 @@ module.exports = function(karma) {
     preprocessors: {
       '**/*.js': ['webpack', 'sourcemap']
     },
-    reporters: ['dots'],
+    reporters: ['dots', 'coverage-istanbul'],
+    coverageIstanbulReporter: {
+      reports: ['text-summary', 'html'],
+      dir: path.resolve(__dirname, '../coverage/'),
+      fixWebpackSourcePaths: true
+    },
     webpack: {
       devtool: 'inline-source-map',
       mode: 'development',
@@ -63,8 +69,23 @@ module.exports = function(karma) {
           {
             test: /\.js$/,
             use: {
-              loader: 'buble-loader'
-            }
+              loader: 'babel-loader',
+              options: {
+                presets: ['@babel/preset-env']
+              }
+            },
+            include: path.resolve('src/ol/'),
+            exclude: path.resolve('node_modules/')
+          }, {
+            test: /\.js$/,
+            use: {
+              loader: 'istanbul-instrumenter-loader',
+              options: {
+                esModules: true
+              }
+            },
+            include: path.resolve('src/ol/'),
+            exclude: path.resolve('node_modules/')
           }
         ]
       }
@@ -75,28 +96,4 @@ module.exports = function(karma) {
   });
 
   process.env.CHROME_BIN = require('puppeteer').executablePath();
-  if (process.env.CIRCLECI) {
-    karma.set({
-      browsers: ['Chrome'],
-      preprocessors: {
-        '../src/**/*.js': ['coverage']
-      },
-      coverageReporter: {
-        reporters: [
-          {
-            type: 'lcovonly', // that's enough for coveralls, no HTML
-            dir: '../coverage/',
-            subdir: '.'
-          },
-          {
-            type: 'text-summary' // prints the textual summary to the terminal
-          }
-        ]
-      }
-    });
-  } else {
-    karma.set({
-      browsers: ['Chrome']
-    });
-  }
 };

test/spec/ol/format/iiif.test.js

@@ -0,0 +1,487 @@
+import IIIFInfo from '../../../../src/ol/format/IIIFInfo.js';
+import {Versions} from '../../../../src/ol/format/IIIFInfo.js';
+
+describe('ol.format.IIIFInfo', function() {
+
+  const iiifInfo = new IIIFInfo();
+
+  describe('setImageInfo', function() {
+
+    it('can handle image info JSON as object or as string serialization', function() {
+
+      iiifInfo.setImageInfo({
+        '@context': 'http://iiif.io/api/image/3/context.json',
+        '@id': 'http://iiif.test/id'
+      });
+      expect(iiifInfo.getImageApiVersion()).to.be(Versions.VERSION3);
+
+      iiifInfo.setImageInfo('{"@context": "http://iiif.io/api/image/2/context.json","@id":"http://iiif.test/id"}');
+      expect(iiifInfo.getImageApiVersion()).to.be(Versions.VERSION2);
+
+    });
+
+  });
+
+  describe('getImageApiVersion', function() {
+
+    it('provides the correct Image API version', function() {
+
+      iiifInfo.setImageInfo({
+        '@id': 'http://iiif.test/id'
+      });
+      expect(function() {
+        iiifInfo.getImageApiVersion();
+      }).to.throwException();
+
+      iiifInfo.setImageInfo({
+        identifier: 'http://iiif.test/id',
+        profile: 'this is no valid profile'
+      });
+      expect(function() {
+        iiifInfo.getImageApiVersion();
+      }).to.throwException();
+
+      iiifInfo.setImageInfo({
+        '@context': 'this is no valid context',
+        '@id': 'http://iiif.test/id'
+      });
+      expect(function() {
+        iiifInfo.getImageApiVersion();
+      }).to.throwException();
+
+      iiifInfo.setImageInfo({
+        identifier: 'http://iiif.test/id',
+        profile: 'http://library.stanford.edu/iiif/image-api/compliance.html#level0'
+      });
+      expect(iiifInfo.getImageApiVersion()).to.be(Versions.VERSION1);
+
+      iiifInfo.setImageInfo({
+        '@context': 'http://library.stanford.edu/iiif/image-api/1.1/context.json',
+        '@id': 'http://iiif.test/id'
+      });
+      expect(iiifInfo.getImageApiVersion()).to.be(Versions.VERSION1);
+
+      iiifInfo.setImageInfo({
+        '@context': 'http://iiif.io/api/image/1/context.json',
+        identifier: 'http://iiif.test/id'
+      });
+      expect(iiifInfo.getImageApiVersion()).to.be(Versions.VERSION1);
+
+      iiifInfo.setImageInfo({
+        '@context': 'http://iiif.io/api/image/2/context.json',
+        '@id': 'http://iiif.test/id'
+      });
+      expect(iiifInfo.getImageApiVersion()).to.be(Versions.VERSION2);
+
+      iiifInfo.setImageInfo({
+        '@context': 'http://iiif.io/api/image/3/context.json',
+        id: 'http://iiif.test/id'
+      });
+      expect(iiifInfo.getImageApiVersion()).to.be(Versions.VERSION3);
+
+    });
+
+  });
+
+  describe('getComplianceLevelFromProfile', function() {
+
+    it('detects the correct compliance level', function() {
+
+      iiifInfo.setImageInfo({
+        '@context': 'http://iiif.io/api/image/2/context.json',
+        profile: 'level0'
+      });
+      expect(iiifInfo.getComplianceLevelFromProfile()).to.be(undefined);
+
+      iiifInfo.setImageInfo({
+        '@context': 'http://iiif.io/api/image/2/context.json',
+        profile: 'http://iiif.io/api/image/level3.json'
+      });
+      expect(iiifInfo.getComplianceLevelFromProfile()).to.be(undefined);
+
+      iiifInfo.setImageInfo({
+        '@context': 'http://iiif.io/api/image/2/context.json',
+        profile: 'level1'
+      });
+      expect(iiifInfo.getComplianceLevelFromProfile()).to.be(undefined);
+
+      iiifInfo.setImageInfo({
+        '@context': 'http://iiif.io/api/image/2/context.json',
+        profile: 'http://iiif.io/api/image/2/level2.json'
+      });
+      expect(iiifInfo.getComplianceLevelFromProfile()).to.be('level2');
+
+      iiifInfo.setImageInfo({
+        '@context': 'http://iiif.io/api/image/2/context.json',
+        profile: ['http://iiif.io/api/image/2/level1.json']
+      });
+      expect(iiifInfo.getComplianceLevelFromProfile()).to.be('level1');
+
+      iiifInfo.setImageInfo({
+        '@context': 'http://iiif.io/api/image/3/context.json',
+        profile: 'level4'
+      });
+      expect(iiifInfo.getComplianceLevelFromProfile()).to.be(undefined);
+
+      iiifInfo.setImageInfo({
+        '@context': 'http://iiif.io/api/image/3/context.json',
+        profile: 'http://iiif.io/api/image/3/level3.json'
+      });
+      expect(iiifInfo.getComplianceLevelFromProfile()).to.be(undefined);
+
+      iiifInfo.setImageInfo({
+        '@context': 'http://iiif.io/api/image/3/context.json',
+        profile: 'http://iiif.io/api/image/2/level1.json'
+      });
+      expect(iiifInfo.getComplianceLevelFromProfile()).to.be(undefined);
+
+      iiifInfo.setImageInfo({
+        '@context': 'http://iiif.io/api/image/3/context.json',
+        profile: 'level2'
+      });
+      expect(iiifInfo.getComplianceLevelFromProfile()).to.be('level2');
+
+      iiifInfo.setImageInfo({
+        '@context': 'http://iiif.io/api/image/3/context.json',
+        profile: 'http://iiif.io/api/image/3/level1.json'
+      });
+      expect(iiifInfo.getComplianceLevelFromProfile()).to.be('level1');
+    });
+
+  });
+
+  describe('getComplianceLevelSupportedFeatures', function() {
+
+    it('provides the correct features for given versions and compliance levels', function() {
+
+      iiifInfo.setImageInfo({
+        '@context': 'http://library.stanford.edu/iiif/image-api/1.1/context.json',
+        profile: 'http://library.stanford.edu/iiif/image-api/compliance.html#level0'
+      });
+      let level = iiifInfo.getComplianceLevelSupportedFeatures();
+      expect(level.supports).to.be.empty();
+
+      iiifInfo.setImageInfo({
+        '@context': 'http://library.stanford.edu/iiif/image-api/1.1/context.json',
+        profile: 'http://library.stanford.edu/iiif/image-api/compliance.html#level1'
+      });
+      level = iiifInfo.getComplianceLevelSupportedFeatures();
+      expect(level.supports).to.have.length(4);
+      expect(level.supports).to.contain('regionByPx');
+      expect(level.supports).to.contain('sizeByW');
+      expect(level.supports).to.contain('sizeByH');
+      expect(level.supports).to.contain('sizeByPct');
+
+      iiifInfo.setImageInfo({
+        '@context': 'http://library.stanford.edu/iiif/image-api/1.1/context.json',
+        profile: 'http://library.stanford.edu/iiif/image-api/compliance.html#level2'
+      });
+      level = iiifInfo.getComplianceLevelSupportedFeatures();
+      expect(level.supports).to.have.length(7);
+      expect(level.supports).to.contain('regionByPx');
+      expect(level.supports).to.contain('regionByPct');
+      expect(level.supports).to.contain('sizeByW');
+      expect(level.supports).to.contain('sizeByH');
+      expect(level.supports).to.contain('sizeByPct');
+      expect(level.supports).to.contain('sizeByConfinedWh');
+      expect(level.supports).to.contain('sizeByWh');
+
+      iiifInfo.setImageInfo({
+        '@context': 'http://iiif.io/api/image/2/context.json',
+        profile: 'http://iiif.io/api/image/2/level0.json'
+      });
+      level = iiifInfo.getComplianceLevelSupportedFeatures();
+      expect(level.supports).to.be.empty();
+
+      iiifInfo.setImageInfo({
+        '@context': 'http://iiif.io/api/image/2/context.json',
+        profile: 'http://iiif.io/api/image/2/level1.json'
+      });
+      level = iiifInfo.getComplianceLevelSupportedFeatures();
+      expect(level.supports).to.have.length(4);
+      expect(level.supports).to.contain('regionByPx');
+      expect(level.supports).to.contain('sizeByW');
+      expect(level.supports).to.contain('sizeByH');
+      expect(level.supports).to.contain('sizeByPct');
+
+      iiifInfo.setImageInfo({
+        '@context': 'http://iiif.io/api/image/2/context.json',
+        profile: 'http://iiif.io/api/image/2/level2.json'
+      });
+      level = iiifInfo.getComplianceLevelSupportedFeatures();
+      expect(level.supports).to.have.length(8);
+      expect(level.supports).to.contain('regionByPx');
+      expect(level.supports).to.contain('regionByPct');
+      expect(level.supports).to.contain('sizeByW');
+      expect(level.supports).to.contain('sizeByH');
+      expect(level.supports).to.contain('sizeByPct');
+      expect(level.supports).to.contain('sizeByConfinedWh');
+      expect(level.supports).to.contain('sizeByDistortedWh');
+      expect(level.supports).to.contain('sizeByWh');
+
+      // TODO test version 3 compliance level features once version 3 is final
+    });
+
+  });
+
+  describe('getTileSourceOptions', function() {
+
+    it('produces options from minimal information responses', function() {
+
+      expect(function() {
+        iiifInfo.setImageInfo({
+          width: 2000,
+          height: 1500
+        });
+        iiifInfo.getTileSourceOptions();
+      }).to.throwException();
+
+      iiifInfo.setImageInfo({
+        identifier: 'id',
+        profile: 'http://library.stanford.edu/iiif/image-api/compliance.html#level0'
+      });
+      let options = iiifInfo.getTileSourceOptions();
+
+      expect(options).to.be.an('object');
+      expect(options).to.have.property('version', Versions.VERSION1);
+
+      iiifInfo.setImageInfo({
+        identifier: 'identifier-version-1.0',
+        width: 2000,
+        height: 1500,
+        profile: 'http://library.stanford.edu/iiif/image-api/compliance.html#level0'
+      });
+      options = iiifInfo.getTileSourceOptions();
+
+      expect(options).to.not.be(undefined);
+      expect(options).to.not.be(null);
+      expect(options).to.have.property('version', Versions.VERSION1);
+      expect(options).to.have.property('size');
+      expect(options.size).to.be.an('array');
+      expect(options.size.length).to.be(2);
+      expect(options.size[0]).to.be(2000);
+      expect(options.size[1]).to.be(1500);
+      expect(options.quality).to.be('native');
+      expect(options.url).to.be(undefined);
+      expect(options.sizes).to.be(undefined);
+      expect(options.tileSize).to.be(undefined);
+      expect(options.format).to.be('jpg');
+      expect(options.supports).to.be.empty();
+
+      iiifInfo.setImageInfo({
+        '@context': 'http://iiif.io/api/image/2/context.json',
+        '@id': 'http://iiif.test/version2/id'
+      });
+      options = iiifInfo.getTileSourceOptions();
+
+      expect(options).to.be.an('object');
+      expect(options).to.have.property('version', Versions.VERSION2);
+      expect(options).to.have.property('url', 'http://iiif.test/version2/id');
+      expect(options).to.have.property('format', 'jpg');
+
+    });
+
+    it('uses preferred options if applicable', function() {
+
+      iiifInfo.setImageInfo({
+        '@context': 'http://iiif.io/api/image/2/context.json',
+        '@id': 'http://iiif.test/version2/id',
+        width: 2000,
+        height: 1500,
+        profile: ['http://iiif.io/api/image/2/level2.json']
+      });
+      const options = iiifInfo.getTileSourceOptions({
+        quality: 'bitonal',
+        format: 'png'
+      });
+      expect(options).to.have.property('quality', 'bitonal');
+      expect(options).to.have.property('format', 'png');
+
+    });
+
+    it('ignores preferred options that are not supported', function() {
+
+      iiifInfo.setImageInfo({
+        '@context': 'http://iiif.io/api/image/2/context.json',
+        '@id': 'http://iiif.test/version2/id',
+        width: 2000,
+        height: 1500,
+        profile: ['http://iiif.io/api/image/2/level1.json']
+      });
+      const options = iiifInfo.getTileSourceOptions({
+        quality: 'bitonal',
+        format: 'png'
+      });
+      expect(options).to.have.property('quality', 'default');
+      expect(options).to.have.property('format', 'jpg');
+
+    });
+
+    it('combines supported features indicated by compliance level and explicitly stated in image info', function() {
+
+      iiifInfo.setImageInfo({
+        '@context': 'http://iiif.io/api/image/2/context.json',
+        '@id': 'http://iiif.test/id',
+        profile: ['http://iiif.io/api/image/2/level1.json', {
+          supports: ['regionByPct', 'sizeByWh']
+        }]
+      });
+
+      let options = iiifInfo.getTileSourceOptions();
+      expect(options.supports).to.contain('regionByPct');
+      expect(options.supports).to.contain('sizeByWh');
+      expect(options.supports).to.contain('regionByPx');
+      expect(options.supports).to.contain('sizeByW');
+      expect(options.supports).to.contain('sizeByH');
+      expect(options.supports).to.contain('sizeByPct');
+      expect(options.supports).to.have.length(6);
+
+      iiifInfo.setImageInfo({
+        '@context': 'http://iiif.io/api/image/3/context.json',
+        id: 'http://iiif.test/id',
+        profile: 'level1',
+        extraFeatures: ['regionByPct', 'sizeByPct']
+      });
+
+      options = iiifInfo.getTileSourceOptions();
+      expect(options.supports).to.contain('regionByPct');
+      expect(options.supports).to.contain('sizeByPct');
+      expect(options.supports).to.contain('regionByPx');
+      expect(options.supports).to.contain('regionSquare');
+      expect(options.supports).to.contain('sizeByW');
+      expect(options.supports).to.contain('sizeByH');
+      expect(options.supports).to.have.length(6);
+
+    });
+
+    it('uses the first available scale factors and tile sizes', function() {
+
+      iiifInfo.setImageInfo({
+        '@context': 'http://library.stanford.edu/iiif/image-api/1.1/context.json',
+        '@id': 'http://iiif.test/id',
+        profile: 'http://library.stanford.edu/iiif/image-api/compliance.html#level0'
+      });
+      let options = iiifInfo.getTileSourceOptions();
+      expect(options.resolutions).to.be(undefined);
+      expect(options.tileSize).to.be(undefined);
+
+      iiifInfo.setImageInfo({
+        '@context': 'http://library.stanford.edu/iiif/image-api/1.1/context.json',
+        '@id': 'http://iiif.test/id',
+        profile: 'http://library.stanford.edu/iiif/image-api/compliance.html#level0',
+        scale_factors: [1, 2, 4],
+        tile_width: 512
+      });
+      options = iiifInfo.getTileSourceOptions();
+      expect(options.resolutions).to.have.length(3);
+      expect(options.resolutions).to.contain(1);
+      expect(options.resolutions).to.contain(2);
+      expect(options.resolutions).to.contain(4);
+      expect(options.tileSize).to.have.length(2);
+      expect(options.tileSize[0]).to.be(512);
+      expect(options.tileSize[1]).to.be(512);
+
+      iiifInfo.setImageInfo({
+        '@context': 'http://library.stanford.edu/iiif/image-api/1.1/context.json',
+        '@id': 'http://iiif.test/id',
+        profile: 'http://library.stanford.edu/iiif/image-api/compliance.html#level0',
+        scale_factors: [1, 2, 4],
+        tile_width: 512,
+        tile_height: 1024
+      });
+      options = iiifInfo.getTileSourceOptions();
+      expect(options.resolutions).to.have.length(3);
+      expect(options.resolutions).to.contain(1);
+      expect(options.resolutions).to.contain(2);
+      expect(options.resolutions).to.contain(4);
+      expect(options.tileSize).to.have.length(2);
+      expect(options.tileSize[0]).to.be(512);
+      expect(options.tileSize[1]).to.be(1024);
+
+      iiifInfo.setImageInfo({
+        '@context': 'http://iiif.io/api/image/2/context.json',
+        '@id': 'http://iiif.test/id',
+        profile: 'http://iiif.io/api/image/2/level0.json'
+      });
+      options = iiifInfo.getTileSourceOptions();
+      expect(options.resolutions).to.be(undefined);
+      expect(options.tileSize).to.be(undefined);
+
+      iiifInfo.setImageInfo({
+        '@context': 'http://iiif.io/api/image/2/context.json',
+        '@id': 'http://iiif.test/id',
+        profile: 'http://iiif.io/api/image/2/level0.json',
+        tiles: [{
+          scaleFactors: [1, 2, 4],
+          width: 512
+        },
+        {
+          scaleFactors: [1, 2, 4, 8, 16],
+          width: 256
+        }]
+      });
+      options = iiifInfo.getTileSourceOptions();
+      expect(options.resolutions).to.have.length(3);
+      expect(options.resolutions).to.contain(1);
+      expect(options.resolutions).to.contain(2);
+      expect(options.resolutions).to.contain(4);
+      expect(options.tileSize).to.have.length(2);
+      expect(options.tileSize[0]).to.be(512);
+      expect(options.tileSize[1]).to.be(512);
+
+      iiifInfo.setImageInfo({
+        '@context': 'http://iiif.io/api/image/2/context.json',
+        '@id': 'http://iiif.test/id',
+        profile: 'http://iiif.io/api/image/2/level0.json',
+        tiles: [{
+          scaleFactors: [1, 2, 4],
+          width: 512,
+          height: 1024
+        }]
+      });
+      options = iiifInfo.getTileSourceOptions();
+      expect(options.resolutions).to.have.length(3);
+      expect(options.resolutions).to.contain(1);
+      expect(options.resolutions).to.contain(2);
+      expect(options.resolutions).to.contain(4);
+      expect(options.tileSize).to.have.length(2);
+      expect(options.tileSize[0]).to.be(512);
+      expect(options.tileSize[1]).to.be(1024);
+
+    });
+
+  });
+
+  it('provides each given size in sizes as OpenLayers Size', function() {
+
+    iiifInfo.setImageInfo({
+      '@context': 'http://iiif.io/api/image/2/context.json',
+      '@id': 'http://iiif.test/id',
+      'sizes': [{
+        width: 2000,
+        height: 1000
+      },
+      {
+        width: 1000,
+        height: 500
+      },
+      {
+        width: 500,
+        height: 250
+      }]
+    });
+    const options = iiifInfo.getTileSourceOptions();
+    expect(options.sizes).to.have.length(3);
+    expect(options.sizes[0]).to.have.length(2);
+    expect(options.sizes[0][0]).to.be(2000);
+    expect(options.sizes[0][1]).to.be(1000);
+    expect(options.sizes[1]).to.have.length(2);
+    expect(options.sizes[1][0]).to.be(1000);
+    expect(options.sizes[1][1]).to.be(500);
+    expect(options.sizes[2]).to.have.length(2);
+    expect(options.sizes[2][0]).to.be(500);
+    expect(options.sizes[2][1]).to.be(250);
+
+  });
+
+});

test/spec/ol/layer/layer.test.js

@@ -94,6 +94,16 @@ describe('ol.layer.Layer', function() {
       layer.dispose();
     });
 
+    it('accepts a custom render function', function() {
+      let called = false;
+      const layer = new Layer({
+        render: function() {
+          called = true;
+        }
+      });
+      layer.render();
+      expect(called).to.eql(true);
+    });
   });
 
   describe('visibleAtResolution', function() {

test/spec/ol/render/canvas/textbuilder.test.js

@@ -28,7 +28,7 @@ function createContext() {
 function executeInstructions(builder, expectedDrawTextImageCalls, expectedBuilderImageCalls) {
   const transform = createTransform();
   const context = createContext();
-  const executor = new Executor(0.02, 1, false, null, builder.finish());
+  const executor = new Executor(0.02, 1, false, builder.finish());
   sinon.spy(executor, 'drawTextImageWithPointPlacement_');
   const replayImageStub = sinon.stub(executor, 'replayImage_');
   executor.execute(context, transform);

test/spec/ol/renderer/canvas/builder.test.js

@@ -35,7 +35,7 @@ describe('ol.render.canvas.BuilderGroup', function() {
      */
     function execute(builder, skippedUids, pixelRatio, overlaps) {
       const executor = new ExecutorGroup([-180, -90, 180, 90], 1,
-        pixelRatio || 1, !!overlaps, null, builder.finish());
+        pixelRatio || 1, !!overlaps, builder.finish());
       executor.execute(context, transform, 0, skippedUids || {});
     }
 

test/spec/ol/renderer/canvas/vectortilelayer.test.js

@@ -98,7 +98,7 @@ describe('ol.renderer.canvas.VectorTileLayer', function() {
     it('creates a new instance', function() {
       const renderer = new CanvasVectorTileLayerRenderer(layer);
       expect(renderer).to.be.a(CanvasVectorTileLayerRenderer);
-      expect(renderer.zDirection).to.be(0);
+      expect(renderer.zDirection).to.be(1);
     });
 
     it('does not render replays for pure image rendering', function() {

test/spec/ol/source/iiif.test.js

@@ -0,0 +1,387 @@
+import {DEFAULT_TILE_SIZE} from '../../../../src/ol/tilegrid/common.js';
+import IIIF from '../../../../src/ol/source/IIIF.js';
+import {Versions} from '../../../../src/ol/format/IIIFInfo.js';
+
+
+describe('ol.source.IIIF', function() {
+  const width = 2000,
+      height = 1500,
+      size = [width, height],
+      url = 'http://iiif.test/image-id';
+
+  function getMinimalSource() {
+    return new IIIF({
+      size: size
+    });
+  }
+
+  function getSource(additionalOptions) {
+    const options = Object.assign({}, {
+      size: size,
+      url: url
+    }, additionalOptions === undefined ? {} : additionalOptions);
+    return new IIIF(options);
+  }
+
+  describe('constructor', function() {
+
+    it('requires valid size option', function() {
+
+      expect(function() {
+        new IIIF();
+      }).to.throwException();
+
+      expect(function() {
+        new IIIF({});
+      }).to.throwException();
+
+      expect(function() {
+        new IIIF({
+          size: []
+        });
+      }).to.throwException();
+
+      expect(function() {
+        new IIIF({
+          size: 100
+        });
+      }).to.throwException();
+
+      expect(function() {
+        new IIIF({
+          size: [100]
+        });
+      }).to.throwException();
+
+      expect(function() {
+        new IIIF({
+          size: [null, 100]
+        });
+      }).to.throwException();
+
+      expect(function() {
+        new IIIF({
+          size: ['very wide', 100]
+        });
+      }).to.throwException();
+
+      expect(function() {
+        new IIIF({
+          size: [0, 100]
+        });
+      }).to.throwException();
+
+      expect(function() {
+        new IIIF({
+          size: [100, null]
+        });
+      }).to.throwException();
+
+      expect(function() {
+        new IIIF({
+          size: [100, 0]
+        });
+      }).to.throwException();
+
+      expect(function() {
+        new IIIF({
+          size: [100, 'not that high']
+        });
+      }).to.throwException();
+
+      expect(function() {
+        new IIIF({
+          size: [100, 200, 300]
+        });
+      }).to.throwException();
+
+      let source;
+
+      expect(function() {
+        source = new IIIF({
+          size: [100, 200]
+        });
+      }).to.not.throwException();
+
+      expect(source).to.be.a(IIIF);
+
+      expect(function() {
+        getMinimalSource();
+      }).to.not.throwException();
+
+    });
+
+    it('uses empty base URL, default quality, jpg format as default', function() {
+
+      const tileUrlFunction = getMinimalSource().getTileUrlFunction();
+      expect(tileUrlFunction([0, 0, 0])).to.be('full/full/0/default.jpg');
+
+    });
+
+    it('uses native as default quality for version 1', function() {
+
+      const tileUrlFunction = new IIIF({
+        size: size,
+        version: Versions.VERSION1
+      }).getTileUrlFunction();
+      expect(tileUrlFunction([0, 0, 0])).to.be('full/full/0/native.jpg');
+
+    });
+
+    it('corrects non empty base URL if trailing slash is missing', function() {
+
+      // missing trailing slash is added
+      let tileUrlFunction = getSource().getTileUrlFunction();
+      expect(tileUrlFunction([0, 0, 0])).to.be('http://iiif.test/image-id/full/full/0/default.jpg');
+
+      // existent trailing slash isn't doubled
+      tileUrlFunction = getSource({
+        url: 'http://iiif.test/other-image-id/'
+      }).getTileUrlFunction();
+      expect(tileUrlFunction([0, 0, 0])).to.be('http://iiif.test/other-image-id/full/full/0/default.jpg');
+
+    });
+
+  });
+
+  describe('tileUrlFunction', function() {
+
+    it('has only one resolution and one tile if no tiles, resolutions, sizes and supported features are given', function() {
+
+      let tileUrlFunction = getSource().getTileUrlFunction();
+      expect(tileUrlFunction([0, 0, 0])).to.be('http://iiif.test/image-id/full/full/0/default.jpg');
+      expect(tileUrlFunction([-1, 0, 0])).to.be(undefined);
+      expect(tileUrlFunction([1, 0, 0])).to.be(undefined);
+      expect(tileUrlFunction([0, 1, 0])).to.be(undefined);
+      expect(tileUrlFunction([0, 0, 1])).to.be(undefined);
+
+      tileUrlFunction = getSource({
+        version: Versions.VERSION1
+      }).getTileUrlFunction();
+      expect(tileUrlFunction([0, 0, 0])).to.be('http://iiif.test/image-id/full/full/0/native.jpg');
+
+      tileUrlFunction = getSource({
+        version: Versions.VERSION3
+      }).getTileUrlFunction();
+      expect(tileUrlFunction([0, 0, 0])).to.be('http://iiif.test/image-id/full/max/0/default.jpg');
+
+    });
+
+    it('constructs the same number of resolutions as distinguishable sizes are given', function() {
+
+      let tileUrlFunction = getSource({
+        sizes: [[2000, 1500], [1000, 750], [500, 375]]
+      }).getTileUrlFunction();
+
+      expect(tileUrlFunction([0, 0, 0])).to.be('http://iiif.test/image-id/full/500,/0/default.jpg');
+      expect(tileUrlFunction([1, 0, 0])).to.be('http://iiif.test/image-id/full/1000,/0/default.jpg');
+      expect(tileUrlFunction([2, 0, 0])).to.be('http://iiif.test/image-id/full/full/0/default.jpg');
+      expect(tileUrlFunction([3, 0, 0])).to.be(undefined);
+      expect(tileUrlFunction([-1, 0, 0])).to.be(undefined);
+      expect(tileUrlFunction([0, 1, 0])).to.be(undefined);
+      expect(tileUrlFunction([0, 0, 1])).to.be(undefined);
+      expect(tileUrlFunction([1, 1, 0])).to.be(undefined);
+      expect(tileUrlFunction([1, 0, 1])).to.be(undefined);
+
+      tileUrlFunction = getSource({
+        sizes: [[2000, 1500], [1000, 750], [500, 375]],
+        version: Versions.VERSION3
+      }).getTileUrlFunction();
+
+      expect(tileUrlFunction([0, 0, 0])).to.be('http://iiif.test/image-id/full/500,375/0/default.jpg');
+      expect(tileUrlFunction([1, 0, 0])).to.be('http://iiif.test/image-id/full/1000,750/0/default.jpg');
+      expect(tileUrlFunction([2, 0, 0])).to.be('http://iiif.test/image-id/full/max/0/default.jpg');
+
+      tileUrlFunction = getSource({
+        sizes: [[2000, 1500], [1000, 749], [1000, 750], [500, 375], [500, 374]]
+      }).getTileUrlFunction();
+
+      expect(tileUrlFunction([0, 0, 0])).to.be('http://iiif.test/image-id/full/500,/0/default.jpg');
+      expect(tileUrlFunction([1, 0, 0])).to.be('http://iiif.test/image-id/full/1000,/0/default.jpg');
+      expect(tileUrlFunction([2, 0, 0])).to.be('http://iiif.test/image-id/full/full/0/default.jpg');
+      expect(tileUrlFunction([3, 0, 0])).to.be(undefined);
+
+    });
+
+    it('cannot provide scaled tiles without provided tilesize or supported features', function() {
+
+      const tileUrlFunction = getSource({
+        resolutions: [16, 8, 4, 2, 1]
+      }).getTileUrlFunction();
+
+      expect(tileUrlFunction([0, 0, 0])).to.be('http://iiif.test/image-id/full/full/0/default.jpg');
+      expect(tileUrlFunction([-1, 0, 0])).to.be(undefined);
+      expect(tileUrlFunction([1, 0, 0])).to.be(undefined);
+      expect(tileUrlFunction([0, 1, 0])).to.be(undefined);
+      expect(tileUrlFunction([0, 0, 1])).to.be(undefined);
+
+    });
+
+    it('provides canonical tile URLs for all necessary resolutions if only a tileSize exists', function() {
+
+      let tileUrlFunction = getSource({
+        tileSize: 512
+      }).getTileUrlFunction();
+
+      expect(tileUrlFunction([0, 0, 0])).to.be('http://iiif.test/image-id/full/500,/0/default.jpg');
+      expect(tileUrlFunction([-1, 0, 0])).to.be(undefined);
+      expect(tileUrlFunction([0, 1, 0])).to.be(undefined);
+      expect(tileUrlFunction([0, 0, 1])).to.be(undefined);
+      expect(tileUrlFunction([1, 0, 0])).to.be('http://iiif.test/image-id/0,0,1024,1024/512,/0/default.jpg');
+      expect(tileUrlFunction([1, 1, 0])).to.be('http://iiif.test/image-id/1024,0,976,1024/488,/0/default.jpg');
+      expect(tileUrlFunction([1, 0, 1])).to.be('http://iiif.test/image-id/0,1024,1024,476/512,/0/default.jpg');
+      expect(tileUrlFunction([1, 1, 1])).to.be('http://iiif.test/image-id/1024,1024,976,476/488,/0/default.jpg');
+      expect(tileUrlFunction([2, 0, 0])).to.be('http://iiif.test/image-id/0,0,512,512/512,/0/default.jpg');
+      expect(tileUrlFunction([2, 3, 0])).to.be('http://iiif.test/image-id/1536,0,464,512/464,/0/default.jpg');
+      expect(tileUrlFunction([2, 0, 2])).to.be('http://iiif.test/image-id/0,1024,512,476/512,/0/default.jpg');
+      expect(tileUrlFunction([2, 3, 2])).to.be('http://iiif.test/image-id/1536,1024,464,476/464,/0/default.jpg');
+      expect(tileUrlFunction([3, 0, 0])).to.be(undefined);
+
+      tileUrlFunction = getSource({
+        tileSize: 512,
+        version: Versions.VERSION3
+      }).getTileUrlFunction();
+
+      expect(tileUrlFunction([0, 0, 0])).to.be('http://iiif.test/image-id/full/500,375/0/default.jpg');
+      expect(tileUrlFunction([1, 0, 0])).to.be('http://iiif.test/image-id/0,0,1024,1024/512,512/0/default.jpg');
+      expect(tileUrlFunction([1, 1, 0])).to.be('http://iiif.test/image-id/1024,0,976,1024/488,512/0/default.jpg');
+      expect(tileUrlFunction([1, 0, 1])).to.be('http://iiif.test/image-id/0,1024,1024,476/512,238/0/default.jpg');
+      expect(tileUrlFunction([1, 1, 1])).to.be('http://iiif.test/image-id/1024,1024,976,476/488,238/0/default.jpg');
+      expect(tileUrlFunction([2, 0, 0])).to.be('http://iiif.test/image-id/0,0,512,512/512,512/0/default.jpg');
+      expect(tileUrlFunction([2, 3, 0])).to.be('http://iiif.test/image-id/1536,0,464,512/464,512/0/default.jpg');
+      expect(tileUrlFunction([2, 0, 2])).to.be('http://iiif.test/image-id/0,1024,512,476/512,476/0/default.jpg');
+      expect(tileUrlFunction([2, 3, 2])).to.be('http://iiif.test/image-id/1536,1024,464,476/464,476/0/default.jpg');
+
+    });
+
+    it('provides canonical tile URLs for all provided resolutions if a tileSize also exists', function() {
+
+      const tileUrlFunction = getSource({
+        tileSize: 512,
+        resolutions: [8, 4, 2, 1]
+      }).getTileUrlFunction();
+
+      expect(tileUrlFunction([0, 0, 0])).to.be('http://iiif.test/image-id/full/250,/0/default.jpg');
+      expect(tileUrlFunction([1, 0, 0])).to.be('http://iiif.test/image-id/full/500,/0/default.jpg');
+      expect(tileUrlFunction([2, 0, 0])).to.be('http://iiif.test/image-id/0,0,1024,1024/512,/0/default.jpg');
+      expect(tileUrlFunction([2, 1, 0])).to.be('http://iiif.test/image-id/1024,0,976,1024/488,/0/default.jpg');
+      expect(tileUrlFunction([2, 0, 1])).to.be('http://iiif.test/image-id/0,1024,1024,476/512,/0/default.jpg');
+      expect(tileUrlFunction([2, 1, 1])).to.be('http://iiif.test/image-id/1024,1024,976,476/488,/0/default.jpg');
+      expect(tileUrlFunction([3, 0, 0])).to.be('http://iiif.test/image-id/0,0,512,512/512,/0/default.jpg');
+      expect(tileUrlFunction([3, 3, 0])).to.be('http://iiif.test/image-id/1536,0,464,512/464,/0/default.jpg');
+      expect(tileUrlFunction([3, 0, 2])).to.be('http://iiif.test/image-id/0,1024,512,476/512,/0/default.jpg');
+      expect(tileUrlFunction([3, 3, 2])).to.be('http://iiif.test/image-id/1536,1024,464,476/464,/0/default.jpg');
+      expect(tileUrlFunction([4, 0, 0])).to.be(undefined);
+
+    });
+
+    it('supports non square tiles', function() {
+
+      let tileUrlFunction = getSource({
+        tileSize: [1024, 512]
+      }).getTileUrlFunction();
+
+      expect(tileUrlFunction([0, 0, 0])).to.be('http://iiif.test/image-id/full/500,/0/default.jpg');
+      expect(tileUrlFunction([1, 0, 0])).to.be('http://iiif.test/image-id/0,0,2000,1024/1000,/0/default.jpg');
+      expect(tileUrlFunction([1, 0, 1])).to.be('http://iiif.test/image-id/0,1024,2000,476/1000,/0/default.jpg');
+      expect(tileUrlFunction([2, 0, 0])).to.be('http://iiif.test/image-id/0,0,1024,512/1024,/0/default.jpg');
+      expect(tileUrlFunction([2, 1, 0])).to.be('http://iiif.test/image-id/1024,0,976,512/976,/0/default.jpg');
+      expect(tileUrlFunction([2, 0, 2])).to.be('http://iiif.test/image-id/0,1024,1024,476/1024,/0/default.jpg');
+      expect(tileUrlFunction([2, 1, 2])).to.be('http://iiif.test/image-id/1024,1024,976,476/976,/0/default.jpg');
+      expect(tileUrlFunction([3, 0, 0])).to.be(undefined);
+
+      tileUrlFunction = getSource({
+        tileSize: [1024, 512],
+        version: Versions.VERSION3
+      }).getTileUrlFunction();
+
+      expect(tileUrlFunction([0, 0, 0])).to.be('http://iiif.test/image-id/full/500,375/0/default.jpg');
+      expect(tileUrlFunction([2, 0, 0])).to.be('http://iiif.test/image-id/0,0,1024,512/1024,512/0/default.jpg');
+
+    });
+
+    it('provides tile URLs with default tile size if sufficient supported features are provided', function() {
+
+      let tileUrlFunction = getSource({
+        supports: ['regionByPx', 'sizeByW']
+      }).getTileUrlFunction();
+
+      const maxZoom = Math.ceil(Math.log2(width / DEFAULT_TILE_SIZE));
+
+      expect(tileUrlFunction([maxZoom, 0, 0])).to.be('http://iiif.test/image-id/0,0,' + DEFAULT_TILE_SIZE + ',' + DEFAULT_TILE_SIZE + '/' + DEFAULT_TILE_SIZE + ',/0/default.jpg');
+      expect(tileUrlFunction([maxZoom + 1, 0, 0])).to.be(undefined);
+
+      tileUrlFunction = getSource({
+        supports: ['regionByPx', 'sizeByH']
+      }).getTileUrlFunction();
+
+      expect(tileUrlFunction([maxZoom, 0, 0])).to.be('http://iiif.test/image-id/0,0,' + DEFAULT_TILE_SIZE + ',' + DEFAULT_TILE_SIZE + '/,' + DEFAULT_TILE_SIZE + '/0/default.jpg');
+      expect(tileUrlFunction([maxZoom + 1, 0, 0])).to.be(undefined);
+
+      tileUrlFunction = getSource({
+        supports: ['regionByPx', 'sizeByWh']
+      }).getTileUrlFunction();
+
+      expect(tileUrlFunction([maxZoom, 0, 0])).to.be('http://iiif.test/image-id/0,0,' + DEFAULT_TILE_SIZE + ',' + DEFAULT_TILE_SIZE + '/' + DEFAULT_TILE_SIZE + ',' + DEFAULT_TILE_SIZE + '/0/default.jpg');
+      expect(tileUrlFunction([maxZoom + 1, 0, 0])).to.be(undefined);
+
+      tileUrlFunction = getSource({
+        supports: ['regionByPct', 'sizeByPct']
+      }).getTileUrlFunction();
+
+      const tileWPct = (DEFAULT_TILE_SIZE / width * 100).toLocaleString('en', {maximumFractionDigits: 10}),
+          tileHPct = (DEFAULT_TILE_SIZE / height * 100).toLocaleString('en', {maximumFractionDigits: 10});
+
+      expect(tileUrlFunction([maxZoom, 0, 0])).to.be('http://iiif.test/image-id/pct:0,0,' + tileWPct + ',' + tileHPct + '/pct:100/0/default.jpg');
+      expect(tileUrlFunction([maxZoom + 1, 0, 0])).to.be(undefined);
+
+    });
+
+    it('prefers canonical tile URLs', function() {
+
+      let tileUrlFunction = getSource({
+        tileSize: 512,
+        supports: ['regionByPx', 'regionByPct', 'sizeByW', 'sizeByH', 'sizeByWh', 'sizeByPct']
+      }).getTileUrlFunction();
+
+      expect(tileUrlFunction([2, 0, 0])).to.be('http://iiif.test/image-id/0,0,512,512/512,/0/default.jpg');
+
+      tileUrlFunction = getSource({
+        tileSize: 512,
+        version: Versions.VERSION3,
+        supports: ['regionByPx', 'regionByPct', 'sizeByW', 'sizeByH', 'sizeByWh', 'sizeByPct']
+      }).getTileUrlFunction();
+
+      expect(tileUrlFunction([2, 0, 0])).to.be('http://iiif.test/image-id/0,0,512,512/512,512/0/default.jpg');
+
+    });
+
+
+    it('provides correct tile URLs for percentage URL parameter values', function() {
+
+      const tileUrlFunction = getSource({
+        tileSize: 512,
+        supports: ['regionByPct', 'sizeByPct']
+      }).getTileUrlFunction();
+
+      expect(tileUrlFunction([0, 0, 0])).to.be('http://iiif.test/image-id/full/pct:25/0/default.jpg');
+      expect(tileUrlFunction([-1, 0, 0])).to.be(undefined);
+      expect(tileUrlFunction([0, 1, 0])).to.be(undefined);
+      expect(tileUrlFunction([0, 0, 1])).to.be(undefined);
+
+      expect(tileUrlFunction([1, 0, 0])).to.be('http://iiif.test/image-id/pct:0,0,51.2,68.2666666667/pct:50/0/default.jpg');
+      expect(tileUrlFunction([1, 1, 0])).to.be('http://iiif.test/image-id/pct:51.2,0,48.8,68.2666666667/pct:50/0/default.jpg');
+      expect(tileUrlFunction([1, 0, 1])).to.be('http://iiif.test/image-id/pct:0,68.2666666667,51.2,31.7333333333/pct:50/0/default.jpg');
+      expect(tileUrlFunction([1, 1, 1])).to.be('http://iiif.test/image-id/pct:51.2,68.2666666667,48.8,31.7333333333/pct:50/0/default.jpg');
+
+      expect(tileUrlFunction([2, 0, 0])).to.be('http://iiif.test/image-id/pct:0,0,25.6,34.1333333333/pct:100/0/default.jpg');
+      expect(tileUrlFunction([2, 3, 0])).to.be('http://iiif.test/image-id/pct:76.8,0,23.2,34.1333333333/pct:100/0/default.jpg');
+      expect(tileUrlFunction([2, 0, 2])).to.be('http://iiif.test/image-id/pct:0,68.2666666667,25.6,31.7333333333/pct:100/0/default.jpg');
+      expect(tileUrlFunction([2, 3, 2])).to.be('http://iiif.test/image-id/pct:76.8,68.2666666667,23.2,31.7333333333/pct:100/0/default.jpg');
+      expect(tileUrlFunction([3, 0, 0])).to.be(undefined);
+
+    });
+
+  });
+
+});