6.0.0-beta.14

Replaces listener test in tile.tests.js and removes artifacts

.github/FUNDING.yml

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

.github/stale.yml

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

changelog/upgrade-notes.md

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

config/jsdoc/api/plugins/api.js

@@ -31,6 +31,24 @@ function hasApiMembers(doclet) {
 }
 
 function includeAugments(doclet) {
+  // Make sure that `observables` and `fires` are taken from an already processed `class` doclet.
+  // This is necessary because JSDoc generates multiple doclets with the same longname.
+  const cls = classes[doclet.longname];
+  if (cls.observables && !doclet.observables) {
+    doclet.observables = cls.observables;
+  }
+  if (doclet.fires && cls.fires) {
+    for (let i = 0, ii = cls.fires.length; i < ii; ++i) {
+      const fires = cls.fires[i];
+      if (doclet.fires.indexOf(fires) == -1) {
+        doclet.fires.push(fires);
+      }
+    }
+  }
+  if (cls.fires && !doclet.fires) {
+    doclet.fires = cls.fires;
+  }
+
   const augments = doclet.augments;
   if (augments) {
     let cls;
@@ -59,7 +77,9 @@ function includeAugments(doclet) {
           });
         }
         cls._hideConstructor = true;
-        delete cls.undocumented;
+        if (!cls.undocumented) {
+          cls._documented = true;
+        }
       }
     }
   }
@@ -146,10 +166,13 @@ exports.handlers = {
         // constructor from the docs.
         doclet._hideConstructor = true;
         includeAugments(doclet);
-      } else if (doclet.undocumented !== false && !doclet._hideConstructor && !(doclet.kind == 'typedef' && doclet.longname in types)) {
+      } else if (!doclet._hideConstructor && !(doclet.kind == 'typedef' && doclet.longname in types)) {
         // Remove all other undocumented symbols
         doclet.undocumented = true;
       }
+      if (doclet._documented) {
+        delete doclet.undocumented;
+      }
     }
   }
 

config/jsdoc/api/template/publish.js

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

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

@@ -12,13 +12,18 @@ $(function () {
                 var $item = $(v);
 
                 if ($item.data('name') && regexp.test($item.data('name'))) {
+                    const container = $item.parent().parent().parent();
+                    container.show();
+                    container.closest('.itemMembers').show();
+                    container.closest('.item').show();
                     $item.show();
                     $item.closest('.itemMembers').show();
                     $item.closest('.item').show();
                 }
             });
         } else {
-            $el.find('.item, .itemMembers').show();
+            $el.find('.item, .itemMembers').hide();
+            $('.navigation>ul>li').show();
         }
 
         $el.find('.list').scrollTop(0);

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

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

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

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

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

@@ -10,11 +10,12 @@ function toShortName(name) {
     </div>
     <ul class="list">
     <?js
-    this.nav.forEach(function (item) {
+    let navbuilder;
+    this.nav.forEach(navbuilder = function (item) {
     ?>
         <li class="item" data-name="<?js= item.longname ?>">
             <span class="title">
-                <?js= self.linkto(item.longname, item.longname.replace('module:', '')) ?>
+                <?js= self.linkto(item.longname, item.type === 'module' ? item.longname.replace('module:', '') : item.name) ?>
                 <?js if (item.type === 'namespace' &&
                         (item.members.length + item.typedefs.length + item.methods.length +
                          item.events.length > 0)) { ?>
@@ -22,6 +23,18 @@ function toShortName(name) {
             </span>
             <ul class="members itemMembers">
             <?js
+            if (item.classes.length) {
+            ?>
+            <span class="subtitle">Classes</span>
+            <?js
+                item.classes.forEach(function (v) {
+                    navbuilder(v);
+                });
+            }
+            ?>
+            </ul>
+            <ul class="members itemMembers">
+            <?js
             if (item.members.length) {
             ?>
             <span class="subtitle">Members</span>

doc/errors/index.md

@@ -228,3 +228,15 @@ Missing or invalid `size`.
 ### 61
 
 Cannot determine IIIF Image API version from provided image information JSON.
+
+### 62
+
+A `WebGLArrayBuffer` must either be of type `ELEMENT_ARRAY_BUFFER` or `ARRAY_BUFFER`.
+
+### 63
+
+Support for the `OES_element_index_uint` WebGL extension is mandatory for WebGL layers.
+
+### 64
+
+Layer opacity must be a number.

doc/tutorials/concepts.hbs

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

examples/center.js

@@ -5,6 +5,7 @@ import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
 import {OSM, Vector as VectorSource} from '../src/ol/source.js';
 import {Circle as CircleStyle, Fill, Stroke, Style} from '../src/ol/style.js';
 
+/** @type {VectorSource<import("../src/ol/geom/SimpleGeometry.js").default>} */
 const source = new VectorSource({
   url: 'data/geojson/switzerland.geojson',
   format: new GeoJSON()
@@ -51,21 +52,21 @@ const zoomtoswitzerland =
     document.getElementById('zoomtoswitzerland');
 zoomtoswitzerland.addEventListener('click', function() {
   const feature = source.getFeatures()[0];
-  const polygon = /** @type {import("../src/ol/geom/SimpleGeometry.js").default} */ (feature.getGeometry());
+  const polygon = feature.getGeometry();
   view.fit(polygon, {padding: [170, 50, 30, 150]});
 }, false);
 
 const zoomtolausanne = document.getElementById('zoomtolausanne');
 zoomtolausanne.addEventListener('click', function() {
   const feature = source.getFeatures()[1];
-  const point = /** @type {import("../src/ol/geom/SimpleGeometry.js").default} */ (feature.getGeometry());
+  const point = feature.getGeometry();
   view.fit(point, {padding: [170, 50, 30, 150], minResolution: 50});
 }, false);
 
 const centerlausanne = document.getElementById('centerlausanne');
 centerlausanne.addEventListener('click', function() {
   const feature = source.getFeatures()[1];
-  const point = /** @type {import("../src/ol/geom/Point.js").default} */ (feature.getGeometry());
+  const point = feature.getGeometry();
   const size = map.getSize();
   view.centerOn(point.getCoordinates(), size, [570, 500]);
 }, false);

examples/custom-interactions.js

@@ -129,7 +129,7 @@ const map = new Map({
   layers: [
     new TileLayer({
       source: new TileJSON({
-        url: 'https://api.tiles.mapbox.com/v3/mapbox.geography-class.json?secure'
+        url: 'https://a.tiles.mapbox.com/v3/aj.1x1-degrees.json'
       })
     }),
     new VectorLayer({

examples/d3.html

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

examples/d3.js

@@ -2,7 +2,7 @@ import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
 import {getWidth, getCenter} from '../src/ol/extent.js';
 import {Layer, Tile as TileLayer} from '../src/ol/layer.js';
-import SourceState from '../src/ol/source/State';
+import SourceState from '../src/ol/source/State.js';
 import {fromLonLat, toLonLat} from '../src/ol/proj.js';
 import Stamen from '../src/ol/source/Stamen.js';
 
@@ -85,7 +85,7 @@ const map = new Map({
 /**
  * Load the topojson data and create an ol/layer/Image for that data.
  */
-d3.json('data/topojson/us.json', function(error, us) {
+d3.json('data/topojson/us.json').then(function(us) {
 
   const layer = new CanvasLayer({
     features: topojson.feature(us, us.objects.counties)

examples/data/square.svg

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

examples/export-map.css

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

examples/export-map.html

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

examples/export-map.js

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

examples/export-pdf.js

@@ -65,18 +65,18 @@ exportButton.addEventListener('click', function() {
   const width = Math.round(dim[0] * resolution / 25.4);
   const height = Math.round(dim[1] * resolution / 25.4);
   const size = map.getSize();
-  const extent = map.getView().calculateExtent(size);
+  const viewResolution = map.getView().getResolution();
 
   map.once('rendercomplete', function() {
-    toJpeg(map.getTargetElement(), exportOptions).then(function(dataUrl) {
+    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().fit(extent, {
+      map.getView().setResolution(viewResolution);
-        size: size
-      });
       exportButton.disabled = false;
       document.body.style.cursor = 'auto';
     });
@@ -85,6 +85,7 @@ exportButton.addEventListener('click', function() {
   // Set print size
   const printSize = [width, height];
   map.setSize(printSize);
-  map.getView().fit(extent, {size: printSize});
+  const scaling = Math.min(width / size[0], height / size[1]);
+  map.getView().setResolution(viewResolution / scaling);
 
 }, false);

examples/extent-constrained.js

@@ -2,8 +2,8 @@ import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
 import TileLayer from '../src/ol/layer/Tile.js';
 import OSM from '../src/ol/source/OSM.js';
-import {defaults as defaultControls} from '../src/ol/control/util';
+import {defaults as defaultControls} from '../src/ol/control.js';
-import ZoomSlider from '../src/ol/control/ZoomSlider';
+import ZoomSlider from '../src/ol/control/ZoomSlider.js';
 
 const view = new View({
   center: [328627.563458, 5921296.662223],

examples/feature-animation.js

@@ -21,7 +21,8 @@ const map = new Map({
   target: 'map',
   view: new View({
     center: [0, 0],
-    zoom: 1
+    zoom: 1,
+    multiWorld: true
   })
 });
 

examples/feature-move-animation.js

@@ -67,10 +67,10 @@ const routeFeature = new Feature({
   type: 'route',
   geometry: route
 });
-const geoMarker = new Feature({
+const geoMarker = /** @type Feature<import("../src/ol/geom/Point").default> */(new Feature({
   type: 'geoMarker',
   geometry: new Point(routeCoords[0])
-});
+}));
 const startMarker = new Feature({
   type: 'icon',
   geometry: new Point(routeCoords[0])
@@ -191,7 +191,7 @@ function stopAnimation(ended) {
 
   // if animation cancelled set the marker at the beginning
   const coord = ended ? routeCoords[routeLength - 1] : routeCoords[0];
-  const geometry = /** @type {import("../src/ol/geom/Point").default} */ (geoMarker.getGeometry());
+  const geometry = geoMarker.getGeometry();
   geometry.setCoordinates(coord);
   //remove listener
   vectorLayer.un('postrender', moveFeature);

examples/filter-points-webgl.js

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

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

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

examples/full-screen-source.css

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

examples/full-screen.css

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

examples/geojson-vt.js

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

examples/heatmap-earthquakes.html

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

examples/icon-color.js

@@ -25,7 +25,7 @@ rome.setStyle(new Style({
   image: new Icon({
     color: '#8959A8',
     crossOrigin: 'anonymous',
-    src: 'data/dot.png'
+    src: 'data/square.svg'
   })
 }));
 
@@ -56,7 +56,7 @@ const vectorLayer = new VectorLayer({
 
 const rasterLayer = new TileLayer({
   source: new TileJSON({
-    url: 'https://api.tiles.mapbox.com/v3/mapbox.geography-class.json?secure',
+    url: 'https://a.tiles.mapbox.com/v3/aj.1x1-degrees.json',
     crossOrigin: ''
   })
 });

examples/icon-sprite-webgl.html

@@ -13,5 +13,9 @@ docs: >
 
   The dataset contains around 80k points and can be found here: https://www.kaggle.com/NUFORC/ufo-sightings
 tags: "webgl, icon, sprite, point, ufo"
+cloak:
+  - key: pk.eyJ1IjoidHNjaGF1YiIsImEiOiJjaW5zYW5lNHkxMTNmdWttM3JyOHZtMmNtIn0.CDIBD8H-G2Gf-cPkIuWtRg
+    value: Your Mapbox access token from https://mapbox.com/ here
 ---
 <div id="map" class="map"></div>
+<div>Current sighting: <span id="info"></span></div>

examples/icon-sprite-webgl.js

@@ -1,14 +1,16 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
 import TileLayer from '../src/ol/layer/Tile.js';
-import TileJSON from '../src/ol/source/TileJSON';
+import TileJSON from '../src/ol/source/TileJSON.js';
-import Feature from '../src/ol/Feature';
+import Feature from '../src/ol/Feature.js';
-import Point from '../src/ol/geom/Point';
+import Point from '../src/ol/geom/Point.js';
-import VectorLayer from '../src/ol/layer/Vector';
+import VectorLayer from '../src/ol/layer/Vector.js';
-import {Vector} from '../src/ol/source';
+import {Vector} from '../src/ol/source.js';
-import {fromLonLat} from '../src/ol/proj';
+import {fromLonLat} from '../src/ol/proj.js';
-import WebGLPointsLayerRenderer from '../src/ol/renderer/webgl/PointsLayer';
+import WebGLPointsLayerRenderer from '../src/ol/renderer/webgl/PointsLayer.js';
-import {lerp} from '../src/ol/math';
+import {lerp} from '../src/ol/math.js';
+
+const key = 'pk.eyJ1IjoidHNjaGF1YiIsImEiOiJjaW5zYW5lNHkxMTNmdWttM3JyOHZtMmNtIn0.CDIBD8H-G2Gf-cPkIuWtRg';
 
 const vectorSource = new Vector({
   features: [],
@@ -101,11 +103,11 @@ function loadData() {
 
 loadData();
 
-new Map({
+const map = new Map({
   layers: [
     new TileLayer({
       source: new TileJSON({
-        url: 'https://api.tiles.mapbox.com/v3/mapbox.world-dark.json?secure',
+        url: 'https://api.tiles.mapbox.com/v4/mapbox.world-dark.json?access_token=' + key,
         crossOrigin: 'anonymous'
       })
     }),
@@ -119,3 +121,18 @@ new Map({
     zoom: 2
   })
 });
+
+const info = document.getElementById('info');
+map.on('pointermove', function(evt) {
+  if (map.getView().getInteracting()) {
+    return;
+  }
+  const pixel = evt.pixel;
+  info.innerText = '';
+  map.forEachFeatureAtPixel(pixel, function(feature) {
+    const datetime = feature.get('datetime');
+    const duration = feature.get('duration');
+    const shape = feature.get('shape');
+    info.innerText = 'On ' + datetime + ', lasted ' + duration + ' seconds and had a "' + shape + '" shape.';
+  });
+});

examples/icon.js

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

examples/layer-zoom-limits.html

@@ -0,0 +1,13 @@
+---
+layout: example.html
+title: Layer Zoom Limits
+shortdesc: Using minZoom and maxZoom to control layer visibility.
+docs: >
+  Layers support `minZoom` and `maxZoom` options for controlling visibility based on the view's zoom level.
+  If min or max zoom are set, the layer will only be visible at zoom levels greater than the `minZoom` and
+  less than or equal to the `maxZoom`.  After construction, the layer's `setMinZoom` and `setMaxZoom` can
+  be used to set limits.  This example shows an OSM layer at zoom levels 14 and lower and a USGS layer at
+  zoom levels higher than 14.
+tags: "minZoom, maxZoom, layer"
+---
+<div id="map" class="map"></div>

examples/layer-zoom-limits.js

@@ -0,0 +1,33 @@
+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 XYZ from '../src/ol/source/XYZ.js';
+import {transformExtent, fromLonLat} from '../src/ol/proj.js';
+
+const mapExtent = [-112.261791, 35.983744, -112.113981, 36.132062];
+
+const map = new Map({
+  target: 'map',
+  layers: [
+    new TileLayer({
+      maxZoom: 14, // visible at zoom levels 14 and below
+      source: new OSM()
+    }),
+    new TileLayer({
+      minZoom: 14, // visible at zoom levels above 14
+      source: new XYZ({
+        attributions: 'Tiles © USGS, rendered with ' +
+        '<a href="http://www.maptiler.com/">MapTiler</a>',
+        url: 'https://tileserver.maptiler.com/grandcanyon/{z}/{x}/{y}.png'
+      })
+    })
+  ],
+  view: new View({
+    center: fromLonLat([-112.18688965, 36.057944835]),
+    zoom: 15,
+    maxZoom: 18,
+    extent: transformExtent(mapExtent, 'EPSG:4326', 'EPSG:3857'),
+    constrainOnlyCenter: true
+  })
+});

examples/mapbox-layer.html

@@ -3,12 +3,13 @@ layout: example.html
 title: Mapbox-gl Layer
 shortdesc: Example of a Mapbox-gl-js layer integration.
 docs: >
-  Show how to add a mapbox-gl-js layer in an openlayers map. **Note**: Make sure to get your own Mapbox API key when using this example. No map will be visible when the API key has expired.
+  Show how to add a mapbox-gl-js layer in an openlayers map. **Note**: Make sure to get your own API key at https://www.maptiler.com/cloud/ when using this example. No map will be visible when the API key has expired.
-tags: "simple, mapbox, vector, tiles"
+tags: "simple, mapbox, vector, tiles, maptiler"
 resources:
   - https://unpkg.com/mapbox-gl@0.54.0/dist/mapbox-gl.js
+  - https://unpkg.com/mapbox-gl@0.54.0/dist/mapbox-gl.css
 cloak:
-  - key: ER67WIiPdCQvhgsUjoWK
+  - key: get_your_own_D6rA4zTHduk6KOKTXzGB
-    value: Your Mapbox access token from http://mapbox.com/ here
+    value: Get your own API key at https://www.maptiler.com/cloud/
 ---
 <div id="map" class="map"></div>

examples/mapbox-layer.js

@@ -1,49 +1,21 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
-import Layer from '../src/ol/layer/Layer';
+import Layer from '../src/ol/layer/Layer.js';
-import {assign} from '../src/ol/obj';
+import {toLonLat, fromLonLat} from '../src/ol/proj.js';
-import {toLonLat} from '../src/ol/proj';
-import SourceState from '../src/ol/source/State';
 import {Stroke, Style} from '../src/ol/style.js';
 import VectorLayer from '../src/ol/layer/Vector.js';
 import VectorSource from '../src/ol/source/Vector.js';
 import GeoJSON from '../src/ol/format/GeoJSON.js';
 
-class Mapbox extends Layer {
+const center = [-98.8, 37.9];
+const key = 'get_your_own_D6rA4zTHduk6KOKTXzGB';
 
-  /**
+const mbMap = new mapboxgl.Map({
-   * @param {import('../src/ol/layer/Layer').Options} options Layer options.
+  style: 'https://api.maptiler.com/maps/bright/style.json?key=' + key,
-   */
-  constructor(options) {
-    const baseOptions = assign({}, options);
-    super(baseOptions);
-
-    this.baseOptions = baseOptions;
-
-    /**
-     * @private
-     * @type boolean
-     */
-    this.loaded = false;
-
-    this.initMap();
-  }
-
-  initMap() {
-    const map = this.map_;
-    const view = map.getView();
-    const center = toLonLat(view.getCenter(), view.getProjection());
-
-    this.centerLastRender = view.getCenter();
-    this.zoomLastRender = view.getZoom();
-    this.centerLastRender = view.getCenter();
-    this.zoomLastRender = view.getZoom();
-
-    const options = assign(this.baseOptions, {
   attributionControl: false,
   boxZoom: false,
-      center,
+  center: center,
-      container: map.getTargetElement(),
+  container: 'map',
   doubleClickZoom: false,
   dragPan: false,
   dragRotate: false,
@@ -51,133 +23,45 @@ class Mapbox extends Layer {
   keyboard: false,
   pitchWithRotate: false,
   scrollZoom: false,
-      touchZoomRotate: false,
+  touchZoomRotate: false
-      zoom: view.getZoom() - 1
 });
 
-    this.mbmap = new mapboxgl.Map(options);
+const mbLayer = new Layer({
-    this.mbmap.on('load', function() {
+  render: function(frameState) {
-      this.mbmap.getCanvas().remove();
+    const canvas = mbMap.getCanvas();
-      this.loaded = true;
+    const viewState = frameState.viewState;
-      this.map_.render();
-      this.mbmap.getContainer().querySelector('.mapboxgl-control-container').remove();
-    }.bind(this));
 
-    this.mbmap.on('render', function() {
+    const visible = mbLayer.getVisible();
-      // Reset offset
+    canvas.style.display = visible ? 'block' : 'none';
-      if (this.centerNextRender) {
-        this.centerLastRender = this.centerNextRender;
-      }
-      if (this.zoomNextRender) {
-        this.zoomLastRender = this.zoomNextRender;
-      }
-      this.updateRenderedPosition(0, 0, 1);
-    }.bind(this));
 
-  }
+    const opacity = mbLayer.getOpacity();
+    canvas.style.opacity = opacity;
 
-  /**
+    // adjust view parameters in mapbox
-   *
+    const rotation = viewState.rotation;
-   * @inheritDoc
-   */
-  render(frameState) {
-    const map = this.map_;
-    const view = map.getView();
-
-    this.centerNextRender = view.getCenter();
-    const lastRender = map.getPixelFromCoordinate(this.centerLastRender);
-    const nextRender = map.getPixelFromCoordinate(this.centerNextRender);
-    this.zoomNextRender = view.getZoom();
-    const scale = Math.pow(2, this.zoomNextRender - this.zoomLastRender);
-    this.updateRenderedPosition(lastRender[0] - nextRender[0], lastRender[1] - nextRender[1], scale);
-
-    const rotation = frameState.viewState.rotation;
     if (rotation) {
-      this.mbmap.rotateTo(-rotation * 180 / Math.PI, {
+      mbMap.rotateTo(-rotation * 180 / Math.PI, {
         animate: false
       });
     }
-
+    mbMap.jumpTo({
-    // Re-render mbmap
+      center: toLonLat(viewState.center),
-    const center = toLonLat(this.centerNextRender, view.getProjection());
+      zoom: viewState.zoom - 1,
-    const zoom = view.getZoom() - 1;
+      animate: false
-    this.mbmap.jumpTo({
-      center: center,
-      zoom: zoom
     });
-    return this.mbmap.getCanvas();
+
+    // cancel the scheduled update & trigger synchronous redraw
+    // see https://github.com/mapbox/mapbox-gl-js/issues/7893#issue-408992184
+    // NOTE: THIS MIGHT BREAK WHEN UPDATING MAPBOX
+    if (mbMap._frame) {
+      mbMap._frame.cancel();
+      mbMap._frame = null;
     }
+    mbMap._render();
 
-  updateRenderedPosition(left, top, scale) {
+    return canvas;
-    const style = this.mbmap.getCanvas().style;
-    style.left = Math.round(left) + 'px';
-    style.top = Math.round(top) + 'px';
-    style.transform = 'scale(' + scale + ')';
   }
-
-  setVisible(visible) {
-    super.setVisible(visible);
-
-    const canvas = this.mbmap.getCanvas();
-    canvas.style.display = visible ? 'block' : 'none';
-  }
-
-  setOpacity(opacity) {
-    super.setOpacity(opacity);
-    const canvas = this.mbmap.getCanvas();
-    canvas.style.opacity = opacity;
-  }
-
-  setZIndex(zindex) {
-    super.setZIndex(zindex);
-    const canvas = this.mbmap.getCanvas();
-    canvas.style.zIndex = zindex;
-  }
-
-  /**
-   * @inheritDoc
-   */
-  getSourceState() {
-    return this.loaded ? SourceState.READY : SourceState.UNDEFINED;
-  }
-
-  setMap(map) {
-    this.map_ = map;
-  }
-
-}
-
-mapboxgl.Map.prototype._setupContainer = function _setupContainer() {
-  const container = this._container;
-  container.classList.add('mapboxgl-map');
-
-  const canvasContainer = this._canvasContainer = container.firstChild;
-
-  this._canvas = document.createElement('canvas');
-  canvasContainer.insertBefore(this._canvas, canvasContainer.firstChild);
-  this._canvas.style.position = 'absolute';
-  this._canvas.addEventListener('webglcontextlost', this._contextLost, false);
-  this._canvas.addEventListener('webglcontextrestored', this._contextRestored, false);
-  this._canvas.setAttribute('tabindex', '0');
-  this._canvas.setAttribute('aria-label', 'Map');
-  this._canvas.className = 'mapboxgl-canvas';
-
-  const dimensions = this._containerDimensions();
-  this._resizeCanvas(dimensions[0], dimensions[1]);
-
-  this._controlContainer = canvasContainer;
-  const controlContainer = this._controlContainer = document.createElement('div');
-  controlContainer.className = 'mapboxgl-control-container';
-  container.appendChild(controlContainer);
-
-  const positions = this._controlPositions = {};
-  ['top-left', 'top-right', 'bottom-left', 'bottom-right'].forEach(function(positionName) {
-    const elem = document.createElement('div');
-    elem.className = 'mapboxgl-ctrl-' + positionName;
-    controlContainer.appendChild(elem);
-    positions[positionName] = elem;
 });
-};
 
 const style = new Style({
   stroke: new Stroke({
@@ -197,21 +81,8 @@ const vectorLayer = new VectorLayer({
 const map = new Map({
   target: 'map',
   view: new View({
-    center: [-10997148, 4569099],
+    center: fromLonLat(center),
-    zoom: 4,
+    zoom: 4
-    minZoom: 1,
+  }),
-    extent: [-Infinity, -20048966.10, Infinity, 20048966.10],
+  layers: [mbLayer, vectorLayer]
-    smoothExtentConstraint: false,
-    smoothResolutionConstraint: false
-  })
 });
-
-const key = 'ER67WIiPdCQvhgsUjoWK';
-const mbLayer = new Mapbox({
-  map: map,
-  container: map.getTarget(),
-  style: 'https://maps.tilehosting.com/styles/bright/style.json?key=' + key
-});
-
-map.addLayer(mbLayer);
-map.addLayer(vectorLayer);

examples/mapbox-style.html

@@ -2,10 +2,10 @@
 layout: example-verbatim.html
 title: Vector tiles created from a Mapbox Style object
 shortdesc: Example of using ol-mapbox-style with tiles from tilehosting.com.
-tags: "vector tiles, mapbox style, ol-mapbox-style"
+tags: "vector tiles, mapbox style, ol-mapbox-style, maptiler"
 cloak:
-  - key: lirfd6Fegsjkvs0lshxe
+  - key: get_your_own_D6rA4zTHduk6KOKTXzGB
-    value: Your API key from http://tilehosting.com/ here
+    value: Get your own API key at https://www.maptiler.com/cloud/
 ---
 <!doctype html>
 <html lang="en">

examples/mapbox-style.js

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

examples/mapbox-vector-tiles-advanced.html

@@ -9,6 +9,6 @@ resources:
   - resources/mapbox-streets-v6-style.js
 cloak:
   - key: pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q
-    value: Your Mapbox access token from http://mapbox.com/ here
+    value: Your Mapbox access token from https://mapbox.com/ here
 ---
 <div id="map" class="map"></div>

examples/mapbox-vector-tiles.html

@@ -9,6 +9,6 @@ resources:
   - resources/mapbox-streets-v6-style.js
 cloak:
   - key: pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q
-    value: Your Mapbox access token from http://mapbox.com/ here
+    value: Your Mapbox access token from https://mapbox.com/ here
 ---
 <div id="map" class="map"></div>

examples/mapguide-untiled.js

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

examples/osm-vector-tiles.html

@@ -6,7 +6,7 @@ docs: >
   A simple vector tiles map with Mapzen vector tiles. This example uses the TopoJSON format's `layerName` option to determine the layer ("water", "roads", "buildings") for styling. **Note**: [`ol/format/MVT`] is an even more efficient format for vector tiles.
 tags: "vector, tiles, osm, mapzen"
 cloak:
-  - key: vector-tiles-5eJz6JX
+  - key: uZNs91nMR-muUTP99MyBSg
-    value: Your Mapzen API key from https://mapzen.com/developers
+    value: Your Nextzen API key from https://developers.nextzen.org/
 ---
 <div id="map" class="map"></div>

examples/osm-vector-tiles.js

@@ -6,7 +6,7 @@ import {fromLonLat} from '../src/ol/proj.js';
 import VectorTileSource from '../src/ol/source/VectorTile.js';
 import {Fill, Stroke, Style} from '../src/ol/style.js';
 
-const key = 'vector-tiles-5eJz6JX';
+const key = 'uZNs91nMR-muUTP99MyBSg';
 
 const roadStyleCache = {};
 const roadColor = {
@@ -67,7 +67,7 @@ const map = new Map({
           layers: ['water', 'roads', 'buildings']
         }),
         maxZoom: 19,
-        url: 'https://tile.mapzen.com/mapzen/vector/v1/all/{z}/{x}/{y}.topojson?api_key=' + key
+        url: 'https://tile.nextzen.org/tilezen/vector/v1/all/{z}/{x}/{y}.topojson?api_key=' + key
       }),
       style: function(feature, resolution) {
         switch (feature.get('layer')) {

examples/popup.html

@@ -7,6 +7,9 @@ docs: >
     Click on the map to get a popup.  The popup is composed of a few basic elements: a container, a close button, and a place for the content.  To anchor the popup to the map, an <code>ol/Overlay</code> is created with the popup container.  A listener is registered for the map's <code>click</code> event to display the popup, and another listener is set as the <code>click</code> handler for the close button to hide the popup.
   </p>
 tags: "overlay, popup"
+cloak:
+  - key: pk.eyJ1IjoidHNjaGF1YiIsImEiOiJjaW5zYW5lNHkxMTNmdWttM3JyOHZtMmNtIn0.CDIBD8H-G2Gf-cPkIuWtRg
+    value: Your Mapbox access token from https://mapbox.com/ here
 ---
 <div id="map" class="map"></div>
 <div id="popup" class="ol-popup">

examples/popup.js

@@ -6,6 +6,7 @@ import TileLayer from '../src/ol/layer/Tile.js';
 import {toLonLat} from '../src/ol/proj.js';
 import TileJSON from '../src/ol/source/TileJSON.js';
 
+const key = 'pk.eyJ1IjoidHNjaGF1YiIsImEiOiJjaW5zYW5lNHkxMTNmdWttM3JyOHZtMmNtIn0.CDIBD8H-G2Gf-cPkIuWtRg';
 
 /**
  * Elements that make up the popup.
@@ -45,7 +46,7 @@ const map = new Map({
   layers: [
     new TileLayer({
       source: new TileJSON({
-        url: 'https://api.tiles.mapbox.com/v3/mapbox.natural-earth-hypso-bathy.json?secure',
+        url: 'https://api.tiles.mapbox.com/v4/mapbox.natural-earth-hypso-bathy.json?access_token=' + key,
         crossOrigin: 'anonymous'
       })
     })

examples/sea-level.html

@@ -11,7 +11,7 @@ docs: >
 tags: "raster, pixel operation, flood"
 cloak:
   - key: pk.eyJ1IjoidHNjaGF1YiIsImEiOiJjaW5zYW5lNHkxMTNmdWttM3JyOHZtMmNtIn0.CDIBD8H-G2Gf-cPkIuWtRg
-    value: Your Mapbox access token from http://mapbox.com/ here
+    value: Your Mapbox access token from https://mapbox.com/ here
 ---
 <div id="map" class="map"></div>
 <label>

examples/side-by-side.css

@@ -0,0 +1,10 @@
+@media (min-width: 800px) {
+  .wrapper {
+    display: flex;
+  }
+  .half {
+    padding: 0 10px;
+    width: 50%;
+    float: left;
+  }
+}

examples/side-by-side.html

@@ -0,0 +1,21 @@
+---
+layout: example.html
+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"
+cloak:
+  - key: As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5
+    value: Your Bing Maps Key from http://www.bingmapsportal.com/ here
+---
+<div class="wrapper">
+  <div class="half">
+    <h4>Road</h4>
+    <div id="roadMap" class="map"></div>
+  </div>
+  <div class="half">
+    <h4>Aerial</h4>
+    <div id="aerialMap" class="map"></div>
+  </div>
+</div>

examples/side-by-side.js

@@ -0,0 +1,37 @@
+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';
+
+const roadLayer = new TileLayer({
+  source: new BingMaps({
+    key: 'As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5',
+    imagerySet: 'RoadOnDemand',
+    maxZoom: 19
+  })
+});
+
+const aerialLayer = new TileLayer({
+  source: new BingMaps({
+    key: 'As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5',
+    imagerySet: 'Aerial',
+    maxZoom: 19
+  })
+});
+
+const view = new View({
+  center: [-6655.5402445057125, 6709968.258934638],
+  zoom: 13
+});
+
+const map1 = new Map({
+  target: 'roadMap',
+  layers: [roadLayer],
+  view: view
+});
+
+const map2 = new Map({
+  target: 'aerialMap',
+  layers: [aerialLayer],
+  view: view
+});

examples/tilejson.js

@@ -8,7 +8,7 @@ const map = new Map({
   layers: [
     new TileLayer({
       source: new TileJSON({
-        url: 'https://api.tiles.mapbox.com/v3/mapbox.geography-class.json?secure',
+        url: 'https://a.tiles.mapbox.com/v3/aj.1x1-degrees.json',
         crossOrigin: 'anonymous'
       })
     })

examples/utfgrid.html

@@ -4,11 +4,11 @@ title: UTFGrid
 shortdesc: This example shows how to read data from a UTFGrid source.
 docs: >
   <p>Point to a country to see its name and flag.</p>
-  Tiles made with [TileMill](http://tilemill.com). Hosting on MapBox.com or with open-source [TileServer](https://github.com/klokantech/tileserver-php/).
+  Tiles made with <a href="http://tilemill.com">TileMill</a>. Hosting on <a href="mapbox.com">mapbox.com</a> or with open-source <a href="https://github.com/klokantech/tileserver-php/">TileServer</a>.
 tags: "utfgrid, tilejson"
 cloak:
   - key: pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q
-    value: Your Mapbox access token from http://mapbox.com/ here
+    value: Your Mapbox access token from https://mapbox.com/ here
 ---
 <div id="map" class="map"></div>
 <div style="display: none;">

examples/webpack/config.js

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

examples/webpack/worker-loader.js

@@ -0,0 +1,17 @@
+const build = require('../../tasks/serialize-workers').build;
+
+function loader() {
+  const callback = this.async();
+  const minify = this.mode === 'production';
+
+  build(this.resource, {minify})
+    .then(chunk => {
+      for (const filePath in chunk.modules) {
+        this.addDependency(filePath);
+      }
+      callback(null, chunk.code);
+    })
+    .catch(callback);
+}
+
+module.exports = loader;

examples/wms-getlegendgraphic.html

@@ -0,0 +1,15 @@
+---
+layout: example.html
+title: WMS GetLegendGraphic
+shortdesc: Example of a WMS GetLegendGraphic.
+docs: >
+  WMS supports the [getLegendGraphic request](https://docs.geoserver.org/latest/en/user/services/wms/get_legend_graphic/index.html).
+  This example demonstrates the use of the `getGetLegendGraphicUrl` method.
+
+
+  As a legend can be responsive to the scale it is updated on every change of the resolution.
+tags: "GetLegendGraphic, getGetLegendGraphicURL, WMS"
+---
+<div id="map" class="map"></div>
+Legend:
+<div><img id="legend" src=""/></div>

examples/wms-getlegendgraphic.js

@@ -0,0 +1,47 @@
+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 ImageWMS from '../src/ol/source/ImageWMS.js';
+import OSM from '../src/ol/source/OSM.js';
+
+const wmsSource = new ImageWMS({
+  url: 'https://ahocevar.com/geoserver/wms',
+  params: {'LAYERS': 'topp:states'},
+  ratio: 1,
+  serverType: 'geoserver'
+});
+
+const updateLegend = function(resolution) {
+  const graphicUrl = wmsSource.getGetLegendGraphicUrl(resolution);
+  const img = document.getElementById('legend');
+  img.src = graphicUrl;
+};
+
+const layers = [
+  new TileLayer({
+    source: new OSM()
+  }),
+  new ImageLayer({
+    extent: [-13884991, 2870341, -7455066, 6338219],
+    source: wmsSource
+  })
+];
+
+const map = new Map({
+  layers: layers,
+  target: 'map',
+  view: new View({
+    center: [-10997148, 4569099],
+    zoom: 4
+  })
+});
+
+// Initial legend
+const resolution = map.getView().getResolution();
+updateLegend(resolution);
+
+// Update the legend when the resolution changes
+map.getView().on('change:resolution', function(event) {
+  const resolution = event.target.getResolution();
+  updateLegend(resolution);
+});

examples/worker.html

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

examples/worker.js

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

examples/zoomify.html

@@ -11,5 +11,6 @@ tags: "zoomify, deep zoom, IIP, pixel, projection"
   <select id="zoomifyProtocol">
     <option value="zoomify">Zoomify</option>
     <option value="iip">IIP</option>
+    <option value="zoomifyretina">Zoomify Retina</option>
   </select>
 </div>

examples/zoomify.js

@@ -12,6 +12,8 @@ const iipUrl = 'http://vips.vtech.fr/cgi-bin/iipsrv.fcgi?FIF=' + '/mnt/MD1/AD00/
 
 const layer = new TileLayer({
   source: new Zoomify({
+    tileSize: 256,
+    tilePixelRatio: 1,
     url: zoomifyUrl,
     size: [imgWidth, imgHeight],
     crossOrigin: 'anonymous'
@@ -20,12 +22,15 @@ const layer = new TileLayer({
 
 const extent = [0, -imgHeight, imgWidth, 0];
 
+const resolutions = layer.getSource().getTileGrid().getResolutions();
+
 const map = new Map({
   layers: [layer],
   target: 'map',
   view: new View({
     // adjust zoom levels to those provided by the source
-    resolutions: layer.getSource().getTileGrid().getResolutions(),
+    minResolution: resolutions[resolutions.length - 1],
+    maxResolution: resolutions[0],
     // constrain the center: center cannot be set outside this extent
     extent: extent
   })
@@ -36,17 +41,73 @@ const control = document.getElementById('zoomifyProtocol');
 control.addEventListener('change', function(event) {
   const value = event.currentTarget.value;
   if (value === 'iip') {
-    layer.setSource(new Zoomify({
+    const extent = [0, -imgHeight, imgWidth, 0];
+    layer.setSource(
+      new Zoomify({
+        tileSize: 256,
+        tilePixelRatio: 1,
         url: iipUrl,
         size: [imgWidth, imgHeight],
         crossOrigin: 'anonymous'
-    }));
+      })
+    );
+    const resolutions = layer.getSource().getTileGrid().getResolutions();
+    map.setView(
+      new View({
+        // adjust zoom levels to those provided by the source
+        minResolution: resolutions[resolutions.length - 1],
+        maxResolution: resolutions[0],
+        // constrain the center: center cannot be set outside this extent
+        extent: extent
+      })
+    );
+    map.getView().fit(extent);
   } else if (value === 'zoomify') {
-    layer.setSource(new Zoomify({
+    const extent = [0, -imgHeight, imgWidth, 0];
+    layer.setSource(
+      new Zoomify({
+        tileSize: 256,
+        tilePixelRatio: 1,
         url: zoomifyUrl,
         size: [imgWidth, imgHeight],
         crossOrigin: 'anonymous'
-    }));
+      })
+    );
+    const resolutions = layer.getSource().getTileGrid().getResolutions();
+    map.setView(
+      new View({
+        // adjust zoom levels to those provided by the source
+        minResolution: resolutions[resolutions.length - 1],
+        maxResolution: resolutions[0],
+        // constrain the center: center cannot be set outside this extent
+        extent: extent
+      })
+    );
+    map.getView().fit(extent);
+  } else if (value === 'zoomifyretina') {
+    const pixelRatio = 4;
+    // Be careful! Image extent will be modified by pixel ratio
+    const extent = [0, -imgHeight / pixelRatio, imgWidth / pixelRatio, 0];
+    layer.setSource(
+      new Zoomify({
+        tileSize: 256 / pixelRatio,
+        tilePixelRatio: pixelRatio,
+        url: zoomifyUrl,
+        size: [imgWidth / pixelRatio, imgHeight / pixelRatio],
+        crossOrigin: 'anonymous'
+      })
+    );
+    const resolutions = layer.getSource().getTileGrid().getResolutions();
+    map.setView(
+      new View({
+        // adjust zoom levels to those provided by the source
+        minResolution: resolutions[resolutions.length - 1] / pixelRatio,
+        maxResolution: resolutions[0],
+        // constrain the center: center cannot be set outside this extent
+        extent: extent
+      })
+    );
+    map.getView().fit(extent);
   }
 
 });

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ol",
-  "version": "6.0.0-beta.7",
+  "version": "6.0.0-beta.14",
   "description": "OpenLayers mapping library",
   "keywords": [
     "map",
@@ -22,7 +22,7 @@
     "build-index": "npm run build-package && node tasks/generate-index",
     "build-legacy": "shx rm -rf build && npm run build-index && webpack --config config/webpack-config-legacy-build.js && cleancss --source-map src/ol/ol.css -o build/legacy/ol.css",
     "copy-css": "shx cp src/ol/ol.css build/ol/ol.css",
-    "transpile": "shx rm -rf build/ol && shx mkdir -p build/ol && shx cp -rf src/ol build/ol/src && tsc --project config/tsconfig-build.json",
+    "transpile": "shx rm -rf build/ol && shx mkdir -p build/ol && shx cp -rf src/ol build/ol/src && node tasks/serialize-workers && tsc --project config/tsconfig-build.json",
     "typecheck": "tsc --pretty",
     "apidoc": "jsdoc -R config/jsdoc/api/index.md -c config/jsdoc/api/conf.json -P package.json -d build/apidoc"
   },
@@ -38,16 +38,15 @@
   "dependencies": {
     "pbf": "3.2.0",
     "pixelworks": "1.1.0",
-    "rbush": "2.0.2"
+    "rbush": "^3.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.4.0",
-    "@babel/preset-env": "^7.4.2",
+    "@babel/preset-env": "^7.4.4",
     "@openlayers/eslint-plugin": "^4.0.0-beta.2",
     "@types/arcgis-rest-api": "^10.4.4",
     "@types/geojson": "^7946.0.7",
     "@types/pbf": "^3.0.1",
-    "@types/rbush": "^2.0.2",
     "@types/topojson-specification": "^1.0.1",
     "babel-loader": "^8.0.5",
     "buble": "^0.19.7",
@@ -55,23 +54,23 @@
     "chaikin-smooth": "^1.0.4",
     "clean-css-cli": "4.3.0",
     "copy-webpack-plugin": "^5.0.3",
-    "coveralls": "3.0.3",
+    "coveralls": "3.0.6",
-    "eslint": "^5.16.0",
+    "eslint": "^6.0.0",
-    "eslint-config-openlayers": "^11.0.0",
+    "eslint-config-openlayers": "^12.0.0",
     "expect.js": "0.3.1",
     "front-matter": "^3.0.2",
     "fs-extra": "^8.0.0",
     "glob": "^7.1.4",
-    "globby": "^9.2.0",
+    "globby": "^10.0.0",
     "handlebars": "4.1.2",
     "html-to-image": "^0.1.0",
     "istanbul": "0.4.5",
     "istanbul-instrumenter-loader": "^3.0.1",
     "jquery": "3.4.1",
-    "jsdoc": "3.6.1",
+    "jsdoc": "3.6.3",
-    "jsdoc-plugin-typescript": "^2.0.0",
+    "jsdoc-plugin-typescript": "^2.0.1",
     "karma": "^4.1.0",
-    "karma-chrome-launcher": "2.2.0",
+    "karma-chrome-launcher": "3.1.0",
     "karma-coverage": "^1.1.2",
     "karma-coverage-istanbul-reporter": "^2.0.5",
     "karma-firefox-launcher": "^1.1.0",
@@ -79,13 +78,18 @@
     "karma-sourcemap-loader": "^0.3.7",
     "karma-webpack": "^4.0.0-rc.2",
     "loglevelnext": "^3.0.1",
-    "marked": "0.6.2",
+    "marked": "0.7.0",
-    "mocha": "6.1.4",
+    "mocha": "6.2.0",
-    "ol-mapbox-style": "^4.3.1",
+    "ol-mapbox-style": "^5.0.0-beta.3",
-    "pixelmatch": "^4.0.2",
+    "pixelmatch": "^5.0.0",
     "pngjs": "^3.4.0",
     "proj4": "2.5.0",
-    "puppeteer": "~1.15.0",
+    "puppeteer": "~1.19.0",
+    "rollup": "^1.12.0",
+    "rollup-plugin-babel": "^4.3.2",
+    "rollup-plugin-commonjs": "^10.0.0",
+    "rollup-plugin-node-resolve": "^5.0.0",
+    "rollup-plugin-terser": "^5.0.0",
     "serve-static": "^1.14.0",
     "shx": "^0.3.2",
     "sinon": "^7.3.2",
@@ -93,7 +97,7 @@
     "typescript": "^3.4.5",
     "url-polyfill": "^1.1.5",
     "walk": "^2.3.9",
-    "webpack": "4.31.0",
+    "webpack": "4.39.2",
     "webpack-cli": "^3.3.2",
     "webpack-dev-middleware": "^3.6.2",
     "webpack-dev-server": "^3.3.1",

rendering/cases/circle-style/main.js

@@ -0,0 +1,57 @@
+import Map from '../../../src/ol/Map.js';
+import View from '../../../src/ol/View.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 VectorSource from '../../../src/ol/source/Vector.js';
+import Circle from '../../../src/ol/style/Circle.js';
+import Style from '../../../src/ol/style/Style.js';
+import Stroke from '../../../src/ol/style/Stroke.js';
+
+
+const vectorSource = new VectorSource();
+
+vectorSource.addFeatures([
+  new Feature({
+    geometry: new Point([-50, 50]),
+    radius: 10
+  }),
+  new Feature({
+    geometry: new Point([50, -50]),
+    radius: 20
+  }),
+  new Feature({
+    geometry: new Point([50, 50]),
+    radius: 30
+  })
+]);
+
+const style = new Style({
+  image: new Circle({
+    radius: 1,
+    stroke: new Stroke({
+      color: '#00f',
+      width: 3
+    })
+  })
+});
+
+new Map({
+  pixelRatio: 1,
+  layers: [
+    new VectorLayer({
+      source: vectorSource,
+      style: function(feature) {
+        style.getImage().setRadius(feature.get('radius'));
+        return style;
+      }
+    })
+  ],
+  target: 'map',
+  view: new View({
+    center: [0, 0],
+    resolution: 1
+  })
+});
+
+render();

rendering/cases/heatmap-layer/main.js

@@ -1,10 +1,10 @@
 import Map from '../../../src/ol/Map.js';
 import View from '../../../src/ol/View.js';
 import TileLayer from '../../../src/ol/layer/Tile.js';
-import XYZ from '../../../src/ol/source/XYZ';
+import XYZ from '../../../src/ol/source/XYZ.js';
-import {Heatmap as HeatmapLayer} from '../../../src/ol/layer';
+import {Heatmap as HeatmapLayer} from '../../../src/ol/layer.js';
-import VectorSource from '../../../src/ol/source/Vector';
+import VectorSource from '../../../src/ol/source/Vector.js';
-import KML from '../../../src/ol/format/KML';
+import KML from '../../../src/ol/format/KML.js';
 
 const vector = new HeatmapLayer({
   source: new VectorSource({

rendering/cases/layer-group/main.js

@@ -0,0 +1,30 @@
+import Map from '../../../src/ol/Map.js';
+import View from '../../../src/ol/View.js';
+import {Group as LayerGroup, Tile as TileLayer} from '../../../src/ol/layer.js';
+import XYZ from '../../../src/ol/source/XYZ.js';
+
+new Map({
+  target: 'map',
+  view: new View({
+    center: [0, 0],
+    zoom: 3
+  }),
+  layers: new LayerGroup({
+    opacity: 0.75,
+    layers: [
+      new TileLayer({
+        opacity: 0.25,
+        source: new XYZ({
+          url: '/data/tiles/satellite/{z}/{x}/{y}.jpg'
+        })
+      }),
+      new TileLayer({
+        source: new XYZ({
+          url: '/data/tiles/stamen-labels/{z}/{x}/{y}.png'
+        })
+      })
+    ]
+  })
+});
+
+render();

rendering/cases/layer-image/main.js

@@ -5,7 +5,7 @@ import {
   get as getProjection,
   transform,
   transformExtent
-} from '../../../src/ol/proj';
+} from '../../../src/ol/proj.js';
 import ImageLayer from '../../../src/ol/layer/Image.js';
 const center = transform([-122.416667, 37.783333], 'EPSG:4326', 'EPSG:3857');
 

rendering/cases/layer-tile-extent/main.js

@@ -5,9 +5,9 @@
 import Map from '../../../src/ol/Map.js';
 import View from '../../../src/ol/View.js';
 import TileLayer from '../../../src/ol/layer/Tile.js';
-import {fromLonLat} from '../../../src/ol/proj';
+import {fromLonLat} from '../../../src/ol/proj.js';
 import {transformExtent} from '../../../src/ol/proj.js';
-import XYZ from '../../../src/ol/source/XYZ';
+import XYZ from '../../../src/ol/source/XYZ.js';
 
 const center = fromLonLat([7, 50]);
 const extent = transformExtent([2, 47, 10, 53], 'EPSG:4326', 'EPSG:3857');

rendering/cases/layer-tile-none-square/main.js

@@ -1,7 +1,7 @@
 import Map from '../../../src/ol/Map.js';
 import View from '../../../src/ol/View.js';
 import TileLayer from '../../../src/ol/layer/Tile.js';
-import XYZ from '../../../src/ol/source/XYZ';
+import XYZ from '../../../src/ol/source/XYZ.js';
 import {createXYZ} from '../../../src/ol/tilegrid.js';
 
 const center = [-10997148, 4569099];

rendering/cases/layer-tile-opacity/main.js

@@ -1,8 +1,8 @@
 import Map from '../../../src/ol/Map.js';
 import View from '../../../src/ol/View.js';
 import TileLayer from '../../../src/ol/layer/Tile.js';
-import {fromLonLat} from '../../../src/ol/proj';
+import {fromLonLat} from '../../../src/ol/proj.js';
-import XYZ from '../../../src/ol/source/XYZ';
+import XYZ from '../../../src/ol/source/XYZ.js';
 
 const center = fromLonLat([8.6, 50.1]);
 

rendering/cases/layer-tile-render-listener/main.js

@@ -0,0 +1,46 @@
+import Map from '../../../src/ol/Map.js';
+import View from '../../../src/ol/View.js';
+import TileLayer from '../../../src/ol/layer/Tile.js';
+import {transform, fromLonLat} from '../../../src/ol/proj.js';
+import XYZ from '../../../src/ol/source/XYZ.js';
+import CircleStyle from '../../../src/ol/style/Circle.js';
+import Fill from '../../../src/ol/style/Fill.js';
+import Stroke from '../../../src/ol/style/Stroke.js';
+import Point from '../../../src/ol/geom/Point.js';
+import {getVectorContext} from '../../../src/ol/render.js';
+
+const center = fromLonLat([8.6, 50.1]);
+
+const layer = new TileLayer({
+  source: new XYZ({
+    url: '/data/tiles/satellite/{z}/{x}/{y}.jpg',
+    transition: 0
+  })
+});
+
+const onRender = function(event) {
+  const context = event.context;
+  context.restore();
+  const vectorContext = getVectorContext(event);
+  vectorContext.setImageStyle(new CircleStyle({
+    radius: 12,
+    fill: new Fill({color: 'yellow'}),
+    stroke: new Stroke({color: 'red', width: 1})
+  }));
+  vectorContext.drawPoint(new Point(
+    transform([13, 37], 'EPSG:4326', 'EPSG:3857')));
+};
+layer.on('postrender', onRender);
+
+const map = new Map({
+  layers: [
+  ],
+  target: 'map',
+  view: new View({
+    center: center,
+    zoom: 3
+  })
+});
+map.addLayer(layer);
+
+render();

rendering/cases/layer-tile-simple/main.js

@@ -1,8 +1,8 @@
 import Map from '../../../src/ol/Map.js';
 import View from '../../../src/ol/View.js';
 import TileLayer from '../../../src/ol/layer/Tile.js';
-import {fromLonLat} from '../../../src/ol/proj';
+import {fromLonLat} from '../../../src/ol/proj.js';
-import XYZ from '../../../src/ol/source/XYZ';
+import XYZ from '../../../src/ol/source/XYZ.js';
 
 const center = fromLonLat([8.6, 50.1]);
 

rendering/cases/layer-tile-transition/main.js

@@ -1,8 +1,8 @@
 import Map from '../../../src/ol/Map.js';
 import View from '../../../src/ol/View.js';
 import TileLayer from '../../../src/ol/layer/Tile.js';
-import {fromLonLat} from '../../../src/ol/proj';
+import {fromLonLat} from '../../../src/ol/proj.js';
-import XYZ from '../../../src/ol/source/XYZ';
+import XYZ from '../../../src/ol/source/XYZ.js';
 
 const center = fromLonLat([8.6, 50.1]);
 

rendering/cases/layer-tile-two-layers/main.js

@@ -1,8 +1,8 @@
 import Map from '../../../src/ol/Map.js';
 import View from '../../../src/ol/View.js';
 import TileLayer from '../../../src/ol/layer/Tile.js';
-import {fromLonLat} from '../../../src/ol/proj';
+import {fromLonLat} from '../../../src/ol/proj.js';
-import XYZ from '../../../src/ol/source/XYZ';
+import XYZ from '../../../src/ol/source/XYZ.js';
 
 const center = fromLonLat([8.6, 50.1]);
 

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

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

rendering/cases/layer-vectortile-rotate-hidpi/main.js

@@ -1,9 +1,9 @@
 import Map from '../../../src/ol/Map.js';
 import View from '../../../src/ol/View.js';
-import VectorTileSource from '../../../src/ol/source/VectorTile';
+import VectorTileSource from '../../../src/ol/source/VectorTile.js';
-import MVT from '../../../src/ol/format/MVT';
+import MVT from '../../../src/ol/format/MVT.js';
-import {createXYZ} from '../../../src/ol/tilegrid';
+import {createXYZ} from '../../../src/ol/tilegrid.js';
-import VectorTileLayer from '../../../src/ol/layer/VectorTile';
+import VectorTileLayer from '../../../src/ol/layer/VectorTile.js';
 
 const map = new Map({
   pixelRatio: 2,

rendering/cases/layer-vectortile-rotate-vector/main.js

@@ -1,16 +1,16 @@
 import Map from '../../../src/ol/Map.js';
 import View from '../../../src/ol/View.js';
-import VectorTileSource from '../../../src/ol/source/VectorTile';
+import VectorTileSource from '../../../src/ol/source/VectorTile.js';
-import MVT from '../../../src/ol/format/MVT';
+import MVT from '../../../src/ol/format/MVT.js';
-import {createXYZ} from '../../../src/ol/tilegrid';
+import {createXYZ} from '../../../src/ol/tilegrid.js';
-import VectorTileLayer from '../../../src/ol/layer/VectorTile';
+import VectorTileLayer from '../../../src/ol/layer/VectorTile.js';
-import VectorSource from '../../../src/ol/source/Vector';
+import VectorSource from '../../../src/ol/source/Vector.js';
-import Feature from '../../../src/ol/Feature';
+import Feature from '../../../src/ol/Feature.js';
-import Point from '../../../src/ol/geom/Point';
+import Point from '../../../src/ol/geom/Point.js';
-import VectorLayer from '../../../src/ol/layer/Vector';
+import VectorLayer from '../../../src/ol/layer/Vector.js';
-import Style from '../../../src/ol/style/Style';
+import Style from '../../../src/ol/style/Style.js';
-import CircleStyle from '../../../src/ol/style/Circle';
+import CircleStyle from '../../../src/ol/style/Circle.js';
-import Fill from '../../../src/ol/style/Fill';
+import Fill from '../../../src/ol/style/Fill.js';
 
 const vectorSource = new VectorSource({
   features: [

rendering/cases/layer-vectortile-rotate/main.js

@@ -1,9 +1,9 @@
 import Map from '../../../src/ol/Map.js';
 import View from '../../../src/ol/View.js';
-import VectorTileSource from '../../../src/ol/source/VectorTile';
+import VectorTileSource from '../../../src/ol/source/VectorTile.js';
-import MVT from '../../../src/ol/format/MVT';
+import MVT from '../../../src/ol/format/MVT.js';
-import {createXYZ} from '../../../src/ol/tilegrid';
+import {createXYZ} from '../../../src/ol/tilegrid.js';
-import VectorTileLayer from '../../../src/ol/layer/VectorTile';
+import VectorTileLayer from '../../../src/ol/layer/VectorTile.js';
 
 const map = new Map({
   layers: [

rendering/cases/layer-vectortile-simple/main.js

@@ -1,9 +1,9 @@
 import Map from '../../../src/ol/Map.js';
 import View from '../../../src/ol/View.js';
-import VectorTileSource from '../../../src/ol/source/VectorTile';
+import VectorTileSource from '../../../src/ol/source/VectorTile.js';
-import MVT from '../../../src/ol/format/MVT';
+import MVT from '../../../src/ol/format/MVT.js';
-import {createXYZ} from '../../../src/ol/tilegrid';
+import {createXYZ} from '../../../src/ol/tilegrid.js';
-import VectorTileLayer from '../../../src/ol/layer/VectorTile';
+import VectorTileLayer from '../../../src/ol/layer/VectorTile.js';
 
 new Map({
   layers: [

rendering/cases/multiple-layers/main.js

@@ -9,12 +9,6 @@ import Point from '../../../src/ol/geom/Point.js';
 
 const map = new Map({
   layers: [
-    new TileLayer({
-      source: new XYZ({
-        url: '/data/tiles/satellite/{z}/{x}/{y}.jpg',
-        maxZoom: 3
-      })
-    }),
     new VectorLayer({
       zIndex: 1,
       style: new Style({
@@ -27,6 +21,12 @@ const map = new Map({
         url: '/data/countries.json',
         format: new GeoJSON()
       })
+    }),
+    new TileLayer({
+      source: new XYZ({
+        url: '/data/tiles/satellite/{z}/{x}/{y}.jpg',
+        maxZoom: 3
+      })
     })
   ],
   target: 'map',

rendering/cases/reproj-image/main.js

@@ -0,0 +1,31 @@
+import Map from '../../../src/ol/Map.js';
+import View from '../../../src/ol/View.js';
+import Static from '../../../src/ol/source/ImageStatic.js';
+import {
+  get as getProjection,
+  transformExtent
+} from '../../../src/ol/proj.js';
+import ImageLayer from '../../../src/ol/layer/Image.js';
+
+const source = new Static({
+  url: '/data/tiles/osm/5/5/12.png',
+  imageExtent: transformExtent([-123, 37, -122, 38], 'EPSG:4326', 'EPSG:3857'),
+  projection: getProjection('EPSG:3857')
+});
+
+new Map({
+  pixelRatio: 1,
+  target: 'map',
+  layers: [new ImageLayer({
+    source: source
+  })],
+  view: new View({
+    center: [-122.416667, 37.783333],
+    zoom: 8,
+    projection: 'EPSG:4326'
+  })
+});
+
+render({
+  tolerance: 0.001
+});

rendering/cases/reproj-tile-4326/main.js

@@ -0,0 +1,36 @@
+import Map from '../../../src/ol/Map.js';
+import View from '../../../src/ol/View.js';
+import XYZ from '../../../src/ol/source/XYZ.js';
+import TileLayer from '../../../src/ol/layer/Tile.js';
+import {toLonLat, get} from '../../../src/ol/proj.js';
+import {createXYZ, createForProjection} from '../../../src/ol/tilegrid.js';
+
+const tileGrid = createXYZ();
+const extent = tileGrid.getTileCoordExtent([5, 5, 12]);
+const center = [(extent[0] + extent[2]) / 2, extent[1]];
+
+const source = new XYZ({
+  transition: 0,
+  minZoom: 5,
+  maxZoom: 5,
+  url: '/data/tiles/osm/{z}/{x}/{y}.png'
+});
+
+source.setTileGridForProjection(get('EPSG:4326'), createForProjection(get('EPSG:4326'), 7, [64, 64]));
+
+new Map({
+  pixelRatio: 1,
+  target: 'map',
+  layers: [
+    new TileLayer({
+      source: source
+    })
+  ],
+  view: new View({
+    projection: 'EPSG:4326',
+    center: toLonLat(center),
+    zoom: 5
+  })
+});
+
+render();

rendering/cases/reproj-tile-5070/main.js

@@ -0,0 +1,41 @@
+import Map from '../../../src/ol/Map.js';
+import View from '../../../src/ol/View.js';
+import XYZ from '../../../src/ol/source/XYZ.js';
+import TileLayer from '../../../src/ol/layer/Tile.js';
+import {get, transform} from '../../../src/ol/proj.js';
+import {register} from '../../../src/ol/proj/proj4.js';
+import proj4 from 'proj4';
+
+proj4.defs('EPSG:5070',
+  '+proj=aea +lat_1=29.5 +lat_2=45.5 +lat_0=23 +lon_0=-96 +x_0=0 ' +
+          '+y_0=0 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs');
+register(proj4);
+const proj5070 = get('EPSG:5070');
+proj5070.setExtent([-6e6, 0, 4e6, 6e6]);
+
+const center4326 = [-118.125, 31.95];
+const center = transform(center4326, 'EPSG:4326', 'EPSG:5070');
+
+const source = new XYZ({
+  transition: 0,
+  minZoom: 5,
+  maxZoom: 5,
+  url: '/data/tiles/osm/{z}/{x}/{y}.png'
+});
+
+new Map({
+  pixelRatio: 1,
+  target: 'map',
+  layers: [
+    new TileLayer({
+      source: source
+    })
+  ],
+  view: new View({
+    projection: 'EPSG:5070',
+    center: center,
+    zoom: 4
+  })
+});
+
+render();

rendering/cases/reproj-tile-54009/main.js

@@ -0,0 +1,40 @@
+import Map from '../../../src/ol/Map.js';
+import View from '../../../src/ol/View.js';
+import XYZ from '../../../src/ol/source/XYZ.js';
+import TileLayer from '../../../src/ol/layer/Tile.js';
+import {get, transform} from '../../../src/ol/proj.js';
+import {register} from '../../../src/ol/proj/proj4.js';
+import proj4 from 'proj4';
+
+proj4.defs('ESRI:54009', '+proj=moll +lon_0=0 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs');
+
+register(proj4);
+const proj54009 = get('ESRI:54009');
+proj54009.setExtent([-18e6, -9e6, 18e6, 9e6]);
+
+const center4326 = [-118.125, 31.95];
+const center = transform(center4326, 'EPSG:4326', 'ESRI:54009');
+
+const source = new XYZ({
+  transition: 0,
+  minZoom: 5,
+  maxZoom: 5,
+  url: '/data/tiles/osm/{z}/{x}/{y}.png'
+});
+
+new Map({
+  pixelRatio: 1,
+  target: 'map',
+  layers: [
+    new TileLayer({
+      source: source
+    })
+  ],
+  view: new View({
+    projection: 'ESRI:54009',
+    center: center,
+    zoom: 6
+  })
+});
+
+render();

rendering/cases/reproj-tile-dateline-merc/main.js

@@ -0,0 +1,40 @@
+import Map from '../../../src/ol/Map.js';
+import View from '../../../src/ol/View.js';
+import XYZ from '../../../src/ol/source/XYZ.js';
+import TileLayer from '../../../src/ol/layer/Tile.js';
+import {get, transform} from '../../../src/ol/proj.js';
+import {register} from '../../../src/ol/proj/proj4.js';
+import proj4 from 'proj4';
+
+proj4.defs('merc_180', '+proj=merc +lon_0=180 +units=m +no_defs');
+
+register(proj4);
+const merc = get('merc_180');
+merc.setExtent([-20026376.39, -20048966.10, 20026376.39, 20048966.10]);
+
+const center4326 = [180, 0];
+const center = transform(center4326, 'EPSG:4326', 'merc_180');
+
+const source = new XYZ({
+  projection: 'EPSG:4326',
+  minZoom: 0,
+  maxZoom: 0,
+  url: '/data/tiles/4326/{z}/{x}/{y}.png'
+});
+
+new Map({
+  pixelRatio: 1,
+  target: 'map',
+  layers: [
+    new TileLayer({
+      source: source
+    })
+  ],
+  view: new View({
+    projection: 'merc_180',
+    center: center,
+    zoom: 0
+  })
+});
+
+render();

rendering/cases/reproj-tile-none-square/main.js

@@ -0,0 +1,38 @@
+import Map from '../../../src/ol/Map.js';
+import View from '../../../src/ol/View.js';
+import XYZ from '../../../src/ol/source/XYZ.js';
+import TileLayer from '../../../src/ol/layer/Tile.js';
+import {toLonLat} from '../../../src/ol/proj.js';
+import {createXYZ} from '../../../src/ol/tilegrid.js';
+
+const tileGrid = createXYZ({tileSize: [512, 256]});
+const extent = tileGrid.getTileCoordExtent([5, 3, 12]);
+const center = [
+  (extent[0] + extent[2]) / 2,
+  (extent[1] + extent[3]) / 2
+];
+
+const source = new XYZ({
+  projection: 'EPSG:3857',
+  minZoom: 5,
+  maxZoom: 5,
+  url: '/data/tiles/512x256/{z}/{x}/{y}.png',
+  tileSize: [512, 256]
+});
+
+new Map({
+  pixelRatio: 1,
+  target: 'map',
+  layers: [
+    new TileLayer({
+      source: source
+    })
+  ],
+  view: new View({
+    projection: 'EPSG:4326',
+    center: toLonLat(center),
+    zoom: 5
+  })
+});
+
+render();

rendering/cases/reproj-tile-northpole/main.js

@@ -0,0 +1,40 @@
+import Map from '../../../src/ol/Map.js';
+import View from '../../../src/ol/View.js';
+import XYZ from '../../../src/ol/source/XYZ.js';
+import TileLayer from '../../../src/ol/layer/Tile.js';
+import {get, transform} from '../../../src/ol/proj.js';
+import {register} from '../../../src/ol/proj/proj4.js';
+import proj4 from 'proj4';
+
+proj4.defs('EPSG:3413', '+proj=stere +lat_0=90 +lat_ts=70 +lon_0=-45 ' +
+          '+k=1 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs');
+
+register(proj4);
+const proj3413 = get('EPSG:3413');
+proj3413.setExtent([-4194304, -4194304, 4194304, 4194304]);
+
+const center4326 = [0, 90];
+const center = transform(center4326, 'EPSG:4326', 'EPSG:3413');
+
+const source = new XYZ({
+  maxZoom: 0,
+  projection: 'EPSG:4326',
+  url: '/data/tiles/4326/{z}/{x}/{y}.png'
+});
+
+new Map({
+  pixelRatio: 1,
+  target: 'map',
+  layers: [
+    new TileLayer({
+      source: source
+    })
+  ],
+  view: new View({
+    projection: 'EPSG:3413',
+    center: center,
+    zoom: 0
+  })
+});
+
+render();

rendering/cases/webgl-points/main.js

@@ -1,11 +1,11 @@
 import Map from '../../../src/ol/Map.js';
 import View from '../../../src/ol/View.js';
 import TileLayer from '../../../src/ol/layer/Tile.js';
-import XYZ from '../../../src/ol/source/XYZ';
+import XYZ from '../../../src/ol/source/XYZ.js';
-import {Vector as VectorLayer} from '../../../src/ol/layer';
+import {Vector as VectorLayer} from '../../../src/ol/layer.js';
-import VectorSource from '../../../src/ol/source/Vector';
+import VectorSource from '../../../src/ol/source/Vector.js';
-import KML from '../../../src/ol/format/KML';
+import KML from '../../../src/ol/format/KML.js';
-import WebGLPointsLayerRenderer from '../../../src/ol/renderer/webgl/PointsLayer';
+import WebGLPointsLayerRenderer from '../../../src/ol/renderer/webgl/PointsLayer.js';
 
 class CustomLayer extends VectorLayer {
   createRenderer() {

rendering/test.js

@@ -357,7 +357,7 @@ if (require.main === module) {
     option('puppeteer-args', {
       describe: 'Additional args for Puppeteer',
       type: 'array',
-      default: process.env.CI ? ['--no-sandbox', '--disable-setuid-sandbox'] : []
+      default: process.env.CI ? ['--no-sandbox', '--disable-setuid-sandbox', '--disable-dev-shm-usage'] : []
     }).
     parse();
 

rendering/webpack.config.js

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