Update package to version 6.4.3

Bump karma from 5.1.0 to 5.1.1

changelog/v6.4.2.md

@@ -1,4 +1,4 @@
-# 6.4.1
+# 6.4.2
 
 This is a bugfix release which removes a few regressions that were introduced by v6.4.0, and fixes a few issues in examples.
 

changelog/v6.4.3.md

@@ -0,0 +1,29 @@
+# 6.4.3
+
+This is a bugfix release which fixes a performance regression, a rendering issue, and adds improvements to a few examples.
+
+See the [v6.4.0 release notes](https://github.com/openlayers/openlayers/releases/tag/v6.4.0) for a complete list of changes and upgrade notes when upgrading from v6.3.x.
+
+## List of all changes
+
+ * [#11379](https://github.com/openlayers/openlayers/pull/11379) - tooltip bs on fullscreen ([@jipexu](https://github.com/jipexu))
+ * [#11378](https://github.com/openlayers/openlayers/pull/11378) - Fix imageSmoothing: false when ImageStatic is stretched to fit extent ([@mike-000](https://github.com/mike-000))
+ * [#11367](https://github.com/openlayers/openlayers/pull/11367) - Use https for mapbox tiles ([@MoonE](https://github.com/MoonE))
+ * [#11377](https://github.com/openlayers/openlayers/pull/11377) - Only include renderBuffer when decluttering ([@ahocevar](https://github.com/ahocevar))
+ * [#11376](https://github.com/openlayers/openlayers/pull/11376) - Overlay Eample - Show the popup in front of the other overlays ([@MoonE](https://github.com/MoonE))
+
+
+<details>
+  <summary>Dependency Updates</summary>
+
+ * [#11381](https://github.com/openlayers/openlayers/pull/11381) - Bump karma from 5.1.0 to 5.1.1 ([@openlayers](https://github.com/openlayers))
+ * [#11383](https://github.com/openlayers/openlayers/pull/11383) - Bump worker-loader from 2.0.0 to 3.0.0 ([@openlayers](https://github.com/openlayers))
+ * [#11386](https://github.com/openlayers/openlayers/pull/11386) - Bump webpack from 4.44.0 to 4.44.1 ([@openlayers](https://github.com/openlayers))
+ * [#11384](https://github.com/openlayers/openlayers/pull/11384) - Bump @babel/core from 7.10.5 to 7.11.0 ([@openlayers](https://github.com/openlayers))
+ * [#11382](https://github.com/openlayers/openlayers/pull/11382) - Bump mocha from 8.0.1 to 8.1.0 ([@openlayers](https://github.com/openlayers))
+ * [#11385](https://github.com/openlayers/openlayers/pull/11385) - Bump @babel/preset-env from 7.10.4 to 7.11.0 ([@openlayers](https://github.com/openlayers))
+ * [#11387](https://github.com/openlayers/openlayers/pull/11387) - Bump eslint from 7.5.0 to 7.6.0 ([@openlayers](https://github.com/openlayers))
+ * [#11388](https://github.com/openlayers/openlayers/pull/11388) - Bump terser-webpack-plugin from 3.0.7 to 3.0.8 ([@openlayers](https://github.com/openlayers))
+
+
+</details>

examples/button-title.html

@@ -4,6 +4,7 @@ title: Custom Tooltips
 shortdesc: This example shows how to customize the buttons tooltips with Bootstrap.
 docs: >
   This example shows how to customize the buttons tooltips with <a href="https://getbootstrap.com/docs/4.5/components/tooltips/">Bootstrap</a>.
+  For the tooltips to work in fullscreen mode, set the container property to a selector that matches the map target.
 tags: "custom, tooltip"
 resources:
   - https://code.jquery.com/jquery-3.5.1.min.js

examples/button-title.js

@@ -19,7 +19,9 @@ const map = new Map({
 
 $('.ol-zoom-in, .ol-zoom-out').tooltip({
   placement: 'right',
+  container: '#map',
 });
 $('.ol-rotate-reset, .ol-attribution button[title]').tooltip({
   placement: 'left',
+  container: '#map',
 });

examples/custom-interactions.js

@@ -139,7 +139,7 @@ const map = new Map({
     new TileLayer({
       source: new TileJSON({
         url:
-          'https://a.tiles.mapbox.com/v4/aj.1x1-degrees.json?access_token=' +
+          'https://a.tiles.mapbox.com/v4/aj.1x1-degrees.json?secure&access_token=' +
           key,
       }),
     }),

examples/icon-color.js

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

examples/icon-scale.js

@@ -12,7 +12,7 @@ import {getVectorContext} from '../src/ol/render.js';
 
 const rasterLayer = new TileLayer({
   source: new TileJSON({
-    url: 'https://a.tiles.mapbox.com/v3/aj.1x1-degrees.json',
+    url: 'https://a.tiles.mapbox.com/v3/aj.1x1-degrees.json?secure=1',
     crossOrigin: '',
   }),
 });

examples/icon.js

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

examples/overlay.js

@@ -21,6 +21,12 @@ const map = new Map({
 
 const pos = fromLonLat([16.3725, 48.208889]);
 
+// Popup showing the position the user clicked
+const popup = new Overlay({
+  element: document.getElementById('popup'),
+});
+map.addOverlay(popup);
+
 // Vienna marker
 const marker = new Overlay({
   position: pos,
@@ -37,12 +43,6 @@ const vienna = new Overlay({
 });
 map.addOverlay(vienna);
 
-// Popup showing the position the user clicked
-const popup = new Overlay({
-  element: document.getElementById('popup'),
-});
-map.addOverlay(popup);
-
 map.on('click', function (evt) {
   const element = popup.getElement();
   const coordinate = evt.coordinate;

examples/tilejson.js

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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ol",
-  "version": "6.4.2",
+  "version": "6.4.3",
   "description": "OpenLayers mapping library",
   "keywords": [
     "map",
@@ -85,7 +85,7 @@
     "karma-webpack": "^4.0.0-rc.2",
     "loglevelnext": "^4.0.1",
     "marked": "1.1.1",
-    "mocha": "8.0.1",
+    "mocha": "8.1.0",
     "pixelmatch": "^5.1.0",
     "pngjs": "^5.0.0",
     "proj4": "2.6.2",
@@ -102,11 +102,11 @@
     "typescript": "^3.8.3",
     "url-polyfill": "^1.1.5",
     "walk": "^2.3.9",
-    "webpack": "4.44.0",
+    "webpack": "4.44.1",
     "webpack-cli": "^3.3.2",
     "webpack-dev-middleware": "^3.6.2",
     "webpack-dev-server": "^3.3.1",
-    "worker-loader": "^2.0.0",
+    "worker-loader": "^3.0.0",
     "yargs": "^15.0.2"
   },
   "eslintConfig": {

rendering/cases/image-no-stretch-disable-smoothing/main.js

@@ -0,0 +1,29 @@
+import ImageLayer from '../../../src/ol/layer/Image.js';
+import Map from '../../../src/ol/Map.js';
+import Static from '../../../src/ol/source/ImageStatic.js';
+import View from '../../../src/ol/View.js';
+
+const source = new Static({
+  url: '/data/tiles/osm/5/5/12.png',
+  imageExtent: [-123, 37, -122, 38],
+  imageSmoothing: false,
+});
+
+new Map({
+  pixelRatio: 1,
+  target: 'map',
+  layers: [
+    new ImageLayer({
+      source: source,
+    }),
+  ],
+  view: new View({
+    center: [-122.39, 37.81],
+    zoom: 12,
+    projection: 'EPSG:4326',
+  }),
+});
+
+render({
+  tolerance: 0.001,
+});

rendering/cases/image-stretched-disable-smoothing/main.js

@@ -19,7 +19,7 @@ new Map({
     }),
   ],
   view: new View({
-    center: fromLonLat([-122.416667, 37.783333]),
+    center: fromLonLat([-122.39, 37.81]),
     zoom: 12,
   }),
 });

rendering/cases/reproj-image-no-stretch-disable-smoothing/main.js

@@ -0,0 +1,30 @@
+import ImageLayer from '../../../src/ol/layer/Image.js';
+import Map from '../../../src/ol/Map.js';
+import Static from '../../../src/ol/source/ImageStatic.js';
+import View from '../../../src/ol/View.js';
+import {fromLonLat} from '../../../src/ol/proj.js';
+
+const source = new Static({
+  url: '/data/tiles/osm/5/5/12.png',
+  imageExtent: [-123, 37, -122, 38],
+  imageSmoothing: false,
+  projection: 'EPSG:4326',
+});
+
+new Map({
+  pixelRatio: 1,
+  target: 'map',
+  layers: [
+    new ImageLayer({
+      source: source,
+    }),
+  ],
+  view: new View({
+    center: fromLonLat([-122.39, 37.81]),
+    zoom: 12,
+  }),
+});
+
+render({
+  tolerance: 0.001,
+});

rendering/cases/reproj-image-stretched-disable-smoothing/main.js

@@ -20,7 +20,7 @@ new Map({
     }),
   ],
   view: new View({
-    center: [-122.416667, 37.783333],
+    center: [-122.39, 37.81],
     zoom: 12,
     projection: 'EPSG:4326',
   }),

src/ol/render/canvas/Executor.js

@@ -309,6 +309,7 @@ class Executor {
   }
 
   /**
+   * @private
    * @param {CanvasRenderingContext2D} context Context.
    * @param {number} contextScale Scale of the context.
    * @param {number} x X.
@@ -410,26 +411,26 @@ class Executor {
     } else {
       createOrUpdate(boxX, boxY, boxX + boxW, boxY + boxH, tmpExtent);
     }
-    this.renderBuffer_[0] = Math.max(
-      this.renderBuffer_[0],
-      getWidth(tmpExtent)
-    );
-    this.renderBuffer_[1] = Math.max(
-      this.renderBuffer_[1],
-      getHeight(tmpExtent)
-    );
+    let renderBufferX = 0;
+    let renderBufferY = 0;
+    if (declutterGroup) {
+      const renderBuffer = this.renderBuffer_;
+      renderBuffer[0] = Math.max(renderBuffer[0], getWidth(tmpExtent));
+      renderBufferX = renderBuffer[0];
+      renderBuffer[1] = Math.max(renderBuffer[1], getHeight(tmpExtent));
+      renderBufferY = renderBuffer[1];
+    }
     const canvas = context.canvas;
     const strokePadding = strokeInstruction
       ? (strokeInstruction[2] * scale[0]) / 2
       : 0;
-    const renderBuffer = this.renderBuffer_;
     const intersects =
       tmpExtent[0] - strokePadding <=
-        (canvas.width + renderBuffer[0]) / contextScale &&
-      tmpExtent[2] + strokePadding >= -renderBuffer[0] / contextScale &&
+        (canvas.width + renderBufferX) / contextScale &&
+      tmpExtent[2] + strokePadding >= -renderBufferX / contextScale &&
       tmpExtent[1] - strokePadding <=
-        (canvas.height + renderBuffer[1]) / contextScale &&
-      tmpExtent[3] + strokePadding >= -renderBuffer[1] / contextScale;
+        (canvas.height + renderBufferY) / contextScale &&
+      tmpExtent[3] + strokePadding >= -renderBufferY / contextScale;
 
     if (snapToPixel) {
       x = Math.round(x);

src/ol/source/ImageStatic.js

@@ -6,6 +6,7 @@ import EventType from '../events/EventType.js';
 import ImageSource, {defaultImageLoadFunction} from './Image.js';
 import ImageState from '../ImageState.js';
 import ImageWrapper from '../Image.js';
+import {assign} from '../obj.js';
 import {createCanvasContext2D} from '../dom.js';
 import {getHeight, getWidth, intersects} from '../extent.js';
 import {get as getProjection} from '../proj.js';
@@ -138,6 +139,7 @@ class Static extends ImageSource {
       const targetWidth = Math.ceil(getWidth(imageExtent) / resolution);
       if (targetWidth != imageWidth) {
         const context = createCanvasContext2D(targetWidth, imageHeight);
+        assign(context, this.getContextOptions());
         const canvas = context.canvas;
         context.drawImage(
           image,

test/spec/ol/renderer/map.test.js

@@ -5,6 +5,7 @@ import MapRenderer from '../../../../src/ol/renderer/Map.js';
 import VectorLayer from '../../../../src/ol/layer/Vector.js';
 import VectorSource from '../../../../src/ol/source/Vector.js';
 import View from '../../../../src/ol/View.js';
+import {Circle, Fill, Style} from '../../../../src/ol/style.js';
 import {Point} from '../../../../src/ol/geom.js';
 import {Projection} from '../../../../src/ol/proj.js';
 
@@ -21,7 +22,7 @@ describe('ol.renderer.Map', function () {
   });
 
   describe('#forEachFeatureAtCoordinate', function () {
-    let map;
+    let map, source;
     beforeEach(function () {
       const target = document.createElement('div');
       target.style.width = '100px';
@@ -31,13 +32,23 @@ describe('ol.renderer.Map', function () {
         code: 'EPSG:21781',
         units: 'm',
       });
+      source = new VectorSource({
+        projection: projection,
+        features: [new Feature(new Point([660000, 190000]))],
+      });
       map = new Map({
         target: target,
         layers: [
           new VectorLayer({
-            source: new VectorSource({
-              projection: projection,
-              features: [new Feature(new Point([660000, 190000]))],
+            source: source,
+            renderBuffer: 12,
+            style: new Style({
+              image: new Circle({
+                radius: 6,
+                fill: new Fill({
+                  color: 'fuchsia',
+                }),
+              }),
             }),
           }),
         ],
@@ -47,7 +58,6 @@ describe('ol.renderer.Map', function () {
           zoom: 9,
         }),
       });
-      map.renderSync();
     });
 
     afterEach(function () {
@@ -57,8 +67,25 @@ describe('ol.renderer.Map', function () {
     });
 
     it('works with custom projection', function () {
+      map.renderSync();
       const features = map.getFeaturesAtPixel([50, 50]);
       expect(features.length).to.be(1);
     });
+
+    it('only draws features that intersect the hit detection viewport', function () {
+      const resolution = map.getView().getResolution();
+      source.addFeature(
+        new Feature(new Point([660000 + resolution * 6, 190000]))
+      );
+      source.addFeature(
+        new Feature(new Point([660000 - resolution * 12, 190000]))
+      );
+      map.renderSync();
+      const spy = sinon.spy(CanvasRenderingContext2D.prototype, 'drawImage');
+      const features = map.getFeaturesAtPixel([50, 44]);
+      expect(features.length).to.be(1);
+      expect(spy.callCount).to.be(2);
+      spy.restore();
+    });
   });
 });