Scattermapbox BADNUM (w/o upgrading mapbox-gl)

src/plots/mapbox/mapbox.js

@@ -111,10 +111,14 @@ proto.createMap = function(calcData, fullLayout, resolve, reject) {
  });
 
  // clear navigation container
- var className = constants.controlContainerClassName,
- controlContainer = self.div.getElementsByClassName(className)[0];
+ var className = constants.controlContainerClassName;
+var controlContainer = self.div.getElementsByClassName(className)[0];
  self.div.removeChild(controlContainer);
 
+ // make sure canvas does not inherit left and top css
+ map._canvas.canvas.style.left = '0px';
+ map._canvas.canvas.style.top = '0px';
+
  self.rejectOnError(reject);
 
  map.once('load', function() {
@@ -176,7 +180,6 @@ proto.createMap = function(calcData, fullLayout, resolve, reject) {
 
  map.on('dragstart', unhover);
  map.on('zoomstart', unhover);
-
 };
 
 proto.updateMap = function(calcData, fullLayout, resolve, reject) {

src/plots/plots.js

@@ -16,6 +16,7 @@ var Plotly = require('../plotly');
 var Registry = require('../registry');
 var Lib = require('../lib');
 var Color = require('../components/color');
+var BADNUM = require('../constants/numerical').BADNUM;
 
 var plots = module.exports = {};
 
@@ -2012,11 +2013,8 @@ plots.doCalcdata = function(gd, traces) {
  //
  // This ensures there is a calcdata item for every trace,
  // even if cartesian logic doesn't handle it (for things like legends).
- //
- // Tag this artificial calc point with 'placeholder: true',
- // to make it easier to skip over them in during the plot and hover step.
  if(!Array.isArray(cd) || !cd[0]) {
- cd = [{x: false, y: false, placeholder: true}];
+ cd = [{x: BADNUM, y: BADNUM}];
  }
 
  // add the trace-wide properties to the first point,

src/traces/scattermapbox/convert.js

@@ -10,8 +10,11 @@
 'use strict';
 
 var Lib = require('../../lib');
+var BADNUM = require('../../constants/numerical').BADNUM;
 var geoJsonUtils = require('../../lib/geojson_utils');
 
+var Colorscale = require('../../components/colorscale');
+var makeBubbleSizeFn = require('../scatter/make_bubble_size_func');
 var subTypes = require('../scatter/subtypes');
 var convertTextOpts = require('../../plots/mapbox/convert_text_opts');
 
@@ -43,16 +46,16 @@ module.exports = function convert(calcTrace) {
  };
 
  // early return if not visible or placeholder
- if(!isVisible || calcTrace[0].placeholder) return opts;
+ if(!isVisible) return opts;
 
  // fill layer and line layer use the same coords
- var coords;
+ var lineCoords;
  if(hasFill || hasLines) {
-coords = geoJsonUtils.calcTraceToLineCoords(calcTrace);
+lineCoords = geoJsonUtils.calcTraceToLineCoords(calcTrace);
  }
 
  if(hasFill) {
- fill.geojson = geoJsonUtils.makePolygon(coords);
+ fill.geojson = geoJsonUtils.makePolygon(lineCoords);
  fill.layout.visibility = 'visible';
 
  Lib.extendFlat(fill.paint, {
@@ -61,7 +64,7 @@ module.exports = function convert(calcTrace) {
  }
 
  if(hasLines) {
- line.geojson = geoJsonUtils.makeLine(coords);
+ line.geojson = geoJsonUtils.makeLine(lineCoords);
  line.layout.visibility = 'visible';
 
  Lib.extendFlat(line.paint, {
@@ -155,12 +158,30 @@ function initContainer() {
 //
 // The solution prove to be more robust than trying to generate
 // `stops` arrays from scale functions.
+//
+// TODO axe this when we bump mapbox-gl and rewrite this using
+// "identity" property functions.
+// See https://github.com/plotly/plotly.js/pull/1543
+//
 function makeCircleGeoJSON(calcTrace, hash) {
  var trace = calcTrace[0].trace;
+ var marker = trace.marker;
+
+ var colorFn;
+ if(Colorscale.hasColorscale(trace, 'marker')) {
+ colorFn = Colorscale.makeColorScaleFunc(
+ Colorscale.extractScale(marker.colorscale, marker.cmin, marker.cmax)
+ );
+ } else if(Array.isArray(marker.color)) {
+ colorFn = Lib.identity;
+ }
 
- var marker = trace.marker,
- hasColorArray = Array.isArray(marker.color),
- hasSizeArray = Array.isArray(marker.size);
+ var sizeFn;
+ if(subTypes.isBubble(trace)) {
+ sizeFn = makeBubbleSizeFn(trace);
+ } else if(Array.isArray(marker.size)) {
+ sizeFn = Lib.identity;
+ }
 
  // Translate vals in trace arrayOk containers
  // into a val-to-index hash object
@@ -174,16 +195,19 @@ function makeCircleGeoJSON(calcTrace, hash) {
 
  for(var i = 0; i < calcTrace.length; i++) {
  var calcPt = calcTrace[i];
+ var lonlat = calcPt.lonlat;
+
+ if(isBADNUM(lonlat)) continue;
 
  var props = {};
- if(hasColorArray) translate(props, COLOR_PROP, calcPt.mcc, i);
- if(hasSizeArray) translate(props, SIZE_PROP, calcPt.mrc, i);
+ if(colorFn) translate(props, COLOR_PROP, colorFn(calcPt.mc), i);
+ if(sizeFn) translate(props, SIZE_PROP, sizeFn(calcPt.ms), i);
 
  features.push({
  type: 'Feature',
  geometry: {
  type: 'Point',
- coordinates: calcPt.lonlat
+ coordinates: lonlat
  },
  properties: props
  });
@@ -215,6 +239,8 @@ function makeSymbolGeoJSON(calcTrace) {
  for(var i = 0; i < calcTrace.length; i++) {
  var calcPt = calcTrace[i];
 
+ if(isBADNUM(calcPt.lonlat)) continue;
+
  features.push({
  type: 'Feature',
  geometry: {
@@ -305,3 +331,8 @@ function getFillFunc(attr) {
 }
 
 function blankFillFunc() { return ''; }
+
+// only need to check lon (OR lat)
+function isBADNUM(lonlat) {
+ return lonlat[0] === BADNUM;
+}

src/traces/scattermapbox/hover.js

@@ -11,16 +11,14 @@
 
 var Fx = require('../../plots/cartesian/graph_interact');
 var getTraceColor = require('../scatter/get_trace_color');
-
+var BADNUM = require('../../constants/numerical').BADNUM;
 
 module.exports = function hoverPoints(pointData, xval, yval) {
  var cd = pointData.cd,
  trace = cd[0].trace,
  xa = pointData.xa,
  ya = pointData.ya;
 
- if(cd[0].placeholder) return;
-
  // compute winding number about [-180, 180] globe
  var winding = (xval >= 0) ?
  Math.floor((xval + 180) / 360) :
@@ -31,10 +29,13 @@ module.exports = function hoverPoints(pointData, xval, yval) {
  var xval2 = xval - lonShift;
 
  function distFn(d) {
- var lonlat = d.lonlat,
- dx = Math.abs(xa.c2p(lonlat) - xa.c2p([xval2, lonlat[1]])),
- dy = Math.abs(ya.c2p(lonlat) - ya.c2p([lonlat[0], yval])),
- rad = Math.max(3, d.mrc || 0);
+ var lonlat = d.lonlat;
+
+ if(lonlat[0] === BADNUM) return Infinity;
+
+ var dx = Math.abs(xa.c2p(lonlat) - xa.c2p([xval2, lonlat[1]]));
+ var dy = Math.abs(ya.c2p(lonlat) - ya.c2p([lonlat[0], yval]));
+ var rad = Math.max(3, d.mrc || 0);
 
  return Math.max(Math.sqrt(dx * dx + dy * dy) - rad, 1 - 3 / rad);
  }

src/traces/scattermapbox/index.js

@@ -14,7 +14,7 @@ var ScatterMapbox = {};
 ScatterMapbox.attributes = require('./attributes');
 ScatterMapbox.supplyDefaults = require('./defaults');
 ScatterMapbox.colorbar = require('../scatter/colorbar');
-ScatterMapbox.calc = require('./calc');
+ScatterMapbox.calc = require('../scattergeo/calc');
 ScatterMapbox.hoverPoints = require('./hover');
 ScatterMapbox.eventData = require('./event_data');
 ScatterMapbox.plot = require('./plot');