Changelog for v6.2.1

Fix for export PDF example compatibility issues, and layer opacity handling.

.circleci/config.yml

@@ -11,7 +11,7 @@ jobs:
 
       - restore_cache:
           keys:
-          - v1-dependencies-{{ checksum "package.json" }}
+          - v1-dependencies-{{ checksum "package-lock.json" }}
           - v1-dependencies-
 
       - run:
@@ -21,7 +21,7 @@ jobs:
       - save_cache:
           paths:
             - node_modules
-          key: v1-dependencies-{{ checksum "package.json" }}
+          key: v1-dependencies-{{ checksum "package-lock.json" }}
 
       - run:
           name: Run Tests

.dependabot/config.yml

@@ -0,0 +1,7 @@
+# See https://dependabot.com/docs/config-file/
+version: 1
+update_configs:
+  - package_manager: "javascript"
+    directory: "/"
+    update_schedule: "weekly"
+    version_requirement_updates: "increase_versions_if_necessary"

.github/stale.yml

@@ -8,6 +8,8 @@ exemptLabels:
   - regression
   - bug
   - 'pull request accepted'
+# Issues assigned to a milestone will not go stale
+exemptMilestones: true
 # Label to use when marking an issue as stale
 staleLabel: stale
 # Comment to post when marking an issue as stale. Set to `false` to disable

changelog/upgrade-notes.md

@@ -1,5 +1,9 @@
 ## Upgrade notes
 
+### v6.2.0
+
+### v6.1.0
+
 ### v6.0.0
 
 #### Backwards incompatible changes
@@ -77,7 +81,7 @@ Generally, the responsibility of applying center/rotation/resolutions constraint
 
 ##### The view `extent` option now applies to the whole viewport
 
-Previously, this options only constrained the view *center*. This behaviour can still be obtained by specifying `constrainCenterOnly` in the view options.
+Previously, this options only constrained the view *center*. This behaviour can still be obtained by specifying `constrainOnlyCenter` in the view options.
 
 As a side effect, the view `rotate` method is gone and has been replaced with `adjustRotation` which takes a delta as input.
 

changelog/v6.0.0.md

@@ -83,7 +83,7 @@ Generally, the responsibility of applying center/rotation/resolutions constraint
 
 ##### The view `extent` option now applies to the whole viewport
 
-Previously, this options only constrained the view *center*. This behaviour can still be obtained by specifying `constrainCenterOnly` in the view options.
+Previously, this options only constrained the view *center*. This behaviour can still be obtained by specifying `constrainOnlyCenter` in the view options.
 
 As a side effect, the view `rotate` method is gone and has been replaced with `adjustRotation` which takes a delta as input.
 

changelog/v6.1.0.md

@@ -0,0 +1,86 @@
+# 6.1.0
+
+With 47 pull requests, this release keeps up the momentum of the v6.x effort and brings several bug fixes, performance improvements and new features. In addition to that, we added some missing documentation to our API docs and gave them some usability improvements.
+
+## New features
+
+* A new, performance optimized hit detection API on the layer level, `Layer#getFeatures(pixel)` has been introduced. At this point it is implemented for vector, vector tile and image vector layers, and is recommended when performance is critical, e.g. for hit detection on mouseover.
+* For the WebGLPoints layer, we made several additions to the style expressions system. This includes a `case` operator, support for array and string types, and type checking.
+
+## List of all changes
+
+ * [#10214](https://github.com/openlayers/openlayers/pull/10214) - WebGL / Add 'case' operator for style expressions ([@jahow](https://github.com/jahow))
+ * [#10198](https://github.com/openlayers/openlayers/pull/10198) - WebGL renderer / use the specified loading strategy for the vector data ([@jahow](https://github.com/jahow))
+ * [#10212](https://github.com/openlayers/openlayers/pull/10212) - Add config file for dependabot ([@fredj](https://github.com/fredj))
+ * [#10187](https://github.com/openlayers/openlayers/pull/10187) - Set touch-action to allow native touch gestures ([@ahocevar](https://github.com/ahocevar))
+ * [#10194](https://github.com/openlayers/openlayers/pull/10194) - Added check to make sure extent array has four objects. ([@MrSoUndso](https://github.com/MrSoUndso))
+ * [#10204](https://github.com/openlayers/openlayers/pull/10204) - Avoid scrolling over navigation ([@tschaub](https://github.com/tschaub))
+ * [#10205](https://github.com/openlayers/openlayers/pull/10205) - Add the default to the type column ([@tschaub](https://github.com/tschaub))
+ * [#10178](https://github.com/openlayers/openlayers/pull/10178) - Make ol/interaction/Select#handleEvent return always true. ([@TieSKey](https://github.com/TieSKey))
+ * [#10203](https://github.com/openlayers/openlayers/pull/10203) - Keep issues assigned to a milestone from going stale ([@tschaub](https://github.com/tschaub))
+ * [#10200](https://github.com/openlayers/openlayers/pull/10200) - Carbon add on API docs ([@tschaub](https://github.com/tschaub))
+ * [#10196](https://github.com/openlayers/openlayers/pull/10196) - Webgl / add support for string and arrays in style expressions ([@jahow](https://github.com/jahow))
+ * [#10197](https://github.com/openlayers/openlayers/pull/10197) - Restore node v8 compatibility ([@ahocevar](https://github.com/ahocevar))
+ * [#10195](https://github.com/openlayers/openlayers/pull/10195) - Treat hsl/hsla as named colors ([@mike-000](https://github.com/mike-000))
+ * [#10188](https://github.com/openlayers/openlayers/pull/10188) - Document that map render events do not have a context set ([@ahocevar](https://github.com/ahocevar))
+ * [#10184](https://github.com/openlayers/openlayers/pull/10184) - Clamp the weight value between 0 and 1 ([@fredj](https://github.com/fredj))
+ * [#10175](https://github.com/openlayers/openlayers/pull/10175) - Remove description from type tag ([@tschaub](https://github.com/tschaub))
+ * [#10176](https://github.com/openlayers/openlayers/pull/10176) - Avoid toggling when clicking the title ([@tschaub](https://github.com/tschaub))
+ * [#10172](https://github.com/openlayers/openlayers/pull/10172) - Ensure inherited docs are shown ([@ahocevar](https://github.com/ahocevar))
+ * [#10171](https://github.com/openlayers/openlayers/pull/10171) - Open default attributions links in a new tab or window ([@mike-000](https://github.com/mike-000))
+ * [#10047](https://github.com/openlayers/openlayers/pull/10047) - Apidoc changes ([@KaiVolland](https://github.com/KaiVolland))
+ * [#10161](https://github.com/openlayers/openlayers/pull/10161) - Implement getFeatures() for ol/layer/VectorImage ([@ahocevar](https://github.com/ahocevar))
+ * [#10168](https://github.com/openlayers/openlayers/pull/10168) - Webgl / Add support for filtering and color interpolation in style expressions ([@jahow](https://github.com/jahow))
+ * [#10170](https://github.com/openlayers/openlayers/pull/10170) - Add back html from select-features example ([@openlayers](https://github.com/openlayers))
+ * [#10093](https://github.com/openlayers/openlayers/pull/10093) - Set label text for Graticule option styles ([@mike-000](https://github.com/mike-000))
+ * [#10160](https://github.com/openlayers/openlayers/pull/10160) - Improve test in case of async call ([@ejn](https://github.com/ejn))
+ * [#10159](https://github.com/openlayers/openlayers/pull/10159) - Fix target name collision in event.Target and Control ([@ejn](https://github.com/ejn))
+ * [#10142](https://github.com/openlayers/openlayers/pull/10142) - Fix tilechange events ([@ahocevar](https://github.com/ahocevar))
+ * [#10138](https://github.com/openlayers/openlayers/pull/10138) - Should be able to ovveride defaultvalue of style in selection. ([@wirdehall](https://github.com/wirdehall))
+ * [#10135](https://github.com/openlayers/openlayers/pull/10135) - Revise the description of applyTransform for geometries ([@mike-000](https://github.com/mike-000))
+ * [#10133](https://github.com/openlayers/openlayers/pull/10133) - Properly unregister source tile change listeners ([@ahocevar](https://github.com/ahocevar))
+ * [#10094](https://github.com/openlayers/openlayers/pull/10094) - New Layer#getFeatures method with fast hit detection ([@ahocevar](https://github.com/ahocevar))
+ * [#10104](https://github.com/openlayers/openlayers/pull/10104) - Remove font sizing from the attribution control ([@openlayers](https://github.com/openlayers))
+ * [#10108](https://github.com/openlayers/openlayers/pull/10108) - Fix documentation for handleMoveEvent ([@notnotse](https://github.com/notnotse))
+ * [#10118](https://github.com/openlayers/openlayers/pull/10118) - Document the OSM crossOrigin default ([@mike-000](https://github.com/mike-000))
+ * [#10112](https://github.com/openlayers/openlayers/pull/10112) - No ERROR state for render tiles ([@ahocevar](https://github.com/ahocevar))
+ * [#10115](https://github.com/openlayers/openlayers/pull/10115) - Improve Heatmap hit detection test ([@jahow](https://github.com/jahow))
+ * [#10111](https://github.com/openlayers/openlayers/pull/10111) - Correct the defaulting of ol/source/VectorTile maxZoom ([@mike-000](https://github.com/mike-000))
+ * [#10102](https://github.com/openlayers/openlayers/pull/10102) - Cosmetic type fixes ([@KlausBenndorf](https://github.com/KlausBenndorf))
+ * [#10107](https://github.com/openlayers/openlayers/pull/10107) - Update Vector Tile Info example test for no features ([@mike-000](https://github.com/mike-000))
+ * [#10097](https://github.com/openlayers/openlayers/pull/10097) - Align layer canvas to the left ([@fredj](https://github.com/fredj))
+ * [#10101](https://github.com/openlayers/openlayers/pull/10101) - Add hit detection support on the Heatmap layer ([@jahow](https://github.com/jahow))
+ * [#10087](https://github.com/openlayers/openlayers/pull/10087) - Add example showing vector tiles in EPSG:4326 ([@petrsloup](https://github.com/petrsloup))
+ * [#10086](https://github.com/openlayers/openlayers/pull/10086) - Update mapbox-style example ([@petrsloup](https://github.com/petrsloup))
+ * [#10083](https://github.com/openlayers/openlayers/pull/10083) - webgl points layer example fixes ([@MoonE](https://github.com/MoonE))
+ * [#10076](https://github.com/openlayers/openlayers/pull/10076) - Remove unnecessary typecast ([@fredj](https://github.com/fredj))
+ * [#10074](https://github.com/openlayers/openlayers/pull/10074) - Remove offsets from mouse position calculation ([@mike-000](https://github.com/mike-000))
+ * [#10072](https://github.com/openlayers/openlayers/pull/10072) - Better typing ([@fredj](https://github.com/fredj))
+
+
+<details>
+  <summary>Dependency Updates</summary>
+  
+ * [#10208](https://github.com/openlayers/openlayers/pull/10208) - Bump pixelmatch from 5.0.2 to 5.1.0 ([@openlayers](https://github.com/openlayers))
+ * [#10210](https://github.com/openlayers/openlayers/pull/10210) - Bump glob from 7.1.4 to 7.1.5 ([@openlayers](https://github.com/openlayers))
+ * [#10209](https://github.com/openlayers/openlayers/pull/10209) - Bump karma from 4.1.0 to 4.4.1 ([@openlayers](https://github.com/openlayers))
+ * [#10207](https://github.com/openlayers/openlayers/pull/10207) - Bump ol-mapbox-style from 5.0.0-beta.3 to 5.0.2 ([@openlayers](https://github.com/openlayers))
+ * [#10157](https://github.com/openlayers/openlayers/pull/10157) - Bump karma-coverage-istanbul-reporter from 2.0.5 to 2.1.0 ([@openlayers](https://github.com/openlayers))
+ * [#10155](https://github.com/openlayers/openlayers/pull/10155) - Bump @types/pbf from 3.0.1 to 3.0.2 ([@openlayers](https://github.com/openlayers))
+ * [#10153](https://github.com/openlayers/openlayers/pull/10153) - Bump yargs from 14.0.0 to 14.2.0 ([@openlayers](https://github.com/openlayers))
+ * [#10154](https://github.com/openlayers/openlayers/pull/10154) - Bump @babel/core from 7.4.4 to 7.6.4 ([@openlayers](https://github.com/openlayers))
+ * [#10151](https://github.com/openlayers/openlayers/pull/10151) - Bump rollup-plugin-babel from 4.3.2 to 4.3.3 ([@openlayers](https://github.com/openlayers))
+ * [#10148](https://github.com/openlayers/openlayers/pull/10148) - Bump rollup-plugin-node-resolve from 5.0.0 to 5.2.0 ([@openlayers](https://github.com/openlayers))
+ * [#10150](https://github.com/openlayers/openlayers/pull/10150) - Bump copy-webpack-plugin from 5.0.3 to 5.0.4 ([@openlayers](https://github.com/openlayers))
+ * [#10149](https://github.com/openlayers/openlayers/pull/10149) - Bump rbush from 3.0.0 to 3.0.1 ([@openlayers](https://github.com/openlayers))
+ * [#10147](https://github.com/openlayers/openlayers/pull/10147) - Bump rollup from 1.12.0 to 1.25.1 ([@openlayers](https://github.com/openlayers))
+ * [#10145](https://github.com/openlayers/openlayers/pull/10145) - Greenkeeper/handlebars 4.4.5 ([@openlayers](https://github.com/openlayers))
+ * [#10132](https://github.com/openlayers/openlayers/pull/10132) - Update webpack to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#10143](https://github.com/openlayers/openlayers/pull/10143) - Update mocha to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#10117](https://github.com/openlayers/openlayers/pull/10117) - Update pbf to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#10114](https://github.com/openlayers/openlayers/pull/10114) - Update coveralls to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#10116](https://github.com/openlayers/openlayers/pull/10116) - Update webpack to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+ * [#10105](https://github.com/openlayers/openlayers/pull/10105) - Update jsdoc-plugin-typescript to the latest version 🚀 ([@openlayers](https://github.com/openlayers))
+
+
+</details>

changelog/v6.1.1.md

@@ -0,0 +1,17 @@
+# 6.1.1
+
+Hot on the heels of OpenLayers 6.x, this patch release includes a few fixes for existing functionality.  There should be nothing special needed to upgrade an application from 6.x to 6.1.1. See the 6.0.0 release notes for details on upgrading from an older version.
+
+## Changes
+
+ * [#10235](https://github.com/openlayers/openlayers/pull/10235) - Various optimizations and fixes for the WebGL points renderer ([@jahow](https://github.com/jahow))
+ * [#10244](https://github.com/openlayers/openlayers/pull/10244) - Update to new eslint config with no-multi-assign ([@ahocevar](https://github.com/ahocevar))
+ * [#10243](https://github.com/openlayers/openlayers/pull/10243) - Store correct font value ([@ahocevar](https://github.com/ahocevar))
+ * [#10239](https://github.com/openlayers/openlayers/pull/10239) - Simpler container reuse ([@ahocevar](https://github.com/ahocevar))
+ * [#10237](https://github.com/openlayers/openlayers/pull/10237) - Fix layer zIndex test with falsy values ([@fredj](https://github.com/fredj))
+ * [#10221](https://github.com/openlayers/openlayers/pull/10221) - Fix for undefined Source ([@Kai-W](https://github.com/Kai-W))
+ * [#10228](https://github.com/openlayers/openlayers/pull/10228) - Use render tiles instead of source tiles for hit detection ([@ahocevar](https://github.com/ahocevar))
+ * [#10226](https://github.com/openlayers/openlayers/pull/10226) - ABORT reproj tiles properly ([@ahocevar](https://github.com/ahocevar))
+ * [#10224](https://github.com/openlayers/openlayers/pull/10224) - Vector tile hit detection fixes ([@ahocevar](https://github.com/ahocevar))
+ * [#10218](https://github.com/openlayers/openlayers/pull/10218) - Documentation fixes in ol/style/expressions ([@fredj](https://github.com/fredj))
+ * [#10216](https://github.com/openlayers/openlayers/pull/10216) - Update changelog script to recognize dependabot instead of greenkeeper ([@ahocevar](https://github.com/ahocevar))

changelog/v6.2.0.md

@@ -0,0 +1,196 @@
+# 6.2.0
+
+With almost 90 pull requests, this release brings several new features, performance improvements and bug fixes. In addition to that, we once again improved the API documentation and the example pages.
+
+## New features and improvements
+
+* Mousewheel zooming now brings the same user experience as trackpad zooming. One click on the wheel no longer means a jump of a whole zoom level. Instead, depending on the speed of moving the wheel, the user has fine-grained control over zoom increments/decrements.
+* Users now have better control over the initial map viewport when the aspect ratio of the map is different from a specified initial extent.
+* Text rendering has been optimized for decluttering and improved for rotated views. This means lower memory footprint and no more blurry text when the map is rotated. **Note:** Whit this change, the label cache has been deprecated.
+* A new `displacement` option for icon, circle and regular shape styles makes positioning of point symbolizers more flexible.
+* Several improvements have been made to the KML parser for reading styles, bringing the rendered result much closer to Google Earth.
+* OpenLayers is now less aggressive on stopping events and preventing event default behavior. This means that users have more control over events, making it easier to use interactive SVGs as layers and to embed maps on scrollable pages.
+* Vector tile layers now have a `vector` render mode, which brings improved zooming experience for sources with not too much data.
+* We replaced the previous pointer events polyfill to elm-pep, which should work better in web components.
+
+## List of all changes
+
+ * [#10613](https://github.com/openlayers/openlayers/pull/10613) - Show KML name labels for Points in MultiGeometry ([@mike-000](https://github.com/mike-000))
+ * [#10632](https://github.com/openlayers/openlayers/pull/10632) - Draw interaction: Append coordinates to polygons and lines (reworked) ([@jahow](https://github.com/jahow))
+ * [#9565](https://github.com/openlayers/openlayers/pull/9565) - Make mousewheel zoom behave like trackpad zoom. ([@dbrnz](https://github.com/dbrnz))
+ * [#10580](https://github.com/openlayers/openlayers/pull/10580) - Fix KML Polystyle outline 0 conflict with Linestyle for linestrings ([@mike-000](https://github.com/mike-000))
+ * [#10612](https://github.com/openlayers/openlayers/pull/10612) - Make examples work in Internet Explorer ([@ahocevar](https://github.com/ahocevar))
+ * [#10587](https://github.com/openlayers/openlayers/pull/10587) - Adds option to View for using larger resolution value when clamping #10586 ([@jeremy-smith-maco](https://github.com/jeremy-smith-maco))
+ * [#10607](https://github.com/openlayers/openlayers/pull/10607) - Update elm-pep to fix builds for IE < 11 ([@ahocevar](https://github.com/ahocevar))
+ * [#10598](https://github.com/openlayers/openlayers/pull/10598) - Remove inheritDoc to work around JSDoc issue ([@ahocevar](https://github.com/ahocevar))
+ * [#10574](https://github.com/openlayers/openlayers/pull/10574) - Text rendering improvements ([@ahocevar](https://github.com/ahocevar))
+ * [#10591](https://github.com/openlayers/openlayers/pull/10591) - Remove obsolete license notice ([@ahocevar](https://github.com/ahocevar))
+ * [#10588](https://github.com/openlayers/openlayers/pull/10588) - Sort doc navigation properly and add missing modules ([@ahocevar](https://github.com/ahocevar))
+ * [#10581](https://github.com/openlayers/openlayers/pull/10581) - Use package-lock.json for the checksum calculation ([@DanielRuf](https://github.com/DanielRuf))
+ * [#10584](https://github.com/openlayers/openlayers/pull/10584) - fixed issue with version throwing an error if it is null ([@MrSoUndso](https://github.com/MrSoUndso))
+ * [#10575](https://github.com/openlayers/openlayers/pull/10575) - Fix ol/layer/Graticule rendercomplete problem ([@mike-000](https://github.com/mike-000))
+ * [#10562](https://github.com/openlayers/openlayers/pull/10562) - Zoomify: Separate the service pixel ratio and the device pixel ratio ([@crubier](https://github.com/crubier))
+ * [#10573](https://github.com/openlayers/openlayers/pull/10573) - Replace Bing layer with MapTiler in example ([@mike-000](https://github.com/mike-000))
+ * [#10570](https://github.com/openlayers/openlayers/pull/10570) - Use correct extent for the vector image ([@ahocevar](https://github.com/ahocevar))
+ * [#10572](https://github.com/openlayers/openlayers/pull/10572) - Assert each layer is only added to the map once ([@ahocevar](https://github.com/ahocevar))
+ * [#10563](https://github.com/openlayers/openlayers/pull/10563) - More compatible way of exporting a map as pdf ([@ahocevar](https://github.com/ahocevar))
+ * [#10545](https://github.com/openlayers/openlayers/pull/10545) - Make KML point feature styles compatible with declutter ([@mike-000](https://github.com/mike-000))
+ * [#10542](https://github.com/openlayers/openlayers/pull/10542) - Replace Bing layer with MapTiler in KML example ([@mike-000](https://github.com/mike-000))
+ * [#10543](https://github.com/openlayers/openlayers/pull/10543) - @api tag must not have a value. ([@MoonE](https://github.com/MoonE))
+ * [#10547](https://github.com/openlayers/openlayers/pull/10547) - Only generate module apidoc pages when it contains api tags ([@MoonE](https://github.com/MoonE))
+ * [#10502](https://github.com/openlayers/openlayers/pull/10502) - Stop events that originate with a removed target ([@walkermatt](https://github.com/walkermatt))
+ * [#10527](https://github.com/openlayers/openlayers/pull/10527) - Remove label cache, render text directly to target canvas ([@ahocevar](https://github.com/ahocevar))
+ * [#10534](https://github.com/openlayers/openlayers/pull/10534) - [GeoJSON] Read projection from CRS type EPSG ([@wussup](https://github.com/wussup))
+ * [#10430](https://github.com/openlayers/openlayers/pull/10430) - Offset regular shape ([@Razi91](https://github.com/Razi91))
+ * [#10513](https://github.com/openlayers/openlayers/pull/10513) - fixed flag-name in upgrade notes ([@fgubler](https://github.com/fgubler))
+ * [#10504](https://github.com/openlayers/openlayers/pull/10504) - Fix for reset north when rotation is 360 degrees ([@mike-000](https://github.com/mike-000))
+ * [#10510](https://github.com/openlayers/openlayers/pull/10510) - Remove build/apidoc before running jsdoc again ([@MoonE](https://github.com/MoonE))
+ * [#10498](https://github.com/openlayers/openlayers/pull/10498) - Fixing issue #10497 on behalf of LarryHuang ([@gazza0](https://github.com/gazza0))
+ * [#10496](https://github.com/openlayers/openlayers/pull/10496) - Do not stop events when dragging ([@ahocevar](https://github.com/ahocevar))
+ * [#10478](https://github.com/openlayers/openlayers/pull/10478) - Do not abort and dispose of tiles ([@ahocevar](https://github.com/ahocevar))
+ * [#10495](https://github.com/openlayers/openlayers/pull/10495) - typo in view.fit ([@danielklim](https://github.com/danielklim))
+ * [#10473](https://github.com/openlayers/openlayers/pull/10473) - Fix for undefined source in Vector layer ([@mike-000](https://github.com/mike-000))
+ * [#10484](https://github.com/openlayers/openlayers/pull/10484) - Use a function to get the value of the gradient ([@fredj](https://github.com/fredj))
+ * [#10262](https://github.com/openlayers/openlayers/pull/10262) - Rework to make Document and XMLSerializer lazy and injectable ([@bjornharrtell](https://github.com/bjornharrtell))
+ * [#10461](https://github.com/openlayers/openlayers/pull/10461) - Fix link in apidocs to ObjectEvent. ([@MoonE](https://github.com/MoonE))
+ * [#10413](https://github.com/openlayers/openlayers/pull/10413) - Limit the ZoomSlider's range to the view's constrained resolution. ([@MoonE](https://github.com/MoonE))
+ * [#10438](https://github.com/openlayers/openlayers/pull/10438) - Avoid accessing the DOM to read the viewport size too often ([@jahow](https://github.com/jahow))
+ * [#10439](https://github.com/openlayers/openlayers/pull/10439) - WebGL points layer / add support for symbol rotation ([@jahow](https://github.com/jahow))
+ * [#10434](https://github.com/openlayers/openlayers/pull/10434) - Disable image smoothing for the DEM source in the Sea Level example ([@mike-000](https://github.com/mike-000))
+ * [#10417](https://github.com/openlayers/openlayers/pull/10417) - Replace Bing layer with MapTiler ([@mike-000](https://github.com/mike-000))
+ * [#10415](https://github.com/openlayers/openlayers/pull/10415) - Control button span element pointer events ([@mike-000](https://github.com/mike-000))
+ * [#10409](https://github.com/openlayers/openlayers/pull/10409) - Improve viewport computation in WebGL Postprocessing ([@jahow](https://github.com/jahow))
+ * [#10119](https://github.com/openlayers/openlayers/pull/10119) - Add crossOrigin option to ol/format/KML for icons ([@mike-000](https://github.com/mike-000))
+ * [#10181](https://github.com/openlayers/openlayers/pull/10181) - add tags to example docs ([@roemhildtg](https://github.com/roemhildtg))
+ * [#10407](https://github.com/openlayers/openlayers/pull/10407) - Use render feature compatible extent check ([@ahocevar](https://github.com/ahocevar))
+ * [#10340](https://github.com/openlayers/openlayers/pull/10340) - Draw circles and custom geometry in user coordinates ([@mike-000](https://github.com/mike-000))
+ * [#10393](https://github.com/openlayers/openlayers/pull/10393) - getFeaturesInExtent function for ol/source/VectorTile ([@ahocevar](https://github.com/ahocevar))
+ * [#10402](https://github.com/openlayers/openlayers/pull/10402) - Do not preventDefault on pointerdown ([@ahocevar](https://github.com/ahocevar))
+ * [#10269](https://github.com/openlayers/openlayers/pull/10269) - Replace the BNG layer source in the Raster Reprojection example ([@mike-000](https://github.com/mike-000))
+ * [#10394](https://github.com/openlayers/openlayers/pull/10394) - Remove map renderer element when disposing ([@ahocevar](https://github.com/ahocevar))
+ * [#10391](https://github.com/openlayers/openlayers/pull/10391) - Use box-shadow css instead of filter ([@ahocevar](https://github.com/ahocevar))
+ * [#10392](https://github.com/openlayers/openlayers/pull/10392) - Fix interim tile handing for vector tiles ([@ahocevar](https://github.com/ahocevar))
+ * [#10380](https://github.com/openlayers/openlayers/pull/10380) - Adjust examples for layer canvas pixel ratio and rotation ([@mike-000](https://github.com/mike-000))
+ * [#10384](https://github.com/openlayers/openlayers/pull/10384) - Include Transform typedef in API ([@mike-000](https://github.com/mike-000))
+ * [#10385](https://github.com/openlayers/openlayers/pull/10385) - Import transpiled rbush ([@walkermatt](https://github.com/walkermatt))
+ * [#10363](https://github.com/openlayers/openlayers/pull/10363) - Interactive SVG layer example ([@ahocevar](https://github.com/ahocevar))
+ * [#10120](https://github.com/openlayers/openlayers/pull/10120) - Resolve constraints using anchor if following a cancelled animation ([@mike-000](https://github.com/mike-000))
+ * [#10370](https://github.com/openlayers/openlayers/pull/10370) - Replace Bing layer with MapTiler ([@mike-000](https://github.com/mike-000))
+ * [#10362](https://github.com/openlayers/openlayers/pull/10362) - Remove line that was accidently added with #10332 ([@ahocevar](https://github.com/ahocevar))
+ * [#10309](https://github.com/openlayers/openlayers/pull/10309) - Bring back vector render mode for vector tile layers ([@ahocevar](https://github.com/ahocevar))
+ * [#10332](https://github.com/openlayers/openlayers/pull/10332) - Conditional default prevention instead of touch-action: none ([@ahocevar](https://github.com/ahocevar))
+ * [#10301](https://github.com/openlayers/openlayers/pull/10301) - Create hit detection data per layer and without requestAnimationFrame ([@ahocevar](https://github.com/ahocevar))
+ * [#10347](https://github.com/openlayers/openlayers/pull/10347) - Set utfgrid tile as loaded after load instead of empty ([@adube](https://github.com/adube))
+ * [#10344](https://github.com/openlayers/openlayers/pull/10344) - Fix lazy UTFGrid loading ([@ahocevar](https://github.com/ahocevar))
+ * [#10321](https://github.com/openlayers/openlayers/pull/10321) - Support touch events for DragBox interaction ([@greggian](https://github.com/greggian))
+ * [#10315](https://github.com/openlayers/openlayers/pull/10315) - Replace Bing sources in some examples ([@mike-000](https://github.com/mike-000))
+ * [#10330](https://github.com/openlayers/openlayers/pull/10330) - Fix modifying circle geometries ([@greggian](https://github.com/greggian))
+ * [#10318](https://github.com/openlayers/openlayers/pull/10318) - Use a minimalist pointer events polyfill ([@ahocevar](https://github.com/ahocevar))
+ * [#10322](https://github.com/openlayers/openlayers/pull/10322) - Update tile grid option descriptions ([@mike-000](https://github.com/mike-000))
+ * [#10308](https://github.com/openlayers/openlayers/pull/10308) - Fix feature lookup after removal of alpha ([@ahocevar](https://github.com/ahocevar))
+ * [#10310](https://github.com/openlayers/openlayers/pull/10310) - Ensure that OverviewMap respects the initial rotation of attached Maps ([@brianhelba](https://github.com/brianhelba))
+ * [#10302](https://github.com/openlayers/openlayers/pull/10302) - Do not use Math.sign() to support very old browsers ([@ahocevar](https://github.com/ahocevar))
+ * [#10295](https://github.com/openlayers/openlayers/pull/10295) - Do not fail when hit detecting  features without style ([@ahocevar](https://github.com/ahocevar))
+ * [#10293](https://github.com/openlayers/openlayers/pull/10293) - Do not hit detect while tile is loading ([@ahocevar](https://github.com/ahocevar))
+ * [#10292](https://github.com/openlayers/openlayers/pull/10292) - Fix typo in jsdoc in ol/source/WMTS ([@jomue](https://github.com/jomue))
+ * [#10291](https://github.com/openlayers/openlayers/pull/10291) - tabindex without focus condition ([@ahocevar](https://github.com/ahocevar))
+ * [#10286](https://github.com/openlayers/openlayers/pull/10286) - Use passive option to avoid Chrome warning ([@ahocevar](https://github.com/ahocevar))
+ * [#10285](https://github.com/openlayers/openlayers/pull/10285) - Fix WMS GetLegendGraphic example codesandbox error ([@mike-000](https://github.com/mike-000))
+ * [#10283](https://github.com/openlayers/openlayers/pull/10283) - Use the originalEvent in the targetNotEditable condition ([@fredj](https://github.com/fredj))
+ * [#10282](https://github.com/openlayers/openlayers/pull/10282) - Fix documentation of Stroke.lineDash default value ([@jansule](https://github.com/jansule))
+ * [#10259](https://github.com/openlayers/openlayers/pull/10259) - Remove all the sketch features in abortDrawing ([@fredj](https://github.com/fredj))
+ * [#10265](https://github.com/openlayers/openlayers/pull/10265) - Update operators doc in WebGL points layer example ([@fredj](https://github.com/fredj))
+ * [#10256](https://github.com/openlayers/openlayers/pull/10256) - Do not bypass measureTextWidth ([@ahocevar](https://github.com/ahocevar))
+ * [#10264](https://github.com/openlayers/openlayers/pull/10264) - Remove unused variable from vertex shader ([@fredj](https://github.com/fredj))
+ * [#10257](https://github.com/openlayers/openlayers/pull/10257) - Allow View.adjust* methods to take a null opt_anchor ([@brianhelba](https://github.com/brianhelba))
+ * [#10261](https://github.com/openlayers/openlayers/pull/10261) - WebGL / do not throw error when shader compilation gives a warning ([@jahow](https://github.com/jahow))
+ * [#10255](https://github.com/openlayers/openlayers/pull/10255) - Don't use instanceof HTMLElement in handleMapBrowserEvent ([@fredj](https://github.com/fredj))
+
+
+<details>
+  <summary>Dependency Updates</summary>
+
+ * [#10629](https://github.com/openlayers/openlayers/pull/10629) - Bump ol-mapbox-style from 6.0.0 to 6.0.1 ([@openlayers](https://github.com/openlayers))
+ * [#10628](https://github.com/openlayers/openlayers/pull/10628) - Bump puppeteer from 2.1.0 to 2.1.1 ([@openlayers](https://github.com/openlayers))
+ * [#10627](https://github.com/openlayers/openlayers/pull/10627) - Bump handlebars from 4.7.2 to 4.7.3 ([@openlayers](https://github.com/openlayers))
+ * [#10626](https://github.com/openlayers/openlayers/pull/10626) - Bump webpack-dev-server from 3.10.2 to 3.10.3 ([@openlayers](https://github.com/openlayers))
+ * [#10600](https://github.com/openlayers/openlayers/pull/10600) - Bump puppeteer from 2.0.0 to 2.1.0 ([@openlayers](https://github.com/openlayers))
+ * [#10606](https://github.com/openlayers/openlayers/pull/10606) - Bump @babel/core from 7.8.3 to 7.8.4 ([@openlayers](https://github.com/openlayers))
+ * [#10605](https://github.com/openlayers/openlayers/pull/10605) - Bump webpack-dev-server from 3.10.1 to 3.10.2 ([@openlayers](https://github.com/openlayers))
+ * [#10604](https://github.com/openlayers/openlayers/pull/10604) - Bump rollup from 1.29.1 to 1.31.0 ([@openlayers](https://github.com/openlayers))
+ * [#10603](https://github.com/openlayers/openlayers/pull/10603) - Bump @babel/preset-env from 7.8.3 to 7.8.4 ([@openlayers](https://github.com/openlayers))
+ * [#10602](https://github.com/openlayers/openlayers/pull/10602) - Bump url-polyfill from 1.1.7 to 1.1.8 ([@openlayers](https://github.com/openlayers))
+ * [#10601](https://github.com/openlayers/openlayers/pull/10601) - Bump terser-webpack-plugin from 2.3.2 to 2.3.4 ([@openlayers](https://github.com/openlayers))
+ * [#10578](https://github.com/openlayers/openlayers/pull/10578) - Bump sinon from 8.1.0 to 8.1.1 ([@openlayers](https://github.com/openlayers))
+ * [#10577](https://github.com/openlayers/openlayers/pull/10577) - Bump mocha from 7.0.0 to 7.0.1 ([@openlayers](https://github.com/openlayers))
+ * [#10576](https://github.com/openlayers/openlayers/pull/10576) - Bump rollup from 1.29.0 to 1.29.1 ([@openlayers](https://github.com/openlayers))
+ * [#10551](https://github.com/openlayers/openlayers/pull/10551) - Bump handlebars from 4.7.1 to 4.7.2 ([@openlayers](https://github.com/openlayers))
+ * [#10550](https://github.com/openlayers/openlayers/pull/10550) - Bump @babel/preset-env from 7.8.2 to 7.8.3 ([@openlayers](https://github.com/openlayers))
+ * [#10549](https://github.com/openlayers/openlayers/pull/10549) - Bump sinon from 8.0.4 to 8.1.0 ([@openlayers](https://github.com/openlayers))
+ * [#10548](https://github.com/openlayers/openlayers/pull/10548) - Bump @babel/core from 7.8.0 to 7.8.3 ([@openlayers](https://github.com/openlayers))
+ * [#10518](https://github.com/openlayers/openlayers/pull/10518) - Bump front-matter from 3.0.2 to 3.1.0 ([@openlayers](https://github.com/openlayers))
+ * [#10516](https://github.com/openlayers/openlayers/pull/10516) - Bump handlebars from 4.5.3 to 4.7.1 ([@openlayers](https://github.com/openlayers))
+ * [#10514](https://github.com/openlayers/openlayers/pull/10514) - Bump terser-webpack-plugin from 2.3.1 to 2.3.2 ([@openlayers](https://github.com/openlayers))
+ * [#10523](https://github.com/openlayers/openlayers/pull/10523) - Bump sinon from 8.0.2 to 8.0.4 ([@openlayers](https://github.com/openlayers))
+ * [#10515](https://github.com/openlayers/openlayers/pull/10515) - Bump @babel/preset-env from 7.7.7 to 7.8.2 ([@openlayers](https://github.com/openlayers))
+ * [#10517](https://github.com/openlayers/openlayers/pull/10517) - Bump karma-firefox-launcher from 1.2.0 to 1.3.0 ([@openlayers](https://github.com/openlayers))
+ * [#10519](https://github.com/openlayers/openlayers/pull/10519) - Bump @babel/core from 7.7.7 to 7.8.0 ([@openlayers](https://github.com/openlayers))
+ * [#10520](https://github.com/openlayers/openlayers/pull/10520) - Bump globby from 10.0.1 to 11.0.0 ([@openlayers](https://github.com/openlayers))
+ * [#10521](https://github.com/openlayers/openlayers/pull/10521) - Bump rollup-plugin-terser from 5.1.3 to 5.2.0 ([@openlayers](https://github.com/openlayers))
+ * [#10522](https://github.com/openlayers/openlayers/pull/10522) - Bump rollup from 1.28.0 to 1.29.0 ([@openlayers](https://github.com/openlayers))
+ * [#10480](https://github.com/openlayers/openlayers/pull/10480) - Bump mocha from 6.2.2 to 7.0.0 ([@openlayers](https://github.com/openlayers))
+ * [#10482](https://github.com/openlayers/openlayers/pull/10482) - Bump sinon from 8.0.1 to 8.0.2 ([@openlayers](https://github.com/openlayers))
+ * [#10481](https://github.com/openlayers/openlayers/pull/10481) - Bump yargs from 15.0.2 to 15.1.0 ([@openlayers](https://github.com/openlayers))
+ * [#10479](https://github.com/openlayers/openlayers/pull/10479) - Bump rollup from 1.27.14 to 1.28.0 ([@openlayers](https://github.com/openlayers))
+ * [#10466](https://github.com/openlayers/openlayers/pull/10466) - Bump webpack from 4.41.4 to 4.41.5 ([@openlayers](https://github.com/openlayers))
+ * [#10467](https://github.com/openlayers/openlayers/pull/10467) - Bump sinon from 8.0.0 to 8.0.1 ([@openlayers](https://github.com/openlayers))
+ * [#10450](https://github.com/openlayers/openlayers/pull/10450) - Bump @babel/core from 7.7.5 to 7.7.7 ([@openlayers](https://github.com/openlayers))
+ * [#10449](https://github.com/openlayers/openlayers/pull/10449) - Bump eslint from 6.7.2 to 6.8.0 ([@openlayers](https://github.com/openlayers))
+ * [#10448](https://github.com/openlayers/openlayers/pull/10448) - Bump rollup from 1.27.13 to 1.27.14 ([@openlayers](https://github.com/openlayers))
+ * [#10447](https://github.com/openlayers/openlayers/pull/10447) - Bump @babel/preset-env from 7.7.6 to 7.7.7 ([@openlayers](https://github.com/openlayers))
+ * [#10446](https://github.com/openlayers/openlayers/pull/10446) - Bump sinon from 7.5.0 to 8.0.0 ([@openlayers](https://github.com/openlayers))
+ * [#10445](https://github.com/openlayers/openlayers/pull/10445) - Bump webpack from 4.41.2 to 4.41.4 ([@openlayers](https://github.com/openlayers))
+ * [#10444](https://github.com/openlayers/openlayers/pull/10444) - Bump terser-webpack-plugin from 2.3.0 to 2.3.1 ([@openlayers](https://github.com/openlayers))
+ * [#10443](https://github.com/openlayers/openlayers/pull/10443) - Bump webpack-dev-server from 3.9.0 to 3.10.1 ([@openlayers](https://github.com/openlayers))
+ * [#10425](https://github.com/openlayers/openlayers/pull/10425) - Bump elm-pep from 1.0.2 to 1.0.3 ([@openlayers](https://github.com/openlayers))
+ * [#10427](https://github.com/openlayers/openlayers/pull/10427) - Bump webpack-cli from 3.3.2 to 3.3.10 ([@openlayers](https://github.com/openlayers))
+ * [#10426](https://github.com/openlayers/openlayers/pull/10426) - Bump copy-webpack-plugin from 5.0.5 to 5.1.1 ([@openlayers](https://github.com/openlayers))
+ * [#10424](https://github.com/openlayers/openlayers/pull/10424) - Bump eslint from 6.7.1 to 6.7.2 ([@openlayers](https://github.com/openlayers))
+ * [#10423](https://github.com/openlayers/openlayers/pull/10423) - Bump marked from 0.7.0 to 0.8.0 ([@openlayers](https://github.com/openlayers))
+ * [#10422](https://github.com/openlayers/openlayers/pull/10422) - Bump url-polyfill from 1.1.5 to 1.1.7 ([@openlayers](https://github.com/openlayers))
+ * [#10421](https://github.com/openlayers/openlayers/pull/10421) - Bump rollup-plugin-terser from 5.1.2 to 5.1.3 ([@openlayers](https://github.com/openlayers))
+ * [#10420](https://github.com/openlayers/openlayers/pull/10420) - Bump terser-webpack-plugin from 2.2.2 to 2.3.0 ([@openlayers](https://github.com/openlayers))
+ * [#10419](https://github.com/openlayers/openlayers/pull/10419) - Bump rollup from 1.27.9 to 1.27.13 ([@openlayers](https://github.com/openlayers))
+ * [#10418](https://github.com/openlayers/openlayers/pull/10418) - Bump babel-loader from 8.0.5 to 8.0.6 ([@openlayers](https://github.com/openlayers))
+ * [#10399](https://github.com/openlayers/openlayers/pull/10399) - Bump rollup from 1.25.1 to 1.27.9 ([@openlayers](https://github.com/openlayers))
+ * [#10398](https://github.com/openlayers/openlayers/pull/10398) - Bump terser-webpack-plugin from 2.2.1 to 2.2.2 ([@openlayers](https://github.com/openlayers))
+ * [#10397](https://github.com/openlayers/openlayers/pull/10397) - Bump @babel/core from 7.7.4 to 7.7.5 ([@openlayers](https://github.com/openlayers))
+ * [#10396](https://github.com/openlayers/openlayers/pull/10396) - Bump @babel/preset-env from 7.7.4 to 7.7.6 ([@openlayers](https://github.com/openlayers))
+ * [#10365](https://github.com/openlayers/openlayers/pull/10365) - Bump @babel/preset-env from 7.6.3 to 7.7.4 ([@openlayers](https://github.com/openlayers))
+ * [#10366](https://github.com/openlayers/openlayers/pull/10366) - Bump karma-coverage-istanbul-reporter from 2.1.0 to 2.1.1 ([@openlayers](https://github.com/openlayers))
+ * [#10367](https://github.com/openlayers/openlayers/pull/10367) - Bump coveralls from 3.0.7 to 3.0.9 ([@openlayers](https://github.com/openlayers))
+ * [#10368](https://github.com/openlayers/openlayers/pull/10368) - Bump sinon from 7.3.2 to 7.5.0 ([@openlayers](https://github.com/openlayers))
+ * [#10369](https://github.com/openlayers/openlayers/pull/10369) - Bump @babel/core from 7.7.2 to 7.7.4 ([@openlayers](https://github.com/openlayers))
+ * [#10337](https://github.com/openlayers/openlayers/pull/10337) - Bump fs-extra from 8.0.1 to 8.1.0 ([@openlayers](https://github.com/openlayers))
+ * [#10336](https://github.com/openlayers/openlayers/pull/10336) - Bump eslint from 6.6.0 to 6.7.1 ([@openlayers](https://github.com/openlayers))
+ * [#10335](https://github.com/openlayers/openlayers/pull/10335) - Bump yargs from 14.2.0 to 15.0.2 ([@openlayers](https://github.com/openlayers))
+ * [#10334](https://github.com/openlayers/openlayers/pull/10334) - Bump webpack-dev-middleware from 3.6.2 to 3.7.2 ([@openlayers](https://github.com/openlayers))
+ * [#10333](https://github.com/openlayers/openlayers/pull/10333) - Bump copy-webpack-plugin from 5.0.4 to 5.0.5 ([@openlayers](https://github.com/openlayers))
+ * [#10306](https://github.com/openlayers/openlayers/pull/10306) - Bump puppeteer from 1.20.0 to 2.0.0 ([@openlayers](https://github.com/openlayers))
+ * [#10307](https://github.com/openlayers/openlayers/pull/10307) - Bump @babel/core from 7.6.4 to 7.7.2 ([@openlayers](https://github.com/openlayers))
+ * [#10305](https://github.com/openlayers/openlayers/pull/10305) - Bump proj4 from 2.5.0 to 2.6.0 ([@openlayers](https://github.com/openlayers))
+ * [#10304](https://github.com/openlayers/openlayers/pull/10304) - Bump handlebars from 4.4.5 to 4.5.3 ([@openlayers](https://github.com/openlayers))
+ * [#10303](https://github.com/openlayers/openlayers/pull/10303) - Bump glob from 7.1.5 to 7.1.6 ([@openlayers](https://github.com/openlayers))
+ * [#10280](https://github.com/openlayers/openlayers/pull/10280) - Bump rollup-plugin-commonjs from 10.0.0 to 10.1.0 ([@openlayers](https://github.com/openlayers))
+ * [#10279](https://github.com/openlayers/openlayers/pull/10279) - Bump rollup-plugin-terser from 5.0.0 to 5.1.2 ([@openlayers](https://github.com/openlayers))
+ * [#10278](https://github.com/openlayers/openlayers/pull/10278) - Bump eslint from 6.0.0 to 6.6.0 ([@openlayers](https://github.com/openlayers))
+ * [#10277](https://github.com/openlayers/openlayers/pull/10277) - Bump karma-webpack from 4.0.0-rc.6 to 4.0.2 ([@openlayers](https://github.com/openlayers))
+ * [#10276](https://github.com/openlayers/openlayers/pull/10276) - Bump webpack-dev-server from 3.3.1 to 3.9.0 ([@openlayers](https://github.com/openlayers))
+ * [#10251](https://github.com/openlayers/openlayers/pull/10251) - Bump @babel/preset-env from 7.4.4 to 7.6.3 ([@openlayers](https://github.com/openlayers))
+ * [#10250](https://github.com/openlayers/openlayers/pull/10250) - Bump buble from 0.19.7 to 0.19.8 ([@openlayers](https://github.com/openlayers))
+ * [#10249](https://github.com/openlayers/openlayers/pull/10249) - Bump karma-firefox-launcher from 1.1.0 to 1.2.0 ([@openlayers](https://github.com/openlayers))
+ * [#10248](https://github.com/openlayers/openlayers/pull/10248) - Bump html-to-image from 0.1.0 to 0.1.1 ([@openlayers](https://github.com/openlayers))
+ * [#10247](https://github.com/openlayers/openlayers/pull/10247) - Bump terser-webpack-plugin from 2.0.1 to 2.2.1 ([@openlayers](https://github.com/openlayers))
+
+
+</details>

changelog/v6.2.1.md

@@ -0,0 +1,13 @@
+# 6.2.1
+
+This is a bugfix release which resolves bundler issues due to a circular dependency, and brings a few documentation and example fixes.
+
+## List of all changes
+
+ * [#10656](https://github.com/openlayers/openlayers/pull/10656) - Fix for export PDF example compatibility issues, and layer opacity handling. ([@mike-000](https://github.com/mike-000))
+ * [#10653](https://github.com/openlayers/openlayers/pull/10653) - More reliable check for module content beyond classes ([@ahocevar](https://github.com/ahocevar))
+ * [#10617](https://github.com/openlayers/openlayers/pull/10617) - Improve apidoc generation performance ([@MoonE](https://github.com/MoonE))
+ * [#10625](https://github.com/openlayers/openlayers/pull/10625) - Apidoc cleanup navigation html ([@MoonE](https://github.com/MoonE))
+ * [#10649](https://github.com/openlayers/openlayers/pull/10649) - Remove circular dependency ([@ahocevar](https://github.com/ahocevar))
+ * [#10637](https://github.com/openlayers/openlayers/pull/10637) - Develop on 6.2.1 ([@openlayers](https://github.com/openlayers))
+

config/jsdoc/api/index.md

@@ -34,7 +34,7 @@ Interactions for <a href="module-ol_Feature-Feature.html">vector features</a>
 <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 <a href="module-ol_proj.html#.transform">ol/proj#transform()</a> and <a href="module-ol_proj.html#.transformExtent">ol/proj#transformExtent()</a>.</p>
 <a href="module-ol_proj.html">ol/proj</a></td>
-<td><p>Changes to all <a href="module-ol_Object-BaseObject.html">ol/Object</a>s can be observed by calling the <a href="module-ol_Object-BaseObject.html#on">object.on('propertychange')</a> method.  Listeners receive an <a href="module-ol_Object-ObjectEvent.html">ol/Object.ObjectEvent</a> with information on the changed property and old value.</p>
+<td><p>Changes to all <a href="module-ol_Object-BaseObject.html">ol/Object</a>s can be observed by calling the <a href="module-ol_Object-BaseObject.html#on">object.on('propertychange')</a> method.  Listeners receive an <a href="module-ol_Object.ObjectEvent.html">ol/Object.ObjectEvent</a> with information on the changed property and old value.</p>
 <td>
 <a href="module-ol_Geolocation.html">ol/Geolocation</a><br>
 <a href="module-ol_Overlay-Overlay.html">ol/Overlay</a><br></td>

config/jsdoc/api/plugins/api.js

@@ -4,7 +4,7 @@
  */
 exports.defineTags = function(dictionary) {
   dictionary.defineTag('api', {
-    mustHaveValue: false,
+    mustNotHaveValue: true,
     canHaveType: false,
     canHaveName: false,
     onTagged: function(doclet, tag) {
@@ -21,15 +21,11 @@ exports.defineTags = function(dictionary) {
  * from the documentation.
  */
 
-const api = [];
+const api = {};
 const classes = {};
 const types = {};
 const modules = {};
 
-function hasApiMembers(doclet) {
-  return doclet.longname.split('#')[0] == this.longname;
-}
-
 function includeAugments(doclet) {
   // Make sure that `observables` and `fires` are taken from an already processed `class` doclet.
   // This is necessary because JSDoc generates multiple doclets with the same longname.
@@ -116,10 +112,9 @@ exports.handlers = {
     const doclet = e.doclet;
     if (doclet.stability) {
       modules[doclet.longname.split(/[~\.]/).shift()] = true;
-      api.push(doclet);
+      api[doclet.longname.split('#')[0]] = true;
     }
     if (doclet.kind == 'class') {
-      modules[doclet.longname.split(/[~\.]/).shift()] = true;
       if (!(doclet.longname in classes)) {
         classes[doclet.longname] = doclet;
       } else if ('augments' in doclet) {
@@ -160,7 +155,7 @@ exports.handlers = {
       if (doclet.isEnum || doclet.kind == 'typedef') {
         continue;
       }
-      if (doclet.kind == 'class' && api.some(hasApiMembers, doclet)) {
+      if (doclet.kind == 'class' && doclet.longname in api) {
         // Mark undocumented classes with documented members as unexported.
         // This is used in ../template/tmpl/container.tmpl to hide the
         // constructor from the docs.

config/jsdoc/api/plugins/inheritdoc.js

@@ -5,7 +5,7 @@
 
 exports.defineTags = function(dictionary) {
   dictionary.defineTag('inheritDoc', {
-    mustHaveValue: false,
+    mustNotHaveValue: true,
     canHaveType: false,
     canHaveName: false,
     onTagged: function(doclet, tag) {
@@ -42,62 +42,62 @@ exports.handlers = {
 
   parseComplete: function(e) {
     let ancestors, candidate, candidates, doclet, i, j, k, l, key;
-    let incompleteDoclet, stability, incomplete, incompletes;
+    let 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);
-              }
+      if (!doclet.augments || !incompletes) {
+        continue;
+      }
+      ancestors = doclet.augments.slice();
+      // 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) {
+              Array.prototype.push.apply(ancestors, 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;
-              }
+      }
+      // walk through all inheritDoc members
+      let incompleteDoclet;
+      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];
-                      }
+        }
+        // find the documented ancestor
+        for (k = ancestors.length - 1; k >= 0; --k) {
+          candidates = lookup[ancestors[k] + '#' + incomplete];
+          if (candidates) {
+            for (l = candidates.length - 1; l >= 0; --l) {
+              candidate = candidates[l];
+              if (candidate && !candidate.inheritdoc) {
+                stability = candidate.stability || incompleteDoclet.stability;
+                if (stability) {
+                  incompleteDoclet.stability = stability;
+                  for (key in candidate) {
+                    if (candidate.hasOwnProperty(key) &&
+                      keepKeys.indexOf(key) == -1) {
+                      incompleteDoclet[key] = candidate[key];
                     }
-                    // We have found a matching parent doc and applied it so we
-                    // don't want to ignore this doclet anymore.
-                    incompleteDoclet.ignore = false;
-                    // We found a match so we can stop break
-                    break;
                   }
+                  // We have found a matching parent doc and applied it so we
+                  // don't want to ignore this doclet anymore.
+                  incompleteDoclet.ignore = false;
+                  // We found a match so we can stop break
+                  break;
                 }
               }
             }

config/jsdoc/api/template/less/common.less

@@ -1,9 +0,0 @@
-@navWidth: 250px;
-@colorSubtitle: rgb(119, 156, 52);
-@colorRed: rgb(238, 125, 125);
-@colorLink: #2a6496;
-@colorBgNavi: #2a2a2a;
-
-.font-description () {
-    font-family: "freight-text-pro",Georgia,Cambria,"Times New Roman",Times,serif
-}

config/jsdoc/api/template/less/footer.less

@@ -1,10 +0,0 @@
-@import "common.less";
-
-footer {
-    margin: 15px 0;
-    padding-top: 15px;
-    border-top: 1px solid #e1e1e1;
-    .font-description();
-    font-size: 0.8em;
-    color: gray;
-}

config/jsdoc/api/template/less/jaguar.less

@@ -1,22 +0,0 @@
-@import "common.less";
-
-// normalize
-html, body {
-    font: 1em "jaf-bernino-sans","Lucida Grande","Lucida Sans Unicode","Lucida Sans",Geneva,Verdana,sans-serif;
-    background-color: #fff;
-}
-ul, ol {
-    margin: 0;
-    padding: 0;
-}
-li {
-    list-style-type: none;
-}
-
-#wrap {
-    position: relative;
-}
-
-@import "navigation.less";
-@import "main.less";
-@import "footer.less";

config/jsdoc/api/template/less/main.less

@@ -1,288 +0,0 @@
-@import "common.less";
-
-.main {
-    padding: 20px 20px;
-    margin-left: @navWidth;
-    .page-title {
-        display: none;
-    }
-
-    h1 {
-        font-weight: bold;
-        font-size: 1.6em;
-        margin: 0;
-    }
-
-    h2 {
-        font-weight: bold;
-        font-size: 1.5em;
-        margin: 0;
-    }
-
-    h3 {
-        font-weight: bold;
-        font-size: 12px;
-        margin: 5px 0;
-    }
-
-    h4 {
-        font-weight: bold;
-        font-size: 1em;
-    }
-
-    h5 {
-        font-weight: bold;
-        font-size: 12px;
-    }
-
-    dd {
-        font-size: 12px;
-    }
-
-    h4.name {
-        span.type-signature {
-            display: inline-block;
-            border-radius: 3px;
-            background-color: gray;
-            color: #fff;
-            font-size: 0.7em;
-            padding: 2px 4px;
-        }
-
-        span.type {
-            margin-left: 5px;
-        }
-
-        span.glyphicon {
-            display: inline-block;
-            vertical-align: middle;
-            color: #e1e1e1;
-            margin-left: 7px;
-        }
-
-        span.returnType {
-            margin-left: 3px;
-            background-color: transparent!important;
-            color: gray!important;
-        }
-    }
-
-
-    span.static {
-        display: inline-block;
-        border-radius: 3px;
-        background-color: @colorSubtitle!important;
-        color: #fff;
-        font-size: 0.7em;
-        padding: 2px 4px;
-        margin-right: 8px;
-    }
-
-    span.number {
-        background-color: #ccc!important;
-        color: #2fa2b1!important;
-    }
-
-    span.string {
-        background-color: #ccc!important;
-        color: #2fa2b1!important;
-    }
-
-    span.object {
-        background-color: #ccc!important;
-        color: #2fa2b1!important;
-    }
-
-    span.array {
-        background-color: #ccc!important;
-        color: #2fa2b1!important;
-    }
-
-    span.boolean {
-        background-color: #ccc!important;
-        color: #2fa2b1!important;
-    }
-
-    .subsection-title {
-        font-size: 14px;
-        margin-top: 30px;
-        color: @colorSubtitle;
-    }
-
-    .description {
-        margin-top: 10px;
-        // .font-description();
-        font-size: 13px;
-
-        p {
-            font-size: 13px;
-        }
-    }
-
-    .tag-source {
-        font-size: 12px;
-    }
-    dt.tag-source {
-        margin-top: 5px;
-    }
-
-    dt.tag-todo {
-        font-size: 10px;
-        display: inline-block;
-        background-color: @colorLink;
-        color: #fff;
-        padding: 2px 4px;
-        border-radius: 5px;
-    }
-
-    .type-signature {
-        font-size: 12px;
-    }
-
-    .tag-deprecated {
-        display: inline-block;
-        font-size: 10px;
-    }
-
-    .important {
-        background-color: @colorRed;
-        color: #fff;
-        padding: 2px 4px;
-        border-radius: 5px;
-    }
-
-    .nameContainer {
-        position: relative;
-        margin-top: 20px;
-        padding-top: 5px;
-        border-top: 1px solid #e1e1e1;
-
-        .inherited {
-            display: inline-block;
-            border-radius: 3px;
-            background-color: #888!important;
-            font-size: 0.7em;
-            padding: 2px 4px;
-            margin-right: 5px;
-            a {
-                color: #fff;
-            }
-        }
-
-        .tag-source {
-            position: absolute;
-            top: 17px;
-            right: 0;
-            font-size: 10px;
-            a {
-                color: gray;
-            }
-        }
-
-        &.inherited {
-            color: gray;
-        }
-
-        h4 {
-            margin-right: 150px;
-            line-height: 1.3;
-            
-            .signature {
-                font-size: 13px;
-                font-weight: normal;
-                font-family: Menlo,Monaco,Consolas,"Courier New",monospace;
-            }
-        }
-    }
-
-    pre {
-        font-size: 11px;
-    }
-
-    table {
-        width: 100%;
-        margin-bottom: 15px;
-
-        th {
-            padding: 3px 3px;
-        }
-
-        td {
-            vertical-align: top;
-            padding: 5px 3px;
-        }
-
-        .name {
-            width: 110px;
-        }
-
-        .type {
-            width: 60px;
-            color: #aaa;
-            font-size: 11px;
-        }
-
-        .attributes {
-            width: 80px;
-            color: #aaa;
-            font-size: 11px;
-        }
-
-        .description {
-            font-size: 12px;
-            p {
-                margin: 0;
-            }
-        }
-
-        .optional {
-            float: left;
-            border-radius: 3px;
-            background-color: #ddd!important;
-            font-size: 0.7em;
-            padding: 2px 4px;
-            margin-right: 5px;
-            color: gray;
-        }
-    }
-
-    .readme {
-        p {
-            margin-top: 15px;
-            line-height: 1.2;
-            font-size: 0.85em;
-        }
-
-        h1 {
-            font-size: 1.7em;
-        }
-
-        h2 {
-            margin-top: 30px;
-            margin-bottom: 10px;
-            padding-bottom: 10px;
-            border-bottom: 1px solid #e1e1e1;
-        }
-
-        li {
-            font-size: 0.9em;
-            margin-bottom: 10px;
-        }
-    }
-
-    article {
-        ol, ul {
-            margin-left: 25px;
-        }
-
-        ol > li {
-            list-style-type: decimal;
-            margin-bottom: 5px;
-        }
-
-        ul > li {
-            margin-bottom: 5px;
-            list-style-type: disc;
-        }
-    }
-}

config/jsdoc/api/template/less/navigation.less

@@ -1,103 +0,0 @@
-@import "common.less";
-
-::-webkit-scrollbar {
-    width: 8px;
-    background-color: transparent;
-}
-
-::-webkit-scrollbar-thumb {
-    background-color: gray;
-    border-radius: 4px;
-}
-
-.navigation {
-    position: fixed;
-    float: left;
-    width: @navWidth;
-    height: 100%;
-    background-color: @colorBgNavi;
-
-    .applicationName {
-        margin: 0;
-        margin-top: 15px;
-        padding: 10px 15px;
-        font: bold 1.25em Helvetica;
-        color: #fff;
-
-        a {
-            color: #fff;
-        }
-    }
-
-    .search {
-        padding: 10px 15px;
-
-        input {
-            background-color: #333;
-            color: #fff;
-            border-color: #555;
-        }
-    }
-
-    .list {
-        padding: 10px 15px 0 15px;
-        position: relative;
-        overflow: auto;
-        width: 100%;
-    }
-
-    li.item {
-        margin-bottom: 8px;
-        padding-bottom: 8px;
-        border-bottom: 1px solid #333;
-
-        a {
-            color: #bbb;
-            &:hover {
-                color: #fff;
-            }
-        }
-        .title {
-            cursor: pointer;
-            position: relative;
-            a {
-                color: #e1e1e1;
-                &:hover {
-                    color: #fff;
-                }
-            }
-            display: block;
-            font-size: 0.8em;
-
-            .static {
-                display: block;
-                border-radius: 3px;
-                background-color: @colorSubtitle;
-                color: #000;
-                font-size: 0.7em;
-                padding: 2px 4px;
-                float: right;
-            }
-        }
-
-        .subtitle {
-            margin-top: 10px;
-            font: bold 0.65em Helvetica;
-            color: @colorSubtitle;
-            display: block;
-        }
-
-
-        ul {
-            & > li {
-                font-size: 0.7em;
-                padding-left: 8px;
-                margin-top: 2px;
-            }
-        }
-
-        .itemMembers {
-            display: none;
-        }
-    }
-}

config/jsdoc/api/template/publish.js

@@ -188,6 +188,12 @@ function attachModuleSymbols(doclets, modules) {
   });
 }
 
+function getPrettyName(longname) {
+  return longname
+    .split('~')[0]
+    .replace('module:', '');
+}
+
 /**
  * Create the navigation sidebar.
  * @param {object} members The members that will be used to create the sidebar.
@@ -206,47 +212,82 @@ function buildNav(members) {
   // merge namespaces and classes, then sort
   const merged = members.modules.concat(members.classes);
   merged.sort(function(a, b) {
-    if (a.longname > b.longname) {
+    const prettyNameA = getPrettyName(a.longname).toLowerCase();
+    const prettyNameB = getPrettyName(b.longname).toLowerCase();
+    if (prettyNameA > prettyNameB) {
       return 1;
     }
-    if (a.longname < b.longname) {
+    if (prettyNameA < prettyNameB) {
       return -1;
     }
     return 0;
   });
 
-  function createEntry(type, v) {
-    return {
-      type: type,
-      longname: v.longname,
-      name: v.name,
-      classes: find({
-        kind: 'class',
-        memberof: v.longname
-      }).map(createEntry.bind(this, 'class')),
-      members: find({
-        kind: 'member',
-        memberof: v.longname
-      }),
-      methods: find({
-        kind: 'function',
-        memberof: v.longname
-      }),
-      typedefs: find({
-        kind: 'typedef',
-        memberof: v.longname
-      }),
-      events: find({
-        kind: 'event',
-        memberof: v.longname
-      })
-    };
-  }
   _.each(merged, function(v) {
     // exclude interfaces from sidebar
-    if (v.interface !== true) {
-      if (v.kind == 'module') {
-        nav.push(createEntry('module', v));
+    if (v.interface !== true && v.kind === 'class') {
+      nav.push({
+        type: 'class',
+        longname: v.longname,
+        prettyname: getPrettyName(v.longname),
+        name: v.name,
+        module: find({
+          kind: 'module',
+          longname: v.memberof
+        })[0],
+        members: find({
+          kind: 'member',
+          memberof: v.longname
+        }),
+        methods: find({
+          kind: 'function',
+          memberof: v.longname
+        }),
+        typedefs: find({
+          kind: 'typedef',
+          memberof: v.longname
+        }),
+        fires: v.fires,
+        events: find({
+          kind: 'event',
+          memberof: v.longname
+        })
+      });
+    } else if (v.kind == 'module') {
+      const classes = find({
+        kind: 'class',
+        memberof: v.longname
+      });
+      const members = find({
+        kind: 'member',
+        memberof: v.longname
+      });
+      const methods = find({
+        kind: 'function',
+        memberof: v.longname
+      });
+      const typedefs = find({
+        kind: 'typedef',
+        memberof: v.longname
+      });
+      const events = find({
+        kind: 'event',
+        memberof: v.longname
+      });
+      // Only add modules that contain more than just classes with their
+      // associated Options typedef
+      if (typedefs.length > classes.length || members.length + methods.length > 0) {
+        nav.push({
+          type: 'module',
+          longname: v.longname,
+          prettyname: getPrettyName(v.longname),
+          name: v.name,
+          members: members,
+          methods: methods,
+          typedefs: typedefs,
+          fires: v.fires,
+          events: events
+        });
       }
     }
   });
@@ -436,6 +477,7 @@ exports.publish = function(taffyData, opts, tutorials) {
   // index page displays information from package.json and lists files
   const files = find({kind: 'file'});
 
+  view.navigationHtml = helper.resolveLinks(view.partial('navigation.tmpl'));
   generate('Index',
     [{kind: 'mainpage', readme: opts.readme, longname: (opts.mainpagetitle) ? opts.mainpagetitle : 'Main Page'}].concat(files),
     indexUrl);

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

@@ -1,121 +1,158 @@
 $(function () {
-    // Search Items
-    $('#search').on('keyup', function (e) {
-        var value = $(this).val();
-        var $el = $('.navigation');
+  // Search Items
+  $('#include_modules').change(function (e) {
+    console.log('change');
+    if ($(this).is(':checked')) {
 
-        if (value) {
-            var regexp = new RegExp(value, 'i');
-            $el.find('li, .itemMembers').hide();
+    } else {
 
-            $el.find('li').each(function (i, v) {
-                var $item = $(v);
+    }
+  });
 
-                if ($item.data('name') && regexp.test($item.data('name'))) {
-                    const container = $item.parent().parent().parent();
-                    container.show();
-                    container.closest('.itemMembers').show();
-                    container.closest('.item').show();
-                    $item.show();
-                    $item.closest('.itemMembers').show();
-                    $item.closest('.item').show();
-                }
-            });
-        } else {
-            $el.find('.item, .itemMembers').hide();
-            $('.navigation>ul>li').show();
+  var getSearchWeight = function (searchTerm, $matchedItem) {
+    let weight = 0;
+    // We could get smarter on the weight here
+    if ($matchedItem.data('shortname')
+      && $matchedItem.data('shortname').toLowerCase() === searchTerm.toLowerCase()) {
+      weight++;
+    }
+    return weight;
+  };
+
+  // sort function callback
+  var weightSorter = function (a, b) {
+    var aW = $(a).data('weight') || 0;
+    var bW = $(b).data('weight') || 0;
+    return bW - aW;
+  };
+
+  // Search Items
+  $('#search').on('keyup', function (e) {
+    var value = $(this).val();
+    var $el = $('.navigation');
+
+    if (value && value.length > 1) {
+      var regexp = new RegExp(value, 'i');
+      $el.find('li, .member-list').hide();
+
+      $el.find('li').each(function (i, v) {
+        const $item = $(v);
+        const name = $item.data('name');
+
+        if (name && regexp.test(name)) {
+          const $classEntry = $item.closest('.item');
+          const $members = $item.closest('.member-list');
+
+          // Do the weight thing
+          $classEntry.removeData('weight');
+          $classEntry.show();
+          const weight = getSearchWeight(value, $classEntry);
+          $classEntry.data('weight', weight);
+
+          $members.show();
+          $classEntry.show();
+          $item.show();
         }
+      });
 
-        $el.find('.list').scrollTop(0);
-    });
+      $(".navigation ul.list li.item:visible")
+        .sort(weightSorter) // sort elements
+        .appendTo(".navigation ul.list"); // append again to the list
 
-    // Toggle when click an item element
-    $('.navigation').on('click', '.title', function (e) {
-        $(this).parent().find('.itemMembers').toggle();
-    });
-
-    // Show an item related a current documentation automatically
-    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) {
-        $currentItem
-            .remove()
-            .prependTo('.navigation .list')
-            .show()
-            .find('.itemMembers')
-                .show();
+    } else {
+      $el.find('.item, .member-list').show();
     }
 
-    // Auto resizing on navigation
-    var _onResize = function () {
-        var height = $(window).height();
-        var $el = $('.navigation');
+    $el.find('.list').scrollTop(0);
+  });
 
-        $el.height(height).find('.list').height(height - 133);
-    };
+  // Toggle when click an item element
+  $('.navigation').on('click', '.toggle', function (e) {
+    $(this).parent().parent().find('.member-list').toggle();
+  });
 
-    $(window).on('resize', _onResize);
-    _onResize();
+  // Show an item related a current documentation automatically
+  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)');
 
-    var currentVersion = document.getElementById('package-version').innerHTML;
+  if ($currentItem.length) {
+    $currentItem
+      .remove()
+      .prependTo('.navigation .list')
+      .show()
+      .find('.member-list')
+      .show();
+  }
 
-    // warn about outdated version
-    var packageUrl = 'https://raw.githubusercontent.com/openlayers/openlayers.github.io/build/package.json';
-    fetch(packageUrl).then(function(response) {
-      return response.json();
-    }).then(function(json) {
-      var latestVersion = json.version;
-      document.getElementById('latest-version').innerHTML = latestVersion;
-      var url = window.location.href;
-      var branchSearch = url.match(/\/([^\/]*)\/apidoc\//);
-      var cookieText = 'dismissed=-' + latestVersion + '-';
-      var dismissed = document.cookie.indexOf(cookieText) != -1;
-      if (!dismissed && /^v[0-9\.]*$/.test(branchSearch[1]) && currentVersion != latestVersion) {
-        var link = url.replace(branchSearch[0], '/latest/apidoc/');
-        fetch(link, {method: 'head'}).then(function(response) {
-          var a = document.getElementById('latest-link');
-          a.href = response.status == 200 ? link : '../../latest/apidoc/';
-        });
-        var latestCheck = document.getElementById('latest-check');
-        latestCheck.style.display = '';
-        document.getElementById('latest-dismiss').onclick = function() {
-          latestCheck.style.display = 'none';
-          document.cookie = cookieText;
-        }
+  // Auto resizing on navigation
+  var _onResize = function () {
+    var height = $(window).height();
+    var $el = $('.navigation');
+
+    $el.height(height).find('.list').height(height - 133);
+  };
+
+  $(window).on('resize', _onResize);
+  _onResize();
+
+  var currentVersion = document.getElementById('package-version').innerHTML;
+
+  // warn about outdated version
+  var packageUrl = 'https://raw.githubusercontent.com/openlayers/openlayers.github.io/build/package.json';
+  fetch(packageUrl).then(function(response) {
+    return response.json();
+  }).then(function(json) {
+    var latestVersion = json.version;
+    document.getElementById('latest-version').innerHTML = latestVersion;
+    var url = window.location.href;
+    var branchSearch = url.match(/\/([^\/]*)\/apidoc\//);
+    var cookieText = 'dismissed=-' + latestVersion + '-';
+    var dismissed = document.cookie.indexOf(cookieText) != -1;
+    if (branchSearch && !dismissed && /^v[0-9\.]*$/.test(branchSearch[1]) && currentVersion != latestVersion) {
+      var link = url.replace(branchSearch[0], '/latest/apidoc/');
+      fetch(link, {method: 'head'}).then(function(response) {
+        var a = document.getElementById('latest-link');
+        a.href = response.status == 200 ? link : '../../latest/apidoc/';
+      });
+      var latestCheck = document.getElementById('latest-check');
+      latestCheck.style.display = '';
+      document.getElementById('latest-dismiss').onclick = function() {
+        latestCheck.style.display = 'none';
+        document.cookie = cookieText;
       }
-    });
+    }
+  });
 
-    // create source code links to github
-    var srcLinks = $('div.tag-source');
-    srcLinks.each(function(i, el) {
-      var textParts = el.innerHTML.trim().split(', ');
-      var link = 'https://github.com/openlayers/openlayers/blob/v' + currentVersion + '/src/ol/' +
-          textParts[0];
-      el.innerHTML = '<a href="' + link + '">' + textParts[0] + '</a>, ' +
-          '<a href="' + link + textParts[1].replace('line ', '#L') + '">' +
-          textParts[1] + '</a>';
-    });
+  // create source code links to github
+  var srcLinks = $('div.tag-source');
+  srcLinks.each(function(i, el) {
+    var textParts = el.innerHTML.trim().split(', ');
+    var link = 'https://github.com/openlayers/openlayers/blob/v' + currentVersion + '/src/ol/' +
+      textParts[0];
+    el.innerHTML = '<a href="' + link + '">' + textParts[0] + '</a>, ' +
+      '<a href="' + link + textParts[1].replace('line ', '#L') + '">' +
+      textParts[1] + '</a>';
+  });
 
-    // Highlighting current anchor
+  // Highlighting current anchor
 
-    var anchors = $('.anchor');
-    var _onHashChange = function () {
-        var activeHash = window.document.location.hash
-            .replace(/\./g, '\\.') // Escape dot in element id
-            .replace(/\~/g, '\\~'); // Escape tilde in element id
+  var anchors = $('.anchor');
+  var _onHashChange = function () {
+    var activeHash = window.document.location.hash
+      .replace(/\./g, '\\.') // Escape dot in element id
+      .replace(/\~/g, '\\~'); // Escape tilde in element id
 
-        anchors.removeClass('highlighted');
+    anchors.removeClass('highlighted');
 
-        if (activeHash.length > 0) {
-            anchors.filter(activeHash).addClass('highlighted');
-        }
-    };
+    if (activeHash.length > 0) {
+      anchors.filter(activeHash).addClass('highlighted');
+    }
+  };
 
-    $(window).on('hashchange', _onHashChange);
-    _onHashChange();
+  $(window).on('hashchange', _onHashChange);
+  _onHashChange();
 });

config/jsdoc/api/template/static/styles/jaguar.css

@@ -36,7 +36,7 @@
 .navbar-inverse .navbar-nav>li>a:hover,
 .navbar-inverse .navbar-nav>li>a:focus,
 .navbar-inverse .navbar-nav>li>a.active
- {
+{
   outline:0;
   color: #fff;
   background-color: #268591;
@@ -106,6 +106,15 @@ li {
 .navigation .applicationName a {
   color: #fff;
 }
+.navigation .include-modules {
+  color: #e1e1e1;
+  float: right;
+  font-size: 0.75em;
+  padding: 5px 15px;
+}
+.navigation .include-modules input {
+  vertical-align: text-bottom;
+}
 .navigation .search {
   padding: 10px 15px;
 }
@@ -125,6 +134,11 @@ li {
   padding-bottom: 8px;
   border-bottom: 1px solid #333;
 }
+
+.navigation li.perfect-match {
+  border: 5px solid orange;
+}
+
 .navigation li.item a {
   color: #bbb;
 }
@@ -158,13 +172,20 @@ li {
   color: #1F6B75;
   display: block;
 }
+.navigation li.item .modulelink {
+  position: relative;
+  font-size: 0.75em;
+  padding-left: 5px;
+  top: -5px;
+}
 .navigation li.item ul > li {
   font-size: 0.75em;
   padding-left: 8px;
   margin-top: 2px;
 }
-.navigation li.item .itemMembers {
+.navigation li.item .member-list {
   display: none;
+  padding-left: 8px;
 }
 .main {
   padding: 20px 20px;

config/jsdoc/api/template/static/styles/site.css

@@ -0,0 +1,81 @@
+/* Carbon adds (see https://sell.buysellads.com) */
+
+#ad {
+  margin-left: 1em;
+  float: right;
+  width: 330px;
+  min-height: 125px;
+}
+
+#carbonads {
+  font-family: "Quattrocento Sans", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
+}
+
+#carbonads {
+  display: flex;
+}
+
+#carbonads a {
+  color: inherit;
+  text-decoration: none;
+}
+
+#carbonads a:hover {
+  color: inherit;
+}
+
+#carbonads span {
+  position: relative;
+  display: block;
+  overflow: hidden;
+}
+
+#carbonads .carbon-wrap {
+  display: flex;
+}
+
+.carbon-img {
+  display: block;
+  margin: 0;
+  line-height: 1;
+}
+
+.carbon-img img {
+  display: block;
+}
+
+.carbon-text {
+  font-size: 13px;
+  padding: 10px;
+  line-height: 1.5;
+  text-align: left;
+}
+
+.carbon-poweredby {
+  display: block;
+  padding: 8px 10px;
+  text-align: center;
+  text-transform: uppercase;
+  letter-spacing: .5px;
+  font-weight: 600;
+  font-size: 9px;
+  line-height: 1;
+}
+
+#carbonads a.carbon-poweredby {
+  color: #aaa;
+}
+
+/* Clear the float after the advertisement. */
+
+.container-overview {
+  clear: both;
+}
+
+pre.source {
+  clear: both;
+}
+
+section.content {
+  overflow-y: auto;
+}

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

@@ -9,7 +9,7 @@
     <?js= self.partial('source.tmpl', doc) ?>
 <?js } else { ?>
 
-<section>
+<section class="content">
 
 <header>
     <h2><?js if (doc.ancestors && doc.ancestors.length) { ?>
@@ -41,6 +41,9 @@
         <pre class="prettyprint source"><code>import <?js= doc.name ?> from '<?js= importPath ?>';</code></pre>
       <?js } ?>
     <?js } ?>
+    <div id="ad">
+        <script async type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CE7DV53U&placement=openlayersorg" id="_carbonads_js"></script>
+    </div>
     <?js if (doc.classdesc) { ?>
         <div class="class-description"><?js= doc.classdesc ?></div>
     <?js } ?>

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

@@ -73,6 +73,7 @@ var version = obj.packageInfo.version;
     <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
     <link type="text/css" rel="stylesheet" href="styles/bootstrap.min.css">
     <link type="text/css" rel="stylesheet" href="styles/jaguar.css">
+    <link type="text/css" rel="stylesheet" href="styles/site.css">
 </head>
 <body>
 
@@ -91,7 +92,7 @@ var version = obj.packageInfo.version;
 </div>
 
 <div id="wrap" class="clearfix">
-    <?js= this.partial('navigation.tmpl', this) ?>
+    <?js= this.navigationHtml ?>
     <div class="main">
         <h1 class="page-title" data-filename="<?js= filename ?>"><?js= title ?></h1>
         <div id="latest-check" class="alert alert-warning alert-dismissible" role="alert" style="display:none">

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

@@ -1,103 +1,59 @@
 <?js
 var self = this;
+
 function toShortName(name) {
-  return name.indexOf('module:') === 0 ? name.split('/').pop() : name;
+    return name.indexOf('module:') === 0 ? name.split('/').pop() : name;
+}
+
+function getItemCssClass(type) {
+    if (type === 'module') {
+        return 'glyphicon-plus';
+    } else if (type === 'class') {
+        return 'glyphicon-chevron-right';
+    }
+    return '';
+}
+
+const printList = v => { ?>
+                    <li data-name="<?js= v.longname ?>"><?js
+}
+const printListWithStability = v => {
+    const cls = v.stability && v.stability !== 'stable' ? ' class="unstable"' : ''; ?>
+                    <li data-name="<?js= v.longname ?>"<?js= cls ?>><?js
+}
+
+function listContent(item, title, listItemPrinter) {
+    const type = title.toLowerCase();
+    if (item[type] && item[type].length) { ?>
+            <div class="member-list">
+                <span class="subtitle"><?js= title ?></span>
+                <ul><?js
+        item[type].forEach(function (v) {
+            listItemPrinter(v); ?><?js= self.linkto(v.longname, toShortName(v.name)) ?><?js
+         }); ?>
+                </ul>
+            </div><?js
+    }
 }
 ?>
 <div class="navigation">
     <div class="search">
         <input id="search" type="text" class="form-control input-sm" placeholder="Search Documentation">
     </div>
-    <ul class="list">
-    <?js
-    let navbuilder;
-    this.nav.forEach(navbuilder = function (item) {
-    ?>
-        <li class="item" data-name="<?js= item.longname ?>">
+    <ul class="list"><?js
+        this.nav.forEach(function (item) { ?>
+        <li class="item" data-name="<?js= item.longname ?>" data-shortname="<?js= item.name.toLowerCase() ?>">
             <span class="title">
-                <?js= self.linkto(item.longname, item.type === 'module' ? item.longname.replace('module:', '') : item.name) ?>
-                <?js if (item.type === 'namespace' &&
-                        (item.members.length + item.typedefs.length + item.methods.length +
-                         item.events.length > 0)) { ?>
-                <?js } ?>
-            </span>
-            <ul class="members itemMembers">
-            <?js
-            if (item.classes.length) {
-            ?>
-            <span class="subtitle">Classes</span>
-            <?js
-                item.classes.forEach(function (v) {
-                    navbuilder(v);
-                });
-            }
-            ?>
-            </ul>
-            <ul class="members itemMembers">
-            <?js
-            if (item.members.length) {
-            ?>
-            <span class="subtitle">Members</span>
-            <?js
-                item.members.forEach(function (v) {
-            ?>
-                <li data-name="<?js= v.longname ?>"><?js= self.linkto(v.longname, toShortName(v.name)) ?></li>
-            <?js
-                });
-            }
-            ?>
-            </ul>
-            <ul class="typedefs itemMembers">
-            <?js
-            if (item.typedefs.length) {
-            ?>
-            <span class="subtitle">Typedefs</span>
-            <?js
-                item.typedefs.forEach(function (v) {
-            ?>
-                <li data-name="<?js= v.longname ?>" class="<?js= (v.stability && v.stability !== 'stable') ? 'unstable' : ''?>">
-                    <?js= self.linkto(v.longname, toShortName(v.name)) ?>
-                </li>
-            <?js
-                });
-            }
-            ?>
-            </ul>
-            <ul class="methods itemMembers">
-            <?js
-            if (item.methods.length) {
-            ?>
-            <span class="subtitle">Methods</span>
-            <?js
-
-                item.methods.forEach(function (v) {
-            ?>
-                <li data-name="<?js= v.longname ?>" class="<?js= (v.stability && v.stability !== 'stable') ? 'unstable' : ''?>">
-                    <?js= self.linkto(v.longname, toShortName(v.name)) ?>
-                </li>
-            <?js
-                });
-            }
-            ?>
-            </ul>
-            <ul class="fires itemMembers">
-            <?js
-            if (item.fires && item.fires.length) {
-            ?>
-            <span class="subtitle">Fires</span>
-            <?js
-                item.fires.forEach(function (v) {
-                    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, toShortName(v.name)) ?>
-                </li>
-            <?js
-                });
-            }
-            ?>
-            </ul>
-        </li>
-    <?js }); ?>
+                <span class="glyphicon <?js= getItemCssClass(item.type) ?> toggle"></span>
+                <?js= self.linkto(item.longname, item.prettyname) ?>
+            </span><?js
+                listContent(item, 'Members', printList);
+                listContent(item, 'Typedefs', printListWithStability);
+                listContent(item, 'Methods', printListWithStability);
+                if (item.fires) {
+                    const fires = item.fires.map(v => self.find({longname: v})[0] || {longname: v, name: v.split(/#?event:/)[1]});
+                    listContent({fires: fires}, 'Fires', printListWithStability)
+                }
+        }); ?>
     </ul>
 </div>

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/api/template/tmpl/params.tmpl

@@ -16,9 +16,8 @@
         }
     });
     
-    /* determine if we need extra columns, "attributes" and "default" */
+    /* determine if we need extra "attributes" column */
     params.hasAttributes = false;
-    params.hasDefault = false;
     params.hasName = false;
     
     var colspan = 2;
@@ -40,10 +39,6 @@
             params.hasName = true;
         }
         
-        if (typeof param.defaultvalue !== 'undefined') {
-            ++colspan;
-            params.hasDefault = true;
-        }
     });
 ?>
 
@@ -56,10 +51,6 @@
 		
 		<th>Type</th>
 		
-		<?js if (params.hasDefault) {?>
-		<th>Default</th>
-		<?js } ?>
-		
 		<th class="last">Description</th>
 	</tr>
 	</thead>
@@ -80,18 +71,14 @@
             <td class="type">
             <?js if (param.type && param.type.names) {?>
                 <?js= self.partial('type.tmpl', param.type.names) ?>
+                <?js if (typeof param.defaultvalue !== 'undefined') { ?>
+                    (defaults to <?js= self.htmlsafe(param.defaultvalue) ?>)
+                <?js } ?>
             <?js } ?>
             </td>
-            
-            <?js if (params.hasDefault) {?>
-                <td class="default">
-                <?js if (typeof param.defaultvalue !== 'undefined') { ?>
-                    <?js= self.htmlsafe(param.defaultvalue) ?>
-                <?js } ?>
-                </td>
+
             <?js } ?>
-            <?js } ?>
-            
+
             <td<?js= (param.subparams ? ' colspan=' + colspan : ' ') ?> class="description last">
                 <?js if (param.stability) { ?>
                     <?js= self.partial('stability.tmpl', param) ?>

config/jsdoc/info/virtual-plugin.js

@@ -6,7 +6,7 @@ exports.defineTags = function(dictionary) {
 
   const classTag = dictionary.lookUp('class');
   dictionary.defineTag('interface', {
-    mustHaveValue: false,
+    mustNotHaveValue: true,
     onTagged: function(doclet, tag) {
       classTag.onTagged.apply(this, arguments);
       doclet.virtual = true;

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'` or `'hybrid'`.
+`renderMode` must be `'image'`, `'hybrid'` or `'vector'`.
 
 ### 29
 
@@ -241,11 +241,11 @@ Support for the `OES_element_index_uint` WebGL extension is mandatory for WebGL
 
 Layer opacity must be a number.
 
-### 65
-
-A symbol literal representation must be defined on the style supplied to a `WebGLPointsLayer` instance.
-
 ### 66
 
 `forEachFeatureAtCoordinate` cannot be used on a WebGL layer if the hit detection logic has not been enabled.
 This is done by providing adequate shaders using the `hitVertexShader` and `hitFragmentShader` properties of `WebGLPointsLayerRenderer`.
+
+### 67
+
+A layer can only be added to the map once. Use either `layer.setMap()` or `map.addLayer()`, not both.

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

@@ -4,10 +4,10 @@ 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/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"
+tags: "drag-and-drop-image-vector, gpx, geojson, igc, kml, topojson, maptiler, vector, image"
 cloak:
-  - key: As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5
-    value: Your Bing Maps Key from http://www.bingmapsportal.com/ here
+  - key: get_your_own_D6rA4zTHduk6KOKTXzGB
+    value: Get your own API key at https://www.maptiler.com/cloud/
 ---
 <div id="map" class="map"></div>
 <div id="info">&nbsp;</div>

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

@@ -3,7 +3,7 @@ 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 {VectorImage as VectorImageLayer, Tile as TileLayer} from '../src/ol/layer.js';
-import {BingMaps, Vector as VectorSource} from '../src/ol/source.js';
+import {XYZ, Vector as VectorSource} from '../src/ol/source.js';
 
 const dragAndDropInteraction = new DragAndDrop({
   formatConstructors: [
@@ -15,13 +15,18 @@ const dragAndDropInteraction = new DragAndDrop({
   ]
 });
 
+const key = 'get_your_own_D6rA4zTHduk6KOKTXzGB';
+const attributions = '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> ' +
+  '<a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>';
+
 const map = new Map({
   interactions: defaultInteractions().extend([dragAndDropInteraction]),
   layers: [
     new TileLayer({
-      source: new BingMaps({
-        imagerySet: 'Aerial',
-        key: 'As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5'
+      source: new XYZ({
+        attributions: attributions,
+        url: 'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=' + key,
+        maxZoom: 20
       })
     })
   ],

examples/drag-and-drop.html

@@ -4,10 +4,10 @@ title: Drag-and-Drop
 shortdesc: Example of using the drag-and-drop interaction.
 docs: >
   Example of using the drag-and-drop interaction. Drag and drop GPX, GeoJSON, IGC, KML, or TopoJSON files on to the map. There is no projection transform support, so this will only work with data in EPSG:4326 and EPSG:3857.
-tags: "drag-and-drop, gpx, geojson, igc, kml, topojson"
+tags: "drag-and-drop, gpx, geojson, igc, kml, topojson, maptiler"
 cloak:
-  - key: As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5
-    value: Your Bing Maps Key from http://www.bingmapsportal.com/ here
+  - key: get_your_own_D6rA4zTHduk6KOKTXzGB
+    value: Get your own API key at https://www.maptiler.com/cloud/
 ---
 <div id="map" class="map"></div>
 <div id="info">&nbsp;</div>

examples/drag-and-drop.js

@@ -3,7 +3,7 @@ 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 {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
-import {BingMaps, Vector as VectorSource} from '../src/ol/source.js';
+import {XYZ, Vector as VectorSource} from '../src/ol/source.js';
 
 const dragAndDropInteraction = new DragAndDrop({
   formatConstructors: [
@@ -15,13 +15,18 @@ const dragAndDropInteraction = new DragAndDrop({
   ]
 });
 
+const key = 'get_your_own_D6rA4zTHduk6KOKTXzGB';
+const attributions = '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> ' +
+  '<a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>';
+
 const map = new Map({
   interactions: defaultInteractions().extend([dragAndDropInteraction]),
   layers: [
     new TileLayer({
-      source: new BingMaps({
-        imagerySet: 'Aerial',
-        key: 'As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5'
+      source: new XYZ({
+        attributions: attributions,
+        url: 'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=' + key,
+        maxZoom: 20
       })
     })
   ],

examples/export-pdf.html

@@ -6,7 +6,7 @@ docs: >
   Example of exporting a map as a PDF using the <a href="https://github.com/MrRio/jsPDF" target="_blank">jsPDF</a> library.
 tags: "export, pdf, openstreetmap"
 resources:
-  - https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/jspdf.min.js
+  - https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js
 ---
 <div class="row-fluid">
   <div class="span12">

examples/export-pdf.js

@@ -4,8 +4,6 @@ import WKT from '../src/ol/format/WKT.js';
 import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
 import {OSM, Vector as VectorSource} from '../src/ol/source.js';
 
-import {toJpeg} from 'html-to-image';
-
 const raster = new TileLayer({
   source: new OSM()
 });
@@ -20,7 +18,8 @@ feature.getGeometry().transform('EPSG:4326', 'EPSG:3857');
 const vector = new VectorLayer({
   source: new VectorSource({
     features: [feature]
-  })
+  }),
+  opacity: 0.5
 });
 
 
@@ -44,14 +43,6 @@ const dims = {
 };
 
 
-// export options for html-to-image.
-// See: https://github.com/bubkoo/html-to-image#options
-const exportOptions = {
-  filter: function(element) {
-    return element.className.indexOf('ol-control') === -1;
-  }
-};
-
 const exportButton = document.getElementById('export-pdf');
 
 exportButton.addEventListener('click', function() {
@@ -68,18 +59,30 @@ exportButton.addEventListener('click', function() {
   const viewResolution = map.getView().getResolution();
 
   map.once('rendercomplete', function() {
-    exportOptions.width = width;
-    exportOptions.height = height;
-    toJpeg(map.getViewport(), exportOptions).then(function(dataUrl) {
-      const pdf = new jsPDF('landscape', undefined, format);
-      pdf.addImage(dataUrl, 'JPEG', 0, 0, dim[0], dim[1]);
-      pdf.save('map.pdf');
-      // Reset original map size
-      map.setSize(size);
-      map.getView().setResolution(viewResolution);
-      exportButton.disabled = false;
-      document.body.style.cursor = 'auto';
+    const mapCanvas = document.createElement('canvas');
+    mapCanvas.width = width;
+    mapCanvas.height = height;
+    const mapContext = mapCanvas.getContext('2d');
+    Array.prototype.forEach.call(document.querySelectorAll('.ol-layer canvas'), function(canvas) {
+      if (canvas.width > 0) {
+        const opacity = canvas.parentNode.style.opacity;
+        mapContext.globalAlpha = opacity === '' ? 1 : Number(opacity);
+        const transform = canvas.style.transform;
+        // Get the transform parameters from the style's transform matrix
+        const matrix = transform.match(/^matrix\(([^\(]*)\)$/)[1].split(',').map(Number);
+        // Apply the transform to the export map context
+        CanvasRenderingContext2D.prototype.setTransform.apply(mapContext, matrix);
+        mapContext.drawImage(canvas, 0, 0);
+      }
     });
+    const pdf = new jsPDF('landscape', undefined, format);
+    pdf.addImage(mapCanvas.toDataURL('image/jpeg'), 'JPEG', 0, 0, dim[0], dim[1]);
+    pdf.save('map.pdf');
+    // Reset original map size
+    map.setSize(size);
+    map.getView().setResolution(viewResolution);
+    exportButton.disabled = false;
+    document.body.style.cursor = 'auto';
   });
 
   // Set print size

examples/feature-move-animation.html

@@ -6,10 +6,10 @@ docs: >
   This example shows how to use <b>postrender</b> events and a <b>vector context</b> to
   animate a marker feature along a line. In this example an encoded polyline
   is being used.
-tags: "animation, feature, postrender, polyline"
+tags: "animation, feature, postrender, polyline, maptiler"
 cloak:
-  - key: As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5
-    value: Your Bing Maps Key from http://www.bingmapsportal.com/ here
+  - key: get_your_own_D6rA4zTHduk6KOKTXzGB
+    value: Get your own API key at https://www.maptiler.com/cloud/
 ---
 <div id="map" class="map"></div>
 <label for="speed">

examples/feature-move-animation.js

@@ -4,7 +4,7 @@ import View from '../src/ol/View.js';
 import Polyline from '../src/ol/format/Polyline.js';
 import Point from '../src/ol/geom/Point.js';
 import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
-import BingMaps from '../src/ol/source/BingMaps.js';
+import XYZ from '../src/ol/source/XYZ.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';
@@ -121,6 +121,10 @@ const vectorLayer = new VectorLayer({
   }
 });
 
+const key = 'get_your_own_D6rA4zTHduk6KOKTXzGB';
+const attributions = '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> ' +
+  '<a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>';
+
 const center = [-5639523.95, -3501274.52];
 const map = new Map({
   target: document.getElementById('map'),
@@ -132,9 +136,10 @@ const map = new Map({
   }),
   layers: [
     new TileLayer({
-      source: new BingMaps({
-        imagerySet: 'AerialWithLabelsOnDemand',
-        key: 'As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5'
+      source: new XYZ({
+        attributions: attributions,
+        url: 'https://api.maptiler.com/maps/hybrid/{z}/{x}/{y}.jpg?key=' + key,
+        tileSize: 512
       })
     }),
     vectorLayer

examples/filter-points-webgl.html

@@ -3,14 +3,14 @@ layout: example.html
 title: Filtering features with WebGL
 shortdesc: Using WebGL to filter large quantities of features
 docs: >
-  This example shows how to use `ol/renderer/webgl/PointsLayer` to dynamically filter a large amount
+  This example shows how to use `ol/layer/WebGLPoints` with a literal style to dynamically filter a large amount
     of point geometries. The above map is based on a dataset from the NASA containing 45k recorded meteorite
     landing sites. Each meteorite is marked by a circle on the map (the bigger the circle, the heavier
     the object). A pulse effect has been added, which is slightly offset by the year of the impact.
 
-  Adjusting the sliders causes the objects outside of the date range to be filtered out of the map. This is done using
-    a custom fragment shader on the layer renderer, and by using the `v_opacity` attribute of the rendered objects
-    to store the year of impact.
+  Adjusting the sliders causes the objects outside of the date range to be filtered out of the map. This is done
+    by mutating the variables in the `style` object provided to the WebGL layer. Also note that the last snippet
+    of code is necessary to make sure the map refreshes itself every frame.
 
 tags: "webgl, icon, sprite, filter, feature"
 experimental: true

examples/filter-points-webgl.js

@@ -3,162 +3,115 @@ import View from '../src/ol/View.js';
 import TileLayer from '../src/ol/layer/Tile.js';
 import Feature from '../src/ol/Feature.js';
 import Point from '../src/ol/geom/Point.js';
-import VectorLayer from '../src/ol/layer/Vector.js';
 import {Vector} from '../src/ol/source.js';
 import {fromLonLat} from '../src/ol/proj.js';
-import WebGLPointsLayerRenderer from '../src/ol/renderer/webgl/PointsLayer.js';
-import {clamp} from '../src/ol/math.js';
 import Stamen from '../src/ol/source/Stamen.js';
-import {formatColor} from '../src/ol/webgl/ShaderBuilder.js';
+import WebGLPointsLayer from '../src/ol/layer/WebGLPoints.js';
 
 const vectorSource = new Vector({
   attributions: 'NASA'
 });
 
-const oldColor = [180, 140, 140];
-const newColor = [255, 80, 80];
+const oldColor = 'rgba(242,56,22,0.61)';
+const newColor = '#ffe52c';
+const period = 12; // animation period in seconds
+const animRatio =
+  ['^',
+    ['/',
+      ['%',
+        ['+',
+          ['time'],
+          [
+            'interpolate',
+            ['linear'],
+            ['get', 'year'],
+            1850, 0,
+            2015, period
+          ]
+        ],
+        period
+      ],
+      period
+    ],
+    0.5
+  ];
 
-const startTime = Date.now() * 0.001;
+const style = {
+  variables: {
+    minYear: 1850,
+    maxYear: 2015
+  },
+  filter: ['between', ['get', 'year'], ['var', 'minYear'], ['var', 'maxYear']],
+  symbol: {
+    symbolType: 'circle',
+    size: ['*',
+      ['interpolate', ['linear'], ['get', 'mass'], 0, 8, 200000, 26],
+      ['-', 1.75, ['*', animRatio, 0.75]]
+    ],
+    color: ['interpolate',
+      ['linear'],
+      animRatio,
+      0, newColor,
+      1, oldColor
+    ],
+    opacity: ['-', 1.0, ['*', animRatio, 0.75]]
+  }
+};
 
-// hanle input values & events
+// handle input values & events
 const minYearInput = document.getElementById('min-year');
 const maxYearInput = document.getElementById('max-year');
+
+function updateMinYear() {
+  style.variables.minYear = parseInt(minYearInput.value);
+  updateStatusText();
+}
+function updateMaxYear() {
+  style.variables.maxYear = parseInt(maxYearInput.value);
+  updateStatusText();
+}
 function updateStatusText() {
   const div = document.getElementById('status');
   div.querySelector('span.min-year').textContent = minYearInput.value;
   div.querySelector('span.max-year').textContent = maxYearInput.value;
 }
-minYearInput.addEventListener('input', updateStatusText);
-minYearInput.addEventListener('change', updateStatusText);
-maxYearInput.addEventListener('input', updateStatusText);
-maxYearInput.addEventListener('change', updateStatusText);
+
+minYearInput.addEventListener('input', updateMinYear);
+minYearInput.addEventListener('change', updateMinYear);
+maxYearInput.addEventListener('input', updateMaxYear);
+maxYearInput.addEventListener('change', updateMaxYear);
 updateStatusText();
 
-class WebglPointsLayer extends VectorLayer {
-  createRenderer() {
-    return new WebGLPointsLayerRenderer(this, {
-      attributes: [
-        {
-          name: 'size',
-          callback: function(feature) {
-            return 18 * clamp(feature.get('mass') / 200000, 0, 1) + 8;
-          }
-        },
-        {
-          name: 'year',
-          callback: function(feature) {
-            return feature.get('year');
-          }
-        }
-      ],
-      vertexShader: [
-        'precision mediump float;',
+// load data
+const client = new XMLHttpRequest();
+client.open('GET', 'data/csv/meteorite_landings.csv');
+client.onload = function() {
+  const csv = client.responseText;
+  const features = [];
 
-        'uniform mat4 u_projectionMatrix;',
-        'uniform mat4 u_offsetScaleMatrix;',
-        'uniform mat4 u_offsetRotateMatrix;',
-        'attribute vec2 a_position;',
-        'attribute float a_index;',
-        'attribute float a_size;',
-        'attribute float a_year;',
-        'varying vec2 v_texCoord;',
-        'varying float v_year;',
+  let prevIndex = csv.indexOf('\n') + 1; // scan past the header line
 
-        'void main(void) {',
-        '  mat4 offsetMatrix = u_offsetScaleMatrix;',
-        '  float offsetX = a_index == 0.0 || a_index == 3.0 ? -a_size / 2.0 : a_size / 2.0;',
-        '  float offsetY = a_index == 0.0 || a_index == 1.0 ? -a_size / 2.0 : a_size / 2.0;',
-        '  vec4 offsets = offsetMatrix * vec4(offsetX, offsetY, 0.0, 0.0);',
-        '  gl_Position = u_projectionMatrix * vec4(a_position, 0.0, 1.0) + offsets;',
-        '  float u = a_index == 0.0 || a_index == 3.0 ? 0.0 : 1.0;',
-        '  float v = a_index == 0.0 || a_index == 1.0 ? 0.0 : 1.0;',
-        '  v_texCoord = vec2(u, v);',
-        '  v_year = a_year;',
-        '}'
-      ].join(' '),
-      fragmentShader: [
-        'precision mediump float;',
+  let curIndex;
+  while ((curIndex = csv.indexOf('\n', prevIndex)) != -1) {
+    const line = csv.substr(prevIndex, curIndex - prevIndex).split(',');
+    prevIndex = curIndex + 1;
 
-        'uniform float u_time;',
-        'uniform float u_minYear;',
-        'uniform float u_maxYear;',
-        'varying vec2 v_texCoord;',
-        'varying float v_year;',
-
-        'void main(void) {',
-
-        // filter out pixels if the year is outside of the given range
-        '  if (v_year < u_minYear || v_year > u_maxYear) {',
-        '    discard;',
-        '  }',
-
-        '  vec2 texCoord = v_texCoord * 2.0 - vec2(1.0, 1.0);',
-        '  float sqRadius = texCoord.x * texCoord.x + texCoord.y * texCoord.y;',
-        '  float value = 2.0 * (1.0 - sqRadius);',
-        '  float alpha = smoothstep(0.0, 1.0, value);',
-
-        // color is interpolated based on year
-        '  float ratio = clamp((v_year - 1800.0) / (2013.0 - 1800.0), 0.0, 1.1);',
-        '  vec3 color = mix(vec3(' + formatColor(oldColor) + '),',
-        '    vec3(' + formatColor(newColor) + '), ratio);',
-
-        '  float period = 8.0;',
-        '  color.g *= 2.0 * (1.0 - sqrt(mod(u_time + v_year * 0.025, period) / period));',
-
-        '  gl_FragColor = vec4(color, 1.0);',
-        '  gl_FragColor.a *= alpha;',
-        '  gl_FragColor.rgb *= gl_FragColor.a;',
-        '}'
-      ].join(' '),
-      uniforms: {
-        u_time: function() {
-          return Date.now() * 0.001 - startTime;
-        },
-        u_minYear: function() {
-          return parseInt(minYearInput.value);
-        },
-        u_maxYear: function() {
-          return parseInt(maxYearInput.value);
-        }
-      }
-    });
-  }
-}
-
-
-function loadData() {
-  const client = new XMLHttpRequest();
-  client.open('GET', 'data/csv/meteorite_landings.csv');
-  client.onload = function() {
-    const csv = client.responseText;
-    const features = [];
-
-    let prevIndex = csv.indexOf('\n') + 1; // scan past the header line
-
-    let curIndex;
-    while ((curIndex = csv.indexOf('\n', prevIndex)) != -1) {
-      const line = csv.substr(prevIndex, curIndex - prevIndex).split(',');
-      prevIndex = curIndex + 1;
-
-      const coords = fromLonLat([parseFloat(line[4]), parseFloat(line[3])]);
-      if (isNaN(coords[0]) || isNaN(coords[1])) {
-        // guard against bad data
-        continue;
-      }
-
-      features.push(new Feature({
-        mass: parseFloat(line[1]) || 0,
-        year: parseInt(line[2]) || 0,
-        geometry: new Point(coords)
-      }));
+    const coords = fromLonLat([parseFloat(line[4]), parseFloat(line[3])]);
+    if (isNaN(coords[0]) || isNaN(coords[1])) {
+      // guard against bad data
+      continue;
     }
 
-    vectorSource.addFeatures(features);
-  };
-  client.send();
-}
+    features.push(new Feature({
+      mass: parseFloat(line[1]) || 0,
+      year: parseInt(line[2]) || 0,
+      geometry: new Point(coords)
+    }));
+  }
 
-loadData();
+  vectorSource.addFeatures(features);
+};
+client.send();
 
 const map = new Map({
   layers: [
@@ -167,8 +120,10 @@ const map = new Map({
         layer: 'toner'
       })
     }),
-    new WebglPointsLayer({
-      source: vectorSource
+    new WebGLPointsLayer({
+      style: style,
+      source: vectorSource,
+      disableHitDetection: true
     })
   ],
   target: document.getElementById('map'),

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

@@ -5,9 +5,9 @@ shortdesc: Example of drag rotate and zoom control with full screen effect.
 docs: >
   <p>Hold down <code>Shift+Drag</code> to rotate and zoom.  Click the button in the top right corner to go full screen.  Then do the <code>Shift+Drag</code> thing again.</p>
   <p>If there is no button on the map, your browser does not support the <a href="http://caniuse.com/#feat=fullscreen">Full Screen API</a>.</p>
-tags: "full-screen, drag, rotate, zoom, bing, bing-maps"
+tags: "full-screen, drag, rotate, zoom, xyz, maptiler"
 cloak:
-  - key: As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5
-    value: Your Bing Maps Key from http://www.bingmapsportal.com/ here
+  - key: get_your_own_D6rA4zTHduk6KOKTXzGB
+    value: Get your own API key at https://www.maptiler.com/cloud/
 ---
 <div id="map" class="map"></div>

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

@@ -3,9 +3,13 @@ import View from '../src/ol/View.js';
 import {defaults as defaultControls, FullScreen} from '../src/ol/control.js';
 import {defaults as defaultInteractions, DragRotateAndZoom} from '../src/ol/interaction.js';
 import TileLayer from '../src/ol/layer/Tile.js';
-import BingMaps from '../src/ol/source/BingMaps.js';
+import XYZ from '../src/ol/source/XYZ.js';
 
 
+const key = 'get_your_own_D6rA4zTHduk6KOKTXzGB';
+const attributions = '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> ' +
+  '<a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>';
+
 const map = new Map({
   controls: defaultControls().extend([
     new FullScreen()
@@ -15,13 +19,13 @@ const map = new Map({
   ]),
   layers: [
     new TileLayer({
-      source: new BingMaps({
-        key: 'As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5',
-        imagerySet: 'Aerial'
+      source: new XYZ({
+        attributions: attributions,
+        url: 'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=' + key,
+        maxZoom: 20
       })
     })
   ],
-  // Use the canvas renderer because it's currently the fastest
   target: 'map',
   view: new View({
     center: [-33519607, 5616436],

examples/full-screen.html

@@ -5,9 +5,9 @@ shortdesc: Example of a full screen control.
 docs: >
   <p>Click the control in the top right corner to go full screen.  Click it again to exit full screen.</p>
   <p>If there is no button on the map, your browser does not support the <a href="http://caniuse.com/#feat=fullscreen">Full Screen API</a>.</p>
-tags: "full-screen, bing, bing-maps"
+tags: "full-screen, xyz, maptiler"
 cloak:
-  - key: As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5
-    value: Your Bing Maps Key from http://www.bingmapsportal.com/ here
+  - key: get_your_own_D6rA4zTHduk6KOKTXzGB
+    value: Get your own API key at https://www.maptiler.com/cloud/
 ---
 <div id="map" class="map"></div>

examples/full-screen.js

@@ -2,7 +2,7 @@ import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
 import {defaults as defaultControls, FullScreen} from '../src/ol/control.js';
 import TileLayer from '../src/ol/layer/Tile.js';
-import BingMaps from '../src/ol/source/BingMaps.js';
+import XYZ from '../src/ol/source/XYZ.js';
 
 
 const view = new View({
@@ -10,15 +10,20 @@ const view = new View({
   zoom: 14
 });
 
+const key = 'get_your_own_D6rA4zTHduk6KOKTXzGB';
+const attributions = '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> ' +
+  '<a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>';
+
 const map = new Map({
   controls: defaultControls().extend([
     new FullScreen()
   ]),
   layers: [
     new TileLayer({
-      source: new BingMaps({
-        key: 'As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5',
-        imagerySet: 'Aerial'
+      source: new XYZ({
+        attributions: attributions,
+        url: 'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=' + key,
+        maxZoom: 20
       })
     })
   ],

examples/gpx.html

@@ -4,10 +4,10 @@ title: GPX Data
 shortdesc: Example of using the GPX source.
 docs: >
   Example of using the GPX source.
-tags: "GPX"
+tags: "GPX, maptiler"
 cloak:
-  - key: As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5
-    value: Your Bing Maps Key from http://www.bingmapsportal.com/ here
+  - key: get_your_own_D6rA4zTHduk6KOKTXzGB
+    value: Get your own API key at https://www.maptiler.com/cloud/
 ---
 <div id="map" class="map"></div>
 <div id="info">&nbsp;</div>

examples/gpx.js

@@ -2,14 +2,19 @@ import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
 import GPX from '../src/ol/format/GPX.js';
 import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
-import BingMaps from '../src/ol/source/BingMaps.js';
+import XYZ from '../src/ol/source/XYZ.js';
 import VectorSource from '../src/ol/source/Vector.js';
 import {Circle as CircleStyle, Fill, Stroke, Style} from '../src/ol/style.js';
 
+const key = 'get_your_own_D6rA4zTHduk6KOKTXzGB';
+const attributions = '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> ' +
+  '<a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>';
+
 const raster = new TileLayer({
-  source: new BingMaps({
-    imagerySet: 'Aerial',
-    key: 'As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5'
+  source: new XYZ({
+    attributions: attributions,
+    url: 'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=' + key,
+    maxZoom: 20
   })
 });
 

examples/heatmap-earthquakes.js

@@ -16,16 +16,15 @@ const vector = new HeatmapLayer({
     })
   }),
   blur: parseInt(blur.value, 10),
-  radius: parseInt(radius.value, 10)
-});
-
-vector.getSource().on('addfeature', function(event) {
-  // 2012_Earthquakes_Mag5.kml stores the magnitude of each earthquake in a
-  // standards-violating <magnitude> tag in each Placemark.  We extract it from
-  // the Placemark's name instead.
-  const name = event.feature.get('name');
-  const magnitude = parseFloat(name.substr(2));
-  event.feature.set('weight', magnitude - 5);
+  radius: parseInt(radius.value, 10),
+  weight: function(feature) {
+    // 2012_Earthquakes_Mag5.kml stores the magnitude of each earthquake in a
+    // standards-violating <magnitude> tag in each Placemark.  We extract it from
+    // the Placemark's name instead.
+    const name = feature.get('name');
+    const magnitude = parseFloat(name.substr(2));
+    return magnitude - 5;
+  }
 });
 
 const raster = new TileLayer({
@@ -34,7 +33,7 @@ const raster = new TileLayer({
   })
 });
 
-const map = new Map({
+new Map({
   layers: [raster, vector],
   target: 'map',
   view: new View({

examples/hitdetect-vector.html

@@ -0,0 +1,15 @@
+---
+layout: example.html
+title: Vector Layer Hit Detection
+shortdesc: Example of hit detection on a countries vector layer with country information.
+docs: >
+  The countries are loaded from a GeoJSON file. Information about countries is
+  on hover and click is retrieved using the layer's `getFeatures()` method. For
+  vector layers, this function resolves with an array of only the topmost
+  feature. It uses a very efficient hit detection algorithm, at the cost of
+  accuracy. For pixel exact hit detection, when performance is not a concern,
+  use the map's `getFeaturesAtPixel()` or `forEachFeatureAtPixel()` methods.
+tags: "vector, geojson, click, hover, hit detection"
+---
+<div id="map" class="map"></div>
+<div id="info">&nbsp;</div>

examples/hitdetect-vector.js

@@ -0,0 +1,113 @@
+import Map from '../src/ol/Map.js';
+import View from '../src/ol/View.js';
+import GeoJSON from '../src/ol/format/GeoJSON.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';
+
+
+const style = new Style({
+  fill: new Fill({
+    color: 'rgba(255, 255, 255, 0.6)'
+  }),
+  stroke: new Stroke({
+    color: '#319FD3',
+    width: 1
+  }),
+  text: new Text({
+    font: '12px Calibri,sans-serif',
+    fill: new Fill({
+      color: '#000'
+    }),
+    stroke: new Stroke({
+      color: '#fff',
+      width: 3
+    })
+  })
+});
+
+const vectorLayer = new VectorLayer({
+  source: new VectorSource({
+    url: 'data/geojson/countries.geojson',
+    format: new GeoJSON()
+  }),
+  style: function(feature) {
+    style.getText().setText(feature.get('name'));
+    return style;
+  }
+});
+
+const map = new Map({
+  layers: [vectorLayer],
+  target: 'map',
+  view: new View({
+    center: [0, 0],
+    zoom: 1
+  })
+});
+
+const highlightStyle = new Style({
+  stroke: new Stroke({
+    color: '#f00',
+    width: 1
+  }),
+  fill: new Fill({
+    color: 'rgba(255,0,0,0.1)'
+  }),
+  text: new Text({
+    font: '12px Calibri,sans-serif',
+    fill: new Fill({
+      color: '#000'
+    }),
+    stroke: new Stroke({
+      color: '#f00',
+      width: 3
+    })
+  })
+});
+
+const featureOverlay = new VectorLayer({
+  source: new VectorSource(),
+  map: map,
+  style: function(feature) {
+    highlightStyle.getText().setText(feature.get('name'));
+    return highlightStyle;
+  }
+});
+
+let highlight;
+const displayFeatureInfo = function(pixel) {
+
+  vectorLayer.getFeatures(pixel).then(function(features) {
+    const feature = features.length ? features[0] : undefined;
+    const info = document.getElementById('info');
+    if (features.length) {
+      info.innerHTML = feature.getId() + ': ' + feature.get('name');
+    } else {
+      info.innerHTML = ' ';
+    }
+
+    if (feature !== highlight) {
+      if (highlight) {
+        featureOverlay.getSource().removeFeature(highlight);
+      }
+      if (feature) {
+        featureOverlay.getSource().addFeature(feature);
+      }
+      highlight = feature;
+    }
+  });
+
+};
+
+map.on('pointermove', function(evt) {
+  if (evt.dragging) {
+    return;
+  }
+  const pixel = map.getEventPixel(evt.originalEvent);
+  displayFeatureInfo(pixel);
+});
+
+map.on('click', function(evt) {
+  displayFeatureInfo(evt.pixel);
+});

examples/icon-sprite-webgl.html

@@ -3,13 +3,13 @@ layout: example.html
 title: Icon Sprites with WebGL
 shortdesc: Rendering many icons with WebGL
 docs: >
-  This example shows how to use `ol/renderer/webgl/PointsLayer` to render
+  This example shows how to use `ol/layer/WebGLPoints` to render
     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.
+  A very simple sprite atlas is used in the form of a PNG file containing all icons on a grid. Then, the `style` object
+    given to the `ol/layer/WebGLPoints` 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"
@@ -20,3 +20,7 @@ cloak:
 ---
 <div id="map" class="map"></div>
 <div>Current sighting: <span id="info"></span></div>
+<div>
+  Filter by UFO shape:
+  <select id="shape-filter"></select>
+</div>

examples/icon-sprite-webgl.js

@@ -4,211 +4,12 @@ import TileLayer from '../src/ol/layer/Tile.js';
 import TileJSON from '../src/ol/source/TileJSON.js';
 import Feature from '../src/ol/Feature.js';
 import Point from '../src/ol/geom/Point.js';
-import VectorLayer from '../src/ol/layer/Vector.js';
 import {Vector} from '../src/ol/source.js';
 import {fromLonLat} from '../src/ol/proj.js';
-import WebGLPointsLayerRenderer from '../src/ol/renderer/webgl/PointsLayer.js';
-import {formatColor, formatNumber} from '../src/ol/webgl/ShaderBuilder.js';
+import WebGLPointsLayer from '../src/ol/layer/WebGLPoints.js';
 
 const key = 'pk.eyJ1IjoidHNjaGF1YiIsImEiOiJjaW5zYW5lNHkxMTNmdWttM3JyOHZtMmNtIn0.CDIBD8H-G2Gf-cPkIuWtRg';
 
-const vectorSource = new Vector({
-  features: [],
-  attributions: 'National UFO Reporting Center'
-});
-
-const texture = new Image();
-texture.src = 'data/ufo_shapes.png';
-
-// This describes the content of the associated sprite sheet
-// coords are u0, v0 for a given shape (all icons have a size of 0.25 x 0.5)
-const shapeTextureCoords = {
-  'light': [0, 0],
-  'sphere': [0.25, 0],
-  'circle': [0.25, 0],
-  'disc': [0.5, 0],
-  'oval': [0.5, 0],
-  'triangle': [0.75, 0],
-  'fireball': [0, 0.5],
-  'default': [0.75, 0.5]
-};
-
-const oldColor = [255, 160, 110];
-const newColor = [180, 255, 200];
-const size = 16;
-
-class WebglPointsLayer extends VectorLayer {
-  createRenderer() {
-    return new WebGLPointsLayerRenderer(this, {
-      attributes: [
-        {
-          name: 'year',
-          callback: function(feature) {
-            return feature.get('year');
-          }
-        },
-        {
-          name: 'texCoordU',
-          callback: function(feature) {
-            let coords = shapeTextureCoords[feature.get('shape')];
-            if (!coords) {
-              coords = shapeTextureCoords['default'];
-            }
-            return coords[0];
-          }
-        },
-        {
-          name: 'texCoordV',
-          callback: function(feature) {
-            let coords = shapeTextureCoords[feature.get('shape')];
-            if (!coords) {
-              coords = shapeTextureCoords['default'];
-            }
-            return coords[1];
-          }
-        }
-      ],
-      uniforms: {
-        u_texture: texture
-      },
-      vertexShader: [
-        'precision mediump float;',
-
-        'uniform mat4 u_projectionMatrix;',
-        'uniform mat4 u_offsetScaleMatrix;',
-        'uniform mat4 u_offsetRotateMatrix;',
-        'attribute vec2 a_position;',
-        'attribute float a_index;',
-        'attribute float a_year;',
-        'attribute float a_texCoordU;',
-        'attribute float a_texCoordV;',
-        'varying vec2 v_texCoord;',
-        'varying float v_year;',
-
-        'void main(void) {',
-        '  mat4 offsetMatrix = u_offsetScaleMatrix;',
-        '  float offsetX = a_index == 0.0 || a_index == 3.0 ? ',
-        '    ' + formatNumber(-size / 2) + ' : ' + formatNumber(size / 2) + ';',
-        '  float offsetY = a_index == 0.0 || a_index == 1.0 ? ',
-        '    ' + formatNumber(-size / 2) + ' : ' + formatNumber(size / 2) + ';',
-        '  vec4 offsets = offsetMatrix * vec4(offsetX, offsetY, 0.0, 0.0);',
-        '  gl_Position = u_projectionMatrix * vec4(a_position, 0.0, 1.0) + offsets;',
-        '  float u = a_index == 0.0 || a_index == 3.0 ? a_texCoordU : a_texCoordU + 0.25;',
-        '  float v = a_index == 2.0 || a_index == 3.0 ? a_texCoordV : a_texCoordV + 0.5;',
-        '  v_texCoord = vec2(u, v);',
-        '  v_year = a_year;',
-        '}'
-      ].join(' '),
-      fragmentShader: [
-        'precision mediump float;',
-
-        'uniform float u_time;',
-        'uniform float u_minYear;',
-        'uniform float u_maxYear;',
-        'uniform sampler2D u_texture;',
-        'varying vec2 v_texCoord;',
-        'varying float v_year;',
-
-        'void main(void) {',
-        '  vec4 textureColor = texture2D(u_texture, v_texCoord);',
-        '  if (textureColor.a < 0.1) {',
-        '    discard;',
-        '  }',
-
-        // color is interpolated based on year
-        '  float ratio = clamp((v_year - 1950.0) / (2013.0 - 1950.0), 0.0, 1.1);',
-        '  vec3 color = mix(vec3(' + formatColor(oldColor) + '),',
-        '    vec3(' + formatColor(newColor) + '), ratio);',
-
-        '  gl_FragColor = vec4(color, 1.0) * textureColor;',
-        '  gl_FragColor.rgb *= gl_FragColor.a;',
-        '}'
-      ].join(' '),
-      hitVertexShader: [
-        'precision mediump float;',
-
-        'uniform mat4 u_projectionMatrix;',
-        'uniform mat4 u_offsetScaleMatrix;',
-        'uniform mat4 u_offsetRotateMatrix;',
-        'attribute vec2 a_position;',
-        'attribute float a_index;',
-        'attribute vec4 a_hitColor;',
-        'attribute float a_texCoordU;',
-        'attribute float a_texCoordV;',
-        'varying vec2 v_texCoord;',
-        'varying vec4 v_hitColor;',
-
-        'void main(void) {',
-        '  mat4 offsetMatrix = u_offsetScaleMatrix;',
-        '  float offsetX = a_index == 0.0 || a_index == 3.0 ? ',
-        '    ' + formatNumber(-size / 2) + ' : ' + formatNumber(size / 2) + ';',
-        '  float offsetY = a_index == 0.0 || a_index == 1.0 ? ',
-        '    ' + formatNumber(-size / 2) + ' : ' + formatNumber(size / 2) + ';',
-        '  vec4 offsets = offsetMatrix * vec4(offsetX, offsetY, 0.0, 0.0);',
-        '  gl_Position = u_projectionMatrix * vec4(a_position, 0.0, 1.0) + offsets;',
-        '  float u = a_index == 0.0 || a_index == 3.0 ? a_texCoordU : a_texCoordU + 0.25;',
-        '  float v = a_index == 2.0 || a_index == 3.0 ? a_texCoordV : a_texCoordV + 0.5;',
-        '  v_texCoord = vec2(u, v);',
-        '  v_hitColor = a_hitColor;',
-        '}'
-      ].join(' '),
-      hitFragmentShader: [
-        'precision mediump float;',
-
-        'uniform sampler2D u_texture;',
-        'varying vec2 v_texCoord;',
-        'varying vec4 v_hitColor;',
-
-        'void main(void) {',
-        '  vec4 textureColor = texture2D(u_texture, v_texCoord);',
-        '  if (textureColor.a < 0.1) {',
-        '    discard;',
-        '  }',
-
-        '  gl_FragColor = v_hitColor;',
-        '}'
-      ].join(' ')
-    });
-  }
-}
-
-
-function loadData() {
-  const client = new XMLHttpRequest();
-  client.open('GET', 'data/csv/ufo_sighting_data.csv');
-  client.onload = function() {
-    const csv = client.responseText;
-    const features = [];
-
-    let prevIndex = csv.indexOf('\n') + 1; // scan past the header line
-
-    let curIndex;
-    while ((curIndex = csv.indexOf('\n', prevIndex)) != -1) {
-      const line = csv.substr(prevIndex, curIndex - prevIndex).split(',');
-      prevIndex = curIndex + 1;
-
-      const coords = fromLonLat([parseFloat(line[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();
-
 const map = new Map({
   layers: [
     new TileLayer({
@@ -216,9 +17,6 @@ const map = new Map({
         url: 'https://api.tiles.mapbox.com/v4/mapbox.world-dark.json?secure&access_token=' + key,
         crossOrigin: 'anonymous'
       })
-    }),
-    new WebglPointsLayer({
-      source: vectorSource
     })
   ],
   target: document.getElementById('map'),
@@ -228,9 +26,125 @@ const map = new Map({
   })
 });
 
+const vectorSource = new Vector({
+  features: [],
+  attributions: 'National UFO Reporting Center'
+});
+
+const oldColor = [255, 160, 110];
+const newColor = [180, 255, 200];
+const size = 16;
+
+const style = {
+  variables: {
+    filterShape: 'all'
+  },
+  filter: [
+    'case',
+    ['!=', ['var', 'filterShape'], 'all'],
+    ['==', ['get', 'shape'], ['var', 'filterShape']],
+    true
+  ],
+  symbol: {
+    symbolType: 'image',
+    src: 'data/ufo_shapes.png',
+    size: size,
+    color: [
+      'interpolate',
+      ['linear'],
+      ['get', 'year'],
+      1950, oldColor,
+      2013, newColor
+    ],
+    rotateWithView: false,
+    offset: [
+      0,
+      0
+    ],
+    textureCoord: [
+      'match',
+      ['get', 'shape'],
+      'light', [0, 0, 0.25, 0.5],
+      'sphere', [0.25, 0, 0.5, 0.5],
+      'circle', [0.25, 0, 0.5, 0.5],
+      'disc', [0.5, 0, 0.75, 0.5],
+      'oval', [0.5, 0, 0.75, 0.5],
+      'triangle', [0.75, 0, 1, 0.5],
+      'fireball', [0, 0.5, 0.25, 1],
+      [0.75, 0.5, 1, 1]
+    ]
+  }
+};
+
+// key is shape name, value is sightings count
+const shapeTypes = {
+  all: 0
+};
+const shapeSelect = document.getElementById('shape-filter');
+shapeSelect.addEventListener('input', function() {
+  style.variables.filterShape = shapeSelect.options[shapeSelect.selectedIndex].value;
+  map.render();
+});
+function fillShapeSelect() {
+  Object.keys(shapeTypes)
+    .sort(function(a, b) {
+      return shapeTypes[b] - shapeTypes[a];
+    })
+    .forEach(function(shape) {
+      const option = document.createElement('option');
+      option.text = `${shape} (${shapeTypes[shape]} sightings)`;
+      option.value = shape;
+      shapeSelect.appendChild(option);
+    });
+}
+
+const client = new XMLHttpRequest();
+client.open('GET', 'data/csv/ufo_sighting_data.csv');
+client.onload = function() {
+  const csv = client.responseText;
+  const features = [];
+
+  let prevIndex = csv.indexOf('\n') + 1; // scan past the header line
+
+  let curIndex;
+  while ((curIndex = csv.indexOf('\n', prevIndex)) != -1) {
+    const line = csv.substr(prevIndex, curIndex - prevIndex).split(',');
+    prevIndex = curIndex + 1;
+
+    const coords = fromLonLat([parseFloat(line[5]), parseFloat(line[4])]);
+
+    // only keep valid points
+    if (isNaN(coords[0]) || isNaN(coords[1])) {
+      continue;
+    }
+
+    const shape = line[2];
+    shapeTypes[shape] = (shapeTypes[shape] ? shapeTypes[shape] : 0) + 1;
+    shapeTypes['all']++;
+
+    features.push(new Feature({
+      datetime: line[0],
+      year: parseInt(/[0-9]{4}/.exec(line[0])[0]), // extract the year as int
+      shape: shape,
+      duration: line[3],
+      geometry: new Point(coords)
+    }));
+  }
+  vectorSource.addFeatures(features);
+  fillShapeSelect();
+};
+client.send();
+
+map.addLayer(
+  new WebGLPointsLayer({
+    source: vectorSource,
+    style: style
+  })
+);
+
 const info = document.getElementById('info');
 map.on('pointermove', function(evt) {
-  if (map.getView().getInteracting()) {
+  if (map.getView().getInteracting() || map.getView().getAnimating()) {
     return;
   }
   const pixel = evt.pixel;
@@ -242,7 +156,3 @@ map.on('pointermove', function(evt) {
     info.innerText = 'On ' + datetime + ', lasted ' + duration + ' seconds and had a "' + shape + '" shape.';
   });
 });
-
-texture.addEventListener('load', function() {
-  map.render();
-});

examples/image-filter.html

@@ -6,10 +6,10 @@ docs: >
   <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>postrender</code> listener applies a filter to the image data.</p>
-tags: "filter, image manipulation"
+tags: "filter, image manipulation, maptiler"
 cloak:
-  - key: As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5
-    value: Your Bing Maps Key from http://www.bingmapsportal.com/ here
+  - key: get_your_own_D6rA4zTHduk6KOKTXzGB
+    value: Get your own API key at https://www.maptiler.com/cloud/
 ---
 <div id="map" class="map"></div>
 <select id="kernel" name="kernel">

examples/image-filter.js

@@ -2,12 +2,19 @@ import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
 import TileLayer from '../src/ol/layer/Tile.js';
 import {fromLonLat} from '../src/ol/proj.js';
-import BingMaps from '../src/ol/source/BingMaps.js';
+import XYZ from '../src/ol/source/XYZ.js';
 
-const key = 'As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5';
+const key = 'get_your_own_D6rA4zTHduk6KOKTXzGB';
+const attributions = '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> ' +
+  '<a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>';
 
 const imagery = new TileLayer({
-  source: new BingMaps({key: key, imagerySet: 'Aerial'})
+  source: new XYZ({
+    attributions: attributions,
+    url: 'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=' + key,
+    maxZoom: 20,
+    crossOrigin: ''
+  })
 });
 
 const map = new Map({

examples/image-vector-layer.js

@@ -56,35 +56,32 @@ const featureOverlay = new VectorLayer({
 let highlight;
 const displayFeatureInfo = function(pixel) {
 
-  const feature = map.forEachFeatureAtPixel(pixel, function(feature) {
-    return feature;
-  });
+  map.getLayers().item(0).getFeatures(pixel).then(function(features) {
+    const feature = features.length > 0 ? features[0] : undefined;
 
-  const info = document.getElementById('info');
-  if (feature) {
-    info.innerHTML = feature.getId() + ': ' + feature.get('name');
-  } else {
-    info.innerHTML = ' ';
-  }
-
-  if (feature !== highlight) {
-    if (highlight) {
-      featureOverlay.getSource().removeFeature(highlight);
-    }
+    const info = document.getElementById('info');
     if (feature) {
-      featureOverlay.getSource().addFeature(feature);
+      info.innerHTML = feature.getId() + ': ' + feature.get('name');
+    } else {
+      info.innerHTML = ' ';
     }
-    highlight = feature;
-  }
 
+    if (feature !== highlight) {
+      if (highlight) {
+        featureOverlay.getSource().removeFeature(highlight);
+      }
+      if (feature) {
+        featureOverlay.getSource().addFeature(feature);
+      }
+      highlight = feature;
+    }
+  });
 };
 
 map.on('pointermove', function(evt) {
-  if (evt.dragging) {
-    return;
+  if (!evt.dragging) {
+    displayFeatureInfo(evt.pixel);
   }
-  const pixel = map.getEventPixel(evt.originalEvent);
-  displayFeatureInfo(pixel);
 });
 
 map.on('click', function(evt) {

examples/interaction-options.html

@@ -1,14 +0,0 @@
----
-layout: example.html
-title: Interaction Options
-shortdesc: Shows interaction options for custom scroll and zoom behavior.
-docs: >
-  This example uses a custom `ol/interaction/defaults` configuration:
-  by default, wheel/trackpad zoom and drag panning is always active, which
-  can be unexpected on pages with a lot of scrollable content and an embedded
-  map. To perform wheel/trackpad zoom and drag-pan actions only when the map
-  has the focus, set `onFocusOnly: true` as option. This requires a map div
-  with a `tabindex` attribute set.
-tags: "trackpad, mousewheel, zoom, scroll, interaction, fractional"
----
-<div tabindex="1" id="map" class="map"></div>

examples/kml.html

@@ -4,10 +4,10 @@ title: KML
 shortdesc: Rendering KML with a vector source.
 docs: >
   This example uses the <code>ol/format/KML</code> to parse KML for rendering with a vector source.
-tags: "KML"
+tags: "KML, maptiler"
 cloak:
-  - key: As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5
-    value: Your Bing Maps Key from http://www.bingmapsportal.com/ here
+  - key: get_your_own_D6rA4zTHduk6KOKTXzGB
+    value: Get your own API key at https://www.maptiler.com/cloud/
 ---
 <div id="map" class="map"></div>
 <div id="info">&nbsp;</div>

examples/kml.js

@@ -2,13 +2,18 @@ import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
 import KML from '../src/ol/format/KML.js';
 import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
-import BingMaps from '../src/ol/source/BingMaps.js';
+import XYZ from '../src/ol/source/XYZ.js';
 import VectorSource from '../src/ol/source/Vector.js';
 
+const key = 'get_your_own_D6rA4zTHduk6KOKTXzGB';
+const attributions = '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> ' +
+  '<a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>';
+
 const raster = new TileLayer({
-  source: new BingMaps({
-    imagerySet: 'Aerial',
-    key: 'As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5'
+  source: new XYZ({
+    attributions: attributions,
+    url: 'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=' + key,
+    maxZoom: 20
   })
 });
 

examples/layer-clipping.js

@@ -18,11 +18,17 @@ const map = new Map({
 
 osm.on('prerender', function(event) {
   const ctx = event.context;
+
+  // calculate the pixel ratio and rotation of the canvas
+  const matrix = event.inversePixelTransform;
+  const canvasPixelRatio = Math.sqrt(matrix[0] * matrix[0] + matrix[1] * matrix[1]);
+  const canvasRotation = -Math.atan2(matrix[1], matrix[0]);
   ctx.save();
-  const pixelRatio = event.frameState.pixelRatio;
-  const size = map.getSize();
-  ctx.translate(size[0] / 2 * pixelRatio, size[1] / 2 * pixelRatio);
-  ctx.scale(3 * pixelRatio, 3 * pixelRatio);
+  // center the canvas and remove rotation to position clipping
+  ctx.translate(ctx.canvas.width / 2, ctx.canvas.height / 2);
+  ctx.rotate(-canvasRotation);
+
+  ctx.scale(3 * canvasPixelRatio, 3 * canvasPixelRatio);
   ctx.translate(-75, -80);
   ctx.beginPath();
   ctx.moveTo(75, 40);
@@ -34,8 +40,11 @@ osm.on('prerender', function(event) {
   ctx.bezierCurveTo(85, 25, 75, 37, 75, 40);
   ctx.clip();
   ctx.translate(75, 80);
-  ctx.scale(1 / 3 / pixelRatio, 1 / 3 / pixelRatio);
-  ctx.translate(-size[0] / 2 * pixelRatio, -size[1] / 2 * pixelRatio);
+  ctx.scale(1 / 3 / canvasPixelRatio, 1 / 3 / canvasPixelRatio);
+
+  // reapply canvas rotation and position
+  ctx.rotate(canvasRotation);
+  ctx.translate(-ctx.canvas.width / 2, -ctx.canvas.height / 2);
 });
 
 osm.on('postrender', function(event) {

examples/layer-spy.html

@@ -8,9 +8,9 @@ docs: >
   In this example, the <code>prerender</code> listener sets a clipping mask around the most
   recent mouse position, giving you a spyglass effect for viewing one layer over another.</p>
   <p>Move around the map to see the effect.  Use the ↑ up and ↓ down arrow keys to adjust the spyglass size.</p>
-tags: "spy, image manipulation"
+tags: "spy, image manipulation, maptiler"
 cloak:
-  - key: As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5
-    value: Your Bing Maps Key from http://www.bingmapsportal.com/ here
+  - key: get_your_own_D6rA4zTHduk6KOKTXzGB
+    value: Get your own API key at https://www.maptiler.com/cloud/
 ---
 <div id="map" class="map"></div>

examples/layer-spy.js

@@ -2,16 +2,28 @@ import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
 import TileLayer from '../src/ol/layer/Tile.js';
 import {fromLonLat} from '../src/ol/proj.js';
-import BingMaps from '../src/ol/source/BingMaps.js';
+import XYZ from '../src/ol/source/XYZ.js';
+import {getRenderPixel} from '../src/ol/render.js';
 
-const key = 'As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5';
+const key = 'get_your_own_D6rA4zTHduk6KOKTXzGB';
+const attributions = '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> ' +
+  '<a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>';
 
 const roads = new TileLayer({
-  source: new BingMaps({key: key, imagerySet: 'RoadOnDemand'})
+  source: new XYZ({
+    attributions: attributions,
+    url: 'https://api.maptiler.com/maps/streets/{z}/{x}/{y}.png?key=' + key,
+    tileSize: 512,
+    maxZoom: 22
+  })
 });
 
 const imagery = new TileLayer({
-  source: new BingMaps({key: key, imagerySet: 'Aerial'})
+  source: new XYZ({
+    attributions: attributions,
+    url: 'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=' + key,
+    maxZoom: 20
+  })
 });
 
 const container = document.getElementById('map');
@@ -54,14 +66,15 @@ container.addEventListener('mouseout', function() {
 // before rendering the layer, do some clipping
 imagery.on('prerender', function(event) {
   const ctx = event.context;
-  const pixelRatio = event.frameState.pixelRatio;
   ctx.save();
   ctx.beginPath();
   if (mousePosition) {
     // only show a circle around the mouse
-    ctx.arc(mousePosition[0] * pixelRatio, mousePosition[1] * pixelRatio,
-      radius * pixelRatio, 0, 2 * Math.PI);
-    ctx.lineWidth = 5 * pixelRatio;
+    const pixel = getRenderPixel(event, mousePosition);
+    const offset = getRenderPixel(event, [mousePosition[0] + radius, mousePosition[1]]);
+    const canvasRadius = Math.sqrt(Math.pow(offset[0] - pixel[0], 2) + Math.pow(offset[1] - pixel[1], 2));
+    ctx.arc(pixel[0], pixel[1], canvasRadius, 0, 2 * Math.PI);
+    ctx.lineWidth = 5 * canvasRadius / radius;
     ctx.strokeStyle = 'rgba(0,0,0,0.5)';
     ctx.stroke();
   }

examples/layer-swipe.html

@@ -4,10 +4,10 @@ title: Layer Swipe
 shortdesc: Example of a Layer swipe map.
 docs: >
   Example of a Layer swipe map.
-tags: "swipe, openstreetmap"
+tags: "swipe, openstreetmap, maptiler"
 cloak:
-  - key: As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5
-    value: Your Bing Maps Key from http://www.bingmapsportal.com/ here
+  - key: get_your_own_D6rA4zTHduk6KOKTXzGB
+    value: Get your own API key at https://www.maptiler.com/cloud/
 ---
 <div id="map" class="map"></div>
 <input id="swipe" type="range" style="width: 100%">

examples/layer-swipe.js

@@ -1,21 +1,28 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
 import TileLayer from '../src/ol/layer/Tile.js';
-import BingMaps from '../src/ol/source/BingMaps.js';
 import OSM from '../src/ol/source/OSM.js';
+import XYZ from '../src/ol/source/XYZ.js';
+import {getRenderPixel} from '../src/ol/render.js';
 
 const osm = new TileLayer({
   source: new OSM()
 });
-const bing = new TileLayer({
-  source: new BingMaps({
-    key: 'As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5',
-    imagerySet: 'Aerial'
+
+const key = 'get_your_own_D6rA4zTHduk6KOKTXzGB';
+const attributions = '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> ' +
+  '<a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>';
+
+const aerial = new TileLayer({
+  source: new XYZ({
+    attributions: attributions,
+    url: 'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=' + key,
+    maxZoom: 20
   })
 });
 
 const map = new Map({
-  layers: [osm, bing],
+  layers: [osm, aerial],
   target: 'map',
   view: new View({
     center: [0, 0],
@@ -25,17 +32,26 @@ const map = new Map({
 
 const swipe = document.getElementById('swipe');
 
-bing.on('prerender', function(event) {
+aerial.on('prerender', function(event) {
   const ctx = event.context;
-  const width = ctx.canvas.width * (swipe.value / 100);
+  const mapSize = map.getSize();
+  const width = mapSize[0] * (swipe.value / 100);
+  const tl = getRenderPixel(event, [width, 0]);
+  const tr = getRenderPixel(event, [mapSize[0], 0]);
+  const bl = getRenderPixel(event, [width, mapSize[1]]);
+  const br = getRenderPixel(event, mapSize);
 
   ctx.save();
   ctx.beginPath();
-  ctx.rect(width, 0, ctx.canvas.width - width, ctx.canvas.height);
+  ctx.moveTo(tl[0], tl[1]);
+  ctx.lineTo(bl[0], bl[1]);
+  ctx.lineTo(br[0], br[1]);
+  ctx.lineTo(tr[0], tr[1]);
+  ctx.closePath();
   ctx.clip();
 });
 
-bing.on('postrender', function(event) {
+aerial.on('postrender', function(event) {
   const ctx = event.context;
   ctx.restore();
 });

examples/magnify.html

@@ -6,9 +6,9 @@ docs: >
   <p>This example makes use of the <code>postrender</code> event listener to
   oversample imagery in a circle around the pointer location.  Listeners for this event have access to the Canvas context and can manipulate image data.</p>
   <p>Move around the map to see the effect.  Use the ↑ up and ↓ down arrow keys to adjust the magnified circle size.</p>
-tags: "magnify, image manipulation"
+tags: "magnify, image manipulation, maptiler"
 cloak:
-  - key: As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5
-    value: Your Bing Maps Key from http://www.bingmapsportal.com/ here
+  - key: get_your_own_D6rA4zTHduk6KOKTXzGB
+    value: Get your own API key at https://www.maptiler.com/cloud/
 ---
 <div id="map" class="map"></div>

examples/magnify.js

@@ -2,13 +2,20 @@ import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
 import TileLayer from '../src/ol/layer/Tile.js';
 import {fromLonLat} from '../src/ol/proj.js';
-import BingMaps from '../src/ol/source/BingMaps.js';
+import XYZ from '../src/ol/source/XYZ.js';
 import {getRenderPixel} from '../src/ol/render.js';
 
-const key = 'As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5';
+const key = 'get_your_own_D6rA4zTHduk6KOKTXzGB';
+const attributions = '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> ' +
+  '<a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>';
 
 const imagery = new TileLayer({
-  source: new BingMaps({key: key, imagerySet: 'Aerial'})
+  source: new XYZ({
+    attributions: attributions,
+    url: 'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=' + key,
+    maxZoom: 20,
+    crossOrigin: ''
+  })
 });
 
 const container = document.getElementById('map');

examples/mapbox-style.html

@@ -1,7 +1,10 @@
 ---
 layout: example-verbatim.html
 title: Vector tiles created from a Mapbox Style object
-shortdesc: Example of using ol-mapbox-style with tiles from tilehosting.com.
+shortdesc: Example of using ol-mapbox-style with tiles from maptiler.com.
+docs: >
+  Example of using `ol-mapbox-style` with tiles from maptiler.com.
+  **Note**: Make sure to get your own API key at https://www.maptiler.com/cloud/ when using this example. No map will be visible when the API key has expired.
 tags: "vector tiles, mapbox style, ol-mapbox-style, maptiler"
 cloak:
   - key: get_your_own_D6rA4zTHduk6KOKTXzGB
@@ -15,6 +18,7 @@ cloak:
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
     <title>Mapbox Style objects with ol-mapbox-style</title>
     <link rel="stylesheet" href="../css/ol.css" type="text/css">
+    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=fetch,String.prototype.startsWith,Object.assign"></script>
     <style type="text/css">
       html, body, .map {
         margin: 0;

examples/page-scroll.html

@@ -0,0 +1,10 @@
+---
+layout: example.html
+title: Page Scrolling
+shortdesc: Shows a map that does not interrupt page scrolling.
+docs: >
+  To perform wheel/trackpad zoom and drag-pan actions only when the map
+  has the focus, configure your map div with a `tabindex` attribute.
+tags: "trackpad, mousewheel, zoom, scroll, page"
+---
+<div tabindex="1" id="map" class="map"></div>

examples/page-scroll.js

@@ -1,14 +1,10 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
-import {defaults as defaultInteractions} from '../src/ol/interaction.js';
 import TileLayer from '../src/ol/layer/Tile.js';
 import OSM from '../src/ol/source/OSM.js';
 
 
 const map = new Map({
-  interactions: defaultInteractions({
-    onFocusOnly: true
-  }),
   layers: [
     new TileLayer({
       source: new OSM()

examples/popup.css

@@ -1,8 +1,7 @@
 .ol-popup {
   position: absolute;
   background-color: white;
-  -webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
-  filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
+  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
   padding: 15px;
   border-radius: 10px;
   border: 1px solid #cccccc;

examples/raster.html

@@ -18,12 +18,12 @@ docs: >
     those pixels based on a threshold value (values above the
     threshold are green and those below are transparent).
   </p>
-tags: "raster, pixel"
+tags: "raster, pixel, maptiler"
 resources:
   - https://unpkg.com/d3@4.12.0/build/d3.js
 cloak:
-  - key: As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5
-    value: Your Bing Maps Key from http://www.bingmapsportal.com/ here
+  - key: get_your_own_D6rA4zTHduk6KOKTXzGB
+    value: Get your own API key at https://www.maptiler.com/cloud/
 ---
 <div class="rel">
   <div id="map" class="map"></div>

examples/raster.js

@@ -1,7 +1,7 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
 import {Image as ImageLayer, Tile as TileLayer} from '../src/ol/layer.js';
-import BingMaps from '../src/ol/source/BingMaps.js';
+import XYZ from '../src/ol/source/XYZ.js';
 import RasterSource from '../src/ol/source/Raster.js';
 
 const minVgi = 0;
@@ -46,9 +46,16 @@ function summarize(value, counts) {
 /**
  * Use aerial imagery as the input data for the raster source.
  */
-const bing = new BingMaps({
-  key: 'As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5',
-  imagerySet: 'Aerial'
+
+const key = 'get_your_own_D6rA4zTHduk6KOKTXzGB';
+const attributions = '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> ' +
+  '<a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>';
+
+const aerial = new XYZ({
+  attributions: attributions,
+  url: 'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=' + key,
+  maxZoom: 20,
+  crossOrigin: ''
 });
 
 
@@ -57,7 +64,7 @@ const bing = new BingMaps({
  * be colored green.
  */
 const raster = new RasterSource({
-  sources: [bing],
+  sources: [aerial],
   /**
    * Run calculations on pixel data.
    * @param {Array} pixels List of pixels (one per source).
@@ -110,7 +117,7 @@ raster.on('afteroperations', function(event) {
 const map = new Map({
   layers: [
     new TileLayer({
-      source: bing
+      source: aerial
     }),
     new ImageLayer({
       source: raster

examples/region-growing.html

@@ -23,10 +23,10 @@ docs: >
     This example also shows how an additional function can be made available
     to the operation.
   </p>
-tags: "raster, region growing"
+tags: "raster, region growing, maptiler"
 cloak:
-  - key: As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5
-    value: Your Bing Maps Key from http://www.bingmapsportal.com/ here
+  - key: get_your_own_D6rA4zTHduk6KOKTXzGB
+    value: Get your own API key at https://www.maptiler.com/cloud/
 ---
 <div id="map" class="map" style="cursor: pointer"></div>
 <table class="controls">

examples/region-growing.js

@@ -2,7 +2,7 @@ import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
 import {Image as ImageLayer, Tile as TileLayer} from '../src/ol/layer.js';
 import {fromLonLat} from '../src/ol/proj.js';
-import BingMaps from '../src/ol/source/BingMaps.js';
+import XYZ from '../src/ol/source/XYZ.js';
 import RasterSource from '../src/ol/source/Raster.js';
 
 function growRegion(inputs, data) {
@@ -72,10 +72,17 @@ function next4Edges(edge) {
   ];
 }
 
-const key = 'As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5';
+const key = 'get_your_own_D6rA4zTHduk6KOKTXzGB';
+const attributions = '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> ' +
+  '<a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>';
 
 const imagery = new TileLayer({
-  source: new BingMaps({key: key, imagerySet: 'Aerial'})
+  source: new XYZ({
+    attributions: attributions,
+    url: 'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=' + key,
+    maxZoom: 20,
+    crossOrigin: ''
+  })
 });
 
 const raster = new RasterSource({

examples/regularshape.html

@@ -5,7 +5,9 @@ shortdesc: Example of some Regular Shape styles.
 docs: >
   This example shows how several regular shapes
   or symbols (representing `x`, `cross`, `star`,
-  `triangle` and `square`) can be created.
+  `triangle`, `square` and `stacked`) can be created.
+
+  Style `stacked` represents possility to stack multiple shapes with offset
 tags: "vector, symbol, regularshape, style, square, cross, star, triangle, x"
 ---
 <div id="map" class="map"></div>

examples/regularshape.js

@@ -59,18 +59,39 @@ const styles = {
       radius2: 0,
       angle: Math.PI / 4
     })
-  })
+  }),
+  'stacked': [
+    new Style({
+      image: new RegularShape({
+        fill: fill,
+        stroke: stroke,
+        points: 4,
+        radius: 5,
+        angle: Math.PI / 4,
+        displacement: [0, 10]
+      })
+    }),
+    new Style({
+      image: new RegularShape({
+        fill: fill,
+        stroke: stroke,
+        points: 4,
+        radius: 10,
+        angle: Math.PI / 4
+      })
+    })
+  ]
 };
 
 
-const styleKeys = ['x', 'cross', 'star', 'triangle', 'square'];
+const styleKeys = ['x', 'cross', 'star', 'triangle', 'square', 'stacked'];
 const count = 250;
 const features = new Array(count);
 const e = 4500000;
 for (let i = 0; i < count; ++i) {
   const coordinates = [2 * e * Math.random() - e, 2 * e * Math.random() - e];
   features[i] = new Feature(new Point(coordinates));
-  features[i].setStyle(styles[styleKeys[Math.floor(Math.random() * 5)]]);
+  features[i].setStyle(styles[styleKeys[Math.floor(Math.random() * 6)]]);
 }
 
 const source = new VectorSource({

examples/reprojection.js

@@ -55,15 +55,6 @@ proj54009.setExtent([-18e6, -9e6, 18e6, 9e6]);
 
 const layers = {};
 
-layers['bng'] = new TileLayer({
-  source: new XYZ({
-    projection: 'EPSG:27700',
-    url: 'https://tileserver.maptiler.com/miniscale/{z}/{x}/{y}.png',
-    crossOrigin: '',
-    maxZoom: 6
-  })
-});
-
 layers['osm'] = new TileLayer({
   source: new OSM()
 });
@@ -95,9 +86,11 @@ layers['wms21781'] = new TileLayer({
 });
 
 const parser = new WMTSCapabilities();
-const url = 'https://map1.vis.earthdata.nasa.gov/wmts-arctic/' +
+
+layers['wmts3413'] = new TileLayer();
+const urlA = 'https://map1.vis.earthdata.nasa.gov/wmts-arctic/' +
     'wmts.cgi?SERVICE=WMTS&request=GetCapabilities';
-fetch(url).then(function(response) {
+fetch(urlA).then(function(response) {
   return response.text();
 }).then(function(text) {
   const result = parser.read(text);
@@ -108,9 +101,23 @@ fetch(url).then(function(response) {
   options.crossOrigin = '';
   options.projection = 'EPSG:3413';
   options.wrapX = false;
-  layers['wmts3413'] = new TileLayer({
-    source: new WMTS(options)
+  layers['wmts3413'].setSource(new WMTS(options));
+});
+
+layers['bng'] = new TileLayer();
+const urlB = 'https://tiles.arcgis.com/tiles/qHLhLQrcvEnxjtPr/arcgis/rest/services/OS_Open_Raster/MapServer/WMTS';
+fetch(urlB).then(function(response) {
+  return response.text();
+}).then(function(text) {
+  const result = parser.read(text);
+  const options = optionsFromCapabilities(result, {
+    layer: 'OS_Open_Raster'
   });
+  options.attributions = 'Contains OS data © Crown Copyright and database right 2019';
+  options.crossOrigin = '';
+  options.projection = 'EPSG:27700';
+  options.wrapX = false;
+  layers['bng'].setSource(new WMTS(options));
 });
 
 layers['grandcanyon'] = new TileLayer({

examples/resources/layout.css

@@ -74,13 +74,9 @@ ol.inline>li {
 .ol-attribution.ol-logo-only,
 .ol-attribution.ol-uncollapsible {
   max-width: calc(100% - 3em);
-  height: 1.5em;
 }
 .ol-attribution ul {
-  font-size: 1rem;
-}
-.ol-control button, .ol-attribution, .ol-scale-line-inner {
-  font-family: 'Lucida Grande',Verdana,Geneva,Lucida,Arial,Helvetica,sans-serif;
+  font-size: 14px;
 }
 .iframe-info iframe {
   width: 100%;

examples/sea-level.html

@@ -8,6 +8,11 @@ docs: >
     <a href="https://www.mapbox.com/blog/terrain-rgb/">Mapbox Terrain-RGB tiles</a>
     to "flood" areas below the elevation shown on the sea level slider.
   </p>
+  <p>
+    <code>ol/source/Raster</code> can take either a tile source or layer.
+    In this case a layer is used to allow disabling at the <code>prerender</code> event
+    of image smoothing which would change the precise elevation values set in the pixels.
+  </p>
 tags: "raster, pixel operation, flood"
 cloak:
   - key: pk.eyJ1IjoidHNjaGF1YiIsImEiOiJjaW5zYW5lNHkxMTNmdWttM3JyOHZtMmNtIn0.CDIBD8H-G2Gf-cPkIuWtRg

examples/sea-level.js

@@ -22,9 +22,15 @@ function flood(pixels, data) {
 }
 
 const key = 'pk.eyJ1IjoidHNjaGF1YiIsImEiOiJjaW5zYW5lNHkxMTNmdWttM3JyOHZtMmNtIn0.CDIBD8H-G2Gf-cPkIuWtRg';
-const elevation = new XYZ({
-  url: 'https://api.mapbox.com/v4/mapbox.terrain-rgb/{z}/{x}/{y}.pngraw?access_token=' + key,
-  crossOrigin: 'anonymous'
+const elevation = new TileLayer({
+  source: new XYZ({
+    url: 'https://api.mapbox.com/v4/mapbox.terrain-rgb/{z}/{x}/{y}.pngraw?access_token=' + key,
+    crossOrigin: 'anonymous'
+  })
+});
+elevation.on('prerender', function(evt) {
+  evt.context.imageSmoothingEnabled = false;
+  evt.context.msImageSmoothingEnabled = false;
 });
 
 const raster = new RasterSource({

examples/select-features.html

@@ -0,0 +1,22 @@
+---
+layout: example.html
+title: Select Features
+shortdesc: Example of using the Select interaction.
+docs: >
+  Choose between <code>Single-click</code>, <code>Click</code>, <code>Hover</code> and <code>Alt+Click</code> as the event type for selection in the combobox below. When using <code>Single-click</code> or <code>Click</code> you can hold do <code>Shift</code> key to toggle the feature in the selection.</p>
+  <p>Note: when <code>Single-click</code> is used double-clicks won't select features. This in contrast to <code>Click</code>, where a double-click will both select the feature and zoom the map (because of the <code>DoubleClickZoom</code> interaction). Note that <code>Single-click</code> is less responsive than <code>Click</code> because of the delay it uses to detect double-clicks.</p>
+  <p>In this example, a listener is registered for the Select interaction's <code>select</code> event in order to update the selection status above.
+tags: "select, vector"
+---
+<div id="map" class="map"></div>
+<form class="form-inline">
+  <label>Action type &nbsp;</label>
+    <select id="type" class="form-control">
+      <option value="click" selected>Click</option>
+      <option value="singleclick">Single-click</option>
+      <option value="pointermove">Hover</option>
+      <option value="altclick">Alt+Click</option>
+      <option value="none">None</option>
+    </select>
+  <span id="status">&nbsp;0 selected features</span>
+</form>

examples/side-by-side.html

@@ -4,10 +4,10 @@ title: Shared Views
 shortdesc: Two maps share view properties
 docs: >
   Two maps (one Road, one Aerial) share the same center, resolution and rotation.
-tags: "side-by-side, bing, bing-maps"
+tags: "side-by-side, xyz, maptiler"
 cloak:
-  - key: As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5
-    value: Your Bing Maps Key from http://www.bingmapsportal.com/ here
+  - key: get_your_own_D6rA4zTHduk6KOKTXzGB
+    value: Get your own API key at https://www.maptiler.com/cloud/
 ---
 <div class="wrapper">
   <div class="half">

examples/side-by-side.js

@@ -1,21 +1,26 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
 import TileLayer from '../src/ol/layer/Tile.js';
-import BingMaps from '../src/ol/source/BingMaps.js';
+import XYZ from '../src/ol/source/XYZ.js';
+
+const key = 'get_your_own_D6rA4zTHduk6KOKTXzGB';
+const attributions = '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> ' +
+  '<a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>';
 
 const roadLayer = new TileLayer({
-  source: new BingMaps({
-    key: 'As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5',
-    imagerySet: 'RoadOnDemand',
-    maxZoom: 19
+  source: new XYZ({
+    attributions: attributions,
+    url: 'https://api.maptiler.com/maps/streets/{z}/{x}/{y}.png?key=' + key,
+    tileSize: 512,
+    maxZoom: 22
   })
 });
 
 const aerialLayer = new TileLayer({
-  source: new BingMaps({
-    key: 'As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5',
-    imagerySet: 'Aerial',
-    maxZoom: 19
+  source: new XYZ({
+    attributions: attributions,
+    url: 'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=' + key,
+    maxZoom: 20
   })
 });
 

examples/street-labels.html

@@ -4,9 +4,9 @@ title: Street Labels
 shortdesc: Render street names.
 docs: >
   Example showing the use of a text style with `placement: 'line'` to render text along a path.
-tags: "vector, label, streets"
+tags: "vector, label, streets, maptiler"
 cloak:
-  - key: As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5
-    value: Your Bing Maps Key from http://www.bingmapsportal.com/ here
+  - key: get_your_own_D6rA4zTHduk6KOKTXzGB
+    value: Get your own API key at https://www.maptiler.com/cloud/
 ---
 <div id="map" class="map"></div>

examples/street-labels.js

@@ -3,7 +3,7 @@ import View from '../src/ol/View.js';
 import {getCenter} from '../src/ol/extent.js';
 import GeoJSON from '../src/ol/format/GeoJSON.js';
 import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
-import BingMaps from '../src/ol/source/BingMaps.js';
+import XYZ from '../src/ol/source/XYZ.js';
 import VectorSource from '../src/ol/source/Vector.js';
 import {Fill, Style, Text} from '../src/ol/style.js';
 
@@ -17,12 +17,17 @@ const style = new Style({
   })
 });
 
+const key = 'get_your_own_D6rA4zTHduk6KOKTXzGB';
+const attributions = '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> ' +
+  '<a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>';
+
 const viewExtent = [1817379, 6139595, 1827851, 6143616];
 const map = new Map({
   layers: [new TileLayer({
-    source: new BingMaps({
-      key: 'As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5',
-      imagerySet: 'Aerial'
+    source: new XYZ({
+      attributions: attributions,
+      url: 'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=' + key,
+      maxZoom: 20
     })
   }), new VectorLayer({
     declutter: true,

examples/svg-layer.css

@@ -0,0 +1,7 @@
+#map {
+  background: black;
+}
+
+.svg-layer path:hover {
+  opacity: 0.4;
+}

examples/svg-layer.html

@@ -0,0 +1,9 @@
+---
+layout: example.html
+title: SVG Layer
+shortdesc: Example of a map with an interactive svg layer.
+docs: >
+  With a plain `ol/Layer` and a `render` function, we can use an interactive svg as layer. Hover over countries to see the interactivity that is defined purely with a css `:hover` pseudo-class.
+tags: "svg, layer, render, transform"
+---
+<div id="map" class="map"></div>

examples/svg-layer.js

@@ -0,0 +1,48 @@
+import Map from '../src/ol/Map.js';
+import View from '../src/ol/View.js';
+import Layer from '../src/ol/layer/Layer.js';
+import {composeCssTransform} from '../src/ol/transform.js';
+
+const map = new Map({
+  target: 'map',
+  view: new View({
+    center: [0, 0],
+    extent: [-180, -90, 180, 90],
+    projection: 'EPSG:4326',
+    zoom: 2
+  })
+});
+
+const svgContainer = document.createElement('div');
+const xhr = new XMLHttpRequest();
+xhr.open('GET', 'data/world.svg');
+xhr.addEventListener('load', function() {
+  const svg = xhr.responseXML.documentElement;
+  svgContainer.ownerDocument.importNode(svg);
+  svgContainer.appendChild(svg);
+});
+xhr.send();
+
+const width = 2560;
+const height = 1280;
+const svgResolution = 360 / width;
+svgContainer.style.width = width + 'px';
+svgContainer.style.height = height + 'px';
+svgContainer.style.transformOrigin = 'top left';
+svgContainer.className = 'svg-layer';
+
+map.addLayer(new Layer({
+  render: function(frameState) {
+    const scale = svgResolution / frameState.viewState.resolution;
+    const center = frameState.viewState.center;
+    const size = frameState.size;
+    const cssTransform = composeCssTransform(
+      size[0] / 2, size[1] / 2,
+      scale, scale,
+      frameState.viewState.rotation,
+      -center[0] / svgResolution - width / 2, center[1] / svgResolution - height / 2);
+    svgContainer.style.transform = cssTransform;
+    svgContainer.style.opacity = this.getOpacity();
+    return svgContainer;
+  }
+}));

examples/templates/example.html

@@ -108,7 +108,14 @@
       <div class="row-fluid">
         <a class="codepen-button pull-right"><i class="fa fa-codepen"></i> Edit</a>
         <div class="span12">
-          <h4 id="title">{{ title }}</h4>
+          <h4 id="title">
+            {{ title }}
+          </h4>
+          <p class="tags">
+            {{#each tags}}
+              <a href="./index.html?q={{.}}" class="label label-primary">{{.}}</a>
+            {{/each}}
+          </p>
           {{{ contents }}}
         </div>
         <form method="POST" id="codepen-form" target="_blank" action="https://codesandbox.io/api/v1/sandboxes/define">
@@ -132,7 +139,7 @@
   &lt;head&gt;
     &lt;title&gt;{{ title }}&lt;/title&gt;
     &lt;!-- The line below is only needed for old environments like Internet Explorer and Android 4.x --&gt;
-    &lt;script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"&gt;&lt;/script&gt;{{#if extraHead.remote}}
+    &lt;script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=fetch,requestAnimationFrame,Element.prototype.classList,URL"&gt;&lt;/script&gt;{{#if extraHead.remote}}
 {{ indent extraHead.remote spaces=4 }}{{/if}}
     &lt;style&gt;
       .map {

examples/tracing.html

@@ -0,0 +1,22 @@
+---
+layout: example.html
+title: Tracing around a polygon
+shortdesc: Example of setting up a draw interaction to easily snap to an existing feature.
+docs: >
+  This example showcases how the draw interaction API can be set up to make snapping along
+  an existing geometry easier while preserving topology, which is sometimes called "tracing".
+  When the user clicks on two different points on the Idaho state border,
+  the part of the border comprised between these two points is added to
+  the currently drawn feature.
+  This leverages the `appendCoordinates` method of the `ol/interaction/Draw` interaction.
+tags: "draw, trace, snap, vector, topology"
+---
+<div id="map" class="map"></div>
+<form class="form-inline">
+  <label>Geometry type &nbsp;</label>
+  <select id="type">
+    <option value="Polygon">Polygon</option>
+    <option value="LineString">LineString</option>
+    <option value="None">None</option>
+  </select>
+</form>

examples/tracing.js

@@ -0,0 +1,253 @@
+import Map from '../src/ol/Map.js';
+import View from '../src/ol/View.js';
+import Draw from '../src/ol/interaction/Draw.js';
+import Snap from '../src/ol/interaction/Snap.js';
+import Style from '../src/ol/style/Style.js';
+import Stroke from '../src/ol/style/Stroke.js';
+import Fill from '../src/ol/style/Fill.js';
+import GeoJSON from '../src/ol/format/GeoJSON.js';
+import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
+import {OSM, Vector as VectorSource} from '../src/ol/source.js';
+import LineString from '../src/ol/geom/LineString.js';
+import Feature from '../src/ol/Feature.js';
+
+// math utilities
+
+// coordinates; will return the length of the [a, b] segment
+function length(a, b) {
+  return Math.sqrt((b[0] - a[0]) * (b[0] - a[0]) + (b[1] - a[1]) * (b[1] - a[1]));
+}
+
+// coordinates; will return true if c is on the [a, b] segment
+function isOnSegment(c, a, b) {
+  const lengthAc = length(a, c);
+  const lengthAb = length(a, b);
+  const dot = ((c[0] - a[0]) * (b[0] - a[0]) + (c[1] - a[1]) * (b[1] - a[1])) / lengthAb;
+  return Math.abs(lengthAc - dot) < 1e-6 && lengthAc < lengthAb;
+}
+
+// modulo for negative values, eg: mod(-1, 4) returns 3
+function mod(a, b) {
+  return ((a % b) + b) % b;
+}
+
+// returns a coordinates array which contains the segments of the feature's
+// outer ring between the start and end points
+// Note: this assumes the base feature is a single polygon
+function getPartialRingCoords(feature, startPoint, endPoint) {
+  let polygon = feature.getGeometry();
+  if (polygon.getType() === 'MultiPolygon') {
+    polygon = polygon.getPolygon(0);
+  }
+  const ringCoords = polygon.getLinearRing().getCoordinates();
+
+  let i, pointA, pointB, startSegmentIndex = -1;
+  for (i = 0; i < ringCoords.length; i++) {
+    pointA = ringCoords[i];
+    pointB = ringCoords[mod(i + 1, ringCoords.length)];
+
+    // check if this is the start segment dot product
+    if (isOnSegment(startPoint, pointA, pointB)) {
+      startSegmentIndex = i;
+      break;
+    }
+  }
+
+  const cwCoordinates = [];
+  let cwLength = 0;
+  const ccwCoordinates = [];
+  let ccwLength = 0;
+
+  // build clockwise coordinates
+  for (i = 0; i < ringCoords.length; i++) {
+    pointA = i === 0 ? startPoint : ringCoords[mod(i + startSegmentIndex, ringCoords.length)];
+    pointB = ringCoords[mod(i + startSegmentIndex + 1, ringCoords.length)];
+    cwCoordinates.push(pointA);
+
+    if (isOnSegment(endPoint, pointA, pointB)) {
+      cwCoordinates.push(endPoint);
+      cwLength += length(pointA, endPoint);
+      break;
+    } else {
+      cwLength += length(pointA, pointB);
+    }
+  }
+
+  // build counter-clockwise coordinates
+  for (i = 0; i < ringCoords.length; i++) {
+    pointA = ringCoords[mod(startSegmentIndex - i, ringCoords.length)];
+    pointB = i === 0 ? startPoint : ringCoords[mod(startSegmentIndex - i + 1, ringCoords.length)];
+    ccwCoordinates.push(pointB);
+
+    if (isOnSegment(endPoint, pointA, pointB)) {
+      ccwCoordinates.push(endPoint);
+      ccwLength += length(endPoint, pointB);
+      break;
+    } else {
+      ccwLength += length(pointA, pointB);
+    }
+  }
+
+  // keep the shortest path
+  return ccwLength < cwLength ? ccwCoordinates : cwCoordinates;
+}
+
+
+// layers definition
+
+const raster = new TileLayer({
+  source: new OSM()
+});
+
+// features in this layer will be snapped to
+const baseVector = new VectorLayer({
+  source: new VectorSource({
+    format: new GeoJSON(),
+    url: 'https://ahocevar.com/geoserver/wfs?service=wfs&request=getfeature&typename=topp:states&cql_filter=STATE_NAME=\'Idaho\'&outputformat=application/json'
+  })
+});
+
+// this is were the drawn features go
+const drawVector = new VectorLayer({
+  source: new VectorSource(),
+  style: new Style({
+    stroke: new Stroke({
+      color: 'rgba(100, 255, 0, 1)',
+      width: 2
+    }),
+    fill: new Fill({
+      color: 'rgba(100, 255, 0, 0.3)'
+    })
+  })
+});
+
+// this line only appears when we're tracing a feature outer ring
+const previewLine = new Feature({
+  geometry: new LineString([])
+});
+const previewVector = new VectorLayer({
+  source: new VectorSource({
+    features: [previewLine]
+  }),
+  style: new Style({
+    stroke: new Stroke({
+      color: 'rgba(255, 0, 0, 1)',
+      width: 2
+    })
+  })
+});
+
+const map = new Map({
+  layers: [raster, baseVector, drawVector, previewVector],
+  target: 'map',
+  view: new View({
+    center: [-12986427, 5678422],
+    zoom: 5
+  })
+});
+
+let drawInteraction, tracingFeature, startPoint, endPoint;
+let drawing = false;
+
+const getFeatureOptions = {
+  hitTolerance: 10,
+  layerFilter: (layer) => {
+    return layer === baseVector;
+  }
+};
+
+// the click event is used to start/end tracing around a feature
+map.on('click', (event) => {
+  if (!drawing) {
+    return;
+  }
+
+  let hit = false;
+  map.forEachFeatureAtPixel(
+    event.pixel,
+    (feature) => {
+      if (tracingFeature && feature !== tracingFeature) {
+        return;
+      }
+
+      hit = true;
+      const coord = map.getCoordinateFromPixel(event.pixel);
+
+      // second click on the tracing feature: append the ring coordinates
+      if (feature === tracingFeature) {
+        endPoint = tracingFeature.getGeometry().getClosestPoint(coord);
+        const appendCoords = getPartialRingCoords(tracingFeature, startPoint, endPoint);
+        drawInteraction.removeLastPoint();
+        drawInteraction.appendCoordinates(appendCoords);
+        tracingFeature = null;
+      }
+
+      // start tracing on the feature ring
+      tracingFeature = feature;
+      startPoint = tracingFeature.getGeometry().getClosestPoint(coord);
+    },
+    getFeatureOptions
+  );
+
+  if (!hit) {
+    // clear current tracing feature & preview
+    previewLine.getGeometry().setCoordinates([]);
+    tracingFeature = null;
+  }
+});
+
+// the pointermove event is used to show a preview of the result of the tracing
+map.on('pointermove', (event) => {
+  if (tracingFeature && drawing) {
+    let coord = null;
+    map.forEachFeatureAtPixel(
+      event.pixel,
+      (feature) => {
+        if (tracingFeature === feature) {
+          coord = map.getCoordinateFromPixel(event.pixel);
+        }
+      },
+      getFeatureOptions
+    );
+
+    let previewCoords = [];
+    if (coord) {
+      endPoint = tracingFeature.getGeometry().getClosestPoint(coord);
+      previewCoords = getPartialRingCoords(tracingFeature, startPoint, endPoint);
+    }
+    previewLine.getGeometry().setCoordinates(previewCoords);
+  }
+});
+
+const snapInteraction = new Snap({
+  source: baseVector.getSource()
+});
+
+const typeSelect = document.getElementById('type');
+
+function addInteraction() {
+  const value = typeSelect.value;
+  if (value !== 'None') {
+    drawInteraction = new Draw({
+      source: drawVector.getSource(),
+      type: typeSelect.value
+    });
+    drawInteraction.on('drawstart', () => {
+      drawing = true;
+    });
+    drawInteraction.on('drawend', () => {
+      drawing = false;
+      previewLine.getGeometry().setCoordinates([]);
+      tracingFeature = null;
+    });
+    map.addInteraction(drawInteraction);
+    map.addInteraction(snapInteraction);
+  }
+}
+
+typeSelect.onchange = function() {
+  map.removeInteraction(drawInteraction);
+  map.removeInteraction(snapInteraction);
+  addInteraction();
+};
+addInteraction();

examples/two-finger-pan-scroll.html

@@ -0,0 +1,12 @@
+---
+layout: example.html
+title: Panning and page scrolling
+shortdesc: Shows a map that allows page scrolling unless two fingers or Cmd/Ctrl are used to pan the map.
+docs: >
+  This example shows a common behavior for page scrolling: on touch devices, when one finger
+  is placed on the map, it can be used to scroll the page. Only two fingers will perform drag pan.
+  For mouse or trackpad devices, the platform modifier key (Cmd or Ctrl) will enable drag pan on
+  the map, otherwise the page will scroll.
+tags: "trackpad, mousewheel, zoom, scroll, page"
+---
+<div id="map" class="map"></div>

examples/two-finger-pan-scroll.js

@@ -0,0 +1,29 @@
+import Map from '../src/ol/Map.js';
+import View from '../src/ol/View.js';
+import TileLayer from '../src/ol/layer/Tile.js';
+import OSM from '../src/ol/source/OSM.js';
+import {defaults, DragPan, MouseWheelZoom} from '../src/ol/interaction.js';
+import {platformModifierKeyOnly} from '../src/ol/events/condition.js';
+
+const map = new Map({
+  interactions: defaults({dragPan: false, mouseWheelZoom: false}).extend([
+    new DragPan({
+      condition: function(event) {
+        return this.getPointerCount() === 2 || platformModifierKeyOnly(event);
+      }
+    }),
+    new MouseWheelZoom({
+      condition: platformModifierKeyOnly
+    })
+  ]),
+  layers: [
+    new TileLayer({
+      source: new OSM()
+    })
+  ],
+  target: 'map',
+  view: new View({
+    center: [0, 0],
+    zoom: 2
+  })
+});

examples/vector-tile-info.js

@@ -23,7 +23,7 @@ map.on('pointermove', showInfo);
 const info = document.getElementById('info');
 function showInfo(event) {
   const features = map.getFeaturesAtPixel(event.pixel);
-  if (!features) {
+  if (features.length == 0) {
     info.innerText = '';
     info.style.opacity = 0;
     return;

examples/vector-tile-selection.html

@@ -5,7 +5,11 @@ shortdesc: Select features from vector tiles.
 docs: >
   <p>
     Click a rendered vector-tile feature to highlight it on the map. Click on an empty spot (ocean) to reset the selection.
-    By changing the action type to "Multi Select" you can select multiple features at a time.
+    By changing the action type to "Multi Select" you can select multiple features at a time. With "Single Select on hover",
+    features will be higlighted when the pointer is above them.
+  </p><p>
+    The selection layer is configured with `renderMode: 'vector'` for better performance on frequent redraws,
+    i.e. when 'Single select on hover' is selected.
   </p>
 tags: "vector tiles, selection"
 ---
@@ -15,5 +19,6 @@ tags: "vector tiles, selection"
   <select id="type" class="form-control">
     <option value="singleselect" selected>Single Select</option>
     <option value="multiselect">Multi Select</option>
+    <option value="singleselect-hover">Single Select on hover</option>
   </select>
 </form>

examples/vector-tile-selection.js

@@ -7,28 +7,37 @@ import {Fill, Stroke, Style} from '../src/ol/style.js';
 
 // lookup for selection objects
 let selection = {};
-// feature property to act as identifier
-const idProp = 'iso_a3';
+
+const country = new Style({
+  stroke: new Stroke({
+    color: 'gray',
+    width: 1
+  }),
+  fill: new Fill({
+    color: 'rgba(20,20,20,0.9)'
+  })
+});
+const selectedCountry = new Style({
+  stroke: new Stroke({
+    color: 'rgba(200,20,20,0.8)',
+    width: 2
+  }),
+  fill: new Fill({
+    color: 'rgba(200,20,20,0.4)'
+  })
+});
 
 const vtLayer = new VectorTileLayer({
   declutter: true,
   source: new VectorTileSource({
-    format: new MVT(),
+    maxZoom: 15,
+    format: new MVT({
+      idProperty: 'iso_a3'
+    }),
     url: 'https://ahocevar.com/geoserver/gwc/service/tms/1.0.0/' +
       'ne:ne_10m_admin_0_countries@EPSG%3A900913@pbf/{z}/{x}/{-y}.pbf'
   }),
-  style: function(feature) {
-    const selected = !!selection[feature.get(idProp)];
-    return new Style({
-      stroke: new Stroke({
-        color: selected ? 'rgba(200,20,20,0.8)' : 'gray',
-        width: selected ? 2 : 1
-      }),
-      fill: new Fill({
-        color: selected ? 'rgba(200,20,20,0.2)' : 'rgba(20,20,20,0.9)'
-      })
-    });
-  }
+  style: country
 });
 
 const map = new Map({
@@ -38,33 +47,48 @@ const map = new Map({
   target: 'map',
   view: new View({
     center: [0, 0],
-    zoom: 2
+    zoom: 2,
+    multiWorld: true
   })
 });
 
+// Selection
+const selectionLayer = new VectorTileLayer({
+  map: map,
+  renderMode: 'vector',
+  source: vtLayer.getSource(),
+  style: function(feature) {
+    if (feature.getId() in selection) {
+      return selectedCountry;
+    }
+  }
+});
+
 const selectElement = document.getElementById('type');
 
-map.on('click', function(event) {
-  const features = map.getFeaturesAtPixel(event.pixel);
-  if (!features) {
-    selection = {};
-    // force redraw of layer style
-    vtLayer.setStyle(vtLayer.getStyle());
-    return;
-  }
-  const feature = features[0];
-  if (!feature) {
+map.on(['click', 'pointermove'], function(event) {
+  if (selectElement.value === 'singleselect-hover' && event.type !== 'pointermove' ||
+      selectElement.value !== 'singleselect-hover' && event.type === 'pointermove') {
     return;
   }
+  vtLayer.getFeatures(event.pixel).then(function(features) {
+    if (!features.length) {
+      selection = {};
+      selectionLayer.changed();
+      return;
+    }
+    const feature = features[0];
+    if (!feature) {
+      return;
+    }
+    const fid = feature.getId();
 
-  const fid = feature.get(idProp);
+    if (selectElement.value.startsWith('singleselect')) {
+      selection = {};
+    }
+    // add selected feature to lookup
+    selection[fid] = feature;
 
-  if (selectElement.value === 'singleselect') {
-    selection = {};
-  }
-  // add selected feature to lookup
-  selection[fid] = feature;
-
-  // force redraw of layer style
-  vtLayer.setStyle(vtLayer.getStyle());
+    selectionLayer.changed();
+  });
 });

examples/vector-tiles-4326.html

@@ -0,0 +1,15 @@
+---
+layout: example.html
+title: Vector tiles in EPSG:4326
+shortdesc: Example showing vector tiles in EPSG:4326 (styled using ol-mapbox-style)
+docs: >
+  Example showing vector tiles in EPSG:4326 (styled using `ol-mapbox-style`) loaded from maptiler.com.
+  **Note**: Make sure to get your own API key at https://www.maptiler.com/cloud/ when using this example. No map will be visible when the API key has expired.
+tags: "vector tiles, epsg4326, mapbox style, ol-mapbox-style, maptiler"
+resources:
+  - https://cdn.polyfill.io/v2/polyfill.min.js?features=String.prototype.startsWith,Object.assign"
+cloak:
+  - key: get_your_own_D6rA4zTHduk6KOKTXzGB
+    value: Get your own API key at https://www.maptiler.com/cloud/
+---
+<div id="map" class="map" style="background:none;"></div>

examples/vector-tiles-4326.js

@@ -0,0 +1,50 @@
+import View from '../src/ol/View.js';
+import MVT from '../src/ol/format/MVT.js';
+import VectorTileSource from '../src/ol/source/VectorTile.js';
+import TileGrid from '../src/ol/tilegrid/TileGrid.js';
+
+import olms from 'ol-mapbox-style';
+import {defaultResolutions} from 'ol-mapbox-style/dist/util.js';
+
+const key = 'get_your_own_D6rA4zTHduk6KOKTXzGB';
+
+// Match the server resolutions
+const maxResolution = 360 / 512;
+defaultResolutions.length = 14;
+for (let i = 0; i < 14; ++i) {
+  defaultResolutions[i] = maxResolution / Math.pow(2, i + 1);
+}
+
+olms('map', 'https://api.maptiler.com/maps/basic-4326/style.json?key=' + key).then(function(map) {
+
+  // Custom tile grid for the EPSG:4326 projection
+  const tileGrid = new TileGrid({
+    extent: [-180, -90, 180, 90],
+    tileSize: 512,
+    resolutions: defaultResolutions
+  });
+
+  const mapboxStyle = map.get('mapbox-style');
+
+  // Replace the source with a EPSG:4326 projection source for each vector tile layer
+  map.getLayers().forEach(function(layer) {
+    const mapboxSource = layer.get('mapbox-source');
+    if (mapboxSource && mapboxStyle.sources[mapboxSource].type === 'vector') {
+      const source = layer.getSource();
+      layer.setSource(new VectorTileSource({
+        format: new MVT(),
+        projection: 'EPSG:4326',
+        urls: source.getUrls(),
+        tileGrid: tileGrid
+      }));
+    }
+  });
+
+  // Configure the map with a view with EPSG:4326 projection
+  map.setView(new View({
+    projection: 'EPSG:4326',
+    zoom: mapboxStyle.zoom,
+    center: mapboxStyle.center
+  }));
+
+});

examples/webgl-points-layer.html

@@ -3,19 +3,67 @@ layout: example.html
 title: WebGL points layer
 shortdesc: Using a WebGL-optimized layer to render a large quantities of points
 docs: >
-  <p>This example shows how to use a <code>WebGLPointsLayer</code> to show a large amount of points on the map.</p>
-  <p>The layer is given a style in JSON format which allows a certain level of customization of the final reprensentation.</p>
-  <p>
-    The following operators can be used for numerical values:
-    <ul>
-      <li><code>["get", "attributeName"]</code> fetches a numeric attribute value for each feature</li>
-      <li><code>["+", value, value]</code> adds two values (which an either be numeric, or the result of another operator)</li>
-      <li><code>["*", value, value]</code> multiplies two values</li>
-      <li><code>["clamp", value, min, max]</code> outputs a value between <code>min</code> and <code>max</code></li>
-      <li><code>["stretch", value, low1, high1, low2, high2]</code> outputs a value which has been mapped from the
-        <code>low1..high1</code> range to the <code>low2..high2</code> range</li>
-    </ul>
-  </p>
+  This example shows how to use a `WebGLPointsLayer` to show a large amount of points on the map.
+  The layer is given a style in JSON format which allows a certain level of customization of the final reprensentation.
+
+  The following operators can be used:
+
+   * Reading operators:
+     * `['get', 'attributeName']` fetches a feature attribute (it will be prefixed by `a_` in the shader)
+       Note: those will be taken from the attributes provided to the renderer
+     * `['var', 'varName']` fetches a value from the style variables, or 0 if undefined
+     * `['time']` returns the time in seconds since the creation of the layer
+     * `['zoom']` returns the current zoom level
+     * `['resolution']` returns the current resolution
+
+   * Math operators:
+     * `['*', value1, value2]` multiplies `value1` by `value2`
+     * `['/', value1, value2]` divides `value1` by `value2`
+     * `['+', value1, value2]` adds `value1` and `value2`
+     * `['-', value1, value2]` subtracts `value2` from `value1`
+     * `['clamp', value, low, high]` clamps `value` between `low` and `high`
+     * `['%', value1, value2]` returns the result of `value1 % value2` (modulo)
+     * `['^', value1, value2]` returns the value of `value1` raised to the `value2` power
+
+   * Transform operators:
+     * `['case', condition1, output1, ...conditionN, outputN, fallback]` selects the first output whose corresponding
+       condition evaluates to `true`. If no match is found, returns the `fallback` value.
+       All conditions should be `boolean`, output and fallback can be any kind.
+     * `['match', input, match1, output1, ...matchN, outputN, fallback]` compares the `input` value against all
+       provided `matchX` values, returning the output associated with the first valid match. If no match is found,
+       returns the `fallback` value.
+       `input` and `matchX` values must all be of the same type, and can be `number` or `string`. `outputX` and
+       `fallback` values must be of the same type, and can be of any kind.
+     * `['interpolate', interpolation, input, stop1, output1, ...stopN, outputN]` returns a value by interpolating between
+       pairs of inputs and outputs; `interpolation` can either be `['linear']` or `['exponential', base]` where `base` is
+       the rate of increase from stop A to stop B (i.e. power to which the interpolation ratio is raised); a value
+       of 1 is equivalent to `['linear']`.
+       `input` and `stopX` values must all be of type `number`. `outputX` values can be `number` or `color` values.
+       Note: `input` will be clamped between `stop1` and `stopN`, meaning that all output values will be comprised
+       between `output1` and `outputN`.
+
+   * Logical operators:
+     * `['<', value1, value2]` returns `true` if `value1` is strictly lower than `value2`, or `false` otherwise.
+     * `['<=', value1, value2]` returns `true` if `value1` is lower than or equals `value2`, or `false` otherwise.
+     * `['>', value1, value2]` returns `true` if `value1` is strictly greater than `value2`, or `false` otherwise.
+     * `['>=', value1, value2]` returns `true` if `value1` is greater than or equals `value2`, or `false` otherwise.
+     * `['==', value1, value2]` returns `true` if `value1` equals `value2`, or `false` otherwise.
+     * `['!=', value1, value2]` returns `true` if `value1` does not equal `value2`, or `false` otherwise.
+     * `['!', value1]` returns `false` if `value1` is `true` or greater than `0`, or `true` otherwise.
+     * `['between', value1, value2, value3]` returns `true` if `value1` is contained between `value2` and `value3`
+       (inclusively), or `false` otherwise.
+
+   * Conversion operators:
+     * `['array', value1, ...valueN]` creates a numerical array from `number` values; please note that the amount of
+       values can currently only be 2, 3 or 4.
+     * `['color', red, green, blue, alpha]` creates a `color` value from `number` values; the `alpha` parameter is
+       optional; if not specified, it will be set to 1.
+       Note: `red`, `green` and `blue` components must be values between 0 and 255; `alpha` between 0 and 1.
+   Values can either be literals or another operator, as they will be evaluated recursively.
+   Literal values can be of the following types:
+    * `boolean`
+    * `number`
+    * `string`
 
 tags: "webgl, point, layer, feature"
 experimental: true
@@ -24,15 +72,16 @@ experimental: true
 <div id="map" class="map"></div>
 <label>Choose a predefined style from the list below or edit it as JSON manually.</label><br>
 <select id="style-select">
-  <option>Predefined styles</option>
   <option value="icons">Icons</option>
   <option value="triangles">Triangles, color related to population</option>
+  <option value="triangles-latitude">Triangles, color related to latitude</option>
   <option value="circles">Circles, size related to population</option>
+  <option value="circles-zoom">Circles, size related to zoom</option>
+  <option value="rotating-bars">Rotating bars</option>
 </select>
 <textarea style="width: 100%; height: 20rem; font-family: monospace; font-size: small;" id="style-editor"></textarea>
-<small id="style-valid" style="display: none; color: forestgreen">
-  ✓ style is valid
-</small>
-<small id="style-invalid" style="display: none; color: grey">
-  ✗ style not yet valid...
+<small>
+  <span id="style-valid" style="display: none; color: forestgreen">✓ style is valid</span>
+  <span id="style-invalid" style="display: none; color: grey">✗ <span>style not yet valid...</span></span>
+  &nbsp;
 </small>

examples/webgl-points-layer.js

@@ -27,27 +27,105 @@ const predefinedStyles = {
       symbolType: 'triangle',
       size: 18,
       color: [
-        ['stretch', ['get', 'population'], 20000, 300000, 0.1, 1.0],
-        ['stretch', ['get', 'population'], 20000, 300000, 0.6, 0.3],
-        0.6,
-        1.0
+        'interpolate',
+        ['linear'],
+        ['get', 'population'],
+        20000, '#5aca5b',
+        300000, '#ff6a19'
       ],
       rotateWithView: true
     }
   },
+  'triangles-latitude': {
+    symbol: {
+      symbolType: 'triangle',
+      size: [
+        'interpolate',
+        ['linear'],
+        ['get', 'population'],
+        40000, 12,
+        2000000, 24
+      ],
+      color: [
+        'interpolate',
+        ['linear'],
+        ['get', 'latitude'],
+        -60, '#ff14c3',
+        -20, '#ff621d',
+        20, '#ffed02',
+        60, '#00ff67'
+      ],
+      offset: [0, 0],
+      opacity: 0.95
+    }
+  },
   'circles': {
     symbol: {
       symbolType: 'circle',
-      size: ['stretch', ['get', 'population'], 40000, 2000000, 8, 28],
+      size: [
+        'interpolate',
+        ['linear'],
+        ['get', 'population'],
+        40000, 8,
+        2000000, 28
+      ],
       color: '#006688',
       rotateWithView: false,
       offset: [0, 0],
-      opacity: ['stretch', ['get', 'population'], 40000, 2000000, 0.6, 0.92]
+      opacity: [
+        'interpolate',
+        ['linear'],
+        ['get', 'population'],
+        40000, 0.6,
+        2000000, 0.92
+      ]
+    }
+  },
+  'circles-zoom': {
+    symbol: {
+      symbolType: 'circle',
+      size: [
+        'interpolate',
+        ['exponential', 2.5],
+        ['zoom'],
+        2, 1,
+        14, 32
+      ],
+      color: '#240572',
+      offset: [0, 0],
+      opacity: 0.95
+    }
+  },
+  'rotating-bars': {
+    symbol: {
+      symbolType: 'square',
+      rotation: ['*', [
+        'time'
+      ], 0.1],
+      size: ['array', 4, [
+        'interpolate',
+        ['linear'],
+        ['get', 'population'],
+        20000, 4,
+        300000, 28]
+      ],
+      color: [
+        'interpolate',
+        ['linear'],
+        ['get', 'population'],
+        20000, '#ffdc00',
+        300000, '#ff5b19'
+      ],
+      offset: ['array', 0, [
+        'interpolate',
+        ['linear'],
+        ['get', 'population'],
+        20000, 2,
+        300000, 14]
+      ]
     }
   }
 };
-let literalStyle = predefinedStyles['circles'];
-let pointsLayer;
 
 const map = new Map({
   layers: [
@@ -62,45 +140,66 @@ const map = new Map({
   })
 });
 
-const editor = document.getElementById('style-editor');
-editor.value = JSON.stringify(literalStyle, null, 2);
-
-function refreshLayer() {
-  if (pointsLayer) {
-    map.removeLayer(pointsLayer);
-  }
+let literalStyle;
+let pointsLayer;
+function refreshLayer(newStyle) {
+  const previousLayer = pointsLayer;
   pointsLayer = new WebGLPointsLayer({
     source: vectorSource,
-    style: literalStyle
+    style: newStyle,
+    disableHitDetection: true
   });
   map.addLayer(pointsLayer);
+
+  if (previousLayer) {
+    map.removeLayer(previousLayer);
+    previousLayer.dispose();
+  }
+  literalStyle = newStyle;
 }
 
-function setStyleStatus(valid) {
-  document.getElementById('style-valid').style.display = valid ? 'initial' : 'none';
-  document.getElementById('style-invalid').style.display = !valid ? 'initial' : 'none';
+const spanValid = document.getElementById('style-valid');
+const spanInvalid = document.getElementById('style-invalid');
+function setStyleStatus(errorMsg) {
+  const isError = typeof errorMsg === 'string';
+  spanValid.style.display = errorMsg === null ? 'initial' : 'none';
+  spanInvalid.firstElementChild.innerText = isError ? errorMsg : '';
+  spanInvalid.style.display = isError ? 'initial' : 'none';
 }
 
+const editor = document.getElementById('style-editor');
 editor.addEventListener('input', function() {
   const textStyle = editor.value;
-  if (JSON.stringify(JSON.parse(textStyle)) === JSON.stringify(literalStyle)) {
-    return;
-  }
-
   try {
-    literalStyle = JSON.parse(textStyle);
-    refreshLayer();
-    setStyleStatus(true);
+    const newLiteralStyle = JSON.parse(textStyle);
+    if (JSON.stringify(newLiteralStyle) !== JSON.stringify(literalStyle)) {
+      refreshLayer(newLiteralStyle);
+    }
+    setStyleStatus(null);
   } catch (e) {
-    setStyleStatus(false);
+    setStyleStatus(e.message);
   }
 });
-refreshLayer();
 
 const select = document.getElementById('style-select');
-select.addEventListener('change', function() {
+select.value = 'circles';
+function onSelectChange() {
   const style = select.value;
-  literalStyle = predefinedStyles[style];
-  editor.value = JSON.stringify(literalStyle, null, 2);
-  refreshLayer();
-});
+  const newLiteralStyle = predefinedStyles[style];
+  editor.value = JSON.stringify(newLiteralStyle, null, 2);
+  try {
+    refreshLayer(newLiteralStyle);
+    setStyleStatus();
+  } catch (e) {
+    setStyleStatus(e.message);
+  }
+}
+onSelectChange();
+select.addEventListener('change', onSelectChange);
+
+// animate the map
+function animate() {
+  map.render();
+  window.requestAnimationFrame(animate);
+}
+animate();

examples/webpack/example-builder.js

@@ -138,9 +138,13 @@ ExampleBuilder.prototype.apply = function(compiler) {
       .filter(chunk => chunk.names[0] !== this.common);
 
     const exampleData = [];
+    const uniqueTags = new Set();
     const promises = chunks.map(async chunk => {
       const [assets, data] = await this.render(compiler.context, chunk);
 
+      // collect tags for main page... TODO: implement index tag links
+      data.tags.forEach(tag => uniqueTags.add(tag));
+
       exampleData.push({
         link: data.filename,
         example: data.filename,
@@ -158,7 +162,8 @@ ExampleBuilder.prototype.apply = function(compiler) {
 
     const info = {
       examples: exampleData,
-      index: createWordIndex(exampleData)
+      index: createWordIndex(exampleData),
+      tags: Array.from(uniqueTags)
     };
 
     const indexSource = `var info = ${JSON.stringify(info)}`;
@@ -182,6 +187,13 @@ ExampleBuilder.prototype.render = async function(dir, chunk) {
   data.olVersion = pkg.version;
   data.filename = htmlName;
 
+  // process tags
+  if (data.tags) {
+    data.tags = data.tags.replace(/[\s"]+/g, '').split(',');
+  } else {
+    data.tags = [];
+  }
+
   // add in script tag
   const jsName = `${name}.js`;
   let jsSource = getJsSource(chunk, path.join('.', jsName));

examples/wms-getlegendgraphic.html

@@ -12,4 +12,4 @@ tags: "GetLegendGraphic, getLegendUrl, WMS"
 ---
 <div id="map" class="map"></div>
 Legend:
-<div><img id="legend" src=""/></div>
+<div><img id="legend"/></div>

examples/zoom-constrained.html

@@ -4,9 +4,9 @@ title: Constrained Zoom
 shortdesc: Example of a zoom constrained view.
 docs: >
   This map has a view that is constrained between zoom levels 9 and 13.  This is done using the `minZoom` and `maxZoom` view options.
-tags: "bing, zoom, minZoom, maxZoom"
+tags: "maptiler, zoom, minZoom, maxZoom"
 cloak:
-  - key: As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5
-    value: Your Bing Maps Key from http://www.bingmapsportal.com/ here
+  - key: get_your_own_D6rA4zTHduk6KOKTXzGB
+    value: Get your own API key at https://www.maptiler.com/cloud/
 ---
 <div id="map" class="map"></div>