Use beta tag

Vector tile renderer optimizations and fixes

.github/FUNDING.yml

@@ -0,0 +1,8 @@
+# These are supported funding model platforms
+
+github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
+patreon: # Replace with a single Patreon username
+open_collective: openlayers
+ko_fi: # Replace with a single Ko-fi username
+tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
+custom: # Replace with a single custom sponsorship URL

.github/stale.yml

@@ -0,0 +1,17 @@
+# Number of days of inactivity before an issue becomes stale
+daysUntilStale: 60
+# Number of days of inactivity before a stale issue is closed
+daysUntilClose: 7
+# Issues with these labels will never be considered stale
+exemptLabels:
+  - blocker
+  - regression
+# Label to use when marking an issue as stale
+staleLabel: stale
+# Comment to post when marking an issue as stale. Set to `false` to disable
+markComment: >
+  This issue has been automatically marked as stale because it has not had
+  recent activity. It will be closed if no further activity occurs. Thank you
+  for your contributions.
+# Comment to post when closing a stale issue. Set to `false` to disable
+closeComment: false

changelog/upgrade-notes.md

@@ -4,6 +4,38 @@
 
 #### Backwards incompatible changes
 
+#### Removal of `TOUCH` constant from `ol/has`
+
+If you were previously using this constant, you can check if `'ontouchstart'` is defined in `window` instead.
+
+```js
+if ('ontouchstart' in window) {
+  // ...
+}
+```
+
+#### Removal of `GEOLOCATION` constant from `ol/has`
+
+If you were previously using this constant, you can check if `'geolocation'` is defined in `navigator` instead.
+
+```js
+if ('geolocation' in navigator) {
+  // ...
+}
+```
+
+#### Removal of CSS print rules
+
+The CSS media print rules were removed from the `ol.css` file. To get the previous behavior, use the following CSS:
+
+```css
+@media print {
+  .ol-control {
+    display: none;
+  }
+}
+```
+
 #### Removal of optional this arguments
 
 The optional this (i.e. opt_this) arguments were removed from the following methods.
@@ -32,9 +64,9 @@ Previously, this options only constrained the view *center*. This behaviour can
 
 As a side effect, the view `rotate` method is gone and has been replaced with `adjustRotation` which takes a delta as input.
 
-##### Zoom is constrained so only one world is visible
+##### The view is constrained so only one world is visible
 
-Previously, maps showed multiple worlds at low zoom levels. Now, the view is restricted to show only one world. To get the previous behavior, configure the `ol/View` with `multiWorld: true`.
+Previously, maps showed multiple worlds at low zoom levels. In addition, it used to be possible to pan off the north or south edge of the world.  Now, the view is restricted to show only one world, and you cannot pan off the edge. To get the previous behavior, configure the `ol/View` with `multiWorld: true`.
 
 ##### Removal of deprecated methods
 

config/jsdoc/api/plugins/api.js

@@ -59,7 +59,9 @@ function includeAugments(doclet) {
           });
         }
         cls._hideConstructor = true;
-        delete cls.undocumented;
+        if (!cls.undocumented) {
+          cls._documented = true;
+        }
       }
     }
   }
@@ -150,6 +152,9 @@ exports.handlers = {
         // Remove all other undocumented symbols
         doclet.undocumented = true;
       }
+      if (doclet._documented) {
+        delete doclet.undocumented;
+      }
     }
   }
 

config/jsdoc/api/template/publish.js

@@ -214,55 +214,39 @@ function buildNav(members) {
     }
     return 0;
   });
+
+  function createEntry(type, v) {
+    return {
+      type: type,
+      longname: v.longname,
+      name: v.name,
+      classes: find({
+        kind: 'class',
+        memberof: v.longname
+      }).map(createEntry.bind(this, 'class')),
+      members: find({
+        kind: 'member',
+        memberof: v.longname
+      }),
+      methods: find({
+        kind: 'function',
+        memberof: v.longname
+      }),
+      typedefs: find({
+        kind: 'typedef',
+        memberof: v.longname
+      }),
+      events: find({
+        kind: 'event',
+        memberof: v.longname
+      })
+    };
+  }
   _.each(merged, function(v) {
     // exclude interfaces from sidebar
     if (v.interface !== true) {
       if (v.kind == 'module') {
-        nav.push({
-          type: 'module',
-          longname: v.longname,
-          name: v.name,
-          members: find({
-            kind: 'member',
-            memberof: v.longname
-          }),
-          methods: find({
-            kind: 'function',
-            memberof: v.longname
-          }),
-          typedefs: find({
-            kind: 'typedef',
-            memberof: v.longname
-          }),
-          events: find({
-            kind: 'event',
-            memberof: v.longname
-          })
-        });
-      }
-      if (v.kind == 'class') {
-        nav.push({
-          type: 'class',
-          longname: v.longname,
-          name: v.name,
-          members: find({
-            kind: 'member',
-            memberof: v.longname
-          }),
-          methods: find({
-            kind: 'function',
-            memberof: v.longname
-          }),
-          typedefs: find({
-            kind: 'typedef',
-            memberof: v.longname
-          }),
-          fires: v.fires,
-          events: find({
-            kind: 'event',
-            memberof: v.longname
-          })
-        });
+        nav.push(createEntry('module', v));
       }
     }
   });

config/jsdoc/api/template/static/scripts/main.js

@@ -12,13 +12,18 @@ $(function () {
                 var $item = $(v);
 
                 if ($item.data('name') && regexp.test($item.data('name'))) {
+                    const container = $item.parent().parent().parent();
+                    container.show();
+                    container.closest('.itemMembers').show();
+                    container.closest('.item').show();
                     $item.show();
                     $item.closest('.itemMembers').show();
                     $item.closest('.item').show();
                 }
             });
         } else {
-            $el.find('.item, .itemMembers').show();
+            $el.find('.item, .itemMembers').hide();
+            $('.navigation>ul>li').show();
         }
 
         $el.find('.list').scrollTop(0);

config/jsdoc/api/template/tmpl/container.tmpl

@@ -18,7 +18,7 @@
         <sup class="variation"><?js= doc.variation ?></sup>
     <?js } ?></h2>
     <br>
-    <?js if (doc.stability || doc.kind == 'namespace') {
+    <?js if (doc.stability || doc.kind == 'namespace' || doc.kind == 'module') {
       var ancestors = doc.ancestors.map(a => a.replace(/>\./g, '>').replace(/\.</g, '<')).join('/');
       var parts = [];
       if (ancestors) {
@@ -26,8 +26,21 @@
       }
       var importPath = parts.join('/');
     ?>
+      <?js
+        var nameParts = doc.name.split('/');
+        var moduleName = nameParts[nameParts.length - 1];
+        if(moduleName) {
+          var firstChar = moduleName.charAt(0);
+          moduleName = firstChar.toUpperCase() + moduleName.slice(1);
+          var isClassModule = firstChar.toUpperCase() === firstChar;
+        }
+      ?>
+      <?js if (doc.kind == 'module' && !isClassModule && nameParts.length < 3) {?>
+        <pre class="prettyprint source"><code>import * as ol<?js= moduleName ?> from '<?js= doc.name ?>';</code></pre>
+      <?js } else if(doc.kind !== 'module') { ?>
         <pre class="prettyprint source"><code>import <?js= doc.name ?> from '<?js= importPath ?>';</code></pre>
       <?js } ?>
+    <?js } ?>
     <?js if (doc.classdesc) { ?>
         <div class="class-description"><?js= doc.classdesc ?></div>
     <?js } ?>
@@ -143,6 +156,7 @@
         <h3 class="subsection-title">Methods</h3>
 
         <dl><?js methods.forEach(function(m) { ?>
+            <?js m.parent = doc ?>
             <?js= self.partial('method.tmpl', m) ?>
         <?js }); ?></dl>
     <?js } ?>

config/jsdoc/api/template/tmpl/method.tmpl

@@ -27,6 +27,10 @@ var self = this;
 </dt>
 <dd class="<?js= (data.stability && data.stability !== 'stable') ? 'unstable' : '' ?>">
 
+<?js if (data.parent && data.parent.kind == 'module' && data.parent.name.split('ol/').length < 3) { ?>
+  <pre class="prettyprint source"><code>import {<?js= data.name ?>} from '<?js= data.parent.name ?>';</code></pre>
+<?js } ?>
+
     <?js if (data.description) { ?>
     <div class="description">
         <?js= data.description ?>

config/jsdoc/api/template/tmpl/navigation.tmpl

@@ -10,11 +10,12 @@ function toShortName(name) {
     </div>
     <ul class="list">
     <?js
-    this.nav.forEach(function (item) {
+    let navbuilder;
+    this.nav.forEach(navbuilder = function (item) {
     ?>
         <li class="item" data-name="<?js= item.longname ?>">
             <span class="title">
-                <?js= self.linkto(item.longname, item.longname.replace('module:', '')) ?>
+                <?js= self.linkto(item.longname, item.type === 'module' ? item.longname.replace('module:', '') : item.name) ?>
                 <?js if (item.type === 'namespace' &&
                         (item.members.length + item.typedefs.length + item.methods.length +
                          item.events.length > 0)) { ?>
@@ -22,6 +23,18 @@ function toShortName(name) {
             </span>
             <ul class="members itemMembers">
             <?js
+            if (item.classes.length) {
+            ?>
+            <span class="subtitle">Classes</span>
+            <?js
+                item.classes.forEach(function (v) {
+                    navbuilder(v);
+                });
+            }
+            ?>
+            </ul>
+            <ul class="members itemMembers">
+            <?js
             if (item.members.length) {
             ?>
             <span class="subtitle">Members</span>

doc/errors/index.md

@@ -228,3 +228,11 @@ Missing or invalid `size`.
 ### 61
 
 Cannot determine IIIF Image API version from provided image information JSON.
+
+### 62
+
+A `WebGLArrayBuffer` must either be of type `ELEMENT_ARRAY_BUFFER` or `ARRAY_BUFFER`.
+
+### 63
+
+Support for the `OES_element_index_uint` WebGL extension is mandatory for WebGL layers.

examples/center.js

@@ -5,6 +5,7 @@ import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
 import {OSM, Vector as VectorSource} from '../src/ol/source.js';
 import {Circle as CircleStyle, Fill, Stroke, Style} from '../src/ol/style.js';
 
+/** @type {VectorSource<import("../src/ol/geom/SimpleGeometry.js").default>} */
 const source = new VectorSource({
   url: 'data/geojson/switzerland.geojson',
   format: new GeoJSON()
@@ -51,21 +52,21 @@ const zoomtoswitzerland =
     document.getElementById('zoomtoswitzerland');
 zoomtoswitzerland.addEventListener('click', function() {
   const feature = source.getFeatures()[0];
-  const polygon = /** @type {import("../src/ol/geom/SimpleGeometry.js").default} */ (feature.getGeometry());
+  const polygon = feature.getGeometry();
   view.fit(polygon, {padding: [170, 50, 30, 150]});
 }, false);
 
 const zoomtolausanne = document.getElementById('zoomtolausanne');
 zoomtolausanne.addEventListener('click', function() {
   const feature = source.getFeatures()[1];
-  const point = /** @type {import("../src/ol/geom/SimpleGeometry.js").default} */ (feature.getGeometry());
+  const point = feature.getGeometry();
   view.fit(point, {padding: [170, 50, 30, 150], minResolution: 50});
 }, false);
 
 const centerlausanne = document.getElementById('centerlausanne');
 centerlausanne.addEventListener('click', function() {
   const feature = source.getFeatures()[1];
-  const point = /** @type {import("../src/ol/geom/Point.js").default} */ (feature.getGeometry());
+  const point = feature.getGeometry();
   const size = map.getSize();
   view.centerOn(point.getCoordinates(), size, [570, 500]);
 }, false);

examples/custom-interactions.js

@@ -129,7 +129,7 @@ const map = new Map({
   layers: [
     new TileLayer({
       source: new TileJSON({
-        url: 'https://api.tiles.mapbox.com/v3/mapbox.geography-class.json?secure'
+        url: 'https://a.tiles.mapbox.com/v3/aj.1x1-degrees.json'
       })
     }),
     new VectorLayer({

examples/d3.html

@@ -6,7 +6,7 @@ docs: >
   The example loads TopoJSON geometries and uses d3 (<code>d3.geo.path</code>) to render these geometries to a SVG element.
 tags: "d3"
 resources:
-  - https://unpkg.com/d3@4.12.0/build/d3.js
+  - https://unpkg.com/d3@5.9.2/dist/d3.js
   - https://unpkg.com/topojson@3.0.2/dist/topojson.js
 ---
 <div id="map" class="map"></div>

examples/d3.js

@@ -2,7 +2,7 @@ import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
 import {getWidth, getCenter} from '../src/ol/extent.js';
 import {Layer, Tile as TileLayer} from '../src/ol/layer.js';
-import SourceState from '../src/ol/source/State';
+import SourceState from '../src/ol/source/State.js';
 import {fromLonLat, toLonLat} from '../src/ol/proj.js';
 import Stamen from '../src/ol/source/Stamen.js';
 
@@ -85,7 +85,7 @@ const map = new Map({
 /**
  * Load the topojson data and create an ol/layer/Image for that data.
  */
-d3.json('data/topojson/us.json', function(error, us) {
+d3.json('data/topojson/us.json').then(function(us) {
 
   const layer = new CanvasLayer({
     features: topojson.feature(us, us.objects.counties)

examples/data/square.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+
+<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg">
+  <g>
+    <rect width="20" height="20" style="fill:#fff" />
+  </g>
+</svg>

examples/export-map.css

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

examples/export-map.html

@@ -8,5 +8,8 @@ docs: >
 tags: "export, png, openstreetmap"
 ---
 <div id="map" class="map"></div>
+<div style="display: none;">
+  <div class="overlay" id="null">Null Island</div>
+</div>
 <a id="export-png" class="btn btn-default"><i class="fa fa-download"></i> Download PNG</a>
 <a id="image-download" download="map.png"></a>

examples/export-map.js

@@ -1,5 +1,6 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
+import Overlay from '../src/ol/Overlay.js';
 import GeoJSON from '../src/ol/format/GeoJSON.js';
 import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
 import {OSM, Vector as VectorSource} from '../src/ol/source.js';
@@ -25,11 +26,17 @@ const map = new Map({
   })
 });
 
+map.addOverlay(new Overlay({
+  position: [0, 0],
+  element: document.getElementById('null')
+}));
+
+
 // export options for html-to-image.
 // See: https://github.com/bubkoo/html-to-image#options
 const exportOptions = {
   filter: function(element) {
-    return element.className.indexOf('ol-control') === -1;
+    return element.className ? element.className.indexOf('ol-control') === -1 : true;
   }
 };
 

examples/extent-constrained.js

@@ -2,8 +2,8 @@ import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
 import TileLayer from '../src/ol/layer/Tile.js';
 import OSM from '../src/ol/source/OSM.js';
-import {defaults as defaultControls} from '../src/ol/control/util';
-import ZoomSlider from '../src/ol/control/ZoomSlider';
+import {defaults as defaultControls} from '../src/ol/control.js';
+import ZoomSlider from '../src/ol/control/ZoomSlider.js';
 
 const view = new View({
   center: [328627.563458, 5921296.662223],

examples/feature-move-animation.js

@@ -67,10 +67,10 @@ const routeFeature = new Feature({
   type: 'route',
   geometry: route
 });
-const geoMarker = new Feature({
+const geoMarker = /** @type Feature<import("../src/ol/geom/Point").default> */(new Feature({
   type: 'geoMarker',
   geometry: new Point(routeCoords[0])
-});
+}));
 const startMarker = new Feature({
   type: 'icon',
   geometry: new Point(routeCoords[0])
@@ -191,7 +191,7 @@ function stopAnimation(ended) {
 
   // if animation cancelled set the marker at the beginning
   const coord = ended ? routeCoords[routeLength - 1] : routeCoords[0];
-  const geometry = /** @type {import("../src/ol/geom/Point").default} */ (geoMarker.getGeometry());
+  const geometry = geoMarker.getGeometry();
   geometry.setCoordinates(coord);
   //remove listener
   vectorLayer.un('postrender', moveFeature);

examples/filter-points-webgl.js

@@ -1,17 +1,16 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
 import TileLayer from '../src/ol/layer/Tile.js';
-import 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';
+import Feature from '../src/ol/Feature.js';
+import Point from '../src/ol/geom/Point.js';
+import VectorLayer from '../src/ol/layer/Vector.js';
+import {Vector} from '../src/ol/source.js';
+import {fromLonLat} from '../src/ol/proj.js';
+import WebGLPointsLayerRenderer from '../src/ol/renderer/webgl/PointsLayer.js';
+import {clamp, lerp} from '../src/ol/math.js';
+import Stamen from '../src/ol/source/Stamen.js';
 
 const vectorSource = new Vector({
-  features: [],
   attributions: 'NASA'
 });
 

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

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

examples/full-screen-source.css

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

examples/full-screen.css

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

examples/geojson-vt.js

@@ -6,7 +6,7 @@ import VectorTileSource from '../src/ol/source/VectorTile.js';
 import {Tile as TileLayer, VectorTile as VectorTileLayer} from '../src/ol/layer.js';
 import Projection from '../src/ol/proj/Projection.js';
 
-
+// Converts geojson-vt data to GeoJSON
 const replacer = function(key, value) {
   if (value.geometry) {
     let type;
@@ -46,11 +46,6 @@ const replacer = function(key, value) {
   }
 };
 
-const tilePixels = new Projection({
-  code: 'TILE_PIXELS',
-  units: 'tile-pixels'
-});
-
 const map = new Map({
   layers: [
     new TileLayer({
@@ -73,23 +68,22 @@ fetch(url).then(function(response) {
     debug: 1
   });
   const vectorSource = new VectorTileSource({
-    format: new GeoJSON(),
-    tileLoadFunction: function(tile) {
-      const format = tile.getFormat();
-      const tileCoord = tile.getTileCoord();
+    format: new GeoJSON({
+      // Data returned from geojson-vt is in tile pixel units
+      dataProjection: new Projection({
+        code: 'TILE_PIXELS',
+        units: 'tile-pixels',
+        extent: [0, 0, 4096, 4096]
+      })
+    }),
+    tileUrlFunction: function(tileCoord) {
       const data = tileIndex.getTile(tileCoord[0], tileCoord[1], tileCoord[2]);
-
-      const features = format.readFeatures(
-        JSON.stringify({
+      const geojson = JSON.stringify({
         type: 'FeatureCollection',
         features: data ? data.features : []
-        }, replacer));
-      tile.setLoader(function() {
-        tile.setFeatures(features);
-        tile.setProjection(tilePixels);
-      });
-    },
-    url: 'data:' // arbitrary url, we don't use it in the tileLoadFunction
+      }, replacer);
+      return 'data:application/json;charset=UTF-8,' + geojson;
+    }
   });
   const vectorLayer = new VectorTileLayer({
     source: vectorSource

examples/heatmap-earthquakes.html

@@ -4,7 +4,7 @@ title: Earthquakes Heatmap
 shortdesc: Demonstrates the use of a heatmap layer.
 docs: >
   This example parses a KML file and renders the features as a <code>ol/layer/Heatmap</code> layer.
-tags: "heatmap, kml, vector, style"
+tags: "heatmap, kml, vector, style, webgl"
 ---
 <div id="map" class="map"></div>
 <form>

examples/icon-color.js

@@ -25,7 +25,7 @@ rome.setStyle(new Style({
   image: new Icon({
     color: '#8959A8',
     crossOrigin: 'anonymous',
-    src: 'data/dot.png'
+    src: 'data/square.svg'
   })
 }));
 
@@ -56,7 +56,7 @@ const vectorLayer = new VectorLayer({
 
 const rasterLayer = new TileLayer({
   source: new TileJSON({
-    url: 'https://api.tiles.mapbox.com/v3/mapbox.geography-class.json?secure',
+    url: 'https://a.tiles.mapbox.com/v3/aj.1x1-degrees.json',
     crossOrigin: ''
   })
 });

examples/icon-sprite-webgl.html

@@ -13,5 +13,8 @@ docs: >
 
   The dataset contains around 80k points and can be found here: https://www.kaggle.com/NUFORC/ufo-sightings
 tags: "webgl, icon, sprite, point, ufo"
+cloak:
+  - key: pk.eyJ1IjoidHNjaGF1YiIsImEiOiJjaW5zYW5lNHkxMTNmdWttM3JyOHZtMmNtIn0.CDIBD8H-G2Gf-cPkIuWtRg
+    value: Your Mapbox access token from https://mapbox.com/ here
 ---
 <div id="map" class="map"></div>

examples/icon-sprite-webgl.js

@@ -1,14 +1,16 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
 import TileLayer from '../src/ol/layer/Tile.js';
-import TileJSON from '../src/ol/source/TileJSON';
-import Feature from '../src/ol/Feature';
-import Point from '../src/ol/geom/Point';
-import VectorLayer from '../src/ol/layer/Vector';
-import {Vector} from '../src/ol/source';
-import {fromLonLat} from '../src/ol/proj';
-import WebGLPointsLayerRenderer from '../src/ol/renderer/webgl/PointsLayer';
-import {lerp} from '../src/ol/math';
+import TileJSON from '../src/ol/source/TileJSON.js';
+import Feature from '../src/ol/Feature.js';
+import Point from '../src/ol/geom/Point.js';
+import VectorLayer from '../src/ol/layer/Vector.js';
+import {Vector} from '../src/ol/source.js';
+import {fromLonLat} from '../src/ol/proj.js';
+import WebGLPointsLayerRenderer from '../src/ol/renderer/webgl/PointsLayer.js';
+import {lerp} from '../src/ol/math.js';
+
+const key = 'pk.eyJ1IjoidHNjaGF1YiIsImEiOiJjaW5zYW5lNHkxMTNmdWttM3JyOHZtMmNtIn0.CDIBD8H-G2Gf-cPkIuWtRg';
 
 const vectorSource = new Vector({
   features: [],
@@ -105,7 +107,7 @@ new Map({
   layers: [
     new TileLayer({
       source: new TileJSON({
-        url: 'https://api.tiles.mapbox.com/v3/mapbox.world-dark.json?secure',
+        url: 'https://api.tiles.mapbox.com/v4/mapbox.world-dark.json?access_token=' + key,
         crossOrigin: 'anonymous'
       })
     }),

examples/icon.js

@@ -37,7 +37,7 @@ const vectorLayer = new VectorLayer({
 
 const rasterLayer = new TileLayer({
   source: new TileJSON({
-    url: 'https://api.tiles.mapbox.com/v3/mapbox.geography-class.json?secure',
+    url: 'https://a.tiles.mapbox.com/v3/aj.1x1-degrees.json',
     crossOrigin: ''
   })
 });

examples/mapbox-layer.html

@@ -3,13 +3,13 @@ layout: example.html
 title: Mapbox-gl Layer
 shortdesc: Example of a Mapbox-gl-js layer integration.
 docs: >
-  Show how to add a mapbox-gl-js layer in an openlayers map. **Note**: Make sure to get your own Mapbox API key when using this example. No map will be visible when the API key has expired.
-tags: "simple, mapbox, vector, tiles"
+  Show how to add a mapbox-gl-js layer in an openlayers map. **Note**: Make sure to get your own API key at https://www.maptiler.com/cloud/ when using this example. No map will be visible when the API key has expired.
+tags: "simple, mapbox, vector, tiles, maptiler"
 resources:
   - https://unpkg.com/mapbox-gl@0.54.0/dist/mapbox-gl.js
   - https://unpkg.com/mapbox-gl@0.54.0/dist/mapbox-gl.css
 cloak:
   - key: ER67WIiPdCQvhgsUjoWK
-    value: Your Mapbox access token from https://mapbox.com/ here
+    value: Get your own API key at https://www.maptiler.com/cloud/
 ---
 <div id="map" class="map"></div>

examples/mapbox-layer.js

@@ -1,12 +1,68 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
-import Layer from '../src/ol/layer/Layer';
-import {toLonLat} from '../src/ol/proj';
+import Layer from '../src/ol/layer/Layer.js';
+import {toLonLat, fromLonLat} from '../src/ol/proj.js';
 import {Stroke, Style} from '../src/ol/style.js';
 import VectorLayer from '../src/ol/layer/Vector.js';
 import VectorSource from '../src/ol/source/Vector.js';
 import GeoJSON from '../src/ol/format/GeoJSON.js';
 
+const center = [-98.8, 37.9];
+const key = 'ER67WIiPdCQvhgsUjoWK';
+
+const mbMap = new mapboxgl.Map({
+  style: 'https://api.maptiler.com/maps/bright/style.json?key=' + key,
+  attributionControl: false,
+  boxZoom: false,
+  center: center,
+  container: 'map',
+  doubleClickZoom: false,
+  dragPan: false,
+  dragRotate: false,
+  interactive: false,
+  keyboard: false,
+  pitchWithRotate: false,
+  scrollZoom: false,
+  touchZoomRotate: false
+});
+
+const mbLayer = new Layer({
+  render: function(frameState) {
+    const canvas = mbMap.getCanvas();
+    const viewState = frameState.viewState;
+
+    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 = viewState.rotation;
+    if (rotation) {
+      mbMap.rotateTo(-rotation * 180 / Math.PI, {
+        animate: false
+      });
+    }
+    mbMap.jumpTo({
+      center: toLonLat(viewState.center),
+      zoom: viewState.zoom - 1,
+      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;
+  }
+});
+
 const style = new Style({
   stroke: new Stroke({
     color: '#319FD3',
@@ -25,80 +81,8 @@ const vectorLayer = new VectorLayer({
 const map = new Map({
   target: 'map',
   view: new View({
-    center: [-10997148, 4569099],
-    zoom: 4,
-    minZoom: 1,
-    extent: [-Infinity, -20048966.10, Infinity, 20048966.10],
-    smoothExtentConstraint: false,
-    smoothResolutionConstraint: false
-  })
+    center: fromLonLat(center),
+    zoom: 4
+  }),
+  layers: [mbLayer, vectorLayer]
 });
-
-
-// init Mapbox object
-
-const view = map.getView();
-const center = toLonLat(view.getCenter(), view.getProjection());
-const key = 'ER67WIiPdCQvhgsUjoWK';
-
-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);
-map.addLayer(vectorLayer);

examples/mapbox-style.html

@@ -2,10 +2,10 @@
 layout: example-verbatim.html
 title: Vector tiles created from a Mapbox Style object
 shortdesc: Example of using ol-mapbox-style with tiles from tilehosting.com.
-tags: "vector tiles, mapbox style, ol-mapbox-style"
+tags: "vector tiles, mapbox style, ol-mapbox-style, maptiler"
 cloak:
-  - key: lirfd6Fegsjkvs0lshxe
-    value: Your API key from http://tilehosting.com/ here
+  - key: ER67WIiPdCQvhgsUjoWK
+    value: Get your own API key at https://www.maptiler.com/cloud/
 ---
 <!doctype html>
 <html lang="en">

examples/mapbox-style.js

@@ -1,3 +1,3 @@
 import apply from 'ol-mapbox-style';
 
-apply('map', 'https://maps.tilehosting.com/styles/topo/style.json?key=ER67WIiPdCQvhgsUjoWK');
+apply('map', 'https://api.maptiler.com/maps/topo/style.json?key=ER67WIiPdCQvhgsUjoWK');

examples/mapguide-untiled.js

@@ -3,9 +3,9 @@ import View from '../src/ol/View.js';
 import ImageLayer from '../src/ol/layer/Image.js';
 import ImageMapGuide from '../src/ol/source/ImageMapGuide.js';
 
-const mdf = 'Library://Public/Samples/Sheboygan/Maps/Sheboygan.MapDefinition';
+const mdf = 'Library://Samples/Sheboygan/Maps/Sheboygan.MapDefinition';
 const agentUrl =
-    'http://www.buoyshark.com/mapguide/mapagent/mapagent.fcgi?';
+    'http://138.197.230.93:8008/mapguide/mapagent/mapagent.fcgi?';
 const bounds = [
   -87.865114442365922,
   43.665065564837931,
@@ -24,8 +24,9 @@ const map = new Map({
         params: {
           MAPDEFINITION: mdf,
           FORMAT: 'PNG',
-          USERNAME: 'OpenLayers',
-          PASSWORD: 'OpenLayers'
+          VERSION: '3.0.0',
+          USERNAME: 'OLGuest',
+          PASSWORD: 'olguest'
         },
         ratio: 2
       })

examples/popup.html

@@ -7,6 +7,9 @@ docs: >
     Click on the map to get a popup.  The popup is composed of a few basic elements: a container, a close button, and a place for the content.  To anchor the popup to the map, an <code>ol/Overlay</code> is created with the popup container.  A listener is registered for the map's <code>click</code> event to display the popup, and another listener is set as the <code>click</code> handler for the close button to hide the popup.
   </p>
 tags: "overlay, popup"
+cloak:
+  - key: pk.eyJ1IjoidHNjaGF1YiIsImEiOiJjaW5zYW5lNHkxMTNmdWttM3JyOHZtMmNtIn0.CDIBD8H-G2Gf-cPkIuWtRg
+    value: Your Mapbox access token from https://mapbox.com/ here
 ---
 <div id="map" class="map"></div>
 <div id="popup" class="ol-popup">

examples/popup.js

@@ -6,6 +6,7 @@ import TileLayer from '../src/ol/layer/Tile.js';
 import {toLonLat} from '../src/ol/proj.js';
 import TileJSON from '../src/ol/source/TileJSON.js';
 
+const key = 'pk.eyJ1IjoidHNjaGF1YiIsImEiOiJjaW5zYW5lNHkxMTNmdWttM3JyOHZtMmNtIn0.CDIBD8H-G2Gf-cPkIuWtRg';
 
 /**
  * Elements that make up the popup.
@@ -45,7 +46,7 @@ const map = new Map({
   layers: [
     new TileLayer({
       source: new TileJSON({
-        url: 'https://api.tiles.mapbox.com/v3/mapbox.natural-earth-hypso-bathy.json?secure',
+        url: 'https://api.tiles.mapbox.com/v4/mapbox.natural-earth-hypso-bathy.json?access_token=' + key,
         crossOrigin: 'anonymous'
       })
     })

examples/tilejson.js

@@ -8,7 +8,7 @@ const map = new Map({
   layers: [
     new TileLayer({
       source: new TileJSON({
-        url: 'https://api.tiles.mapbox.com/v3/mapbox.geography-class.json?secure',
+        url: 'https://a.tiles.mapbox.com/v3/aj.1x1-degrees.json',
         crossOrigin: 'anonymous'
       })
     })

examples/utfgrid.html

@@ -4,7 +4,7 @@ title: UTFGrid
 shortdesc: This example shows how to read data from a UTFGrid source.
 docs: >
   <p>Point to a country to see its name and flag.</p>
-  Tiles made with [TileMill](http://tilemill.com). Hosting on MapBox.com or with open-source [TileServer](https://github.com/klokantech/tileserver-php/).
+  Tiles made with <a href="http://tilemill.com">TileMill</a>. Hosting on <a href="mapbox.com">mapbox.com</a> or with open-source <a href="https://github.com/klokantech/tileserver-php/">TileServer</a>.
 tags: "utfgrid, tilejson"
 cloak:
   - key: pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q

examples/webpack/config.js

@@ -19,16 +19,25 @@ module.exports = {
   context: src,
   target: 'web',
   entry: entry,
+  stats: 'minimal',
   module: {
     rules: [{
+      test: /\.js$/,
       use: {
         loader: 'buble-loader'
       },
-      test: /\.js$/,
       include: [
         path.join(__dirname, '..', '..', 'src'),
         path.join(__dirname, '..')
       ]
+    }, {
+      test: /\.js$/,
+      use: {
+        loader: path.join(__dirname, './worker-loader.js')
+      },
+      include: [
+        path.join(__dirname, '../../src/ol/worker')
+      ]
     }]
   },
   optimization: {

examples/webpack/worker-loader.js

@@ -0,0 +1,17 @@
+const build = require('../../tasks/serialize-workers').build;
+
+function loader() {
+  const callback = this.async();
+  const minify = this.mode === 'production';
+
+  build(this.resource, {minify})
+    .then(chunk => {
+      for (const filePath in chunk.modules) {
+        this.addDependency(filePath);
+      }
+      callback(null, chunk.code);
+    })
+    .catch(callback);
+}
+
+module.exports = loader;

examples/worker.html

@@ -0,0 +1,10 @@
+---
+layout: example.html
+title: Worker
+shortdesc: This example should be deleted.
+docs: >
+  When you move the map, a message is sent to a worker.  In response, the woker sends a
+  message back with the version identifier.
+tags: "worker"
+---
+<div id="map" class="map"></div>

examples/worker.js

@@ -0,0 +1,35 @@
+/* eslint-disable no-console */
+
+import Map from '../src/ol/Map.js';
+import View from '../src/ol/View.js';
+import TileLayer from '../src/ol/layer/Tile.js';
+import OSM from '../src/ol/source/OSM.js';
+import {create as createVersionWorker} from '../src/ol/worker/version.js';
+
+
+const map = new Map({
+  layers: [
+    new TileLayer({
+      source: new OSM()
+    })
+  ],
+  target: 'map',
+  view: new View({
+    center: [0, 0],
+    zoom: 2
+  })
+});
+
+const worker = createVersionWorker();
+worker.addEventListener('error', function(error) {
+  console.error('worker error', error);
+});
+
+worker.addEventListener('message', function(event) {
+  console.log('message from worker:', event.data);
+});
+
+map.on('moveend', function(event) {
+  const state = event.frameState.viewState;
+  worker.postMessage({zoom: state.zoom, center: state.center});
+});

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ol",
-  "version": "6.0.0-beta.8",
+  "version": "6.0.0-beta.10",
   "description": "OpenLayers mapping library",
   "keywords": [
     "map",
@@ -22,7 +22,7 @@
     "build-index": "npm run build-package && node tasks/generate-index",
     "build-legacy": "shx rm -rf build && npm run build-index && webpack --config config/webpack-config-legacy-build.js && cleancss --source-map src/ol/ol.css -o build/legacy/ol.css",
     "copy-css": "shx cp src/ol/ol.css build/ol/ol.css",
-    "transpile": "shx rm -rf build/ol && shx mkdir -p build/ol && shx cp -rf src/ol build/ol/src && tsc --project config/tsconfig-build.json",
+    "transpile": "shx rm -rf build/ol && shx mkdir -p build/ol && shx cp -rf src/ol build/ol/src && node tasks/serialize-workers && tsc --project config/tsconfig-build.json",
     "typecheck": "tsc --pretty",
     "apidoc": "jsdoc -R config/jsdoc/api/index.md -c config/jsdoc/api/conf.json -P package.json -d build/apidoc"
   },
@@ -38,16 +38,15 @@
   "dependencies": {
     "pbf": "3.2.0",
     "pixelworks": "1.1.0",
-    "rbush": "2.0.2"
+    "rbush": "^3.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.4.0",
-    "@babel/preset-env": "^7.4.2",
+    "@babel/preset-env": "^7.4.4",
     "@openlayers/eslint-plugin": "^4.0.0-beta.2",
     "@types/arcgis-rest-api": "^10.4.4",
     "@types/geojson": "^7946.0.7",
     "@types/pbf": "^3.0.1",
-    "@types/rbush": "^2.0.2",
     "@types/topojson-specification": "^1.0.1",
     "babel-loader": "^8.0.5",
     "buble": "^0.19.7",
@@ -55,9 +54,9 @@
     "chaikin-smooth": "^1.0.4",
     "clean-css-cli": "4.3.0",
     "copy-webpack-plugin": "^5.0.3",
-    "coveralls": "3.0.3",
-    "eslint": "^5.16.0",
-    "eslint-config-openlayers": "^11.0.0",
+    "coveralls": "3.0.4",
+    "eslint": "^6.0.0",
+    "eslint-config-openlayers": "^12.0.0",
     "expect.js": "0.3.1",
     "front-matter": "^3.0.2",
     "fs-extra": "^8.0.0",
@@ -69,7 +68,7 @@
     "istanbul-instrumenter-loader": "^3.0.1",
     "jquery": "3.4.1",
     "jsdoc": "3.6.2",
-    "jsdoc-plugin-typescript": "^2.0.0",
+    "jsdoc-plugin-typescript": "^2.0.1",
     "karma": "^4.1.0",
     "karma-chrome-launcher": "2.2.0",
     "karma-coverage": "^1.1.2",
@@ -81,11 +80,16 @@
     "loglevelnext": "^3.0.1",
     "marked": "0.6.2",
     "mocha": "6.1.4",
-    "ol-mapbox-style": "^5.0.0-beta.1",
-    "pixelmatch": "^4.0.2",
+    "ol-mapbox-style": "^5.0.0-beta.2",
+    "pixelmatch": "^5.0.0",
     "pngjs": "^3.4.0",
     "proj4": "2.5.0",
-    "puppeteer": "~1.16.0",
+    "puppeteer": "~1.18.0",
+    "rollup": "^1.12.0",
+    "rollup-plugin-babel": "^4.3.2",
+    "rollup-plugin-commonjs": "^10.0.0",
+    "rollup-plugin-node-resolve": "^5.0.0",
+    "rollup-plugin-terser": "^5.0.0",
     "serve-static": "^1.14.0",
     "shx": "^0.3.2",
     "sinon": "^7.3.2",
@@ -93,7 +97,7 @@
     "typescript": "^3.4.5",
     "url-polyfill": "^1.1.5",
     "walk": "^2.3.9",
-    "webpack": "4.31.0",
+    "webpack": "4.35.0",
     "webpack-cli": "^3.3.2",
     "webpack-dev-middleware": "^3.6.2",
     "webpack-dev-server": "^3.3.1",

rendering/cases/heatmap-layer/main.js

@@ -1,10 +1,10 @@
 import Map from '../../../src/ol/Map.js';
 import View from '../../../src/ol/View.js';
 import TileLayer from '../../../src/ol/layer/Tile.js';
-import XYZ from '../../../src/ol/source/XYZ';
-import {Heatmap as HeatmapLayer} from '../../../src/ol/layer';
-import VectorSource from '../../../src/ol/source/Vector';
-import KML from '../../../src/ol/format/KML';
+import XYZ from '../../../src/ol/source/XYZ.js';
+import {Heatmap as HeatmapLayer} from '../../../src/ol/layer.js';
+import VectorSource from '../../../src/ol/source/Vector.js';
+import KML from '../../../src/ol/format/KML.js';
 
 const vector = new HeatmapLayer({
   source: new VectorSource({

rendering/cases/layer-group/main.js

@@ -0,0 +1,30 @@
+import Map from '../../../src/ol/Map.js';
+import View from '../../../src/ol/View.js';
+import {Group as LayerGroup, Tile as TileLayer} from '../../../src/ol/layer.js';
+import XYZ from '../../../src/ol/source/XYZ.js';
+
+new Map({
+  target: 'map',
+  view: new View({
+    center: [0, 0],
+    zoom: 3
+  }),
+  layers: new LayerGroup({
+    opacity: 0.75,
+    layers: [
+      new TileLayer({
+        opacity: 0.25,
+        source: new XYZ({
+          url: '/data/tiles/satellite/{z}/{x}/{y}.jpg'
+        })
+      }),
+      new TileLayer({
+        source: new XYZ({
+          url: '/data/tiles/stamen-labels/{z}/{x}/{y}.png'
+        })
+      })
+    ]
+  })
+});
+
+render();

rendering/cases/layer-image/main.js

@@ -5,7 +5,7 @@ import {
   get as getProjection,
   transform,
   transformExtent
-} from '../../../src/ol/proj';
+} from '../../../src/ol/proj.js';
 import ImageLayer from '../../../src/ol/layer/Image.js';
 const center = transform([-122.416667, 37.783333], 'EPSG:4326', 'EPSG:3857');
 

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

@@ -5,9 +5,9 @@
 import Map from '../../../src/ol/Map.js';
 import View from '../../../src/ol/View.js';
 import TileLayer from '../../../src/ol/layer/Tile.js';
-import {fromLonLat} from '../../../src/ol/proj';
+import {fromLonLat} from '../../../src/ol/proj.js';
 import {transformExtent} from '../../../src/ol/proj.js';
-import XYZ from '../../../src/ol/source/XYZ';
+import XYZ from '../../../src/ol/source/XYZ.js';
 
 const center = fromLonLat([7, 50]);
 const extent = transformExtent([2, 47, 10, 53], 'EPSG:4326', 'EPSG:3857');

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

@@ -1,7 +1,7 @@
 import Map from '../../../src/ol/Map.js';
 import View from '../../../src/ol/View.js';
 import TileLayer from '../../../src/ol/layer/Tile.js';
-import XYZ from '../../../src/ol/source/XYZ';
+import XYZ from '../../../src/ol/source/XYZ.js';
 import {createXYZ} from '../../../src/ol/tilegrid.js';
 
 const center = [-10997148, 4569099];

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

@@ -1,8 +1,8 @@
 import Map from '../../../src/ol/Map.js';
 import View from '../../../src/ol/View.js';
 import TileLayer from '../../../src/ol/layer/Tile.js';
-import {fromLonLat} from '../../../src/ol/proj';
-import XYZ from '../../../src/ol/source/XYZ';
+import {fromLonLat} from '../../../src/ol/proj.js';
+import XYZ from '../../../src/ol/source/XYZ.js';
 
 const center = fromLonLat([8.6, 50.1]);
 

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

@@ -1,8 +1,8 @@
 import Map from '../../../src/ol/Map.js';
 import View from '../../../src/ol/View.js';
 import TileLayer from '../../../src/ol/layer/Tile.js';
-import {fromLonLat} from '../../../src/ol/proj';
-import XYZ from '../../../src/ol/source/XYZ';
+import {fromLonLat} from '../../../src/ol/proj.js';
+import XYZ from '../../../src/ol/source/XYZ.js';
 
 const center = fromLonLat([8.6, 50.1]);
 

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

@@ -1,8 +1,8 @@
 import Map from '../../../src/ol/Map.js';
 import View from '../../../src/ol/View.js';
 import TileLayer from '../../../src/ol/layer/Tile.js';
-import {fromLonLat} from '../../../src/ol/proj';
-import XYZ from '../../../src/ol/source/XYZ';
+import {fromLonLat} from '../../../src/ol/proj.js';
+import XYZ from '../../../src/ol/source/XYZ.js';
 
 const center = fromLonLat([8.6, 50.1]);
 

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

@@ -1,8 +1,8 @@
 import Map from '../../../src/ol/Map.js';
 import View from '../../../src/ol/View.js';
 import TileLayer from '../../../src/ol/layer/Tile.js';
-import {fromLonLat} from '../../../src/ol/proj';
-import XYZ from '../../../src/ol/source/XYZ';
+import {fromLonLat} from '../../../src/ol/proj.js';
+import XYZ from '../../../src/ol/source/XYZ.js';
 
 const center = fromLonLat([8.6, 50.1]);
 

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

@@ -42,7 +42,8 @@ const layer = new VectorLayer({
 const view = new View({
   center: [-9.5, 78],
   zoom: 2,
-  projection: 'EPSG:4326'
+  projection: 'EPSG:4326',
+  multiWorld: true
 });
 new Map({
   pixelRatio: 1,

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

@@ -1,9 +1,9 @@
 import Map from '../../../src/ol/Map.js';
 import View from '../../../src/ol/View.js';
-import VectorTileSource from '../../../src/ol/source/VectorTile';
-import MVT from '../../../src/ol/format/MVT';
-import {createXYZ} from '../../../src/ol/tilegrid';
-import VectorTileLayer from '../../../src/ol/layer/VectorTile';
+import VectorTileSource from '../../../src/ol/source/VectorTile.js';
+import MVT from '../../../src/ol/format/MVT.js';
+import {createXYZ} from '../../../src/ol/tilegrid.js';
+import VectorTileLayer from '../../../src/ol/layer/VectorTile.js';
 
 const map = new Map({
   pixelRatio: 2,

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

@@ -1,16 +1,16 @@
 import Map from '../../../src/ol/Map.js';
 import View from '../../../src/ol/View.js';
-import VectorTileSource from '../../../src/ol/source/VectorTile';
-import MVT from '../../../src/ol/format/MVT';
-import {createXYZ} from '../../../src/ol/tilegrid';
-import VectorTileLayer from '../../../src/ol/layer/VectorTile';
-import VectorSource from '../../../src/ol/source/Vector';
-import Feature from '../../../src/ol/Feature';
-import Point from '../../../src/ol/geom/Point';
-import VectorLayer from '../../../src/ol/layer/Vector';
-import Style from '../../../src/ol/style/Style';
-import CircleStyle from '../../../src/ol/style/Circle';
-import Fill from '../../../src/ol/style/Fill';
+import VectorTileSource from '../../../src/ol/source/VectorTile.js';
+import MVT from '../../../src/ol/format/MVT.js';
+import {createXYZ} from '../../../src/ol/tilegrid.js';
+import VectorTileLayer from '../../../src/ol/layer/VectorTile.js';
+import VectorSource from '../../../src/ol/source/Vector.js';
+import Feature from '../../../src/ol/Feature.js';
+import Point from '../../../src/ol/geom/Point.js';
+import VectorLayer from '../../../src/ol/layer/Vector.js';
+import Style from '../../../src/ol/style/Style.js';
+import CircleStyle from '../../../src/ol/style/Circle.js';
+import Fill from '../../../src/ol/style/Fill.js';
 
 const vectorSource = new VectorSource({
   features: [

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

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

rendering/cases/layer-vectortile-simple/main.js

@@ -1,9 +1,9 @@
 import Map from '../../../src/ol/Map.js';
 import View from '../../../src/ol/View.js';
-import VectorTileSource from '../../../src/ol/source/VectorTile';
-import MVT from '../../../src/ol/format/MVT';
-import {createXYZ} from '../../../src/ol/tilegrid';
-import VectorTileLayer from '../../../src/ol/layer/VectorTile';
+import VectorTileSource from '../../../src/ol/source/VectorTile.js';
+import MVT from '../../../src/ol/format/MVT.js';
+import {createXYZ} from '../../../src/ol/tilegrid.js';
+import VectorTileLayer from '../../../src/ol/layer/VectorTile.js';
 
 new Map({
   layers: [

rendering/cases/multiple-layers/main.js

@@ -9,12 +9,6 @@ import Point from '../../../src/ol/geom/Point.js';
 
 const map = new Map({
   layers: [
-    new TileLayer({
-      source: new XYZ({
-        url: '/data/tiles/satellite/{z}/{x}/{y}.jpg',
-        maxZoom: 3
-      })
-    }),
     new VectorLayer({
       zIndex: 1,
       style: new Style({
@@ -27,6 +21,12 @@ const map = new Map({
         url: '/data/countries.json',
         format: new GeoJSON()
       })
+    }),
+    new TileLayer({
+      source: new XYZ({
+        url: '/data/tiles/satellite/{z}/{x}/{y}.jpg',
+        maxZoom: 3
+      })
     })
   ],
   target: 'map',

rendering/cases/webgl-points/main.js

@@ -1,11 +1,11 @@
 import Map from '../../../src/ol/Map.js';
 import View from '../../../src/ol/View.js';
 import TileLayer from '../../../src/ol/layer/Tile.js';
-import XYZ from '../../../src/ol/source/XYZ';
-import {Vector as VectorLayer} from '../../../src/ol/layer';
-import VectorSource from '../../../src/ol/source/Vector';
-import KML from '../../../src/ol/format/KML';
-import WebGLPointsLayerRenderer from '../../../src/ol/renderer/webgl/PointsLayer';
+import XYZ from '../../../src/ol/source/XYZ.js';
+import {Vector as VectorLayer} from '../../../src/ol/layer.js';
+import VectorSource from '../../../src/ol/source/Vector.js';
+import KML from '../../../src/ol/format/KML.js';
+import WebGLPointsLayerRenderer from '../../../src/ol/renderer/webgl/PointsLayer.js';
 
 class CustomLayer extends VectorLayer {
   createRenderer() {

rendering/webpack.config.js

@@ -22,5 +22,16 @@ module.exports = {
   context: __dirname,
   target: 'web',
   entry: entry,
-  devtool: 'source-map'
+  devtool: 'source-map',
+  module: {
+    rules: [{
+      test: /\.js$/,
+      use: {
+        loader: path.join(__dirname, '../examples/webpack/worker-loader.js')
+      },
+      include: [
+        path.join(__dirname, '../src/ol/worker')
+      ]
+    }]
+  }
 };

src/ol/Feature.js

@@ -57,10 +57,11 @@ import BaseObject, {getChangeEventType} from './Object.js';
  * ```
  *
  * @api
+ * @template {import("./geom/Geometry.js").default} Geometry
  */
 class Feature extends BaseObject {
   /**
-   * @param {import("./geom/Geometry.js").default|Object<string, *>=} opt_geometryOrProperties
+   * @param {Geometry|Object<string, *>=} opt_geometryOrProperties
    *     You may pass a Geometry object directly, or an object literal containing
    *     properties. If you pass an object literal, you may include a Geometry
    *     associated with a `geometry` key.
@@ -106,7 +107,7 @@ class Feature extends BaseObject {
 
     if (opt_geometryOrProperties) {
       if (typeof /** @type {?} */ (opt_geometryOrProperties).getSimplifiedGeometry === 'function') {
-        const geometry = /** @type {import("./geom/Geometry.js").default} */ (opt_geometryOrProperties);
+        const geometry = /** @type {Geometry} */ (opt_geometryOrProperties);
         this.setGeometry(geometry);
       } else {
         /** @type {Object<string, *>} */
@@ -140,13 +141,13 @@ class Feature extends BaseObject {
    * Get the feature's default geometry.  A feature may have any number of named
    * geometries.  The "default" geometry (the one that is rendered by default) is
    * set when calling {@link module:ol/Feature~Feature#setGeometry}.
-   * @return {import("./geom/Geometry.js").default|undefined} The default geometry for the feature.
+   * @return {Geometry|undefined} The default geometry for the feature.
    * @api
    * @observable
    */
   getGeometry() {
     return (
-      /** @type {import("./geom/Geometry.js").default|undefined} */ (this.get(this.geometryName_))
+      /** @type {Geometry|undefined} */ (this.get(this.geometryName_))
     );
   }
 
@@ -218,7 +219,7 @@ class Feature extends BaseObject {
   /**
    * Set the default geometry for the feature.  This will update the property
    * with the name returned by {@link module:ol/Feature~Feature#getGeometryName}.
-   * @param {import("./geom/Geometry.js").default|undefined} geometry The new geometry.
+   * @param {Geometry|undefined} geometry The new geometry.
    * @api
    * @observable
    */

src/ol/Geolocation.js

@@ -6,7 +6,6 @@ import {listen} from './events.js';
 import Event from './events/Event.js';
 import EventType from './events/EventType.js';
 import {circular as circularPolygon} from './geom/Polygon.js';
-import {GEOLOCATION} from './has.js';
 import {toRadians} from './math.js';
 import {get as getProjection, getTransformFromProjections, identityTransform} from './proj.js';
 
@@ -83,7 +82,7 @@ class GeolocationError extends Event {
  *       window.console.log(geolocation.getPosition());
  *     });
  *
- * @fires error
+ * @fires module:ol/events/Event~Event#event:error
  * @api
  */
 class Geolocation extends BaseObject {
@@ -160,7 +159,7 @@ class Geolocation extends BaseObject {
    * @private
    */
   handleTrackingChanged_() {
-    if (GEOLOCATION) {
+    if ('geolocation' in navigator) {
       const tracking = this.getTracking();
       if (tracking && this.watchId_ === undefined) {
         this.watchId_ = navigator.geolocation.watchPosition(
@@ -204,12 +203,6 @@ class Geolocation extends BaseObject {
     this.changed();
   }
 
-  /**
-   * Triggered when the Geolocation returns an error.
-   * @event error
-   * @api
-   */
-
   /**
    * @private
    * @param {PositionError} error error object.

src/ol/Image.js

@@ -6,6 +6,7 @@ import ImageState from './ImageState.js';
 import {listenOnce, unlistenByKey} from './events.js';
 import EventType from './events/EventType.js';
 import {getHeight} from './extent.js';
+import {IMAGE_DECODE} from './has.js';
 
 
 /**
@@ -58,9 +59,9 @@ class ImageWrapper extends ImageBase {
 
     /**
      * @private
-     * @type {Array<import("./events.js").EventsKey>}
+     * @type {function():void}
      */
-    this.imageListenerKeys_ = null;
+    this.unlisten_ = null;
 
     /**
      * @protected
@@ -120,13 +121,12 @@ class ImageWrapper extends ImageBase {
     if (this.state == ImageState.IDLE || this.state == ImageState.ERROR) {
       this.state = ImageState.LOADING;
       this.changed();
-      this.imageListenerKeys_ = [
-        listenOnce(this.image_, EventType.ERROR,
-          this.handleImageError_, this),
-        listenOnce(this.image_, EventType.LOAD,
-          this.handleImageLoad_, this)
-      ];
       this.imageLoadFunction_(this, this.src_);
+      this.unlisten_ = listenImage(
+        this.image_,
+        this.handleImageLoad_.bind(this),
+        this.handleImageError_.bind(this)
+      );
     }
   }
 
@@ -143,9 +143,53 @@ class ImageWrapper extends ImageBase {
    * @private
    */
   unlistenImage_() {
-    this.imageListenerKeys_.forEach(unlistenByKey);
-    this.imageListenerKeys_ = null;
+    if (this.unlisten_) {
+      this.unlisten_();
+      this.unlisten_ = null;
     }
+  }
+}
+
+/**
+ * @param {HTMLCanvasElement|HTMLImageElement|HTMLVideoElement} image Image element.
+ * @param {function():any} loadHandler Load callback function.
+ * @param {function():any} errorHandler Error callback function.
+ * @return {function():void} Callback to stop listening.
+ */
+export function listenImage(image, loadHandler, errorHandler) {
+  const img = /** @type {HTMLImageElement} */ (image);
+
+  if (IMAGE_DECODE) {
+    const promise = img.decode();
+    let listening = true;
+    const unlisten = function() {
+      listening = false;
+    };
+    promise.then(function() {
+      if (listening) {
+        loadHandler();
+      }
+    }).catch(function(error) {
+      if (listening) {
+        // FIXME: Unconditionally call errorHandler() when this bug is fixed upstream:
+        //        https://bugs.webkit.org/show_bug.cgi?id=198527
+        if (error.name === 'EncodingError' && error.message === 'Invalid image type.') {
+          loadHandler();
+        } else {
+          errorHandler();
+        }
+      }
+    });
+    return unlisten;
+  }
+
+  const listenerKeys = [
+    listenOnce(img, EventType.LOAD, loadHandler),
+    listenOnce(img, EventType.ERROR, errorHandler)
+  ];
+  return function unlisten() {
+    listenerKeys.forEach(unlistenByKey);
+  };
 }
 
 

src/ol/ImageTile.js

@@ -4,8 +4,7 @@
 import Tile from './Tile.js';
 import TileState from './TileState.js';
 import {createCanvasContext2D} from './dom.js';
-import {listenOnce, unlistenByKey} from './events.js';
-import EventType from './events/EventType.js';
+import {listenImage} from './Image.js';
 
 
 class ImageTile extends Tile {
@@ -47,9 +46,9 @@ class ImageTile extends Tile {
 
     /**
      * @private
-     * @type {Array<import("./events.js").EventsKey>}
+     * @type {function():void}
      */
-    this.imageListenerKeys_ = null;
+    this.unlisten_ = null;
 
     /**
      * @private
@@ -134,13 +133,12 @@ class ImageTile extends Tile {
     if (this.state == TileState.IDLE) {
       this.state = TileState.LOADING;
       this.changed();
-      this.imageListenerKeys_ = [
-        listenOnce(this.image_, EventType.ERROR,
-          this.handleImageError_, this),
-        listenOnce(this.image_, EventType.LOAD,
-          this.handleImageLoad_, this)
-      ];
       this.tileLoadFunction_(this, this.src_);
+      this.unlisten_ = listenImage(
+        this.image_,
+        this.handleImageLoad_.bind(this),
+        this.handleImageError_.bind(this)
+      );
     }
   }
 
@@ -150,8 +148,10 @@ class ImageTile extends Tile {
    * @private
    */
   unlistenImage_() {
-    this.imageListenerKeys_.forEach(unlistenByKey);
-    this.imageListenerKeys_ = null;
+    if (this.unlisten_) {
+      this.unlisten_();
+      this.unlisten_ = null;
+    }
   }
 }
 

src/ol/Map.js

@@ -2,7 +2,7 @@
  * @module ol/Map
  */
 import PluggableMap from './PluggableMap.js';
-import {defaults as defaultControls} from './control/util.js';
+import {defaults as defaultControls} from './control.js';
 import {defaults as defaultInteractions} from './interaction.js';
 import {assign} from './obj.js';
 import CompositeMapRenderer from './renderer/Composite.js';

src/ol/MapBrowserEventHandler.js

@@ -260,12 +260,6 @@ class MapBrowserEventHandler extends EventTarget {
         this.dragging_);
       this.dispatchEvent(newEvent);
     }
-
-    // Some native android browser triggers mousemove events during small period
-    // of time. See: https://code.google.com/p/android/issues/detail?id=5491 or
-    // https://code.google.com/p/android/issues/detail?id=19827
-    // ex: Galaxy Tab P3110 + Android 4.1.1
-    pointerEvent.preventDefault();
   }
 
   /**

src/ol/PluggableMap.js

@@ -22,7 +22,7 @@ import {listen, unlistenByKey, unlisten} from './events.js';
 import EventType from './events/EventType.js';
 import {createEmpty, clone, createOrUpdateEmpty, equals, getForViewAndSize, isEmpty} from './extent.js';
 import {TRUE} from './functions.js';
-import {DEVICE_PIXEL_RATIO, TOUCH} from './has.js';
+import {DEVICE_PIXEL_RATIO, IMAGE_DECODE} from './has.js';
 import LayerGroup from './layer/Group.js';
 import {hasArea} from './size.js';
 import {DROP} from './structs/PriorityQueue.js';
@@ -39,10 +39,11 @@ 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 {Array<DeclutterItems>} declutterItems
  * @property {import("./coordinate.js").Coordinate} focus
  * @property {number} index
  * @property {Array<import("./layer/Layer.js").State>} layerStatesArray
+ * @property {number} layerIndex
  * @property {import("./transform.js").Transform} pixelToCoordinateTransform
  * @property {Array<PostRenderFunction>} postRenderFunctions
  * @property {import("./size.js").Size} size
@@ -54,6 +55,13 @@ import {create as createTransform, apply as applyTransform} from './transform.js
  */
 
 
+/**
+ * @typedef {Object} DeclutterItems
+ * @property {Array<*>} items Declutter items of an executor.
+ * @property {number} opacity Layer opacity.
+ */
+
+
 /**
  * @typedef {function(PluggableMap, ?FrameState): any} PostRenderFunction
  */
@@ -222,7 +230,7 @@ class PluggableMap extends BaseObject {
      * @type {!HTMLElement}
      */
     this.viewport_ = document.createElement('div');
-    this.viewport_.className = 'ol-viewport' + (TOUCH ? ' ol-touch' : '');
+    this.viewport_.className = 'ol-viewport' + ('ontouchstart' in window ? ' ol-touch' : '');
     this.viewport_.style.position = 'relative';
     this.viewport_.style.overflow = 'hidden';
     this.viewport_.style.width = '100%';
@@ -293,6 +301,16 @@ class PluggableMap extends BaseObject {
      */
     this.interactions = optionsInternal.interactions || new Collection();
 
+    /**
+     * @type {import("./events/Target.js").default}
+     */
+    this.labelCache_ = null;
+
+    /**
+     * @type {import("./events.js").EventsKey}
+     */
+    this.labelCacheListenerKey_;
+
     /**
      * @type {Collection<import("./Overlay.js").default>}
      * @private
@@ -310,7 +328,7 @@ class PluggableMap extends BaseObject {
      * @type {import("./renderer/Map.js").default}
      * @private
      */
-    this.renderer_ = this.createRenderer();
+    this.renderer_ = null;
 
     /**
      * @type {function(Event): void|undefined}
@@ -511,10 +529,6 @@ class PluggableMap extends BaseObject {
       removeEventListener(EventType.RESIZE, this.handleResize_, false);
       this.handleResize_ = undefined;
     }
-    if (this.animationDelayKey_) {
-      cancelAnimationFrame(this.animationDelayKey_);
-      this.animationDelayKey_ = undefined;
-    }
     this.setTarget(null);
     super.disposeInternal();
   }
@@ -763,6 +777,21 @@ class PluggableMap extends BaseObject {
     return layers;
   }
 
+  /**
+   * @return {boolean} Layers have sources that are still loading.
+   */
+  getLoading() {
+    const layerStatesArray = this.getLayerGroup().getLayerStatesArray();
+    for (let i = 0, ii = layerStatesArray.length; i < ii; ++i) {
+      const layer = layerStatesArray[i].layer;
+      const source = /** @type {import("./layer/Layer.js").default} */ (layer).getSource();
+      if (source && source.loading) {
+        return true;
+      }
+    }
+    return false;
+  }
+
   /**
    * Get the pixel for a coordinate.  This takes a coordinate in the map view
    * projection and returns the corresponding pixel.
@@ -938,7 +967,7 @@ class PluggableMap extends BaseObject {
       if (frameState) {
         const hints = frameState.viewHints;
         if (hints[ViewHint.ANIMATING] || hints[ViewHint.INTERACTING]) {
-          const lowOnFrameBudget = Date.now() - frameState.time > 8;
+          const lowOnFrameBudget = !IMAGE_DECODE && Date.now() - frameState.time > 8;
           maxTotalLoading = lowOnFrameBudget ? 0 : 8;
           maxNewLoads = lowOnFrameBudget ? 0 : 2;
         }
@@ -950,7 +979,7 @@ class PluggableMap extends BaseObject {
     }
 
     if (frameState && this.hasListener(RenderEventType.RENDERCOMPLETE) && !frameState.animate &&
-        !this.tileQueue_.getTilesLoading() && !getLoading(this.getLayers().getArray())) {
+        !this.tileQueue_.getTilesLoading() && !this.getLoading()) {
       this.renderer_.dispatchRenderEvent(RenderEventType.RENDERCOMPLETE, frameState);
     }
 
@@ -994,7 +1023,14 @@ class PluggableMap extends BaseObject {
     }
 
     if (!targetElement) {
-      this.renderer_.removeLayerRenderers();
+      if (this.renderer_) {
+        this.renderer_.dispose();
+        this.renderer_ = null;
+      }
+      if (this.animationDelayKey_) {
+        cancelAnimationFrame(this.animationDelayKey_);
+        this.animationDelayKey_ = undefined;
+      }
       removeNode(this.viewport_);
       if (this.handleResize_ !== undefined) {
         removeEventListener(EventType.RESIZE, this.handleResize_, false);
@@ -1002,6 +1038,9 @@ class PluggableMap extends BaseObject {
       }
     } else {
       targetElement.appendChild(this.viewport_);
+      if (!this.renderer_) {
+        this.renderer_ = this.createRenderer();
+      }
 
       const keyboardEventTarget = !this.keyboardEventTarget_ ?
         targetElement : this.keyboardEventTarget_;
@@ -1012,7 +1051,7 @@ class PluggableMap extends BaseObject {
 
       if (!this.handleResize_) {
         this.handleResize_ = this.updateSize.bind(this);
-        addEventListener(EventType.RESIZE, this.handleResize_, false);
+        window.addEventListener(EventType.RESIZE, this.handleResize_, false);
       }
     }
 
@@ -1102,12 +1141,25 @@ class PluggableMap extends BaseObject {
     this.animationDelay_();
   }
 
+  /**
+   * Redraws all text after new fonts have loaded
+   */
+  redrawText() {
+    const layerStates = this.getLayerGroup().getLayerStatesArray();
+    for (let i = 0, ii = layerStates.length; i < ii; ++i) {
+      const layer = layerStates[i].layer;
+      if (layer.hasRenderer()) {
+        layer.getRenderer().handleFontsChanged();
+      }
+    }
+  }
+
   /**
    * Request a map rendering (at the next animation frame).
    * @api
    */
   render() {
-    if (this.animationDelayKey_ === undefined) {
+    if (this.renderer_ && this.animationDelayKey_ === undefined) {
       this.animationDelayKey_ = requestAnimationFrame(this.animationDelay_);
     }
   }
@@ -1173,13 +1225,14 @@ class PluggableMap extends BaseObject {
     if (size !== undefined && hasArea(size) && view && view.isDef()) {
       const viewHints = view.getHints(this.frameState_ ? this.frameState_.viewHints : undefined);
       viewState = view.getState(this.pixelRatio_);
-      frameState = /** @type {FrameState} */ ({
+      frameState = {
         animate: false,
         coordinateToPixelTransform: this.coordinateToPixelTransform_,
         declutterItems: previousFrameState ? previousFrameState.declutterItems : [],
         extent: extent,
         focus: this.focus_ ? this.focus_ : viewState.center,
         index: this.frameIndex_++,
+        layerIndex: 0,
         layerStatesArray: this.getLayerGroup().getLayerStatesArray(),
         pixelRatio: this.pixelRatio_,
         pixelToCoordinateTransform: this.pixelToCoordinateTransform_,
@@ -1192,7 +1245,7 @@ class PluggableMap extends BaseObject {
         viewState: viewState,
         viewHints: viewHints,
         wantedTiles: {}
-      });
+      };
     }
 
     if (frameState) {
@@ -1398,23 +1451,3 @@ function createOptionsInternal(options) {
 
 }
 export default PluggableMap;
-
-/**
- * @param  {Array<import("./layer/Base.js").default>} layers Layers.
- * @return {boolean} Layers have sources that are still loading.
- */
-function getLoading(layers) {
-  for (let i = 0, ii = layers.length; i < ii; ++i) {
-    const layer = layers[i];
-    if (typeof /** @type {?} */ (layer).getLayers === 'function') {
-      return getLoading(/** @type {LayerGroup} */ (layer).getLayers().getArray());
-    } else {
-      const source = /** @type {import("./layer/Layer.js").default} */ (
-        layer).getSource();
-      if (source && source.loading) {
-        return true;
-      }
-    }
-  }
-  return false;
-}

src/ol/View.js

@@ -21,9 +21,9 @@ import {clamp, modulo} from './math.js';
 import {assign} from './obj.js';
 import {createProjection, METERS_PER_UNIT} from './proj.js';
 import Units from './proj/Units.js';
-import {equals} from './coordinate';
-import {easeOut} from './easing';
-import {createMinMaxResolution} from './resolutionconstraint';
+import {equals} from './coordinate.js';
+import {easeOut} from './easing.js';
+import {createMinMaxResolution} from './resolutionconstraint.js';
 
 
 /**
@@ -1409,11 +1409,19 @@ function animationCallback(callback, returnValue) {
  */
 export function createCenterConstraint(options) {
   if (options.extent !== undefined) {
-    return createExtent(options.extent, options.constrainOnlyCenter,
-      options.smoothExtentConstraint !== undefined ? options.smoothExtentConstraint : true);
-  } else {
-    return centerNone;
+    const smooth = options.smoothExtentConstraint !== undefined ? options.smoothExtentConstraint : true;
+    return createExtent(options.extent, options.constrainOnlyCenter, smooth);
   }
+
+  const projection = createProjection(options.projection, 'EPSG:3857');
+  if (options.multiWorld !== true && projection.isGlobal()) {
+    const extent = projection.getExtent().slice();
+    extent[0] = -Infinity;
+    extent[2] = Infinity;
+    return createExtent(extent, false, false);
+  }
+
+  return centerNone;
 }
 
 

src/ol/control.js

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

src/ol/control/OverviewMap.js

@@ -1,8 +1,8 @@
 /**
  * @module ol/control/OverviewMap
  */
-import Collection from '../Collection.js';
-import Map from '../Map.js';
+import PluggableMap from '../PluggableMap.js';
+import CompositeMapRenderer from '../renderer/Composite.js';
 import MapEventType from '../MapEventType.js';
 import MapProperty from '../MapProperty.js';
 import {getChangeEventType} from '../Object.js';
@@ -35,6 +35,13 @@ const MAX_RATIO = 0.75;
 const MIN_RATIO = 0.1;
 
 
+class ControlledMap extends PluggableMap {
+  createRenderer() {
+    return new CompositeMapRenderer(this);
+  }
+}
+
+
 /**
  * @typedef {Object} Options
  * @property {string} [className='ol-overviewmap'] CSS class name.
@@ -44,8 +51,8 @@ const MIN_RATIO = 0.1;
  * @property {boolean} [collapsible=true] Whether the control can be collapsed or not.
  * @property {string|HTMLElement} [label='»'] Text label to use for the collapsed
  * overviewmap button. Instead of text, also an element (e.g. a `span` element) can be used.
- * @property {Array<import("../layer/Layer.js").default>|import("../Collection.js").default<import("../layer/Layer.js").default>} layers
- * Layers for the overview map (mandatory).
+ * @property {Array<import("../layer/Layer.js").default>|import("../Collection.js").default<import("../layer/Layer.js").default>} [layers]
+ * Layers for the overview map.
  * @property {function(import("../MapEvent.js").default)} [render] Function called when the control
  * should be re-rendered. This is called in a `requestAnimationFrame` callback.
  * @property {HTMLElement|string} [target] Specify a target if you want the control
@@ -143,24 +150,18 @@ class OverviewMap extends Control {
     this.ovmapDiv_.className = 'ol-overviewmap-map';
 
     /**
-     * @type {import("../Map.js").default}
+     * @type {ControlledMap}
      * @private
      */
-    this.ovmap_ = new Map({
-      controls: new Collection(),
-      interactions: new Collection(),
+    this.ovmap_ = new ControlledMap({
       view: options.view
     });
     const ovmap = this.ovmap_;
 
     if (options.layers) {
-      /** @type {Array<import("../layer/Layer.js").default>} */ (options.layers).forEach(
-        /**
-         * @param {import("../layer/Layer.js").default} layer Layer.
-         */
-        (function(layer) {
+      options.layers.forEach(function(layer) {
         ovmap.addLayer(layer);
-        }).bind(this));
+      });
     }
 
     const box = document.createElement('div');

src/ol/control/util.js

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

src/ol/events/EventType.js

@@ -14,6 +14,13 @@ export default {
    */
   CHANGE: 'change',
 
+  /**
+   * Generic error event. Triggered when an error occurs.
+   * @event module:ol/events/Event~Event#error
+   * @api
+   */
+  ERROR: 'error',
+
   CLEAR: 'clear',
   CONTEXTMENU: 'contextmenu',
   CLICK: 'click',
@@ -21,7 +28,6 @@ export default {
   DRAGENTER: 'dragenter',
   DRAGOVER: 'dragover',
   DROP: 'drop',
-  ERROR: 'error',
   KEYDOWN: 'keydown',
   KEYPRESS: 'keypress',
   LOAD: 'load',

src/ol/format/Feature.js

@@ -13,8 +13,10 @@ import {get as getProjection, equivalent as equivalentProjection, transformExten
  * the `dataProjection` of the format is assigned (where set). If the projection
  * can not be derived from the data and if no `dataProjection` is set for a format,
  * the features will not be reprojected.
- * @property {import("../extent.js").Extent} [extent] Tile extent of the tile being read. This is only used and
- * required for {@link module:ol/format/MVT}.
+ * @property {import("../extent.js").Extent} [extent] Tile extent in map units of the tile being read.
+ * This is only required when reading data with tile pixels as geometry units. When configured,
+ * a `dataProjection` with `TILE_PIXELS` as `units` and the tile's pixel extent as `extent` needs to be
+ * provided.
  * @property {import("../proj.js").ProjectionLike} [featureProjection] Projection of the feature geometries
  * created by the format reader. If not provided, features will be returned in the
  * `dataProjection`.
@@ -86,9 +88,14 @@ class FeatureFormat {
   getReadOptions(source, opt_options) {
     let options;
     if (opt_options) {
+      let dataProjection = opt_options.dataProjection ?
+        opt_options.dataProjection : this.readProjection(source);
+      if (opt_options.extent) {
+        dataProjection = getProjection(dataProjection);
+        dataProjection.setWorldExtent(opt_options.extent);
+      }
       options = {
-        dataProjection: opt_options.dataProjection ?
-          opt_options.dataProjection : this.readProjection(source),
+        dataProjection: dataProjection,
         featureProjection: opt_options.featureProjection
       };
     }

src/ol/format/KML.js

@@ -2684,13 +2684,6 @@ function writePlacemark(node, feature, objectStack) {
     return !filter[v];
   });
 
-  if (keys.length > 0) {
-    const sequence = makeSequence(properties, keys);
-    const namesAndValues = {names: keys, values: sequence};
-    pushSerializeAndPop(context, PLACEMARK_SERIALIZERS,
-      EXTENDEDDATA_NODE_FACTORY, [namesAndValues], objectStack);
-  }
-
   const styleFunction = feature.getStyleFunction();
   if (styleFunction) {
     // FIXME the styles returned by the style function are supposed to be
@@ -2713,6 +2706,13 @@ function writePlacemark(node, feature, objectStack) {
   pushSerializeAndPop(context, PLACEMARK_SERIALIZERS,
     OBJECT_PROPERTY_NODE_FACTORY, values, objectStack, orderedKeys);
 
+  if (keys.length > 0) {
+    const sequence = makeSequence(properties, keys);
+    const namesAndValues = {names: keys, values: sequence};
+    pushSerializeAndPop(context, PLACEMARK_SERIALIZERS,
+      EXTENDEDDATA_NODE_FACTORY, [namesAndValues], objectStack);
+  }
+
   // serialize geometry
   const options = /** @type {import("./Feature.js").WriteOptions} */ (objectStack[0]);
   let geometry = feature.getGeometry();

src/ol/geom/Geometry.js

@@ -174,9 +174,8 @@ class Geometry extends BaseObject {
 
   /**
    * Create a simplified version of this geometry.  For linestrings, this uses
-   * the the {@link
-   * https://en.wikipedia.org/wiki/Ramer-Douglas-Peucker_algorithm
-   * Douglas Peucker} algorithm.  For polygons, a quantization-based
+   * the [Douglas Peucker](https://en.wikipedia.org/wiki/Ramer-Douglas-Peucker_algorithm)
+   * algorithm.  For polygons, a quantization-based
    * simplification is used to preserve topology.
    * @param {number} tolerance The tolerance distance for simplification.
    * @return {Geometry} A new, simplified version of the original geometry.

src/ol/geom/flat/textpath.js

@@ -16,8 +16,8 @@ import {lerp} from '../../math.js';
  * @param {function(string, string, Object<string, number>):number} measureAndCacheTextWidth Measure and cache text width.
  * @param {string} font The font.
  * @param {Object<string, number>} cache A cache of measured widths.
- * @return {Array<Array<*>>} The result array of null if `maxAngle` was
- * exceeded. Entries of the array are x, y, anchorX, angle, chunk.
+ * @return {Array<Array<*>>} The result array (or null if `maxAngle` was
+ * exceeded). Entries of the array are x, y, anchorX, angle, chunk.
  */
 export function drawTextOnPath(
   flatCoordinates, offset, end, stride, text, startM, maxAngle, scale, measureAndCacheTextWidth, font, cache) {
@@ -35,16 +35,13 @@ export function drawTextOnPath(
   let y2 = flatCoordinates[offset + 1];
   let segmentM = 0;
   let segmentLength = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
+  let angleChanged = false;
 
-  let chunk = '';
-  let chunkLength = 0;
-  let data, index, previousAngle;
+  let index, previousAngle;
   for (let i = 0; i < numChars; ++i) {
     index = reverse ? numChars - i - 1 : i;
-    const char = text.charAt(index);
-    chunk = reverse ? char + chunk : chunk + char;
-    const charLength = scale * measureAndCacheTextWidth(font, chunk, cache) - chunkLength;
-    chunkLength += charLength;
+    const char = text[index];
+    const charLength = scale * measureAndCacheTextWidth(font, char, cache);
     const charM = startM + charLength / 2;
     while (offset < end - stride && segmentM + segmentLength < charM) {
       x1 = x2;
@@ -62,33 +59,18 @@ export function drawTextOnPath(
     }
     if (previousAngle !== undefined) {
       let delta = angle - previousAngle;
+      angleChanged = angleChanged || delta !== 0;
       delta += (delta > Math.PI) ? -2 * Math.PI : (delta < -Math.PI) ? 2 * Math.PI : 0;
       if (Math.abs(delta) > maxAngle) {
         return null;
       }
     }
+    previousAngle = angle;
     const interpolate = segmentPos / segmentLength;
     const x = lerp(x1, x2, interpolate);
     const y = lerp(y1, y2, interpolate);
-    if (previousAngle == angle) {
-      if (reverse) {
-        data[0] = x;
-        data[1] = y;
-        data[2] = charLength / 2;
-      }
-      data[4] = chunk;
-    } else {
-      chunk = char;
-      chunkLength = charLength;
-      data = [x, y, charLength / 2, angle, chunk];
-      if (reverse) {
-        result.unshift(data);
-      } else {
-        result.push(data);
-      }
-      previousAngle = angle;
-    }
+    result[index] = [x, y, charLength / 2, angle, char];
     startM += charLength;
   }
-  return result;
+  return angleChanged ? result : [[result[0][0], result[0][1], result[0][2], result[0][3], text]];
 }

src/ol/has.js

@@ -39,39 +39,8 @@ export const MAC = ua.indexOf('macintosh') !== -1;
  */
 export const DEVICE_PIXEL_RATIO = window.devicePixelRatio || 1;
 
-
 /**
- * Is HTML5 geolocation supported in the current browser?
- * @const
- * @type {boolean}
- * @api
- */
-export const GEOLOCATION = 'geolocation' in navigator;
-
-
-/**
- * True if browser supports touch events.
- * @const
- * @type {boolean}
- * @api
- */
-export const TOUCH = 'ontouchstart' in window;
-
-
-/**
- * True if browser supports pointer events.
- * @const
+ * Image.prototype.decode() is supported.
  * @type {boolean}
  */
-export const POINTER = 'PointerEvent' in window;
-
-
-/**
- * True if browser supports ms pointer events (IE 10).
- * @const
- * @type {boolean}
- */
-export const MSPOINTER = !!(navigator.msPointerEnabled);
-
-
-export {HAS as WEBGL} from './webgl.js';
+export const IMAGE_DECODE = typeof Image !== 'undefined' && Image.prototype.decode;

src/ol/interaction/DragPan.js

@@ -3,7 +3,7 @@
  */
 import {scale as scaleCoordinate, rotate as rotateCoordinate} from '../coordinate.js';
 import {easeOut} from '../easing.js';
-import {noModifierKeys} from '../events/condition.js';
+import {noModifierKeys, primaryAction} from '../events/condition.js';
 import {FALSE} from '../functions.js';
 import PointerInteraction, {centroid as centroidFromPointers} from './Pointer.js';
 
@@ -12,7 +12,7 @@ import PointerInteraction, {centroid as centroidFromPointers} from './Pointer.js
  * @typedef {Object} Options
  * @property {import("../events/condition.js").Condition} [condition] A function that 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~noModifierKeys}.
+ * Default is {@link module:ol/events/condition~noModifierKeys} and {@link module:ol/events/condition~primaryAction}.
  * @property {import("../Kinetic.js").default} [kinetic] Kinetic inertia to apply to the pan.
  */
 
@@ -59,7 +59,7 @@ class DragPan extends PointerInteraction {
      * @private
      * @type {import("../events/condition.js").Condition}
      */
-    this.condition_ = options.condition ? options.condition : noModifierKeys;
+    this.condition_ = options.condition ? options.condition : defaultCondition;
 
     /**
      * @private
@@ -166,4 +166,12 @@ class DragPan extends PointerInteraction {
   }
 }
 
+/**
+ * @param {import("../MapBrowserPointerEvent.js").default} mapBrowserEvent Browser event.
+ * @return {boolean} Combined condition result.
+ */
+function defaultCondition(mapBrowserEvent) {
+  return noModifierKeys(mapBrowserEvent) && primaryAction(mapBrowserEvent);
+}
+
 export default DragPan;

src/ol/interaction/Draw.js

@@ -373,7 +373,7 @@ class Draw extends PointerInteraction {
 
     /**
      * Sketch point.
-     * @type {Feature}
+     * @type {Feature<Point>}
      * @private
      */
     this.sketchPoint_ = null;
@@ -387,7 +387,7 @@ class Draw extends PointerInteraction {
 
     /**
      * Sketch line. Used when drawing polygon.
-     * @type {Feature}
+     * @type {Feature<LineString>}
      * @private
      */
     this.sketchLine_ = null;
@@ -669,7 +669,7 @@ class Draw extends PointerInteraction {
       this.sketchPoint_ = new Feature(new Point(coordinates));
       this.updateSketchFeatures_();
     } else {
-      const sketchPointGeom = /** @type {Point} */ (this.sketchPoint_.getGeometry());
+      const sketchPointGeom = this.sketchPoint_.getGeometry();
       sketchPointGeom.setCoordinates(coordinates);
     }
   }
@@ -711,7 +711,7 @@ class Draw extends PointerInteraction {
    */
   modifyDrawing_(event) {
     let coordinate = event.coordinate;
-    const geometry = /** @type {import("../geom/SimpleGeometry.js").default} */ (this.sketchFeature_.getGeometry());
+    const geometry = this.sketchFeature_.getGeometry();
     let coordinates, last;
     if (this.mode_ === Mode.POINT) {
       last = this.sketchCoords_;
@@ -730,7 +730,7 @@ class Draw extends PointerInteraction {
     last[1] = coordinate[1];
     this.geometryFunction_(/** @type {!LineCoordType} */ (this.sketchCoords_), geometry);
     if (this.sketchPoint_) {
-      const sketchPointGeom = /** @type {Point} */ (this.sketchPoint_.getGeometry());
+      const sketchPointGeom = this.sketchPoint_.getGeometry();
       sketchPointGeom.setCoordinates(coordinate);
     }
     /** @type {LineString} */
@@ -740,8 +740,8 @@ class Draw extends PointerInteraction {
       if (!this.sketchLine_) {
         this.sketchLine_ = new Feature();
       }
-      const ring = /** @type {Polygon} */ (geometry).getLinearRing(0);
-      sketchLineGeom = /** @type {LineString} */ (this.sketchLine_.getGeometry());
+      const ring = geometry.getLinearRing(0);
+      sketchLineGeom = this.sketchLine_.getGeometry();
       if (!sketchLineGeom) {
         sketchLineGeom = new LineString(ring.getFlatCoordinates(), ring.getLayout());
         this.sketchLine_.setGeometry(sketchLineGeom);
@@ -751,7 +751,7 @@ class Draw extends PointerInteraction {
         sketchLineGeom.changed();
       }
     } else if (this.sketchLineCoords_) {
-      sketchLineGeom = /** @type {LineString} */ (this.sketchLine_.getGeometry());
+      sketchLineGeom = this.sketchLine_.getGeometry();
       sketchLineGeom.setCoordinates(this.sketchLineCoords_);
     }
     this.updateSketchFeatures_();
@@ -764,7 +764,7 @@ class Draw extends PointerInteraction {
    */
   addToDrawing_(event) {
     const coordinate = event.coordinate;
-    const geometry = /** @type {import("../geom/SimpleGeometry.js").default} */ (this.sketchFeature_.getGeometry());
+    const geometry = this.sketchFeature_.getGeometry();
     let done;
     let coordinates;
     if (this.mode_ === Mode.LINE_STRING) {
@@ -808,7 +808,7 @@ class Draw extends PointerInteraction {
     if (!this.sketchFeature_) {
       return;
     }
-    const geometry = /** @type {import("../geom/SimpleGeometry.js").default} */ (this.sketchFeature_.getGeometry());
+    const geometry = this.sketchFeature_.getGeometry();
     let coordinates;
     /** @type {LineString} */
     let sketchLineGeom;
@@ -822,7 +822,7 @@ class Draw extends PointerInteraction {
     } else if (this.mode_ === Mode.POLYGON) {
       coordinates = /** @type {PolyCoordType} */ (this.sketchCoords_)[0];
       coordinates.splice(-2, 1);
-      sketchLineGeom = /** @type {LineString} */ (this.sketchLine_.getGeometry());
+      sketchLineGeom = this.sketchLine_.getGeometry();
       sketchLineGeom.setCoordinates(coordinates);
       this.geometryFunction_(this.sketchCoords_, geometry);
     }
@@ -846,7 +846,7 @@ class Draw extends PointerInteraction {
       return;
     }
     let coordinates = this.sketchCoords_;
-    const geometry = /** @type {import("../geom/SimpleGeometry.js").default} */ (sketchFeature.getGeometry());
+    const geometry = sketchFeature.getGeometry();
     if (this.mode_ === Mode.LINE_STRING) {
       // remove the redundant last point
       coordinates.pop();
@@ -900,12 +900,12 @@ class Draw extends PointerInteraction {
    * Extend an existing geometry by adding additional points. This only works
    * on features with `LineString` geometries, where the interaction will
    * extend lines by adding points to the end of the coordinates array.
-   * @param {!Feature} feature Feature to be extended.
+   * @param {!Feature<LineString>} feature Feature to be extended.
    * @api
    */
   extend(feature) {
     const geometry = feature.getGeometry();
-    const lineString = /** @type {LineString} */ (geometry);
+    const lineString = geometry;
     this.sketchFeature_ = feature;
     this.sketchCoords_ = lineString.getCoordinates();
     const last = this.sketchCoords_[this.sketchCoords_.length - 1];

src/ol/interaction/Extent.js

@@ -126,7 +126,7 @@ class Extent extends PointerInteraction {
 
     /**
      * Feature for displaying the visible pointer
-     * @type {Feature}
+     * @type {Feature<Point>}
      * @private
      */
     this.vertexFeature_ = null;
@@ -265,7 +265,7 @@ class Extent extends PointerInteraction {
       this.vertexFeature_ = vertexFeature;
       this.vertexOverlay_.getSource().addFeature(vertexFeature);
     } else {
-      const geometry = /** @type {Point} */ (vertexFeature.getGeometry());
+      const geometry = vertexFeature.getGeometry();
       geometry.setCoordinates(vertex);
     }
     return vertexFeature;

src/ol/interaction/Modify.js

@@ -660,7 +660,7 @@ class Modify extends PointerInteraction {
       this.vertexFeature_ = vertexFeature;
       this.overlay_.getSource().addFeature(vertexFeature);
     } else {
-      const geometry = /** @type {Point} */ (vertexFeature.getGeometry());
+      const geometry = vertexFeature.getGeometry();
       geometry.setCoordinates(coordinates);
     }
     return vertexFeature;
@@ -785,7 +785,7 @@ class Modify extends PointerInteraction {
     const vertexFeature = this.vertexFeature_;
     if (vertexFeature) {
       const insertVertices = [];
-      const geometry = /** @type {Point} */ (vertexFeature.getGeometry());
+      const geometry = vertexFeature.getGeometry();
       const vertex = geometry.getCoordinates();
       const vertexExtent = boundingExtent([vertex]);
       const segmentDataMatches = this.rBush_.getInExtent(vertexExtent);

src/ol/interaction/Translate.js

@@ -35,6 +35,13 @@ const TranslateEventType = {
   TRANSLATEEND: 'translateend'
 };
 
+/**
+ * A function that takes an {@link module:ol/Feature} or
+ * {@link module:ol/render/Feature} and an
+ * {@link module:ol/layer/Layer} and returns `true` if the feature may be
+ * translated or `false` otherwise.
+ * @typedef {function(import("../Feature.js").FeatureLike, import("../layer/Layer.js").default):boolean} FilterFunction
+ */
 
 /**
  * @typedef {Object} Options
@@ -45,6 +52,10 @@ const TranslateEventType = {
  * function will be called for each layer in the map and should return
  * `true` for layers that you want to be translatable. If the option is
  * absent, all visible layers will be considered translatable.
+ * @property {FilterFunction} [filter] A function
+ * that takes an {@link module:ol/Feature} and an
+ * {@link module:ol/layer/Layer} and returns `true` if the feature may be
+ * translated or `false` otherwise.
  * @property {number} [hitTolerance=0] Hit-detection tolerance. Pixels inside the radius around the given position
  * will be checked for features.
  */
@@ -136,6 +147,12 @@ class Translate extends PointerInteraction {
      */
     this.layerFilter_ = layerFilter;
 
+    /**
+     * @private
+     * @type {FilterFunction}
+     */
+    this.filter_ = options.filter ? options.filter : TRUE;
+
     /**
      * @private
      * @type {number}
@@ -245,10 +262,12 @@ class Translate extends PointerInteraction {
    */
   featuresAtPixel_(pixel, map) {
     return map.forEachFeatureAtPixel(pixel,
-      function(feature) {
+      function(feature, layer) {
+        if (this.filter_(feature, layer)) {
           if (!this.features_ || includes(this.features_.getArray(), feature)) {
             return feature;
           }
+        }
       }.bind(this), {
         layerFilter: this.layerFilter_,
         hitTolerance: this.hitTolerance_

src/ol/layer/Base.js

@@ -83,6 +83,9 @@ class BaseLayer extends BaseObject {
   }
 
   /**
+   * This method is not meant to be called by layers or layer renderers because the state
+   * is incorrect if the layer is included in a layer group.
+   *
    * @param {boolean=} opt_managed Layer is managed.
    * @return {import("./Layer.js").State} Layer state.
    */
@@ -90,7 +93,8 @@ class BaseLayer extends BaseObject {
     /** @type {import("./Layer.js").State} */
     const state = this.state_ || /** @type {?} */ ({
       layer: this,
-      managed: opt_managed === undefined ? true : opt_managed
+      managed: opt_managed === undefined ? true : opt_managed,
+      hasOverlay: false
     });
     state.opacity = clamp(Math.round(this.getOpacity() * 100) / 100, 0, 1);
     state.sourceState = this.getSourceState();

src/ol/layer/BaseVector.js

@@ -72,8 +72,7 @@ class BaseVectorLayer extends Layer {
    * @param {Options=} opt_options Options.
    */
   constructor(opt_options) {
-    const options = opt_options ?
-      opt_options : /** @type {Options} */ ({});
+    const options = opt_options ? opt_options : {};
 
     const baseOptions = assign({}, options);
 

src/ol/layer/Graticule.js

@@ -3,27 +3,27 @@
  */
 import VectorLayer from './Vector.js';
 import {assign} from '../obj.js';
-import {degreesToStringHDMS} from '../coordinate';
-import Text from '../style/Text';
-import Fill from '../style/Fill';
-import Stroke from '../style/Stroke';
+import {degreesToStringHDMS} from '../coordinate.js';
+import Text from '../style/Text.js';
+import Fill from '../style/Fill.js';
+import Stroke from '../style/Stroke.js';
 import LineString from '../geom/LineString.js';
-import VectorSource from '../source/Vector';
+import VectorSource from '../source/Vector.js';
 import {
   equivalent as equivalentProjection,
   get as getProjection,
   getTransform,
   transformExtent
-} from '../proj';
-import {getCenter, intersects, equals, getIntersection, isEmpty} from '../extent';
-import {clamp} from '../math';
-import Style from '../style/Style';
-import Feature from '../Feature';
-import {bbox} from '../loadingstrategy';
-import {meridian, parallel} from '../geom/flat/geodesic';
-import GeometryLayout from '../geom/GeometryLayout';
-import Point from '../geom/Point';
-import Collection from '../Collection';
+} from '../proj.js';
+import {getCenter, intersects, equals, getIntersection, isEmpty} from '../extent.js';
+import {clamp} from '../math.js';
+import Style from '../style/Style.js';
+import Feature from '../Feature.js';
+import {bbox} from '../loadingstrategy.js';
+import {meridian, parallel} from '../geom/flat/geodesic.js';
+import GeometryLayout from '../geom/GeometryLayout.js';
+import Point from '../geom/Point.js';
+import Collection from '../Collection.js';
 
 
 /**

src/ol/layer/Heatmap.js

@@ -6,7 +6,7 @@ import {getChangeEventType} from '../Object.js';
 import {createCanvasContext2D} from '../dom.js';
 import VectorLayer from './Vector.js';
 import {assign} from '../obj.js';
-import WebGLPointsLayerRenderer from '../renderer/webgl/PointsLayer';
+import WebGLPointsLayerRenderer from '../renderer/webgl/PointsLayer.js';
 
 
 /**

src/ol/layer/Layer.js

@@ -45,6 +45,7 @@ import SourceState from '../source/State.js';
  * @property {SourceState} sourceState
  * @property {boolean} visible
  * @property {boolean} managed
+ * @property {boolean} hasOverlay Set by the renderer when an overlay for points and text is used.
  * @property {import("../extent.js").Extent} [extent]
  * @property {number} zIndex
  * @property {number} maxResolution
@@ -189,13 +190,15 @@ class Layer extends BaseLayer {
    * In charge to manage the rendering of the layer. One layer type is
    * bounded with one layer renderer.
    * @param {?import("../PluggableMap.js").FrameState} frameState Frame state.
+   * @param {HTMLElement} target Target which the renderer may (but need not) use
+   * for rendering its content.
    * @return {HTMLElement} The rendered element.
    */
-  render(frameState) {
+  render(frameState, target) {
     const layerRenderer = this.getRenderer();
-    const layerState = this.getLayerState();
-    if (layerRenderer.prepareFrame(frameState, layerState)) {
-      return layerRenderer.renderFrame(frameState, layerState);
+
+    if (layerRenderer.prepareFrame(frameState)) {
+      return layerRenderer.renderFrame(frameState, target);
     }
   }
 
@@ -254,6 +257,13 @@ class Layer extends BaseLayer {
     return this.renderer_;
   }
 
+  /**
+   * @return {boolean} The layer has a renderer.
+   */
+  hasRenderer() {
+    return !!this.renderer_;
+  }
+
   /**
    * Create a renderer for this layer.
    * @return {import("../renderer/Layer.js").default} A layer renderer.

src/ol/layer/Tile.js

@@ -5,11 +5,6 @@ import BaseTileLayer from './BaseTile.js';
 import CanvasTileLayerRenderer from '../renderer/canvas/TileLayer.js';
 
 
-/**
- * @typedef {import("./BaseTile.js").Options} Options
- */
-
-
 /**
  * @classdesc
  * For layer sources that provide pre-rendered, tiled images in grids that are
@@ -23,7 +18,7 @@ import CanvasTileLayerRenderer from '../renderer/canvas/TileLayer.js';
 class TileLayer extends BaseTileLayer {
 
   /**
-   * @param {Options=} opt_options Tile layer options.
+   * @param {import("./BaseTile.js").Options=} opt_options Tile layer options.
    */
   constructor(opt_options) {
     super(opt_options);

src/ol/layer/Vector.js

@@ -5,11 +5,6 @@ import BaseVectorLayer from './BaseVector.js';
 import CanvasVectorLayerRenderer from '../renderer/canvas/VectorLayer.js';
 
 
-/**
- * @typedef {import("./BaseVector.js").Options} Options
- */
-
-
 /**
  * @classdesc
  * Vector data that is rendered client-side.
@@ -22,7 +17,7 @@ import CanvasVectorLayerRenderer from '../renderer/canvas/VectorLayer.js';
  */
 class VectorLayer extends BaseVectorLayer {
   /**
-   * @param {Options=} opt_options Options.
+   * @param {import("./BaseVector.js").Options=} opt_options Options.
    */
   constructor(opt_options) {
     super(opt_options);

src/ol/layer/VectorImage.js

@@ -60,7 +60,7 @@ class VectorImageLayer extends BaseVectorLayer {
    * @param {Options=} opt_options Options.
    */
   constructor(opt_options) {
-    const options = opt_options ? opt_options : /** @type {Options} */ ({});
+    const options = opt_options ? opt_options : {};
 
     const baseOptions = assign({}, options);
     delete baseOptions.imageRatio;

src/ol/layer/VectorTile.js

@@ -86,7 +86,7 @@ class VectorTileLayer extends BaseVectorLayer {
     delete baseOptions.preload;
     delete baseOptions.useInterimTilesOnError;
 
-    super(/** @type {import("./Vector.js").Options} */ (baseOptions));
+    super(/** @type {import("./BaseVector.js").Options} */ (baseOptions));
 
     const renderMode = options.renderMode || VectorTileRenderType.HYBRID;
     assert(renderMode == undefined ||

src/ol/math.js

@@ -1,7 +1,6 @@
 /**
  * @module ol/math
  */
-import {assert} from './asserts.js';
 
 /**
  * Takes a number and clamps it to within the provided bounds.
@@ -43,16 +42,6 @@ export const cosh = (function() {
 }());
 
 
-/**
- * @param {number} x X.
- * @return {number} The smallest power of two greater than or equal to x.
- */
-export function roundUpToPowerOfTwo(x) {
-  assert(0 < x, 29); // `x` must be greater than `0`
-  return Math.pow(2, Math.ceil(Math.log(x) / Math.LN2));
-}
-
-
 /**
  * Returns the square of the closest distance between the point (x, y) and the
  * line segment (x1, y1) to (x2, y2).

src/ol/ol.css

@@ -63,10 +63,6 @@
   border: 1px solid black;
 }
 
-.ol-overlay-container {
-  will-change: left,right,top,bottom;
-}
-
 .ol-unsupported {
   display: none;
 }
@@ -127,11 +123,6 @@
   right: .5em;
   top: .5em;
 }
-@media print {
-  .ol-control {
-    display: none;
-  }
-}
 
 .ol-control button {
   display: block;

src/ol/pointer/PointerEventHandler.js

@@ -34,7 +34,6 @@
 
 import {listen, unlisten} from '../events.js';
 import EventTarget from '../events/Target.js';
-import {POINTER, MSPOINTER, TOUCH} from '../has.js';
 import PointerEventType from './EventType.js';
 import MouseSource, {prepareEvent as prepareMouseEvent} from './MouseSource.js';
 import MsSource from './MsSource.js';
@@ -124,15 +123,15 @@ class PointerEventHandler extends EventTarget {
    * that generate pointer events.
    */
   registerSources() {
-    if (POINTER) {
+    if ('PointerEvent' in window) {
       this.registerSource('native', new NativeSource(this));
-    } else if (MSPOINTER) {
+    } else if (window.navigator.msPointerEnabled) {
       this.registerSource('ms', new MsSource(this));
     } else {
       const mouseSource = new MouseSource(this);
       this.registerSource('mouse', mouseSource);
 
-      if (TOUCH) {
+      if ('ontouchstart' in window) {
         this.registerSource('touch', new TouchSource(this, mouseSource));
       }
     }

src/ol/proj.js

@@ -60,8 +60,8 @@ import {toEPSG4326, fromEPSG4326, PROJECTIONS as EPSG3857_PROJECTIONS} from './p
 import {PROJECTIONS as EPSG4326_PROJECTIONS} from './proj/epsg4326.js';
 import Projection from './proj/Projection.js';
 import Units, {METERS_PER_UNIT} from './proj/Units.js';
-import * as projections from './proj/projections.js';
 import {add as addTransformFunc, clear as clearTransformFuncs, get as getTransformFunc} from './proj/transforms.js';
+import {add as addProj, clear as clearProj, get as getProj} from './proj/projections.js';
 
 
 /**
@@ -133,7 +133,7 @@ export function identityTransform(input, opt_output, opt_dimension) {
  * @api
  */
 export function addProjection(projection) {
-  projections.add(projection.getCode(), projection);
+  addProj(projection.getCode(), projection);
   addTransformFunc(projection, projection, cloneTransform);
 }
 
@@ -157,7 +157,7 @@ export function addProjections(projections) {
  */
 export function get(projectionLike) {
   return typeof projectionLike === 'string' ?
-    projections.get(/** @type {string} */ (projectionLike)) :
+    getProj(/** @type {string} */ (projectionLike)) :
     (/** @type {Projection} */ (projectionLike) || null);
 }
 
@@ -271,7 +271,7 @@ export function addEquivalentTransforms(projections1, projections2, forwardTrans
  * Clear all cached projections and transforms.
  */
 export function clearAllProjections() {
-  projections.clear();
+  clearProj();
   clearTransformFuncs();
 }
 

src/ol/render.js

@@ -122,9 +122,10 @@ export function renderDeclutterItems(frameState, declutterTree) {
   }
   const items = frameState.declutterItems;
   for (let z = items.length - 1; z >= 0; --z) {
-    const zIndexItems = items[z];
+    const item = items[z];
+    const zIndexItems = item.items;
     for (let i = 0, ii = zIndexItems.length; i < ii; i += 3) {
-      declutterTree = zIndexItems[i].renderDeclutter(zIndexItems[i + 1], zIndexItems[i + 2], declutterTree);
+      declutterTree = zIndexItems[i].renderDeclutter(zIndexItems[i + 1], zIndexItems[i + 2], item.opacity, declutterTree);
     }
   }
   items.length = 0;

src/ol/render/Event.js

@@ -12,9 +12,8 @@ class RenderEvent extends Event {
    *     CSS pixels to rendered pixels.
    * @param {import("../PluggableMap.js").FrameState=} opt_frameState Frame state.
    * @param {?CanvasRenderingContext2D=} opt_context Context.
-   * @param {?import("../webgl/Helper.js").default=} opt_glContext WebGL Context.
    */
-  constructor(type, opt_inversePixelTransform, opt_frameState, opt_context, opt_glContext) {
+  constructor(type, opt_inversePixelTransform, opt_frameState, opt_context) {
 
     super(type);
 
@@ -41,14 +40,6 @@ class RenderEvent extends Event {
      */
     this.context = opt_context;
 
-    /**
-     * WebGL context. Only available when a WebGL renderer is used, null
-     * otherwise.
-     * @type {import("../webgl/Helper.js").default|null|undefined}
-     * @api
-     */
-    this.glContext = opt_glContext;
-
   }
 
 }

src/ol/render/canvas.js

@@ -403,7 +403,7 @@ export function drawImage(context,
 
   context.drawImage(image, originX, originY, w, h, x, y, w * scale, h * scale);
 
-  if (alpha) {
+  if (opacity != 1) {
     context.globalAlpha = alpha;
   }
   if (transform) {