add geo.project and use that in scattergeo hover

... to not confuse positions on either side of the globe

Author: etpinard

src/plots/geo/geo.js

@@ -447,18 +447,22 @@ proto.makeFramework = function() {
         .attr('class', 'geo ' + _this.id)
         .call(Drawing.setClipUrl, clipId);
 
+    // sane lonlat to px
+    _this.project = function(v) {
+        var px = _this.projection(v);
+        return px ?
+            [px[0] - _this.xaxis._offset, px[1] - _this.yaxis._offset] :
+            [null, null];
+    };
+
     _this.xaxis = {
         _id: 'x',
-        c2p: function(v) {
-            return (_this.projection(v) || [])[0] - _this.xaxis._offset;
-        }
+        c2p: function(v) { return _this.project(v)[0]; }
     };
 
     _this.yaxis = {
         _id: 'y',
-        c2p: function(v) {
-            return (_this.projection(v) || [])[1] - _this.yaxis._offset;
-        }
+        c2p: function(v) { return _this.project(v)[1]; }
     };
 
     // mock axis for hover formatting

src/traces/scattergeo/hover.js

@@ -18,22 +18,25 @@ var attributes = require('./attributes');
 
 
 module.exports = function hoverPoints(pointData, xval, yval) {
-    var cd = pointData.cd,
-        trace = cd[0].trace,
-        xa = pointData.xa,
-        ya = pointData.ya,
-        geo = pointData.subplot,
-        projection = geo.projection;
+    var cd = pointData.cd;
+    var trace = cd[0].trace;
+    var xa = pointData.xa;
+    var ya = pointData.ya;
+    var geo = pointData.subplot;
+
+    var isLonLatOverEdges = geo.projection.isLonLatOverEdges;
+    var project = geo.project;
 
     function distFn(d) {
         var lonlat = d.lonlat;
 
         if(lonlat[0] === BADNUM) return Infinity;
-        if(projection.isLonLatOverEdges(lonlat)) return Infinity;
-
-        var dx = Math.abs(xa.c2p(lonlat) - xa.c2p([xval, lonlat[1]]));
-        var dy = Math.abs(ya.c2p(lonlat) - ya.c2p([lonlat[0], yval]));
+        if(isLonLatOverEdges(lonlat)) return Infinity;
 
+        var pt = project(lonlat);
+        var px = project([xval, yval]);
+        var dx = Math.abs(pt[0] - px[0]);
+        var dy = Math.abs(pt[1] - px[1]);
         var rad = Math.max(3, d.mrc || 0);
 
         // N.B. d.mrc is the calculated marker radius
@@ -47,10 +50,10 @@ module.exports = function hoverPoints(pointData, xval, yval) {
     // skip the rest (for this trace) if we didn't find a close point
     if(pointData.index === false) return;
 
-    var di = cd[pointData.index],
-        lonlat = di.lonlat,
-        pos = [xa.c2p(lonlat), ya.c2p(lonlat)],
-        rad = di.mrc || 1;
+    var di = cd[pointData.index];
+    var lonlat = di.lonlat;
+    var pos = [xa.c2p(lonlat), ya.c2p(lonlat)];
+    var rad = di.mrc || 1;
 
     pointData.x0 = pos[0] - rad;
     pointData.x1 = pos[0] + rad;

test/jasmine/tests/geo_test.js

@@ -1202,6 +1202,35 @@ describe('Test geo interactions', function() {
         .then(done);
     });
 
+    it('should not confuse positions on either side of the globe', function(done) {
+        var gd = createGraphDiv();
+        var fig = Lib.extendDeep({}, require('@mocks/geo_orthographic.json'));
+
+        fig.data[0].visible = false;
+        fig.layout.geo.projection.rotation = {lon: -75, lat: 90};
+
+        function check(p, hoverLabelCnt) {
+            mouseEvent('mousemove', p[0], p[1]);
+
+            var invert = gd._fullLayout.geo._subplot.projection.invert;
+            var lonlat = invert(p);
+
+            expect(d3.selectAll('g.hovertext').size())
+                .toBe(hoverLabelCnt, 'for ' + lonlat);
+
+            delete gd._lastHoverTime;
+        }
+
+        Plotly.plot(gd, fig).then(function() {
+            var px = 255;
+
+            check([px, 163], 0);
+            check([px, 360], 1);
+        })
+        .catch(fail)
+        .then(done);
+    });
+
 });
 
 describe('Test event property of interactions on a geo plot:', function() {