Update package to version 6.4.3

Bump karma from 5.1.0 to 5.1.1

changelog/v6.4.1

@@ -2,7 +2,9 @@
 
 This is a bugfix release which removes a few regressions that were introduced by v6.4.0, and fixes a few issues in examples caused by the website facelift.
 
-## List of all changes * [#11346](https://github.com/openlayers/openlayers/pull/11346) - Fix text instruction flat coordinates when stride is not 2 ([@ahocevar](https://github.com/ahocevar))
+## List of all changes
+
+ * [#11346](https://github.com/openlayers/openlayers/pull/11346) - Fix text instruction flat coordinates when stride is not 2 ([@ahocevar](https://github.com/ahocevar))
  * [#11348](https://github.com/openlayers/openlayers/pull/11348) - Add all layers to layer export ([@M393](https://github.com/M393))
  * [#11337](https://github.com/openlayers/openlayers/pull/11337) - Do not rely on old value for target ([@ahocevar](https://github.com/ahocevar))
  * [#11345](https://github.com/openlayers/openlayers/pull/11345) - Fix the popup in the geographic example ([@MoonE](https://github.com/MoonE))

changelog/v6.4.2.md

@@ -0,0 +1,14 @@
+# 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.
+
+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
+
+ * [#11364](https://github.com/openlayers/openlayers/pull/11364) - Load pointer events polyfill - before other polyfills ([@ahocevar](https://github.com/ahocevar))
+ * [#11365](https://github.com/openlayers/openlayers/pull/11365) - Revert to original method proposed in #11193 ([@mike-000](https://github.com/mike-000))
+ * [#11359](https://github.com/openlayers/openlayers/pull/11359) - check projection can wrap before getting width ([@mike-000](https://github.com/mike-000))
+ * [#11355](https://github.com/openlayers/openlayers/pull/11355) - Cloak API key with instructions where to get one ([@ahocevar](https://github.com/ahocevar))
+ * [#11354](https://github.com/openlayers/openlayers/pull/11354) - Fix line breaks in changelog ([@ahocevar](https://github.com/ahocevar))
+

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

@@ -35,6 +35,8 @@ tags: "fullscreen, geolocation, orientation, mobile"
           left: 10px;
       }
     </style>
+    <script src="https://unpkg.com/elm-pep"></script>
+    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=fetch,requestAnimationFrame,Element.prototype.classList,URL"></script>
   </head>
   <body>
     <div id="map" class="map"></div>

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/mobile-full-screen.html

@@ -23,6 +23,8 @@ cloak:
         height: 100%;
       }
     </style>
+    <script src="https://unpkg.com/elm-pep"></script>
+    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=fetch,requestAnimationFrame,Element.prototype.classList,URL"></script>
   </head>
   <body>
     <div id="map" class="map"></div>

examples/offscreen-canvas.html

@@ -6,5 +6,9 @@ docs: >
   The map in this example is rendered in a web worker, using `OffscreenCanvas`. **Note:** This is currently only supported in Chrome and Edge.
 tags: "worker, offscreencanvas, vector-tiles"
 experimental: true
+cloak:
+  - key: get_your_own_D6rA4zTHduk6KOKTXzGB
+    value: Get your own API key at https://www.maptiler.com/cloud/
+
 ---
 <div id="map" class="map"></div>

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/templates/example.html

@@ -67,8 +67,8 @@
     <link rel="stylesheet" href="./resources/prism/prism-1.20.0.css" type="text/css">
     <link rel="stylesheet" href="./css/ol.css" type="text/css">
     <link rel="stylesheet" href="./resources/layout.css" type="text/css">
-    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=fetch,requestAnimationFrame,Element.prototype.classList,URL"></script>
     <script src="https://unpkg.com/elm-pep"></script>
+    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=fetch,requestAnimationFrame,Element.prototype.classList,URL"></script>
     {{{ extraHead.local }}}
     {{{ css.tag }}}
     <title>{{ title }}</title>
@@ -190,10 +190,10 @@
 &lt;html lang="en"&gt;
   &lt;head&gt;
     &lt;title&gt;{{ title }}&lt;/title&gt;
+    &lt;!-- Pointer events polyfill for old browsers, see https://caniuse.com/#feat=pointer --&gt;
+    &lt;script src="https://unpkg.com/elm-pep"&gt;&lt;/script&gt;{{#if extraHead.remote}}
     &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=fetch,requestAnimationFrame,Element.prototype.classList,URL"&gt;&lt;/script&gt;
-    &lt;!-- Pointer events polyfill for old browsers, see https://caniuse.com/#feat=pointer --&gt;
-    &lt;script src="https://unpkg.com/@openlayers/pepjs"&gt;&lt;/script&gt;{{#if extraHead.remote}}
 {{ indent extraHead.remote spaces=4 }}{{/if}}
     &lt;style&gt;
       .map {

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.1",
+  "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/layer-vectorimage-extent-rotation-intersection/main.js

@@ -0,0 +1,72 @@
+import Feature from '../../../src/ol/Feature.js';
+import Map from '../../../src/ol/Map.js';
+import Point from '../../../src/ol/geom/Point.js';
+import VectorImageLayer from '../../../src/ol/layer/VectorImage.js';
+import VectorSource from '../../../src/ol/source/Vector.js';
+import View from '../../../src/ol/View.js';
+import {Fill, RegularShape, Stroke, Style} from '../../../src/ol/style.js';
+import {fromExtent} from '../../../src/ol/geom/Polygon.js';
+
+const extent = [
+  1900e3 - 100000,
+  6300e3 - 100000,
+  1900e3 + 100000,
+  6300e3 + 100000,
+];
+
+const pt1 = new Feature({
+  name: 'point',
+  geometry: new Point([1900e3, 6300e3]),
+});
+pt1.setStyle(
+  new Style({
+    image: new RegularShape({
+      points: 4,
+      radius: 20,
+      fill: new Fill({
+        color: 'fuchsia',
+      }),
+    }),
+  })
+);
+
+const border = new Feature({
+  name: 'extent border',
+  geometry: fromExtent(extent),
+});
+
+new Map({
+  layers: [
+    new VectorImageLayer({
+      style: new Style({
+        stroke: new Stroke({
+          color: 'yellow',
+          width: 20,
+        }),
+      }),
+      source: new VectorSource({
+        features: [border],
+      }),
+    }),
+    new VectorImageLayer({
+      style: new Style({
+        stroke: new Stroke({
+          color: 'green',
+          width: 20,
+        }),
+      }),
+      source: new VectorSource({
+        features: [pt1, border],
+      }),
+      extent: extent,
+    }),
+  ],
+  target: 'map',
+  view: new View({
+    center: [1900e3, 6300e3],
+    zoom: 7,
+    rotation: Math.PI / 4,
+  }),
+});
+
+render();

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

@@ -410,10 +410,12 @@ export function toStringXY(coordinate, opt_fractionDigits) {
  * @return {Coordinate} The coordinate within the real world extent.
  */
 export function wrapX(coordinate, projection) {
-  const worldWidth = getWidth(projection.getExtent());
-  const worldsAway = getWorldsAway(coordinate, projection, worldWidth);
-  if (worldsAway) {
-    coordinate[0] -= worldsAway * worldWidth;
+  if (projection.canWrapX()) {
+    const worldWidth = getWidth(projection.getExtent());
+    const worldsAway = getWorldsAway(coordinate, projection, worldWidth);
+    if (worldsAway) {
+      coordinate[0] -= worldsAway * worldWidth;
+    }
   }
   return coordinate;
 }

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/renderer/canvas/VectorImageLayer.js

@@ -115,7 +115,6 @@ class CanvasVectorImageLayerRenderer extends CanvasImageLayerRenderer {
         {},
         frameState,
         {
-          coordinateToPixelTransform: create(),
           declutterItems: [],
           extent: renderedExtent,
           size: [width, height],
@@ -138,6 +137,7 @@ class CanvasVectorImageLayerRenderer extends CanvasImageLayerRenderer {
             vectorRenderer.prepareFrame(imageFrameState) &&
             vectorRenderer.replayGroupChanged
           ) {
+            vectorRenderer.clipping = false;
             vectorRenderer.renderFrame(imageFrameState, null);
             renderDeclutterItems(imageFrameState, null);
             callback();

src/ol/renderer/canvas/VectorLayer.js

@@ -129,6 +129,12 @@ class CanvasVectorLayerRenderer extends CanvasLayerRenderer {
      * @type {boolean}
      */
     this.replayGroupChanged = true;
+
+    /**
+     * Clipping to be performed by `renderFrame()`
+     * @type {boolean}
+     */
+    this.clipping = true;
   }
 
   /**
@@ -198,7 +204,7 @@ class CanvasVectorLayerRenderer extends CanvasLayerRenderer {
 
     // clipped rendering if layer extent is set
     let clipped = false;
-    if (layerState.extent) {
+    if (layerState.extent && this.clipping) {
       const layerExtent = fromUserExtent(layerState.extent, projection);
       clipped =
         !containsExtent(layerExtent, frameState.extent) &&

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/coordinate.test.js

@@ -1,4 +1,5 @@
 import Circle from '../../../src/ol/geom/Circle.js';
+import Projection from '../../../src/ol/proj/Projection.js';
 import {
   add as addCoordinate,
   closestOnCircle,
@@ -271,5 +272,11 @@ describe('ol.coordinate', function () {
     it('moves far off right coordinate to real world', function () {
       expect(wrapX([1096, 48], projection)).to.eql([16, 48]);
     });
+
+    const swiss = new Projection({code: 'EPSG:21781', units: 'm'});
+
+    it('leaves non-global projection coordinates untouched', function () {
+      expect(wrapX([1096, 48], swiss)).to.eql([1096, 48]);
+    });
   });
 });

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

@@ -1,6 +1,13 @@
 import Disposable from '../../../../src/ol/Disposable.js';
+import Feature from '../../../../src/ol/Feature.js';
 import Map from '../../../../src/ol/Map.js';
 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';
 
 describe('ol.renderer.Map', function () {
   describe('constructor', function () {
@@ -13,4 +20,72 @@ describe('ol.renderer.Map', function () {
       map.dispose();
     });
   });
+
+  describe('#forEachFeatureAtCoordinate', function () {
+    let map, source;
+    beforeEach(function () {
+      const target = document.createElement('div');
+      target.style.width = '100px';
+      target.style.height = '100px';
+      document.body.appendChild(target);
+      const projection = new Projection({
+        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: source,
+            renderBuffer: 12,
+            style: new Style({
+              image: new Circle({
+                radius: 6,
+                fill: new Fill({
+                  color: 'fuchsia',
+                }),
+              }),
+            }),
+          }),
+        ],
+        view: new View({
+          projection: projection,
+          center: [660000, 190000],
+          zoom: 9,
+        }),
+      });
+    });
+
+    afterEach(function () {
+      const target = map.getTargetElement();
+      map.setTarget(null);
+      document.body.removeChild(target);
+    });
+
+    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();
+    });
+  });
 });