6.0.0-beta.13

Set initial tile state to EMPTY when outside source extent

.circleci/config.yml

@@ -0,0 +1,52 @@
+version: 2
+jobs:
+  build:
+    docker:
+      - image: circleci/node:latest-browsers
+
+    working_directory: ~/repo
+
+    steps:
+      - checkout
+
+      - restore_cache:
+          keys:
+          - v1-dependencies-{{ checksum "package.json" }}
+          - v1-dependencies-
+
+      - run:
+          name: Install Dependencies
+          command: npm install
+
+      - save_cache:
+          paths:
+            - node_modules
+          key: v1-dependencies-{{ checksum "package.json" }}
+
+      - run:
+          name: Run Tests
+          command: npm test
+
+      - store_artifacts:
+          path: coverage/
+          destination: coverage
+
+      - store_artifacts:
+          path: rendering/cases/
+          destination: rendering
+
+      - run:
+          name: Build Examples
+          command: npm run build-examples
+
+      - store_artifacts:
+          path: build/examples
+          destination: examples
+
+      - run:
+          name: Build API Docs
+          command: npm run apidoc
+
+      - store_artifacts:
+          path: build/apidoc
+          destination: apidoc

.editorconfig

@@ -11,7 +11,3 @@ insert_final_newline = true
 [*.md]
 indent_size = 2
 trim_trailing_whitespace = false
-
-[Makefile]
-indent_style = tab
-indent_size = 4

.github/FUNDING.yml

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

.github/ISSUE_TEMPLATE.md

@@ -1,9 +0,0 @@
-<!--
-Thank you for your interest in making OpenLayers better!
-
-If you are reporting a bug, please link to an example that reproduces the problem.  This will make it easier for people who may want to help you debug.
-
-If you have a usage question, you might want to try Stack Overflow first: https://stackoverflow.com/questions/tagged/openlayers
-
-Thanks
--->

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,19 @@
+---
+name: Bug report
+about: Create a report to help us improve
+labels:
+ - bug
+
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,13 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+labels:
+ - feature request
+
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.

.github/stale.yml

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

.travis.yml

@@ -1,17 +0,0 @@
-language: node_js
-node_js:
-- '8'
-cache:
-  directories:
-  - node_modules
-after_success:
-- cat coverage/lcov.info | coveralls
-branches:
-  only:
-  - master
-addons:
-  hosts:
-    - travis.dev
-  jwt:
-    # This is the encrypted SAUCE_ACCESS_KEY
-    secure: bb2Ibzu9RLe6ZlIG7JVcuH7IoLMxa/i3LTM7t8mbsPjVOGs5ycyJ7M9MbvqB/F2EzbeV4XB2c9ufI4TkaLYceY5kdWjfZVN8iasr+GFqKMv1uR4i6bpu8KmHJ+blxwfY1QOQ/cGwEx+fbeycMtpTc3Y3GyXaPlCQLhbZvesMg88=

CONTRIBUTING.md

@@ -42,7 +42,7 @@ Your pull request must:
 
  * Follow OpenLayers's coding style.
 
- * Pass the integration tests run automatically by the Travis Continuous
+ * Pass the integration tests run automatically by the CircleCI Continuous
    Integration system.
 
  * Address a single issue or add a single item of functionality.

DEVELOPING.md

@@ -5,9 +5,9 @@
 You will obviously start by
 [forking](https://github.com/openlayers/openlayers/fork) the OpenLayers repository.
 
-### Travis CI
+### CircleCI
 
-The Travis CI hook is enabled on the Github repository. This means every pull request
+The CircleCI hook is enabled on the Github repository. This means every pull request
 is run through a full test suite to ensure it compiles and passes the tests. Failing
 pull requests will not be merged.
 

LICENSE.md

@@ -1,26 +1,25 @@
-Copyright 2005-present OpenLayers Contributors. All rights reserved.
+BSD 2-Clause License
 
-Redistribution and use in source and binary forms, with or without modification,
-are permitted provided that the following conditions are met:
+Copyright 2005-present, OpenLayers Contributors
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
 
 1. Redistributions of source code must retain the above copyright notice, this
    list of conditions and the following disclaimer.
 
 2. Redistributions in binary form must reproduce the above copyright notice,
-this list of conditions and the following disclaimer in the documentation and/or
-other materials provided with the distribution.
+   this list of conditions and the following disclaimer in the documentation
+   and/or other materials provided with the distribution.
 
-THIS SOFTWARE IS PROVIDED BY OPENLAYERS CONTRIBUTORS ``AS IS'' AND ANY EXPRESS
-OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
-MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT
-SHALL COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT,
-INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
-LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
-PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF
-LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE
-OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF
-ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
-
-The views and conclusions contained in the software and documentation are those
-of the authors and should not be interpreted as representing official policies,
-either expressed or implied, of OpenLayers Contributors.
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

Makefile

@@ -1,13 +0,0 @@
-SRC_GLSL := $(shell find src -type f -name '*.glsl')
-SRC_SHADER_JS := $(patsubst %shader.glsl,%shader.js,$(SRC_GLSL))
-SRC_SHADERLOCATIONS_JS := $(patsubst %shader.glsl,%shader/Locations.js,$(SRC_GLSL))
-
-.PHONY: shaders
-shaders: $(SRC_SHADER_JS) $(SRC_SHADERLOCATIONS_JS)
-
-%shader.js: %shader.glsl src/ol/webgl/shader.mustache tasks/glslunit.js
-	@node tasks/glslunit.js --input $< | ./node_modules/.bin/mustache - src/ol/webgl/shader.mustache > $@
-
-%shader/Locations.js: %shader.glsl src/ol/webgl/shaderlocations.mustache tasks/glslunit.js
-	@mkdir -p $(@D)
-	@node tasks/glslunit.js --input $< | ./node_modules/.bin/mustache - src/ol/webgl/shaderlocations.mustache > $@

README.md

@@ -1,6 +1,6 @@
 # OpenLayers
 
-[OpenLayers](https://openlayers.org/) is a high-performance, feature-packed library for creating interactive maps on the web. It can display map tiles, vector data and markers loaded from any source on any web page. OpenLayers has been developed to further the use of geographic information of all kinds. It is completely free, Open Source JavaScript, released under the 2-clause BSD License (also known as the FreeBSD).
+[OpenLayers](https://openlayers.org/) is a high-performance, feature-packed library for creating interactive maps on the web. It can display map tiles, vector data and markers loaded from any source on any web page. OpenLayers has been developed to further the use of geographic information of all kinds. It is completely free, Open Source JavaScript, released under the [BSD 2-Clause License](https://opensource.org/licenses/BSD-2-Clause).
 
 ## Getting Started
 
@@ -41,6 +41,30 @@ See the following examples for more detail on bundling OpenLayers with your appl
  * Using [Parcel](https://github.com/openlayers/ol-parcel)
  * Using [Browserify](https://github.com/openlayers/ol-browserify)
 
+## IntelliSense support and type checking for VS Code
+
+The `ol` package contains a `src/` folder with JSDoc annotated sources. TypeScript can get type definitions from these sources with a `jsconfig.json` config file in the project root:
+```js
+{
+  "compilerOptions": {
+    "checkJs": true,
+    // Point to the JSDoc typed sources when using modules from the ol package
+    "baseUrl": "./",
+    "paths": {
+      "ol": ["node_modules/ol/src"],
+      "ol/*": ["node_modules/ol/src/*"]
+    }
+  },
+  "include": [
+    "**/*.js",
+    "node_modules/ol/**/*.js"
+  ]
+}
+```
+Project template with this configuration: https://gist.github.com/9a7253cb4712e8bf38d75d8ac898e36c.
+
+Note that the above only works when authoring in plain JavaScript. For similar configurations with a `tsconfig.json` in TypeScript projects, your mileage may vary.
+
 ## Supported Browsers
 
 OpenLayers runs on all modern browsers that support [HTML5](https://html.spec.whatwg.org/multipage/) and [ECMAScript 5](http://www.ecma-international.org/ecma-262/5.1/). This includes Chrome, Firefox, Safari and Edge. For older browsers and platforms like Internet Explorer (down to version 9) and Android 4.x, [polyfills](http://polyfill.io) for `requestAnimationFrame` and `Element.prototype.classList` are required, and using the KML format requires a polyfill for `URL`.
@@ -62,4 +86,4 @@ Please see our guide on [contributing](CONTRIBUTING.md) if you're interested in
 - Need help? Find it on [Stack Overflow using the tag 'openlayers'](http://stackoverflow.com/questions/tagged/openlayers)
 - Follow [@openlayers](https://twitter.com/openlayers) on Twitter
 
-[![Build Status](https://travis-ci.org/openlayers/openlayers.svg?branch=master)](https://travis-ci.org/openlayers/openlayers)
+[![CircleCI](https://circleci.com/gh/openlayers/openlayers/tree/master.svg?style=svg)](https://circleci.com/gh/openlayers/openlayers/tree/master)

changelog/upgrade-notes.md

@@ -2,6 +2,281 @@
 
 ### Next version
 
+#### Backwards incompatible changes
+
+#### Removal of `TOUCH` constant from `ol/has`
+
+If you were previously using this constant, you can check if `'ontouchstart'` is defined in `window` instead.
+
+```js
+if ('ontouchstart' in window) {
+  // ...
+}
+```
+
+#### Removal of `GEOLOCATION` constant from `ol/has`
+
+If you were previously using this constant, you can check if `'geolocation'` is defined in `navigator` instead.
+
+```js
+if ('geolocation' in navigator) {
+  // ...
+}
+```
+
+#### Removal of CSS print rules
+
+The CSS media print rules were removed from the `ol.css` file. To get the previous behavior, use the following CSS:
+
+```css
+@media print {
+  .ol-control {
+    display: none;
+  }
+}
+```
+
+#### Removal of optional this arguments
+
+The optional this (i.e. opt_this) arguments were removed from the following methods.
+Please use closures, the es6 arrow function or the bind method to achieve this effect (Bind is explained here:
+https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind).
+
+* `forEachCorner` in `ol/extent`
+* `LRUCache#forEach`
+* `RBush#forEach` and `RBush#forEachInExtent`
+
+##### The `setCenter`, `setZoom`, `setResolution` and `setRotation` methods on `ol/View` do not bypass constraints anymore
+
+Previously, these methods allowed setting values that were inconsistent with the given view constraints.
+This is no longer the case and all changes to the view state now follow the same logic:
+target values are provided and constraints are applied on these to determine the actual values to be used.
+
+##### Removal of the `constrainResolution` option on `View.fit`, `PinchZoom`, `MouseWheelZoom` and `ol/interaction.js`
+
+The `constrainResolution` option is now only supported by the `View` class. A `View.setConstrainResolution` method was added as well.
+
+Generally, the responsibility of applying center/rotation/resolutions constraints was moved from interactions and controls to the `View` class.
+
+##### The view `extent` option now applies to the whole viewport
+
+Previously, this options only constrained the view *center*. This behaviour can still be obtained by specifying `constrainCenterOnly` in the view options.
+
+As a side effect, the view `rotate` method is gone and has been replaced with `adjustRotation` which takes a delta as input.
+
+##### The view is constrained so only one world is visible
+
+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
+
+The `inherits` function that was used to inherit the prototype methods from one constructor into another has been removed.
+The standard ECMAScript classes should be used instead.
+
+The deprecated `getSnapToPixel` and `setSnapToPixel` functions from the `ImageStyle` class have been removed.
+
+##### New internal tile coordinates
+
+Previously, the internal tile coordinates used in the library had an unusual row order – the origin of the tile coordinate system was at the top left as expected, but the rows increased upwards.  This meant that all tile coordinates within a tile grid's extent had negative `y` values.
+
+Now, the internal tile coordinates used in the library have the same row order as standard (e.g. XYZ) tile coordinates.  The origin is at the top left (as before), and rows or `y` values increase downward.  So the top left tile of a tile grid is now `0, 0`, whereas it was `0, -1` before.
+
+```
+x, y values for tile coordinates
+
+origin
+  *__________________________
+  |        |        |        |
+  |  0, 0  |  1, 0  |  2, 0  |
+  |________|________|________|
+  |        |        |        |
+  |  0, 1  |  1, 1  |  2, 1  |
+  |________|________|________|
+  |        |        |        |
+  |  0, 2  |  1, 2  |  2, 2  |
+  |________|________|________|
+```
+
+This change should only affect you if you were using a custom `tileLoadFunction` or `tileUrlFunction`.  For example, if you used to have a `tileUrlFunction` that looked like this:
+
+```js
+// before
+function tileUrlFunction(tileCoord) {
+  const z = tileCoord[0];
+  const x = tileCoord[1];
+  const y = -tileCoord[2] - 1;
+  // do something with z, x, y
+}
+```
+
+You would now do something like this:
+```js
+// after
+function tileUrlFunction(tileCoord) {
+  const z = tileCoord[0];
+  const x = tileCoord[1];
+  const y = tileCoord[2];
+  // do something with z, x, y
+}
+```
+
+In addition (this should be exceedingly rare), if you previously created a `ol/tilegrid/WMTS` by hand and you were providing an array of `sizes`, you no longer have to provide a negative height if your tile origin is the top-left corner (the common case).  On the other hand, if you are providing a custom array of `sizes` and your origin is the bottom of the grid (this is uncommon), your height values must now be negative.
+
+##### Removal of the "vector" render mode for vector tile layers
+
+If you were previously using `VectorTile` layers with `renderMode: 'vector'`, you have to remove this configuration option. That mode was removed. `'hybrid'` (default) and `'image'` are still available.
+
+##### Removal of the "renderMode" option for vector layers
+
+If you were previously using `Vector` layers with `renderMode: 'image'`, you have to remove this configuration option. Instead, use the new `ol/layer/VectorImage` layer with your `ol/source/Vector`.
+
+##### New declutter behavior
+
+If a map has more than one layer with `declutter` set to true, decluttering now considers all `Vector` and `VectorTile` layers, instead of decluttering each layer separately. Only `VectorImage` layers continue to be decluttered separately. The higher the z-index of a layer, the higher the priority of its decluttered items.
+
+Within a layer, the declutter order has changed. Previously, styles with a lower `zIndex` were prioritized over those with a higher `zIndex`. Now the opposite order is used.
+
+On vector layers, even if decluttered images or texts have a lower z-Index than polygons or lines, they will now be rendered on top of the polygons or lines. For vector tile layers, this was the case already in previous releases.
+
+##### New `prerender` and `postrender` layer events replace old `precompose`, `render` and `postcompose` events
+
+If you were previously registering for `precompose` and `postcompose` events, you should now register for `prerender` and `postrender` events on layers.  Instead of the previous `render` event, you should now listen for `postrender`. Layers are no longer composed to a single Canvas element.  Instead, they are added to the map viewport as individual elements.
+
+##### New `getVectorContext` function provides access to the immediate vector rendering API
+
+Previously, render events included a `vectorContext` property that allowed you to render features or geometries directly to the map.  This is still possible, but you now have to explicitly create a vector context with the `getVectorContext` function.  This change makes the immediate rendering API an explicit dependency if your application uses it.  If you don't use this API, your application bundle will not include the vector rendering modules (as it did before).
+
+Here is an abbreviated example of how to use the `getVectorContext` function:
+
+```js
+import {getVectorContext} from 'ol/render';
+
+// construct your map and layers as usual
+
+layer.on('postrender', function(event) {
+  const vectorContext = getVectorContext(event);
+  // use any of the drawing methods on the vector context
+});
+```
+
+##### Layers can only be added to a single map
+
+Previously, it was possible to render a single layer in two maps.  Now, each layer can only belong to a single map (in the same way that a single DOM element can only have one parent).
+
+##### The `OverviewMap` requires a list of layers.
+
+Due to the constraint above (layers can only be added to a single map), the overview map needs to be constructed with a list of layers.
+
+##### The `ol/Graticule` has been replaced by `ol/layer/Graticule`
+
+Previously, a graticule was not a layer.  Now it is.  See the graticule example for details on how to add a graticule layer to your map.
+
+##### `ol/format/Feature` API change
+
+The `getLastExtent()` method, which was required for custom `tileLoadFunction`s in `ol/source/Vector`, has been removed because it is no longer needed (see below).
+
+##### `ol/VectorTile` API changes
+
+* Removal of the `getProjection()` and `setProjection()` methods. These were used in custom `tileLoadFunction`s on `ol/source/VectorTile`, which work differently now (see below).
+* Removal of the `getExtent()` and `setExtent()` methods. These were used in custom `tileLoadFunction`s on `ol/source/VectorTile`, which work differently now (see below).
+
+##### Custom tileLoadFunction on a VectorTile source needs changes
+
+Previously, applications needed to call `setProjection()` and `setExtent()` on the tile in a custom `tileLoadFunction` on `ol/source/VectorTile`. The format's `getLastExtent()` method was used to get the extent. All this is no longer needed. Instead, the `extent` (first argument to the loader function) and `projection` (third argument to the loader function) are simply passed as `extent` and `featureProjection` options to the format's `readFeatures()` method.
+
+Example for an old `tileLoadFunction`:
+
+```js
+function(tile, url) {
+  tile.setLoader(function() {
+    fetch(url).then(function(response) {
+      response.arrayBuffer().then(function(data) {
+        var format = tile.getFormat();
+        tile.setProjection(format.readProjection(data));
+        tile.setFeatures(format.readFeatures(data, {
+          // featureProjection is not required for ol/format/MVT
+          featureProjection: map.getView().getProjection()
+        }));
+        tile.setExtent(format.getLastExtent());
+      })
+    })
+  }
+});
+```
+
+This function needs to be changed to:
+
+```js
+function(tile, url) {
+  tile.setLoader(function(extent, resolution, projection) {
+    fetch(url).then(function(response) {
+      response.arrayBuffer().then(function(data) {
+        var format = tile.getFormat();
+        tile.setFeatures(format.readFeatures(data, {
+          // extent is only required for ol/format/MVT
+          extent: extent,
+          featureProjection: projection
+        }));
+      })
+    })
+  }
+});
+```
+
+##### Drop of support for the experimental WebGL renderer
+
+The WebGL map and layers renderers are gone, replaced by a `WebGLHelper` function that provides a lightweight,
+low-level access to the WebGL API. This is implemented in a new `WebGLPointsLayer` which does simple rendering of large number
+of points with custom shaders.
+
+This is now used in the `Heatmap` layer.
+
+The removed classes and components are:
+* `WebGLMap` and `WebGLMapRenderer`
+* `WebGLLayerRenderer`
+* `WebGLImageLayer` and `WebGLImageLayerRenderer`
+* `WebGLTileLayer` and `WebGLTileLayerRenderer`
+* `WebGLVectorLayer` and `WebGLVectorLayerRenderer`
+* `WebGLReplay` and derived classes, along with associated shaders
+* `WebGLReplayGroup`
+* `WebGLImmediateRenderer`
+* `WebGLMap`
+* The shader build process using `mustache` and the `Makefile` at the root
+
+##### Removal of the AtlasManager
+
+Following the removal of the experimental WebGL renderer, the AtlasManager has been removed as well. The atlas was only used by this renderer.
+The non API `getChecksum` functions of the style is also removed.
+
+##### Change of the behavior of the vector source's clear() and refresh() methods
+
+The `ol/source/Vector#clear()` method no longer triggers a reload of the data from the server. If you were previously using `clear()` to refetch from the server, you now have to use `refresh()`.
+
+The `ol/source/Vector#refresh()` method now removes all features from the source and triggers a reload of the data from the server. If you were previously using the `refresh()` method to re-render a vector layer, you should instead call `ol/layer/Vector#changed()`.
+
+#### Other changes
+
+##### Allow declutter in image render mode
+
+It is now possible to configure vector tile layers with `declutter: true` and `renderMode: 'image'`. However, note that decluttering will be done per tile, resulting in labels and point symbols getting cut off at tile boundaries.
+Until now, using both options forced the render mode to be `hybrid`.
+
+##### Always load tiles while animating or interacting
+
+`ol/PluggableMap` and subclasses no longer support the `loadTilesWhileAnimating` and `loadTilesWhileInteracting` options. These options were used to enable tile loading during animations and interactions. With the new DOM composition render strategy, it is no longer necessary to postpone tile loading until after animations or interactions.
+
+### v5.3.0
+
+#### The `getUid` function returns string
+
+The `getUid` function from the `ol/util` module now returns a string instead of a number.
+
+#### Attributions are not collapsible for `ol/source/OSM`
+
+When a map contains a layer from a `ol/source/OSM` source, the `ol/control/Attribution` control will be shown with the `collapsible: false` behavior.
+
+To get the previous behavior, configure the `ol/control/Attribution` control with `collapsible: true`.
+
 ### v5.2.0
 
 #### Removal of the `snapToPixel` option for `ol/style/Image` subclasses
@@ -16,7 +291,7 @@ When rendering with the Immediate API, symbols will no longer be snapped to inte
 
 #### Geometry constructor and `setCoordinates` no longer accept `null` coordinates
 
-Geometries (`ol/geom/*`) now need to be constructed with valid coordinates (center for `ol/geom/Circle`) as first constructor argument. The same applies to the `setCoordinates()` (`setCenter() for `ol/geom/Circle`) method.
+Geometries (`ol/geom/*`) now need to be constructed with valid coordinates (center for `ol/geom/Circle`) as first constructor argument. The same applies to the `setCoordinates()` (`setCenter()` for `ol/geom/Circle`) method.
 
 ### v5.0.0
 

changelog/v5.2.0.md

@@ -1,4 +1,4 @@
-# v5.1.0
+# v5.2.0
 
 The 5.2 release adds a few new features a handful of fixes, including regressions that were reported after the 5.1 release.  You should be able to upgrade without any additional work.  See the one note below regarding `snapToPixel` on `ol/style/Image` and subclasses.
 

changelog/v5.3.0.md

@@ -0,0 +1,217 @@
+# v5.3.0
+
+We're continuing to work toward more complete type checking with TypeScript – based on JSDoc annotations in the source.  The 5.3 release includes a number of bug fixes related to the type checking effort.  In addition the release comes with a handful of new features and improved API reference docs.
+
+### Upgrade Notes
+
+#### The `getUid` function returns string
+
+The `getUid` function from the `ol/util` module now returns a string instead of a number.
+
+#### Attributions are not collapsible for `ol/source/OSM`
+
+When a map contains a layer from a `ol/source/OSM` source, the `ol/control/Attribution` control will be shown with the `collapsible: false` behavior.
+
+To get the previous behavior, configure the `ol/control/Attribution` control with `collapsible: true`. 
+
+### New Features and Fixes
+
+ * [#8642](https://github.com/openlayers/openlayers/pull/8642) - Fixes for optional key passing, issue #8067 for tile sources ([@dimin](https://github.com/dimin))
+ * [#8885](https://github.com/openlayers/openlayers/pull/8885) - Move GeolocationProperty into Geolocation ([@fredj](https://github.com/fredj))
+ * [#8881](https://github.com/openlayers/openlayers/pull/8881) - Remove custom styles in drag-and-drop examples ([@fredj](https://github.com/fredj))
+ * [#8877](https://github.com/openlayers/openlayers/pull/8877) - Create context in vector tile layer constructor ([@tschaub](https://github.com/tschaub))
+ * [#8883](https://github.com/openlayers/openlayers/pull/8883) - New test runner ([@tschaub](https://github.com/tschaub))
+ * [#8882](https://github.com/openlayers/openlayers/pull/8882) - Import simplification ([@fredj](https://github.com/fredj))
+ * [#8858](https://github.com/openlayers/openlayers/pull/8858) - Add condition for viewParams and TypeScript related option ([@webgeodatavore](https://github.com/webgeodatavore))
+ * [#8879](https://github.com/openlayers/openlayers/pull/8879) - Build with CircleCI ([@openlayers](https://github.com/openlayers))
+ * [#8878](https://github.com/openlayers/openlayers/pull/8878) - Avoid logging 404 warnings ([@tschaub](https://github.com/tschaub))
+ * [#8876](https://github.com/openlayers/openlayers/pull/8876) - Remove RenderType enum from vector tile layer ([@tschaub](https://github.com/tschaub))
+ * [#8874](https://github.com/openlayers/openlayers/pull/8874) - Remove unnecessary type casts in canvas layer renderer ([@tschaub](https://github.com/tschaub))
+ * [#8869](https://github.com/openlayers/openlayers/pull/8869) - Fix more types for TypeScript ([@ahocevar](https://github.com/ahocevar))
+ * [#8868](https://github.com/openlayers/openlayers/pull/8868) - Throw when calling abstract methods; fix abstract return types ([@ahocevar](https://github.com/ahocevar))
+ * [#8862](https://github.com/openlayers/openlayers/pull/8862) - Legacy build and apidoc improvements ([@ahocevar](https://github.com/ahocevar))
+ * [#8867](https://github.com/openlayers/openlayers/pull/8867) - Fix example builder ([@ahocevar](https://github.com/ahocevar))
+ * [#8852](https://github.com/openlayers/openlayers/pull/8852) - Improve link handling in API docs ([@ahocevar](https://github.com/ahocevar))
+ * [#8853](https://github.com/openlayers/openlayers/pull/8853) - Make rendercomplete work with vector sources without loader ([@ahocevar](https://github.com/ahocevar))
+ * [#8851](https://github.com/openlayers/openlayers/pull/8851) - Use typescript types for RBush ([@fredj](https://github.com/fredj))
+ * [#8850](https://github.com/openlayers/openlayers/pull/8850) - Remove old TODO in ol/Graticule ([@fredj](https://github.com/fredj))
+ * [#8847](https://github.com/openlayers/openlayers/pull/8847) - Fix API docs ([@ahocevar](https://github.com/ahocevar))
+ * [#8845](https://github.com/openlayers/openlayers/pull/8845) - Remove RenderType enum from vector layer ([@tschaub](https://github.com/tschaub))
+ * [#8843](https://github.com/openlayers/openlayers/pull/8843) - Fix ts typing for fullscreen button ([@tonio](https://github.com/tonio))
+ * [#8841](https://github.com/openlayers/openlayers/pull/8841) - Use super.method instead of prototype.method.call ([@fredj](https://github.com/fredj))
+ * [#8842](https://github.com/openlayers/openlayers/pull/8842) - Change target type from Element to HTMLElement ([@fredj](https://github.com/fredj))
+ * [#8840](https://github.com/openlayers/openlayers/pull/8840) - Remove unneeded code in VectorTile renderer ([@elemoine](https://github.com/elemoine))
+ * [#8844](https://github.com/openlayers/openlayers/pull/8844) - Set crossOrigin to anonymous in mapbox-streets-v6-style ([@elemoine](https://github.com/elemoine))
+ * [#8776](https://github.com/openlayers/openlayers/pull/8776) - Use setTimeout without the window namespace ([@ahocevar](https://github.com/ahocevar))
+ * [#8837](https://github.com/openlayers/openlayers/pull/8837) - Re-export MousePosition from ol/control ([@fredj](https://github.com/fredj))
+ * [#8832](https://github.com/openlayers/openlayers/pull/8832) - Remove source foreachfeatureatcoordinate from ol/renderer/webgl/ImageLayer ([@fredj](https://github.com/fredj))
+ * [#8833](https://github.com/openlayers/openlayers/pull/8833) - Fix wrong filename in type annotation ([@fredj](https://github.com/fredj))
+ * [#8827](https://github.com/openlayers/openlayers/pull/8827) - Removed unused forEachFeatureAtCoordinate from ol/source/Source ([@schmidtk](https://github.com/schmidtk))
+ * [#8830](https://github.com/openlayers/openlayers/pull/8830) - Type annotation fixes in ol/control/ ([@fredj](https://github.com/fredj))
+ * [#8829](https://github.com/openlayers/openlayers/pull/8829) - Change getUid return type from number to string ([@fredj](https://github.com/fredj))
+ * [#8825](https://github.com/openlayers/openlayers/pull/8825) - Fix TypeScript errors ([@schmidtk](https://github.com/schmidtk))
+ * [#8828](https://github.com/openlayers/openlayers/pull/8828) - Re-export VectorTile from ol/source ([@elemoine](https://github.com/elemoine))
+ * [#8806](https://github.com/openlayers/openlayers/pull/8806) - Preserve button class name list in full screen control on toggle ([@notnotse](https://github.com/notnotse))
+ * [#8817](https://github.com/openlayers/openlayers/pull/8817) - Clarify format option for ol/source/WMTS ([@romanzoller](https://github.com/romanzoller))
+ * [#8824](https://github.com/openlayers/openlayers/pull/8824) - Fix TypeScript errors in ol/format/GML ([@schmidtk](https://github.com/schmidtk))
+ * [#8820](https://github.com/openlayers/openlayers/pull/8820) - Polygon intersectsExtent failure - Issue #8795 ([@hmdavidjunior](https://github.com/hmdavidjunior))
+ * [#8519](https://github.com/openlayers/openlayers/pull/8519) - GML Format Improvements #8516 #8517 #8518 ([@NielsCharlier](https://github.com/NielsCharlier))
+ * [#8711](https://github.com/openlayers/openlayers/pull/8711) - Fix TypeScript errors in ol/format/GML ([@schmidtk](https://github.com/schmidtk))
+ * [#8818](https://github.com/openlayers/openlayers/pull/8818) - Fix the way zoom comes from ([@cs09g](https://github.com/cs09g))
+ * [#8804](https://github.com/openlayers/openlayers/pull/8804) - Add possibility to disable collapsible attributions from Source ([@notnotse](https://github.com/notnotse))
+ * [#8787](https://github.com/openlayers/openlayers/pull/8787) - Replace instanceof checks with other logic ([@ahocevar](https://github.com/ahocevar))
+ * [#8808](https://github.com/openlayers/openlayers/pull/8808) - Fix format and version properties in ol/source/WMTS Options typedef ([@fredj](https://github.com/fredj))
+ * [#8812](https://github.com/openlayers/openlayers/pull/8812) - Update snap.js ([@rosedo](https://github.com/rosedo))
+ * [#8809](https://github.com/openlayers/openlayers/pull/8809) - Configurable interval options ([@notnotse](https://github.com/notnotse))
+ * [#8798](https://github.com/openlayers/openlayers/pull/8798) - Use unpkg.com instead of rawgit.com ([@fredj](https://github.com/fredj))
+ * [#8805](https://github.com/openlayers/openlayers/pull/8805) - Do not draw image with width or height < 0.5 ([@notnotse](https://github.com/notnotse))
+ * [#8803](https://github.com/openlayers/openlayers/pull/8803) - Handle zoom slider position with floating point numbers ([@notnotse](https://github.com/notnotse))
+ * [#8789](https://github.com/openlayers/openlayers/pull/8789) - Spelling and indentation fixes ([@fredj](https://github.com/fredj))
+ * [#8782](https://github.com/openlayers/openlayers/pull/8782) - Fix getSimplifiedGeometry definition ([@wallw-bits](https://github.com/wallw-bits))
+ * [#8783](https://github.com/openlayers/openlayers/pull/8783) - Fix missing method declaration ([@wallw-bits](https://github.com/wallw-bits))
+ * [#8781](https://github.com/openlayers/openlayers/pull/8781) - Fix type check errors ([@schmidtk](https://github.com/schmidtk))
+ * [#8779](https://github.com/openlayers/openlayers/pull/8779) - Fix additional type check errors ([@schmidtk](https://github.com/schmidtk))
+ * [#8753](https://github.com/openlayers/openlayers/pull/8753) - Fix type check in ol/PluggableMap.js ([@wallw-bits](https://github.com/wallw-bits))
+ * [#8762](https://github.com/openlayers/openlayers/pull/8762) - Fix type errors from interaction event handlers ([@schmidtk](https://github.com/schmidtk))
+ * [#8763](https://github.com/openlayers/openlayers/pull/8763) - Fix type check for ol/events ([@wallw-bits](https://github.com/wallw-bits))
+ * [#8774](https://github.com/openlayers/openlayers/pull/8774) - Fix type check errors in ol/renderer/webgl ([@schmidtk](https://github.com/schmidtk))
+ * [#8768](https://github.com/openlayers/openlayers/pull/8768) - Fix type check errors in ol/interaction/Select ([@schmidtk](https://github.com/schmidtk))
+ * [#8764](https://github.com/openlayers/openlayers/pull/8764) - Fix TypeScript errors in ol/interaction/Draw ([@schmidtk](https://github.com/schmidtk))
+ * [#8767](https://github.com/openlayers/openlayers/pull/8767) - Fix type check errors in ol/interaction/Modify ([@schmidtk](https://github.com/schmidtk))
+ * [#8773](https://github.com/openlayers/openlayers/pull/8773) - Fix type check errors in ol/renderer/canvas ([@schmidtk](https://github.com/schmidtk))
+ * [#8769](https://github.com/openlayers/openlayers/pull/8769) - Fix type check errors in ol/render/canvas ([@schmidtk](https://github.com/schmidtk))
+ * [#8770](https://github.com/openlayers/openlayers/pull/8770) - Fix type check errors in ol/render/webgl ([@schmidtk](https://github.com/schmidtk))
+ * [#8765](https://github.com/openlayers/openlayers/pull/8765) - Simplify logic for fixed tile url functions ([@ahocevar](https://github.com/ahocevar))
+ * [#8766](https://github.com/openlayers/openlayers/pull/8766) - Use FeatureLike typedef ([@fredj](https://github.com/fredj))
+ * [#8739](https://github.com/openlayers/openlayers/pull/8739) - Fix TypeScript errors in ol/format/WMSGetFeatureInfo ([@schmidtk](https://github.com/schmidtk))
+ * [#8666](https://github.com/openlayers/openlayers/pull/8666) - Fix condition TypeScript errors ([@schmidtk](https://github.com/schmidtk))
+ * [#8757](https://github.com/openlayers/openlayers/pull/8757) - Use typeof to simplify JSDoc class types ([@schmidtk](https://github.com/schmidtk))
+ * [#8759](https://github.com/openlayers/openlayers/pull/8759) - Use es6 class inheritance in examples ([@fredj](https://github.com/fredj))
+ * [#8761](https://github.com/openlayers/openlayers/pull/8761) - Allow returning RenderFeature in ol/format/Feature ([@schmidtk](https://github.com/schmidtk))
+ * [#8758](https://github.com/openlayers/openlayers/pull/8758) - Fix TS error and prevent extra string conversion ([@schmidtk](https://github.com/schmidtk))
+ * [#8736](https://github.com/openlayers/openlayers/pull/8736) - Typescript misc fixes ([@fredj](https://github.com/fredj))
+ * [#8741](https://github.com/openlayers/openlayers/pull/8741) - Fix TypeScript errors in ol/geom/* ([@schmidtk](https://github.com/schmidtk))
+ * [#8707](https://github.com/openlayers/openlayers/pull/8707) - Fix TypeScript errors in ol/format/Feature ([@schmidtk](https://github.com/schmidtk))
+ * [#8754](https://github.com/openlayers/openlayers/pull/8754) - Fix type check in ol/math ([@wallw-bits](https://github.com/wallw-bits))
+ * [#8747](https://github.com/openlayers/openlayers/pull/8747) - Update doc/faq.md ([@fredj](https://github.com/fredj))
+ * [#8744](https://github.com/openlayers/openlayers/pull/8744) - Fix type checks in VectorTileSource ([@wallw-bits](https://github.com/wallw-bits))
+ * [#8740](https://github.com/openlayers/openlayers/pull/8740) - Increase linestring textalign test tolerance to be Firefox compliant. ([@benVigie](https://github.com/benVigie))
+ * [#8738](https://github.com/openlayers/openlayers/pull/8738) - Cast to parent type to fix TS errors ([@schmidtk](https://github.com/schmidtk))
+ * [#8737](https://github.com/openlayers/openlayers/pull/8737) - Flag optional param to fix TS error ([@schmidtk](https://github.com/schmidtk))
+ * [#8742](https://github.com/openlayers/openlayers/pull/8742) - Fix type checks in Vector source ([@wallw-bits](https://github.com/wallw-bits))
+ * [#8743](https://github.com/openlayers/openlayers/pull/8743) - Fix type check in Raster source ([@wallw-bits](https://github.com/wallw-bits))
+ * [#8733](https://github.com/openlayers/openlayers/pull/8733) - Fix TypeScript errors in ol/format/WFS ([@schmidtk](https://github.com/schmidtk))
+ * [#8735](https://github.com/openlayers/openlayers/pull/8735) - Fix TypeScript errors in ol/format/WKT ([@schmidtk](https://github.com/schmidtk))
+ * [#8730](https://github.com/openlayers/openlayers/pull/8730) - Fix TypeScript errors in ol/format/KML ([@schmidtk](https://github.com/schmidtk))
+ * [#8732](https://github.com/openlayers/openlayers/pull/8732) - Fix type check in ol/source/Tile ([@wallw-bits](https://github.com/wallw-bits))
+ * [#8731](https://github.com/openlayers/openlayers/pull/8731) - Dispatch a GeolocationError in Geolocation ([@fredj](https://github.com/fredj))
+ * [#8729](https://github.com/openlayers/openlayers/pull/8729) - Move functions out of the PointerEvent class ([@fredj](https://github.com/fredj))
+ * [#8724](https://github.com/openlayers/openlayers/pull/8724) - Typescript misc fixes ([@fredj](https://github.com/fredj))
+ * [#8717](https://github.com/openlayers/openlayers/pull/8717) - Fix type checks in TileArcGISRest ([@fredj](https://github.com/fredj))
+ * [#8718](https://github.com/openlayers/openlayers/pull/8718) - Fix TypeScript errors in ol/format/GPX ([@schmidtk](https://github.com/schmidtk))
+ * [#8706](https://github.com/openlayers/openlayers/pull/8706) - Use EsriJSON types from @types/arcgis-rest-api ([@schmidtk](https://github.com/schmidtk))
+ * [#8709](https://github.com/openlayers/openlayers/pull/8709) - Fix TypeScript errors in ol/format/GeoJSON ([@schmidtk](https://github.com/schmidtk))
+ * [#8708](https://github.com/openlayers/openlayers/pull/8708) - Fix type checks in ImageCanvas source ([@wallw-bits](https://github.com/wallw-bits))
+ * [#8710](https://github.com/openlayers/openlayers/pull/8710) - Fix type checks in ImageArcGISRest ([@wallw-bits](https://github.com/wallw-bits))
+ * [#8698](https://github.com/openlayers/openlayers/pull/8698) - Fix zoom slider events ([@intouch-smartwater](https://github.com/intouch-smartwater))
+ * [#8697](https://github.com/openlayers/openlayers/pull/8697) - Remove unused properties from Cluster and Image options ([@fredj](https://github.com/fredj))
+ * [#8688](https://github.com/openlayers/openlayers/pull/8688) - Fix PointerEventHandler event type ([@fredj](https://github.com/fredj))
+ * [#8686](https://github.com/openlayers/openlayers/pull/8686) - Remove extra imports in jsdoc ([@fredj](https://github.com/fredj))
+ * [#8681](https://github.com/openlayers/openlayers/pull/8681) - Check the type of the source before using it ([@wallw-bits](https://github.com/wallw-bits))
+ * [#8691](https://github.com/openlayers/openlayers/pull/8691) - Fix assertion error documentation URL ([@romanzoller](https://github.com/romanzoller))
+ * [#8692](https://github.com/openlayers/openlayers/pull/8692) - Type check fixes for Cluster source ([@wallw-bits](https://github.com/wallw-bits))
+ * [#8677](https://github.com/openlayers/openlayers/pull/8677) - Type check fixes for VectorSource ([@wallw-bits](https://github.com/wallw-bits))
+ * [#8684](https://github.com/openlayers/openlayers/pull/8684) - Define BingMapsImageryMetadataResponse type ([@wallw-bits](https://github.com/wallw-bits))
+ * [#8690](https://github.com/openlayers/openlayers/pull/8690) - Fix type checks in CartoDB ([@wallw-bits](https://github.com/wallw-bits))
+ * [#8693](https://github.com/openlayers/openlayers/pull/8693) - Fix type check errors for Image source ([@wallw-bits](https://github.com/wallw-bits))
+ * [#8672](https://github.com/openlayers/openlayers/pull/8672) - Fix source type in Raster source ([@fredj](https://github.com/fredj))
+ * [#8665](https://github.com/openlayers/openlayers/pull/8665) - Fix type check errors in RBush ([@wallw-bits](https://github.com/wallw-bits))
+ * [#8680](https://github.com/openlayers/openlayers/pull/8680) - TypeScript fixes for ol/events ([@schmidtk](https://github.com/schmidtk))
+ * [#8678](https://github.com/openlayers/openlayers/pull/8678) - Ensure image is Image or Video before settings src ([@wallw-bits](https://github.com/wallw-bits))
+ * [#8676](https://github.com/openlayers/openlayers/pull/8676) - Cast tileGrid to WMTSTileGrid for type check ([@wallw-bits](https://github.com/wallw-bits))
+ * [#8679](https://github.com/openlayers/openlayers/pull/8679) - Type check fixes in Triangulation ([@wallw-bits](https://github.com/wallw-bits))
+ * [#8657](https://github.com/openlayers/openlayers/pull/8657) - Typescript fixes ([@fgravin](https://github.com/fgravin))
+ * [#8671](https://github.com/openlayers/openlayers/pull/8671) - Fix typescript in FeatureLoader ([@fgravin](https://github.com/fgravin))
+ * [#8675](https://github.com/openlayers/openlayers/pull/8675) - Get width as number from number|Size ([@wallw-bits](https://github.com/wallw-bits))
+ * [#8654](https://github.com/openlayers/openlayers/pull/8654) - Remove extra imports in jsdoc ([@fredj](https://github.com/fredj))
+ * [#8655](https://github.com/openlayers/openlayers/pull/8655) - Remove webkit specific properties from Touch ([@fredj](https://github.com/fredj))
+ * [#8663](https://github.com/openlayers/openlayers/pull/8663) - Add vendor-specific TS declarations for the Fullscreen API. ([@schmidtk](https://github.com/schmidtk))
+ * [#8658](https://github.com/openlayers/openlayers/pull/8658) - Don't define functions in the prototype ([@fredj](https://github.com/fredj))
+ * [#8662](https://github.com/openlayers/openlayers/pull/8662) - Explicitly define type of 'this' ([@wallw-bits](https://github.com/wallw-bits))
+ * [#8664](https://github.com/openlayers/openlayers/pull/8664) - Add native Event to ListenerFunction signature. ([@schmidtk](https://github.com/schmidtk))
+ * [#8668](https://github.com/openlayers/openlayers/pull/8668) - Add missing 'module' annotation ([@fredj](https://github.com/fredj))
+ * [#8643](https://github.com/openlayers/openlayers/pull/8643) - Fix style TypeScript errors ([@schmidtk](https://github.com/schmidtk))
+ * [#8638](https://github.com/openlayers/openlayers/pull/8638) - Fix event type in hasListener check ([@ahocevar](https://github.com/ahocevar))
+ * [#8618](https://github.com/openlayers/openlayers/pull/8618) - Use TopoJSON types from @types/topojson ([@fredj](https://github.com/fredj))
+ * [#8619](https://github.com/openlayers/openlayers/pull/8619) - Remove wrong Geometry type in KML format ([@fredj](https://github.com/fredj))
+ * [#8627](https://github.com/openlayers/openlayers/pull/8627) - Fix several type imports ([@ahocevar](https://github.com/ahocevar))
+ * [#8629](https://github.com/openlayers/openlayers/pull/8629) - Enable circle primitive in draw-shapes example ([@megawac](https://github.com/megawac))
+ * [#8626](https://github.com/openlayers/openlayers/pull/8626) - Better type annotations / type casts ([@marcjansen](https://github.com/marcjansen))
+ * [#8622](https://github.com/openlayers/openlayers/pull/8622) - Remove unused method ([@tschaub](https://github.com/tschaub))
+ * [#8615](https://github.com/openlayers/openlayers/pull/8615) - Use GeoJSON types from @types/geojson ([@tschaub](https://github.com/tschaub))
+ * [#8609](https://github.com/openlayers/openlayers/pull/8609) - Remove extra imports in jsdoc ([@fredj](https://github.com/fredj))
+ * [#8613](https://github.com/openlayers/openlayers/pull/8613) - Lazily detect tainted canvas ([@ahocevar](https://github.com/ahocevar))
+ * [#8610](https://github.com/openlayers/openlayers/pull/8610) - Sensible touch behavior of the MousePosition control ([@ahocevar](https://github.com/ahocevar))
+ * [#8602](https://github.com/openlayers/openlayers/pull/8602) - Add missing map property in ol/layer/Layer constructor options ([@fredj](https://github.com/fredj))
+ * [#8607](https://github.com/openlayers/openlayers/pull/8607) - Listener return is boolean or void ([@tschaub](https://github.com/tschaub))
+ * [#8595](https://github.com/openlayers/openlayers/pull/8595) - Optional arguments and typedef properties ([@tschaub](https://github.com/tschaub))
+ * [#8594](https://github.com/openlayers/openlayers/pull/8594) - Remove extra imports in jsdoc ([@fredj](https://github.com/fredj))
+ * [#8596](https://github.com/openlayers/openlayers/pull/8596) - Add types for the UTFGrid and TileJSON JSON responses ([@tschaub](https://github.com/tschaub))
+ * [#8591](https://github.com/openlayers/openlayers/pull/8591) - Add missing properties in TextState typedef ([@fredj](https://github.com/fredj))
+ * [#8590](https://github.com/openlayers/openlayers/pull/8590) - Don't import ourselves ([@fredj](https://github.com/fredj))
+ * [#8586](https://github.com/openlayers/openlayers/pull/8586) - Cast 'originalEvent' in interactions ([@fredj](https://github.com/fredj))
+ * [#8588](https://github.com/openlayers/openlayers/pull/8588) - Rework createXYZ ([@tschaub](https://github.com/tschaub))
+ * [#8587](https://github.com/openlayers/openlayers/pull/8587) - Add a statement to trigger TypeScript checking ([@tschaub](https://github.com/tschaub))
+ * [#8345](https://github.com/openlayers/openlayers/pull/8345) - TypeScript (1/n) ([@tschaub](https://github.com/tschaub))
+ * [#8579](https://github.com/openlayers/openlayers/pull/8579) - Better type annotation ([@marcjansen](https://github.com/marcjansen))
+ * [#8580](https://github.com/openlayers/openlayers/pull/8580) - Cast POINTER_ID before comparison ([@marcjansen](https://github.com/marcjansen))
+ * [#8574](https://github.com/openlayers/openlayers/pull/8574) - Rename Extent to ExtentInteraction ([@fredj](https://github.com/fredj))
+ * [#8577](https://github.com/openlayers/openlayers/pull/8577) - Remove geojson.js extern inclusion in tasks/generate-info ([@fredj](https://github.com/fredj))
+ * [#8573](https://github.com/openlayers/openlayers/pull/8573) - Fix freehand polygon drawing ([@fredj](https://github.com/fredj))
+ * [#8572](https://github.com/openlayers/openlayers/pull/8572) - typescript misc fixes ([@fredj](https://github.com/fredj))
+ * [#8569](https://github.com/openlayers/openlayers/pull/8569) - Make proj~get simpler and faster ([@ahocevar](https://github.com/ahocevar))
+ * [#8567](https://github.com/openlayers/openlayers/pull/8567) - Use 'Element' type instead of 'Node' ([@fredj](https://github.com/fredj))
+ * [#8558](https://github.com/openlayers/openlayers/pull/8558) - Fix default zIndex value and documentation for layer options ([@fredj](https://github.com/fredj))
+ * [#8555](https://github.com/openlayers/openlayers/pull/8555) - Do not minify examples that inject code into workers ([@ahocevar](https://github.com/ahocevar))
+ * [#8557](https://github.com/openlayers/openlayers/pull/8557) - Fix typo in release notes ([@ahocevar](https://github.com/ahocevar))
+
+
+<details>
+  <summary>Dependency Updates</summary>
+
+ * [#8884](https://github.com/openlayers/openlayers/pull/8884) - Update webpack to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#8880](https://github.com/openlayers/openlayers/pull/8880) - Update webpack to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#8872](https://github.com/openlayers/openlayers/pull/8872) - Update webpack to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#8860](https://github.com/openlayers/openlayers/pull/8860) - Update webpack to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#8855](https://github.com/openlayers/openlayers/pull/8855) - Update webpack to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#8838](https://github.com/openlayers/openlayers/pull/8838) - Update webpack to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#8834](https://github.com/openlayers/openlayers/pull/8834) - Update webpack to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#8799](https://github.com/openlayers/openlayers/pull/8799) - Update rollup to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#8796](https://github.com/openlayers/openlayers/pull/8796) - Update rollup-plugin-commonjs to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#8793](https://github.com/openlayers/openlayers/pull/8793) - Update rollup-plugin-buble to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#8794](https://github.com/openlayers/openlayers/pull/8794) - Update rollup to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#8788](https://github.com/openlayers/openlayers/pull/8788) - Update front-matter to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#8785](https://github.com/openlayers/openlayers/pull/8785) - chore(package): update rollup to version 0.66.4 ([@openlayers](https://github.com/openlayers))
+ * [#8719](https://github.com/openlayers/openlayers/pull/8719) - Update marked to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#8714](https://github.com/openlayers/openlayers/pull/8714) - chore(package): update webpack to version 4.20.2 ([@openlayers](https://github.com/openlayers))
+ * [#8703](https://github.com/openlayers/openlayers/pull/8703) - Update webpack to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#8646](https://github.com/openlayers/openlayers/pull/8646) - Update mustache to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#8645](https://github.com/openlayers/openlayers/pull/8645) - Update rollup-plugin-uglify to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#8685](https://github.com/openlayers/openlayers/pull/8685) - Update rollup to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#8683](https://github.com/openlayers/openlayers/pull/8683) - Update rollup to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#8656](https://github.com/openlayers/openlayers/pull/8656) - chore(package): update rollup-plugin-commonjs to version 9.1.8 ([@openlayers](https://github.com/openlayers))
+ * [#8667](https://github.com/openlayers/openlayers/pull/8667) - chore(package): update uglifyjs-webpack-plugin to version 2.0.1 ([@openlayers](https://github.com/openlayers))
+ * [#8661](https://github.com/openlayers/openlayers/pull/8661) - Update webpack to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#8644](https://github.com/openlayers/openlayers/pull/8644) - Update rollup to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#8631](https://github.com/openlayers/openlayers/pull/8631) - Update webpack to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#8630](https://github.com/openlayers/openlayers/pull/8630) - Update webpack to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#8617](https://github.com/openlayers/openlayers/pull/8617) - chore(package): update webpack to version 4.18.0 ([@openlayers](https://github.com/openlayers))
+ * [#8589](https://github.com/openlayers/openlayers/pull/8589) - Update rollup to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#8581](https://github.com/openlayers/openlayers/pull/8581) - Update rollup-plugin-node-resolve to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#8585](https://github.com/openlayers/openlayers/pull/8585) - Update rollup to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#8578](https://github.com/openlayers/openlayers/pull/8578) - Update webpack to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#8563](https://github.com/openlayers/openlayers/pull/8563) - Update rollup-plugin-uglify to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#8561](https://github.com/openlayers/openlayers/pull/8561) - Update rollup-plugin-uglify to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+
+
+</details>

config/jsdoc/api/conf.json

@@ -7,22 +7,23 @@
     "allowUnknownTags": true
   },
   "source": {
-    "includePattern": ".+\\.js(doc)?$",
+    "includePattern": ".+\\.js$",
     "excludePattern": "(^|\\/|\\\\)_",
     "include": [
       "src/ol"
     ]
   },
   "plugins": [
-    "plugins/markdown",
-    "config/jsdoc/api/plugins/normalize-exports",
+    "config/jsdoc/api/plugins/markdown",
+    "jsdoc-plugin-typescript",
     "config/jsdoc/api/plugins/inline-options",
+    "config/jsdoc/api/plugins/inheritdoc",
     "config/jsdoc/api/plugins/events",
     "config/jsdoc/api/plugins/observable",
     "config/jsdoc/api/plugins/api"
   ],
-  "markdown": {
-    "parser": "gfm"
+  "typescript": {
+    "moduleRoot": "src"
   },
   "templates": {
     "cleverLinks": true,

config/jsdoc/api/index.md

@@ -1,43 +1,43 @@
 <table><tr>
 <th width="33.3%">Map</th><th width="33.3%">View</th><th width="33.3%">Layers</th>
 </tr><tr>
-<td><p>A [map](module-ol_Map-Map.html) is made of [layers](module-ol_layer_Base-BaseLayer.html), a [view](module-ol_View-View.html) to visualize them, [interactions](module-ol_interaction_Interaction-Interaction.html) to modify map content and [controls](module-ol_control_Control-Control.html) with UI components.</p>
-[Overview](module-ol_Map-Map.html)<br>
-[Creation](module-ol_Map-Map.html#Map)<br>
-[Events](module-ol_MapBrowserEvent-MapBrowserEvent.html)</td>
+<td><p>A <a href="module-ol_Map-Map.html">map</a> is made of <a href="module-ol_layer_Base-BaseLayer.html">layers</a>, a <a href="module-ol_View-View.html">view</a> to visualize them, <a href="module-ol_interaction_Interaction-Interaction.html">interactions</a> to modify map content and <a href="module-ol_control_Control-Control.html">controls</a> with UI components.</p>
+<a href="module-ol_Map-Map.html">Overview</a><br>
+<a href="module-ol_Map-Map.html#Map">Creation</a><br>
+<a href="module-ol_MapBrowserEvent-MapBrowserEvent.html">Events</a></td>
 <td><p>The view manages the visual parameters of the map view, like resolution or rotation.</p>
-[View](module-ol_View-View.html) with center, projection, resolution and rotation</td>
-<td><p>Layers are lightweight containers that get their data from [sources](module-ol_source_Source-Source.html).</p>
-[layer/Tile](module-ol_layer_Tile-TileLayer.html)<br>
-[layer/Image](module-ol_layer_Image-ImageLayer.html)<br>
-[layer/Vector](module-ol_layer_Vector-VectorLayer.html)<br>
-[layer/VectorTile](module-ol_layer_VectorTile-VectorTileLayer.html)</td>
+<a href="module-ol_View-View.html">View</a> with center, projection, resolution and rotation</td>
+<td><p>Layers are lightweight containers that get their data from <a href="module-ol_source_Source-Source.html">sources</a>.</p>
+<a href="module-ol_layer_Tile-TileLayer.html">ol/layer/Tile</a><br>
+<a href="module-ol_layer_Image-ImageLayer.html">ol/layer/Image</a><br>
+<a href="module-ol_layer_Vector-VectorLayer.html">ol/layer/Vector</a><br>
+<a href="module-ol_layer_VectorTile-VectorTileLayer.html">ol/layer/VectorTile</a></td>
 </tr><tr>
 <th>Controls</th><th>Interactions</th><th>Sources and formats</th>
 </tr><tr>
-<td>[Map default controls](module-ol_control_util.html#.defaults)<br>
-[All controls](module-ol_control_Control-Control.html)
+<td><a href="module-ol_control_util.html#.defaults">Map default controls</a><br>
+<a href="module-ol_control_Control-Control.html">All controls</a>
 </td>
 <td>
-[Map default interactions](module-ol_interaction.html#~defaults)<br>
-Interactions for [vector features](module-ol_Feature-Feature.html)
-<ul><li>[interaction/Select](module-ol_interaction_Select-Select.html)</li>
-<li>[interaction/Draw](module-ol_interaction_Draw-Draw.html)</li>
-<li>[interaction/Modify](module-ol_interaction_Modify-Modify.html)</li></ul>
-[All interactions](module-ol_interaction_Interaction-Interaction.html)</td>
-<td>[Tile sources](module-ol_source_Tile-TileSource.html) for [layer/Tile](module-ol_layer_Tile-TileLayer.html)
-<br>[Image sources](module-ol_source_Image-ImageSource.html) for [layer/Image](module-ol_layer_Image-ImageLayer.html)
-<br>[Vector sources](module-ol_source_Vector-VectorSource.html) for [layer/Vector](module-ol_layer_Vector-VectorLayer.html)
-<br>[Vector tile sources](module-ol_source_VectorTile-VectorTile.html) for [layer/VectorTile](module-ol_layer_VectorTile-VectorTileLayer.html)
-<br>[Formats](module-ol_format_Feature-FeatureFormat.html) for reading/writing vector data
-<br>[format/WMSCapabilities](module-ol_format_WMSCapabilities-WMSCapabilities.html)</td></tr>
+<a href="module-ol_interaction.html#~defaults">Map default interactions</a><br>
+Interactions for <a href="module-ol_Feature-Feature.html">vector features</a>
+<ul><li><a href="module-ol_interaction_Select-Select.html">ol/interaction/Select</a></li>
+<li><a href="module-ol_interaction_Draw-Draw.html">ol/interaction/Draw</a></li>
+<li><a href="module-ol_interaction_Modify-Modify.html">ol/interaction/Modify</a></li></ul>
+<a href="module-ol_interaction_Interaction-Interaction.html">All interactions</a></td>
+<td><a href="module-ol_source_Tile-TileSource.html">Tile sources</a> for <a href="module-ol_layer_Tile-TileLayer.html">ol/layer/Tile</a>
+<br><a href="module-ol_source_Image-ImageSource.html">Image sources</a> for <a href="module-ol_layer_Image-ImageLayer.html">ol/layer/Image</a>
+<br><a href="module-ol_source_Vector-VectorSource.html">Vector sources</a> for <a href="module-ol_layer_Vector-VectorLayer.html">ol/layer/Vector</a>
+<br><a href="module-ol_source_VectorTile-VectorTile.html">Vector tile sources</a> for <a href="module-ol_layer_VectorTile-VectorTileLayer.html">ol/layer/VectorTile</a>
+<br><a href="module-ol_format_Feature-FeatureFormat.html">Formats</a> for reading/writing vector data
+<br><a href="module-ol_format_WMSCapabilities-WMSCapabilities.html">ol/format/WMSCapabilities</a></td></tr>
 <tr><th>Projections</th><th>Observable objects</th><th>Other components</th></tr>
-<tr><td><p>All coordinates and extents need to be provided in view projection (default: EPSG:3857). To transform, use [proj.transform()](module-ol_proj.html#.transform) and [proj.transformExtent()](module-ol_proj.html#.transformExtent).</p>
-[ol/proj](module-ol_proj.html)</td>
-<td><p>Changes to all [ol/Object](module-ol_Object-BaseObject.html)s can be observed by calling the [object.on('propertychange')](module-ol_Object-BaseObject.html#on) method.  Listeners receive an [ol/Object~ObjectEvent](module-ol_Object-ObjectEvent.html) with information on the changed property and old value.</p>
+<tr><td><p>All coordinates and extents need to be provided in view projection (default: EPSG:3857). To transform, use <a href="module-ol_proj.html#.transform">ol/proj#transform()</a> and <a href="module-ol_proj.html#.transformExtent">ol/proj#transformExtent()</a>.</p>
+<a href="module-ol_proj.html">ol/proj</a></td>
+<td><p>Changes to all <a href="module-ol_Object-BaseObject.html">ol/Object</a>s can be observed by calling the <a href="module-ol_Object-BaseObject.html#on">object.on('propertychange')</a> method.  Listeners receive an <a href="module-ol_Object-ObjectEvent.html">ol/Object.ObjectEvent</a> with information on the changed property and old value.</p>
 <td>
-[ol/Geolocation](module-ol_Geolocation.html)<br>
-[ol/Overlay](module-ol_Overlay-Overlay.html)<br></td>
+<a href="module-ol_Geolocation.html">ol/Geolocation</a><br>
+<a href="module-ol_Overlay-Overlay.html">ol/Overlay</a><br></td>
 </tr></table>
 
 &nbsp;

config/jsdoc/api/plugins/api.js

@@ -31,6 +31,24 @@ function hasApiMembers(doclet) {
 }
 
 function includeAugments(doclet) {
+  // Make sure that `observables` and `fires` are taken from an already processed `class` doclet.
+  // This is necessary because JSDoc generates multiple doclets with the same longname.
+  const cls = classes[doclet.longname];
+  if (cls.observables && !doclet.observables) {
+    doclet.observables = cls.observables;
+  }
+  if (doclet.fires && cls.fires) {
+    for (let i = 0, ii = cls.fires.length; i < ii; ++i) {
+      const fires = cls.fires[i];
+      if (doclet.fires.indexOf(fires) == -1) {
+        doclet.fires.push(fires);
+      }
+    }
+  }
+  if (cls.fires && !doclet.fires) {
+    doclet.fires = cls.fires;
+  }
+
   const augments = doclet.augments;
   if (augments) {
     let cls;
@@ -59,7 +77,9 @@ function includeAugments(doclet) {
           });
         }
         cls._hideConstructor = true;
-        delete cls.undocumented;
+        if (!cls.undocumented) {
+          cls._documented = true;
+        }
       }
     }
   }
@@ -95,17 +115,20 @@ exports.handlers = {
   newDoclet: function(e) {
     const doclet = e.doclet;
     if (doclet.stability) {
-      modules[doclet.longname.split('~').shift()] = true;
+      modules[doclet.longname.split(/[~\.]/).shift()] = true;
       api.push(doclet);
     }
-    // Mark explicity defined namespaces - needed in parseComplete to keep
-    // namespaces that we need as containers for api items.
-    if (/.*\.jsdoc$/.test(doclet.meta.filename) && doclet.kind == 'namespace') {
-      doclet.namespace_ = true;
-    }
     if (doclet.kind == 'class') {
-      modules[doclet.longname.split('~').shift()] = true;
+      modules[doclet.longname.split(/[~\.]/).shift()] = true;
+      if (!(doclet.longname in classes)) {
         classes[doclet.longname] = doclet;
+      } else if ('augments' in doclet) {
+        classes[doclet.longname].augments = doclet.augments;
+      }
+    }
+    if (doclet.name === doclet.longname && !doclet.memberof) {
+      // Make sure anonymous default exports are documented
+      doclet.setMemberof(doclet.longname);
     }
   },
 
@@ -113,7 +136,7 @@ exports.handlers = {
     const doclets = e.doclets;
     for (let i = doclets.length - 1; i >= 0; --i) {
       const doclet = doclets[i];
-      if (doclet.stability || doclet.namespace_) {
+      if (doclet.stability) {
         if (doclet.kind == 'class') {
           includeAugments(doclet);
         }
@@ -143,10 +166,13 @@ exports.handlers = {
         // constructor from the docs.
         doclet._hideConstructor = true;
         includeAugments(doclet);
-      } else if (doclet.undocumented !== false && !doclet._hideConstructor && !(doclet.kind == 'typedef' && doclet.longname in types)) {
+      } else if (!doclet._hideConstructor && !(doclet.kind == 'typedef' && doclet.longname in types)) {
         // Remove all other undocumented symbols
         doclet.undocumented = true;
       }
+      if (doclet._documented) {
+        delete doclet.undocumented;
+      }
     }
   }
 

config/jsdoc/api/plugins/events.js

@@ -1,35 +1,32 @@
 const events = {};
-const classes = {};
 
 exports.handlers = {
 
   newDoclet: function(e) {
     const doclet = e.doclet;
-    let cls;
-    if (doclet.kind == 'event') {
-      cls = doclet.longname.split('#')[0];
+    if (doclet.kind !== 'event') {
+      return;
+    }
+
+    const cls = doclet.longname.split('#')[0];
     if (!(cls in events)) {
       events[cls] = [];
     }
     events[cls].push(doclet.longname);
-    } else if (doclet.kind == 'class') {
-      classes[doclet.longname] = doclet;
-    }
   },
 
   parseComplete: function(e) {
     const doclets = e.doclets;
-    let doclet, i, ii, j, jj, event, fires;
-    for (i = 0, ii = doclets.length - 1; i < ii; ++i) {
-      doclet = doclets[i];
+    for (let i = 0, ii = doclets.length - 1; i < ii; ++i) {
+      const doclet = doclets[i];
       if (doclet.fires) {
         if (doclet.kind == 'class') {
-          fires = [];
-          for (j = 0, jj = doclet.fires.length; j < jj; ++j) {
-            event = doclet.fires[j].replace('event:', '');
+          const fires = [];
+          for (let j = 0, jj = doclet.fires.length; j < jj; ++j) {
+            const event = doclet.fires[j].replace('event:', '');
             if (events[event]) {
               fires.push.apply(fires, events[event]);
-            } else {
+            } else if (doclet.fires[j] !== 'event:ObjectEvent') {
               fires.push(doclet.fires[j]);
             }
           }
@@ -40,4 +37,3 @@ exports.handlers = {
   }
 
 };
-

config/jsdoc/api/plugins/inheritdoc.js

@@ -0,0 +1,110 @@
+/*
+ * This is a hack to prevent inheritDoc tags from entirely removing
+ * documentation of the method that inherits the documentation.
+ */
+
+exports.defineTags = function(dictionary) {
+  dictionary.defineTag('inheritDoc', {
+    mustHaveValue: false,
+    canHaveType: false,
+    canHaveName: false,
+    onTagged: function(doclet, tag) {
+      doclet.inheritdoc = true;
+    }
+  });
+};
+
+
+const lookup = {};
+const incompleteByClass = {};
+const keepKeys = ['comment', 'meta', 'name', 'memberof', 'longname', 'augment',
+  'stability'];
+
+exports.handlers = {
+
+  newDoclet: function(e) {
+    const doclet = e.doclet;
+    let incompletes;
+    if (!(doclet.longname in lookup)) {
+      lookup[doclet.longname] = [];
+    }
+    lookup[doclet.longname].push(doclet);
+    if (doclet.inheritdoc) {
+      if (!(doclet.memberof in incompleteByClass)) {
+        incompleteByClass[doclet.memberof] = [];
+      }
+      incompletes = incompleteByClass[doclet.memberof];
+      if (incompletes.indexOf(doclet.name) == -1) {
+        incompletes.push(doclet.name);
+      }
+    }
+  },
+
+  parseComplete: function(e) {
+    let ancestors, candidate, candidates, doclet, i, j, k, l, key;
+    let incompleteDoclet, stability, incomplete, incompletes;
+    const doclets = e.doclets;
+    for (i = doclets.length - 1; i >= 0; --i) {
+      doclet = doclets[i];
+      if (doclet.augments) {
+        ancestors = [].concat(doclet.augments);
+      }
+      incompletes = incompleteByClass[doclet.longname];
+      if (ancestors && incompletes) {
+        // collect ancestors from the whole hierarchy
+        for (j = 0; j < ancestors.length; ++j) {
+          candidates = lookup[ancestors[j]];
+          if (candidates) {
+            for (k = candidates.length - 1; k >= 0; --k) {
+              candidate = candidates[k];
+              if (candidate.augments) {
+                ancestors = ancestors.concat(candidate.augments);
+              }
+            }
+          }
+        }
+        // walk through all inheritDoc members
+        for (j = incompletes.length - 1; j >= 0; --j) {
+          incomplete = incompletes[j];
+          candidates = lookup[doclet.longname + '#' + incomplete];
+          if (candidates) {
+            // get the incomplete doclet that needs to be augmented
+            for (k = candidates.length - 1; k >= 0; --k) {
+              incompleteDoclet = candidates[k];
+              if (incompleteDoclet.inheritdoc) {
+                break;
+              }
+            }
+          }
+          // find the documented ancestor
+          for (k = ancestors.length - 1; k >= 0; --k) {
+            candidates = lookup[ancestors[k] + '#' + incomplete];
+            if (candidates) {
+              for (l = candidates.length - 1; l >= 0; --l) {
+                candidate = candidates[l];
+                if (candidate && !candidate.inheritdoc) {
+                  stability = candidate.stability || incompleteDoclet.stability;
+                  if (stability) {
+                    incompleteDoclet.stability = stability;
+                    for (key in candidate) {
+                      if (candidate.hasOwnProperty(key) &&
+                        keepKeys.indexOf(key) == -1) {
+                        incompleteDoclet[key] = candidate[key];
+                      }
+                    }
+                    // We have found a matching parent doc and applied it so we
+                    // don't want to ignore this doclet anymore.
+                    incompleteDoclet.ignore = false;
+                    // We found a match so we can stop break
+                    break;
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+};

config/jsdoc/api/plugins/markdown.js

@@ -0,0 +1,111 @@
+/**
+ * Modified from JSDoc's plugins/markdown and lib/jsdoc/util/markdown modules
+ * (see https://github.com/jsdoc3/jsdoc/), which are licensed under the Apache 2
+ * license (see http://www.apache.org/licenses/LICENSE-2.0).
+ *
+ * This version does not protect http(s) urls from being turned into links, and
+ * works around an issue with `~` characters in module paths by escaping them.
+ */
+
+const marked = require('marked');
+const format = require('util').format;
+
+const tags = [
+  'author',
+  'classdesc',
+  'description',
+  'exceptions',
+  'params',
+  'properties',
+  'returns',
+  'see',
+  'summary'
+];
+
+const hasOwnProp = Object.prototype.hasOwnProperty;
+
+const markedRenderer = new marked.Renderer();
+
+// Allow prettyprint to work on inline code samples
+markedRenderer.code = function(code, language) {
+  const langClass = language ? ' lang-' + language : '';
+
+  return format('<pre class="prettyprint source%s"><code>%s</code></pre>',
+    langClass, escapeCode(code));
+};
+
+function escapeCode(source) {
+  return source.replace(/</g, '&lt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;');
+}
+
+function escapeUnderscoresAndTildes(source) {
+  return source.replace(/\{@[^}\r\n]+\}/g, function(wholeMatch) {
+    return wholeMatch
+      .replace(/(^|[^\\])_/g, '$1\\_')
+      .replace('~', '&tilde;');
+  });
+}
+
+function unencodeQuotesAndTildes(source) {
+  return source.replace(/\{@[^}\r\n]+\}/g, function(wholeMatch) {
+    return wholeMatch
+      .replace(/&quot;/g, '"')
+      .replace(/&tilde;/g, '~');
+  });
+}
+
+function parse(source) {
+  let result;
+
+  source = escapeUnderscoresAndTildes(source);
+
+  result = marked(source, {renderer: markedRenderer})
+    .replace(/\s+$/, '')
+    .replace(/&#39;/g, '\'');
+
+  result = unencodeQuotesAndTildes(result);
+
+  return result;
+}
+
+function shouldProcessString(tagName, text) {
+  let shouldProcess = true;
+
+  // we only want to process `@author` and `@see` tags that contain Markdown links
+  if ((tagName === 'author' || tagName === 'see') && text.indexOf('[') === -1) {
+    shouldProcess = false;
+  }
+
+  return shouldProcess;
+}
+
+function process(doclet) {
+  tags.forEach(function(tag) {
+    if (!hasOwnProp.call(doclet, tag)) {
+      return;
+    }
+
+    if (typeof doclet[tag] === 'string' && shouldProcessString(tag, doclet[tag])) {
+      doclet[tag] = parse(doclet[tag]);
+    } else if (Array.isArray(doclet[tag])) {
+      doclet[tag].forEach(function(value, index, original) {
+        const inner = {};
+
+        inner[tag] = value;
+        process(inner);
+        original[index] = inner[tag];
+      });
+    } else if (doclet[tag]) {
+      process(doclet[tag]);
+    }
+  });
+}
+
+
+exports.handlers = {
+  newDoclet: function(e) {
+    process(e.doclet);
+  }
+};

config/jsdoc/api/plugins/normalize-exports.js

@@ -1,106 +0,0 @@
-/**
- * @filedesc
- * Expands module path type to point to default export when no name is given
- */
-
-const fs = require('fs');
-const path = require('path');
-
-let moduleRoot;
-
-function addDefaultExportPath(obj) {
-  if (!Array.isArray(obj)) {
-    obj = obj.names;
-  }
-  obj.forEach((name, index) => {
-    const matches = name.match(/module\:([^>|),\.<]|)+/g);
-    if (matches) {
-      matches.forEach(module => {
-        if (!/[~\.]/.test(module)) {
-          const checkFile = path.resolve(moduleRoot, module.replace(/^module\:/, ''));
-          const file = fs.readFileSync(require.resolve(checkFile), 'utf-8');
-          const lines = file.split('\n');
-          let hasDefaultExport = false;
-          for (let i = 0, ii = lines.length; i < ii; ++i) {
-            hasDefaultExport = hasDefaultExport || /^export default [^\{]/.test(lines[i]);
-            const match = lines[i].match(/^export default ([A-Za-z_$][A-Za-z0-9_$]+);$/);
-            if (match) {
-              // Use variable name if default export is assigned to a variable.
-              obj[index] = name = name.replace(module, `${module}~${match[1]}`);
-              return;
-            }
-          }
-          if (hasDefaultExport) {
-            // Duplicate last part if default export is not assigned to a variable.
-            obj[index] = name = name.replace(module, `${module}~${module.split('/').pop()}`);
-          }
-        }
-      });
-    }
-  });
-}
-
-function replaceLinks(comment) {
-  const matches = comment.match(/\{@link [^\} #]+}/g);
-  if (matches) {
-    const modules = matches.map(m => {
-      const mm = m.match(/(module:[^\}]+)}$/);
-      if (mm) {
-        return mm[1];
-      }
-    }).filter(m => !!m);
-    const newModules = modules.concat();
-    addDefaultExportPath(newModules);
-    modules.forEach((module, i) => {
-      comment = comment.replace(module, newModules[i]);
-    });
-  }
-  return comment;
-}
-
-exports.handlers = {
-
-  /**
-   * Adds default export to module path types without name
-   * @param {Object} e Event object.
-   */
-  newDoclet: function(e) {
-    const doclet = e.doclet;
-    if (doclet.kind == 'module') {
-      const levelsUp = doclet.longname.replace(/^module\:/, '').split('/');
-      if (doclet.meta.filename != 'index.js') {
-        levelsUp.pop();
-      }
-      const pathArgs = [doclet.meta.path].concat(levelsUp.map(() => '../'));
-      moduleRoot = path.resolve.apply(null, pathArgs);
-    } else {
-      if (doclet.description) {
-        doclet.description = replaceLinks(doclet.description);
-      }
-      if (doclet.classdesc) {
-        doclet.classdesc = replaceLinks(doclet.classdesc);
-      }
-
-      const module = doclet.longname.split('#').shift();
-      if (module.indexOf('module:') == 0 && module.indexOf('.') !== -1) {
-        doclet.longname = doclet.longname.replace(module, module.replace('.', '~'));
-      }
-      if (doclet.augments) {
-        addDefaultExportPath(doclet.augments);
-      }
-      if (doclet.params) {
-        doclet.params.forEach(p => addDefaultExportPath(p.type));
-      }
-      if (doclet.returns) {
-        doclet.returns.forEach(r => addDefaultExportPath(r.type));
-      }
-      if (doclet.properties) {
-        doclet.properties.forEach(p => addDefaultExportPath(p.type));
-      }
-      if (doclet.type) {
-        addDefaultExportPath(doclet.type);
-      }
-    }
-  }
-
-};

config/jsdoc/api/plugins/observable.js

@@ -5,7 +5,7 @@ exports.handlers = {
 
   newDoclet: function(e) {
     const doclet = e.doclet;
-    if (doclet.kind == 'class') {
+    if (doclet.kind == 'class' && !(doclet.longname in classes)) {
       classes[doclet.longname] = doclet;
     }
   },
@@ -47,7 +47,7 @@ exports.handlers = {
         if (!cls.fires) {
           cls.fires = [];
         }
-        event = 'module:ol/Object~ObjectEvent#event:change:' + name;
+        event = 'module:ol/Object.ObjectEvent#event:change:' + name;
         if (cls.fires.indexOf(event) == -1) {
           cls.fires.push(event);
         }

config/jsdoc/api/plugins/typedefs.js

@@ -1,85 +0,0 @@
-/*
- * Changes @enum annotations into @typedef.
- */
-
-// types that are undefined or typedefs containing undefined
-let undefinedLikes = null;
-
-/**
- * Changes the description of the param if it is required.
- * @param {Object} doclet The doclet.
- * @returns {Object} The modified doclet.
- */
-function markRequiredIfNeeded(doclet) {
-  const memberof = doclet.memberof;
-  if (!memberof) {
-    return doclet;
-  }
-
-  const types = doclet.type.names;
-  let isRequiredParam = true;
-
-  // iterate over all types that are like-undefined (see above for explanation)
-  for (let idx = undefinedLikes.length - 1; idx >= 0; idx--) {
-    const undefinedLike = undefinedLikes[idx];
-    // … if the current types contains a type that is undefined-like,
-    // it is not required.
-    if (types.indexOf(undefinedLike) != -1) {
-      isRequiredParam = false;
-    }
-  }
-
-  if (isRequiredParam) {
-    const reqSnippet = '<span class="required-option">Required.</span></p>';
-    const endsWithP = /<\/p>$/i;
-    let description = doclet.description;
-    if (description && endsWithP.test(description)) {
-      description = description.replace(endsWithP, ' ' + reqSnippet);
-    } else if (doclet.description === undefined) {
-      description = '<p>' + reqSnippet;
-    }
-    doclet.description = description;
-  }
-  return doclet;
-}
-
-/**
- * Iterates over all doclets and finds the names of types that contain
- * undefined. Stores the names in the global variable undefinedLikes, so
- * that e.g. markRequiredIfNeeded can use these.
- * @param {Array} doclets The doclets.
- */
-function findTypesLikeUndefined(doclets) {
-  undefinedLikes = ['undefined']; // include type 'undefined' explicitly
-  for (let i = doclets.length - 1; i >= 0; --i) {
-    const doclet = doclets[i];
-    if (doclet.kind === 'typedef') {
-      const types = doclet.type.names;
-      if (types.indexOf('undefined') !== -1) {
-        // the typedef contains 'undefined', so it self is undefinedLike.
-        undefinedLikes.push(doclet.longname);
-      }
-    }
-  }
-}
-
-exports.handlers = {
-
-  newDoclet: function(e) {
-    const doclet = e.doclet;
-    if (doclet.isEnum) {
-      // We never export enums, so we document them like typedefs
-      doclet.kind = 'typedef';
-      delete doclet.isEnum;
-    }
-  },
-
-  parseComplete: function(e) {
-    const doclets = e.doclets;
-    findTypesLikeUndefined(doclets);
-    for (let i = doclets.length - 1; i >= 0; --i) {
-      markRequiredIfNeeded(doclets[i]);
-    }
-  }
-
-};

config/jsdoc/api/template/publish.js

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

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

@@ -12,13 +12,18 @@ $(function () {
                 var $item = $(v);
 
                 if ($item.data('name') && regexp.test($item.data('name'))) {
+                    const container = $item.parent().parent().parent();
+                    container.show();
+                    container.closest('.itemMembers').show();
+                    container.closest('.item').show();
                     $item.show();
                     $item.closest('.itemMembers').show();
                     $item.closest('.item').show();
                 }
             });
         } else {
-            $el.find('.item, .itemMembers').show();
+            $el.find('.item, .itemMembers').hide();
+            $('.navigation>ul>li').show();
         }
 
         $el.find('.list').scrollTop(0);
@@ -30,7 +35,11 @@ $(function () {
     });
 
     // Show an item related a current documentation automatically
-    var filename = $('.page-title').data('filename').replace(/\.[a-z]+$/, '');
+    var filename = $('.page-title').data('filename')
+        .replace(/\.[a-z]+$/, '')
+        .replace('module-', 'module:')
+        .replace(/_/g, '/')
+        .replace(/-/g, '~');
     var $currentItem = $('.navigation .item[data-name*="' + filename + '"]:eq(0)');
 
     if ($currentItem.length) {
@@ -97,7 +106,8 @@ $(function () {
     var anchors = $('.anchor');
     var _onHashChange = function () {
         var activeHash = window.document.location.hash
-            .replace(/\./g, '\\.'); // Escape dot in element id
+            .replace(/\./g, '\\.') // Escape dot in element id
+            .replace(/\~/g, '\\~'); // Escape tilde in element id
 
         anchors.removeClass('highlighted');
 

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

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

config/jsdoc/api/template/tmpl/layout.tmpl

@@ -4,12 +4,62 @@ var version = obj.packageInfo.version;
 <!DOCTYPE html>
 <html lang="en">
 <head>
+    <script>
+    var gaProperty = 'UA-2577926-1';
+    // Disable tracking if the opt-out cookie exists.
+    var disableStr = 'ga-disable-' + gaProperty;
+    if (document.cookie.indexOf(disableStr + '=true') > -1) {
+      window[disableStr] = true;
+    }
+    function gaOptout() {
+      document.cookie = disableStr + '=true; expires=Thu, 31 Dec 2099 23:59:59 UTC; path=/';
+      window[disableStr] = true;
+    }
+    function gaOptoutRevoke() {
+      document.cookie = disableStr + '=false; expires=Thu, 31 Dec 2099 23:59:59 UTC; path=/';
+      window[disableStr] = false;
+    }
+    </script>
+    <!-- Global site tag (gtag.js) - Google Analytics -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=UA-2577926-1"></script>
     <script>
       window.dataLayer = window.dataLayer || [];
       function gtag(){dataLayer.push(arguments);}
       gtag('js', new Date());
-      gtag('config', 'UA-2577926-1');
+      gtag('config', 'UA-2577926-1', { 'anonymize_ip': true });
+    </script>
+    <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" />
+    <script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script>
+    <script>
+    window.addEventListener("load", function() {
+      window.cookieconsent.initialise({
+        'palette': {
+          'popup': {
+            'background': '#eaf7f7',
+            'text': '#5c7291'
+          },
+          'button': {
+            'background': '#56cbdb',
+            'text': '#ffffff'
+          }
+        },
+        'theme': 'edgeless',
+        'type': 'opt-out',
+        'onInitialise': function (status) {
+          if (!this.hasConsented()) {
+            gaOptout()
+          }
+        },
+        'onStatusChange': function(status, chosenBefore) {
+          if (!this.hasConsented()) {
+            gaOptout()
+          }
+        },
+        'onRevokeChoice': function() {
+          gaOptoutRevoke()
+        }
+      })
+    });
     </script>
     <meta charset="utf-8">
     <title>OpenLayers v<?js= version ?> API - <?js= title ?></title>

config/jsdoc/api/template/tmpl/members.tmpl

@@ -14,7 +14,7 @@ if (data.type && data.type.names) {
         <div class="anchor" id="<?js= id ?>">
         </div>
         <h4 class="name">
-            <?js= data.attribs + (data.scope === 'static' ? longname : name)  + typeSignature ?>
+            <?js= data.attribs + (data.scope === 'static' ? longname : name.indexOf('module:') === 0 ? name.split('/').pop() : name)  + typeSignature ?>
             <?js= this.partial('stability.tmpl', data) ?>
         </h4>
     </div>

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

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

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

@@ -1,5 +1,8 @@
 <?js
 var self = this;
+function toShortName(name) {
+  return name.indexOf('module:') === 0 ? name.split('/').pop() : name;
+}
 ?>
 <div class="navigation">
     <div class="search">
@@ -7,11 +10,12 @@ var self = this;
     </div>
     <ul class="list">
     <?js
-    this.nav.forEach(function (item) {
+    let navbuilder;
+    this.nav.forEach(navbuilder = function (item) {
     ?>
         <li class="item" data-name="<?js= item.longname ?>">
             <span class="title">
-                <?js= self.linkto(item.longname, item.longname.replace('module:', '')) ?>
+                <?js= self.linkto(item.longname, item.type === 'module' ? item.longname.replace('module:', '') : item.name) ?>
                 <?js if (item.type === 'namespace' &&
                         (item.members.length + item.typedefs.length + item.methods.length +
                          item.events.length > 0)) { ?>
@@ -19,13 +23,25 @@ var self = this;
             </span>
             <ul class="members itemMembers">
             <?js
+            if (item.classes.length) {
+            ?>
+            <span class="subtitle">Classes</span>
+            <?js
+                item.classes.forEach(function (v) {
+                    navbuilder(v);
+                });
+            }
+            ?>
+            </ul>
+            <ul class="members itemMembers">
+            <?js
             if (item.members.length) {
             ?>
             <span class="subtitle">Members</span>
             <?js
                 item.members.forEach(function (v) {
             ?>
-                <li data-name="<?js= v.longname ?>"><?js= self.linkto(v.longname, v.name) ?></li>
+                <li data-name="<?js= v.longname ?>"><?js= self.linkto(v.longname, toShortName(v.name)) ?></li>
             <?js
                 });
             }
@@ -40,7 +56,7 @@ var self = this;
                 item.typedefs.forEach(function (v) {
             ?>
                 <li data-name="<?js= v.longname ?>" class="<?js= (v.stability && v.stability !== 'stable') ? 'unstable' : ''?>">
-                    <?js= self.linkto(v.longname, v.name) ?>
+                    <?js= self.linkto(v.longname, toShortName(v.name)) ?>
                 </li>
             <?js
                 });
@@ -57,7 +73,7 @@ var self = this;
                 item.methods.forEach(function (v) {
             ?>
                 <li data-name="<?js= v.longname ?>" class="<?js= (v.stability && v.stability !== 'stable') ? 'unstable' : ''?>">
-                    <?js= self.linkto(v.longname, v.name) ?>
+                    <?js= self.linkto(v.longname, toShortName(v.name)) ?>
                 </li>
             <?js
                 });
@@ -74,7 +90,7 @@ var self = this;
                     v = self.find({longname: v})[0] || {longname: v, name: v.split(/#?event:/)[1]};
             ?>
                 <li data-name="<?js= v.longname ?>" class="<?js= (v.stability && v.stability != 'stable') ? 'unstable' : '' ?>">
-                    <?js= self.linkto(v.longname, v.name) ?>
+                    <?js= self.linkto(v.longname, toShortName(v.name)) ?>
                 </li>
             <?js
                 });

config/jsdoc/api/template/tmpl/observables.tmpl

@@ -8,7 +8,7 @@
     <th>Name</th>
     <th>Type</th>
     <th>Settable</th>
-    <th><a href="module-ol_Object-ObjectEvent.html">ol/Object~ObjectEvent</a> type</th>
+    <th><a href="module-ol_Object-ObjectEvent.html">ol/Object.ObjectEvent</a> type</th>
     <th class="last">Description</th>
   </tr>
   </thead>

config/jsdoc/info/conf.json

@@ -10,8 +10,12 @@
         "includePattern": "\\.js$"
     },
     "plugins": [
+        "jsdoc-plugin-typescript",
         "config/jsdoc/info/api-plugin",
         "config/jsdoc/info/define-plugin",
         "config/jsdoc/info/virtual-plugin"
-    ]
+    ],
+    "typescript": {
+      "moduleRoot": "src"
+    }
 }

config/rollup.js

@@ -1,21 +0,0 @@
-// Rollup configuration for the full build
-
-import noderesolve from 'rollup-plugin-node-resolve';
-import commonjs from 'rollup-plugin-commonjs';
-import {uglify} from 'rollup-plugin-uglify';
-import buble from 'rollup-plugin-buble';
-import sourcemaps from 'rollup-plugin-sourcemaps';
-
-export default {
-  input: 'build/index.js',
-  output: [
-    {file: 'build/ol.js', format: 'iife', sourcemap: true}
-  ],
-  plugins: [
-    noderesolve(),
-    commonjs(),
-    buble(),
-    uglify(),
-    sourcemaps()
-  ]
-};

config/tsconfig-build.json

@@ -0,0 +1,64 @@
+{
+  "compilerOptions": {
+    /* Basic Options */
+    "target": "ES5",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */
+    "module": "es2015",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
+    // "lib": [],                             /* 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'. */
+    // "declaration": true,                   /* Generates corresponding '.d.ts' file. */
+    // "declarationMap": true,                /* Generates a sourcemap for each corresponding '.d.ts' file. */
+    "sourceMap": true,                     /* Generates corresponding '.map' file. */
+    // "outFile": "./",                       /* Concatenate and emit output to single file. */
+    "outDir": "../build/ol",                        /* Redirect output structure to the directory. */
+    // "rootDir": "./",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
+    // "composite": true,                     /* Enable project compilation */
+    // "removeComments": true,                /* Do not emit comments to output. */
+    // "noEmit": true,                        /* Do not emit outputs. */
+    "importHelpers": false,                 /* Import emit helpers from 'tslib'. */
+    // "downlevelIteration": true,            /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
+    // "isolatedModules": true,               /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
+
+    /* Strict Type-Checking Options */
+    "strict": false,                           /* Enable all strict type-checking options. */
+    // "noImplicitAny": true,                 /* Raise error on expressions and declarations with an implied 'any' type. */
+    // "strictNullChecks": true,              /* Enable strict null checks. */
+    // "strictFunctionTypes": true,           /* Enable strict checking of function types. */
+    // "strictBindCallApply": true,           /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
+    // "strictPropertyInitialization": true,  /* Enable strict checking of property initialization in classes. */
+    // "noImplicitThis": true,                /* Raise error on 'this' expressions with an implied 'any' type. */
+    // "alwaysStrict": true,                  /* Parse in strict mode and emit "use strict" for each source file. */
+
+    /* Additional Checks */
+    // "noUnusedLocals": true,                /* Report errors on unused locals. */
+    // "noUnusedParameters": true,            /* Report errors on unused parameters. */
+    // "noImplicitReturns": true,             /* Report error when not all code paths in function return a value. */
+    // "noFallthroughCasesInSwitch": true,    /* Report errors for fallthrough cases in switch statement. */
+
+    /* Module Resolution Options */
+    "moduleResolution": "node",            /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
+    // "baseUrl": "./",                       /* Base directory to resolve non-absolute module names. */
+    // "paths": {},                           /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
+    // "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */
+    // "typeRoots": [],                       /* List of folders to include type definitions from. */
+    // "types": [],                           /* Type declaration files to be included in compilation. */
+    // "allowSyntheticDefaultImports": true,  /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
+    "esModuleInterop": false,                   /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
+    // "preserveSymlinks": true,              /* Do not resolve the real path of symlinks. */
+
+    /* Source Map Options */
+    // "sourceRoot": "",                      /* Specify the location where debugger should locate TypeScript files instead of source locations. */
+    // "mapRoot": "",                         /* Specify the location where debugger should locate map files instead of generated locations. */
+    // "inlineSourceMap": true,               /* Emit a single file with source maps instead of having a separate file. */
+    "inlineSources": false                 /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
+
+    /* Experimental Options */
+    // "experimentalDecorators": true,        /* Enables experimental support for ES7 decorators. */
+    // "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */
+  },
+  "include": [
+    "../build/ol/src/**/*.js"
+  ],
+  "exclude": []
+}

config/webpack-config-legacy-build.js

@@ -0,0 +1,13 @@
+const path = require('path');
+module.exports = {
+  entry: './build/index.js',
+  devtool: 'source-map',
+  mode: 'production',
+  output: {
+    path: path.resolve('./build/legacy'),
+    filename: 'ol.js',
+    library: 'ol',
+    libraryTarget: 'umd',
+    libraryExport: 'default'
+  }
+};

doc/errors/index.md

@@ -111,7 +111,7 @@ Features for `updates` must have an id set by the feature reader or `ol.Feature#
 
 ### 28
 
-`renderMode` must be `'image'`, `'hybrid'` or `'vector'`.
+`renderMode` must be `'image'` or `'hybrid'`.
 
 ### 29
 
@@ -220,3 +220,19 @@ Duplicate item added to a unique collection.  For example, it may be that you tr
 ### 59
 
 Invalid command found in the PBF.  This indicates that the loaded vector tile may be corrupt.
+
+### 60
+
+Missing or invalid `size`.
+
+### 61
+
+Cannot determine IIIF Image API version from provided image information JSON.
+
+### 62
+
+A `WebGLArrayBuffer` must either be of type `ELEMENT_ARRAY_BUFFER` or `ARRAY_BUFFER`.
+
+### 63
+
+Support for the `OES_element_index_uint` WebGL extension is mandatory for WebGL layers.

doc/faq.md

@@ -21,7 +21,7 @@ Table of contents:
 * [Why aren't there any features in my source?](#why-aren-t-there-any-features-in-my-source-)
 * [How do I force a re-render of the map?](#how-do-i-force-a-re-render-of-the-map-)
 * [Why are my features not found?](#why-are-my-features-not-found-)
-
+* [Why is zooming or clicking off, inaccurate?](#user-content-why-is-zooming-or-clicking-off-inaccurate)
 
 ## What projection is OpenLayers using?
 
@@ -54,9 +54,12 @@ The projection of your map can be set through the `view`-property. Here are some
 examples:
 
 ```javascript
+import Map from 'ol/Map';
+import View from 'ol/View';
+
 // OpenLayers comes with support for the World Geodetic System 1984, EPSG:4326:
-var map = new ol.Map({
-  view: new ol.View({
+const map = new Map({
+  view: new View({
     projection: 'EPSG:4326'
     // other view properties like map center etc.
   })
@@ -65,23 +68,29 @@ var map = new ol.Map({
 ```
 
 ```javascript
+import Map from 'ol/Map';
+import View from 'ol/View';
+import proj4 from 'proj4';
+import {register} from 'ol/proj/proj4';
+import {get as getProjection} from 'ol/proj';
+
 // To use other projections, you have to register the projection in OpenLayers.
 // This can easily be done with [https://proj4js.org](proj4)
 //
 // By default OpenLayers does not know about the EPSG:21781 (Swiss) projection.
 // So we create a projection instance for EPSG:21781 and pass it to
-// ol.proj.addProjection to make it available to the library for lookup by its
+// register to make it available to the library for lookup by its
 // code.
 proj4.defs('EPSG:21781',
   '+proj=somerc +lat_0=46.95240555555556 +lon_0=7.439583333333333 +k_0=1 ' +
   '+x_0=600000 +y_0=200000 +ellps=bessel ' +
   '+towgs84=660.077,13.551,369.344,2.484,1.783,2.939,5.66 +units=m +no_defs');
-ol.proj.proj4.register(proj4);
-var swissProjection = ol.proj.get('EPSG:21781');
+register(proj4);
+const swissProjection = getProjection('EPSG:21781');
 
 // we can now use the projection:
-var map = new ol.Map({
-  view: new ol.View({
+const map = new Map({
+  view: new View({
     projection: swissProjection
     // other view properties like map center etc.
   })
@@ -104,15 +113,20 @@ coordinates for the center have to be provided in that projection. Chances are
 that your map looks like this:
 
 ```javascript
-var washingtonLonLat = [-77.036667, 38.895];
-var map = new ol.Map({
+import Map from 'ol/Map';
+import View from 'ol/View';
+import TileLayer from 'ol/layer/Tile';
+import OSM from 'ol/source/OSM';
+
+const washingtonLonLat = [-77.036667, 38.895];
+const map = new Map({
   layers: [
-    new ol.layer.Tile({
-      source: new ol.source.OSM()
+    new TileLayer({
+      source: new OSM()
     })
   ],
   target: 'map',
-  view: new ol.View({
+  view: new View({
     center: washingtonLonLat,
     zoom: 12
   })
@@ -128,31 +142,38 @@ The solution is easy: Provide the coordinates projected into Web Mercator.
 OpenLayers has some helpful utility methods to assist you:
 
 ```javascript
-var washingtonLonLat = [-77.036667, 38.895];
-var washingtonWebMercator = ol.proj.fromLonLat(washingtonLonLat);
+import Map from 'ol/Map';
+import View from 'ol/View';
+import TileLayer from 'ol/layer/Tile';
+import OSM from 'ol/source/OSM';
+import {fromLonLat} from 'ol/proj';
 
-var map = new ol.Map({
+const washingtonLonLat = [-77.036667, 38.895];
+const washingtonWebMercator = fromLonLat(washingtonLonLat);
+
+const map = new Map({
   layers: [
-    new ol.layer.Tile({
-      source: new ol.source.OSM()
+    new TileLayer({
+      source: new OSM()
     })
   ],
   target: 'map',
-  view: new ol.View({
+  view: new View({
     center: washingtonWebMercator,
     zoom: 8
   })
 });
 ```
 
-The method `ol.proj.fromLonLat()` is available from version 3.5 onwards.
+The method `fromLonLat()` is available from version 3.5 onwards.
 
 If you told OpenLayers about a custom projection (see above), you can use the
 following method to transform a coordinate from WGS84 to your projection:
 
 ```javascript
+import {transform} from 'ol/proj';
 // assuming that OpenLayers knows about EPSG:21781, see above
-var swissCoord = ol.proj.transform([8.23, 46.86], 'EPSG:4326', 'EPSG:21781');
+const swissCoord = transform([8.23, 46.86], 'EPSG:4326', 'EPSG:21781');
 ```
 
 
@@ -189,18 +210,24 @@ So the next step would be to put the decimal coordinates into an array and use
 it as center:
 
 ```javascript
-var schladming = [47.394167, 13.689167]; // caution partner, read on...
-// since we are using OSM, we have to transform the coordinates...
-var schladmingWebMercator = ol.proj.fromLonLat(schladming);
+import Map from 'ol/Map';
+import View from 'ol/View';
+import TileLayer from 'ol/layer/Tile';
+import OSM from 'ol/source/OSM';
+import {fromLonLat} from 'ol/proj';
 
-var map = new ol.Map({
+const schladming = [47.394167, 13.689167]; // caution partner, read on...
+// since we are using OSM, we have to transform the coordinates...
+const schladmingWebMercator = fromLonLat(schladming);
+
+const map = new Map({
   layers: [
-    new ol.layer.Tile({
-      source: new ol.source.OSM()
+    new TileLayer({
+      source: new OSM()
     })
   ],
   target: 'map',
-  view: new ol.View({
+  view: new View({
     center: schladmingWebMercator,
     zoom: 9
   })
@@ -219,18 +246,24 @@ e.g. try to change the map center.
 Ok, then let's flip the coordinates:
 
 ```javascript
-var schladming = [13.689167, 47.394167]; // longitude first, then latitude
-// since we are using OSM, we have to transform the coordinates...
-var schladmingWebMercator = ol.proj.fromLonLat(schladming);
+import Map from 'ol/Map';
+import View from 'ol/View';
+import TileLayer from 'ol/layer/Tile';
+import OSM from 'ol/source/OSM';
+import {fromLonLat} from 'ol/proj';
 
-var map = new ol.Map({
+const schladming = [13.689167, 47.394167]; // longitude first, then latitude
+// since we are using OSM, we have to transform the coordinates...
+const schladmingWebMercator = fromLonLat(schladming);
+
+const map = new Map({
   layers: [
-    new ol.layer.Tile({
-      source: new ol.source.OSM()
+    new TileLayer({
+      source: new OSM()
     })
   ],
   target: 'map',
-  view: new ol.View({
+  view: new View({
     center: schladmingWebMercator,
     zoom: 9
   })
@@ -244,7 +277,7 @@ first, and then the latitude. This behaviour is the same as we had in OpenLayers
 2, and it actually makes sense because of the natural axis order in WGS84.
 
 If you cannot remember the correct order, just have a look at the method name
-we used: `ol.proj.fromLonLat`; even there we hint that we expect longitude
+we used: `fromLonLat`; even there we hint that we expect longitude
 first, and then latitude.
 
 
@@ -254,8 +287,11 @@ Suppose you want to load a KML file and display the contained features on the
 map. Code like the following could be used:
 
 ```javascript
-var vector = new ol.layer.Vector({
-  source: new ol.source.KML({
+import VectorLayer from 'ol/layer/Vector';
+import KMLSource from 'ol/source/KML';
+
+const vector = new VectorLayer({
+  source: new KMLSource({
     projection: 'EPSG:3857',
     url: 'data/kml/2012-02-10.kml'
   })
@@ -266,13 +302,16 @@ You may ask yourself how many features are in that KML, and try something like
 the following:
 
 ```javascript
-var vector = new ol.layer.Vector({
-  source: new ol.source.KML({
+import VectorLayer from 'ol/layer/Vector';
+import KMLSource from 'ol/source/KML';
+
+const vector = new VectorLayer({
+  source: new KMLSource({
     projection: 'EPSG:3857',
     url: 'data/kml/2012-02-10.kml'
   })
 });
-var numFeatures = vector.getSource().getFeatures().length;
+const numFeatures = vector.getSource().getFeatures().length;
 console.log("Count right after construction: " + numFeatures);
 ```
 
@@ -284,9 +323,9 @@ been populated with features), you should use an event listener function on the
 
 ```javascript
 vector.getSource().on('change', function(evt){
-  var source = evt.target;
+  const source = evt.target;
   if (source.getState() === 'ready') {
-    var numFeatures = source.getFeatures().length;
+    const numFeatures = source.getFeatures().length;
     console.log("Count after change: " + numFeatures);
   }
 });
@@ -315,19 +354,47 @@ map.renderSync();
 
 ## Why are my features not found?
 
-You are using `ol.Map#forEachFeatureAtPixel` or `ol.Map#hasFeatureAtPixel`, but
+You are using `Map#forEachFeatureAtPixel` or `Map#hasFeatureAtPixel`, but
 it sometimes does not work for large icons or labels? The *hit detection* only
 checks features that are within a certain distance of the given position. For large
 icons, the actual geometry of a feature might be too far away and is not considered.
 
-In this case, set the `renderBuffer` property of `ol.layer.Vector` (the default
-value is 100px):
+In this case, set the `renderBuffer` property of `VectorLayer` (the default value is 100px):
 
 ```javascript
-var vectorLayer = new ol.layer.Vector({
+import VectorLayer from 'ol/layer/Vector';
+
+const vectorLayer = new VectorLayer({
   ...
   renderBuffer: 200
 });
 ```
 
 The recommended value is the size of the largest symbol, line width or label.
+
+## Why is zooming or clicking in the map off/inaccurate?
+
+OpenLayers does not update the map when the container element is resized. This can be caused by progressive updates
+to CSS styles or manually resizing the map. When that happens, any interaction will become inaccurate: the map would zoom in and out, and end up not being centered on the pointer. This makes it hard to do certain interactions, e.g. selecting the desired feature.
+
+There is currently no built-in way to react to element's size changes, as [Resize Observer API](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) is only implemented in Chrome.
+
+There is however an easy to use [polyfill](https://github.com/que-etc/resize-observer-polyfill):
+
+```javascript
+import Map from 'ol/Map';
+import ResizeObserver from 'resize-observer-polyfill';
+
+const mapElement = document.querySelector('#map')
+const map = new Map({
+  target: mapElement
+})
+
+const sizeObserver = new ResizeObserver(() => {
+  map.updateSize()
+})
+sizeObserver.observe(mapElement)
+
+// called when the map is destroyed
+// sizeObserver.disconnect()
+```

doc/quickstart.hbs

@@ -18,14 +18,14 @@ Below you'll find a complete working example.  Create a new file, copy in the co
 <!doctype html>
 <html lang="en">
   <head>
-    <link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/{{ latest }}/css/ol.css" type="text/css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/{{ latest }}/css/ol.css" type="text/css">
     <style>
       .map {
         height: 400px;
         width: 100%;
       }
     </style>
-    <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/{{ latest }}/build/ol.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/{{ latest }}/build/ol.js"></script>
     <title>OpenLayers example</title>
   </head>
   <body>
@@ -60,7 +60,7 @@ To include a map a web page you will need 3 things:
 ### Include OpenLayers
 
 ```xml
-  <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/{{ latest }}/build/ol.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/{{ latest }}/build/ol.js"></script>
 ```
 
 The first part is to include the JavaScript library. For the purpose of this tutorial, here we simply point to the openlayers.org website to get the whole library. In a production environment, we would build a custom version of the library including only the module needed for our application.

doc/tutorials/background.md

@@ -17,7 +17,7 @@ OpenLayers is available as [`ol` npm package](https://npmjs.com/package/ol), whi
 
 ## Renderers and Browser Support
 
-By default, OpenLayers uses a performance optimized Canvas renderer. An experimental WebGL renderer (without text rendering support) is also avaialble.
+By default, OpenLayers uses a performance optimized Canvas renderer.
 
 OpenLayers runs on all modern browsers that support [HTML5](https://html.spec.whatwg.org/multipage/) and [ECMAScript 5](http://www.ecma-international.org/ecma-262/5.1/). This includes Chrome, Firefox, Safari and Edge. For older browsers and platforms like Internet Explorer (down to version 9) and Android 4.x, [polyfills](http://polyfill.io), the application bundle needs to be transpiled (e.g. using [Babel](https://babeljs.io)) and bundled with polyfills for `requestAnimationFrame`, `Element.prototype.classList` and `URL`.
 
@@ -44,6 +44,6 @@ import {Tile, Vector} from 'ol/layer';
 In addition to these re-exported classes, modules with lowercase names also provide constants or functions as named exports:
 
 ```js
-import {inherits} from 'ol';
+import {getUid} from 'ol';
 import {fromLonLat} from 'ol/proj';
 ```

doc/tutorials/bundle.md

@@ -11,9 +11,11 @@ In this tutorial, we will be using [Parcel](https://parceljs.org) to bundle our
 
 ## Initial steps
 
-Create a new empty directory for your project and navigate to it by running `mkdir new-project && cd new-project`. Initialize your project using `npm init` and answer the questions asked.
+Create a new empty directory for your project and navigate to it by running `mkdir new-project && cd new-project`. Initialize your project with
 
-Add OpenLayers as dependency to your application with
+    npm init
+
+This will create a `package.json` file in your working directory. Add OpenLayers as dependency to your application with
 
     npm install ol
 
@@ -69,13 +71,21 @@ You will also need an `index.html` file that will use your bundle. Here is a sim
 
 ## Creating a bundle
 
-With simple scripts you can introduce the commands `npm run build` and `npm start` to manually build your bundle and watch for changes, respectively. Add the following to the script section in `package.json`:
+With two additional lines in `package.json` you can introduce the commands `npm run build` and `npm start` to manually build your bundle and watch for changes, respectively. The final `package.json` with the two additional commands `"start"` and `"build"` should look like this:
 
 ```json
+{
+  "name": "test",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "start": "parcel index.html",
     "build": "parcel build --public-url . index.html"
+  },
+  "author": "",
+  "license": "ISC"
 }
 ```
 That's it. Now to run your application, enter

doc/tutorials/concepts.hbs

@@ -75,7 +75,7 @@ The above snippets can be combined into a single script that renders a map with
 import Map from 'ol/Map';
 import View from 'ol/View';
 import OSM from 'ol/source/OSM';
-import TileLayer from 'ol/source/Tile';
+import TileLayer from 'ol/layer/Tile';
 
 new Map({
   layers: [

examples/.eslintrc

@@ -9,6 +9,7 @@
     "GyroNorm": false,
     "jsPDF": false,
     "jsts": false,
+    "mapboxgl": false,
     "saveAs": false,
     "toastr": false,
     "topojson": false,

examples/accessible.js

@@ -1,6 +1,5 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
-import {defaults as defaultControls} from '../src/ol/control.js';
 import TileLayer from '../src/ol/layer/Tile.js';
 import OSM from '../src/ol/source/OSM.js';
 
@@ -12,11 +11,6 @@ const map = new Map({
     })
   ],
   target: 'map',
-  controls: defaultControls({
-    attributionOptions: {
-      collapsible: false
-    }
-  }),
   view: new View({
     center: [0, 0],
     zoom: 2

examples/animation.js

@@ -24,9 +24,6 @@ const map = new Map({
       source: new OSM()
     })
   ],
-  // Improve user experience by loading tiles while animating. Will make
-  // animations stutter on mobile or slow devices.
-  loadTilesWhileAnimating: true,
   view: view
 });
 

examples/bing-maps.html

@@ -12,9 +12,8 @@ cloak:
  <div id="map" class="map"></div>
  <select id="layer-select">
    <option value="Aerial">Aerial</option>
-   <option value="AerialWithLabels" selected>Aerial with labels</option>
-   <option value="Road">Road (static)</option>
-   <option value="RoadOnDemand">Road (dynamic)</option>
-   <option value="collinsBart">Collins Bart</option>
-   <option value="ordnanceSurvey">Ordnance Survey</option>
+   <option value="AerialWithLabelsOnDemand" selected>Aerial with labels</option>
+   <option value="RoadOnDemand">Road</option>
+   <option value="CanvasDark">Road dark</option>
+   <option value="OrdnanceSurvey">Ordnance Survey</option>
  </select>

examples/bing-maps.js

@@ -5,12 +5,11 @@ import BingMaps from '../src/ol/source/BingMaps.js';
 
 
 const styles = [
-  'Road',
   'RoadOnDemand',
   'Aerial',
-  'AerialWithLabels',
-  'collinsBart',
-  'ordnanceSurvey'
+  'AerialWithLabelsOnDemand',
+  'CanvasDark',
+  'OrdnanceSurvey'
 ];
 const layers = [];
 let i, ii;
@@ -29,9 +28,6 @@ for (i = 0, ii = styles.length; i < ii; ++i) {
 }
 const map = new Map({
   layers: layers,
-  // Improve user experience by loading tiles while dragging/zooming. Will make
-  // zooming choppy on mobile or slow devices.
-  loadTilesWhileInteracting: true,
   target: 'map',
   view: new View({
     center: [-6655.5402445057125, 6709968.258934638],

examples/blend-modes.css

@@ -1,4 +0,0 @@
-.map{
-  background-repeat: repeat;
-  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAApSURBVBiVY7x///5/BjSgqKjIiC7GhC6ACwygQgxHMzAwMGDz4FDwDAD5/wevjSk4mwAAAABJRU5ErkJggg==);
-}

examples/blend-modes.html

@@ -1,68 +0,0 @@
----
-layout: example.html
-title: Blend Modes
-shortdesc: Shows how to change the canvas compositing / blending mode in post- and precompose eventhandlers.
-docs: >
-  <p>This example shows how to change the canvas compositing / blending mode in
-  post- and precompose event handlers. The Canvas 2D API provides the property
-  <code>globalCompositeOperation</code> with which one can influence which
-  composition operation will be used when drawing on the canvas. The various
-  options are well described on the <a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation">MDN
-  documentation page</a>.</p>
-
-  <p>In this example three circles on the corners of an equilateral triangle are
-  drawn with red, green or blue styles respectively. By setting the
-  <code>globalCompositeOperation</code> you can change how these colors turn out
-  when they are combined on the map.</p>
-
-  <p>You can select an operation in the select-field and you can also control
-  which layers will be affected by the chosen operation through the layer
-  checkboxes.</p>
-tags: "blendmode, blend-mode, blend mode, blendingmode, blending-mode, blending mode, composition, compositing, canvas, vector"
----
-<div id="map" class="map"></div>
-<form class="form-horizontal">
-  <label>
-    <select id="blend-mode" class="form-control">
-      <option value="source-over">source-over (default)</option>
-      <option>source-in</option>
-      <option>source-out</option>
-      <option>source-atop</option>
-      <option>destination-over</option>
-      <option>destination-in</option>
-      <option>destination-out</option>
-      <option>destination-atop</option>
-      <option>lighter</option>
-      <option>copy</option>
-      <option>xor</option>
-      <option>multiply</option>
-      <option>screen</option>
-      <option>overlay</option>
-      <option>darken</option>
-      <option>lighten</option>
-      <option>color-dodge</option>
-      <option>color-burn</option>
-      <option>hard-light</option>
-      <option>soft-light</option>
-      <option selected>difference</option>
-      <option>exclusion</option>
-      <option>hue</option>
-      <option>saturation</option>
-      <option>color</option>
-      <option>luminosity</option>
-    </select>
-    Canvas compositing / blending mode
-  </label>
-  <label>
-    <input type="checkbox" id="affect-red" checked>
-    Red circle affected
-  </label>
-  <label>
-    <input type="checkbox" id="affect-green" checked>
-    Green circle affected
-  </label>
-  <label>
-    <input type="checkbox" id="affect-blue" checked>
-    Blue circle affected
-  </label>
-</form>

examples/blend-modes.js

@@ -1,173 +0,0 @@
-import Feature from '../src/ol/Feature.js';
-import Map from '../src/ol/Map.js';
-import View from '../src/ol/View.js';
-import Point from '../src/ol/geom/Point.js';
-import VectorLayer from '../src/ol/layer/Vector.js';
-import VectorSource from '../src/ol/source/Vector.js';
-import {Circle as CircleStyle, Fill, Stroke, Style} from '../src/ol/style.js';
-
-
-// Create separate layers for red, green an blue circles.
-//
-// Every layer has one feature that is styled with a circle, together the
-// features form the corners of an equilateral triangle and their styles overlap
-const redLayer = new VectorLayer({
-  source: new VectorSource({
-    features: [new Feature(new Point([0, 0]))]
-  }),
-  style: new Style({
-    image: new CircleStyle({
-      fill: new Fill({
-        color: 'rgba(255,0,0,0.8)'
-      }),
-      stroke: new Stroke({
-        color: 'rgb(255,0,0)',
-        width: 15
-      }),
-      radius: 120
-    })
-  })
-});
-const greenLayer = new VectorLayer({
-  source: new VectorSource({
-    // 433.013 is roughly 250 * Math.sqrt(3)
-    features: [new Feature(new Point([250, 433.013]))]
-  }),
-  style: new Style({
-    image: new CircleStyle({
-      fill: new Fill({
-        color: 'rgba(0,255,0,0.8)'
-      }),
-      stroke: new Stroke({
-        color: 'rgb(0,255,0)',
-        width: 15
-      }),
-      radius: 120
-    })
-  })
-});
-const blueLayer = new VectorLayer({
-  source: new VectorSource({
-    features: [new Feature(new Point([500, 0]))]
-  }),
-  style: new Style({
-    image: new CircleStyle({
-      fill: new Fill({
-        color: 'rgba(0,0,255,0.8)'
-      }),
-      stroke: new Stroke({
-        color: 'rgb(0,0,255)',
-        width: 15
-      }),
-      radius: 120
-    })
-  })
-});
-
-// Create the map, the view is centered on the triangle. Zooming and panning is
-// restricted to a sane area
-const map = new Map({
-  layers: [
-    redLayer,
-    greenLayer,
-    blueLayer
-  ],
-  target: 'map',
-  view: new View({
-    center: [250, 220],
-    extent: [0, 0, 500, 500],
-    resolution: 4,
-    minResolution: 2,
-    maxResolution: 32
-  })
-});
-
-// Get the form elements and bind the listeners
-const select = document.getElementById('blend-mode');
-const affectRed = document.getElementById('affect-red');
-const affectGreen = document.getElementById('affect-green');
-const affectBlue = document.getElementById('affect-blue');
-
-
-/**
- * This method sets the globalCompositeOperation to the value of the select
- * field and it is bound to the precompose event of the layers.
- *
- * @param {module:ol/render/Event~RenderEvent} evt The render event.
- */
-const setBlendModeFromSelect = function(evt) {
-  evt.context.globalCompositeOperation = select.value;
-};
-
-
-/**
- * This method resets the globalCompositeOperation to the default value of
- * 'source-over' and it is bound to the postcompose event of the layers.
- *
- * @param {module:ol/render/Event~RenderEvent} evt The render event.
- */
-const resetBlendModeFromSelect = function(evt) {
-  evt.context.globalCompositeOperation = 'source-over';
-};
-
-
-/**
- * Bind the pre- and postcompose handlers to the passed layer.
- *
- * @param {module:ol/layer/Vector} layer The layer to bind the handlers to.
- */
-const bindLayerListeners = function(layer) {
-  layer.on('precompose', setBlendModeFromSelect);
-  layer.on('postcompose', resetBlendModeFromSelect);
-};
-
-
-/**
- * Unind the pre- and postcompose handlers to the passed layers.
- *
- * @param {module:ol/layer/Vector} layer The layer to unbind the handlers from.
- */
-const unbindLayerListeners = function(layer) {
-  layer.un('precompose', setBlendModeFromSelect);
-  layer.un('postcompose', resetBlendModeFromSelect);
-};
-
-
-/**
- * Handler for the click event of the 'affect-XXX' checkboxes.
- *
- * @this {HTMLInputElement}
- */
-const affectLayerClicked = function() {
-  let layer;
-  if (this.id == 'affect-red') {
-    layer = redLayer;
-  } else if (this.id == 'affect-green') {
-    layer = greenLayer;
-  } else {
-    layer = blueLayer;
-  }
-  if (this.checked) {
-    bindLayerListeners(layer);
-  } else {
-    unbindLayerListeners(layer);
-  }
-  map.render();
-};
-
-
-// Rerender map when blend mode changes
-select.addEventListener('change', function() {
-  map.render();
-});
-
-// Unbind / bind listeners depending on the checked state when the checkboxes
-// are clicked
-affectRed.addEventListener('click', affectLayerClicked);
-affectGreen.addEventListener('click', affectLayerClicked);
-affectBlue.addEventListener('click', affectLayerClicked);
-
-// Initially bind listeners
-bindLayerListeners(redLayer);
-bindLayerListeners(greenLayer);
-bindLayerListeners(blueLayer);

examples/canvas-gradient-pattern.js

@@ -61,8 +61,8 @@ const style = new Style({
  * The styling function for the vector layer, will return an array of styles
  * which either contains the aboove gradient or pattern.
  *
- * @param {module:ol/Feature~Feature} feature The feature to style.
- * @return {module:ol/style/Style} The style to use for the feature.
+ * @param {import("../src/ol/Feature.js").default} feature The feature to style.
+ * @return {Style} The style to use for the feature.
  */
 const getStackedStyle = function(feature) {
   const id = feature.getId();

examples/canvas-tiles.html

@@ -4,10 +4,7 @@ title: Canvas Tiles
 shortdesc: Renders tiles with coordinates for debugging.
 docs: >
   The black grid tiles are generated on the client with an HTML5 canvas. The
-  displayed tile coordinates are OpenLayers tile coordinates. These increase
-  from bottom to top, but standard XYZ tiling scheme coordinates increase from
-  top to bottom. To calculate the `y` for a standard XYZ tile coordinate, use
-  `-y - 1`.
+  displayed tile coordinates are the XYZ tile coordinates.
 tags: "layers, openstreetmap, canvas"
 ---
 <div id="map" class="map"></div>

examples/canvas-tiles.js

@@ -1,32 +1,21 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
-import {defaults as defaultControls} from '../src/ol/control.js';
 import TileLayer from '../src/ol/layer/Tile.js';
-import {fromLonLat} from '../src/ol/proj.js';
 import {OSM, TileDebug} from '../src/ol/source.js';
 
 
-const osmSource = new OSM();
 const map = new Map({
   layers: [
     new TileLayer({
-      source: osmSource
+      source: new OSM()
     }),
     new TileLayer({
-      source: new TileDebug({
-        projection: 'EPSG:3857',
-        tileGrid: osmSource.getTileGrid()
-      })
+      source: new TileDebug()
     })
   ],
   target: 'map',
-  controls: defaultControls({
-    attributionOptions: {
-      collapsible: false
-    }
-  }),
   view: new View({
-    center: fromLonLat([-0.1275, 51.507222]),
-    zoom: 10
+    center: [0, 0],
+    zoom: 1
   })
 });

examples/center.html

@@ -21,8 +21,6 @@ tags: "center, rotation, openstreetmap"
   <div class="padding-bottom"></div>
   <div class="center"></div>
 </div>
-<button id="zoomtoswitzerlandbest">Zoom to Switzerland</button> (best fit),<br/>
-<button id="zoomtoswitzerlandconstrained">Zoom to Switzerland</button> (respect resolution constraint).<br/>
-<button id="zoomtoswitzerlandnearest">Zoom to Switzerland</button> (nearest),<br/>
+<button id="zoomtoswitzerland">Zoom to Switzerland</button> (best fit).<br/>
 <button id="zoomtolausanne">Zoom to Lausanne</button> (with min resolution),<br/>
 <button id="centerlausanne">Center on Lausanne</button>

examples/center.js

@@ -1,11 +1,11 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
-import {defaults as defaultControls} from '../src/ol/control.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';
 import {Circle as CircleStyle, Fill, Stroke, Style} from '../src/ol/style.js';
 
+/** @type {VectorSource<import("../src/ol/geom/SimpleGeometry.js").default>} */
 const source = new VectorSource({
   url: 'data/geojson/switzerland.geojson',
   format: new GeoJSON()
@@ -45,48 +45,28 @@ const map = new Map({
     vectorLayer
   ],
   target: 'map',
-  controls: defaultControls({
-    attributionOptions: {
-      collapsible: false
-    }
-  }),
   view: view
 });
 
-const zoomtoswitzerlandbest = document.getElementById('zoomtoswitzerlandbest');
-zoomtoswitzerlandbest.addEventListener('click', function() {
+const zoomtoswitzerland =
+    document.getElementById('zoomtoswitzerland');
+zoomtoswitzerland.addEventListener('click', function() {
   const feature = source.getFeatures()[0];
-  const polygon = /** @type {module:ol/geom/SimpleGeometry~SimpleGeometry} */ (feature.getGeometry());
-  view.fit(polygon, {padding: [170, 50, 30, 150], constrainResolution: false});
-}, false);
-
-const zoomtoswitzerlandconstrained =
-    document.getElementById('zoomtoswitzerlandconstrained');
-zoomtoswitzerlandconstrained.addEventListener('click', function() {
-  const feature = source.getFeatures()[0];
-  const polygon = /** @type {module:ol/geom/SimpleGeometry~SimpleGeometry} */ (feature.getGeometry());
+  const polygon = feature.getGeometry();
   view.fit(polygon, {padding: [170, 50, 30, 150]});
 }, false);
 
-const zoomtoswitzerlandnearest =
-    document.getElementById('zoomtoswitzerlandnearest');
-zoomtoswitzerlandnearest.addEventListener('click', function() {
-  const feature = source.getFeatures()[0];
-  const polygon = /** @type {module:ol/geom/SimpleGeometry~SimpleGeometry} */ (feature.getGeometry());
-  view.fit(polygon, {padding: [170, 50, 30, 150], nearest: true});
-}, false);
-
 const zoomtolausanne = document.getElementById('zoomtolausanne');
 zoomtolausanne.addEventListener('click', function() {
   const feature = source.getFeatures()[1];
-  const point = /** @type {module:ol/geom/SimpleGeometry~SimpleGeometry} */ (feature.getGeometry());
+  const point = feature.getGeometry();
   view.fit(point, {padding: [170, 50, 30, 150], minResolution: 50});
 }, false);
 
 const centerlausanne = document.getElementById('centerlausanne');
 centerlausanne.addEventListener('click', function() {
   const feature = source.getFeatures()[1];
-  const point = /** @type {module:ol/geom/Point~Point} */ (feature.getGeometry());
-  const size = /** @type {module:ol/size~Size} */ (map.getSize());
+  const point = feature.getGeometry();
+  const size = map.getSize();
   view.centerOn(point.getCoordinates(), size, [570, 500]);
 }, false);

examples/color-manipulation.js

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

examples/custom-controls.js

@@ -1,4 +1,3 @@
-import {inherits} from '../src/ol/util.js';
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
 import {defaults as defaultControls, Control} from '../src/ol/control.js';
@@ -6,49 +5,38 @@ import TileLayer from '../src/ol/layer/Tile.js';
 import OSM from '../src/ol/source/OSM.js';
 
 
-/**
- * Define a namespace for the application.
- */
-window.app = {};
-const app = window.app;
-
-
 //
 // Define rotate to north control.
 //
 
+class RotateNorthControl extends Control {
 
   /**
- * @constructor
- * @extends {module:ol/control/Control~Control}
    * @param {Object=} opt_options Control options.
    */
-app.RotateNorthControl = function(opt_options) {
-
+  constructor(opt_options) {
     const options = opt_options || {};
 
     const button = document.createElement('button');
     button.innerHTML = 'N';
 
-  const this_ = this;
-  const handleRotateNorth = function() {
-    this_.getMap().getView().setRotation(0);
-  };
-
-  button.addEventListener('click', handleRotateNorth, false);
-  button.addEventListener('touchstart', handleRotateNorth, false);
-
     const element = document.createElement('div');
     element.className = 'rotate-north ol-unselectable ol-control';
     element.appendChild(button);
 
-  Control.call(this, {
+    super({
       element: element,
       target: options.target
     });
 
-};
-inherits(app.RotateNorthControl, Control);
+    button.addEventListener('click', this.handleRotateNorth.bind(this), false);
+  }
+
+  handleRotateNorth() {
+    this.getMap().getView().setRotation(0);
+  }
+
+}
 
 
 //
@@ -57,12 +45,8 @@ inherits(app.RotateNorthControl, Control);
 
 
 const map = new Map({
-  controls: defaultControls({
-    attributionOptions: {
-      collapsible: false
-    }
-  }).extend([
-    new app.RotateNorthControl()
+  controls: defaultControls().extend([
+    new RotateNorthControl()
   ]),
   layers: [
     new TileLayer({

examples/custom-interactions.js

@@ -1,4 +1,3 @@
-import {inherits} from '../src/ol/util.js';
 import Feature from '../src/ol/Feature.js';
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
@@ -9,27 +8,17 @@ import {TileJSON, Vector as VectorSource} from '../src/ol/source.js';
 import {Fill, Icon, Stroke, Style} from '../src/ol/style.js';
 
 
-/**
- * Define a namespace for the application.
- */
-const app = {};
-
-
-/**
- * @constructor
- * @extends {module:ol/interaction/Pointer}
- */
-app.Drag = function() {
-
-  PointerInteraction.call(this, {
-    handleDownEvent: app.Drag.prototype.handleDownEvent,
-    handleDragEvent: app.Drag.prototype.handleDragEvent,
-    handleMoveEvent: app.Drag.prototype.handleMoveEvent,
-    handleUpEvent: app.Drag.prototype.handleUpEvent
+class Drag extends PointerInteraction {
+  constructor() {
+    super({
+      handleDownEvent: handleDownEvent,
+      handleDragEvent: handleDragEvent,
+      handleMoveEvent: handleMoveEvent,
+      handleUpEvent: handleUpEvent
     });
 
     /**
-   * @type {module:ol/pixel~Pixel}
+     * @type {import("../src/ol/coordinate.js").Coordinate}
      * @private
      */
     this.coordinate_ = null;
@@ -41,7 +30,7 @@ app.Drag = function() {
     this.cursor_ = 'pointer';
 
     /**
-   * @type {module:ol/Feature~Feature}
+     * @type {Feature}
      * @private
      */
     this.feature_ = null;
@@ -51,16 +40,15 @@ app.Drag = function() {
      * @private
      */
     this.previousCursor_ = undefined;
-
-};
-inherits(app.Drag, PointerInteraction);
+  }
+}
 
 
 /**
- * @param {module:ol/MapBrowserEvent~MapBrowserEvent} evt Map browser event.
+ * @param {import("../src/ol/MapBrowserEvent.js").default} evt Map browser event.
  * @return {boolean} `true` to start the drag sequence.
  */
-app.Drag.prototype.handleDownEvent = function(evt) {
+function handleDownEvent(evt) {
   const map = evt.map;
 
   const feature = map.forEachFeatureAtPixel(evt.pixel,
@@ -74,13 +62,13 @@ app.Drag.prototype.handleDownEvent = function(evt) {
   }
 
   return !!feature;
-};
+}
 
 
 /**
- * @param {module:ol/MapBrowserEvent~MapBrowserEvent} evt Map browser event.
+ * @param {import("../src/ol/MapBrowserEvent.js").default} evt Map browser event.
  */
-app.Drag.prototype.handleDragEvent = function(evt) {
+function handleDragEvent(evt) {
   const deltaX = evt.coordinate[0] - this.coordinate_[0];
   const deltaY = evt.coordinate[1] - this.coordinate_[1];
 
@@ -89,13 +77,13 @@ app.Drag.prototype.handleDragEvent = function(evt) {
 
   this.coordinate_[0] = evt.coordinate[0];
   this.coordinate_[1] = evt.coordinate[1];
-};
+}
 
 
 /**
- * @param {module:ol/MapBrowserEvent~MapBrowserEvent} evt Event.
+ * @param {import("../src/ol/MapBrowserEvent.js").default} evt Event.
  */
-app.Drag.prototype.handleMoveEvent = function(evt) {
+function handleMoveEvent(evt) {
   if (this.cursor_) {
     const map = evt.map;
     const feature = map.forEachFeatureAtPixel(evt.pixel,
@@ -113,17 +101,17 @@ app.Drag.prototype.handleMoveEvent = function(evt) {
       this.previousCursor_ = undefined;
     }
   }
-};
+}
 
 
 /**
  * @return {boolean} `false` to stop the drag sequence.
  */
-app.Drag.prototype.handleUpEvent = function() {
+function handleUpEvent() {
   this.coordinate_ = null;
   this.feature_ = null;
   return false;
-};
+}
 
 
 const pointFeature = new Feature(new Point([0, 0]));
@@ -137,11 +125,11 @@ const polygonFeature = new Feature(
 
 
 const map = new Map({
-  interactions: defaultInteractions().extend([new app.Drag()]),
+  interactions: defaultInteractions().extend([new Drag()]),
   layers: [
     new TileLayer({
       source: new TileJSON({
-        url: 'https://api.tiles.mapbox.com/v3/mapbox.geography-class.json?secure'
+        url: 'https://a.tiles.mapbox.com/v3/aj.1x1-degrees.json'
       })
     }),
     new VectorLayer({
@@ -149,13 +137,13 @@ const map = new Map({
         features: [pointFeature, lineFeature, polygonFeature]
       }),
       style: new Style({
-        image: new Icon(/** @type {module:ol/style/Icon~Options} */ ({
+        image: new Icon({
           anchor: [0.5, 46],
           anchorXUnits: 'fraction',
           anchorYUnits: 'pixels',
           opacity: 0.95,
           src: 'data/icon.png'
-        })),
+        }),
         stroke: new Stroke({
           width: 3,
           color: [255, 0, 0, 1]

examples/d3.css

@@ -0,0 +1,4 @@
+path.boundary {
+  fill: none;
+  stroke: #777;
+}

examples/d3.html

@@ -3,10 +3,10 @@ layout: example.html
 title: d3 Integration
 shortdesc: Example of using OpenLayers and d3 together.
 docs: >
-  <p>The example loads TopoJSON geometries and uses d3 (<code>d3.geo.path</code>) to render these geometries to a canvas element that is then used as the image of an OpenLayers image layer.</p>
+  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

@@ -1,10 +1,70 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
 import {getWidth, getCenter} from '../src/ol/extent.js';
-import {Image as ImageLayer, Tile as TileLayer} from '../src/ol/layer.js';
+import {Layer, Tile as TileLayer} from '../src/ol/layer.js';
+import SourceState from '../src/ol/source/State.js';
 import {fromLonLat, toLonLat} from '../src/ol/proj.js';
-import {ImageCanvas as ImageCanvasSource, Stamen} from '../src/ol/source.js';
+import Stamen from '../src/ol/source/Stamen.js';
 
+class CanvasLayer extends Layer {
+
+  constructor(options) {
+    super(options);
+
+    this.features = options.features;
+
+    this.svg = d3.select(document.createElement('div')).append('svg')
+      .style('position', 'absolute');
+
+    this.svg.append('path')
+      .datum(this.features)
+      .attr('class', 'boundary');
+  }
+
+  getSourceState() {
+    return SourceState.READY;
+  }
+
+  render(frameState) {
+    const width = frameState.size[0];
+    const height = frameState.size[1];
+    const projection = frameState.viewState.projection;
+    const d3Projection = d3.geoMercator().scale(1).translate([0, 0]);
+    let d3Path = d3.geoPath().projection(d3Projection);
+
+    const pixelBounds = d3Path.bounds(this.features);
+    const pixelBoundsWidth = pixelBounds[1][0] - pixelBounds[0][0];
+    const pixelBoundsHeight = pixelBounds[1][1] - pixelBounds[0][1];
+
+    const geoBounds = d3.geoBounds(this.features);
+    const geoBoundsLeftBottom = fromLonLat(geoBounds[0], projection);
+    const geoBoundsRightTop = fromLonLat(geoBounds[1], projection);
+    let geoBoundsWidth = geoBoundsRightTop[0] - geoBoundsLeftBottom[0];
+    if (geoBoundsWidth < 0) {
+      geoBoundsWidth += getWidth(projection.getExtent());
+    }
+    const geoBoundsHeight = geoBoundsRightTop[1] - geoBoundsLeftBottom[1];
+
+    const widthResolution = geoBoundsWidth / pixelBoundsWidth;
+    const heightResolution = geoBoundsHeight / pixelBoundsHeight;
+    const r = Math.max(widthResolution, heightResolution);
+    const scale = r / frameState.viewState.resolution;
+
+    const center = toLonLat(getCenter(frameState.extent), projection);
+    d3Projection.scale(scale).center(center).translate([width / 2, height / 2]);
+
+    d3Path = d3Path.projection(d3Projection);
+    d3Path(this.features);
+
+    this.svg.attr('width', width);
+    this.svg.attr('height', height);
+
+    this.svg.select('path')
+      .attr('d', d3Path);
+
+    return this.svg.node();
+  }
+}
 
 const map = new Map({
   layers: [
@@ -25,63 +85,11 @@ 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) {
-  const features = topojson.feature(us, us.objects.counties);
+d3.json('data/topojson/us.json').then(function(us) {
 
-  /**
-   * This function uses d3 to render the topojson features to a canvas.
-   * @param {module:ol/extent~Extent} extent Extent.
-   * @param {number} resolution Resolution.
-   * @param {number} pixelRatio Pixel ratio.
-   * @param {module:ol/size~Size} size Size.
-   * @param {module:ol/proj/Projection~Projection} projection Projection.
-   * @return {HTMLCanvasElement} A canvas element.
-   */
-  const canvasFunction = function(extent, resolution, pixelRatio, size, projection) {
-    const canvasWidth = size[0];
-    const canvasHeight = size[1];
-
-    const canvas = d3.select(document.createElement('canvas'));
-    canvas.attr('width', canvasWidth).attr('height', canvasHeight);
-
-    const context = canvas.node().getContext('2d');
-
-    const d3Projection = d3.geoMercator().scale(1).translate([0, 0]);
-    let d3Path = d3.geoPath().projection(d3Projection);
-
-    const pixelBounds = d3Path.bounds(features);
-    const pixelBoundsWidth = pixelBounds[1][0] - pixelBounds[0][0];
-    const pixelBoundsHeight = pixelBounds[1][1] - pixelBounds[0][1];
-
-    const geoBounds = d3.geoBounds(features);
-    const geoBoundsLeftBottom = fromLonLat(geoBounds[0], projection);
-    const geoBoundsRightTop = fromLonLat(geoBounds[1], projection);
-    let geoBoundsWidth = geoBoundsRightTop[0] - geoBoundsLeftBottom[0];
-    if (geoBoundsWidth < 0) {
-      geoBoundsWidth += getWidth(projection.getExtent());
-    }
-    const geoBoundsHeight = geoBoundsRightTop[1] - geoBoundsLeftBottom[1];
-
-    const widthResolution = geoBoundsWidth / pixelBoundsWidth;
-    const heightResolution = geoBoundsHeight / pixelBoundsHeight;
-    const r = Math.max(widthResolution, heightResolution);
-    const scale = r / (resolution / pixelRatio);
-
-    const center = toLonLat(getCenter(extent), projection);
-    d3Projection.scale(scale).center(center)
-      .translate([canvasWidth / 2, canvasHeight / 2]);
-    d3Path = d3Path.projection(d3Projection).context(context);
-    d3Path(features);
-    context.stroke();
-
-    return canvas.node();
-  };
-
-  const layer = new ImageLayer({
-    source: new ImageCanvasSource({
-      canvasFunction: canvasFunction,
-      projection: 'EPSG:3857'
-    })
+  const layer = new CanvasLayer({
+    features: topojson.feature(us, us.objects.counties)
   });
+
   map.addLayer(layer);
 });

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/device-orientation.html

@@ -8,7 +8,7 @@ docs: >
   normalize the events from the browser.
 tags: "device, orientation, gyronorm"
 resources:
-  - https://cdn.rawgit.com/dorukeker/gyronorm.js/v2.0.6/dist/gyronorm.complete.min.js
+  - https://unpkg.com/gyronorm@2.0.6/dist/gyronorm.complete.min.js
 ---
 <div id="map" class="map"></div>
 <p>

examples/device-orientation.js

@@ -1,6 +1,5 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
-import {defaults as defaultControls} from '../src/ol/control.js';
 import TileLayer from '../src/ol/layer/Tile.js';
 import {toRadians} from '../src/ol/math.js';
 import OSM from '../src/ol/source/OSM.js';
@@ -16,11 +15,6 @@ const map = new Map({
     })
   ],
   target: 'map',
-  controls: defaultControls({
-    attributionOptions: {
-      collapsible: false
-    }
-  }),
   view: view
 });
 
@@ -35,7 +29,7 @@ gn.init().then(function() {
   gn.start(function(event) {
     const center = view.getCenter();
     const resolution = view.getResolution();
-    const alpha = toRadians(event.do.beta);
+    const alpha = toRadians(event.do.alpha);
     const beta = toRadians(event.do.beta);
     const gamma = toRadians(event.do.gamma);
 
@@ -46,6 +40,6 @@ gn.init().then(function() {
     center[0] -= resolution * gamma * 25;
     center[1] += resolution * beta * 25;
 
-    view.setCenter(view.constrainCenter(center));
+    view.setCenter(center);
   });
 });

examples/drag-and-drop-image-vector.html

@@ -3,7 +3,7 @@ layout: example.html
 title: Drag-and-Drop Image Vector
 shortdesc: Example of using the drag-and-drop interaction with image vector rendering.
 docs: >
-  Example of using the drag-and-drop interaction with an `ol/layer/Vector` with `renderMode: 'image'``. Drag and drop GPX, GeoJSON, IGC, KML, or TopoJSON files on to the map. Each file is rendered to an image on the client.
+  Example of using the drag-and-drop interaction with an `ol/layer/VectorImage` layer. Drag and drop GPX, GeoJSON, IGC, KML, or TopoJSON files on to the map. Each file is rendered to an image on the client.
 tags: "drag-and-drop-image-vector, gpx, geojson, igc, kml, topojson, vector, image"
 cloak:
   - key: As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5

examples/drag-and-drop-image-vector.js

@@ -2,76 +2,8 @@ import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
 import {GPX, GeoJSON, IGC, KML, TopoJSON} from '../src/ol/format.js';
 import {defaults as defaultInteractions, DragAndDrop} from '../src/ol/interaction.js';
-import {Vector as VectorLayer, Tile as TileLayer} from '../src/ol/layer.js';
+import {VectorImage as VectorImageLayer, Tile as TileLayer} from '../src/ol/layer.js';
 import {BingMaps, Vector as VectorSource} from '../src/ol/source.js';
-import {Circle as CircleStyle, Fill, Stroke, Style} from '../src/ol/style.js';
-
-
-const defaultStyle = {
-  'Point': new Style({
-    image: new CircleStyle({
-      fill: new Fill({
-        color: 'rgba(255,255,0,0.5)'
-      }),
-      radius: 5,
-      stroke: new Stroke({
-        color: '#ff0',
-        width: 1
-      })
-    })
-  }),
-  'LineString': new Style({
-    stroke: new Stroke({
-      color: '#f00',
-      width: 3
-    })
-  }),
-  'Polygon': new Style({
-    fill: new Fill({
-      color: 'rgba(0,255,255,0.5)'
-    }),
-    stroke: new Stroke({
-      color: '#0ff',
-      width: 1
-    })
-  }),
-  'MultiPoint': new Style({
-    image: new CircleStyle({
-      fill: new Fill({
-        color: 'rgba(255,0,255,0.5)'
-      }),
-      radius: 5,
-      stroke: new Stroke({
-        color: '#f0f',
-        width: 1
-      })
-    })
-  }),
-  'MultiLineString': new Style({
-    stroke: new Stroke({
-      color: '#0f0',
-      width: 3
-    })
-  }),
-  'MultiPolygon': new Style({
-    fill: new Fill({
-      color: 'rgba(0,0,255,0.5)'
-    }),
-    stroke: new Stroke({
-      color: '#00f',
-      width: 1
-    })
-  })
-};
-
-const styleFunction = function(feature, resolution) {
-  const featureStyleFunction = feature.getStyleFunction();
-  if (featureStyleFunction) {
-    return featureStyleFunction.call(feature, resolution);
-  } else {
-    return defaultStyle[feature.getGeometry().getType()];
-  }
-};
 
 const dragAndDropInteraction = new DragAndDrop({
   formatConstructors: [
@@ -104,10 +36,8 @@ dragAndDropInteraction.on('addfeatures', function(event) {
   const vectorSource = new VectorSource({
     features: event.features
   });
-  map.addLayer(new VectorLayer({
-    renderMode: 'image',
-    source: vectorSource,
-    style: styleFunction
+  map.addLayer(new VectorImageLayer({
+    source: vectorSource
   }));
   map.getView().fit(vectorSource.getExtent());
 });

examples/drag-and-drop.js

@@ -4,74 +4,6 @@ import {GPX, GeoJSON, IGC, KML, TopoJSON} from '../src/ol/format.js';
 import {defaults as defaultInteractions, DragAndDrop} from '../src/ol/interaction.js';
 import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
 import {BingMaps, Vector as VectorSource} from '../src/ol/source.js';
-import {Circle as CircleStyle, Fill, Stroke, Style} from '../src/ol/style.js';
-
-
-const defaultStyle = {
-  'Point': new Style({
-    image: new CircleStyle({
-      fill: new Fill({
-        color: 'rgba(255,255,0,0.5)'
-      }),
-      radius: 5,
-      stroke: new Stroke({
-        color: '#ff0',
-        width: 1
-      })
-    })
-  }),
-  'LineString': new Style({
-    stroke: new Stroke({
-      color: '#f00',
-      width: 3
-    })
-  }),
-  'Polygon': new Style({
-    fill: new Fill({
-      color: 'rgba(0,255,255,0.5)'
-    }),
-    stroke: new Stroke({
-      color: '#0ff',
-      width: 1
-    })
-  }),
-  'MultiPoint': new Style({
-    image: new CircleStyle({
-      fill: new Fill({
-        color: 'rgba(255,0,255,0.5)'
-      }),
-      radius: 5,
-      stroke: new Stroke({
-        color: '#f0f',
-        width: 1
-      })
-    })
-  }),
-  'MultiLineString': new Style({
-    stroke: new Stroke({
-      color: '#0f0',
-      width: 3
-    })
-  }),
-  'MultiPolygon': new Style({
-    fill: new Fill({
-      color: 'rgba(0,0,255,0.5)'
-    }),
-    stroke: new Stroke({
-      color: '#00f',
-      width: 1
-    })
-  })
-};
-
-const styleFunction = function(feature, resolution) {
-  const featureStyleFunction = feature.getStyleFunction();
-  if (featureStyleFunction) {
-    return featureStyleFunction.call(feature, resolution);
-  } else {
-    return defaultStyle[feature.getGeometry().getType()];
-  }
-};
 
 const dragAndDropInteraction = new DragAndDrop({
   formatConstructors: [
@@ -105,8 +37,7 @@ dragAndDropInteraction.on('addfeatures', function(event) {
     features: event.features
   });
   map.addLayer(new VectorLayer({
-    source: vectorSource,
-    style: styleFunction
+    source: vectorSource
   }));
   map.getView().fit(vectorSource.getExtent());
 });

examples/draw-shapes.html

@@ -17,6 +17,7 @@ tags: "draw, edit, freehand, vector"
 <form class="form-inline">
   <label>Shape type &nbsp;</label>
   <select id="type">
+    <option value="Circle">Circle</option>
     <option value="Square">Square</option>
     <option value="Box">Box</option>
     <option value="Star">Star</option>

examples/dynamic-data.js

@@ -4,14 +4,14 @@ import {MultiPoint, Point} from '../src/ol/geom.js';
 import TileLayer from '../src/ol/layer/Tile.js';
 import OSM from '../src/ol/source/OSM.js';
 import {Circle as CircleStyle, Fill, Stroke, Style} from '../src/ol/style.js';
+import {getVectorContext} from '../src/ol/render.js';
 
+const tileLayer = new TileLayer({
+  source: new OSM()
+});
 
 const map = new Map({
-  layers: [
-    new TileLayer({
-      source: new OSM()
-    })
-  ],
+  layers: [tileLayer],
   target: 'map',
   view: new View({
     center: [0, 0],
@@ -46,8 +46,8 @@ const omegaTheta = 30000; // Rotation period in ms
 const R = 7e6;
 const r = 2e6;
 const p = 2e6;
-map.on('postcompose', function(event) {
-  const vectorContext = event.vectorContext;
+tileLayer.on('postrender', function(event) {
+  const vectorContext = getVectorContext(event);
   const frameState = event.frameState;
   const theta = 2 * Math.PI * frameState.time / omegaTheta;
   const coordinates = [];

examples/earthquake-clusters.css

@@ -1,18 +0,0 @@
-#map {
-  position: relative;
-}
-#info {
-  position: absolute;
-  height: 1px;
-  width: 1px;
-  z-index: 100;
-}
-.tooltip.in {
-  opacity: 1;
-}
-.tooltip.top .tooltip-arrow {
-  border-top-color: white;
-}
-.tooltip-inner {
-  border: 2px solid white;
-}

examples/earthquake-custom-symbol.js

@@ -26,9 +26,8 @@ const styleFunction = function(feature) {
   scale = size / 10;
   let style = styleCache[size];
   if (!style) {
-    const canvas = /** @type {HTMLCanvasElement} */ (document.createElement('canvas'));
-    const vectorContext = toContext(
-      /** @type {CanvasRenderingContext2D} */ (canvas.getContext('2d')),
+    const canvas = document.createElement('canvas');
+    const vectorContext = toContext(canvas.getContext('2d'),
       {size: [size, size], pixelRatio: 1});
     vectorContext.setStyle(new Style({
       fill: new Fill({color: 'rgba(255, 153, 0, 0.4)'}),

examples/export-map.css

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

examples/export-map.html

@@ -3,12 +3,13 @@ layout: example.html
 title: Map Export
 shortdesc: Example of exporting a map as a PNG image.
 docs: >
-  Example of exporting a map as a PNG image. This example requires a browser
-  that supports <a href="https://developer.mozilla.org/de/docs/Web/API/HTMLCanvasElement/toBlob#Browser_compatibility">
-  <code>canvas.toBlob()</code></a>.
+  Example of exporting a map as a PNG image. This example use the <a href="https://www.npmjs.com/package/html-to-image">html-to-image</a>
+  library.
 tags: "export, png, openstreetmap"
-resources:
-  - https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js
 ---
 <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,10 +1,12 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
-import {defaults as defaultControls} from '../src/ol/control.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';
 
+import {toPng} from 'html-to-image';
+
 const map = new Map({
   layers: [
     new TileLayer({
@@ -18,27 +20,34 @@ const map = new Map({
     })
   ],
   target: 'map',
-  controls: defaultControls({
-    attributionOptions: {
-      collapsible: false
-    }
-  }),
   view: new View({
     center: [0, 0],
     zoom: 2
   })
 });
 
-document.getElementById('export-png').addEventListener('click', function() {
-  map.once('rendercomplete', function(event) {
-    const canvas = event.context.canvas;
-    if (navigator.msSaveBlob) {
-      navigator.msSaveBlob(canvas.msToBlob(), 'map.png');
-    } else {
-      canvas.toBlob(function(blob) {
-        saveAs(blob, 'map.png');
-      });
+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 ? element.className.indexOf('ol-control') === -1 : true;
   }
+};
+
+document.getElementById('export-png').addEventListener('click', function() {
+  map.once('rendercomplete', function() {
+    toPng(map.getTargetElement(), exportOptions)
+      .then(function(dataURL) {
+        const link = document.getElementById('image-download');
+        link.href = dataURL;
+        link.click();
+      });
   });
   map.renderSync();
 });

examples/export-pdf.js

@@ -1,10 +1,11 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
-import {defaults as defaultControls} from '../src/ol/control.js';
 import WKT from '../src/ol/format/WKT.js';
 import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
 import {OSM, Vector as VectorSource} from '../src/ol/source.js';
 
+import {toJpeg} from 'html-to-image';
+
 const raster = new TileLayer({
   source: new OSM()
 });
@@ -26,11 +27,6 @@ const vector = new VectorLayer({
 const map = new Map({
   layers: [raster, vector],
   target: 'map',
-  controls: defaultControls({
-    attributionOptions: {
-      collapsible: false
-    }
-  }),
   view: new View({
     center: [0, 0],
     zoom: 2
@@ -47,6 +43,15 @@ const dims = {
   a5: [210, 148]
 };
 
+
+// export options for html-to-image.
+// See: https://github.com/bubkoo/html-to-image#options
+const exportOptions = {
+  filter: function(element) {
+    return element.className.indexOf('ol-control') === -1;
+  }
+};
+
 const exportButton = document.getElementById('export-pdf');
 
 exportButton.addEventListener('click', function() {
@@ -59,25 +64,28 @@ exportButton.addEventListener('click', function() {
   const dim = dims[format];
   const width = Math.round(dim[0] * resolution / 25.4);
   const height = Math.round(dim[1] * resolution / 25.4);
-  const size = /** @type {module:ol/size~Size} */ (map.getSize());
-  const extent = map.getView().calculateExtent(size);
+  const size = map.getSize();
+  const viewResolution = map.getView().getResolution();
 
-  map.once('rendercomplete', function(event) {
-    const canvas = event.context.canvas;
-    const data = canvas.toDataURL('image/jpeg');
+  map.once('rendercomplete', function() {
+    exportOptions.width = width;
+    exportOptions.height = height;
+    toJpeg(map.getViewport(), exportOptions).then(function(dataUrl) {
       const pdf = new jsPDF('landscape', undefined, format);
-    pdf.addImage(data, 'JPEG', 0, 0, dim[0], dim[1]);
+      pdf.addImage(dataUrl, 'JPEG', 0, 0, dim[0], dim[1]);
       pdf.save('map.pdf');
       // Reset original map size
       map.setSize(size);
-    map.getView().fit(extent, {size});
+      map.getView().setResolution(viewResolution);
       exportButton.disabled = false;
       document.body.style.cursor = 'auto';
     });
+  });
 
   // Set print size
   const printSize = [width, height];
   map.setSize(printSize);
-  map.getView().fit(extent, {size: printSize});
+  const scaling = Math.min(width / size[0], height / size[1]);
+  map.getView().setResolution(viewResolution / scaling);
 
 }, false);

examples/extent-constrained.html

@@ -0,0 +1,9 @@
+---
+layout: example.html
+title: Constrained Extent
+shortdesc: Example of a view with a constrained extent.
+docs: >
+  This map has a view that is constrained in an extent.  This is done using the `extent` view option. Please note that specifying `constrainOnlyCenter: true` would only apply the extent restriction to the view center.
+tags: "view, extent, constrain, restrict"
+---
+<div id="map" class="map"></div>

examples/extent-constrained.js

@@ -0,0 +1,25 @@
+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.js';
+import ZoomSlider from '../src/ol/control/ZoomSlider.js';
+
+const view = new View({
+  center: [328627.563458, 5921296.662223],
+  zoom: 8,
+  extent: [-572513.341856, 5211017.966314,
+    916327.095083, 6636950.728974]
+});
+
+new Map({
+  layers: [
+    new TileLayer({
+      source: new OSM()
+    })
+  ],
+  keyboardEventTarget: document,
+  target: 'map',
+  view: view,
+  controls: defaultControls().extend([new ZoomSlider()])
+});

examples/extent-interaction.js

@@ -1,6 +1,5 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
-import {platformModifierKeyOnly} from '../src/ol/events/condition.js';
 import GeoJSON from '../src/ol/format/GeoJSON.js';
 import ExtentInteraction from '../src/ol/interaction/Extent.js';
 import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
@@ -27,9 +26,7 @@ const map = new Map({
   })
 });
 
-const extent = new ExtentInteraction({
-  condition: platformModifierKeyOnly
-});
+const extent = new ExtentInteraction();
 map.addInteraction(extent);
 extent.setActive(false);
 

examples/feature-animation.html

@@ -3,7 +3,7 @@ layout: example.html
 title: Custom Animation
 shortdesc: Demonstrates how to animate features.
 docs: >
-  This example shows how to use <b>postcompose</b> and <b>vectorContext</b> to
+  This example shows how to use <b>postrender</b> and <b>vectorContext</b> to
   animate features. Here we choose to do a flash animation each time a feature
   is added to the layer.
 tags: "animation, vector, feature, flash"

examples/feature-animation.js

@@ -2,32 +2,27 @@ import Feature from '../src/ol/Feature.js';
 import Map from '../src/ol/Map.js';
 import {unByKey} from '../src/ol/Observable.js';
 import View from '../src/ol/View.js';
-import {defaults as defaultControls} from '../src/ol/control.js';
 import {easeOut} from '../src/ol/easing.js';
 import Point from '../src/ol/geom/Point.js';
 import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
 import {fromLonLat} from '../src/ol/proj.js';
 import {OSM, Vector as VectorSource} from '../src/ol/source.js';
 import {Circle as CircleStyle, Stroke, Style} from '../src/ol/style.js';
+import {getVectorContext} from '../src/ol/render.js';
 
-
-const map = new Map({
-  layers: [
-    new TileLayer({
+const tileLayer = new TileLayer({
   source: new OSM({
     wrapX: false
   })
-    })
-  ],
-  controls: defaultControls({
-    attributionOptions: {
-      collapsible: false
-    }
-  }),
+});
+
+const map = new Map({
+  layers: [tileLayer],
   target: 'map',
   view: new View({
     center: [0, 0],
-    zoom: 1
+    zoom: 1,
+    multiWorld: true
   })
 });
 
@@ -50,10 +45,10 @@ function addRandomFeature() {
 const duration = 3000;
 function flash(feature) {
   const start = new Date().getTime();
-  const listenerKey = map.on('postcompose', animate);
+  const listenerKey = tileLayer.on('postrender', animate);
 
   function animate(event) {
-    const vectorContext = event.vectorContext;
+    const vectorContext = getVectorContext(event);
     const frameState = event.frameState;
     const flashGeom = feature.getGeometry().clone();
     const elapsed = frameState.time - start;
@@ -78,7 +73,7 @@ function flash(feature) {
       unByKey(listenerKey);
       return;
     }
-    // tell OpenLayers to continue postcompose animation
+    // tell OpenLayers to continue postrender animation
     map.render();
   }
 }

examples/feature-move-animation.html

@@ -3,10 +3,10 @@ layout: example.html
 title: Marker Animation
 shortdesc: Demonstrates how to move a feature along a line.
 docs: >
-  This example shows how to use <b>postcompose</b> and <b>vectorContext</b> to
-  animate a (marker) feature along a line. In this example an encoded polyline
+  This example shows how to use <b>postrender</b> events and a <b>vector context</b> to
+  animate a marker feature along a line. In this example an encoded polyline
   is being used.
-tags: "animation, feature, postcompose, polyline"
+tags: "animation, feature, postrender, polyline"
 cloak:
   - key: As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5
     value: Your Bing Maps Key from http://www.bingmapsportal.com/ here

examples/feature-move-animation.js

@@ -7,6 +7,7 @@ import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
 import BingMaps from '../src/ol/source/BingMaps.js';
 import VectorSource from '../src/ol/source/Vector.js';
 import {Circle as CircleStyle, Fill, Icon, Stroke, Style} from '../src/ol/style.js';
+import {getVectorContext} from '../src/ol/render.js';
 
 // This long string is placed here due to jsFiddle limitations.
 // It is usually loaded with AJAX.
@@ -52,7 +53,7 @@ const polyline = [
   '~@ym@yjA??a@cFd@kBrCgDbAUnAcBhAyAdk@et@??kF}D??OL'
 ].join('');
 
-const route = /** @type {module:ol/geom/LineString~LineString} */ (new Polyline({
+const route = /** @type {import("../src/ol/geom/LineString.js").default} */ (new Polyline({
   factor: 1e6
 }).readGeometry(polyline, {
   dataProjection: 'EPSG:4326',
@@ -66,10 +67,10 @@ const routeFeature = new Feature({
   type: 'route',
   geometry: route
 });
-const geoMarker = new Feature({
+const geoMarker = /** @type Feature<import("../src/ol/geom/Point").default> */(new Feature({
   type: 'geoMarker',
   geometry: new Point(routeCoords[0])
-});
+}));
 const startMarker = new Feature({
   type: 'icon',
   geometry: new Point(routeCoords[0])
@@ -123,7 +124,6 @@ const vectorLayer = new VectorLayer({
 const center = [-5639523.95, -3501274.52];
 const map = new Map({
   target: document.getElementById('map'),
-  loadTilesWhileAnimating: true,
   view: new View({
     center: center,
     zoom: 10,
@@ -133,7 +133,7 @@ const map = new Map({
   layers: [
     new TileLayer({
       source: new BingMaps({
-        imagerySet: 'AerialWithLabels',
+        imagerySet: 'AerialWithLabelsOnDemand',
         key: 'As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5'
       })
     }),
@@ -142,7 +142,7 @@ const map = new Map({
 });
 
 const moveFeature = function(event) {
-  const vectorContext = event.vectorContext;
+  const vectorContext = getVectorContext(event);
   const frameState = event.frameState;
 
   if (animating) {
@@ -160,7 +160,7 @@ const moveFeature = function(event) {
     const feature = new Feature(currentPoint);
     vectorContext.drawFeature(feature, styles.geoMarker);
   }
-  // tell OpenLayers to continue the postcompose animation
+  // tell OpenLayers to continue the postrender animation
   map.render();
 };
 
@@ -176,7 +176,7 @@ function startAnimation() {
     geoMarker.setStyle(null);
     // just in case you pan somewhere else
     map.getView().setCenter(center);
-    map.on('postcompose', moveFeature);
+    vectorLayer.on('postrender', moveFeature);
     map.render();
   }
 }
@@ -191,10 +191,10 @@ function stopAnimation(ended) {
 
   // if animation cancelled set the marker at the beginning
   const coord = ended ? routeCoords[routeLength - 1] : routeCoords[0];
-  /** @type {module:ol/geom/Point~Point} */ (geoMarker.getGeometry())
-    .setCoordinates(coord);
+  const geometry = geoMarker.getGeometry();
+  geometry.setCoordinates(coord);
   //remove listener
-  map.un('postcompose', moveFeature);
+  vectorLayer.un('postrender', moveFeature);
 }
 
 startButton.addEventListener('click', startAnimation, false);

examples/filter-points-webgl.html

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

examples/filter-points-webgl.js

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

examples/flight-animation.html

@@ -1,12 +1,12 @@
 ---
 layout: example.html
 title: Flight Animation
-shortdesc: Demonstrates how to animate flights with ´postcompose´.
+shortdesc: Demonstrates how to animate flights with ´postrender´.
 docs: >
-  This example shows how to use <b>postcompose</b> and <b>vectorContext</b> to
+  This example shows how to use <b>postrender</b> and <b>vectorContext</b> to
   animate flights. A great circle arc between two airports is calculated using
   <a href="https://github.com/springmeyer/arc.js">arc.js</a> and then the flight
-  paths are animated with <b>postcompose</b>. The flight data is provided by
+  paths are animated with <b>postrender</b>. The flight data is provided by
   <a href="http://openflights.org/data.html">OpenFlights</a> (a simplified data
   set from the <a href="https://www.mapbox.com/mapbox.js/example/v1.0.0/animating-flight-paths/">
   Mapbox.js documentation</a> is used).

examples/flight-animation.js

@@ -6,14 +6,17 @@ import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
 import Stamen from '../src/ol/source/Stamen.js';
 import VectorSource from '../src/ol/source/Vector.js';
 import {Stroke, Style} from '../src/ol/style.js';
+import {getVectorContext} from '../src/ol/render.js';
 
-const map = new Map({
-  layers: [
-    new TileLayer({
+const tileLayer = new TileLayer({
   source: new Stamen({
     layer: 'toner'
   })
-    })
+});
+
+const map = new Map({
+  layers: [
+    tileLayer
   ],
   target: 'map',
   view: new View({
@@ -63,7 +66,7 @@ const flightsSource = new VectorSource({
           addLater(feature, i * 50);
         }
       }
-      map.on('postcompose', animateFlights);
+      tileLayer.on('postrender', animateFlights);
     });
   }
 });
@@ -85,7 +88,7 @@ map.addLayer(flightsLayer);
 
 const pointsPerMs = 0.1;
 function animateFlights(event) {
-  const vectorContext = event.vectorContext;
+  const vectorContext = getVectorContext(event);
   const frameState = event.frameState;
   vectorContext.setStyle(style);
 

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

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

examples/full-screen-source.css

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

examples/full-screen.css

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

examples/geojson-vt.js

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

examples/geojson.js

@@ -1,7 +1,6 @@
 import Feature from '../src/ol/Feature.js';
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
-import {defaults as defaultControls} from '../src/ol/control.js';
 import GeoJSON from '../src/ol/format/GeoJSON.js';
 import Circle from '../src/ol/geom/Circle.js';
 import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
@@ -174,11 +173,6 @@ const map = new Map({
     vectorLayer
   ],
   target: 'map',
-  controls: defaultControls({
-    attributionOptions: {
-      collapsible: false
-    }
-  }),
   view: new View({
     center: [0, 0],
     zoom: 2

examples/geolocation-orientation.js

@@ -2,7 +2,6 @@ import Geolocation from '../src/ol/Geolocation.js';
 import Map from '../src/ol/Map.js';
 import Overlay from '../src/ol/Overlay.js';
 import View from '../src/ol/View.js';
-import {defaults as defaultControls} from '../src/ol/control.js';
 import LineString from '../src/ol/geom/LineString.js';
 import TileLayer from '../src/ol/layer/Tile.js';
 import {fromLonLat} from '../src/ol/proj.js';
@@ -14,19 +13,14 @@ const view = new View({
   zoom: 19
 });
 
+const tileLayer = new TileLayer({
+  source: new OSM()
+});
+
 // creating the map
 const map = new Map({
-  layers: [
-    new TileLayer({
-      source: new OSM()
-    })
-  ],
+  layers: [tileLayer],
   target: 'map',
-  controls: defaultControls({
-    attributionOptions: {
-      collapsible: false
-    }
-  }),
   view: view
 });
 
@@ -42,7 +36,7 @@ map.addOverlay(marker);
 // LineString to store the different geolocation positions. This LineString
 // is time aware.
 // The Z dimension is actually used to store the rotation (heading).
-const positions = new LineString([], /** @type {module:ol/geom/GeometryLayout} */ ('XYZM'));
+const positions = new LineString([], 'XYZM');
 
 // Geolocation Control
 const geolocation = new Geolocation({
@@ -161,7 +155,7 @@ const geolocateBtn = document.getElementById('geolocate');
 geolocateBtn.addEventListener('click', function() {
   geolocation.setTracking(true); // Start position tracking
 
-  map.on('postcompose', updateView);
+  tileLayer.on('postrender', updateView);
   map.render();
 
   disableButtons();
@@ -203,7 +197,7 @@ simulateBtn.addEventListener('click', function() {
   }
   geolocate();
 
-  map.on('postcompose', updateView);
+  tileLayer.on('postrender', updateView);
   map.render();
 
   disableButtons();

examples/geolocation.js

@@ -2,7 +2,6 @@ import Feature from '../src/ol/Feature.js';
 import Geolocation from '../src/ol/Geolocation.js';
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
-import {defaults as defaultControls} from '../src/ol/control.js';
 import Point from '../src/ol/geom/Point.js';
 import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
 import {OSM, Vector as VectorSource} from '../src/ol/source.js';
@@ -20,11 +19,6 @@ const map = new Map({
     })
   ],
   target: 'map',
-  controls: defaultControls({
-    attributionOptions: {
-      collapsible: false
-    }
-  }),
   view: view
 });
 

examples/getfeatureinfo-image.js

@@ -33,8 +33,11 @@ map.on('singleclick', function(evt) {
     evt.coordinate, viewResolution, 'EPSG:3857',
     {'INFO_FORMAT': 'text/html'});
   if (url) {
-    document.getElementById('info').innerHTML =
-        '<iframe seamless src="' + url + '"></iframe>';
+    fetch(url)
+      .then((response) => response.text())
+      .then((html) => {
+        document.getElementById('info').innerHTML = html;
+      });
   }
 });
 

examples/getfeatureinfo-tile.js

@@ -33,8 +33,11 @@ map.on('singleclick', function(evt) {
     evt.coordinate, viewResolution, 'EPSG:3857',
     {'INFO_FORMAT': 'text/html'});
   if (url) {
-    document.getElementById('info').innerHTML =
-        '<iframe seamless src="' + url + '"></iframe>';
+    fetch(url)
+      .then((response) => response.text())
+      .then((html) => {
+        document.getElementById('info').innerHTML = html;
+      });
   }
 });
 

examples/graticule.html

@@ -1,9 +1,9 @@
 ---
 layout: example.html
 title: Map Graticule
-shortdesc: This example shows how to add a graticule overlay to a map.
+shortdesc: This example shows how to add a graticule layer to a map.
 docs: >
-  This example shows how to add a graticule overlay to a map.
+  This example shows how to add a graticule layer to a map.
 tags: "graticule"
 ---
 <div id="map" class="map"></div>