Version and beta tag for v6.0.0-beta.1

Sources in npm package for TypeScript support

.circleci/config.yml

@@ -0,0 +1,40 @@
+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: rendering/cases/
+          destination: rendering
+
+      - run:
+          name: Build Examples
+          command: npm run build-examples
+
+      - store_artifacts:
+          path: build/examples
+          destination: examples

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

.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.
 
@@ -30,7 +30,7 @@ To run the examples you first need to start the dev server:
 
     $ npm run serve-examples
 
-Then, load <http://localhost:5000/> in your browser.
+Then, load <http://localhost:8080/> in your browser.
 
 ## Running tests
 

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

@@ -39,6 +39,29 @@ See the following examples for more detail on bundling OpenLayers with your appl
  * Using [Rollup](https://github.com/openlayers/ol-rollup)
  * Using [Webpack](https://github.com/openlayers/ol-webpack)
  * Using [Parcel](https://github.com/openlayers/ol-parcel)
+ * Using [Browserify](https://github.com/openlayers/ol-browserify)
+
+## TypeScript and VS Code IntelliSense support
+
+The `ol` package contains a `src/` folder with JSDoc annotated sources. TypeScript can get type definitions from these sources with a `tsconfig.json` like this:
+```js
+{
+  "compilerOptions": {
+    // Enable JavaScript support
+    "allowJs": 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": [
+    // Include JavaScript files from the ol package
+    "node_modules/ol/**/*.js"
+  ]
+}
+```
 
 ## Supported Browsers
 
@@ -61,4 +84,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

@@ -1,10 +1,156 @@
 ## Upgrade notes
 
+### Next version
+
+#### Backwards incompatible changes
+
+##### Removal of the deprecated "inherits" function
+
+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.
+
+##### 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.
+
+##### 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.
+
+##### 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.
+
+#### Other changes
+
+##### 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
+
+The `snapToPixel` option has been removed, and the `getSnapToPixel` and `setSnapToPixel` methods are deprecated.
+
+The renderer now snaps to integer pixels when no interaction or animation is running to get crisp rendering. During interaction or animation, it does not snap to integer pixels to avoid jitter.
+
+When rendering with the Immediate API, symbols will no longer be snapped to integer pixels. To get crisp images, set `context.imageSmoothingEnabled = false` before rendering with the Immediate API, and `context.imageSmoothingEnabled = true` afterwards.
+
 ### v5.1.0
 
 #### 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.1.1.md

@@ -1,3 +1,3 @@
 # 5.1.1
 
-The 5.1.1 release is a patch to include the readme in the package.  See the [5.1.0 notes](https://github.com/openlayers/openlayers/releases/tag/v5.0.3) for detail on the 5.1 release.
+The 5.1.1 release is a patch to include the readme in the package.  See the [5.1.0 notes](https://github.com/openlayers/openlayers/releases/tag/v5.1.0) for detail on the 5.1 release.

changelog/v5.1.2.md

@@ -0,0 +1,5 @@
+# 5.1.2
+
+The 5.1.2 release is a patch to fix the API docs.  See the [5.1.0 notes](https://github.com/openlayers/openlayers/releases/tag/v5.1.0) for detail on the 5.1 release.
+
+ * [#8413](https://github.com/openlayers/openlayers/pull/8413) - Remove extra curly in type ([@tschaub](https://github.com/tschaub))

changelog/v5.1.3.md

@@ -0,0 +1,6 @@
+# 5.1.3
+
+The 5.1.3 release is a patch to fix the API docs and the legacy full build.  See the [5.1.0 notes](https://github.com/openlayers/openlayers/releases/tag/v5.1.0) for detail on the 5.1 release.
+
+ * [#8417](https://github.com/openlayers/openlayers/pull/8417) - Minor doc updates ([@tschaub](https://github.com/tschaub))
+ * [#8418](https://github.com/openlayers/openlayers/pull/8418) - Set api annotation on classdesc, not constructor ([@ahocevar](https://github.com/ahocevar))

changelog/v5.2.0.md

@@ -0,0 +1,86 @@
+# 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.
+
+We're still working toward type checking with TypeScript.  Until that is complete, we apologize for some flwas in the online API documentation.  We're excited about the improved experience for application developers when the effort is finished, and will highlight some of the benefit in upcoming releases.
+
+### Upgrade Notes
+
+#### Removal of the `snapToPixel` option for `ol/style/Image` subclasses
+
+The `snapToPixel` option has been removed, and the `getSnapToPixel` and `setSnapToPixel` methods are deprecated.
+
+The renderer now snaps to integer pixels when no interaction or animation is running to get crisp rendering. During interaction or animation, it does not snap to integer pixels to avoid jitter.
+
+When rendering with the Immediate API, symbols will no longer be snapped to integer pixels. To get crisp images, set `context.imageSmoothingEnabled = false` before rendering with the Immediate API, and `context.imageSmoothingEnabled = true` afterwards.
+
+### New Features and Fixes
+
+ * [#8511](https://github.com/openlayers/openlayers/pull/8511) - Update IGN API key ([@openlayers](https://github.com/openlayers))
+ * [#8547](https://github.com/openlayers/openlayers/pull/8547) - Fix port number in developing doc ([@pgiraud](https://github.com/pgiraud))
+ * [#8546](https://github.com/openlayers/openlayers/pull/8546) - Update projection FAQ for v5 ([@ahocevar](https://github.com/ahocevar))
+ * [#8481](https://github.com/openlayers/openlayers/pull/8481) - Expose some internal functions ([@gberaudo](https://github.com/gberaudo))
+ * [#8510](https://github.com/openlayers/openlayers/pull/8510) - Fix WMTS URLs with dimensions ([@gberaudo](https://github.com/gberaudo))
+ * [#8524](https://github.com/openlayers/openlayers/pull/8524) - Fix compatiblity with XHTML content type ([@NeoRaider](https://github.com/NeoRaider))
+ * [#8532](https://github.com/openlayers/openlayers/pull/8532) - Add 'rendercomplete' event ([@ahocevar](https://github.com/ahocevar))
+ * [#8529](https://github.com/openlayers/openlayers/pull/8529) - Update link to base class in docs ([@TDesjardins](https://github.com/TDesjardins))
+ * [#8528](https://github.com/openlayers/openlayers/pull/8528) - Update link to base class in docs ([@TDesjardins](https://github.com/TDesjardins))
+ * [#8525](https://github.com/openlayers/openlayers/pull/8525) - Re-export Projection from ol/proj for convenience ([@tschaub](https://github.com/tschaub))
+ * [#8499](https://github.com/openlayers/openlayers/pull/8499) - Round center in viewState to pixels ([@ahocevar](https://github.com/ahocevar))
+ * [#8520](https://github.com/openlayers/openlayers/pull/8520) - Remove redundant if block ([@openlayers](https://github.com/openlayers))
+ * [#8515](https://github.com/openlayers/openlayers/pull/8515) - More convenient select and sketch layer management ([@ahocevar](https://github.com/ahocevar))
+ * [#8503](https://github.com/openlayers/openlayers/pull/8503) - Avoid block scope issues in transpiled code ([@ahocevar](https://github.com/ahocevar))
+ * [#8490](https://github.com/openlayers/openlayers/pull/8490) - WMTS getCapabilities readCoodinates more than one whitespace delimiter ([@MarquesDeAzevedo](https://github.com/MarquesDeAzevedo))
+ * [#8489](https://github.com/openlayers/openlayers/pull/8489) - Use .prototype. only where necessary ([@ahocevar](https://github.com/ahocevar))
+ * [#8478](https://github.com/openlayers/openlayers/pull/8478) - Check font availability with multiple font weights ([@ahocevar](https://github.com/ahocevar))
+ * [#8483](https://github.com/openlayers/openlayers/pull/8483) - Don't create Polygon with null coordinates ([@fredj](https://github.com/fredj))
+ * [#8471](https://github.com/openlayers/openlayers/pull/8471) - Add getUrl and getImageExtent to ImageStatic API ([@samuel-girard](https://github.com/samuel-girard))
+ * [#8470](https://github.com/openlayers/openlayers/pull/8470) - Update Tile loading API docs ([@scroach](https://github.com/scroach))
+ * [#8477](https://github.com/openlayers/openlayers/pull/8477) - Expose original getGutter ([@gberaudo](https://github.com/gberaudo))
+ * [#8466](https://github.com/openlayers/openlayers/pull/8466) - Add onFocusOnly option to interaction defaults ([@ahocevar](https://github.com/ahocevar))
+ * [#8465](https://github.com/openlayers/openlayers/pull/8465) - Do not prevent default on pointermove ([@ahocevar](https://github.com/ahocevar))
+ * [#8461](https://github.com/openlayers/openlayers/pull/8461) - Fix double backtick typo ([@lionralfs](https://github.com/lionralfs))
+ * [#8452](https://github.com/openlayers/openlayers/pull/8452) - Remove extra translate function in Geometry, add missing api tag ([@fredj](https://github.com/fredj))
+ * [#8451](https://github.com/openlayers/openlayers/pull/8451) - Remove unimplemented functions ([@fredj](https://github.com/fredj))
+ * [#8450](https://github.com/openlayers/openlayers/pull/8450) - Mark properties of ReadOptions and WriteOptions as optional ([@fredj](https://github.com/fredj))
+ * [#8443](https://github.com/openlayers/openlayers/pull/8443) - Explicit void ([@tschaub](https://github.com/tschaub))
+ * [#8437](https://github.com/openlayers/openlayers/pull/8437) - Avoid shadowing EventTarget ([@tschaub](https://github.com/tschaub))
+ * [#8439](https://github.com/openlayers/openlayers/pull/8439) - Fewer dots in types ([@tschaub](https://github.com/tschaub))
+ * [#8441](https://github.com/openlayers/openlayers/pull/8441) - Fix loaded script for the example-verbatim examples ([@fredj](https://github.com/fredj))
+ * [#8435](https://github.com/openlayers/openlayers/pull/8435) - Call setCoordinates on the point instance ([@fredj](https://github.com/fredj))
+ * [#8428](https://github.com/openlayers/openlayers/pull/8428) - Type name on same line as type ([@tschaub](https://github.com/tschaub))
+ * [#8422](https://github.com/openlayers/openlayers/pull/8422) - Improve JSDoc such that `ng build --prod` with angular/cli 6.0.8 succeeds again ([@jkoelewijn](https://github.com/jkoelewijn))
+ * [#8396](https://github.com/openlayers/openlayers/pull/8396) - Fix ol.interaction.Draw~createRegularPolygon ([@iamplex](https://github.com/iamplex))
+ * [#8420](https://github.com/openlayers/openlayers/pull/8420) - Keep function names when building examples ([@ahocevar](https://github.com/ahocevar))
+ * [#8419](https://github.com/openlayers/openlayers/pull/8419) - Release v5.1.3 ([@tschaub](https://github.com/tschaub))
+ * [#8417](https://github.com/openlayers/openlayers/pull/8417) - Minor doc updates ([@tschaub](https://github.com/tschaub))
+ * [#8418](https://github.com/openlayers/openlayers/pull/8418) - Set api annotation on classdesc, not constructor ([@ahocevar](https://github.com/ahocevar))
+ * [#8414](https://github.com/openlayers/openlayers/pull/8414) - Updates for 5.1.2 ([@tschaub](https://github.com/tschaub))
+ * [#8413](https://github.com/openlayers/openlayers/pull/8413) - Remove extra curly in type ([@tschaub](https://github.com/tschaub))
+ * [#8412](https://github.com/openlayers/openlayers/pull/8412) - Changes for 5.1.1. ([@tschaub](https://github.com/tschaub))
+
+
+<details>
+  <summary>Dependency Updates</summary>
+
+ * [#8543](https://github.com/openlayers/openlayers/pull/8543) - Update rollup to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#8541](https://github.com/openlayers/openlayers/pull/8541) - Update proj4 to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#8542](https://github.com/openlayers/openlayers/pull/8542) - Update rollup-plugin-commonjs to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#8533](https://github.com/openlayers/openlayers/pull/8533) - Update webpack to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#8530](https://github.com/openlayers/openlayers/pull/8530) - Update webpack to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#8522](https://github.com/openlayers/openlayers/pull/8522) - Update marked to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#8505](https://github.com/openlayers/openlayers/pull/8505) - Update karma to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#8501](https://github.com/openlayers/openlayers/pull/8501) - Update rollup-plugin-commonjs to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#8495](https://github.com/openlayers/openlayers/pull/8495) - Update rollup to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#8493](https://github.com/openlayers/openlayers/pull/8493) - Update clean-css-cli to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#8491](https://github.com/openlayers/openlayers/pull/8491) - Update rollup to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#8486](https://github.com/openlayers/openlayers/pull/8486) - Update webpack to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#8476](https://github.com/openlayers/openlayers/pull/8476) - Update webpack to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#8475](https://github.com/openlayers/openlayers/pull/8475) - Update clean-css-cli to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#8469](https://github.com/openlayers/openlayers/pull/8469) - Update rollup to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#8453](https://github.com/openlayers/openlayers/pull/8453) - Update webpack to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#8447](https://github.com/openlayers/openlayers/pull/8447) - Update rollup-plugin-commonjs to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#8426](https://github.com/openlayers/openlayers/pull/8426) - Update webpack to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+
+
+</details>

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/markdown",
-    "config/jsdoc/api/plugins/normalize-exports",
+    "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": {
+  "typescript": {
-    "parser": "gfm"
+    "moduleRoot": "src"
   },
   "templates": {
     "cleverLinks": true,

config/jsdoc/api/index.md

@@ -8,10 +8,10 @@
 <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>
+[ol/layer/Tile](module-ol_layer_Tile-TileLayer.html)<br>
-[layer/Image](module-ol_layer_Image-ImageLayer.html)<br>
+[ol/layer/Image](module-ol_layer_Image-ImageLayer.html)<br>
-[layer/Vector](module-ol_layer_Vector-VectorLayer.html)<br>
+[ol/layer/Vector](module-ol_layer_Vector-VectorLayer.html)<br>
-[layer/VectorTile](module-ol_layer_VectorTile-VectorTileLayer.html)</td>
+[ol/layer/VectorTile](module-ol_layer_VectorTile-VectorTileLayer.html)</td>
 </tr><tr>
 <th>Controls</th><th>Interactions</th><th>Sources and formats</th>
 </tr><tr>
@@ -21,20 +21,20 @@
 <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>
+<ul><li>[ol/interaction/Select](module-ol_interaction_Select-Select.html)</li>
-<li>[interaction/Draw](module-ol_interaction_Draw-Draw.html)</li>
+<li>[ol/interaction/Draw](module-ol_interaction_Draw-Draw.html)</li>
-<li>[interaction/Modify](module-ol_interaction_Modify-Modify.html)</li></ul>
+<li>[ol/interaction/Modify](module-ol_interaction_Modify-Modify.html)</li></ul>
 [All interactions](module-ol_interaction_Interaction-Interaction.html)</td>
-<td>[Tile sources](module-ol_source_Tile-TileSource.html) for [layer/Tile](module-ol_layer_Tile-TileLayer.html)
+<td>[Tile sources](module-ol_source_Tile-TileSource.html) for [ol/layer/Tile](module-ol_layer_Tile-TileLayer.html)
-<br>[Image sources](module-ol_source_Image-ImageSource.html) for [layer/Image](module-ol_layer_Image-ImageLayer.html)
+<br>[Image sources](module-ol_source_Image-ImageSource.html) for [ol/layer/Image](module-ol_layer_Image-ImageLayer.html)
-<br>[Vector sources](module-ol_source_Vector-VectorSource.html) for [layer/Vector](module-ol_layer_Vector-VectorLayer.html)
+<br>[Vector sources](module-ol_source_Vector-VectorSource.html) for [ol/layer/Vector](module-ol_layer_Vector-VectorLayer.html)
-<br>[Vector tile sources](module-ol_source_VectorTile-VectorTile.html) for [layer/VectorTile](module-ol_layer_VectorTile-VectorTileLayer.html)
+<br>[Vector tile sources](module-ol_source_VectorTile-VectorTile.html) for [ol/layer/VectorTile](module-ol_layer_VectorTile-VectorTileLayer.html)
 <br>[Formats](module-ol_format_Feature-FeatureFormat.html) for reading/writing vector data
-<br>[format/WMSCapabilities](module-ol_format_WMSCapabilities-WMSCapabilities.html)</td></tr>
+<br>[ol/format/WMSCapabilities](module-ol_format_WMSCapabilities-WMSCapabilities.html)</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>
+<tr><td><p>All coordinates and extents need to be provided in view projection (default: EPSG:3857). To transform, use [ol/proj#transform()](module-ol_proj.html#.transform) and [ol/proj#transformExtent()](module-ol_proj.html#.transformExtent).</p>
 [ol/proj](module-ol_proj.html)</td>
-<td><p>Changes to all [ol/Object](module-ol_Object-BaseObject.html)s can be observed by calling the [object.on('propertychange')](module-ol_Object-BaseObject.html#on) method.  Listeners receive an [ol/Object~ObjectEvent](module-ol_Object-ObjectEvent.html) with information on the changed property and old value.</p>
+<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>
 <td>
 [ol/Geolocation](module-ol_Geolocation.html)<br>
 [ol/Overlay](module-ol_Overlay-Overlay.html)<br></td>

config/jsdoc/api/plugins/api.js

@@ -95,17 +95,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;
-      classes[doclet.longname] = doclet;
+      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 +116,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);
         }

config/jsdoc/api/plugins/events.js

@@ -12,7 +12,7 @@ exports.handlers = {
         events[cls] = [];
       }
       events[cls].push(doclet.longname);
-    } else if (doclet.kind == 'class') {
+    } else if (doclet.kind == 'class' && !(doclet.longname in classes)) {
       classes[doclet.longname] = doclet;
     }
   },
@@ -29,7 +29,7 @@ exports.handlers = {
             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 +40,3 @@ exports.handlers = {
   }
 
 };
-

config/jsdoc/api/plugins/inheritdoc.js

@@ -0,0 +1,109 @@
+/*
+ * This is a hack to prevent inheritDoc tags from entirely removing
+ * documentation of the method that inherits the documentation.
+ *
+ * TODO: Remove this hack when https://github.com/jsdoc3/jsdoc/issues/53
+ * is addressed.
+ */
+
+
+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];
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+};

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

@@ -168,9 +168,9 @@ function generateSourceFiles(sourceFiles) {
  * for display purposes. This function mutates the original arrays.
  *
  * @private
- * @param {Array.<module:jsdoc/doclet.Doclet>} doclets - The array of classes and functions to
+ * @param {Array<module:jsdoc/doclet.Doclet>} doclets - The array of classes and functions to
  * check.
- * @param {Array.<module:jsdoc/doclet.Doclet>} modules - The array of module doclets to search.
+ * @param {Array<module:jsdoc/doclet.Doclet>} modules - The array of module doclets to search.
  */
 function attachModuleSymbols(doclets, modules) {
   const symbols = {};

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

@@ -30,7 +30,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 +101,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/layout.tmpl

@@ -4,6 +4,63 @@ 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', { '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>
     <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=fetch"></script>

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>
@@ -28,9 +28,9 @@ if (data.type && data.type.names) {
         <?js= data.description ?>
     </div>
     <?js } ?>
-    
+
     <?js= this.partial('details.tmpl', data) ?>
-    
+
     <?js if (data.examples && examples.length) { ?>
         <h5>Example<?js= examples.length > 1? 's':'' ?></h5>
         <?js= this.partial('examples.tmpl', examples) ?>

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

@@ -77,7 +77,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">
@@ -25,7 +28,7 @@ var self = this;
             <?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 +43,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 +60,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 +77,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
 

doc/faq.md

@@ -5,7 +5,7 @@ layout: doc.hbs
 
 # Frequently Asked Questions (FAQ)
 
-Certain questions arise more often than others when users ask for help. This 
+Certain questions arise more often than others when users ask for help. This
 document tries to list some of the common questions that frequently get asked,
 e.g. on [Stack Overflow](http://stackoverflow.com/questions/tagged/openlayers).
 
@@ -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({
+const map = new Map({
-  view: new ol.View({
+  view: new View({
     projection: 'EPSG:4326'
     // other view properties like map center etc.
   })
@@ -65,24 +68,29 @@ var map = new ol.Map({
 ```
 
 ```javascript
-// To use other projections, you have to register the projection in OpenLayers:
+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.
-var swissProjection = new ol.proj.Projection({
+proj4.defs('EPSG:21781',
-  code: 'EPSG:21781',
+  '+proj=somerc +lat_0=46.95240555555556 +lon_0=7.439583333333333 +k_0=1 ' +
-  // The extent is used to determine zoom level 0. Recommended values for a
+  '+x_0=600000 +y_0=200000 +ellps=bessel ' +
-  // projection's validity extent can be found at https://epsg.io/.
+  '+towgs84=660.077,13.551,369.344,2.484,1.783,2.939,5.66 +units=m +no_defs');
-  extent: [485869.5728, 76443.1884, 837076.5648, 299941.7864],
+register(proj4);
-  units: 'm'
+const swissProjection = getProjection('EPSG:21781');
-});
-ol.proj.addProjection(swissProjection);
 
 // we can now use the projection:
-var map = new ol.Map({
+const map = new Map({
-  view: new ol.View({
+  view: new View({
     projection: swissProjection
     // other view properties like map center etc.
   })
@@ -105,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];
+import Map from 'ol/Map';
-var map = new 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({
+    new TileLayer({
-      source: new ol.source.OSM()
+      source: new OSM()
     })
   ],
   target: 'map',
-  view: new ol.View({
+  view: new View({
     center: washingtonLonLat,
     zoom: 12
   })
@@ -129,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];
+import Map from 'ol/Map';
-var washingtonWebMercator = ol.proj.fromLonLat(washingtonLonLat);
+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({
+    new TileLayer({
-      source: new ol.source.OSM()
+      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');
 ```
 
 
@@ -190,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...
+import Map from 'ol/Map';
-// since we are using OSM, we have to transform the coordinates...
+import View from 'ol/View';
-var schladmingWebMercator = ol.proj.fromLonLat(schladming);
+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({
+    new TileLayer({
-      source: new ol.source.OSM()
+      source: new OSM()
     })
   ],
   target: 'map',
-  view: new ol.View({
+  view: new View({
     center: schladmingWebMercator,
     zoom: 9
   })
@@ -220,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
+import Map from 'ol/Map';
-// since we are using OSM, we have to transform the coordinates...
+import View from 'ol/View';
-var schladmingWebMercator = ol.proj.fromLonLat(schladming);
+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({
+    new TileLayer({
-      source: new ol.source.OSM()
+      source: new OSM()
     })
   ],
   target: 'map',
-  view: new ol.View({
+  view: new View({
     center: schladmingWebMercator,
     zoom: 9
   })
@@ -245,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.
 
 
@@ -255,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({
+import VectorLayer from 'ol/layer/Vector';
-  source: new ol.source.KML({
+import KMLSource from 'ol/source/KML';
+
+const vector = new VectorLayer({
+  source: new KMLSource({
     projection: 'EPSG:3857',
     url: 'data/kml/2012-02-10.kml'
   })
@@ -267,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({
+import VectorLayer from 'ol/layer/Vector';
-  source: new ol.source.KML({
+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);
 ```
 
@@ -285,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);
   }
 });
@@ -316,16 +354,17 @@ 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
+In this case, set the `renderBuffer` property of `VectorLayer` (the default value is 100px):
-value is 100px):
 
 ```javascript
-var vectorLayer = new ol.layer.Vector({
+import VectorLayer from 'ol/layer/Vector';
+
+const vectorLayer = new VectorLayer({
   ...
   renderBuffer: 200
 });

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.
@@ -130,7 +130,7 @@ The `layers: [ ... ]` array is used to define the list of layers available in th
     ]
 ```
 
-Layers in OpenLayers are defined with a type (Image, Tile or Vector) which contains a source. The source is the protocol used to get the map tiles. You can consult the list of [available layer sources here](/en/{{ latest }}/apidoc/ol.source.html)
+Layers in OpenLayers are defined with a type (Image, Tile or Vector) which contains a source. The source is the protocol used to get the map tiles.
 
 The next part of the `Map` object is the `View`. The view allows to specify the center, resolution, and rotation of the map. The simplest way to define a view is to define a center point and a zoom level.  Note that zoom level 0 is zoomed out.
 

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
 
@@ -45,7 +47,7 @@ const map = new Map({
 });
 ```
 
-You will also need an `ìndex.html` file that will use your bundle. Here is a simple example:
+You will also need an `index.html` file that will use your bundle. Here is a simple example:
 
 ```html
 <!DOCTYPE html>
@@ -69,13 +71,21 @@ You will also need an `ìndex.html` file that will use your bundle. Here is a si
 
 ## 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
-"scripts": {
+{
-  "test": "echo \"Error: no test specified\" && exit 1",
+  "name": "test",
-  "start": "parcel index.html",
+  "version": "1.0.0",
-  "build": "parcel build --public-url . index.html"
+  "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

@@ -6,27 +6,34 @@ layout: doc.hbs
 # Basic Concepts
 
 ## Map
-The core component of OpenLayers is the map (`Map`). It is rendered to a `target` container (e.g. a `div` element on the web page that contains the map). All map properties can either be configured at construction time, or by using setter methods, e.g. `setTarget()`.
+
+The core component of OpenLayers is the map (`ol/Map`). It is rendered to a `target` container (e.g. a `div` element on the web page that contains the map). All map properties can either be configured at construction time, or by using setter methods, e.g. `setTarget()`.
+
+The markup below could be used to create a `<div>` that contains your map.
 
 ```xml
 <div id="map" style="width: 100%, height: 400px"></div>
-<script>
+```
-  import Map from 'ol/Map';
 
-  var map = new Map({target: 'map'});
+The script below constructs a map that is rendered in the `<div>` above, using the `map` id of the element as a selector.
-</script>
+
+```js
+import Map from 'ol/Map';
+
+var map = new Map({target: 'map'});
 ```
 
 ## View
-`Map` is not responsible for things like center, zoom level and projection of the map. Instead, these are properties of a `View` instance.
+
+The map is not responsible for things like center, zoom level and projection of the map. Instead, these are properties of a `ol/View` instance.
 
 ```js
-  import View from 'ol/View';
+import View from 'ol/View';
 
-  map.setView(new View({
+map.setView(new View({
-    center: [0, 0],
+  center: [0, 0],
-    zoom: 2
+  zoom: 2
-  }));
+}));
 ```
 
 A `View` also has a `projection`. The projection determines the coordinate system of the `center` and the units for map resolution calculations. If not specified (like in the above snippet), the default projection is Spherical Mercator (EPSG:3857), with meters as map units.
@@ -35,54 +42,49 @@ The `zoom` option is a convenient way to specify the map resolution. The availab
 
 
 ## Source
-To get remote data for a layer, OpenLayers uses `source/Source` subclasses. These are available for free and commercial map tile services like OpenStreetMap or Bing, for OGC sources like WMS or WMTS, and for vector data in formats like GeoJSON or KML.
+
+To get remote data for a layer, OpenLayers uses `ol/source/Source` subclasses. These are available for free and commercial map tile services like OpenStreetMap or Bing, for OGC sources like WMS or WMTS, and for vector data in formats like GeoJSON or KML.
 
 ```js
-  import OSM from 'ol/source/OSM';
+import OSM from 'ol/source/OSM';
 
-  var osmSource = OSM();
+var osmSource = OSM();
 ```
 
 ## Layer
-A layer is a visual representation of data from a `source`. OpenLayers has four basic types of layers: `layer/Tile`, `layer/Image`, `layer/Vector` and `layer/VectorTile`.
 
-`layer/Tile` is for layer sources that provide pre-rendered, tiled images in grids that are organized by zoom levels for specific resolutions.
+A layer is a visual representation of data from a `source`. OpenLayers has four basic types of layers:
 
-`layer/Image` is for server rendered images that are available for arbitrary extents and resolutions.
+ * `ol/layer/Tile` - Renders sources that provide tiled images in grids that are organized by zoom levels for specific resolutions.
-
+ * `ol/layer/Image` - Renders sources that provide map images at arbitrary extents and resolutions.
-`layer/Vector` is for vector data that is rendered client-side.
+ * `ol/layer/Vector` - Renders vector data client-side.
-
+ * `ol/layer/VectorTile` - Renders data that is provided as vector tiles.
-`layer/VectorTile` is for tiled vector data that is rendered client-side.
 
 ```js
-  import TileLayer from 'ol/layer/Tile';
+import TileLayer from 'ol/layer/Tile';
 
-  var osmLayer = new TileLayer({source: osmSource});
+var osmLayer = new TileLayer({source: osmSource});
-  map.addLayer(osmLayer);
+map.addLayer(osmLayer);
 ```
 
 ## Putting it all together
 
+The above snippets can be combined into a single script that renders a map with a single tile layer:
 
-The above snippets can be conflated to a self contained map configuration with view and layers:
+```js
+import Map from 'ol/Map';
+import View from 'ol/View';
+import OSM from 'ol/source/OSM';
+import TileLayer from 'ol/source/Tile';
 
-```xml
+new Map({
-<div id="map" style="width: 100%, height: 400px"></div>
+  layers: [
-<script>
+    new TileLayer({source: new OSM()})
-  import Map from 'ol/Map';
+  ],
-  import View from 'ol/View';
+  view: new View({
-  import OSM from 'ol/source/OSM';
+    center: [0, 0],
-  import TileLayer from 'ol/source/Tile';
+    zoom: 2
-
+  }),
-  new Map({
+  target: 'map'
-    layers: [
+});
-      new TileLayer({source: new ol.source.OSM()})
-    ],
-    view: new View({
-      center: [0, 0],
-      zoom: 2
-    }),
-    target: 'map'
-  });
-</script>
 ```

doc/tutorials/raster-reprojection.md

@@ -12,9 +12,9 @@ The view in any Proj4js supported coordinate reference system is possible and pr
 # Usage
 The API usage is very simple. Just specify proper projection (e.g. using [EPSG](https://epsg.io) code) on `ol/View`:
 ```js
-import {Map, View} from `ol`;
+import {Map, View} from 'ol';
-import TileLayer from `ol/layer/Tile`;
+import TileLayer from 'ol/layer/Tile';
-import TileWMS from `ol/source/TileWMS`;
+import TileWMS from 'ol/source/TileWMS';
 
 var map = new Map({
   target: 'map',

examples/.eslintrc

@@ -5,10 +5,12 @@
     "common": false,
     "createMapboxStreetsV6Style": false,
     "d3": false,
+    "domtoimage": false,
     "geojsonvt": false,
     "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.js

@@ -29,9 +29,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.
+ * @param {import("../src/ol/Feature.js").default} feature The feature to style.
- * @return {module:ol/style/Style} The style to use for the feature.
+ * @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
+  displayed tile coordinates are the XYZ tile coordinates.
-  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`.
 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({
+      source: new TileDebug()
-        projection: 'EPSG:3857',
-        tileGrid: osmSource.getTileGrid()
-      })
     })
   ],
   target: 'map',
-  controls: defaultControls({
-    attributionOptions: {
-      collapsible: false
-    }
-  }),
   view: new View({
-    center: fromLonLat([-0.1275, 51.507222]),
+    center: [0, 0],
-    zoom: 10
+    zoom: 1
   })
 });

examples/center.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 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';
@@ -45,18 +44,13 @@ const map = new Map({
     vectorLayer
   ],
   target: 'map',
-  controls: defaultControls({
-    attributionOptions: {
-      collapsible: false
-    }
-  }),
   view: view
 });
 
 const zoomtoswitzerlandbest = document.getElementById('zoomtoswitzerlandbest');
 zoomtoswitzerlandbest.addEventListener('click', function() {
   const feature = source.getFeatures()[0];
-  const polygon = /** @type {module:ol/geom/SimpleGeometry~SimpleGeometry} */ (feature.getGeometry());
+  const polygon = /** @type {import("../src/ol/geom/SimpleGeometry.js").default} */ (feature.getGeometry());
   view.fit(polygon, {padding: [170, 50, 30, 150], constrainResolution: false});
 }, false);
 
@@ -64,7 +58,7 @@ 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 = /** @type {import("../src/ol/geom/SimpleGeometry.js").default} */ (feature.getGeometry());
   view.fit(polygon, {padding: [170, 50, 30, 150]});
 }, false);
 
@@ -72,21 +66,21 @@ const zoomtoswitzerlandnearest =
     document.getElementById('zoomtoswitzerlandnearest');
 zoomtoswitzerlandnearest.addEventListener('click', function() {
   const feature = source.getFeatures()[0];
-  const polygon = /** @type {module:ol/geom/SimpleGeometry~SimpleGeometry} */ (feature.getGeometry());
+  const polygon = /** @type {import("../src/ol/geom/SimpleGeometry.js").default} */ (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 = /** @type {import("../src/ol/geom/SimpleGeometry.js").default} */ (feature.getGeometry());
   view.fit(point, {padding: [170, 50, 30, 150], minResolution: 50});
 }, false);
 
 const centerlausanne = document.getElementById('centerlausanne');
 centerlausanne.addEventListener('click', function() {
   const feature = source.getFeatures()[1];
-  const point = /** @type {module:ol/geom/Point~Point} */ (feature.getGeometry());
+  const point = /** @type {import("../src/ol/geom/Point.js").default} */ (feature.getGeometry());
-  const size = /** @type {module:ol/size~Size} */ (map.getSize());
+  const size = map.getSize();
   view.centerOn(point.getCoordinates(), size, [570, 500]);
 }, false);

examples/color-manipulation.js

@@ -20,8 +20,8 @@ const twoPi = 2 * Math.PI;
 
 /**
  * Convert an RGB pixel into an HCL pixel.
- * @param {Array.<number>} pixel A pixel in RGB space.
+ * @param {Array<number>} pixel A pixel in RGB space.
- * @return {Array.<number>} A pixel in HCL space.
+ * @return {Array<number>} A pixel in HCL space.
  */
 function rgb2hcl(pixel) {
   const red = rgb2xyz(pixel[0]);
@@ -55,8 +55,8 @@ function rgb2hcl(pixel) {
 
 /**
  * Convert an HCL pixel into an RGB pixel.
- * @param {Array.<number>} pixel A pixel in HCL space.
+ * @param {Array<number>} pixel A pixel in HCL space.
- * @return {Array.<number>} A pixel in RGB space.
+ * @return {Array<number>} A pixel in RGB space.
  */
 function hcl2rgb(pixel) {
   const h = pixel[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
+   * @param {Object=} opt_options Control options.
- * @extends {module:ol/control/Control~Control}
+   */
- * @param {Object=} opt_options Control options.
+  constructor(opt_options) {
- */
+    const options = opt_options || {};
-app.RotateNorthControl = function(opt_options) {
 
-  const options = opt_options || {};
+    const button = document.createElement('button');
+    button.innerHTML = 'N';
 
-  const button = document.createElement('button');
+    const element = document.createElement('div');
-  button.innerHTML = 'N';
+    element.className = 'rotate-north ol-unselectable ol-control';
+    element.appendChild(button);
 
-  const this_ = this;
+    super({
-  const handleRotateNorth = function() {
+      element: element,
-    this_.getMap().getView().setRotation(0);
+      target: options.target
-  };
+    });
 
-  button.addEventListener('click', handleRotateNorth, false);
+    button.addEventListener('click', this.handleRotateNorth.bind(this), false);
-  button.addEventListener('touchstart', handleRotateNorth, false);
+  }
 
-  const element = document.createElement('div');
+  handleRotateNorth() {
-  element.className = 'rotate-north ol-unselectable ol-control';
+    this.getMap().getView().setRotation(0);
-  element.appendChild(button);
+  }
 
-  Control.call(this, {
+}
-    element: element,
-    target: options.target
-  });
-
-};
-inherits(app.RotateNorthControl, Control);
 
 
 //
@@ -57,12 +45,8 @@ inherits(app.RotateNorthControl, Control);
 
 
 const map = new Map({
-  controls: defaultControls({
+  controls: defaultControls().extend([
-    attributionOptions: {
+    new RotateNorthControl()
-      collapsible: false
-    }
-  }).extend([
-    new app.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,58 +8,47 @@ import {TileJSON, Vector as VectorSource} from '../src/ol/source.js';
 import {Fill, Icon, Stroke, Style} from '../src/ol/style.js';
 
 
-/**
+class Drag extends PointerInteraction {
- * Define a namespace for the application.
+  constructor() {
- */
+    super({
-const app = {};
+      handleDownEvent: handleDownEvent,
+      handleDragEvent: handleDragEvent,
+      handleMoveEvent: handleMoveEvent,
+      handleUpEvent: handleUpEvent
+    });
+
+    /**
+     * @type {import("../src/ol/coordinate.js").Coordinate}
+     * @private
+     */
+    this.coordinate_ = null;
+
+    /**
+     * @type {string|undefined}
+     * @private
+     */
+    this.cursor_ = 'pointer';
+
+    /**
+     * @type {Feature}
+     * @private
+     */
+    this.feature_ = null;
+
+    /**
+     * @type {string|undefined}
+     * @private
+     */
+    this.previousCursor_ = undefined;
+  }
+}
 
 
 /**
- * @constructor
+ * @param {import("../src/ol/MapBrowserEvent.js").default} evt Map browser event.
- * @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
-  });
-
-  /**
-   * @type {module:ol/pixel~Pixel}
-   * @private
-   */
-  this.coordinate_ = null;
-
-  /**
-   * @type {string|undefined}
-   * @private
-   */
-  this.cursor_ = 'pointer';
-
-  /**
-   * @type {module:ol/Feature~Feature}
-   * @private
-   */
-  this.feature_ = null;
-
-  /**
-   * @type {string|undefined}
-   * @private
-   */
-  this.previousCursor_ = undefined;
-
-};
-inherits(app.Drag, PointerInteraction);
-
-
-/**
- * @param {module:ol/MapBrowserEvent~MapBrowserEvent} 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,7 +125,7 @@ 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({
@@ -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,7 +3,7 @@ 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

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';
 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: [
@@ -26,62 +86,10 @@ 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);
 
-  /**
+  const layer = new CanvasLayer({
-   * This function uses d3 to render the topojson features to a canvas.
+    features: topojson.feature(us, us.objects.counties)
-   * @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'
-    })
   });
+
   map.addLayer(layer);
 });

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

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({
+  map.addLayer(new VectorImageLayer({
-    renderMode: 'image',
+    source: vectorSource
-    source: vectorSource,
-    style: styleFunction
   }));
   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,
+    source: vectorSource
-    style: styleFunction
   }));
   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/draw-shapes.js

@@ -40,9 +40,6 @@ function addInteraction() {
     } else if (value === 'Star') {
       value = 'Circle';
       geometryFunction = function(coordinates, geometry) {
-        if (!geometry) {
-          geometry = new Polygon(null);
-        }
         const center = coordinates[0];
         const last = coordinates[1];
         const dx = center[0] - last[0];
@@ -59,7 +56,11 @@ function addInteraction() {
           newCoordinates.push([center[0] + offsetX, center[1] + offsetY]);
         }
         newCoordinates.push(newCoordinates[0].slice());
-        geometry.setCoordinates([newCoordinates]);
+        if (!geometry) {
+          geometry = new Polygon([newCoordinates]);
+        } else {
+          geometry.setCoordinates([newCoordinates]);
+        }
         return geometry;
       };
     }

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: [
+  layers: [tileLayer],
-    new TileLayer({
-      source: new OSM()
-    })
-  ],
   target: 'map',
   view: new View({
     center: [0, 0],
@@ -22,7 +22,6 @@ const map = new Map({
 const imageStyle = new Style({
   image: new CircleStyle({
     radius: 5,
-    snapToPixel: false,
     fill: new Fill({color: 'yellow'}),
     stroke: new Stroke({color: 'red', width: 1})
   })
@@ -31,7 +30,6 @@ const imageStyle = new Style({
 const headInnerImageStyle = new Style({
   image: new CircleStyle({
     radius: 2,
-    snapToPixel: false,
     fill: new Fill({color: 'blue'})
   })
 });
@@ -39,7 +37,6 @@ const headInnerImageStyle = new Style({
 const headOuterImageStyle = new Style({
   image: new CircleStyle({
     radius: 5,
-    snapToPixel: false,
     fill: new Fill({color: 'black'})
   })
 });
@@ -49,8 +46,8 @@ const omegaTheta = 30000; // Rotation period in ms
 const R = 7e6;
 const r = 2e6;
 const p = 2e6;
-map.on('postcompose', function(event) {
+tileLayer.on('postrender', function(event) {
-  const vectorContext = event.vectorContext;
+  const vectorContext = getVectorContext(event);
   const frameState = event.frameState;
   const theta = 2 * Math.PI * frameState.time / omegaTheta;
   const coordinates = [];

examples/export-map.html

@@ -3,12 +3,12 @@ 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
+  Example of exporting a map as a PNG image. This example use the <a href="https://www.npmjs.com/package/dom-to-image-more">dom-to-image-more</a>
-  that supports <a href="https://developer.mozilla.org/de/docs/Web/API/HTMLCanvasElement/toBlob#Browser_compatibility">
+  library.
-  <code>canvas.toBlob()</code></a>.
 tags: "export, png, openstreetmap"
 resources:
-  - https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js
+  - https://unpkg.com/dom-to-image-more@2.7.1/dist/dom-to-image-more.min.js
 ---
 <div id="map" class="map"></div>
 <a id="export-png" class="btn btn-default"><i class="fa fa-download"></i> Download PNG</a>
+<a id="image-download" download="map.png"></a>

examples/export-map.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 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';
@@ -18,11 +17,6 @@ const map = new Map({
     })
   ],
   target: 'map',
-  controls: defaultControls({
-    attributionOptions: {
-      collapsible: false
-    }
-  }),
   view: new View({
     center: [0, 0],
     zoom: 2
@@ -30,15 +24,13 @@ const map = new Map({
 });
 
 document.getElementById('export-png').addEventListener('click', function() {
-  map.once('postcompose', function(event) {
+  map.once('rendercomplete', function() {
-    const canvas = event.context.canvas;
+    domtoimage.toPng(map.getViewport().querySelector('.ol-layers'))
-    if (navigator.msSaveBlob) {
+      .then(function(dataURL) {
-      navigator.msSaveBlob(canvas.msToBlob(), 'map.png');
+        const link = document.getElementById('image-download');
-    } else {
+        link.href = dataURL;
-      canvas.toBlob(function(blob) {
+        link.click();
-        saveAs(blob, 'map.png');
       });
-    }
   });
   map.renderSync();
 });

examples/export-pdf.html

@@ -7,6 +7,7 @@ docs: >
 tags: "export, pdf, openstreetmap"
 resources:
   - https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/jspdf.min.js
+  - https://unpkg.com/dom-to-image-more@2.7.1/dist/dom-to-image-more.min.js
 ---
 <div class="row-fluid">
   <div class="span12">

examples/export-pdf.js

@@ -1,9 +1,7 @@
 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 {unByKey} from '../src/ol/Observable.js';
 import {OSM, Vector as VectorSource} from '../src/ol/source.js';
 
 const raster = new TileLayer({
@@ -27,11 +25,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
@@ -48,9 +41,6 @@ const dims = {
   a5: [210, 148]
 };
 
-let loading = 0;
-let loaded = 0;
-
 const exportButton = document.getElementById('export-pdf');
 
 exportButton.addEventListener('click', function() {
@@ -63,60 +53,25 @@ 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 size = map.getSize();
   const extent = map.getView().calculateExtent(size);
 
-  const source = raster.getSource();
+  map.once('rendercomplete', function() {
-
+    domtoimage.toJpeg(map.getViewport().querySelector('.ol-layers')).then(function(dataUrl) {
-  const tileLoadStart = function() {
+      const pdf = new jsPDF('landscape', undefined, format);
-    ++loading;
+      pdf.addImage(dataUrl, 'JPEG', 0, 0, dim[0], dim[1]);
-  };
+      pdf.save('map.pdf');
-
+      // Reset original map size
-  let timer;
+      map.setSize(size);
-  let keys = [];
+      map.getView().fit(extent, {size});
-
+      exportButton.disabled = false;
-  function tileLoadEndFactory(canvas) {
+      document.body.style.cursor = 'auto';
-    return () => {
+    });
-      ++loaded;
-      if (timer) {
-        clearTimeout(timer);
-        timer = null;
-      }
-      if (loading === loaded) {
-        timer = window.setTimeout(() => {
-          loading = 0;
-          loaded = 0;
-          const data = canvas.toDataURL('image/jpeg');
-          const pdf = new jsPDF('landscape', undefined, format);
-          pdf.addImage(data, 'JPEG', 0, 0, dim[0], dim[1]);
-          pdf.save('map.pdf');
-          keys.forEach(unByKey);
-          keys = [];
-          map.setSize(size);
-          map.getView().fit(extent, {size});
-          map.renderSync();
-          exportButton.disabled = false;
-          document.body.style.cursor = 'auto';
-        }, 500);
-      }
-    };
-  }
-
-  map.once('postcompose', function(event) {
-    const canvas = event.context.canvas;
-    const tileLoadEnd = tileLoadEndFactory(canvas);
-    keys = [
-      source.on('tileloadstart', tileLoadStart),
-      source.on('tileloadend', tileLoadEnd),
-      source.on('tileloaderror', tileLoadEnd)
-    ];
-    tileLoadEnd();
   });
 
+  // Set print size
   const printSize = [width, height];
   map.setSize(printSize);
   map.getView().fit(extent, {size: printSize});
-  loaded = -1;
-  map.renderSync();
 
 }, 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,28 +2,22 @@ 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 tileLayer = new TileLayer({
+  source: new OSM({
+    wrapX: false
+  })
+});
 
 const map = new Map({
-  layers: [
+  layers: [tileLayer],
-    new TileLayer({
-      source: new OSM({
-        wrapX: false
-      })
-    })
-  ],
-  controls: defaultControls({
-    attributionOptions: {
-      collapsible: false
-    }
-  }),
   target: 'map',
   view: new View({
     center: [0, 0],
@@ -50,10 +44,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;
@@ -65,7 +59,6 @@ function flash(feature) {
     const style = new Style({
       image: new CircleStyle({
         radius: radius,
-        snapToPixel: false,
         stroke: new Stroke({
           color: 'rgba(255, 0, 0, ' + opacity + ')',
           width: 0.25 + opacity
@@ -79,7 +72,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
+  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
+  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',
@@ -94,7 +95,6 @@ const styles = {
   'geoMarker': new Style({
     image: new CircleStyle({
       radius: 7,
-      snapToPixel: false,
       fill: new Fill({color: 'black'}),
       stroke: new Stroke({
         color: 'white', width: 2
@@ -124,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,
@@ -143,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) {
@@ -161,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();
 };
 
@@ -177,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();
   }
 }
@@ -192,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())
+  const geometry = /** @type {import("../src/ol/geom/Point").default} */ (geoMarker.getGeometry());
-    .setCoordinates(coord);
+  geometry.setCoordinates(coord);
   //remove listener
-  map.un('postcompose', moveFeature);
+  vectorLayer.un('postrender', moveFeature);
 }
 
 startButton.addEventListener('click', startAnimation, false);

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 tileLayer = new TileLayer({
+  source: new Stamen({
+    layer: 'toner'
+  })
+});
 
 const map = new Map({
   layers: [
-    new TileLayer({
+    tileLayer
-      source: new Stamen({
-        layer: 'toner'
-      })
-    })
   ],
   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/geojson-vt.js

@@ -77,7 +77,7 @@ fetch(url).then(function(response) {
     tileLoadFunction: function(tile) {
       const format = tile.getFormat();
       const tileCoord = tile.getTileCoord();
-      const data = tileIndex.getTile(tileCoord[0], tileCoord[1], -tileCoord[2] - 1);
+      const data = tileIndex.getTile(tileCoord[0], tileCoord[1], tileCoord[2]);
 
       const features = format.readFeatures(
         JSON.stringify({

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

@@ -44,7 +44,7 @@ tags: "fullscreen, geolocation, orientation, mobile"
         <button id="geolocate">Geolocate Me!</button>
         <button id="simulate">Simulate</button>
     </div>
-    <script src="./resources/common.js" type="text/javascript"></script>
+    <script src="common.js"></script>
-    <script src="loader.js?id=geolocation-orientation" type="text/javascript"></script>
+    <script src="geolocation-orientation.js"></script>
   </body>
 </html>

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: [
+  layers: [tileLayer],
-    new TileLayer({
-      source: new OSM()
-    })
-  ],
   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/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>

examples/graticule.js

@@ -1,4 +1,4 @@
-import Graticule from '../src/ol/Graticule.js';
+import Graticule from '../src/ol/layer/Graticule.js';
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
 import TileLayer from '../src/ol/layer/Tile.js';
@@ -13,6 +13,16 @@ const map = new Map({
       source: new OSM({
         wrapX: false
       })
+    }),
+    new Graticule({
+      // the style to use for the lines, optional.
+      strokeStyle: new Stroke({
+        color: 'rgba(255,120,0,0.9)',
+        width: 2,
+        lineDash: [0.5, 4]
+      }),
+      showLabels: true,
+      wrapX: false
     })
   ],
   target: 'map',
@@ -21,16 +31,3 @@ const map = new Map({
     zoom: 5
   })
 });
-
-// Create the graticule component
-const graticule = new Graticule({
-  // the style to use for the lines, optional.
-  strokeStyle: new Stroke({
-    color: 'rgba(255,120,0,0.9)',
-    width: 2,
-    lineDash: [0.5, 4]
-  }),
-  showLabels: true
-});
-
-graticule.setMap(map);

examples/heatmap-earthquakes.js

@@ -43,11 +43,14 @@ const map = new Map({
   })
 });
 
-
+const blurHandler = function() {
-blur.addEventListener('input', function() {
   vector.setBlur(parseInt(blur.value, 10));
-});
+};
+blur.addEventListener('input', blurHandler);
+blur.addEventListener('change', blurHandler);
 
-radius.addEventListener('input', function() {
+const radiusHandler = function() {
   vector.setRadius(parseInt(radius.value, 10));
-});
+};
+radius.addEventListener('input', radiusHandler);
+radius.addEventListener('change', radiusHandler);

examples/here-maps.js

@@ -69,9 +69,6 @@ for (i = 0, ii = hereLayers.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: [921371.9389, 6358337.7609],

examples/icon-color.js

@@ -22,27 +22,27 @@ const madrid = new Feature({
 });
 
 rome.setStyle(new Style({
-  image: new Icon(/** @type {module:ol/style/Icon~Options} */ ({
+  image: new Icon({
     color: '#8959A8',
     crossOrigin: 'anonymous',
     src: 'data/dot.png'
-  }))
+  })
 }));
 
 london.setStyle(new Style({
-  image: new Icon(/** @type {module:ol/style/Icon~Options} */ ({
+  image: new Icon({
     color: '#4271AE',
     crossOrigin: 'anonymous',
     src: 'data/dot.png'
-  }))
+  })
 }));
 
 madrid.setStyle(new Style({
-  image: new Icon(/** @type {module:ol/style/Icon~Options} */ ({
+  image: new Icon({
     color: [113, 140, 0],
     crossOrigin: 'anonymous',
     src: 'data/dot.png'
-  }))
+  })
 }));
 
 

examples/icon-negative.js

@@ -11,13 +11,13 @@ import {Icon, Style} from '../src/ol/style.js';
 
 function createStyle(src, img) {
   return new Style({
-    image: new Icon(/** @type {module:ol/style/Icon~Options} */ ({
+    image: new Icon({
       anchor: [0.5, 0.96],
       crossOrigin: 'anonymous',
       src: src,
       img: img,
       imgSize: img ? [img.width, img.height] : undefined
-    }))
+    })
   });
 }
 

examples/icon-sprite-webgl.html

@@ -1,10 +1,17 @@
 ---
 layout: example.html
 title: Icon Sprites with WebGL
-shortdesc: Icon sprite with WebGL
+shortdesc: Rendering many icons with WebGL
 docs: >
-  <p>In this example a sprite image is used for the icon styles. Using a sprite is required to get good performance with WebGL.</p>
+  This example shows how to use `ol/renderer/webgl/PointsLayer` to render
-tags: "webgl, icon, sprite, vector, point"
+    a very large amount of sprites. The above map is based on a dataset from the National UFO Reporting Center: each
+    icon marks a UFO sighting according to its reported shape (disk, light, fireball...). The older the sighting, the redder
+    the icon.
+
+  A very simple sprite atlas is used in the form of a PNG file containing all icons on a grid. Then, the `texCoordCallback`
+    option of the `ol/renderer/webgl/PointsLayer` constructor is used to specify which sprite to use according to the sighting shape.
+
+  The dataset contains around 80k points and can be found here: https://www.kaggle.com/NUFORC/ufo-sightings
+tags: "webgl, icon, sprite, point, ufo"
 ---
 <div id="map" class="map"></div>
-<div id="info">&nbsp;</div>

examples/icon-sprite-webgl.js

@@ -1,136 +1,124 @@
-import Feature from '../src/ol/Feature.js';
+import Map from '../src/ol/Map.js';
-import Map from '../src/ol/WebGLMap.js';
 import View from '../src/ol/View.js';
-import Point from '../src/ol/geom/Point.js';
+import TileLayer from '../src/ol/layer/Tile.js';
-import VectorLayer from '../src/ol/layer/Vector.js';
+import TileJSON from '../src/ol/source/TileJSON';
-import VectorSource from '../src/ol/source/Vector.js';
+import Feature from '../src/ol/Feature';
-import {Icon, Style} from '../src/ol/style.js';
+import Point from '../src/ol/geom/Point';
+import VectorLayer from '../src/ol/layer/Vector';
+import {Vector} from '../src/ol/source';
+import {fromLonLat} from '../src/ol/proj';
+import WebGLPointsLayerRenderer from '../src/ol/renderer/webgl/PointsLayer';
+import {lerp} from '../src/ol/math';
 
+const features = [];
+const vectorSource = new Vector({
+  features: [],
+  attributions: 'National UFO Reporting Center'
+});
 
-const iconInfo = [{
+const texture = document.createElement('img');
-  offset: [0, 0],
+texture.src = 'data/ufo_shapes.png';
-  opacity: 1.0,
-  rotateWithView: true,
-  rotation: 0.0,
-  scale: 1.0,
-  size: [55, 55]
-}, {
-  offset: [110, 86],
-  opacity: 0.75,
-  rotateWithView: false,
-  rotation: Math.PI / 2.0,
-  scale: 1.25,
-  size: [55, 55]
-}, {
-  offset: [55, 0],
-  opacity: 0.5,
-  rotateWithView: true,
-  rotation: Math.PI / 3.0,
-  scale: 1.5,
-  size: [55, 86]
-}, {
-  offset: [212, 0],
-  opacity: 1.0,
-  rotateWithView: true,
-  rotation: 0.0,
-  scale: 1.0,
-  size: [44, 44]
-}];
 
-let i;
+// This describes the content of the associated sprite sheet
+// coords are u0, v0, u1, v1 for a given shape
+const shapeTextureCoords = {
+  'light': [0, 0.5, 0.25, 0],
+  'sphere': [0.25, 0.5, 0.5, 0],
+  'circle': [0.25, 0.5, 0.5, 0],
+  'disc': [0.5, 0.5, 0.75, 0],
+  'oval': [0.5, 0.5, 0.75, 0],
+  'triangle': [0.75, 0.5, 1, 0],
+  'fireball': [0, 1, 0.25, 0.5],
+  'default': [0.75, 1, 1, 0.5]
+};
 
-const iconCount = iconInfo.length;
+const oldColor = [255, 160, 110];
-const icons = new Array(iconCount);
+const newColor = [180, 255, 200];
-for (i = 0; i < iconCount; ++i) {
+
-  const info = iconInfo[i];
+class WebglPointsLayer extends VectorLayer {
-  icons[i] = new Icon({
+  createRenderer() {
-    offset: info.offset,
+    return new WebGLPointsLayerRenderer(this, {
-    opacity: info.opacity,
+      texture: texture,
-    rotateWithView: info.rotateWithView,
+      colorCallback: function(feature, vertex, component) {
-    rotation: info.rotation,
+        // component at index 3 is alpha
-    scale: info.scale,
+        if (component === 3) {
-    size: info.size,
+          return 1;
-    crossOrigin: 'anonymous',
+        }
-    src: 'data/Butterfly.png'
+
-  });
+        // color is interpolated based on year (min is 1910, max is 2013)
+        // please note: most values are between 2000-2013
+        const ratio = (feature.get('year') - 1950) / (2013 - 1950);
+        return lerp(oldColor[component], newColor[component], ratio * ratio) / 255;
+      },
+      texCoordCallback: function(feature, component) {
+        let coords = shapeTextureCoords[feature.get('shape')];
+        if (!coords) {
+          coords = shapeTextureCoords['default'];
+        }
+        return coords[component];
+      },
+      sizeCallback: function() {
+        return 16;
+      }
+    });
+  }
 }
 
-const featureCount = 50000;
+
-const features = new Array(featureCount);
+function loadData() {
-let feature, geometry;
+  const client = new XMLHttpRequest();
-const e = 25000000;
+  client.open('GET', 'data/csv/ufo_sighting_data.csv');
-for (i = 0; i < featureCount; ++i) {
+  client.onload = function() {
-  geometry = new Point(
+    const csv = client.responseText;
-    [2 * e * Math.random() - e, 2 * e * Math.random() - e]);
+    let curIndex;
-  feature = new Feature(geometry);
+    let prevIndex = 0;
-  feature.setStyle(
+    let line;
-    new Style({
+    while ((curIndex = csv.indexOf('\n', prevIndex)) > 0) {
-      image: icons[i % (iconCount - 1)]
+      line = csv.substr(prevIndex, curIndex - prevIndex).split(',');
+      prevIndex = curIndex + 1;
+
+      // skip header
+      if (prevIndex === 0) {
+        continue;
+      }
+
+      const coords = fromLonLat([parseFloat(line[5]), parseFloat(line[4])]);
+
+      // only keep valid points
+      if (isNaN(coords[0]) || isNaN(coords[1])) {
+        continue;
+      }
+
+      features.push(new Feature({
+        datetime: line[0],
+        year: parseInt(/[0-9]{4}/.exec(line[0])[0]), // extract the year as int
+        shape: line[2],
+        duration: line[3],
+        geometry: new Point(coords)
+      }));
+    }
+    vectorSource.addFeatures(features);
+  };
+  client.send();
+}
+
+loadData();
+
+new Map({
+  layers: [
+    new TileLayer({
+      source: new TileJSON({
+        url: 'https://api.tiles.mapbox.com/v3/mapbox.world-dark.json?secure',
+        crossOrigin: 'anonymous'
+      })
+    }),
+    new WebglPointsLayer({
+      source: vectorSource
     })
-  );
+  ],
-  features[i] = feature;
-}
-
-const vectorSource = new VectorSource({
-  features: features
-});
-const vector = new VectorLayer({
-  source: vectorSource
-});
-
-const map = new Map({
-  layers: [vector],
   target: document.getElementById('map'),
   view: new View({
-    center: [0, 0],
+    center: [0, 4000000],
-    zoom: 5
+    zoom: 2
   })
 });
-
-const overlayFeatures = [];
-for (i = 0; i < featureCount; i += 30) {
-  const clone = features[i].clone();
-  clone.setStyle(null);
-  overlayFeatures.push(clone);
-}
-
-new VectorLayer({
-  map: map,
-  source: new VectorSource({
-    features: overlayFeatures
-  }),
-  style: new Style({
-    image: icons[iconCount - 1]
-  })
-});
-
-map.on('click', function(evt) {
-  const info = document.getElementById('info');
-  info.innerHTML =
-      'Hold on a second, while I catch those butterflies for you ...';
-
-  window.setTimeout(function() {
-    const features = [];
-    map.forEachFeatureAtPixel(evt.pixel, function(feature) {
-      features.push(feature);
-      return false;
-    });
-
-    if (features.length === 1) {
-      info.innerHTML = 'Got one butterfly';
-    } else if (features.length > 1) {
-      info.innerHTML = 'Got ' + features.length + ' butterflies';
-    } else {
-      info.innerHTML = 'Couldn\'t catch a single butterfly';
-    }
-  }, 1);
-});
-
-map.on('pointermove', function(evt) {
-  if (evt.dragging) {
-    return;
-  }
-  const pixel = map.getEventPixel(evt.originalEvent);
-  const hit = map.hasFeatureAtPixel(pixel);
-  map.getTarget().style.cursor = hit ? 'pointer' : '';
-});

examples/icon.js

@@ -17,12 +17,12 @@ const iconFeature = new Feature({
 });
 
 const iconStyle = new Style({
-  image: new Icon(/** @type {module:ol/style/Icon~Options} */ ({
+  image: new Icon({
     anchor: [0.5, 46],
     anchorXUnits: 'fraction',
     anchorYUnits: 'pixels',
     src: 'data/icon.png'
-  }))
+  })
 });
 
 iconFeature.setStyle(iconStyle);

examples/igc.js

@@ -1,13 +1,13 @@
 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 IGC from '../src/ol/format/IGC.js';
 import {LineString, Point} from '../src/ol/geom.js';
 import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
 import OSM, {ATTRIBUTION} from '../src/ol/source/OSM.js';
 import VectorSource from '../src/ol/source/Vector.js';
 import {Circle as CircleStyle, Fill, Stroke, Style} from '../src/ol/style.js';
+import {getVectorContext} from '../src/ol/render.js';
 
 
 const colors = {
@@ -74,6 +74,10 @@ vectorSource.on('addfeature', function(event) {
   time.duration = time.stop - time.start;
 });
 
+const vectorLayer = new VectorLayer({
+  source: vectorSource,
+  style: styleFunction
+});
 
 const map = new Map({
   layers: [
@@ -87,17 +91,9 @@ const map = new Map({
             '?apikey=0e6fc415256d4fbb9b5166a718591d71'
       })
     }),
-    new VectorLayer({
+    vectorLayer
-      source: vectorSource,
-      style: styleFunction
-    })
   ],
   target: 'map',
-  controls: defaultControls({
-    attributionOptions: {
-      collapsible: false
-    }
-  }),
   view: new View({
     center: [703365.7089403362, 5714629.865071137],
     zoom: 9
@@ -159,8 +155,8 @@ const style = new Style({
     stroke: stroke
   })
 });
-map.on('postcompose', function(evt) {
+vectorLayer.on('postrender', function(evt) {
-  const vectorContext = evt.vectorContext;
+  const vectorContext = getVectorContext(evt);
   vectorContext.setStyle(style);
   if (point !== null) {
     vectorContext.drawGeometry(point);
@@ -187,7 +183,7 @@ document.getElementById('time').addEventListener('input', function() {
   const value = parseInt(this.value, 10) / 100;
   const m = time.start + (time.duration * value);
   vectorSource.forEachFeature(function(feature) {
-    const geometry = /** @type {module:ol/geom/LineString~LineString} */ (feature.getGeometry());
+    const geometry = /** @type {import("../src/ol/geom/LineString.js").default} */ (feature.getGeometry());
     const coordinate = geometry.getCoordinateAtM(m, true);
     let highlight = feature.get('highlight');
     if (highlight === undefined) {

examples/image-filter.html

@@ -3,9 +3,9 @@ layout: example.html
 title: Image Filters
 shortdesc: Apply a filter to imagery
 docs: >
-  <p>Layer rendering can be manipulated in <code>precompose</code> and <code>postcompose</code> event listeners.
+  <p>Layer rendering can be manipulated in <code>prerender</code> and <code>postrender</code> event listeners.
   These listeners get an event with a reference to the Canvas rendering context.
-  In this example, the <code>postcompose</code> listener applies a filter to the image data.</p>
+  In this example, the <code>postrender</code> listener applies a filter to the image data.</p>
 tags: "filter, image manipulation"
 cloak:
   - key: As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5

examples/image-filter.js

@@ -90,9 +90,9 @@ select.onchange = function() {
 
 
 /**
- * Apply a filter on "postcompose" events.
+ * Apply a filter on "postrender" events.
  */
-imagery.on('postcompose', function(event) {
+imagery.on('postrender', function(event) {
   convolve(event.context, selectedKernel);
 });
 
@@ -101,7 +101,7 @@ imagery.on('postcompose', function(event) {
  * Apply a convolution kernel to canvas.  This works for any size kernel, but
  * performance starts degrading above 3 x 3.
  * @param {CanvasRenderingContext2D} context Canvas 2d context.
- * @param {Array.<number>} kernel Kernel.
+ * @param {Array<number>} kernel Kernel.
  */
 function convolve(context, kernel) {
   const canvas = context.canvas;

examples/image-load-events.js

@@ -6,7 +6,7 @@ import ImageWMS from '../src/ol/source/ImageWMS.js';
 
 /**
  * Renders a progress bar.
- * @param {Element} el The target element.
+ * @param {HTMLElement} el The target element.
  * @constructor
  */
 function Progress(el) {

examples/image-vector-layer.html

@@ -1,9 +1,9 @@
 ---
 layout: example.html
-title: Image Vector Layer
+title: Vector Image Layer
-shortdesc: Example of an image vector layer.
+shortdesc: Example of rendering vector data as an image layer.
 docs: >
-  <p>This example uses <code>ol/layer/Vector</code> with `renderMode: 'image'`. This mode results in faster rendering during interaction and animations, at the cost of less accurate rendering.</p>
+  <p>This example uses <code>ol/layer/VectorImage</code> for faster rendering during interaction and animations, at the cost of less accurate rendering.</p>
 tags: "vector, image"
 ---
 <div id="map" class="map"></div>

examples/image-vector-layer.js

@@ -1,6 +1,7 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
 import GeoJSON from '../src/ol/format/GeoJSON.js';
+import VectorImageLayer from '../src/ol/layer/VectorImage.js';
 import VectorLayer from '../src/ol/layer/Vector.js';
 import VectorSource from '../src/ol/source/Vector.js';
 import {Fill, Stroke, Style, Text} from '../src/ol/style.js';
@@ -19,8 +20,8 @@ const style = new Style({
 
 const map = new Map({
   layers: [
-    new VectorLayer({
+    new VectorImageLayer({
-      renderMode: 'image',
+      imageRatio: 2,
       source: new VectorSource({
         url: 'data/geojson/countries.geojson',
         format: new GeoJSON()