Additional changes to work with user projection

examples/geographic.css

@@ -0,0 +1,4 @@
+td {
+  padding: 0 0.5em;
+  text-align: right;
+}

examples/geographic.html

@@ -7,7 +7,11 @@ docs: >
   makes it so the map view uses geographic coordinates (even if the view projection is
   not geographic).
 tags: "geographic"
+resources:
+  - https://code.jquery.com/jquery-2.2.3.min.js
+  - https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css
+  - https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js
 ---
-<div id="map" class="map"></div>
+<div id="map" class="map"><div id="popup"></div></div>
 <div id="info"></div>
 

examples/geographic.js

@@ -1,8 +1,9 @@
 import {useGeographic} from '../src/ol/proj.js';
-import {Map, View, Feature} from '../src/ol/index.js';
+import {Map, View, Feature, Overlay} from '../src/ol/index.js';
 import {Point} from '../src/ol/geom.js';
 import {Vector as VectorLayer, Tile as TileLayer} from '../src/ol/layer.js';
 import {OSM, Vector as VectorSource} from '../src/ol/source.js';
+import {Style, Circle, Fill} from '../src/ol/style.js';
 
 useGeographic();
 
@@ -25,14 +26,64 @@ const map = new Map({
         features: [
           new Feature(point)
         ]
+      }),
+      style: new Style({
+        image: new Circle({
+          radius: 9,
+          fill: new Fill({color: 'red'})
+        })
       })
     })
   ]
 });
 
+const element = document.getElementById('popup');
+
+const popup = new Overlay({
+  element: element,
+  positioning: 'bottom-center',
+  stopEvent: false,
+  offset: [0, -10]
+});
+map.addOverlay(popup);
+
+function formatCoordinate(coordinate) {
+  return `
+    <table>
+      <tbody>
+        <tr><th>lon</th><td>${coordinate[0].toFixed(2)}</td></tr>
+        <tr><th>lat</th><td>${coordinate[1].toFixed(2)}</td></tr>
+      </tbody>
+    </table>`;
+}
+
 const info = document.getElementById('info');
 map.on('moveend', function() {
   const view = map.getView();
   const center = view.getCenter();
-  info.innerText = `lon: ${center[0].toFixed(2)}, lat: ${center[1].toFixed(2)}`;
+  info.innerHTML = formatCoordinate(center);
+});
+
+map.on('click', function(event) {
+  const feature = map.getFeaturesAtPixel(event.pixel)[0];
+  if (feature) {
+    const coordinate = feature.getGeometry().getCoordinates();
+    popup.setPosition(coordinate);
+    $(element).popover({
+      placement: 'top',
+      html: true,
+      content: formatCoordinate(coordinate)
+    });
+    $(element).popover('show');
+  } else {
+    $(element).popover('destroy');
+  }
+});
+
+map.on('pointermove', function(event) {
+  if (map.hasFeatureAtPixel(event.pixel)) {
+    map.getViewport().style.cursor = 'pointer';
+  } else {
+    map.getViewport().style.cursor = 'inherit';
+  }
 });

src/ol/Overlay.js

@@ -488,7 +488,7 @@ class Overlay extends BaseObject {
       return;
     }
 
-    const pixel = map.getPixelFromCoordinateInternal(position);
+    const pixel = map.getPixelFromCoordinate(position);
     const mapSize = map.getSize();
     this.updateRenderedPosition(pixel, mapSize);
   }

src/ol/PluggableMap.js

@@ -546,7 +546,7 @@ class PluggableMap extends BaseObject {
     if (!this.frameState_) {
       return;
     }
-    const coordinate = this.getCoordinateFromPixel(pixel);
+    const coordinate = this.getCoordinateFromPixelInternal(pixel);
     opt_options = opt_options !== undefined ? opt_options :
       /** @type {AtPixelOptions} */ ({});
     const hitTolerance = opt_options.hitTolerance !== undefined ?
@@ -618,7 +618,7 @@ class PluggableMap extends BaseObject {
     if (!this.frameState_) {
       return false;
     }
-    const coordinate = this.getCoordinateFromPixel(pixel);
+    const coordinate = this.getCoordinateFromPixelInternal(pixel);
     opt_options = opt_options !== undefined ? opt_options :
       /** @type {AtPixelOptions} */ ({});
     const layerFilter = opt_options.layerFilter !== undefined ? opt_options.layerFilter : TRUE;

src/ol/render/canvas/Builder.js

@@ -206,7 +206,7 @@ class CanvasBuilder extends VectorContext {
    * @inheritDoc.
    */
   drawCustom(geometry, feature, renderer) {
-    this.beginGeometry(feature);
+    this.beginGeometry(geometry, feature);
     const type = geometry.getType();
     const stride = geometry.getStride();
     const builderBegin = this.coordinates.length;
@@ -253,12 +253,14 @@ class CanvasBuilder extends VectorContext {
 
   /**
    * @protected
+   * @param {import("../../geom/Geometry").default|import("../Feature.js").default} geometry The geometry.
    * @param {import("../../Feature.js").FeatureLike} feature Feature.
    */
-  beginGeometry(feature) {
-    this.beginGeometryInstruction1_ = [CanvasInstruction.BEGIN_GEOMETRY, feature, 0];
+  beginGeometry(geometry, feature) {
+    const extent = geometry.getExtent();
+    this.beginGeometryInstruction1_ = [CanvasInstruction.BEGIN_GEOMETRY, feature, 0, extent];
     this.instructions.push(this.beginGeometryInstruction1_);
-    this.beginGeometryInstruction2_ = [CanvasInstruction.BEGIN_GEOMETRY, feature, 0];
+    this.beginGeometryInstruction2_ = [CanvasInstruction.BEGIN_GEOMETRY, feature, 0, extent];
     this.hitDetectionInstructions.push(this.beginGeometryInstruction2_);
   }
 

src/ol/render/canvas/Executor.js

@@ -556,8 +556,7 @@ class Executor extends Disposable {
       switch (type) {
         case CanvasInstruction.BEGIN_GEOMETRY:
           feature = /** @type {import("../../Feature.js").FeatureLike} */ (instruction[1]);
-          if (opt_hitExtent !== undefined && !intersects(
-            opt_hitExtent, feature.getGeometry().getExtent())) {
+          if (opt_hitExtent !== undefined && !intersects(opt_hitExtent, instruction[3])) {
             i = /** @type {number} */ (instruction[2]) + 1;
           } else {
             ++i;

src/ol/render/canvas/ImageBuilder.js

@@ -113,7 +113,7 @@ class CanvasImageBuilder extends CanvasBuilder {
     if (!this.image_) {
       return;
     }
-    this.beginGeometry(feature);
+    this.beginGeometry(pointGeometry, feature);
     const flatCoordinates = pointGeometry.getFlatCoordinates();
     const stride = pointGeometry.getStride();
     const myBegin = this.coordinates.length;
@@ -142,7 +142,7 @@ class CanvasImageBuilder extends CanvasBuilder {
     if (!this.image_) {
       return;
     }
-    this.beginGeometry(feature);
+    this.beginGeometry(multiPointGeometry, feature);
     const flatCoordinates = multiPointGeometry.getFlatCoordinates();
     const stride = multiPointGeometry.getStride();
     const myBegin = this.coordinates.length;

src/ol/render/canvas/LineStringBuilder.js

@@ -44,7 +44,7 @@ class CanvasLineStringBuilder extends CanvasBuilder {
       return;
     }
     this.updateStrokeStyle(state, this.applyStroke);
-    this.beginGeometry(feature);
+    this.beginGeometry(lineStringGeometry, feature);
     this.hitDetectionInstructions.push([
       CanvasInstruction.SET_STROKE_STYLE,
       state.strokeStyle, state.lineWidth, state.lineCap, state.lineJoin,
@@ -68,7 +68,7 @@ class CanvasLineStringBuilder extends CanvasBuilder {
       return;
     }
     this.updateStrokeStyle(state, this.applyStroke);
-    this.beginGeometry(feature);
+    this.beginGeometry(multiLineStringGeometry, feature);
     this.hitDetectionInstructions.push([
       CanvasInstruction.SET_STROKE_STYLE,
       state.strokeStyle, state.lineWidth, state.lineCap, state.lineJoin,

src/ol/render/canvas/PolygonBuilder.js

@@ -72,7 +72,7 @@ class CanvasPolygonBuilder extends CanvasBuilder {
       return;
     }
     this.setFillStrokeStyles_();
-    this.beginGeometry(feature);
+    this.beginGeometry(circleGeometry, feature);
     if (state.fillStyle !== undefined) {
       this.hitDetectionInstructions.push([
         CanvasInstruction.SET_FILL_STYLE,
@@ -116,7 +116,7 @@ class CanvasPolygonBuilder extends CanvasBuilder {
       return;
     }
     this.setFillStrokeStyles_();
-    this.beginGeometry(feature);
+    this.beginGeometry(polygonGeometry, feature);
     if (state.fillStyle !== undefined) {
       this.hitDetectionInstructions.push([
         CanvasInstruction.SET_FILL_STYLE,
@@ -148,7 +148,7 @@ class CanvasPolygonBuilder extends CanvasBuilder {
       return;
     }
     this.setFillStrokeStyles_();
-    this.beginGeometry(feature);
+    this.beginGeometry(multiPolygonGeometry, feature);
     if (state.fillStyle !== undefined) {
       this.hitDetectionInstructions.push([
         CanvasInstruction.SET_FILL_STYLE,

src/ol/render/canvas/TextBuilder.js

@@ -184,7 +184,7 @@ class CanvasTextBuilder extends CanvasBuilder {
           ends.push(endss[i][0]);
         }
       }
-      this.beginGeometry(feature);
+      this.beginGeometry(geometry, feature);
       const textAlign = textState.textAlign;
       let flatOffset = 0;
       let flatEnd;
@@ -270,7 +270,7 @@ class CanvasTextBuilder extends CanvasBuilder {
         }
       }
 
-      this.beginGeometry(feature);
+      this.beginGeometry(geometry, feature);
 
       // The image is unknown at this stage so we pass null; it will be computed at render time.
       // For clarity, we pass NaN for offsetX, offsetY, width and height, which will be computed at