misc fixups:

etpinard · etpinard · commit 2c4973368b61 · 2016-05-20T11:10:07.000-04:00
- got map to resize on 'domain' relayout calls
- got deleteTrace to work
- got the hasMarkers legend item to display properly
- got rid of some console errors upon trace toggle
- got Mapbox to update user layout on pan/zoom
diff --git a/src/plots/mapbox/layout_defaults.js b/src/plots/mapbox/layout_defaults.js
@@ -27,4 +27,6 @@ function handleDefaults(containerIn, containerOut, coerce) {
     coerce('center.lon');
     coerce('center.lat');
     coerce('zoom');
+
+    containerOut._input = containerIn;
 }
diff --git a/src/plots/mapbox/mapbox.js b/src/plots/mapbox/mapbox.js
@@ -12,21 +12,22 @@
 var mapboxgl = require('mapbox-gl');
 
 var constants = require('./constants');
+var xmlnsNamespaces = require('../../constants/xmlns_namespaces');
 
 
 function Mapbox(opts) {
     this.id = opts.id;
     this.gd = opts.gd;
     this.container = opts.container;
-    var fullLayout = this.fullLayout = opts.fullLayout;
 
-    this.uid = this.fullLayout._uid + '-' + this.id;
-    this.opts = this.fullLayout[this.id];
-    this.userOpts = this.gd.layout[this.id] || {};
+    var fullLayout = opts.fullLayout;
+    this.uid = fullLayout._uid + '-' + this.id;
+    this.opts = fullLayout[this.id];
 
-    // create div on instantiation for smoother first plot call
-    this.div = this.createDiv();
-    this.updateDiv(fullLayout);
+    // create div on instantiation for a smoother first plot call
+    this.div = null;
+    this.hoverLayer = null;
+    this.createFramework(fullLayout);
 
     this.map = null;
     this.traceHash = {};
@@ -42,8 +43,11 @@ module.exports = function createMapbox(opts) {
 
 proto.plot = function(fullData, fullLayout, promises) {
     var self = this;
-    var promise;
 
+    // feed in new mapbox options
+    self.opts = fullLayout[this.id];
+
+    var promise;
     // might want to use map.loaded() ???
 
     // how to get streaming to work ???
@@ -63,8 +67,8 @@ proto.plot = function(fullData, fullLayout, promises) {
 };
 
 proto.createMap = function(fullData, fullLayout, resolve) {
-    var self = this;
-    var opts = self.opts;
+    var self = this,
+        opts = this.opts;
 
     var map = self.map = new mapboxgl.Map({
         container: self.uid,
@@ -84,30 +88,33 @@ proto.createMap = function(fullData, fullLayout, resolve) {
         // hover code goes here !!!
     });
 
-    // TODO is that enough to keep layout and fullLayout in sync ???
-    map.on('move', function(eventData) {
-        map.getCenter();
-        map.getZoom();
+    // keep track of pan / zoom in user layout
+    map.on('move', function() {
+        var center = map.getCenter();
+        opts._input.center = opts.center = { lon: center.lng, lat: center.lat };
+        opts._input.zoom = opts.zoom = map.getZoom();
     });
 
 };
 
 proto.updateMap = function(fullData, fullLayout, resolve) {
     var self = this,
-        map = self.map,
-        opts = fullLayout[self.id];
+        map = self.map;
 
     var currentStyle = self.getStyle(),
-        style = opts.style;
+        style = self.opts.style;
 
     if(style !== currentStyle) {
         console.log('reload style')
         map.setStyle(convertStyleUrl(style));
 
         map.style.once('load', function() {
             console.log('on style reload')
-            // ...
+
+            // need to rebuild trace layers on reload
+            // to avoid 'lost event' errors
             self.traceHash = {};
+
             self.updateData(fullData);
             self.updateLayout(fullLayout);
             resolve();
@@ -153,41 +160,53 @@ proto.updateData = function(fullData) {
 };
 
 proto.updateLayout = function(fullLayout) {
-    var opts = fullLayout[this.id],
-        map = this.map;
+    var map = this.map,
+        opts = this.opts;
 
     map.setCenter(convertCenter(opts.center));
     map.setZoom(opts.zoom);
 
-    this.updateDiv(fullLayout)
-//     resize()
+
+    this.updateFramework(fullLayout)
+    this.map.resize();
 };
 
-proto.createDiv = function() {
-    var div = document.createElement('div');
-    this.container.appendChild(div);
+proto.createFramework = function(fullLayout) {
+    var div = this.div = document.createElement('div');
 
     div.id = this.uid;
     div.style.position = 'absolute';
 
-    return div;
-};
+    var hoverLayer = this.hoverLayer = document.createElementNS(
+        xmlnsNamespaces.svg, 'svg'
+    );
+
+    var hoverStyle = hoverLayer.style;
 
-proto.updateDiv = function(fullLayout) {
-    var div = this.div;
+    hoverStyle.position = 'absolute';
+    hoverStyle.top = hoverStyle.left = '0px';
+    hoverStyle.width = hoverStyle.height = '100%';
+    hoverStyle['z-index'] = 20;
+    hoverStyle['pointer-events'] = 'none';
 
+    this.container.appendChild(div);
+    this.container.appendChild(hoverLayer);
+
+    this.updateFramework(fullLayout);
+};
+
+proto.updateFramework = function(fullLayout) {
     var domain = fullLayout[this.id].domain,
-        size = fullLayout._size,
-        style = div.style;
+        size = fullLayout._size;
+
+    var style = this.div.style;
+
+    // Is this correct? It seems to get the map zoom level wrong?
 
-    style.left = size.l + domain.x[0] * size.w + 'px';
-    style.top = size.t + (1 - domain.y[1]) * size.h + 'px';
     style.width = size.w * (domain.x[1] - domain.x[0]) + 'px';
     style.height = size.h * (domain.y[1] - domain.y[0]) + 'px';
-
-//     style.top = 0;
-//     style.bottom = 0;
-//     style.width = '100%';
+    style.left = size.l + domain.x[0] * size.w + 'px';
+    style.top = size.t + (1 - domain.y[1]) * size.h + 'px';
 };
 
 proto.destroy = function() {
diff --git a/src/traces/scattermapbox/index.js b/src/traces/scattermapbox/index.js
@@ -27,14 +27,14 @@ ScatterMapbox.plot = require('./plot');
 ScatterMapbox.moduleType = 'trace';
 ScatterMapbox.name = 'scattermapbox';
 ScatterMapbox.basePlotModule = require('../../plots/mapbox');
-ScatterMapbox.categories = ['mapbox', 'gl', 'markerColorscale', 'showLegend'];
+ScatterMapbox.categories = ['mapbox', 'gl', 'symbols', 'showLegend'];
+// ScatterMapbox.categories = ['mapbox', 'gl', 'symbols', 'markerColorscale', 'showLegend'];
 ScatterMapbox.meta = {
     hrName: 'scatter_mapbox',
     description: [
         'The data visualized as scatter point or lines',
         'on a Mapbox GL geographic map',
-        'is provided either by longitude/latitude pairs in `lon` and `lat`',
-        'respectively or by geographic location IDs or names in `locations`.'
+        'is provided by longitude/latitude pairs in `lon` and `lat`.'
     ].join(' ')
 };
 
diff --git a/src/traces/scattermapbox/plot.js b/src/traces/scattermapbox/plot.js
@@ -52,21 +52,27 @@ proto.update = function update(trace) {
 
     console.log('scatter update');
 
-    this.sourceLines.setData(opts.geojsonLines);
     setOptions(this.map, this.idLayerLines, 'setLayoutProperty', opts.layoutLines);
-    setOptions(this.map, this.idLayerLines, 'setPaintProperty', opts.paintLines);
-
-    this.sourceMarkers.setData(opts.geojsonMarkers);
     setOptions(this.map, this.idLayerMarkers, 'setLayoutProperty', opts.layoutMarkers);
-    setOptions(this.map, this.idLayerMarkers, 'setPaintProperty', opts.paintMarkers);
+
+    if(opts.layoutLines.visibility === 'visible') {
+        this.sourceLines.setData(opts.geojsonLines);
+        setOptions(this.map, this.idLayerLines, 'setPaintProperty', opts.paintLines);
+    }
+
+    if(opts.layoutMarkers.visibility === 'visible') {
+        this.sourceMarkers.setData(opts.geojsonMarkers);
+        setOptions(this.map, this.idLayerMarkers, 'setPaintProperty', opts.paintMarkers);
+    }
 };
 
 proto.dispose = function dispose() {
-    this.removeLayer(this.idLayerMarkers);
-    this.removeSource(this.idSourceMarkers);
+    var map = this.map;
 
-    this.removeLayer(this.idLayerLines);
-    this.removeSource(this.idSourceLines);
+    map.removeLayer(this.idLayerMarkers);
+    map.removeSource(this.idSourceMarkers);
+    map.removeLayer(this.idLayerLines);
+    map.removeSource(this.idSourceLines);
 };
 
 function setOptions(map, id, methodName, opts) {

Original file line number	Diff line number	Diff line change
`@@ -27,4 +27,6 @@ function handleDefaults(containerIn, containerOut, coerce) {`
`27`	`27`	`coerce('center.lon');`
`28`	`28`	`coerce('center.lat');`
`29`	`29`	`coerce('zoom');`
	`30`	`+`
	`31`	`+ containerOut._input = containerIn;`
`30`	`32`	`}`