Merge pull request #3706 from plotly/geo-grid-fixes

Geo grid fixes

Author: etpinard

src/plots/geo/geo.js

@@ -314,7 +314,7 @@ proto.updateBaseLayers = function(fullLayout, geoLayout) {
         } else if(isLineLayer(d) || isFillLayer(d)) {
             path.datum(topojsonFeature(topojson, topojson.objects[d]));
         } else if(isAxisLayer(d)) {
-            path.datum(makeGraticule(d, geoLayout))
+            path.datum(makeGraticule(d, geoLayout, fullLayout))
                 .call(Color.stroke, geoLayout[d].gridcolor)
                 .call(Drawing.dashLine, '', geoLayout[d].gridwidth);
         }
@@ -660,20 +660,58 @@ function getProjection(geoLayout) {
     return projection;
 }
 
-function makeGraticule(axisName, geoLayout) {
-    var axisLayout = geoLayout[axisName];
-    var dtick = axisLayout.dtick;
+function makeGraticule(axisName, geoLayout, fullLayout) {
+    // equivalent to the d3 "ε"
+    var epsilon = 1e-6;
+    // same as the geoGraticule default
+    var precision = 2.5;
+
+    var axLayout = geoLayout[axisName];
     var scopeDefaults = constants.scopeDefaults[geoLayout.scope];
-    var lonaxisRange = scopeDefaults.lonaxisRange;
-    var lataxisRange = scopeDefaults.lataxisRange;
-    var step = axisName === 'lonaxis' ? [dtick] : [0, dtick];
-
-    return d3.geo.graticule()
-        .extent([
-            [lonaxisRange[0], lataxisRange[0]],
-            [lonaxisRange[1], lataxisRange[1]]
-        ])
-        .step(step);
+    var rng;
+    var oppRng;
+    var coordFn;
+
+    if(axisName === 'lonaxis') {
+        rng = scopeDefaults.lonaxisRange;
+        oppRng = scopeDefaults.lataxisRange;
+        coordFn = function(v, l) { return [v, l]; };
+    } else if(axisName === 'lataxis') {
+        rng = scopeDefaults.lataxisRange;
+        oppRng = scopeDefaults.lonaxisRange;
+        coordFn = function(v, l) { return [l, v]; };
+    }
+
+    var dummyAx = {
+        type: 'linear',
+        range: [rng[0], rng[1] - epsilon],
+        tick0: axLayout.tick0,
+        dtick: axLayout.dtick
+    };
+
+    Axes.setConvert(dummyAx, fullLayout);
+    var vals = Axes.calcTicks(dummyAx);
+
+    // remove duplicate on antimeridian
+    if(!geoLayout.isScoped && axisName === 'lonaxis') {
+        vals.pop();
+    }
+
+    var len = vals.length;
+    var coords = new Array(len);
+
+    for(var i = 0; i < len; i++) {
+        var v = vals[i].x;
+        var line = coords[i] = [];
+        for(var l = oppRng[0]; l < oppRng[1] + precision; l += precision) {
+            line.push(coordFn(v, l));
+        }
+    }
+
+    return {
+        type: 'MultiLineString',
+        coordinates: coords
+    };
 }
 
 // Returns polygon GeoJSON corresponding to lon/lat range box

src/plots/geo/index.js

@@ -6,30 +6,33 @@
 * LICENSE file in the root directory of this source tree.
 */
 
-
 'use strict';
 
-var createGeo = require('./geo');
 var getSubplotCalcData = require('../../plots/get_data').getSubplotCalcData;
 var counterRegex = require('../../lib').counterRegex;
 
-var GEO = 'geo';
-
-exports.name = GEO;
-
-exports.attr = GEO;
-
-exports.idRoot = GEO;
-
-exports.idRegex = exports.attrRegex = counterRegex(GEO);
-
-exports.attributes = require('./layout/attributes');
-
-exports.layoutAttributes = require('./layout/layout_attributes');
+var createGeo = require('./geo');
 
-exports.supplyLayoutDefaults = require('./layout/defaults');
+var GEO = 'geo';
+var counter = counterRegex(GEO);
+
+var attributes = {};
+attributes[GEO] = {
+    valType: 'subplotid',
+    role: 'info',
+    dflt: GEO,
+    editType: 'calc',
+    description: [
+        'Sets a reference between this trace\'s geospatial coordinates and',
+        'a geographic map.',
+        'If *geo* (the default value), the geospatial coordinates refer to',
+        '`layout.geo`.',
+        'If *geo2*, the geospatial coordinates refer to `layout.geo2`,',
+        'and so on.'
+    ].join(' ')
+};
 
-exports.plot = function plotGeo(gd) {
+function plotGeo(gd) {
     var fullLayout = gd._fullLayout;
     var calcData = gd.calcdata;
     var geoIds = fullLayout._subplots[GEO];
@@ -62,9 +65,9 @@ exports.plot = function plotGeo(gd) {
 
         geo.plot(geoCalcData, fullLayout, gd._promises);
     }
-};
+}
 
-exports.clean = function(newFullData, newFullLayout, oldFullData, oldFullLayout) {
+function clean(newFullData, newFullLayout, oldFullData, oldFullLayout) {
     var oldGeoKeys = oldFullLayout._subplots[GEO] || [];
 
     for(var i = 0; i < oldGeoKeys.length; i++) {
@@ -76,9 +79,9 @@ exports.clean = function(newFullData, newFullLayout, oldFullData, oldFullLayout)
             oldGeo.clipDef.remove();
         }
     }
-};
+}
 
-exports.updateFx = function(gd) {
+function updateFx(gd) {
     var fullLayout = gd._fullLayout;
     var subplotIds = fullLayout._subplots[GEO];
 
@@ -87,4 +90,18 @@ exports.updateFx = function(gd) {
         var subplotObj = subplotLayout._subplot;
         subplotObj.updateFx(fullLayout, subplotLayout);
     }
+}
+
+module.exports = {
+    attr: GEO,
+    name: GEO,
+    idRoot: GEO,
+    idRegex: counter,
+    attrRegex: counter,
+    attributes: attributes,
+    layoutAttributes: require('./layout_attributes'),
+    supplyLayoutDefaults: require('./layout_defaults'),
+    plot: plotGeo,
+    updateFx: updateFx,
+    clean: clean
 };

src/plots/geo/layout/attributes.js

@@ -8,10 +8,10 @@
 
 'use strict';
 
-var colorAttrs = require('../../../components/color/attributes');
-var domainAttrs = require('../../domain').attributes;
-var constants = require('../constants');
-var overrideAll = require('../../../plot_api/edit_types').overrideAll;
+var colorAttrs = require('../../components/color/attributes');
+var domainAttrs = require('../domain').attributes;
+var constants = require('./constants');
+var overrideAll = require('../../plot_api/edit_types').overrideAll;
 
 var geoAxesAttrs = {
     range: {
@@ -35,6 +35,7 @@ var geoAxesAttrs = {
     tick0: {
         valType: 'number',
         role: 'info',
+        dflt: 0,
         description: [
             'Sets the graticule\'s starting tick longitude/latitude.'
         ].join(' ')

src/plots/geo/layout/layout_attributes.js renamed to src/plots/geo/layout_attributes.js

@@ -9,8 +9,8 @@
 
 'use strict';
 
-var handleSubplotDefaults = require('../../subplot_defaults');
-var constants = require('../constants');
+var handleSubplotDefaults = require('../subplot_defaults');
+var constants = require('./constants');
 var layoutAttributes = require('./layout_attributes');
 
 var axesNames = constants.axesNames;
@@ -58,9 +58,8 @@ function handleGeoDefaults(geoLayoutIn, geoLayoutOut, coerce) {
             rangeDflt = [rot - hSpan, rot + hSpan];
         }
 
-        var range = coerce(axisName + '.range', rangeDflt);
-
-        coerce(axisName + '.tick0', range[0]);
+        coerce(axisName + '.range', rangeDflt);
+        coerce(axisName + '.tick0');
         coerce(axisName + '.dtick', dtickDflt);
 
         show = coerce(axisName + '.showgrid');

src/plots/geo/layout/defaults.js renamed to src/plots/geo/layout_defaults.js

@@ -72,10 +72,7 @@
             },
             "lataxis": {
                 "showgrid": true,
-                "range": [
-                    -75,
-                    85
-                ],
+                "range": [ -75, 85 ],
                 "gridwidth": 2,
                 "gridcolor": "black"
             }

test/image/baselines/geo_across-antimeridian.png

@@ -0,0 +1,72 @@
+{
+  "data": [
+    {"type": "scattergeo", "lon": [5], "lat": [2], "name": "lonaxis.tick0: 5 | lataxis.tick0: 2"},
+    {"type": "scattergeo", "lon": [10], "lat": [1], "name": "lonaxis.tick0: 10 | lataxis.tick0: 1", "geo": "geo2"},
+    {"type": "scattergeo", "lon": [40], "lat": [-40], "name": "lonaxis.tick0: 40 | lataxis.tick0: -40", "geo": "geo3"},
+    {"type": "scattergeo", "lon": [73], "lat": [45], "name": "lonaxis.tick0: 73 | lataxis.tick0: 45", "geo": "geo4"}
+  ],
+  "layout": {
+    "legend": {
+      "x": -0.05,
+      "xanchor": "right",
+      "y": 0.5,
+      "yanchor": "middle"
+    },
+    "grid": {"columns": 2, "rows": 2},
+    "geo": {
+      "domain": {"row": 0, "column": 0},
+      "lonaxis": {
+        "showgrid": true,
+        "gridcolor": "#444",
+        "tick0": 5
+      },
+      "lataxis": {
+        "showgrid": true,
+        "gridcolor": "#444",
+        "tick0": 2
+      }
+    },
+    "geo2": {
+      "domain": {"row": 0, "column": 1},
+      "lonaxis": {
+        "showgrid": true,
+        "gridcolor": "#444",
+        "tick0": 10
+      },
+      "lataxis": {
+        "showgrid": true,
+        "gridcolor": "#444",
+        "tick0": 1
+      }
+    },
+    "geo3": {
+      "domain": {"row": 1, "column": 0},
+      "lonaxis": {
+        "showgrid": true,
+        "gridcolor": "#444",
+        "tick0": 40
+      },
+      "lataxis": {
+        "showgrid": true,
+        "gridcolor": "#444",
+        "tick0": -40
+      }
+    },
+    "geo4": {
+      "domain": {"row": 1, "column": 1},
+      "lonaxis": {
+        "showgrid": true,
+        "gridcolor": "#444",
+        "tick0": 73
+      },
+      "lataxis": {
+        "showgrid": true,
+        "gridcolor": "#444",
+        "tick0": 45
+      }
+    },
+    "margin": {"t": 10, "b": 10},
+    "width": 1100,
+    "height": 400
+  }
+}