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

@@ -4,6 +4,16 @@
 
 #### Backwards incompatible changes
 
+#### Removal of optional this arguments
+
+The optional this (i.e. opt_this) arguments were removed from the following methods.
+Please use closures, the es6 arrow function or the bind method to achieve this effect (Bind is explained here:
+https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind).
+
+* `forEachCorner` in `ol/extent`
+* `LRUCache#forEach`
+* `RBush#forEach` and `RBush#forEachInExtent`
+
 ##### The `setCenter`, `setZoom`, `setResolution` and `setRotation` methods on `ol/View` do not bypass constraints anymore
 
 Previously, these methods allowed setting values that were inconsistent with the given view constraints.
@@ -88,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/color-manipulation.js

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

examples/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.html

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

examples/filter-points-webgl.js

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

examples/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/sea-level.js

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

examples/shaded-relief.js

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

examples/templates/example.html

@@ -78,7 +78,7 @@
     <header class="navbar" role="navigation">
       <div class="container">
         <div class="display-table pull-left" id="navbar-logo-container">
-          <a class="navbar-brand" href="./"><img src="./resources/logo-70x70.png">&nbsp;OpenLayers Examples</a>
+          <a class="navbar-brand" href="./"><img src="./resources/logo-70x70.png">&nbsp;OpenLayers</a>
         </div>
         <!-- menu items that get hidden below 768px width -->
         <nav class='collapse navbar-collapse navbar-responsive-collapse'>
@@ -122,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,56 +41,62 @@
     "rbush": "2.0.2"
   },
   "devDependencies": {
-    "@openlayers/eslint-plugin": "^4.0.0-beta.1",
+    "@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.6",
+    "@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.2.1",
-    "copy-webpack-plugin": "^5.0.1",
+    "clean-css-cli": "4.3.0",
+    "copy-webpack-plugin": "^5.0.3",
     "coveralls": "3.0.3",
-    "eslint": "^5.15.2",
+    "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",
-    "globby": "^9.1.0",
-    "handlebars": "4.1.1",
+    "front-matter": "^3.0.2",
+    "fs-extra": "^8.0.0",
+    "glob": "^7.1.4",
+    "globby": "^9.2.0",
+    "handlebars": "4.1.2",
+    "html-to-image": "^0.1.0",
     "istanbul": "0.4.5",
-    "jquery": "3.3.1",
-    "jsdoc": "3.5.5",
-    "jsdoc-plugin-typescript": "^1.0.7",
-    "karma": "^4.0.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",
-    "marked": "0.6.1",
-    "mocha": "6.0.2",
-    "ol-mapbox-style": "^4.2.1",
+    "loglevelnext": "^3.0.1",
+    "marked": "0.6.2",
+    "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.2.7",
+    "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.29.6",
-    "webpack-cli": "^3.3.0",
-    "webpack-dev-middleware": "^3.6.1",
-    "webpack-dev-server": "^3.2.1",
+    "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"
   },
   "eslintConfig": {

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();

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

@@ -131,4 +131,4 @@ const map = new Map({
 });
 map.getView().fit(vectorSource.getExtent());
 
-render({tolerance: 0.02});
+render({tolerance: 0.021});

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

@@ -103,4 +103,4 @@ const map = new Map({
 });
 map.getView().fit(vectorSource.getExtent());
 
-render({tolerance: 0.02});
+render({tolerance: 0.024});

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/Tile.js

@@ -170,6 +170,9 @@ class Tile extends EventTarget {
     // cleaned up by refreshInterimChain)
     do {
       if (tile.getState() == TileState.LOADED) {
+        // Show tile immediately instead of fading it in after loading, because
+        // the interim tile is in place already
+        this.transition_ = 0;
         return tile;
       }
       tile = tile.interimTile;

src/ol/TileCache.js

@@ -44,7 +44,7 @@ class TileCache extends LRUCache {
         this.remove(getKey(tile.tileCoord));
         tile.dispose();
       }
-    }, this);
+    }.bind(this));
   }
 }
 

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
@@ -284,8 +284,6 @@ class View extends BaseObject {
      */
     this.updateAnimationKey_;
 
-    this.updateAnimations_ = this.updateAnimations_.bind(this);
-
     /**
      * @private
      * @const
@@ -452,6 +450,17 @@ class View extends BaseObject {
    * @api
    */
   animate(var_args) {
+    if (this.isDef() && !this.getAnimating()) {
+      this.resolveConstraints(0);
+    }
+    this.animate_.apply(this, arguments);
+  }
+
+  /**
+   * @private
+   * @param {...(AnimationOptions|function(boolean): void)} var_args Animation options.
+   */
+  animate_(var_args) {
     let animationCount = arguments.length;
     let callback;
     if (animationCount > 1 && typeof arguments[animationCount - 1] === 'function') {
@@ -641,11 +650,7 @@ class View extends BaseObject {
     // prune completed series
     this.animations_ = this.animations_.filter(Boolean);
     if (more && this.updateAnimationKey_ === undefined) {
-      this.updateAnimationKey_ = requestAnimationFrame(this.updateAnimations_);
-    }
-
-    if (!this.getAnimating()) {
-      setTimeout(this.resolveConstraints.bind(this), 0);
+      this.updateAnimationKey_ = requestAnimationFrame(this.updateAnimations_.bind(this));
     }
   }
 
@@ -929,13 +934,9 @@ class View extends BaseObject {
     const center = /** @type {import("./coordinate.js").Coordinate} */ (this.getCenter());
     const projection = this.getProjection();
     const resolution = /** @type {number} */ (this.getResolution());
-    const pixelResolution = resolution / pixelRatio;
     const rotation = this.getRotation();
     return {
-      center: [
-        Math.round(center[0] / pixelResolution) * pixelResolution,
-        Math.round(center[1] / pixelResolution) * pixelResolution
-      ],
+      center: center.slice(0),
       projection: projection !== undefined ? projection : null,
       resolution: resolution,
       rotation: rotation,
@@ -1085,7 +1086,7 @@ class View extends BaseObject {
     const callback = options.callback ? options.callback : VOID;
 
     if (options.duration !== undefined) {
-      this.animate({
+      this.animate_({
         resolution: resolution,
         center: this.getConstrainedCenter(center, resolution),
         duration: options.duration,
@@ -1312,7 +1313,7 @@ class View extends BaseObject {
         this.cancelAnimations();
       }
 
-      this.animate({
+      this.animate_({
         rotation: newRotation,
         center: newCenter,
         resolution: newResolution,
@@ -1325,9 +1326,13 @@ class View extends BaseObject {
 
   /**
    * Notify the View that an interaction has started.
+   * The view state will be resolved to a stable one if needed
+   * (depending on its constraints).
    * @api
    */
   beginInteraction() {
+    this.resolveConstraints(0);
+
     this.setHint(ViewHint.INTERACTING, 1);
   }
 

src/ol/extent.js

@@ -400,26 +400,25 @@ export function extendXY(extent, x, y) {
  * callback returns a truthy value the function returns that value
  * immediately. Otherwise the function returns `false`.
  * @param {Extent} extent Extent.
- * @param {function(this:T, import("./coordinate.js").Coordinate): S} callback Callback.
- * @param {T=} opt_this Value to use as `this` when executing `callback`.
+ * @param {function(import("./coordinate.js").Coordinate): S} callback Callback.
  * @return {S|boolean} Value.
- * @template S, T
+ * @template S
  */
-export function forEachCorner(extent, callback, opt_this) {
+export function forEachCorner(extent, callback) {
   let val;
-  val = callback.call(opt_this, getBottomLeft(extent));
+  val = callback(getBottomLeft(extent));
   if (val) {
     return val;
   }
-  val = callback.call(opt_this, getBottomRight(extent));
+  val = callback(getBottomRight(extent));
   if (val) {
     return val;
   }
-  val = callback.call(opt_this, getTopRight(extent));
+  val = callback(getTopRight(extent));
   if (val) {
     return val;
   }
-  val = callback.call(opt_this, getTopLeft(extent));
+  val = callback(getTopLeft(extent));
   if (val) {
     return val;
   }

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/geom.js

@@ -4,6 +4,7 @@
 
 export {default as Circle} from './geom/Circle.js';
 export {default as Geometry} from './geom/Geometry.js';
+export {default as GeometryCollection} from './geom/GeometryCollection.js';
 export {default as LineString} from './geom/LineString.js';
 export {default as MultiLineString} from './geom/MultiLineString.js';
 export {default as MultiPoint} from './geom/MultiPoint.js';

src/ol/geom/Circle.js

@@ -5,6 +5,8 @@ import {createOrUpdate, forEachCorner, intersects} from '../extent.js';
 import GeometryType from './GeometryType.js';
 import SimpleGeometry from './SimpleGeometry.js';
 import {deflateCoordinate} from './flat/deflate.js';
+import {rotate, translate} from './flat/transform.js';
+
 
 /**
  * @classdesc
@@ -143,7 +145,7 @@ class Circle extends SimpleGeometry {
         return true;
       }
 
-      return forEachCorner(extent, this.intersectsCoordinate, this);
+      return forEachCorner(extent, this.intersectsCoordinate.bind(this));
     }
     return false;
 
@@ -212,6 +214,29 @@ class Circle extends SimpleGeometry {
     this.flatCoordinates[this.stride] = this.flatCoordinates[0] + radius;
     this.changed();
   }
+
+  /**
+   * @inheritDoc
+   * @api
+   */
+  rotate(angle, anchor) {
+    const center = this.getCenter();
+    const stride = this.getStride();
+    this.setCenter(rotate(center, 0, center.length, stride, angle, anchor, center));
+    this.changed();
+  }
+
+  /**
+   * @inheritDoc
+   * @api
+   */
+  translate(deltaX, deltaY) {
+    const center = this.getCenter();
+    const stride = this.getStride();
+    this.setCenter(translate(center, 0, center.length, stride, deltaX, deltaY, center));
+    this.changed();
+  }
+
 }
 
 

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/interaction/Interaction.js

@@ -111,7 +111,7 @@ export function pan(view, delta, opt_duration) {
   const currentCenter = view.getCenter();
   if (currentCenter) {
     const center = [currentCenter[0] + delta[0], currentCenter[1] + delta[1]];
-    view.animate({
+    view.animate_({
       duration: opt_duration !== undefined ? opt_duration : 250,
       easing: linear,
       center: view.getConstrainedCenter(center)

src/ol/interaction/MouseWheelZoom.js

@@ -8,13 +8,6 @@ import Interaction, {zoomByDelta} from './Interaction.js';
 import {clamp} from '../math.js';
 
 
-/**
- * Maximum mouse wheel delta.
- * @type {number}
- */
-const MAX_DELTA = 1;
-
-
 /**
  * @enum {string}
  */
@@ -30,6 +23,7 @@ export const Mode = {
  * takes an {@link module:ol/MapBrowserEvent~MapBrowserEvent} and returns a
  * boolean to indicate whether that event should be handled. Default is
  * {@link module:ol/events/condition~always}.
+ * @property {number} [maxDelta=1] Maximum mouse wheel delta.
  * @property {number} [duration=250] Animation duration in milliseconds.
  * @property {number} [timeout=80] Mouse wheel timeout duration in milliseconds.
  * @property {boolean} [useAnchor=true] Enable zooming using the mouse's
@@ -65,6 +59,12 @@ class MouseWheelZoom extends Interaction {
      */
     this.lastDelta_ = 0;
 
+    /**
+     * @private
+     * @type {number}
+     */
+    this.maxDelta_ = options.maxDelta !== undefined ? options.maxDelta : 1;
+
     /**
      * @private
      * @type {number}
@@ -235,8 +235,7 @@ class MouseWheelZoom extends Interaction {
     if (view.getAnimating()) {
       view.cancelAnimations();
     }
-    const maxDelta = MAX_DELTA;
-    const delta = clamp(this.totalDelta_, -maxDelta, maxDelta);
+    const delta = clamp(this.totalDelta_, -this.maxDelta_, this.maxDelta_);
     zoomByDelta(view, -delta, this.lastAnchor_, this.duration_);
     this.mode_ = undefined;
     this.totalDelta_ = 0;

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/Heatmap.js

@@ -27,7 +27,6 @@ import WebGLPointsLayerRenderer from '../renderer/webgl/PointsLayer';
  * of the heatmap, specified as an array of CSS color strings.
  * @property {number} [radius=8] Radius size in pixels.
  * @property {number} [blur=15] Blur size in pixels.
- * @property {number} [shadow=250] Shadow size in pixels.
  * @property {string|function(import("../Feature.js").default):number} [weight='weight'] The feature
  * attribute to use for the weight or a function that returns a weight from a feature. Weight values
  * should range from 0 to 1 (and values outside will be clamped to that range).
@@ -75,7 +74,6 @@ class Heatmap extends VectorLayer {
     delete baseOptions.gradient;
     delete baseOptions.radius;
     delete baseOptions.blur;
-    delete baseOptions.shadow;
     delete baseOptions.weight;
     super(baseOptions);
 
@@ -85,24 +83,6 @@ class Heatmap extends VectorLayer {
      */
     this.gradient_ = null;
 
-    /**
-     * @private
-     * @type {number}
-     */
-    this.shadow_ = options.shadow !== undefined ? options.shadow : 250;
-
-    /**
-     * @private
-     * @type {string|undefined}
-     */
-    this.circleImage_ = undefined;
-
-    /**
-     * @private
-     * @type {Array<Array<import("../style/Style.js").default>>}
-     */
-    this.styleCache_ = null;
-
     listen(this,
       getChangeEventType(Property.GRADIENT),
       this.handleGradientChanged_, this);
@@ -206,15 +186,15 @@ class Heatmap extends VectorLayer {
         attribute float a_rotateWithView;
         attribute vec2 a_offsets;
         attribute float a_opacity;
-        
+
         uniform mat4 u_projectionMatrix;
         uniform mat4 u_offsetScaleMatrix;
         uniform mat4 u_offsetRotateMatrix;
         uniform float u_size;
-        
+
         varying vec2 v_texCoord;
         varying float v_opacity;
-        
+
         void main(void) {
           mat4 offsetMatrix = u_offsetScaleMatrix;
           if (a_rotateWithView == 1.0) {
@@ -229,16 +209,16 @@ class Heatmap extends VectorLayer {
         precision mediump float;
         uniform float u_resolution;
         uniform float u_blurSlope;
-        
+
         varying vec2 v_texCoord;
         varying float v_opacity;
-        
+
         void main(void) {
           vec2 texCoord = v_texCoord * 2.0 - vec2(1.0, 1.0);
           float sqRadius = texCoord.x * texCoord.x + texCoord.y * texCoord.y;
           float value = (1.0 - sqrt(sqRadius)) * u_blurSlope;
           float alpha = smoothstep(0.0, 1.0, value) * v_opacity;
-          gl_FragColor = vec4(1.0, 1.0, 1.0, alpha);
+          gl_FragColor = vec4(alpha, alpha, alpha, alpha);
         }`,
       uniforms: {
         u_size: function() {
@@ -273,9 +253,7 @@ class Heatmap extends VectorLayer {
           }
         }
       ],
-      opacityCallback: function(feature) {
-        return this.weightFunction_(feature);
-      }.bind(this)
+      opacityCallback: this.weightFunction_
     });
   }
 }

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/render/webgl.js

@@ -1,102 +0,0 @@
-/**
- * @module ol/render/webgl
- */
-
-
-/**
- * @const
- * @type {string}
- */
-export const DEFAULT_FONT = '10px sans-serif';
-
-
-/**
- * @const
- * @type {import("../color.js").Color}
- */
-export const DEFAULT_FILLSTYLE = [0.0, 0.0, 0.0, 1.0];
-
-
-/**
- * @const
- * @type {string}
- */
-export const DEFAULT_LINECAP = 'round';
-
-
-/**
- * @const
- * @type {Array<number>}
- */
-export const DEFAULT_LINEDASH = [];
-
-
-/**
- * @const
- * @type {number}
- */
-export const DEFAULT_LINEDASHOFFSET = 0;
-
-
-/**
- * @const
- * @type {string}
- */
-export const DEFAULT_LINEJOIN = 'round';
-
-
-/**
- * @const
- * @type {number}
- */
-export const DEFAULT_MITERLIMIT = 10;
-
-/**
- * @const
- * @type {import("../color.js").Color}
- */
-export const DEFAULT_STROKESTYLE = [0.0, 0.0, 0.0, 1.0];
-
-
-/**
- * @const
- * @type {number}
- */
-export const DEFAULT_TEXTALIGN = 0.5;
-
-
-/**
- * @const
- * @type {number}
- */
-export const DEFAULT_TEXTBASELINE = 0.5;
-
-
-/**
- * @const
- * @type {number}
- */
-export const DEFAULT_LINEWIDTH = 1;
-
-/**
- * @const
- * @type {number}
- */
-export const EPSILON = Number.EPSILON || 2.220446049250313e-16;
-
-/**
- * Calculates the orientation of a triangle based on the determinant method.
- * @param {number} x1 First X coordinate.
- * @param {number} y1 First Y coordinate.
- * @param {number} x2 Second X coordinate.
- * @param {number} y2 Second Y coordinate.
- * @param {number} x3 Third X coordinate.
- * @param {number} y3 Third Y coordinate.
- * @return {boolean|undefined} Triangle is clockwise.
- */
-export const triangleIsCounterClockwise = function(x1, y1, x2, y2, x3, y3) {
-  const area = (x2 - x1) * (y3 - y1) - (x3 - x1) * (y2 - y1);
-  return (area <= EPSILON && area >= -EPSILON) ?
-    undefined : area > 0;
-};
-

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_);
   }
 
   /**