Added missing Type component

Remove geolocation detection from ol/has

.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

.gitignore

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

changelog/upgrade-notes.md

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

config/jsdoc/api-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}`);
+    }
+  }
+
+};

examples/d3.html

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

examples/d3.js

@@ -85,7 +85,7 @@ const map = new Map({
 /**
  * Load the topojson data and create an ol/layer/Image for that data.
  */
-d3.json('data/topojson/us.json', function(error, us) {
+d3.json('data/topojson/us.json').then(function(us) {
 
   const layer = new CanvasLayer({
     features: topojson.feature(us, us.objects.counties)

examples/data/square.svg

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

examples/export-map.css

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

examples/export-map.html

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

examples/export-map.js

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

examples/extent-constrained.js

@@ -2,7 +2,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 {defaults as defaultControls} from '../src/ol/control/util';
+import {defaults as defaultControls} from '../src/ol/control.js';
 import ZoomSlider from '../src/ol/control/ZoomSlider';
 
 const view = new View({

examples/filter-points-webgl.js

@@ -11,7 +11,6 @@ import {clamp, lerp} from '../src/ol/math';
 import Stamen from '../src/ol/source/Stamen';
 
 const vectorSource = new Vector({
-  features: [],
   attributions: 'NASA'
 });
 

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

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

examples/full-screen-source.css

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

examples/full-screen.css

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

examples/heatmap-earthquakes.html

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

examples/icon-color.js

@@ -25,7 +25,7 @@ rome.setStyle(new Style({
   image: new Icon({
     color: '#8959A8',
     crossOrigin: 'anonymous',
-    src: 'data/dot.png'
+    src: 'data/square.svg'
   })
 }));
 

examples/mapbox-layer.js

@@ -1,12 +1,68 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
 import Layer from '../src/ol/layer/Layer';
-import {toLonLat} from '../src/ol/proj';
+import {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';
 import GeoJSON from '../src/ol/format/GeoJSON.js';
 
+const center = [-98.8, 37.9];
+const key = 'ER67WIiPdCQvhgsUjoWK';
+
+const mbMap = new mapboxgl.Map({
+  style: 'https://maps.tilehosting.com/styles/bright/style.json?key=' + key,
+  attributionControl: false,
+  boxZoom: false,
+  center: center,
+  container: 'map',
+  doubleClickZoom: false,
+  dragPan: false,
+  dragRotate: false,
+  interactive: false,
+  keyboard: false,
+  pitchWithRotate: false,
+  scrollZoom: false,
+  touchZoomRotate: false
+});
+
+const mbLayer = new Layer({
+  render: function(frameState) {
+    const canvas = mbMap.getCanvas();
+    const viewState = frameState.viewState;
+
+    const visible = mbLayer.getVisible();
+    canvas.style.display = visible ? 'block' : 'none';
+
+    const opacity = mbLayer.getOpacity();
+    canvas.style.opacity = opacity;
+
+    // adjust view parameters in mapbox
+    const rotation = viewState.rotation;
+    if (rotation) {
+      mbMap.rotateTo(-rotation * 180 / Math.PI, {
+        animate: false
+      });
+    }
+    mbMap.jumpTo({
+      center: toLonLat(viewState.center),
+      zoom: viewState.zoom - 1,
+      animate: false
+    });
+
+    // cancel the scheduled update & trigger synchronous redraw
+    // see https://github.com/mapbox/mapbox-gl-js/issues/7893#issue-408992184
+    // NOTE: THIS MIGHT BREAK WHEN UPDATING MAPBOX
+    if (mbMap._frame) {
+      mbMap._frame.cancel();
+      mbMap._frame = null;
+    }
+    mbMap._render();
+
+    return canvas;
+  }
+});
+
 const style = new Style({
   stroke: new Stroke({
     color: '#319FD3',
@@ -25,80 +81,8 @@ const vectorLayer = new VectorLayer({
 const map = new Map({
   target: 'map',
   view: new View({
-    center: [-10997148, 4569099],
+    center: fromLonLat(center),
-    zoom: 4,
+    zoom: 4
-    minZoom: 1,
+  }),
-    extent: [-Infinity, -20048966.10, Infinity, 20048966.10],
+  layers: [mbLayer, vectorLayer]
-    smoothExtentConstraint: false,
-    smoothResolutionConstraint: false
-  })
 });
-
-
-// init Mapbox object
-
-const view = map.getView();
-const center = toLonLat(view.getCenter(), view.getProjection());
-const key = 'ER67WIiPdCQvhgsUjoWK';
-
-const mbMap = new mapboxgl.Map({
-  style: 'https://maps.tilehosting.com/styles/bright/style.json?key=' + key,
-  attributionControl: false,
-  boxZoom: false,
-  center: center,
-  container: map.getTargetElement(),
-  doubleClickZoom: false,
-  dragPan: false,
-  dragRotate: false,
-  interactive: false,
-  keyboard: false,
-  pitchWithRotate: false,
-  scrollZoom: false,
-  touchZoomRotate: false,
-  zoom: view.getZoom() - 1
-});
-
-
-// init OL layers
-
-const mbLayer = new Layer({
-  render: function(frameState) {
-    const canvas = mbMap.getCanvas();
-    const view = map.getView();
-
-    const visible = mbLayer.getVisible();
-    canvas.style.display = visible ? 'block' : 'none';
-
-    const opacity = mbLayer.getOpacity();
-    canvas.style.opacity = opacity;
-
-    // adjust view parameters in mapbox
-    const rotation = frameState.viewState.rotation;
-    if (rotation) {
-      mbMap.rotateTo(-rotation * 180 / Math.PI, {
-        animate: false
-      });
-    }
-    const center = toLonLat(view.getCenter(), view.getProjection());
-    const zoom = view.getZoom() - 1;
-    mbMap.jumpTo({
-      center: center,
-      zoom: zoom,
-      animate: false
-    });
-
-    // cancel the scheduled update & trigger synchronous redraw
-    // see https://github.com/mapbox/mapbox-gl-js/issues/7893#issue-408992184
-    // NOTE: THIS MIGHT BREAK WHEN UPDATING MAPBOX
-    if (mbMap._frame) {
-      mbMap._frame.cancel();
-      mbMap._frame = null;
-    }
-    mbMap._render();
-
-    return canvas;
-  }
-});
-
-map.addLayer(mbLayer);
-map.addLayer(vectorLayer);

examples/mapguide-untiled.js

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

examples/webpack/config.js

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

examples/webpack/worker-loader.js

@@ -0,0 +1,24 @@
+const build = require('../../tasks/serialize-workers').build;
+
+function loader() {
+  const callback = this.async();
+
+  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 => {
+      for (const filePath in chunk.modules) {
+        this.addDependency(filePath);
+      }
+      callback(null, chunk.code);
+    })
+    .catch(callback);
+}
+
+module.exports = loader;

examples/worker.html

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

examples/worker.js

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

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

@@ -22,9 +22,12 @@
     "build-index": "npm run build-package && node tasks/generate-index",
     "build-legacy": "shx rm -rf build && npm run build-index && webpack --config config/webpack-config-legacy-build.js && cleancss --source-map src/ol/ol.css -o build/legacy/ol.css",
     "copy-css": "shx cp src/ol/ol.css build/ol/ol.css",
-    "transpile": "shx rm -rf build/ol && shx mkdir -p build/ol && shx cp -rf src/ol build/ol/src && tsc --project config/tsconfig-build.json",
+    "transpile": "shx rm -rf build/ol && shx mkdir -p build/ol && shx cp -rf src/ol build/ol/src && node tasks/serialize-workers && tsc --project config/tsconfig-build.json",
     "typecheck": "tsc --pretty",
-    "apidoc": "jsdoc -R config/jsdoc/api/index.md -c config/jsdoc/api/conf.json -P package.json -d build/apidoc"
+    "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": {
@@ -38,16 +41,17 @@
   "dependencies": {
     "pbf": "3.2.0",
     "pixelworks": "1.1.0",
-    "rbush": "2.0.2"
+    "rbush": "^3.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.4.0",
-    "@babel/preset-env": "^7.4.2",
+    "@babel/preset-env": "^7.4.4",
+    "@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",
     "@types/pbf": "^3.0.1",
-    "@types/rbush": "^2.0.2",
     "@types/topojson-specification": "^1.0.1",
     "babel-loader": "^8.0.5",
     "buble": "^0.19.7",
@@ -58,9 +62,14 @@
     "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",
@@ -69,7 +78,8 @@
     "istanbul-instrumenter-loader": "^3.0.1",
     "jquery": "3.4.1",
     "jsdoc": "3.6.2",
-    "jsdoc-plugin-typescript": "^2.0.0",
+    "jsdoc-json": "^2.0.2",
+    "jsdoc-plugin-typescript": "^2.0.1",
     "karma": "^4.1.0",
     "karma-chrome-launcher": "2.2.0",
     "karma-coverage": "^1.1.2",
@@ -81,16 +91,29 @@
     "loglevelnext": "^3.0.1",
     "marked": "0.6.2",
     "mocha": "6.1.4",
-    "ol-mapbox-style": "^5.0.0-beta.1",
+    "ol-mapbox-style": "^5.0.0-beta.2",
     "pixelmatch": "^4.0.2",
     "pngjs": "^3.4.0",
     "proj4": "2.5.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": "^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.31.0",

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

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

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

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

src/ol/Image.js

@@ -58,9 +58,9 @@ class ImageWrapper extends ImageBase {
 
     /**
      * @private
-     * @type {Array<import("./events.js").EventsKey>}
+     * @type {function():void}
      */
-    this.imageListenerKeys_ = null;
+    this.unlisten_ = null;
 
     /**
      * @protected
@@ -120,13 +120,12 @@ class ImageWrapper extends ImageBase {
     if (this.state == ImageState.IDLE || this.state == ImageState.ERROR) {
       this.state = ImageState.LOADING;
       this.changed();
-      this.imageListenerKeys_ = [
-        listenOnce(this.image_, EventType.ERROR,
-          this.handleImageError_, this),
-        listenOnce(this.image_, EventType.LOAD,
-          this.handleImageLoad_, this)
-      ];
       this.imageLoadFunction_(this, this.src_);
+      this.unlisten_ = listenImage(
+        this.image_,
+        this.handleImageLoad_.bind(this),
+        this.handleImageError_.bind(this)
+      );
     }
   }
 
@@ -143,10 +142,47 @@ class ImageWrapper extends ImageBase {
    * @private
    */
   unlistenImage_() {
-    this.imageListenerKeys_.forEach(unlistenByKey);
+    if (this.unlisten_) {
-    this.imageListenerKeys_ = null;
+      this.unlisten_();
+      this.unlisten_ = null;
+    }
   }
 }
 
+/**
+ * @param {HTMLCanvasElement|HTMLImageElement|HTMLVideoElement} image Image element.
+ * @param {function():any} loadHandler Load callback function.
+ * @param {function():any} errorHandler Error callback function.
+ * @return {function():void} Callback to stop listening.
+ */
+export function listenImage(image, loadHandler, errorHandler) {
+  const img = /** @type {HTMLImageElement} */ (image);
+  if (img.decode) {
+    const promise = img.decode();
+    let listening = true;
+    const unlisten = function() {
+      listening = false;
+    };
+    promise.then(function() {
+      if (listening) {
+        loadHandler();
+      }
+    }).catch(function(error) {
+      if (listening) {
+        errorHandler();
+      }
+    });
+    return unlisten;
+  }
+
+  const listenerKeys = [
+    listenOnce(img, EventType.LOAD, loadHandler),
+    listenOnce(img, EventType.ERROR, errorHandler)
+  ];
+  return function unlisten() {
+    listenerKeys.forEach(unlistenByKey);
+  };
+}
+
 
 export default ImageWrapper;

src/ol/ImageTile.js

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

src/ol/Map.js

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

src/ol/PluggableMap.js

@@ -293,6 +293,11 @@ class PluggableMap extends BaseObject {
      */
     this.interactions = optionsInternal.interactions || new Collection();
 
+    /**
+     * @type {import("./events.js").EventsKey}
+     */
+    this.labelCacheListenerKey_;
+
     /**
      * @type {Collection<import("./Overlay.js").default>}
      * @private
@@ -498,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
@@ -515,6 +538,7 @@ class PluggableMap extends BaseObject {
       cancelAnimationFrame(this.animationDelayKey_);
       this.animationDelayKey_ = undefined;
     }
+    this.detachLabelCache();
     this.setTarget(null);
     super.disposeInternal();
   }
@@ -763,6 +787,21 @@ class PluggableMap extends BaseObject {
     return layers;
   }
 
+  /**
+   * @return {boolean} Layers have sources that are still loading.
+   */
+  getLoading() {
+    const layerStatesArray = this.getLayerGroup().getLayerStatesArray();
+    for (let i = 0, ii = layerStatesArray.length; i < ii; ++i) {
+      const layer = layerStatesArray[i].layer;
+      const source = /** @type {import("./layer/Layer.js").default} */ (layer).getSource();
+      if (source && source.loading) {
+        return true;
+      }
+    }
+    return false;
+  }
+
   /**
    * Get the pixel for a coordinate.  This takes a coordinate in the map view
    * projection and returns the corresponding pixel.
@@ -950,7 +989,7 @@ class PluggableMap extends BaseObject {
     }
 
     if (frameState && this.hasListener(RenderEventType.RENDERCOMPLETE) && !frameState.animate &&
-        !this.tileQueue_.getTilesLoading() && !getLoading(this.getLayers().getArray())) {
+        !this.tileQueue_.getTilesLoading() && !this.getLoading()) {
       this.renderer_.dispatchRenderEvent(RenderEventType.RENDERCOMPLETE, frameState);
     }
 
@@ -994,7 +1033,6 @@ class PluggableMap extends BaseObject {
     }
 
     if (!targetElement) {
-      this.renderer_.removeLayerRenderers();
       removeNode(this.viewport_);
       if (this.handleResize_ !== undefined) {
         removeEventListener(EventType.RESIZE, this.handleResize_, false);
@@ -1102,6 +1140,19 @@ class PluggableMap extends BaseObject {
     this.animationDelay_();
   }
 
+  /**
+   * Redraws all text after new fonts have loaded
+   */
+  redrawText() {
+    const layerStates = this.getLayerGroup().getLayerStatesArray();
+    for (let i = 0, ii = layerStates.length; i < ii; ++i) {
+      const layer = layerStates[i].layer;
+      if (layer.hasRenderer()) {
+        layer.getRenderer().handleFontsChanged();
+      }
+    }
+  }
+
   /**
    * Request a map rendering (at the next animation frame).
    * @api
@@ -1398,23 +1449,3 @@ function createOptionsInternal(options) {
 
 }
 export default PluggableMap;
-
-/**
- * @param  {Array<import("./layer/Base.js").default>} layers Layers.
- * @return {boolean} Layers have sources that are still loading.
- */
-function getLoading(layers) {
-  for (let i = 0, ii = layers.length; i < ii; ++i) {
-    const layer = layers[i];
-    if (typeof /** @type {?} */ (layer).getLayers === 'function') {
-      return getLoading(/** @type {LayerGroup} */ (layer).getLayers().getArray());
-    } else {
-      const source = /** @type {import("./layer/Layer.js").default} */ (
-        layer).getSource();
-      if (source && source.loading) {
-        return true;
-      }
-    }
-  }
-  return false;
-}

src/ol/View.js

@@ -1409,11 +1409,19 @@ function animationCallback(callback, returnValue) {
  */
 export function createCenterConstraint(options) {
   if (options.extent !== undefined) {
-    return createExtent(options.extent, options.constrainOnlyCenter,
+    const smooth = options.smoothExtentConstraint !== undefined ? options.smoothExtentConstraint : true;
-      options.smoothExtentConstraint !== undefined ? options.smoothExtentConstraint : true);
+    return createExtent(options.extent, options.constrainOnlyCenter, smooth);
-  } else {
-    return centerNone;
   }
+
+  const projection = createProjection(options.projection, 'EPSG:3857');
+  if (options.multiWorld !== true && projection.isGlobal()) {
+    const extent = projection.getExtent().slice();
+    extent[0] = -Infinity;
+    extent[2] = Infinity;
+    return createExtent(extent, false, false);
+  }
+
+  return centerNone;
 }
 
 

src/ol/control.js

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

src/ol/control/OverviewMap.js

@@ -1,8 +1,8 @@
 /**
  * @module ol/control/OverviewMap
  */
-import Collection from '../Collection.js';
+import PluggableMap from '../PluggableMap.js';
-import Map from '../Map.js';
+import CompositeMapRenderer from '../renderer/Composite.js';
 import MapEventType from '../MapEventType.js';
 import MapProperty from '../MapProperty.js';
 import {getChangeEventType} from '../Object.js';
@@ -35,6 +35,13 @@ const MAX_RATIO = 0.75;
 const MIN_RATIO = 0.1;
 
 
+class ControlledMap extends PluggableMap {
+  createRenderer() {
+    return new CompositeMapRenderer(this);
+  }
+}
+
+
 /**
  * @typedef {Object} Options
  * @property {string} [className='ol-overviewmap'] CSS class name.
@@ -143,12 +150,10 @@ class OverviewMap extends Control {
     this.ovmapDiv_.className = 'ol-overviewmap-map';
 
     /**
-     * @type {import("../Map.js").default}
+     * @type {ControlledMap}
      * @private
      */
-    this.ovmap_ = new Map({
+    this.ovmap_ = new ControlledMap({
-      controls: new Collection(),
-      interactions: new Collection(),
       view: options.view
     });
     const ovmap = this.ovmap_;

src/ol/control/util.js

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

src/ol/events/EventType.js

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

src/ol/format/KML.js

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

src/ol/geom/flat/textpath.js

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

src/ol/has.js

@@ -40,15 +40,6 @@ export const MAC = ua.indexOf('macintosh') !== -1;
 export const DEVICE_PIXEL_RATIO = window.devicePixelRatio || 1;
 
 
-/**
- * Is HTML5 geolocation supported in the current browser?
- * @const
- * @type {boolean}
- * @api
- */
-export const GEOLOCATION = 'geolocation' in navigator;
-
-
 /**
  * True if browser supports touch events.
  * @const

src/ol/layer/Layer.js

@@ -254,6 +254,13 @@ class Layer extends BaseLayer {
     return this.renderer_;
   }
 
+  /**
+   * @return {boolean} The layer has a renderer.
+   */
+  hasRenderer() {
+    return !!this.renderer_;
+  }
+
   /**
    * Create a renderer for this layer.
    * @return {import("../renderer/Layer.js").default} A layer renderer.

src/ol/math.js

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

src/ol/ol.css

@@ -127,11 +127,6 @@
   right: .5em;
   top: .5em;
 }
-@media print {
-  .ol-control {
-    display: none;
-  }
-}
 
 .ol-control button {
   display: block;

src/ol/render/canvas/Executor.js

@@ -21,7 +21,7 @@ import {
 import {createCanvasContext2D} from '../../dom.js';
 import {labelCache, defaultTextAlign, measureTextHeight, measureAndCacheTextWidth, measureTextWidths} from '../canvas.js';
 import Disposable from '../../Disposable.js';
-import rbush from 'rbush';
+import RBush from 'rbush';
 
 
 /**
@@ -193,9 +193,10 @@ class Executor extends Disposable {
       const width = measureTextWidths(textState.font, lines, widths);
       const lineHeight = measureTextHeight(textState.font);
       const height = lineHeight * numLines;
-      const renderWidth = (width + strokeWidth);
+      const renderWidth = width + strokeWidth;
       const context = createCanvasContext2D(
-        Math.ceil(renderWidth * scale),
+        // make canvas 2 pixels wider to account for italic text width measurement errors
+        Math.ceil((renderWidth + 2) * scale),
         Math.ceil((height + strokeWidth) * scale));
       label = context.canvas;
       labelCache.set(key, label);
@@ -220,7 +221,7 @@ class Executor extends Disposable {
       context.textBaseline = 'middle';
       context.textAlign = 'center';
       const leftRight = (0.5 - align);
-      const x = align * label.width / scale + leftRight * strokeWidth;
+      const x = align * renderWidth + leftRight * strokeWidth;
       let i;
       if (strokeKey) {
         for (i = 0; i < numLines; ++i) {
@@ -429,7 +430,7 @@ class Executor extends Disposable {
           value: feature
         };
         if (!declutterTree) {
-          declutterTree = rbush(9, undefined);
+          declutterTree = new RBush(9);
         }
         if (!declutterTree.collides(box)) {
           declutterTree.insert(box);
@@ -471,7 +472,9 @@ class Executor extends Disposable {
     const baseline = TEXT_ALIGN[textState.textBaseline || defaultTextBaseline];
     const strokeWidth = strokeState && strokeState.lineWidth ? strokeState.lineWidth : 0;
 
-    const anchorX = align * label.width / pixelRatio + 2 * (0.5 - align) * strokeWidth;
+    // Remove the 2 pixels we added in getTextImage() for the anchor
+    const width = label.width / pixelRatio - 2 * textState.scale;
+    const anchorX = align * width + 2 * (0.5 - align) * strokeWidth;
     const anchorY = baseline * label.height / pixelRatio + 2 * (0.5 - baseline) * strokeWidth;
 
     return {

src/ol/render/canvas/ExecutorGroup.js

@@ -82,7 +82,7 @@ class ExecutorGroup extends Disposable {
      * @private
      * @type {CanvasRenderingContext2D}
      */
-    this.hitDetectionContext_ = createCanvasContext2D(1, 1);
+    this.hitDetectionContext_ = null;
 
     /**
      * @private
@@ -137,8 +137,11 @@ class ExecutorGroup extends Disposable {
         executors[key].disposeInternal();
       }
     }
-    const canvas = this.hitDetectionContext_.canvas;
+    if (this.hitDetectionContext_) {
-    canvas.width = canvas.height = 0;
+      const canvas = this.hitDetectionContext_.canvas;
+      canvas.width = canvas.height = 0;
+    }
+
     super.disposeInternal();
   }
 
@@ -187,6 +190,10 @@ class ExecutorGroup extends Disposable {
       1 / resolution, -1 / resolution,
       -rotation,
       -coordinate[0], -coordinate[1]);
+
+    if (!this.hitDetectionContext_) {
+      this.hitDetectionContext_ = createCanvasContext2D(contextSize, contextSize);
+    }
     const context = this.hitDetectionContext_;
 
     if (context.canvas.width !== contextSize || context.canvas.height !== contextSize) {

src/ol/renderer/Composite.js

@@ -8,6 +8,7 @@ import RenderEventType from '../render/EventType.js';
 import MapRenderer from './Map.js';
 import SourceState from '../source/State.js';
 import {replaceChildren} from '../dom.js';
+import {labelCache} from '../render/canvas.js';
 
 
 /**
@@ -22,6 +23,7 @@ class CompositeMapRenderer extends MapRenderer {
    */
   constructor(map) {
     super(map);
+    map.attachLabelCache(labelCache);
 
     /**
      * @private
@@ -111,7 +113,6 @@ class CompositeMapRenderer extends MapRenderer {
       this.renderedVisible_ = true;
     }
 
-    this.scheduleRemoveUnusedLayerRenderers(frameState);
     this.scheduleExpireIconCache(frameState);
   }
 
@@ -128,11 +129,8 @@ class CompositeMapRenderer extends MapRenderer {
     for (let i = numLayers - 1; i >= 0; --i) {
       const layerState = layerStates[i];
       const layer = layerState.layer;
-      if (visibleAtResolution(layerState, viewResolution) && layerFilter(layer)) {
+      if (layer.hasRenderer() && visibleAtResolution(layerState, viewResolution) && layerFilter(layer)) {
-        const layerRenderer = this.getLayerRenderer(layer);
+        const layerRenderer = layer.getRenderer();
-        if (!layerRenderer) {
-          continue;
-        }
         const data = layerRenderer.getDataAtPixel(pixel, frameState, hitTolerance);
         if (data) {
           const result = callback(layer, data);

src/ol/renderer/Layer.js

@@ -115,6 +115,12 @@ class LayerRenderer extends Observable {
     return this.layer_;
   }
 
+  /**
+   * Perform action necessary to get the layer rendered after new fonts have loaded
+   * @abstract
+   */
+  handleFontsChanged() {}
+
   /**
    * Handle changes in image state.
    * @param {import("../events/Event.js").default} event Image change event.

src/ol/renderer/Map.js

@@ -3,8 +3,6 @@
  */
 import {abstract, getUid} from '../util.js';
 import Disposable from '../Disposable.js';
-import {listen, unlistenByKey} from '../events.js';
-import EventType from '../events/EventType.js';
 import {getWidth} from '../extent.js';
 import {TRUE} from '../functions.js';
 import {visibleAtResolution} from '../layer/Layer.js';
@@ -34,18 +32,6 @@ class MapRenderer extends Disposable {
      */
     this.declutterTree_ = null;
 
-    /**
-     * @private
-     * @type {!Object<string, import("./Layer.js").default>}
-     */
-    this.layerRenderers_ = {};
-
-    /**
-     * @private
-     * @type {Object<string, import("../events.js").EventsKey>}
-     */
-    this.layerRendererListeners_ = {};
-
   }
 
   /**
@@ -75,15 +61,6 @@ class MapRenderer extends Disposable {
     makeInverse(pixelToCoordinateTransform, coordinateToPixelTransform);
   }
 
-  /**
-   * Removes all layer renderers.
-   */
-  removeLayerRenderers() {
-    for (const key in this.layerRenderers_) {
-      this.removeLayerRendererByKey_(key).dispose();
-    }
-  }
-
   /**
    * @param {import("../coordinate.js").Coordinate} coordinate Coordinate.
    * @param {import("../PluggableMap.js").FrameState} frameState FrameState.
@@ -149,8 +126,8 @@ class MapRenderer extends Disposable {
     for (i = numLayers - 1; i >= 0; --i) {
       const layerState = layerStates[i];
       const layer = /** @type {import("../layer/Layer.js").default} */ (layerState.layer);
-      if (visibleAtResolution(layerState, viewResolution) && layerFilter.call(thisArg2, layer)) {
+      if (layer.hasRenderer() && visibleAtResolution(layerState, viewResolution) && layerFilter.call(thisArg2, layer)) {
-        const layerRenderer = this.getLayerRenderer(layer);
+        const layerRenderer = layer.getRenderer();
         const source = layer.getSource();
         if (layerRenderer && source) {
           const callback = forEachFeatureAtCoordinate.bind(null, layerState.managed);
@@ -203,35 +180,6 @@ class MapRenderer extends Disposable {
     return hasFeature !== undefined;
   }
 
-  /**
-   * @param {import("../layer/Layer.js").default} layer Layer.
-   * @protected
-   * @return {import("./Layer.js").default} Layer renderer. May return null.
-   */
-  getLayerRenderer(layer) {
-    const layerKey = getUid(layer);
-    if (layerKey in this.layerRenderers_) {
-      return this.layerRenderers_[layerKey];
-    }
-
-    const renderer = layer.getRenderer();
-    if (!renderer) {
-      return null;
-    }
-
-    this.layerRenderers_[layerKey] = renderer;
-    this.layerRendererListeners_[layerKey] = listen(renderer, EventType.CHANGE, this.handleLayerRendererChange_, this);
-    return renderer;
-  }
-
-  /**
-   * @protected
-   * @return {Object<string, import("./Layer.js").default>} Layer renderers.
-   */
-  getLayerRenderers() {
-    return this.layerRenderers_;
-  }
-
   /**
    * @return {import("../PluggableMap.js").default} Map.
    */
@@ -239,29 +187,6 @@ class MapRenderer extends Disposable {
     return this.map_;
   }
 
-  /**
-   * Handle changes in a layer renderer.
-   * @private
-   */
-  handleLayerRendererChange_() {
-    this.map_.render();
-  }
-
-  /**
-   * @param {string} layerKey Layer key.
-   * @return {import("./Layer.js").default} Layer renderer.
-   * @private
-   */
-  removeLayerRendererByKey_(layerKey) {
-    const layerRenderer = this.layerRenderers_[layerKey];
-    delete this.layerRenderers_[layerKey];
-
-    unlistenByKey(this.layerRendererListeners_[layerKey]);
-    delete this.layerRendererListeners_[layerKey];
-
-    return layerRenderer;
-  }
-
   /**
    * Render.
    * @param {?import("../PluggableMap.js").FrameState} frameState Frame state.
@@ -279,21 +204,6 @@ class MapRenderer extends Disposable {
       frameState.postRenderFunctions.push(expireIconCache);
     }
   }
-
-  /**
-   * @param {!import("../PluggableMap.js").FrameState} frameState Frame state.
-   * @protected
-   */
-  scheduleRemoveUnusedLayerRenderers(frameState) {
-    const layerStatesMap = getLayerStatesMap(frameState.layerStatesArray);
-    for (const layerKey in this.layerRenderers_) {
-      if (!(layerKey in layerStatesMap)) {
-        frameState.postRenderFunctions.push(function() {
-          this.removeLayerRendererByKey_(layerKey).dispose();
-        }.bind(this));
-      }
-    }
-  }
 }
 
 
@@ -305,15 +215,4 @@ function expireIconCache(map, frameState) {
   iconImageCache.expire();
 }
 
-/**
- * @param {Array<import("../layer/Layer.js").State>} layerStatesArray Layer states array.
- * @return {Object<string, import("../layer/Layer.js").State>} States mapped by layer uid.
- */
-function getLayerStatesMap(layerStatesArray) {
-  return layerStatesArray.reduce(function(acc, state) {
-    acc[getUid(state.layer)] = state;
-    return acc;
-  }, {});
-}
-
 export default MapRenderer;

src/ol/renderer/canvas/VectorImageLayer.js

@@ -53,6 +53,13 @@ class CanvasVectorImageLayerRenderer extends CanvasImageLayerRenderer {
     super.disposeInternal();
   }
 
+  /**
+   * @inheritDoc
+   */
+  handleFontsChanged() {
+    this.vectorRenderer_.handleFontsChanged();
+  }
+
   /**
    * @inheritDoc
    */

src/ol/renderer/canvas/VectorLayer.js

@@ -3,10 +3,7 @@
  */
 import {getUid} from '../../util.js';
 import ViewHint from '../../ViewHint.js';
-import {listen, unlisten} from '../../events.js';
-import EventType from '../../events/EventType.js';
 import {buffer, createEmpty, containsExtent, getWidth} from '../../extent.js';
-import {labelCache} from '../../render/canvas.js';
 import CanvasBuilderGroup from '../../render/canvas/BuilderGroup.js';
 import ExecutorGroup, {replayDeclutter} from '../../render/canvas/ExecutorGroup.js';
 import CanvasLayerRenderer from './Layer.js';
@@ -68,16 +65,6 @@ class CanvasVectorLayerRenderer extends CanvasLayerRenderer {
      * @type {boolean}
      */
     this.replayGroupChanged = true;
-
-    listen(labelCache, EventType.CLEAR, this.handleFontsChanged_, this);
-  }
-
-  /**
-   * @inheritDoc
-   */
-  disposeInternal() {
-    unlisten(labelCache, EventType.CLEAR, this.handleFontsChanged_, this);
-    super.disposeInternal();
   }
 
   /**
@@ -211,9 +198,9 @@ class CanvasVectorLayerRenderer extends CanvasLayerRenderer {
   }
 
   /**
-   * @param {import("../../events/Event.js").default} event Event.
+   * @inheritDoc
    */
-  handleFontsChanged_(event) {
+  handleFontsChanged() {
     const layer = this.getLayer();
     if (layer.getVisible() && this.replayGroup_) {
       layer.changed();

src/ol/renderer/canvas/VectorTileLayer.js

@@ -5,19 +5,17 @@ import {getUid} from '../../util.js';
 import {createCanvasContext2D} from '../../dom.js';
 import TileState from '../../TileState.js';
 import ViewHint from '../../ViewHint.js';
-import {listen, unlisten, unlistenByKey} from '../../events.js';
+import {listen, unlistenByKey} from '../../events.js';
 import EventType from '../../events/EventType.js';
-import {buffer, containsCoordinate, equals, getIntersection, getTopLeft, intersects} from '../../extent.js';
+import {buffer, containsCoordinate, equals, getIntersection, intersects} from '../../extent.js';
 import VectorTileRenderType from '../../layer/VectorTileRenderType.js';
 import ReplayType from '../../render/canvas/BuilderType.js';
-import {labelCache} from '../../render/canvas.js';
 import CanvasBuilderGroup from '../../render/canvas/BuilderGroup.js';
 import CanvasTileLayerRenderer from './TileLayer.js';
 import {getSquaredTolerance as getSquaredRenderTolerance, renderFeature} from '../vector.js';
 import {
   apply as applyTransform,
   create as createTransform,
-  compose as composeTransform,
   reset as resetTransform,
   scale as scaleTransform,
   translate as translateTransform,
@@ -133,16 +131,12 @@ class CanvasVectorTileLayerRenderer extends CanvasTileLayerRenderer {
 
     // Use nearest lower resolution.
     this.zDirection = 1;
-
-    listen(labelCache, EventType.CLEAR, this.handleFontsChanged_, this);
-
   }
 
   /**
    * @inheritDoc
    */
   disposeInternal() {
-    unlisten(labelCache, EventType.CLEAR, this.handleFontsChanged_, this);
     this.overlayContext_.canvas.width = this.overlayContext_.canvas.height = 0;
     super.disposeInternal();
   }
@@ -364,38 +358,9 @@ class CanvasVectorTileLayerRenderer extends CanvasTileLayerRenderer {
   }
 
   /**
-   * @param {import("../../VectorTile.js").default} tile Tile.
+   * @inheritDoc
-   * @param {import("../../PluggableMap.js").FrameState} frameState Frame state.
-   * @return {import("../../transform.js").Transform} transform Transform.
-   * @private
    */
-  getReplayTransform_(tile, frameState) {
+  handleFontsChanged() {
-    const layer = this.getLayer();
-    const source = layer.getSource();
-    const tileGrid = source.getTileGrid();
-    const tileCoord = tile.tileCoord;
-    const tileResolution = tileGrid.getResolution(tileCoord[0]);
-    const viewState = frameState.viewState;
-    const pixelRatio = frameState.pixelRatio;
-    const renderResolution = viewState.resolution / pixelRatio;
-    const tileExtent = tileGrid.getTileCoordExtent(tileCoord, this.tmpExtent);
-    const center = viewState.center;
-    const origin = getTopLeft(tileExtent);
-    const size = frameState.size;
-    const offsetX = Math.round(pixelRatio * size[0] / 2);
-    const offsetY = Math.round(pixelRatio * size[1] / 2);
-    return composeTransform(this.tmpTransform_,
-      offsetX, offsetY,
-      tileResolution / renderResolution, tileResolution / renderResolution,
-      viewState.rotation,
-      (origin[0] - center[0]) / tileResolution,
-      (center[1] - origin[1]) / tileResolution);
-  }
-
-  /**
-   * @param {import("../../events/Event.js").default} event Event.
-   */
-  handleFontsChanged_(event) {
     const layer = this.getLayer();
     if (layer.getVisible() && this.renderedLayerRevision_ !== undefined) {
       layer.changed();

src/ol/renderer/webgl/Layer.js

@@ -0,0 +1,162 @@
+/**
+ * @module ol/renderer/webgl/Layer
+ */
+import LayerRenderer from '../Layer.js';
+import WebGLHelper from '../../webgl/Helper';
+
+
+/**
+ * @typedef {Object} PostProcessesOptions
+ * @property {number} [scaleRatio] Scale ratio; if < 1, the post process will render to a texture smaller than
+ * the main canvas that will then be sampled up (useful for saving resource on blur steps).
+ * @property {string} [vertexShader] Vertex shader source
+ * @property {string} [fragmentShader] Fragment shader source
+ * @property {Object.<string,import("../../webgl/Helper").UniformValue>} [uniforms] Uniform definitions for the post process step
+ */
+
+/**
+ * @typedef {Object} Options
+ * @property {Object.<string,import("../../webgl/Helper").UniformValue>} [uniforms] Uniform definitions for the post process steps
+ * @property {Array<PostProcessesOptions>} [postProcesses] Post-processes definitions
+ */
+
+/**
+ * @classdesc
+ * Base WebGL renderer class.
+ * Holds all logic related to data manipulation & some common rendering logic
+ */
+class WebGLLayerRenderer extends LayerRenderer {
+
+  /**
+   * @param {import("../../layer/Layer.js").default} layer Layer.
+   * @param {Options=} [opt_options] Options.
+   */
+  constructor(layer, opt_options) {
+    super(layer);
+
+    const options = opt_options || {};
+
+    this.helper_ = new WebGLHelper({
+      postProcesses: options.postProcesses,
+      uniforms: options.uniforms
+    });
+  }
+
+  /**
+   * @inheritDoc
+   */
+  disposeInternal() {
+    super.disposeInternal();
+  }
+
+  /**
+   * Will return the last shader compilation errors. If no error happened, will return null;
+   * @return {string|null} Errors, or null if last compilation was successful
+   * @api
+   */
+  getShaderCompileErrors() {
+    return this.helper_.getShaderCompileErrors();
+  }
+}
+
+
+/**
+ * Pushes vertices and indices to the given buffers using the geometry coordinates and the following properties
+ * from the feature:
+ * - `color`
+ * - `opacity`
+ * - `size` (for points)
+ * - `u0`, `v0`, `u1`, `v1` (for points)
+ * - `rotateWithView` (for points)
+ * - `width` (for lines)
+ * Custom attributes can be designated using the `opt_attributes` argument, otherwise other properties on the
+ * feature will be ignored.
+ * @param {import("../../webgl/Buffer").default} vertexBuffer WebGL buffer in which new vertices will be pushed.
+ * @param {import("../../webgl/Buffer").default} indexBuffer WebGL buffer in which new indices will be pushed.
+ * @param {import("../../format/GeoJSON").GeoJSONFeature} geojsonFeature Feature in geojson format, coordinates
+ * expressed in EPSG:4326.
+ * @param {Array<string>} [opt_attributes] Custom attributes. An array of properties which will be read from the
+ * feature and pushed in the buffer in the given order. Note: attributes can only be numerical! Any other type or
+ * NaN will result in `0` being pushed in the buffer.
+ */
+export function pushFeatureToBuffer(vertexBuffer, indexBuffer, geojsonFeature, opt_attributes) {
+  if (!geojsonFeature.geometry) {
+    return;
+  }
+  switch (geojsonFeature.geometry.type) {
+    case 'Point':
+      pushPointFeatureToBuffer_(vertexBuffer, indexBuffer, geojsonFeature, opt_attributes);
+      return;
+    default:
+      return;
+  }
+}
+
+const tmpArray_ = [];
+
+/**
+ * Pushes a quad (two triangles) based on a point geometry
+ * @param {import("../../webgl/Buffer").default} vertexBuffer WebGL buffer
+ * @param {import("../../webgl/Buffer").default} indexBuffer WebGL buffer
+ * @param {import("../../format/GeoJSON").GeoJSONFeature} geojsonFeature Feature
+ * @param {Array<string>} [opt_attributes] Custom attributes
+ * @private
+ */
+function pushPointFeatureToBuffer_(vertexBuffer, indexBuffer, geojsonFeature, opt_attributes) {
+  const stride = 12 + (opt_attributes !== undefined ? opt_attributes.length : 0);
+
+  const x = geojsonFeature.geometry.coordinates[0];
+  const y = geojsonFeature.geometry.coordinates[1];
+  const u0 = geojsonFeature.properties.u0;
+  const v0 = geojsonFeature.properties.v0;
+  const u1 = geojsonFeature.properties.u1;
+  const v1 = geojsonFeature.properties.v1;
+  const size = geojsonFeature.properties.size;
+  const opacity = geojsonFeature.properties.opacity;
+  const rotateWithView = geojsonFeature.properties.rotateWithView;
+  const color = geojsonFeature.properties.color;
+  const red = color[0];
+  const green = color[1];
+  const blue = color[2];
+  const alpha = color[3];
+  const baseIndex = vertexBuffer.getArray().length / stride;
+
+  // read custom numerical attributes on the feature
+  const customAttributeValues = tmpArray_;
+  customAttributeValues.length = opt_attributes ? opt_attributes.length : 0;
+  for (let i = 0; i < customAttributeValues.length; i++) {
+    customAttributeValues[i] = parseFloat(geojsonFeature.properties[opt_attributes[i]]) || 0;
+  }
+
+  // push vertices for each of the four quad corners (first standard then custom attributes)
+  vertexBuffer.getArray().push(x, y, -size / 2, -size / 2, u0, v0, opacity, rotateWithView, red, green, blue, alpha);
+  Array.prototype.push.apply(vertexBuffer.getArray(), customAttributeValues);
+
+  vertexBuffer.getArray().push(x, y, +size / 2, -size / 2, u1, v0, opacity, rotateWithView, red, green, blue, alpha);
+  Array.prototype.push.apply(vertexBuffer.getArray(), customAttributeValues);
+
+  vertexBuffer.getArray().push(x, y, +size / 2, +size / 2, u1, v1, opacity, rotateWithView, red, green, blue, alpha);
+  Array.prototype.push.apply(vertexBuffer.getArray(), customAttributeValues);
+
+  vertexBuffer.getArray().push(x, y, -size / 2, +size / 2, u0, v1, opacity, rotateWithView, red, green, blue, alpha);
+  Array.prototype.push.apply(vertexBuffer.getArray(), customAttributeValues);
+
+  indexBuffer.getArray().push(
+    baseIndex, baseIndex + 1, baseIndex + 3,
+    baseIndex + 1, baseIndex + 2, baseIndex + 3
+  );
+}
+
+/**
+ * Returns a texture of 1x1 pixel, white
+ * @private
+ * @return {ImageData} Image data.
+ */
+export function getBlankTexture() {
+  const canvas = document.createElement('canvas');
+  const image = canvas.getContext('2d').createImageData(1, 1);
+  image.data[0] = image.data[1] = image.data[2] = image.data[3] = 255;
+  return image;
+}
+
+export default WebGLLayerRenderer;

src/ol/renderer/webgl/PointsLayer.js

@@ -1,11 +1,21 @@
 /**
  * @module ol/renderer/webgl/PointsLayer
  */
-import LayerRenderer from '../Layer';
 import WebGLArrayBuffer from '../../webgl/Buffer';
 import {DYNAMIC_DRAW, ARRAY_BUFFER, ELEMENT_ARRAY_BUFFER, FLOAT} from '../../webgl';
-import WebGLHelper, {DefaultAttrib} from '../../webgl/Helper';
+import {DefaultAttrib, DefaultUniform} from '../../webgl/Helper';
 import GeometryType from '../../geom/GeometryType';
+import WebGLLayerRenderer, {getBlankTexture, pushFeatureToBuffer} from './Layer';
+import GeoJSON from '../../format/GeoJSON';
+import {getUid} from '../../util';
+import ViewHint from '../../ViewHint';
+import {createEmpty, equals} from '../../extent';
+import {
+  create as createTransform,
+  makeInverse as makeInverseTransform,
+  multiply as multiplyTransform,
+  apply as applyTransform
+} from '../../transform';
 
 const VERTEX_SHADER = `
   precision mediump float;
@@ -55,15 +65,6 @@ const FRAGMENT_SHADER = `
     gl_FragColor.rgb *= gl_FragColor.a;
   }`;
 
-/**
- * @typedef {Object} PostProcessesOptions
- * @property {number} [scaleRatio] Scale ratio; if < 1, the post process will render to a texture smaller than
- * the main canvas that will then be sampled up (useful for saving resource on blur steps).
- * @property {string} [vertexShader] Vertex shader source
- * @property {string} [fragmentShader] Fragment shader source
- * @property {Object.<string,import("../../webgl/Helper").UniformValue>} [uniforms] Uniform definitions for the post process step
- */
-
 /**
  * @typedef {Object} Options
  * @property {function(import("../../Feature").default):number} [sizeCallback] Will be called on every feature in the
@@ -91,7 +92,7 @@ const FRAGMENT_SHADER = `
  * @property {string} [fragmentShader] Fragment shader source
  * @property {Object.<string,import("../../webgl/Helper").UniformValue>} [uniforms] Uniform definitions for the post process steps
  * Please note that `u_texture` is reserved for the main texture slot.
- * @property {Array<PostProcessesOptions>} [postProcesses] Post-processes definitions
+ * @property {Array<import("./Layer").PostProcessesOptions>} [postProcesses] Post-processes definitions
  */
 
 /**
@@ -186,22 +187,23 @@ const FRAGMENT_SHADER = `
  *
  * @api
  */
-class WebGLPointsLayerRenderer extends LayerRenderer {
+class WebGLPointsLayerRenderer extends WebGLLayerRenderer {
 
   /**
    * @param {import("../../layer/Vector.js").default} vectorLayer Vector layer.
    * @param {Options=} [opt_options] Options.
    */
   constructor(vectorLayer, opt_options) {
-    super(vectorLayer);
-
     const options = opt_options || {};
 
     const uniforms = options.uniforms || {};
-    uniforms.u_texture = options.texture || this.getDefaultTexture();
+    uniforms.u_texture = options.texture || getBlankTexture();
-    this.helper_ = new WebGLHelper({
+    const projectionMatrixTransform = createTransform();
-      postProcesses: options.postProcesses,
+    uniforms[DefaultUniform.PROJECTION_MATRIX] = projectionMatrixTransform;
-      uniforms: uniforms
+
+    super(vectorLayer, {
+      uniforms: uniforms,
+      postProcesses: options.postProcesses
     });
 
     this.sourceRevision_ = -1;
@@ -238,6 +240,38 @@ class WebGLPointsLayerRenderer extends LayerRenderer {
     this.rotateWithViewCallback_ = options.rotateWithViewCallback || function() {
       return false;
     };
+
+    this.geojsonFormat_ = new GeoJSON();
+
+    /**
+     * @type {Object<string, import("../../format/GeoJSON").GeoJSONFeature>}
+     * @private
+     */
+    this.geojsonFeatureCache_ = {};
+
+    this.previousExtent_ = createEmpty();
+
+    /**
+     * This transform is updated on every frame and is the composition of:
+     * - invert of the world->screen transform that was used when rebuilding buffers (see `this.renderTransform_`)
+     * - current world->screen transform
+     * @type {import("../../transform.js").Transform}
+     * @private
+     */
+    this.currentTransform_ = projectionMatrixTransform;
+
+    /**
+     * This transform is updated when buffers are rebuilt and converts world space coordinates to screen space
+     * @type {import("../../transform.js").Transform}
+     * @private
+     */
+    this.renderTransform_ = createTransform();
+
+    /**
+     * @type {import("../../transform.js").Transform}
+     * @private
+     */
+    this.invertRenderTransform_ = createTransform();
   }
 
   /**
@@ -269,58 +303,35 @@ class WebGLPointsLayerRenderer extends LayerRenderer {
   prepareFrame(frameState) {
     const vectorLayer = /** @type {import("../../layer/Vector.js").default} */ (this.getLayer());
     const vectorSource = vectorLayer.getSource();
+    const viewState = frameState.viewState;
 
+    // TODO: get this from somewhere...
     const stride = 12;
 
-    this.helper_.prepareDraw(frameState);
+    // the source has changed: clear the feature cache & reload features
-
+    const sourceChanged = this.sourceRevision_ < vectorSource.getRevision();
-    if (this.sourceRevision_ < vectorSource.getRevision()) {
+    if (sourceChanged) {
       this.sourceRevision_ = vectorSource.getRevision();
-      this.verticesBuffer_.getArray().length = 0;
+      this.geojsonFeatureCache_ = {};
-      this.indicesBuffer_.getArray().length = 0;
 
-      const viewState = frameState.viewState;
       const projection = viewState.projection;
       const resolution = viewState.resolution;
-
-      // loop on features to fill the buffer
       vectorSource.loadFeatures([-Infinity, -Infinity, Infinity, Infinity], resolution, projection);
-      vectorSource.forEachFeature((feature) => {
-        if (!feature.getGeometry() || feature.getGeometry().getType() !== GeometryType.POINT) {
-          return;
-        }
-        const x = this.coordCallback_(feature, 0);
-        const y = this.coordCallback_(feature, 1);
-        const u0 = this.texCoordCallback_(feature, 0);
-        const v0 = this.texCoordCallback_(feature, 1);
-        const u1 = this.texCoordCallback_(feature, 2);
-        const v1 = this.texCoordCallback_(feature, 3);
-        const size = this.sizeCallback_(feature);
-        const opacity = this.opacityCallback_(feature);
-        const rotateWithView = this.rotateWithViewCallback_(feature) ? 1 : 0;
-        const color = this.colorCallback_(feature, this.colorArray_);
-        const red = color[0];
-        const green = color[1];
-        const blue = color[2];
-        const alpha = color[3];
-        const baseIndex = this.verticesBuffer_.getArray().length / stride;
-
-        this.verticesBuffer_.getArray().push(
-          x, y, -size / 2, -size / 2, u0, v0, opacity, rotateWithView, red, green, blue, alpha,
-          x, y, +size / 2, -size / 2, u1, v0, opacity, rotateWithView, red, green, blue, alpha,
-          x, y, +size / 2, +size / 2, u1, v1, opacity, rotateWithView, red, green, blue, alpha,
-          x, y, -size / 2, +size / 2, u0, v1, opacity, rotateWithView, red, green, blue, alpha
-        );
-        this.indicesBuffer_.getArray().push(
-          baseIndex, baseIndex + 1, baseIndex + 3,
-          baseIndex + 1, baseIndex + 2, baseIndex + 3
-        );
-      });
-
-      this.helper_.flushBufferData(ARRAY_BUFFER, this.verticesBuffer_);
-      this.helper_.flushBufferData(ELEMENT_ARRAY_BUFFER, this.indicesBuffer_);
     }
 
+    const viewNotMoving = !frameState.viewHints[ViewHint.ANIMATING] && !frameState.viewHints[ViewHint.INTERACTING];
+    const extentChanged = !equals(this.previousExtent_, frameState.extent);
+    if ((sourceChanged || extentChanged) && viewNotMoving) {
+      this.rebuildBuffers_(frameState);
+      this.previousExtent_ = frameState.extent.slice();
+    }
+
+    // apply the current projection transform with the invert of the one used to fill buffers
+    this.helper_.makeProjectionTransform(frameState, this.currentTransform_);
+    multiplyTransform(this.currentTransform_, this.invertRenderTransform_);
+
+    this.helper_.prepareDraw(frameState);
+
     // write new data
     this.helper_.bindBuffer(ARRAY_BUFFER, this.verticesBuffer_);
     this.helper_.bindBuffer(ELEMENT_ARRAY_BUFFER, this.indicesBuffer_);
@@ -337,24 +348,54 @@ class WebGLPointsLayerRenderer extends LayerRenderer {
   }
 
   /**
-   * Will return the last shader compilation errors. If no error happened, will return null;
+   * Rebuild internal webgl buffers based on current view extent; costly, should not be called too much
-   * @return {string|null} Errors, or null if last compilation was successful
+   * @param {import("../../PluggableMap").FrameState} frameState Frame state.
-   * @api
-   */
-  getShaderCompileErrors() {
-    return this.helper_.getShaderCompileErrors();
-  }
-
-  /**
-   * Returns a texture of 1x1 pixel, white
    * @private
-   * @return {ImageData} Image data.
    */
-  getDefaultTexture() {
+  rebuildBuffers_(frameState) {
-    const canvas = document.createElement('canvas');
+    const vectorLayer = /** @type {import("../../layer/Vector.js").default} */ (this.getLayer());
-    const image = canvas.getContext('2d').createImageData(1, 1);
+    const vectorSource = vectorLayer.getSource();
-    image.data[0] = image.data[1] = image.data[2] = image.data[3] = 255;
+
-    return image;
+    this.verticesBuffer_.getArray().length = 0;
+    this.indicesBuffer_.getArray().length = 0;
+
+    // saves the projection transform for the current frame state
+    this.helper_.makeProjectionTransform(frameState, this.renderTransform_);
+    makeInverseTransform(this.invertRenderTransform_, this.renderTransform_);
+
+    // loop on features to fill the buffer
+    const features = vectorSource.getFeatures();
+    let feature;
+    for (let i = 0; i < features.length; i++) {
+      feature = features[i];
+      if (!feature.getGeometry() || feature.getGeometry().getType() !== GeometryType.POINT) {
+        continue;
+      }
+
+      let geojsonFeature = this.geojsonFeatureCache_[getUid(feature)];
+      if (!geojsonFeature) {
+        geojsonFeature = this.geojsonFormat_.writeFeatureObject(feature);
+        this.geojsonFeatureCache_[getUid(feature)] = geojsonFeature;
+      }
+
+      geojsonFeature.geometry.coordinates[0] = this.coordCallback_(feature, 0);
+      geojsonFeature.geometry.coordinates[1] = this.coordCallback_(feature, 1);
+      applyTransform(this.renderTransform_, geojsonFeature.geometry.coordinates);
+      geojsonFeature.properties = geojsonFeature.properties || {};
+      geojsonFeature.properties.color = this.colorCallback_(feature, this.colorArray_);
+      geojsonFeature.properties.u0 = this.texCoordCallback_(feature, 0);
+      geojsonFeature.properties.v0 = this.texCoordCallback_(feature, 1);
+      geojsonFeature.properties.u1 = this.texCoordCallback_(feature, 2);
+      geojsonFeature.properties.v1 = this.texCoordCallback_(feature, 3);
+      geojsonFeature.properties.size = this.sizeCallback_(feature);
+      geojsonFeature.properties.opacity = this.opacityCallback_(feature);
+      geojsonFeature.properties.rotateWithView = this.rotateWithViewCallback_(feature) ? 1 : 0;
+
+      pushFeatureToBuffer(this.verticesBuffer_, this.indicesBuffer_, geojsonFeature);
+    }
+
+    this.helper_.flushBufferData(ARRAY_BUFFER, this.verticesBuffer_);
+    this.helper_.flushBufferData(ELEMENT_ARRAY_BUFFER, this.indicesBuffer_);
   }
 }
 

src/ol/structs/RBush.js

@@ -2,7 +2,7 @@
  * @module ol/structs/RBush
  */
 import {getUid} from '../util.js';
-import rbush from 'rbush';
+import RBush_ from 'rbush';
 import {createOrUpdate, equals} from '../extent.js';
 import {isEmpty} from '../obj.js';
 
@@ -31,7 +31,7 @@ class RBush {
     /**
      * @private
      */
-    this.rbush_ = rbush(opt_maxEntries, undefined);
+    this.rbush_ = new RBush_(opt_maxEntries);
 
     /**
      * A mapping between the objects added to this rbush wrapper

src/ol/style/IconImage.js

@@ -3,11 +3,12 @@
  */
 
 import {createCanvasContext2D} from '../dom.js';
-import {listenOnce, unlistenByKey} from '../events.js';
 import EventTarget from '../events/Target.js';
 import EventType from '../events/EventType.js';
 import ImageState from '../ImageState.js';
 import {shared as iconImageCache} from './IconImageCache.js';
+import {listenImage} from '../Image.js';
+
 
 class IconImage extends EventTarget {
   /**
@@ -52,9 +53,9 @@ class IconImage extends EventTarget {
 
     /**
      * @private
-     * @type {Array<import("../events.js").EventsKey>}
+     * @type {function():void}
      */
-    this.imageListenerKeys_ = null;
+    this.unlisten_ = null;
 
     /**
      * @private
@@ -185,17 +186,16 @@ class IconImage extends EventTarget {
   load() {
     if (this.imageState_ == ImageState.IDLE) {
       this.imageState_ = ImageState.LOADING;
-      this.imageListenerKeys_ = [
-        listenOnce(this.image_, EventType.ERROR,
-          this.handleImageError_, this),
-        listenOnce(this.image_, EventType.LOAD,
-          this.handleImageLoad_, this)
-      ];
       try {
         /** @type {HTMLImageElement} */ (this.image_).src = this.src_;
       } catch (e) {
         this.handleImageError_();
       }
+      this.unlisten_ = listenImage(
+        this.image_,
+        this.handleImageLoad_.bind(this),
+        this.handleImageError_.bind(this)
+      );
     }
   }
 
@@ -233,8 +233,10 @@ class IconImage extends EventTarget {
    * @private
    */
   unlistenImage_() {
-    this.imageListenerKeys_.forEach(unlistenByKey);
+    if (this.unlisten_) {
-    this.imageListenerKeys_ = null;
+      this.unlisten_();
+      this.unlisten_ = null;
+    }
   }
 }
 

src/ol/util.js

@@ -25,7 +25,6 @@ let uidCounter_ = 0;
  *
  * @param {Object} obj The object to get the unique ID for.
  * @return {string} The unique ID for the object.
- * @function module:ol.getUid
  * @api
  */
 export function getUid(obj) {

src/ol/webgl/Helper.js

@@ -62,7 +62,7 @@ export const DefaultAttrib = {
 };
 
 /**
- * @typedef {number|Array<number>|HTMLCanvasElement|HTMLImageElement|ImageData} UniformLiteralValue
+ * @typedef {number|Array<number>|HTMLCanvasElement|HTMLImageElement|ImageData|import("../transform").Transform} UniformLiteralValue
  */
 
 /**
@@ -273,12 +273,6 @@ class WebGLHelper extends Disposable {
     listen(this.canvas_, ContextEventType.RESTORED,
       this.handleWebGLContextRestored, this);
 
-    /**
-     * @private
-     * @type {import("../transform.js").Transform}
-     */
-    this.projectionMatrix_ = createTransform();
-
     /**
      * @private
      * @type {import("../transform.js").Transform}
@@ -514,14 +508,6 @@ class WebGLHelper extends Disposable {
   applyFrameState(frameState) {
     const size = frameState.size;
     const rotation = frameState.viewState.rotation;
-    const resolution = frameState.viewState.resolution;
-    const center = frameState.viewState.center;
-
-    // set the "uniform" values (coordinates 0,0 are the center of the view)
-    const projectionMatrix = resetTransform(this.projectionMatrix_);
-    scaleTransform(projectionMatrix, 2 / (resolution * size[0]), 2 / (resolution * size[1]));
-    rotateTransform(projectionMatrix, -rotation);
-    translateTransform(projectionMatrix, -center[0], -center[1]);
 
     const offsetScaleMatrix = resetTransform(this.offsetScaleMatrix_);
     scaleTransform(offsetScaleMatrix, 2 / size[0], 2 / size[1]);
@@ -531,7 +517,6 @@ class WebGLHelper extends Disposable {
       rotateTransform(offsetRotateMatrix, -rotation);
     }
 
-    this.setUniformMatrixValue(DefaultUniform.PROJECTION_MATRIX, fromTransform(this.tmpMat4_, projectionMatrix));
     this.setUniformMatrixValue(DefaultUniform.OFFSET_SCALE_MATRIX, fromTransform(this.tmpMat4_, offsetScaleMatrix));
     this.setUniformMatrixValue(DefaultUniform.OFFSET_ROTATION_MATRIX, fromTransform(this.tmpMat4_, offsetRotateMatrix));
   }
@@ -565,7 +550,9 @@ class WebGLHelper extends Disposable {
         // fill texture slots by increasing index
         gl.uniform1i(this.getUniformLocation(uniform.name), textureSlot++);
 
-      } else if (Array.isArray(value)) {
+      } else if (Array.isArray(value) && value.length === 6) {
+        this.setUniformMatrixValue(uniform.name, fromTransform(this.tmpMat4_, value));
+      } else if (Array.isArray(value) && value.length <= 4) {
         switch (value.length) {
           case 2:
             gl.uniform2f(this.getUniformLocation(uniform.name), value[0], value[1]);
@@ -689,6 +676,28 @@ class WebGLHelper extends Disposable {
     return this.attribLocations_[name];
   }
 
+  /**
+   * Modifies the given transform to apply the rotation/translation/scaling of the given frame state.
+   * The resulting transform can be used to convert world space coordinates to view coordinates.
+   * @param {import("../PluggableMap.js").FrameState} frameState Frame state.
+   * @param {import("../transform").Transform} transform Transform to update.
+   * @return {import("../transform").Transform} The updated transform object.
+   * @api
+   */
+  makeProjectionTransform(frameState, transform) {
+    const size = frameState.size;
+    const rotation = frameState.viewState.rotation;
+    const resolution = frameState.viewState.resolution;
+    const center = frameState.viewState.center;
+
+    resetTransform(transform);
+    scaleTransform(transform, 2 / (resolution * size[0]), 2 / (resolution * size[1]));
+    rotateTransform(transform, -rotation);
+    translateTransform(transform, -center[0], -center[1]);
+
+    return transform;
+  }
+
   /**
    * Give a value for a standard float uniform
    * @param {string} uniform Uniform name

src/ol/worker/version.js

@@ -0,0 +1,12 @@
+/**
+ * A worker that responds to messages by posting a message with the version identifer.
+ * @module ol/worker/version
+ */
+import {VERSION} from '../util';
+
+onmessage = event => {
+  console.log('version worker received message:', event.data); // eslint-disable-line
+  postMessage(`version: ${VERSION}`);
+};
+
+export let create;

tasks/publish.sh

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

tasks/serialize-workers.js

@@ -0,0 +1,97 @@
+const path = require('path');
+const babel = require('rollup-plugin-babel');
+const resolve = require('rollup-plugin-node-resolve');
+const common = require('rollup-plugin-commonjs');
+const rollup = require('rollup');
+const terser = require('rollup-plugin-terser').terser;
+const fse = require('fs-extra');
+
+async function build(input, {minify = true} = {}) {
+  const plugins = [
+    {
+      name: 'remove export let create',
+      transform(code, id) {
+        if (id !== input) {
+          return null;
+        }
+        return code.replace('export let create;\n', '');
+      }
+    },
+    common(),
+    resolve(),
+    babel({
+      'presets': [
+        [
+          '@babel/preset-env',
+          {
+            'modules': false,
+            'targets': 'last 2 version, not dead'
+          }
+        ]
+      ]
+    })
+  ];
+
+  if (minify) {
+    plugins.push(terser());
+  }
+
+  plugins.push({
+    name: 'serialize worker and export create function',
+    renderChunk(code) {
+      return `
+        const source = ${JSON.stringify(code)};
+        const blob = new Blob([source], {type: 'application/javascript'});
+        const url = URL.createObjectURL(blob);
+        export function create() {
+          return new Worker(url);
+        }
+      `;
+    }
+  });
+
+  const bundle = await rollup.rollup({input, plugins});
+  const {output} = await bundle.generate({format: 'es'});
+
+  if (output.length !== 1) {
+    throw new Error(`Unexpected output length: ${output.length}`);
+  }
+
+  const chunk = output[0];
+  if (chunk.isAsset) {
+    throw new Error('Expected a chunk, got an asset');
+  }
+
+  return chunk;
+}
+
+exports.build = build;
+
+
+/**
+ * Creates modules with inlined versions of the worker sources.  These modules
+ * export a `create` function for creating a worker.
+ */
+async function main() {
+  const inputDir = path.join(__dirname, '../src/ol/worker');
+  const outputDir = path.join(__dirname, '../build/ol/src/worker');
+
+  await fse.ensureDir(outputDir);
+
+  const entries = await fse.readdir(inputDir);
+  for (const entry of entries) {
+    if (!entry.endsWith('.js')) {
+      continue;
+    }
+
+    const chunk = await build(path.join(inputDir, entry));
+    await fse.writeFile(path.join(outputDir, entry), chunk.code);
+  }
+}
+
+if (require.main === module) {
+  main().catch(err => {
+    process.stderr.write(`${err.stack}\n`);
+    process.exit(1);
+  });
+}

test/karma.config.js

@@ -86,6 +86,14 @@ module.exports = function(karma) {
             },
             include: path.resolve('src/ol/'),
             exclude: path.resolve('node_modules/')
+          }, {
+            test: /\.js$/,
+            use: {
+              loader: path.join(__dirname, '../examples/webpack/worker-loader.js')
+            },
+            include: [
+              path.join(__dirname, '../src/ol/worker')
+            ]
           }
         ]
       }

test/spec/ol/format/kml.test.js

@@ -1597,6 +1597,39 @@ describe('ol.format.KML', function() {
           expect(node).to.xmleql(parse(text));
         });
 
+        it('can write ExtendedData after Style tag', function() {
+          const style = new Style({
+            stroke: new Stroke({
+              color: '#112233',
+              width: 2
+            })
+          });
+          const feature = new Feature();
+          feature.set('foo', null);
+          feature.setStyle([style]);
+          const features = [feature];
+          const node = format.writeFeaturesNode(features);
+          const text =
+              '<kml xmlns="http://www.opengis.net/kml/2.2"' +
+              ' xmlns:gx="http://www.google.com/kml/ext/2.2"' +
+              ' xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"' +
+              ' xsi:schemaLocation="http://www.opengis.net/kml/2.2' +
+              ' https://developers.google.com/kml/schema/kml22gx.xsd">' +
+              '  <Placemark>' +
+              '    <Style>' +
+              '      <LineStyle>' +
+              '        <color>ff332211</color>' +
+              '        <width>2</width>' +
+              '      </LineStyle>' +
+              '    </Style>' +
+              '    <ExtendedData>' +
+              '      <Data name="foo"/>' +
+              '    </ExtendedData>' +
+              '  </Placemark>' +
+              '</kml>';
+          expect(node).to.xmleql(parse(text));
+        });
+
         it('can read ExtendedData', function() {
           const text =
               '<kml xmlns="http://earth.google.com/kml/2.2">' +

test/spec/ol/geom/flat/textpath.test.js

@@ -72,9 +72,11 @@ describe('ol.geom.flat.drawTextOnPath', function() {
     const instructions = drawTextOnPath(
       angled, 0, angled.length, 2, 'foo', startM, Infinity, 1, measureAndCacheTextWidth, '', {});
     expect(instructions[0][3]).to.eql(45 * Math.PI / 180);
-    expect(instructions[0][4]).to.be('fo');
+    expect(instructions[0][4]).to.be('f');
-    expect(instructions[1][3]).to.eql(-45 * Math.PI / 180);
+    expect(instructions[1][3]).to.eql(45 * Math.PI / 180);
     expect(instructions[1][4]).to.be('o');
+    expect(instructions[2][3]).to.eql(-45 * Math.PI / 180);
+    expect(instructions[2][4]).to.be('o');
   });
 
   it('respects maxAngle', function() {

test/spec/ol/image.test.js

@@ -0,0 +1,46 @@
+import {listenImage} from '../../../src/ol/Image.js';
+
+
+describe('HTML Image loading', function() {
+  let handleLoad, handleError, img;
+
+  beforeEach(function() {
+    handleLoad = sinon.spy();
+    handleError = sinon.spy();
+    img = new Image();
+  });
+
+  it('handles load event', function(done) {
+    img.src = 'spec/ol/data/dot.png';
+    listenImage(img, handleLoad, handleError);
+
+    setTimeout(function() {
+      expect(handleLoad).to.be.called();
+      expect(handleError).not.to.be.called();
+      done();
+    }, 200);
+  });
+
+  it('handles error event', function(done) {
+    img.src = 'invalid.jpeg';
+    listenImage(img, handleLoad, handleError);
+
+    setTimeout(function() {
+      expect(handleLoad).not.to.be.called();
+      expect(handleError).to.be.called();
+      done();
+    }, 200);
+  });
+
+  it('handles cancelation', function(done) {
+    img.src = 'spec/ol/data/dot.png';
+    listenImage(img, handleLoad, handleError)();
+
+    setTimeout(function() {
+      expect(handleLoad).not.to.be.called();
+      expect(handleError).not.to.be.called();
+      done();
+    }, 200);
+  });
+
+});

test/spec/ol/math.test.js

@@ -1,4 +1,4 @@
-import {clamp, lerp, cosh, roundUpToPowerOfTwo, solveLinearSystem, toDegrees, toRadians, modulo} from '../../../src/ol/math.js';
+import {clamp, lerp, cosh, solveLinearSystem, toDegrees, toRadians, modulo} from '../../../src/ol/math.js';
 
 
 describe('ol.math.clamp', function() {
@@ -49,45 +49,6 @@ describe('ol.math.cosh', function() {
 
 });
 
-describe('ol.math.roundUpToPowerOfTwo', function() {
-
-  it('raises an exception when x is negative', function() {
-    expect(function() {
-      roundUpToPowerOfTwo(-1);
-    }).to.throwException();
-  });
-
-  it('raises an exception when x is zero', function() {
-    expect(function() {
-      roundUpToPowerOfTwo(0);
-    }).to.throwException();
-  });
-
-  it('returns the expected value for simple powers of two', function() {
-    expect(roundUpToPowerOfTwo(1)).to.be(1);
-    expect(roundUpToPowerOfTwo(2)).to.be(2);
-    expect(roundUpToPowerOfTwo(4)).to.be(4);
-    expect(roundUpToPowerOfTwo(8)).to.be(8);
-    expect(roundUpToPowerOfTwo(16)).to.be(16);
-    expect(roundUpToPowerOfTwo(32)).to.be(32);
-    expect(roundUpToPowerOfTwo(64)).to.be(64);
-    expect(roundUpToPowerOfTwo(128)).to.be(128);
-    expect(roundUpToPowerOfTwo(256)).to.be(256);
-  });
-
-  it('returns the expected value for simple powers of ten', function() {
-    expect(roundUpToPowerOfTwo(1)).to.be(1);
-    expect(roundUpToPowerOfTwo(10)).to.be(16);
-    expect(roundUpToPowerOfTwo(100)).to.be(128);
-    expect(roundUpToPowerOfTwo(1000)).to.be(1024);
-    expect(roundUpToPowerOfTwo(10000)).to.be(16384);
-    expect(roundUpToPowerOfTwo(100000)).to.be(131072);
-    expect(roundUpToPowerOfTwo(1000000)).to.be(1048576);
-    expect(roundUpToPowerOfTwo(10000000)).to.be(16777216);
-  });
-
-});
-
 describe('ol.math.solveLinearSystem', function() {
 
   it('calculates correctly', function() {

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

@@ -49,7 +49,7 @@ describe('ol.renderer.canvas.TileLayer', function() {
       });
       source.updateParams({TIME: '1'});
       map.renderSync();
-      const tiles = map.getRenderer().getLayerRenderer(layer).renderedTiles;
+      const tiles = layer.getRenderer().renderedTiles;
       expect(tiles.length).to.be(1);
       expect(tiles[0]).to.equal(tile);
       expect(tile.inTransition()).to.be(true);

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

@@ -75,7 +75,7 @@ describe('ol.renderer.canvas.VectorLayer', function() {
         style: layerStyle
       });
       map.addLayer(layer);
-      const spy = sinon.spy(map.getRenderer().getLayerRenderer(layer),
+      const spy = sinon.spy(layer.getRenderer(),
         'renderFeature');
       map.renderSync();
       expect(spy.getCall(0).args[3]).to.be(layerStyle);

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

@@ -140,7 +140,7 @@ describe('ol.renderer.canvas.VectorTileLayer', function() {
     });
 
     it('gives precedence to feature styles over layer styles', function() {
-      const spy = sinon.spy(map.getRenderer().getLayerRenderer(layer),
+      const spy = sinon.spy(layer.getRenderer(),
         'renderFeature');
       map.renderSync();
       expect(spy.getCall(0).args[2]).to.be(layer.getStyle());

test/spec/ol/renderer/webgl/layer.test.js

@@ -0,0 +1,150 @@
+import WebGLLayerRenderer, {getBlankTexture, pushFeatureToBuffer} from '../../../../../src/ol/renderer/webgl/Layer';
+import WebGLArrayBuffer from '../../../../../src/ol/webgl/Buffer';
+import Layer from '../../../../../src/ol/layer/Layer';
+
+
+describe('ol.renderer.webgl.Layer', function() {
+
+  describe('constructor', function() {
+
+    let target;
+
+    beforeEach(function() {
+      target = document.createElement('div');
+      target.style.width = '256px';
+      target.style.height = '256px';
+      document.body.appendChild(target);
+    });
+
+    afterEach(function() {
+      document.body.removeChild(target);
+    });
+
+    it('creates a new instance', function() {
+      const layer = new Layer({});
+      const renderer = new WebGLLayerRenderer(layer);
+      expect(renderer).to.be.a(WebGLLayerRenderer);
+    });
+
+  });
+
+  describe('pushFeatureToBuffer', function() {
+    let vertexBuffer, indexBuffer;
+
+    beforeEach(function() {
+      vertexBuffer = new WebGLArrayBuffer();
+      indexBuffer = new WebGLArrayBuffer();
+    });
+
+    it('does nothing if the feature has no geometry', function() {
+      const feature = {
+        type: 'Feature',
+        id: 'AFG',
+        properties: {
+          color: [0.5, 1, 0.2, 0.7],
+          size: 3
+        },
+        geometry: null
+      };
+      pushFeatureToBuffer(vertexBuffer, indexBuffer, feature);
+      expect(vertexBuffer.getArray().length).to.eql(0);
+      expect(indexBuffer.getArray().length).to.eql(0);
+    });
+
+    it('adds two triangles with the correct attributes for a point geometry', function() {
+      const feature = {
+        type: 'Feature',
+        id: 'AFG',
+        properties: {
+          color: [0.5, 1, 0.2, 0.7],
+          size: 3
+        },
+        geometry: {
+          type: 'Point',
+          coordinates: [-75, 47]
+        }
+      };
+      const attributePerVertex = 12;
+      pushFeatureToBuffer(vertexBuffer, indexBuffer, feature);
+      expect(vertexBuffer.getArray().length).to.eql(attributePerVertex * 4);
+      expect(indexBuffer.getArray().length).to.eql(6);
+    });
+
+    it('correctly sets indices & coordinates for several features', function() {
+      const feature = {
+        type: 'Feature',
+        id: 'AFG',
+        properties: {
+          color: [0.5, 1, 0.2, 0.7],
+          size: 3
+        },
+        geometry: {
+          type: 'Point',
+          coordinates: [-75, 47]
+        }
+      };
+      const attributePerVertex = 12;
+      pushFeatureToBuffer(vertexBuffer, indexBuffer, feature);
+      pushFeatureToBuffer(vertexBuffer, indexBuffer, feature);
+      expect(vertexBuffer.getArray()[0]).to.eql(-75);
+      expect(vertexBuffer.getArray()[1]).to.eql(47);
+      expect(vertexBuffer.getArray()[0 + attributePerVertex]).to.eql(-75);
+      expect(vertexBuffer.getArray()[1 + attributePerVertex]).to.eql(47);
+
+      // first point
+      expect(indexBuffer.getArray()[0]).to.eql(0);
+      expect(indexBuffer.getArray()[1]).to.eql(1);
+      expect(indexBuffer.getArray()[2]).to.eql(3);
+      expect(indexBuffer.getArray()[3]).to.eql(1);
+      expect(indexBuffer.getArray()[4]).to.eql(2);
+      expect(indexBuffer.getArray()[5]).to.eql(3);
+
+      // second point
+      expect(indexBuffer.getArray()[6]).to.eql(4);
+      expect(indexBuffer.getArray()[7]).to.eql(5);
+      expect(indexBuffer.getArray()[8]).to.eql(7);
+      expect(indexBuffer.getArray()[9]).to.eql(5);
+      expect(indexBuffer.getArray()[10]).to.eql(6);
+      expect(indexBuffer.getArray()[11]).to.eql(7);
+    });
+
+    it('correctly adds custom attributes', function() {
+      const feature = {
+        type: 'Feature',
+        id: 'AFG',
+        properties: {
+          color: [0.5, 1, 0.2, 0.7],
+          custom: 4,
+          customString: '5',
+          custom2: 12.4,
+          customString2: 'abc'
+        },
+        geometry: {
+          type: 'Point',
+          coordinates: [-75, 47]
+        }
+      };
+      const attributePerVertex = 16;
+      pushFeatureToBuffer(vertexBuffer, indexBuffer, feature, ['custom', 'custom2', 'customString', 'customString2']);
+      expect(vertexBuffer.getArray().length).to.eql(attributePerVertex * 4);
+      expect(indexBuffer.getArray().length).to.eql(6);
+      expect(vertexBuffer.getArray()[12]).to.eql(4);
+      expect(vertexBuffer.getArray()[13]).to.eql(12.4);
+      expect(vertexBuffer.getArray()[14]).to.eql(5);
+      expect(vertexBuffer.getArray()[15]).to.eql(0);
+    });
+  });
+
+  describe('getBlankTexture', function() {
+    it('creates a 1x1 white texture', function() {
+      const texture = getBlankTexture();
+      expect(texture.height).to.eql(1);
+      expect(texture.width).to.eql(1);
+      expect(texture.data[0]).to.eql(255);
+      expect(texture.data[1]).to.eql(255);
+      expect(texture.data[2]).to.eql(255);
+      expect(texture.data[3]).to.eql(255);
+    });
+  });
+
+});

test/spec/ol/renderer/webgl/pointslayer.test.js

@@ -0,0 +1,142 @@
+import Feature from '../../../../../src/ol/Feature.js';
+import Point from '../../../../../src/ol/geom/Point.js';
+import LineString from '../../../../../src/ol/geom/LineString.js';
+import VectorLayer from '../../../../../src/ol/layer/Vector.js';
+import VectorSource from '../../../../../src/ol/source/Vector.js';
+import WebGLPointsLayerRenderer from '../../../../../src/ol/renderer/webgl/PointsLayer';
+import {get as getProjection} from '../../../../../src/ol/proj';
+import Polygon from '../../../../../src/ol/geom/Polygon';
+import ViewHint from '../../../../../src/ol/ViewHint';
+
+
+describe('ol.renderer.webgl.PointsLayer', function() {
+
+  describe('constructor', function() {
+
+    let target;
+
+    beforeEach(function() {
+      target = document.createElement('div');
+      target.style.width = '256px';
+      target.style.height = '256px';
+      document.body.appendChild(target);
+    });
+
+    afterEach(function() {
+      document.body.removeChild(target);
+    });
+
+    it('creates a new instance', function() {
+      const layer = new VectorLayer({
+        source: new VectorSource()
+      });
+      const renderer = new WebGLPointsLayerRenderer(layer);
+      expect(renderer).to.be.a(WebGLPointsLayerRenderer);
+    });
+
+  });
+
+  describe('#prepareFrame', function() {
+    let layer, renderer, frameState;
+
+    beforeEach(function() {
+      layer = new VectorLayer({
+        source: new VectorSource()
+      });
+      renderer = new WebGLPointsLayerRenderer(layer);
+      const projection = getProjection('EPSG:3857');
+      frameState = {
+        skippedFeatureUids: {},
+        viewHints: [],
+        viewState: {
+          projection: projection,
+          resolution: 1,
+          rotation: 0,
+          center: [10, 10]
+        },
+        size: [256, 256],
+        extent: [-100, -100, 100, 100]
+      };
+    });
+
+    it('calls WebGlHelper#prepareDraw', function() {
+      const spy = sinon.spy(renderer.helper_, 'prepareDraw');
+      renderer.prepareFrame(frameState);
+      expect(spy.called).to.be(true);
+    });
+
+    it('fills up a buffer with 2 triangles per point', function() {
+      layer.getSource().addFeature(new Feature({
+        geometry: new Point([10, 20])
+      }));
+      renderer.prepareFrame(frameState);
+
+      const attributePerVertex = 12;
+      expect(renderer.verticesBuffer_.getArray().length).to.eql(4 * attributePerVertex);
+      expect(renderer.indicesBuffer_.getArray().length).to.eql(6);
+    });
+
+    it('ignores geometries other than points', function() {
+      layer.getSource().addFeature(new Feature({
+        geometry: new LineString([[10, 20], [30, 20]])
+      }));
+      layer.getSource().addFeature(new Feature({
+        geometry: new Polygon([[10, 20], [30, 20], [30, 10], [10, 20]])
+      }));
+      renderer.prepareFrame(frameState);
+
+      expect(renderer.verticesBuffer_.getArray().length).to.eql(0);
+      expect(renderer.indicesBuffer_.getArray().length).to.eql(0);
+    });
+
+    it('clears the buffers when the features are gone', function() {
+      const source = layer.getSource();
+      source.addFeature(new Feature({
+        geometry: new Point([10, 20])
+      }));
+      source.removeFeature(source.getFeatures()[0]);
+      source.addFeature(new Feature({
+        geometry: new Point([10, 20])
+      }));
+      renderer.prepareFrame(frameState);
+
+      const attributePerVertex = 12;
+      expect(renderer.verticesBuffer_.getArray().length).to.eql(4 * attributePerVertex);
+      expect(renderer.indicesBuffer_.getArray().length).to.eql(6);
+    });
+
+    it('rebuilds the buffers only when not interacting or animating', function() {
+      const spy = sinon.spy(renderer, 'rebuildBuffers_');
+
+      frameState.viewHints[ViewHint.INTERACTING] = 1;
+      frameState.viewHints[ViewHint.ANIMATING] = 0;
+      renderer.prepareFrame(frameState);
+      expect(spy.called).to.be(false);
+
+      frameState.viewHints[ViewHint.INTERACTING] = 0;
+      frameState.viewHints[ViewHint.ANIMATING] = 1;
+      renderer.prepareFrame(frameState);
+      expect(spy.called).to.be(false);
+
+      frameState.viewHints[ViewHint.INTERACTING] = 0;
+      frameState.viewHints[ViewHint.ANIMATING] = 0;
+      renderer.prepareFrame(frameState);
+      expect(spy.called).to.be(true);
+    });
+
+    it('rebuilds the buffers only when the frame extent changed', function() {
+      const spy = sinon.spy(renderer, 'rebuildBuffers_');
+
+      renderer.prepareFrame(frameState);
+      expect(spy.callCount).to.be(1);
+
+      renderer.prepareFrame(frameState);
+      expect(spy.callCount).to.be(1);
+
+      frameState.extent = [10, 20, 30, 40];
+      renderer.prepareFrame(frameState);
+      expect(spy.callCount).to.be(2);
+    });
+  });
+
+});

test/spec/ol/view.test.js

@@ -100,10 +100,50 @@ describe('ol.View', function() {
       describe('with no options', function() {
         it('gives a correct center constraint function', function() {
           const options = {};
+          const size = [512, 256];
+          const resolution = 1e5;
           const fn = createCenterConstraint(options);
-          expect(fn([0, 0])).to.eql([0, 0]);
+          expect(fn([0, 0], resolution, size)).to.eql([0, 0]);
-          expect(fn(undefined)).to.eql(undefined);
+          expect(fn([42, -100], resolution, size)).to.eql([42, -100]);
-          expect(fn([42, -100])).to.eql([42, -100]);
+        });
+      });
+
+      describe('panning off the edge of the world', function() {
+        it('disallows going north off the world', function() {
+          const options = {
+            projection: 'EPSG:4326'
+          };
+          const size = [360, 180];
+          const resolution = 0.5;
+          const fn = createCenterConstraint(options);
+          expect(fn([0, 0], resolution, size)).to.eql([0, 0]);
+          expect(fn([0, 60], resolution, size)).to.eql([0, 45]);
+          expect(fn([180, 60], resolution, size)).to.eql([180, 45]);
+          expect(fn([-180, 60], resolution, size)).to.eql([-180, 45]);
+        });
+
+        it('disallows going south off the world', function() {
+          const options = {
+            projection: 'EPSG:4326'
+          };
+          const size = [360, 180];
+          const resolution = 0.5;
+          const fn = createCenterConstraint(options);
+          expect(fn([0, 0], resolution, size)).to.eql([0, 0]);
+          expect(fn([0, -60], resolution, size)).to.eql([0, -45]);
+          expect(fn([180, -60], resolution, size)).to.eql([180, -45]);
+          expect(fn([-180, -60], resolution, size)).to.eql([-180, -45]);
+        });
+      });
+
+      describe('with multiWorld: true', function() {
+        it('gives a correct center constraint function', function() {
+          const options = {multiWorld: true};
+          const size = [512, 256];
+          const resolution = 1e5;
+          const fn = createCenterConstraint(options);
+          expect(fn([0, 0], resolution, size)).to.eql([0, 0]);
+          expect(fn([42, -100], resolution, size)).to.eql([42, -100]);
         });
       });
 

test/spec/ol/webgl/helper.test.js

@@ -1,4 +1,9 @@
 import WebGLHelper from '../../../../src/ol/webgl/Helper';
+import {
+  create as createTransform,
+  rotate as rotateTransform,
+  scale as scaleTransform, translate as translateTransform
+} from '../../../../src/ol/transform';
 
 
 const VERTEX_SHADER = `
@@ -95,7 +100,8 @@ describe('ol.webgl.WebGLHelper', function() {
           uniforms: {
             u_test1: 42,
             u_test2: [1, 3],
-            u_test3: document.createElement('canvas')
+            u_test3: document.createElement('canvas'),
+            u_test4: createTransform()
           }
         });
         h.useProgram(h.getProgram(FRAGMENT_SHADER, VERTEX_SHADER));
@@ -116,13 +122,15 @@ describe('ol.webgl.WebGLHelper', function() {
       });
 
       it('has processed uniforms', function() {
-        expect(h.uniforms_.length).to.eql(3);
+        expect(h.uniforms_.length).to.eql(4);
         expect(h.uniforms_[0].name).to.eql('u_test1');
         expect(h.uniforms_[1].name).to.eql('u_test2');
         expect(h.uniforms_[2].name).to.eql('u_test3');
+        expect(h.uniforms_[3].name).to.eql('u_test4');
         expect(h.uniforms_[0].location).to.not.eql(-1);
         expect(h.uniforms_[1].location).to.not.eql(-1);
         expect(h.uniforms_[2].location).to.not.eql(-1);
+        expect(h.uniforms_[3].location).to.not.eql(-1);
         expect(h.uniforms_[2].texture).to.not.eql(undefined);
       });
     });
@@ -181,5 +189,33 @@ describe('ol.webgl.WebGLHelper', function() {
       });
     });
 
+    describe('#makeProjectionTransform', function() {
+      let h;
+      let frameState;
+      beforeEach(function() {
+        h = new WebGLHelper();
+
+        frameState = {
+          size: [100, 150],
+          viewState: {
+            rotation: 0.4,
+            resolution: 2,
+            center: [10, 20]
+          }
+        };
+      });
+
+      it('gives out the correct transform', function() {
+        const scaleX = 2 / frameState.size[0] / frameState.viewState.resolution;
+        const scaleY = 2 / frameState.size[1] / frameState.viewState.resolution;
+        const given = createTransform();
+        const expected = createTransform();
+        scaleTransform(expected, scaleX, scaleY);
+        rotateTransform(expected, -frameState.viewState.rotation);
+        translateTransform(expected, -frameState.viewState.center[0], -frameState.viewState.center[1]);
+        expect(h.makeProjectionTransform(frameState, given)).to.eql(expected);
+      });
+    });
+
   });
 });

test/spec/ol/worker/version.test.js

@@ -0,0 +1,32 @@
+import {create} from '../../../../src/ol/worker/version.js';
+import {VERSION} from '../../../../src/ol/util.js';
+
+
+describe('ol/worker/version', function() {
+
+  let worker;
+  beforeEach(function() {
+    worker = create();
+  });
+
+  afterEach(function() {
+    if (worker) {
+      worker.terminate();
+    }
+    worker = null;
+  });
+
+  describe('messaging', function() {
+    it('responds with the version', function(done) {
+      worker.addEventListener('error', done);
+
+      worker.addEventListener('message', function(event) {
+        expect(event.data).to.equal('version: ' + VERSION);
+        done();
+      });
+
+      worker.postMessage('test message');
+    });
+  });
+
+});

tsconfig.json

@@ -3,7 +3,7 @@
     /* Basic Options */
     "target": "ES2017",                       /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */
     "module": "commonjs",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
-    "lib": ["es2017", "dom"],                        /* Specify library files to be included in the compilation. */
+    "lib": ["es2017", "dom", "webworker"],    /* Specify library files to be included in the compilation. */
     "allowJs": true,                          /* Allow javascript files to be compiled. */
     "checkJs": true,                          /* Report errors in .js files. */
     // "jsx": "preserve",                     /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */