Added missing Type component

.circleci/config.yml

@@ -50,3 +50,11 @@ jobs:
       - store_artifacts:
           path: build/apidoc
           destination: apidoc
+
+      - run:
+          name: Build Website
+          command: npm run build-site
+
+      - store_artifacts:
+          path: public
+          destination: website

.github/FUNDING.yml

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

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

.gitignore

@@ -2,3 +2,5 @@
 /coverage/
 /dist/
 node_modules/
+/.cache/
+/public/

changelog/upgrade-notes.md

@@ -4,19 +4,9 @@
 
 #### 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.
+If you were previously using this constant, you can check if `'geolocation'` is define in `navigator` instead.
 
 ```js
 if ('geolocation' in navigator) {

config/jsdoc/api-info/conf.json

@@ -0,0 +1,23 @@
+{
+  "opts": {
+      "recurse": true,
+      "template": "node_modules/jsdoc-json"
+  },
+  "tags": {
+      "allowUnknownTags": true
+  },
+  "source": {
+      "includePattern": "\\.js$",
+      "include": [
+        "src/ol"
+      ]
+    },
+  "plugins": [
+      "jsdoc-plugin-typescript",
+      "config/jsdoc/api-info/plugins/api",
+      "config/jsdoc/api-info/plugins/module"
+  ],
+  "typescript": {
+    "moduleRoot": "src"
+  }
+}

config/jsdoc/api-info/plugins/api.js

@@ -0,0 +1,15 @@
+
+/**
+ * Handle the api annotation.
+ * @param {Object} dictionary The tag dictionary.
+ */
+exports.defineTags = dictionary => {
+
+  dictionary.defineTag('api', {
+    onTagged: (doclet, tag) => {
+      doclet.api = true;
+    }
+  });
+
+};
+

config/jsdoc/api-info/plugins/module.js

@@ -0,0 +1,170 @@
+/**
+ * This plugin adds an `exportMap` property to @module doclets. Each export map
+ * is an object with properties named like the local identifier and values named
+ * like the exported identifier.
+ *
+ * For example, the code below
+ *
+ *     export {foo as bar};
+ *
+ * would be a map like `{foo: 'bar'}`.
+ *
+ * In the case of an export declaration with a source, the export identifier is
+ * prefixed by the source.  For example, this code
+ *
+ *     export {foo as bar} from 'ol/bam';
+ *
+ * would be a map like `{'ol/bam foo': 'bar'}`.
+ *
+ * If a default export is a literal or object expression, the local name will be
+ * an empty string.  For example
+ *
+ *     export default {foo: 'bar'};
+ *
+ * would be a map like `{'': 'default'}`.
+ */
+const assert = require('assert');
+const path = require('path');
+
+
+/**
+ * A lookup of export maps per source filepath.
+ */
+const exportMapLookup = {};
+
+function loc(filepath, node) {
+  return `${filepath}:${node.loc.start.line}`;
+}
+
+function nameFromChildIdentifier(filepath, node) {
+  assert.ok(node.id, `expected identifer in ${loc(filepath, node)}`);
+  assert.strictEqual(node.id.type, 'Identifier', `expected identifer in ${loc(filepath, node)}`);
+  return node.id.name;
+}
+
+function handleExportNamedDeclaration(filepath, node) {
+  if (!(filepath in exportMapLookup)) {
+    exportMapLookup[filepath] = {};
+  }
+  const exportMap = exportMapLookup[filepath];
+
+  const declaration = node.declaration;
+  if (declaration) {
+    // `export class Foo{}` or `export function foo() {}`
+    if (declaration.type === 'ClassDeclaration' || declaration.type === 'FunctionDeclaration') {
+      const name = nameFromChildIdentifier(filepath, declaration);
+      exportMap[name] = name;
+      return;
+    }
+
+    // `export const foo = 'bar', bam = 42`
+    if (declaration.type === 'VariableDeclaration') {
+      const declarations = declaration.declarations;
+      assert.ok(declarations.length > 0, `expected variable declarations in ${loc(filepath, declaration)}`);
+      for (const declarator of declarations) {
+        assert.strictEqual(declarator.type, 'VariableDeclarator', `unexpected "${declarator.type}" in ${loc(filepath, declarator)}`);
+        const name = nameFromChildIdentifier(filepath, declarator);
+        exportMap[name] = name;
+      }
+      return;
+    }
+
+    throw new Error(`Unexpected named export "${declaration.type}" in ${loc(filepath, declaration)}`);
+  }
+
+  let prefix = '';
+  const source = node.source;
+  if (source) {
+    // `export foo from 'bar'`
+    assert.strictEqual(source.type, 'Literal', `unexpected export source "${source.type}" in ${loc(filepath, source)}`);
+    prefix = `${source.value} `;
+  }
+
+  const specifiers = node.specifiers;
+  assert.ok(specifiers.length > 0, `expected export specifiers in ${loc(filepath, node)}`);
+  // `export {foo, bar}` or `export {default as Foo} from 'bar'`
+  for (const specifier of specifiers) {
+    assert.strictEqual(specifier.type, 'ExportSpecifier', `unexpected export specifier in ${loc(filepath, specifier)}`);
+
+    const local = specifier.local;
+    assert.strictEqual(local.type, 'Identifier', `unexpected local specifier "${local.type} in ${loc(filepath, local)}`);
+
+    const exported = specifier.exported;
+    assert.strictEqual(local.type, 'Identifier', `unexpected exported specifier "${exported.type} in ${loc(filepath, exported)}`);
+
+    exportMap[prefix + local.name] = exported.name;
+  }
+}
+
+function handleDefaultDeclaration(filepath, node) {
+  if (!(filepath in exportMapLookup)) {
+    exportMapLookup[filepath] = {};
+  }
+  const exportMap = exportMapLookup[filepath];
+
+  const declaration = node.declaration;
+  if (declaration) {
+    // `export default class Foo{}` or `export default function foo () {}`
+    if (declaration.type === 'ClassDeclaration' || declaration.type === 'FunctionDeclaration') {
+      const name = nameFromChildIdentifier(filepath, declaration);
+      exportMap[name] = 'default';
+      return;
+    }
+
+    // `export default foo`
+    if (declaration.type === 'Identifier') {
+      exportMap[declaration.name] = 'default';
+      return;
+    }
+
+    // `export default {foo: 'bar'}` or `export default 42`
+    if (declaration.type === 'ObjectExpression' || declaration.type === 'Literal') {
+      exportMap[''] = 'default';
+      return;
+    }
+  }
+
+  throw new Error(`Unexpected default export "${declaration.type}" in ${loc(filepath, declaration)}`);
+}
+
+exports.astNodeVisitor = {
+  visitNode: (node, event, parser, filepath) => {
+    if (node.type === 'ExportNamedDeclaration') {
+      return handleExportNamedDeclaration(filepath, node);
+    }
+
+    if (node.type === 'ExportDefaultDeclaration') {
+      return handleDefaultDeclaration(filepath, node);
+    }
+  }
+};
+
+const moduleLookup = {};
+
+exports.handlers = {
+
+  // create a lookup of @module doclets
+  newDoclet: event => {
+    const doclet = event.doclet;
+    if (doclet.kind === 'module') {
+      const filepath = path.join(doclet.meta.path, doclet.meta.filename);
+
+      assert.ok(!(filepath in moduleLookup), `duplicate @module doc in ${filepath}`);
+      moduleLookup[filepath] = doclet;
+    }
+  },
+
+  // assign the `exportMap` property to @module doclets
+  parseComplete: event => {
+    for (const filepath in moduleLookup) {
+      assert.ok(filepath in exportMapLookup, `missing ${filepath} in export map lookup`);
+      moduleLookup[filepath].exportMap = exportMapLookup[filepath];
+    }
+
+    // make sure there was a @module doclet for each export map
+    for (const filepath in exportMapLookup) {
+      assert.ok(filepath in moduleLookup, `missing @module doclet in ${filepath}`);
+    }
+  }
+
+};

config/jsdoc/api/plugins/api.js

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

config/jsdoc/api/template/publish.js

@@ -214,39 +214,55 @@ 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(createEntry('module', v));
+        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
+          })
+        });
       }
     }
   });

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

@@ -12,18 +12,13 @@ $(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').hide();
-            $('.navigation>ul>li').show();
+            $el.find('.item, .itemMembers').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' || doc.kind == 'module') {
+    <?js if (doc.stability || doc.kind == 'namespace') {
       var ancestors = doc.ancestors.map(a => a.replace(/>\./g, '>').replace(/\.</g, '<')).join('/');
       var parts = [];
       if (ancestors) {
@@ -26,20 +26,7 @@
       }
       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 } ?>
+    <pre class="prettyprint source"><code>import <?js= doc.name ?> from '<?js= importPath ?>';</code></pre>
     <?js } ?>
     <?js if (doc.classdesc) { ?>
         <div class="class-description"><?js= doc.classdesc ?></div>
@@ -156,7 +143,6 @@
         <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,10 +27,6 @@ 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,12 +10,11 @@ function toShortName(name) {
     </div>
     <ul class="list">
     <?js
-    let navbuilder;
-    this.nav.forEach(navbuilder = function (item) {
+    this.nav.forEach(function (item) {
     ?>
         <li class="item" data-name="<?js= item.longname ?>">
             <span class="title">
-                <?js= self.linkto(item.longname, item.type === 'module' ? item.longname.replace('module:', '') : item.name) ?>
+                <?js= self.linkto(item.longname, item.longname.replace('module:', '')) ?>
                 <?js if (item.type === 'namespace' &&
                         (item.members.length + item.typedefs.length + item.methods.length +
                          item.events.length > 0)) { ?>
@@ -23,18 +22,6 @@ 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,11 +228,3 @@ 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,7 +5,6 @@ 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()
@@ -52,21 +51,21 @@ const zoomtoswitzerland =
     document.getElementById('zoomtoswitzerland');
 zoomtoswitzerland.addEventListener('click', function() {
   const feature = source.getFeatures()[0];
-  const polygon = feature.getGeometry();
+  const polygon = /** @type {import("../src/ol/geom/SimpleGeometry.js").default} */ (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 = feature.getGeometry();
+  const point = /** @type {import("../src/ol/geom/SimpleGeometry.js").default} */ (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 = feature.getGeometry();
+  const point = /** @type {import("../src/ol/geom/Point.js").default} */ (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://a.tiles.mapbox.com/v3/aj.1x1-degrees.json'
+        url: 'https://api.tiles.mapbox.com/v3/mapbox.geography-class.json?secure'
       })
     }),
     new VectorLayer({

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.js';
+import SourceState from '../src/ol/source/State';
 import {fromLonLat, toLonLat} from '../src/ol/proj.js';
 import Stamen from '../src/ol/source/Stamen.js';
 

examples/extent-constrained.js

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

examples/filter-points-webgl.js

@@ -1,14 +1,14 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
 import TileLayer from '../src/ol/layer/Tile.js';
-import Feature from '../src/ol/Feature.js';
-import Point from '../src/ol/geom/Point.js';
-import VectorLayer from '../src/ol/layer/Vector.js';
-import {Vector} from '../src/ol/source.js';
-import {fromLonLat} from '../src/ol/proj.js';
-import WebGLPointsLayerRenderer from '../src/ol/renderer/webgl/PointsLayer.js';
-import {clamp, lerp} from '../src/ol/math.js';
-import Stamen from '../src/ol/source/Stamen.js';
+import Feature from '../src/ol/Feature';
+import Point from '../src/ol/geom/Point';
+import VectorLayer from '../src/ol/layer/Vector';
+import {Vector} from '../src/ol/source';
+import {fromLonLat} from '../src/ol/proj';
+import WebGLPointsLayerRenderer from '../src/ol/renderer/webgl/PointsLayer';
+import {clamp, lerp} from '../src/ol/math';
+import Stamen from '../src/ol/source/Stamen';
 
 const vectorSource = new Vector({
   attributions: 'NASA'

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,6 +46,11 @@ const replacer = function(key, value) {
   }
 };
 
+const tilePixels = new Projection({
+  code: 'TILE_PIXELS',
+  units: 'tile-pixels'
+});
+
 const map = new Map({
   layers: [
     new TileLayer({
@@ -68,22 +73,23 @@ fetch(url).then(function(response) {
     debug: 1
   });
   const vectorSource = new VectorTileSource({
-    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) {
+    format: new GeoJSON(),
+    tileLoadFunction: function(tile) {
+      const format = tile.getFormat();
+      const tileCoord = tile.getTileCoord();
       const data = tileIndex.getTile(tileCoord[0], tileCoord[1], tileCoord[2]);
-      const geojson = JSON.stringify({
-        type: 'FeatureCollection',
-        features: data ? data.features : []
-      }, replacer);
-      return 'data:application/json;charset=UTF-8,' + geojson;
-    }
+
+      const features = format.readFeatures(
+        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
   });
   const vectorLayer = new VectorTileLayer({
     source: vectorSource

examples/icon-color.js

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

examples/icon-sprite-webgl.html

@@ -13,8 +13,5 @@ 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,16 +1,14 @@
 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.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';
+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';
 
 const vectorSource = new Vector({
   features: [],
@@ -107,7 +105,7 @@ new Map({
   layers: [
     new TileLayer({
       source: new TileJSON({
-        url: 'https://api.tiles.mapbox.com/v4/mapbox.world-dark.json?access_token=' + key,
+        url: 'https://api.tiles.mapbox.com/v3/mapbox.world-dark.json?secure',
         crossOrigin: 'anonymous'
       })
     }),

examples/icon.js

@@ -37,7 +37,7 @@ const vectorLayer = new VectorLayer({
 
 const rasterLayer = new TileLayer({
   source: new TileJSON({
-    url: 'https://a.tiles.mapbox.com/v3/aj.1x1-degrees.json',
+    url: 'https://api.tiles.mapbox.com/v3/mapbox.geography-class.json?secure',
     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 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"
+  Show how to add a mapbox-gl-js layer in an openlayers map. **Note**: Make sure to get your own Mapbox API key when using this example. No map will be visible when the API key has expired.
+tags: "simple, mapbox, vector, tiles"
 resources:
   - https://unpkg.com/mapbox-gl@0.54.0/dist/mapbox-gl.js
   - https://unpkg.com/mapbox-gl@0.54.0/dist/mapbox-gl.css
 cloak:
   - key: ER67WIiPdCQvhgsUjoWK
-    value: Get your own API key at https://www.maptiler.com/cloud/
+    value: Your Mapbox access token from https://mapbox.com/ here
 ---
 <div id="map" class="map"></div>

examples/mapbox-layer.js

@@ -1,7 +1,7 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
-import Layer from '../src/ol/layer/Layer.js';
-import {toLonLat, fromLonLat} from '../src/ol/proj.js';
+import Layer from '../src/ol/layer/Layer';
+import {toLonLat, fromLonLat} from '../src/ol/proj';
 import {Stroke, Style} from '../src/ol/style.js';
 import VectorLayer from '../src/ol/layer/Vector.js';
 import VectorSource from '../src/ol/source/Vector.js';
@@ -11,7 +11,7 @@ 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,
+  style: 'https://maps.tilehosting.com/styles/bright/style.json?key=' + key,
   attributionControl: false,
   boxZoom: false,
   center: center,

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, maptiler"
+tags: "vector tiles, mapbox style, ol-mapbox-style"
 cloak:
-  - key: ER67WIiPdCQvhgsUjoWK
-    value: Get your own API key at https://www.maptiler.com/cloud/
+  - key: lirfd6Fegsjkvs0lshxe
+    value: Your API key from http://tilehosting.com/ here
 ---
 <!doctype html>
 <html lang="en">

examples/mapbox-style.js

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

examples/popup.html

@@ -7,9 +7,6 @@ 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,7 +6,6 @@ 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.
@@ -46,7 +45,7 @@ const map = new Map({
   layers: [
     new TileLayer({
       source: new TileJSON({
-        url: 'https://api.tiles.mapbox.com/v4/mapbox.natural-earth-hypso-bathy.json?access_token=' + key,
+        url: 'https://api.tiles.mapbox.com/v3/mapbox.natural-earth-hypso-bathy.json?secure',
         crossOrigin: 'anonymous'
       })
     })

examples/tilejson.js

@@ -8,7 +8,7 @@ const map = new Map({
   layers: [
     new TileLayer({
       source: new TileJSON({
-        url: 'https://a.tiles.mapbox.com/v3/aj.1x1-degrees.json',
+        url: 'https://api.tiles.mapbox.com/v3/mapbox.geography-class.json?secure',
         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 <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>.
+  Tiles made with [TileMill](http://tilemill.com). Hosting on MapBox.com or with open-source [TileServer](https://github.com/klokantech/tileserver-php/).
 tags: "utfgrid, tilejson"
 cloak:
   - key: pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q

examples/webpack/worker-loader.js

@@ -2,7 +2,14 @@ const build = require('../../tasks/serialize-workers').build;
 
 function loader() {
   const callback = this.async();
-  const minify = this.mode === 'production';
+
+  let minify = false;
+
+  // TODO: remove when https://github.com/webpack/webpack/issues/6496 is addressed
+  const compilation = this._compilation;
+  if (compilation) {
+    minify = compilation.compiler.options.mode === 'production';
+  }
 
   build(this.resource, {minify})
     .then(chunk => {

examples/worker.js

@@ -4,7 +4,7 @@ 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';
+import {create as createVersionWorker} from '../src/ol/worker/version';
 
 
 const map = new Map({

gatsby-config.js

@@ -0,0 +1,11 @@
+module.exports = {
+  plugins: [
+    'gatsby-plugin-emotion',
+    {
+      resolve: 'gatsby-plugin-typography',
+      options: {
+        pathToConfigModule: 'site/util/typography'
+      }
+    }
+  ]
+};

gatsby-node.js

@@ -0,0 +1,23 @@
+
+function getDocs() {
+  // TODO: build if not present
+  const info = require('./build/api-info.json');
+
+  return info.docs.filter(doc => !doc.ignore && (doc.api || doc.kind === 'module' || doc.kind === 'typedef'));
+}
+
+function createPages({actions: {createPage}}) {
+  createPage({
+    path: '/api',
+    component: require.resolve('./site/pages/API.js'),
+    context: {docs: getDocs()}
+  });
+
+  createPage({
+    path: '/info',
+    component: require.resolve('./site/pages/Info.js'),
+    context: {docs: getDocs()}
+  });
+}
+
+exports.createPages = createPages;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ol",
-  "version": "6.0.0-beta.10",
+  "version": "6.0.0-beta.8",
   "description": "OpenLayers mapping library",
   "keywords": [
     "map",
@@ -24,7 +24,10 @@
     "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 && 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"
+    "apidoc": "jsdoc -R config/jsdoc/api/index.md -c config/jsdoc/api/conf.json -P package.json -d build/apidoc",
+    "api-info": "jsdoc --configure config/jsdoc/api-info/conf.json --destination build/api-info.json",
+    "serve-site": "gatsby develop",
+    "build-site": "npm run api-info && gatsby build"
   },
   "main": "index.js",
   "repository": {
@@ -43,6 +46,8 @@
   "devDependencies": {
     "@babel/core": "^7.4.0",
     "@babel/preset-env": "^7.4.4",
+    "@emotion/core": "^10.0.10",
+    "@emotion/styled": "^10.0.11",
     "@openlayers/eslint-plugin": "^4.0.0-beta.2",
     "@types/arcgis-rest-api": "^10.4.4",
     "@types/geojson": "^7946.0.7",
@@ -54,12 +59,17 @@
     "chaikin-smooth": "^1.0.4",
     "clean-css-cli": "4.3.0",
     "copy-webpack-plugin": "^5.0.3",
-    "coveralls": "3.0.4",
-    "eslint": "^6.0.0",
-    "eslint-config-openlayers": "^12.0.0",
+    "coveralls": "3.0.3",
+    "eslint": "^5.16.0",
+    "eslint-config-openlayers": "^11.0.0",
+    "eslint-config-tschaub": "^13.1.0",
+    "eslint-plugin-react": "^7.13.0",
     "expect.js": "0.3.1",
     "front-matter": "^3.0.2",
     "fs-extra": "^8.0.0",
+    "gatsby": "^2.4.3",
+    "gatsby-plugin-emotion": "^4.0.6",
+    "gatsby-plugin-typography": "^2.2.13",
     "glob": "^7.1.4",
     "globby": "^9.2.0",
     "handlebars": "4.1.2",
@@ -68,6 +78,7 @@
     "istanbul-instrumenter-loader": "^3.0.1",
     "jquery": "3.4.1",
     "jsdoc": "3.6.2",
+    "jsdoc-json": "^2.0.2",
     "jsdoc-plugin-typescript": "^2.0.1",
     "karma": "^4.1.0",
     "karma-chrome-launcher": "2.2.0",
@@ -81,23 +92,31 @@
     "marked": "0.6.2",
     "mocha": "6.1.4",
     "ol-mapbox-style": "^5.0.0-beta.2",
-    "pixelmatch": "^5.0.0",
+    "pixelmatch": "^4.0.2",
     "pngjs": "^3.4.0",
     "proj4": "2.5.0",
-    "puppeteer": "~1.18.0",
+    "prop-types": "^15.7.2",
+    "puppeteer": "~1.16.0",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6",
+    "react-markdown": "^4.0.8",
+    "react-syntax-highlighter": "^10.2.1",
+    "react-typography": "^0.16.19",
     "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",
+    "rollup-plugin-terser": "^4.0.4",
     "serve-static": "^1.14.0",
     "shx": "^0.3.2",
     "sinon": "^7.3.2",
     "terser-webpack-plugin": "^1.2.3",
     "typescript": "^3.4.5",
+    "typography": "^0.16.19",
+    "typography-theme-alton": "^0.16.19",
     "url-polyfill": "^1.1.5",
     "walk": "^2.3.9",
-    "webpack": "4.35.0",
+    "webpack": "4.31.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.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';
+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';
 
 const vector = new HeatmapLayer({
   source: new VectorSource({

rendering/cases/layer-group/main.js

@@ -1,30 +0,0 @@
-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.js';
+} from '../../../src/ol/proj';
 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.js';
+import {fromLonLat} from '../../../src/ol/proj';
 import {transformExtent} from '../../../src/ol/proj.js';
-import XYZ from '../../../src/ol/source/XYZ.js';
+import XYZ from '../../../src/ol/source/XYZ';
 
 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.js';
+import XYZ from '../../../src/ol/source/XYZ';
 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.js';
-import XYZ from '../../../src/ol/source/XYZ.js';
+import {fromLonLat} from '../../../src/ol/proj';
+import XYZ from '../../../src/ol/source/XYZ';
 
 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.js';
-import XYZ from '../../../src/ol/source/XYZ.js';
+import {fromLonLat} from '../../../src/ol/proj';
+import XYZ from '../../../src/ol/source/XYZ';
 
 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.js';
-import XYZ from '../../../src/ol/source/XYZ.js';
+import {fromLonLat} from '../../../src/ol/proj';
+import XYZ from '../../../src/ol/source/XYZ';
 
 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.js';
-import XYZ from '../../../src/ol/source/XYZ.js';
+import {fromLonLat} from '../../../src/ol/proj';
+import XYZ from '../../../src/ol/source/XYZ';
 
 const center = fromLonLat([8.6, 50.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.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 VectorTileSource from '../../../src/ol/source/VectorTile';
+import MVT from '../../../src/ol/format/MVT';
+import {createXYZ} from '../../../src/ol/tilegrid';
+import VectorTileLayer from '../../../src/ol/layer/VectorTile';
 
 const map = new Map({
   pixelRatio: 2,

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.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';
+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';
 
 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.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 VectorTileSource from '../../../src/ol/source/VectorTile';
+import MVT from '../../../src/ol/format/MVT';
+import {createXYZ} from '../../../src/ol/tilegrid';
+import VectorTileLayer from '../../../src/ol/layer/VectorTile';
 
 const map = new Map({
   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.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 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';
 
 new Map({
   layers: [

rendering/cases/multiple-layers/main.js

@@ -9,6 +9,12 @@ 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({
@@ -21,12 +27,6 @@ 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.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';
+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';
 
 class CustomLayer extends VectorLayer {
   createRenderer() {

rendering/webpack.config.js

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

site/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "tschaub/react"
+}

site/components/Class.jsx

@@ -0,0 +1,35 @@
+import {object} from 'prop-types';
+import React from 'react';
+import Markdown from 'react-markdown';
+import Code from './Code';
+import Parameter from './Parameter';
+
+function Class({cls, module, helper}) {
+  const exportedName = module.getExportedName(cls.name);
+  let importCode;
+  if (exportedName === 'default') {
+    importCode = `import ${cls.name} from '${module.id}';`;
+  } else {
+    importCode = `import {${exportedName}} from '${module.id}';`;
+  }
+
+  return (
+    <div>
+      <h3>{cls.name}</h3>
+      <Code value={importCode} />
+      <Markdown source={cls.doc.classdesc} renderers={{code: Code}} />
+      <h6>Parameters</h6>
+      <ul>
+        {cls.doc.params && cls.doc.params.map(param => <Parameter param={param} module={module} helper={helper} />)}
+      </ul>
+    </div>
+  );
+}
+
+Class.propTypes = {
+  cls: object.isRequired,
+  module: object.isRequired,
+  helper: object.isRequired
+};
+
+export default Class;

site/components/Code.jsx

@@ -0,0 +1,26 @@
+import React, {PureComponent} from 'react';
+import {string} from 'prop-types';
+import {Prism as SyntaxHighlighter} from 'react-syntax-highlighter';
+import {coy} from 'react-syntax-highlighter/dist/styles/prism';
+
+class Code extends PureComponent {
+  render() {
+    let language = this.props.language;
+    if (!language) {
+      language = 'js';
+    }
+
+    return (
+      <SyntaxHighlighter language={language} style={coy}>
+        {this.props.value}
+      </SyntaxHighlighter>
+    );
+  }
+}
+
+Code.propTypes = {
+  value: string.isRequired,
+  language: string
+};
+
+export default Code;

site/components/Func.jsx

@@ -0,0 +1,35 @@
+import {object} from 'prop-types';
+import React from 'react';
+import Markdown from 'react-markdown';
+import Code from './Code';
+import Parameter from './Parameter';
+
+function Func({func, module, helper}) {
+  const exportedName = module.getExportedName(func.name);
+  let importCode;
+  if (exportedName === 'default') {
+    importCode = `import ${func.name} from '${module.id}';`;
+  } else {
+    importCode = `import {${exportedName}} from '${module.id}';`;
+  }
+
+  return (
+    <div>
+      <h3>{func.name}</h3>
+      <Code value={importCode} />
+      <Markdown source={func.doc.description} renderers={{code: Code}} />
+      <h6>Parameters</h6>
+      <ul>
+        {func.doc.params && func.doc.params.map(param => <Parameter param={param} module={module} helper={helper} />)}
+      </ul>
+    </div>
+  );
+}
+
+Func.propTypes = {
+  func: object.isRequired,
+  module: object.isRequired,
+  helper: object.isRequired
+};
+
+export default Func;

site/components/Module.jsx

@@ -0,0 +1,26 @@
+import {object} from 'prop-types';
+import React from 'react';
+import Class from './Class';
+import Func from './Func';
+
+function Module({module, helper}) {
+  return (
+    <div>
+      <hr />
+      <h2>{module.id}</h2>
+      {module.classes.map(cls => (
+        <Class key={cls.name} cls={cls} module={module} helper={helper} />
+      ))}
+      {module.functions.map(func => (
+        <Func key={func.name} func={func} module={module} helper={helper} />
+      ))}
+    </div>
+  );
+}
+
+Module.propTypes = {
+  module: object.isRequired,
+  helper: object.isRequired
+};
+
+export default Module;

site/components/Parameter.jsx

@@ -0,0 +1,20 @@
+import {object} from 'prop-types';
+import React from 'react';
+import Type from './Type';
+
+function Parameter({param, module, helper}) {
+  return (
+    <li>
+      <code>{param.name}</code> - {param.description} {param.optional && <span>(optional)</span>}<br/>
+      {param.type.names.map(longName => <Type longName={longName} module={module} helper={helper} />)}
+    </li>
+  );
+}
+
+Parameter.propTypes = {
+  param: object.isRequired,
+  module: object.isRequired,
+  helper: object.isRequired
+};
+
+export default Parameter;

site/components/Type.jsx

@@ -0,0 +1,27 @@
+import {object} from 'prop-types';
+import React from 'react';
+import Parameter from './Parameter';
+
+function Type({longName, module, helper}) {
+  const type = helper.getTypeDef(longName);
+  if (!type) {
+    return <code>{longName}</code>;
+  }
+
+  return (
+    <div>
+      <code>{type.doc.type.names}</code>
+      <ul>
+        {type.doc.properties && type.doc.properties.map(prop => <Parameter param={prop} module={module} helper={helper} />)}
+      </ul>
+    </div>
+  );
+}
+
+Type.propTypes = {
+  longName: object.isRequired,
+  module: object.isRequired,
+  helper: object.isRequired
+};
+
+export default Type;

site/components/layout.js

@@ -0,0 +1,8 @@
+import styled from '@emotion/styled';
+import {baseSpacingPx} from '../util/typography';
+
+export const Page = styled.div({
+  display: 'flex',
+  flexDirection: 'column',
+  margin: 2 * baseSpacingPx
+});

site/pages/API.js

@@ -0,0 +1,26 @@
+import {object} from 'prop-types';
+import React from 'react';
+import {Page} from '../components/layout';
+import Module from '../components/Module';
+import {getHelper} from '../util/api';
+
+function API({pageContext: {docs}}) {
+  const helper = getHelper(docs);
+
+  return (
+    <Page>
+      <h1>API</h1>
+      {helper.modules
+        .filter(module => module.visible)
+        .map(module => (
+          <Module key={module.id} module={module} helper={helper} />
+        ))}
+    </Page>
+  );
+}
+
+API.propTypes = {
+  pageContext: object.isRequired
+};
+
+export default API;

site/pages/Info.js

@@ -0,0 +1,33 @@
+import {object} from 'prop-types';
+import React from 'react';
+import {Page} from '../components/layout';
+
+function Info({pageContext: {docs}}) {
+  return (
+    <Page>
+      <h1>API</h1>
+      <table>
+        <tbody>
+          <tr>
+            <th>kind</th>
+            <th>longname</th>
+            <th>memberof</th>
+          </tr>
+          {docs.map(doc => (
+            <tr key={doc.longname}>
+              <td>{doc.kind}</td>
+              <td>{doc.longname}</td>
+              <td>{doc.memberof}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </Page>
+  );
+}
+
+Info.propTypes = {
+  pageContext: object.isRequired
+};
+
+export default Info;

site/util/api.js

@@ -0,0 +1,205 @@
+class FunctionDoc {
+  constructor(doc) {
+    this.name = doc.name;
+    this.doc = doc;
+  }
+}
+
+class TypedefDoc {
+  constructor(doc) {
+    this.name = doc.name;
+    this.doc = doc;
+  }
+}
+
+class ClassDoc {
+  constructor(name) {
+    this.name = name;
+  }
+
+  processDoc(doc) {
+    if (doc.kind === 'class') {
+      this.doc = doc;
+    }
+  }
+}
+
+class ModuleDoc {
+  constructor(id) {
+    this.id = id;
+
+    this.classLookup = {};
+    this.classes = [];
+
+    this.functionLookup = {};
+    this.functions = [];
+  }
+
+  processDoc(doc) {
+    if (doc.kind === 'module') {
+      this.doc = doc;
+      //console.log('processing module: ' + doc.longname)
+      return;
+    }
+
+    if (doc.kind === 'class') {
+      const name = nameFromLongname(doc.longname);
+      if (!(name in this.classLookup)) {
+        const cls = new ClassDoc(name);
+        this.classLookup[name] = cls;
+        this.classes.push(cls);
+      }
+
+      this.classLookup[name].processDoc(doc);
+      return;
+    }
+
+    if (doc.kind === 'function') {
+      if (nameFromLongname(doc.memberof)) {
+        // belongs to a class or other
+        return;
+      }
+
+      if (doc.name in this.functionLookup) {
+        throw new Error(`Duplicate function ${doc.name} in ${this.id}`);
+      }
+
+      const func = new FunctionDoc(doc);
+      this.functionLookup[doc.name] = func;
+      this.functions.push(func);
+      return;
+    }
+  }
+
+  finalize() {
+    this.classes.sort(byName);
+    this.functions.sort(byName);
+    this.visible = this.classes.length > 0 || this.functions.length > 0;
+  }
+
+  getExportedName(localName) {
+    if (!this.doc || !this.doc.exportMap) {
+      throw new Error(`Expected to find export map in module doc: ${this.id}`);
+    }
+
+    if (!(localName in this.doc.exportMap)) {
+      throw new Error(
+        `No local name "${localName}" in export map for module: ${this.id}`
+      );
+    }
+
+    return this.doc.exportMap[localName];
+  }
+}
+
+const longnameRE = /^module:(?<module>.*?)([~\.](?<name>\w+)(#(?<member>\w+))?(:(?<type>\w+))?)?$/;
+
+function moduleIDFromLongname(longname) {
+  const match = longname.match(longnameRE);
+  if (!match) {
+    throw new Error(`could not match module id in longname: ${longname}`);
+  }
+  return match.groups.module;
+}
+
+export function nameFromLongname(longname) {
+  const match = longname.match(longnameRE);
+  if (!match) {
+    throw new Error(`could not match name in longname: ${longname}`);
+  }
+  return match.groups.name;
+}
+
+function memberFromLongname(longname) {
+  const match = longname.match(longnameRE);
+  if (!match) {
+    throw new Error(`could not match member in longname: ${longname}`);
+  }
+  return match.groups.member;
+}
+
+function byName(a, b) {
+  if (a.name < b.name) {
+    return -1;
+  }
+  if (a.name > b.name) {
+    return 1;
+  }
+  return 0;
+}
+
+function byModuleId(a, b) {
+  const aParts = a.id.split('/');
+  const bParts = b.id.split('/');
+  const len = Math.max(aParts.length, bParts.length);
+  for (let i = 0; i < len; ++i) {
+    if (aParts[i] && bParts[i]) {
+      if (aParts[i] < bParts[i]) {
+        return -1;
+      }
+      if (aParts[i] > bParts[i]) {
+        return 1;
+      }
+    } else if (!aParts[i]) {
+      return -1;
+    } else {
+      return 1;
+    }
+  }
+  return 0;
+}
+
+class DocHelper {
+  constructor(docs) {
+    this.moduleLookup = {};
+    this.modules = [];
+
+    this.typedefLookup = {};
+
+    docs.forEach(doc => {
+      // typedef are indexed by long name
+      if (doc.kind === 'typedef') {
+        if (doc.name in this.typedefLookup) {
+          throw new Error(`Duplicate type definition ${doc.name} in ${this.id}`);
+        }
+
+        const type = new TypedefDoc(doc);
+        this.typedefLookup[doc.longname] = type;
+        return;
+      }
+
+      const moduleID = moduleIDFromLongname(doc.longname);
+      if (!(moduleID in this.moduleLookup)) {
+        const module = new ModuleDoc(moduleID);
+        this.moduleLookup[moduleID] = module;
+        this.modules.push(module);
+      }
+
+      const module = this.moduleLookup[moduleID];
+      module.processDoc(doc);
+    });
+
+    this.modules.sort(byModuleId);
+    this.modules.forEach(module => module.finalize());
+  }
+
+  getTypeDef(longName) {
+    this.typedefLookup[longName] && console.log(this.typedefLookup[longName]);
+    return this.typedefLookup[longName];
+  }
+}
+
+let cachedDocs;
+let cachedHelper;
+
+export function getHelper(docs) {
+  if (docs !== cachedDocs) {
+    if (cachedDocs) {
+      console.warn('creating new doc helper'); // eslint-disable-line
+    }
+    cachedHelper = new DocHelper(docs);
+    cachedDocs = docs;
+  }
+
+  return cachedHelper;
+}

site/util/typography.js

@@ -0,0 +1,9 @@
+import Typography from 'typography';
+import theme from 'typography-theme-alton';
+
+const typography = new Typography(theme);
+
+export const baseSpacingPx = parseInt(theme.baseFontSize, 10);
+
+export {theme};
+export default typography;

src/ol/Feature.js

@@ -57,11 +57,10 @@ import BaseObject, {getChangeEventType} from './Object.js';
  * ```
  *
  * @api
- * @template {import("./geom/Geometry.js").default} Geometry
  */
 class Feature extends BaseObject {
   /**
-   * @param {Geometry|Object<string, *>=} opt_geometryOrProperties
+   * @param {import("./geom/Geometry.js").default|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.
@@ -107,7 +106,7 @@ class Feature extends BaseObject {
 
     if (opt_geometryOrProperties) {
       if (typeof /** @type {?} */ (opt_geometryOrProperties).getSimplifiedGeometry === 'function') {
-        const geometry = /** @type {Geometry} */ (opt_geometryOrProperties);
+        const geometry = /** @type {import("./geom/Geometry.js").default} */ (opt_geometryOrProperties);
         this.setGeometry(geometry);
       } else {
         /** @type {Object<string, *>} */
@@ -141,13 +140,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 {Geometry|undefined} The default geometry for the feature.
+   * @return {import("./geom/Geometry.js").default|undefined} The default geometry for the feature.
    * @api
    * @observable
    */
   getGeometry() {
     return (
-      /** @type {Geometry|undefined} */ (this.get(this.geometryName_))
+      /** @type {import("./geom/Geometry.js").default|undefined} */ (this.get(this.geometryName_))
     );
   }
 
@@ -219,7 +218,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 {Geometry|undefined} geometry The new geometry.
+   * @param {import("./geom/Geometry.js").default|undefined} geometry The new geometry.
    * @api
    * @observable
    */

src/ol/Image.js

@@ -6,7 +6,6 @@ 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';
 
 
 /**
@@ -158,8 +157,7 @@ class ImageWrapper extends ImageBase {
  */
 export function listenImage(image, loadHandler, errorHandler) {
   const img = /** @type {HTMLImageElement} */ (image);
-
-  if (IMAGE_DECODE) {
+  if (img.decode) {
     const promise = img.decode();
     let listening = true;
     const unlisten = function() {
@@ -171,13 +169,7 @@ export function listenImage(image, loadHandler, errorHandler) {
       }
     }).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();
-        }
+        errorHandler();
       }
     });
     return unlisten;

src/ol/MapBrowserEventHandler.js

@@ -260,6 +260,12 @@ 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, IMAGE_DECODE} from './has.js';
+import {DEVICE_PIXEL_RATIO, TOUCH} from './has.js';
 import LayerGroup from './layer/Group.js';
 import {hasArea} from './size.js';
 import {DROP} from './structs/PriorityQueue.js';
@@ -39,11 +39,10 @@ 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>} declutterItems
+ * @property {Array<*>} 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
@@ -55,13 +54,6 @@ 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
  */
@@ -230,7 +222,7 @@ class PluggableMap extends BaseObject {
      * @type {!HTMLElement}
      */
     this.viewport_ = document.createElement('div');
-    this.viewport_.className = 'ol-viewport' + ('ontouchstart' in window ? ' ol-touch' : '');
+    this.viewport_.className = 'ol-viewport' + (TOUCH ? ' ol-touch' : '');
     this.viewport_.style.position = 'relative';
     this.viewport_.style.overflow = 'hidden';
     this.viewport_.style.width = '100%';
@@ -301,11 +293,6 @@ class PluggableMap extends BaseObject {
      */
     this.interactions = optionsInternal.interactions || new Collection();
 
-    /**
-     * @type {import("./events/Target.js").default}
-     */
-    this.labelCache_ = null;
-
     /**
      * @type {import("./events.js").EventsKey}
      */
@@ -328,7 +315,7 @@ class PluggableMap extends BaseObject {
      * @type {import("./renderer/Map.js").default}
      * @private
      */
-    this.renderer_ = null;
+    this.renderer_ = this.createRenderer();
 
     /**
      * @type {function(Event): void|undefined}
@@ -516,6 +503,24 @@ class PluggableMap extends BaseObject {
     overlay.setMap(this);
   }
 
+  /**
+   * Attach a label cache for listening to font changes.
+   * @param {import("./events/Target.js").default} labelCache Label cache.
+   */
+  attachLabelCache(labelCache) {
+    this.detachLabelCache();
+    this.labelCacheListenerKey_ = listen(labelCache, EventType.CLEAR, this.redrawText.bind(this));
+  }
+
+  /**
+   * Detach the label cache, i.e. no longer listen to font changes.
+   */
+  detachLabelCache() {
+    if (this.labelCacheListenerKey_) {
+      unlistenByKey(this.labelCacheListenerKey_);
+    }
+  }
+
   /**
    *
    * @inheritDoc
@@ -529,6 +534,11 @@ class PluggableMap extends BaseObject {
       removeEventListener(EventType.RESIZE, this.handleResize_, false);
       this.handleResize_ = undefined;
     }
+    if (this.animationDelayKey_) {
+      cancelAnimationFrame(this.animationDelayKey_);
+      this.animationDelayKey_ = undefined;
+    }
+    this.detachLabelCache();
     this.setTarget(null);
     super.disposeInternal();
   }
@@ -967,7 +977,7 @@ class PluggableMap extends BaseObject {
       if (frameState) {
         const hints = frameState.viewHints;
         if (hints[ViewHint.ANIMATING] || hints[ViewHint.INTERACTING]) {
-          const lowOnFrameBudget = !IMAGE_DECODE && Date.now() - frameState.time > 8;
+          const lowOnFrameBudget = Date.now() - frameState.time > 8;
           maxTotalLoading = lowOnFrameBudget ? 0 : 8;
           maxNewLoads = lowOnFrameBudget ? 0 : 2;
         }
@@ -1023,14 +1033,6 @@ class PluggableMap extends BaseObject {
     }
 
     if (!targetElement) {
-      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);
@@ -1038,9 +1040,6 @@ class PluggableMap extends BaseObject {
       }
     } else {
       targetElement.appendChild(this.viewport_);
-      if (!this.renderer_) {
-        this.renderer_ = this.createRenderer();
-      }
 
       const keyboardEventTarget = !this.keyboardEventTarget_ ?
         targetElement : this.keyboardEventTarget_;
@@ -1051,7 +1050,7 @@ class PluggableMap extends BaseObject {
 
       if (!this.handleResize_) {
         this.handleResize_ = this.updateSize.bind(this);
-        window.addEventListener(EventType.RESIZE, this.handleResize_, false);
+        addEventListener(EventType.RESIZE, this.handleResize_, false);
       }
     }
 
@@ -1159,7 +1158,7 @@ class PluggableMap extends BaseObject {
    * @api
    */
   render() {
-    if (this.renderer_ && this.animationDelayKey_ === undefined) {
+    if (this.animationDelayKey_ === undefined) {
       this.animationDelayKey_ = requestAnimationFrame(this.animationDelay_);
     }
   }
@@ -1225,14 +1224,13 @@ 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 = {
+      frameState = /** @type {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_,
@@ -1245,7 +1243,7 @@ class PluggableMap extends BaseObject {
         viewState: viewState,
         viewHints: viewHints,
         wantedTiles: {}
-      };
+      });
     }
 
     if (frameState) {

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.js';
-import {easeOut} from './easing.js';
-import {createMinMaxResolution} from './resolutionconstraint.js';
+import {equals} from './coordinate';
+import {easeOut} from './easing';
+import {createMinMaxResolution} from './resolutionconstraint';
 
 
 /**

src/ol/control/OverviewMap.js

@@ -51,8 +51,8 @@ class ControlledMap extends PluggableMap {
  * @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.
+ * @property {Array<import("../layer/Layer.js").default>|import("../Collection.js").default<import("../layer/Layer.js").default>} layers
+ * Layers for the overview map (mandatory).
  * @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
@@ -159,9 +159,13 @@ class OverviewMap extends Control {
     const ovmap = this.ovmap_;
 
     if (options.layers) {
-      options.layers.forEach(function(layer) {
-        ovmap.addLayer(layer);
-      });
+      /** @type {Array<import("../layer/Layer.js").default>} */ (options.layers).forEach(
+        /**
+         * @param {import("../layer/Layer.js").default} layer Layer.
+         */
+        (function(layer) {
+          ovmap.addLayer(layer);
+        }).bind(this));
     }
 
     const box = document.createElement('div');

src/ol/format/Feature.js

@@ -13,10 +13,8 @@ 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 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("../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("../proj.js").ProjectionLike} [featureProjection] Projection of the feature geometries
  * created by the format reader. If not provided, features will be returned in the
  * `dataProjection`.
@@ -88,14 +86,9 @@ 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: dataProjection,
+        dataProjection: opt_options.dataProjection ?
+          opt_options.dataProjection : this.readProjection(source),
         featureProjection: opt_options.featureProjection
       };
     }

src/ol/geom/Geometry.js

@@ -174,8 +174,9 @@ class Geometry extends BaseObject {
 
   /**
    * Create a simplified version of this geometry.  For linestrings, this uses
-   * the [Douglas Peucker](https://en.wikipedia.org/wiki/Ramer-Douglas-Peucker_algorithm)
-   * algorithm.  For polygons, a quantization-based
+   * the the {@link
+   * https://en.wikipedia.org/wiki/Ramer-Douglas-Peucker_algorithm
+   * Douglas Peucker} 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/has.js

@@ -39,8 +39,30 @@ export const MAC = ua.indexOf('macintosh') !== -1;
  */
 export const DEVICE_PIXEL_RATIO = window.devicePixelRatio || 1;
 
+
 /**
- * Image.prototype.decode() is supported.
+ * True if browser supports touch events.
+ * @const
+ * @type {boolean}
+ * @api
+ */
+export const TOUCH = 'ontouchstart' in window;
+
+
+/**
+ * True if browser supports pointer events.
+ * @const
  * @type {boolean}
  */
-export const IMAGE_DECODE = typeof Image !== 'undefined' && Image.prototype.decode;
+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';

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, primaryAction} from '../events/condition.js';
+import {noModifierKeys} 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} and {@link module:ol/events/condition~primaryAction}.
+ * Default is {@link module:ol/events/condition~noModifierKeys}.
  * @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 : defaultCondition;
+    this.condition_ = options.condition ? options.condition : noModifierKeys;
 
     /**
      * @private
@@ -166,12 +166,4 @@ 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<Point>}
+     * @type {Feature}
      * @private
      */
     this.sketchPoint_ = null;
@@ -387,7 +387,7 @@ class Draw extends PointerInteraction {
 
     /**
      * Sketch line. Used when drawing polygon.
-     * @type {Feature<LineString>}
+     * @type {Feature}
      * @private
      */
     this.sketchLine_ = null;
@@ -669,7 +669,7 @@ class Draw extends PointerInteraction {
       this.sketchPoint_ = new Feature(new Point(coordinates));
       this.updateSketchFeatures_();
     } else {
-      const sketchPointGeom = this.sketchPoint_.getGeometry();
+      const sketchPointGeom = /** @type {Point} */ (this.sketchPoint_.getGeometry());
       sketchPointGeom.setCoordinates(coordinates);
     }
   }
@@ -711,7 +711,7 @@ class Draw extends PointerInteraction {
    */
   modifyDrawing_(event) {
     let coordinate = event.coordinate;
-    const geometry = this.sketchFeature_.getGeometry();
+    const geometry = /** @type {import("../geom/SimpleGeometry.js").default} */ (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 = this.sketchPoint_.getGeometry();
+      const sketchPointGeom = /** @type {Point} */ (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 = geometry.getLinearRing(0);
-      sketchLineGeom = this.sketchLine_.getGeometry();
+      const ring = /** @type {Polygon} */ (geometry).getLinearRing(0);
+      sketchLineGeom = /** @type {LineString} */ (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 = this.sketchLine_.getGeometry();
+      sketchLineGeom = /** @type {LineString} */ (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 = this.sketchFeature_.getGeometry();
+    const geometry = /** @type {import("../geom/SimpleGeometry.js").default} */ (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 = this.sketchFeature_.getGeometry();
+    const geometry = /** @type {import("../geom/SimpleGeometry.js").default} */ (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 = this.sketchLine_.getGeometry();
+      sketchLineGeom = /** @type {LineString} */ (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 = sketchFeature.getGeometry();
+    const geometry = /** @type {import("../geom/SimpleGeometry.js").default} */ (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<LineString>} feature Feature to be extended.
+   * @param {!Feature} feature Feature to be extended.
    * @api
    */
   extend(feature) {
     const geometry = feature.getGeometry();
-    const lineString = geometry;
+    const lineString = /** @type {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<Point>}
+     * @type {Feature}
      * @private
      */
     this.vertexFeature_ = null;
@@ -265,7 +265,7 @@ class Extent extends PointerInteraction {
       this.vertexFeature_ = vertexFeature;
       this.vertexOverlay_.getSource().addFeature(vertexFeature);
     } else {
-      const geometry = vertexFeature.getGeometry();
+      const geometry = /** @type {Point} */ (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 = vertexFeature.getGeometry();
+      const geometry = /** @type {Point} */ (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 = vertexFeature.getGeometry();
+      const geometry = /** @type {Point} */ (vertexFeature.getGeometry());
       const vertex = geometry.getCoordinates();
       const vertexExtent = boundingExtent([vertex]);
       const segmentDataMatches = this.rBush_.getInExtent(vertexExtent);

src/ol/interaction/Translate.js

@@ -35,13 +35,6 @@ 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
@@ -52,10 +45,6 @@ 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.
  */
@@ -147,12 +136,6 @@ class Translate extends PointerInteraction {
      */
     this.layerFilter_ = layerFilter;
 
-    /**
-     * @private
-     * @type {FilterFunction}
-     */
-    this.filter_ = options.filter ? options.filter : TRUE;
-
     /**
      * @private
      * @type {number}
@@ -262,11 +245,9 @@ class Translate extends PointerInteraction {
    */
   featuresAtPixel_(pixel, map) {
     return map.forEachFeatureAtPixel(pixel,
-      function(feature, layer) {
-        if (this.filter_(feature, layer)) {
-          if (!this.features_ || includes(this.features_.getArray(), feature)) {
-            return feature;
-          }
+      function(feature) {
+        if (!this.features_ || includes(this.features_.getArray(), feature)) {
+          return feature;
         }
       }.bind(this), {
         layerFilter: this.layerFilter_,

src/ol/layer/Base.js

@@ -83,9 +83,6 @@ 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.
    */
@@ -93,8 +90,7 @@ class BaseLayer extends BaseObject {
     /** @type {import("./Layer.js").State} */
     const state = this.state_ || /** @type {?} */ ({
       layer: this,
-      managed: opt_managed === undefined ? true : opt_managed,
-      hasOverlay: false
+      managed: opt_managed === undefined ? true : opt_managed
     });
     state.opacity = clamp(Math.round(this.getOpacity() * 100) / 100, 0, 1);
     state.sourceState = this.getSourceState();

src/ol/layer/BaseVector.js

@@ -72,7 +72,8 @@ class BaseVectorLayer extends Layer {
    * @param {Options=} opt_options Options.
    */
   constructor(opt_options) {
-    const options = opt_options ? opt_options : {};
+    const options = opt_options ?
+      opt_options : /** @type {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.js';
-import Text from '../style/Text.js';
-import Fill from '../style/Fill.js';
-import Stroke from '../style/Stroke.js';
+import {degreesToStringHDMS} from '../coordinate';
+import Text from '../style/Text';
+import Fill from '../style/Fill';
+import Stroke from '../style/Stroke';
 import LineString from '../geom/LineString.js';
-import VectorSource from '../source/Vector.js';
+import VectorSource from '../source/Vector';
 import {
   equivalent as equivalentProjection,
   get as getProjection,
   getTransform,
   transformExtent
-} 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';
+} 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';
 
 
 /**

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.js';
+import WebGLPointsLayerRenderer from '../renderer/webgl/PointsLayer';
 
 
 /**

src/ol/layer/Layer.js

@@ -45,7 +45,6 @@ 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
@@ -190,15 +189,13 @@ 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, target) {
+  render(frameState) {
     const layerRenderer = this.getRenderer();
-
-    if (layerRenderer.prepareFrame(frameState)) {
-      return layerRenderer.renderFrame(frameState, target);
+    const layerState = this.getLayerState();
+    if (layerRenderer.prepareFrame(frameState, layerState)) {
+      return layerRenderer.renderFrame(frameState, layerState);
     }
   }
 

src/ol/layer/Tile.js

@@ -5,6 +5,11 @@ 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
@@ -18,7 +23,7 @@ import CanvasTileLayerRenderer from '../renderer/canvas/TileLayer.js';
 class TileLayer extends BaseTileLayer {
 
   /**
-   * @param {import("./BaseTile.js").Options=} opt_options Tile layer options.
+   * @param {Options=} opt_options Tile layer options.
    */
   constructor(opt_options) {
     super(opt_options);

src/ol/layer/Vector.js

@@ -5,6 +5,11 @@ 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.
@@ -17,7 +22,7 @@ import CanvasVectorLayerRenderer from '../renderer/canvas/VectorLayer.js';
  */
 class VectorLayer extends BaseVectorLayer {
   /**
-   * @param {import("./BaseVector.js").Options=} opt_options Options.
+   * @param {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 : {};
+    const options = opt_options ? opt_options : /** @type {Options} */ ({});
 
     const baseOptions = assign({}, options);
     delete baseOptions.imageRatio;

src/ol/layer/VectorTile.js

@@ -86,12 +86,12 @@ class VectorTileLayer extends BaseVectorLayer {
     delete baseOptions.preload;
     delete baseOptions.useInterimTilesOnError;
 
-    super(/** @type {import("./BaseVector.js").Options} */ (baseOptions));
+    super(/** @type {import("./Vector.js").Options} */ (baseOptions));
 
     const renderMode = options.renderMode || VectorTileRenderType.HYBRID;
     assert(renderMode == undefined ||
-        renderMode == VectorTileRenderType.IMAGE ||
-        renderMode == VectorTileRenderType.HYBRID,
+       renderMode == VectorTileRenderType.IMAGE ||
+       renderMode == VectorTileRenderType.HYBRID,
     28); // `renderMode` must be `'image'` or `'hybrid'`
 
     /**

src/ol/ol.css

@@ -63,6 +63,10 @@
   border: 1px solid black;
 }
 
+.ol-overlay-container {
+  will-change: left,right,top,bottom;
+}
+
 .ol-unsupported {
   display: none;
 }

src/ol/pointer/PointerEventHandler.js

@@ -34,6 +34,7 @@
 
 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';
@@ -123,15 +124,15 @@ class PointerEventHandler extends EventTarget {
    * that generate pointer events.
    */
   registerSources() {
-    if ('PointerEvent' in window) {
+    if (POINTER) {
       this.registerSource('native', new NativeSource(this));
-    } else if (window.navigator.msPointerEnabled) {
+    } else if (MSPOINTER) {
       this.registerSource('ms', new MsSource(this));
     } else {
       const mouseSource = new MouseSource(this);
       this.registerSource('mouse', mouseSource);
 
-      if ('ontouchstart' in window) {
+      if (TOUCH) {
         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) {
-  addProj(projection.getCode(), projection);
+  projections.add(projection.getCode(), projection);
   addTransformFunc(projection, projection, cloneTransform);
 }
 
@@ -157,7 +157,7 @@ export function addProjections(projections) {
  */
 export function get(projectionLike) {
   return typeof projectionLike === 'string' ?
-    getProj(/** @type {string} */ (projectionLike)) :
+    projections.get(/** @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() {
-  clearProj();
+  projections.clear();
   clearTransformFuncs();
 }
 

src/ol/render.js

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

src/ol/render/Event.js

@@ -12,8 +12,9 @@ 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) {
+  constructor(type, opt_inversePixelTransform, opt_frameState, opt_context, opt_glContext) {
 
     super(type);
 
@@ -40,6 +41,14 @@ 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 (opacity != 1) {
+  if (alpha) {
     context.globalAlpha = alpha;
   }
   if (transform) {

src/ol/render/canvas/Executor.js

@@ -362,12 +362,10 @@ class Executor extends Disposable {
       const declutterArgs = intersects ?
         [context, transform ? transform.slice(0) : null, opacity, image, originX, originY, w, h, x, y, scale] :
         null;
-      if (declutterArgs) {
-        if (fillStroke) {
-          declutterArgs.push(fillInstruction, strokeInstruction, p1, p2, p3, p4);
-        }
-        declutterGroup.push(declutterArgs);
+      if (declutterArgs && fillStroke) {
+        declutterArgs.push(fillInstruction, strokeInstruction, p1, p2, p3, p4);
       }
+      declutterGroup.push(declutterArgs);
     } else if (intersects) {
       if (fillStroke) {
         this.replayTextBackground_(context, p1, p2, p3, p4,
@@ -416,11 +414,10 @@ class Executor extends Disposable {
   /**
    * @param {import("../canvas.js").DeclutterGroup} declutterGroup Declutter group.
    * @param {import("../../Feature.js").FeatureLike} feature Feature.
-   * @param {number} opacity Layer opacity.
    * @param {?} declutterTree Declutter tree.
    * @return {?} Declutter tree.
    */
-  renderDeclutter(declutterGroup, feature, opacity, declutterTree) {
+  renderDeclutter(declutterGroup, feature, declutterTree) {
     if (declutterGroup && declutterGroup.length > 5) {
       const groupCount = declutterGroup[4];
       if (groupCount == 1 || groupCount == declutterGroup.length - 5) {
@@ -439,19 +436,13 @@ class Executor extends Disposable {
           declutterTree.insert(box);
           for (let j = 5, jj = declutterGroup.length; j < jj; ++j) {
             const declutterData = /** @type {Array} */ (declutterGroup[j]);
-            const context = declutterData[0];
-            const currentAlpha = context.globalAlpha;
-            if (currentAlpha !== opacity) {
-              context.globalAlpha = opacity;
-            }
-            if (declutterData.length > 11) {
-              this.replayTextBackground_(declutterData[0],
-                declutterData[13], declutterData[14], declutterData[15], declutterData[16],
-                declutterData[11], declutterData[12]);
-            }
-            drawImage.apply(undefined, declutterData);
-            if (currentAlpha !== opacity) {
-              context.globalAlpha = currentAlpha;
+            if (declutterData) {
+              if (declutterData.length > 11) {
+                this.replayTextBackground_(declutterData[0],
+                  declutterData[13], declutterData[14], declutterData[15], declutterData[16],
+                  declutterData[11], declutterData[12]);
+              }
+              drawImage.apply(undefined, declutterData);
             }
           }
         }

src/ol/render/canvas/ExecutorGroup.js

@@ -430,11 +430,10 @@ export function getCircleArray(radius) {
  * @param {!Object<string, Array<*>>} declutterReplays Declutter replays.
  * @param {CanvasRenderingContext2D} context Context.
  * @param {number} rotation Rotation.
- * @param {number} opacity Opacity.
  * @param {boolean} snapToPixel Snap point symbols and text to integer pixels.
- * @param {Array<import("../../PluggableMap.js").DeclutterItems>} declutterItems Declutter items.
+ * @param {Array<Array<*>>} declutterItems Declutter items.
  */
-export function replayDeclutter(declutterReplays, context, rotation, opacity, snapToPixel, declutterItems) {
+export function replayDeclutter(declutterReplays, context, rotation, snapToPixel, declutterItems) {
   const zs = Object.keys(declutterReplays).map(Number).sort(numberSafeCompareFunction);
   const skippedFeatureUids = {};
   for (let z = 0, zz = zs.length; z < zz; ++z) {
@@ -444,10 +443,7 @@ export function replayDeclutter(declutterReplays, context, rotation, opacity, sn
       const executor = executorData[i++];
       if (executor !== currentExecutor) {
         currentExecutor = executor;
-        declutterItems.push({
-          items: executor.declutterItems,
-          opacity: opacity
-        });
+        declutterItems.push(executor.declutterItems);
       }
       const transform = executorData[i++];
       executor.execute(context, transform, rotation, skippedFeatureUids, snapToPixel);