Add coordinates of mapbox view as a derived property in plotly_relayout events

Author: jonmmease

src/plots/mapbox/mapbox.js

@@ -135,7 +135,7 @@ proto.createMap = function(calcData, fullLayout, resolve, reject) {
     Promise.all(promises).then(function() {
         self.fillBelowLookup(calcData, fullLayout);
         self.updateData(calcData);
-        self.updateLayout(fullLayout);
+        self.updateLayout(fullLayout, true);
         self.resolveOnRender(resolve);
     }).catch(reject);
 };
@@ -346,7 +346,7 @@ proto.updateData = function(calcData) {
     }
 };
 
-proto.updateLayout = function(fullLayout) {
+proto.updateLayout = function(fullLayout, initialView) {
     var map = this.map;
     var opts = fullLayout[this.id];
 
@@ -365,6 +365,11 @@ proto.updateLayout = function(fullLayout) {
     } else {
         map.scrollZoom.disable();
     }
+    if(initialView === true) {
+        // Add derived properties to viewInitial so they are included in
+        // the plotly_relayout event that is emitted when the plot is reset
+        this.viewInitial._derived = this.getView()._derived;
+    }
 };
 
 proto.resolveOnRender = function(resolve) {
@@ -747,17 +752,29 @@ proto.getView = function() {
     var mapCenter = map.getCenter();
     var center = { lon: mapCenter.lng, lat: mapCenter.lat };
 
+    var canvas = map.getCanvas();
+    var w = canvas.width;
+    var h = canvas.height;
+    var cUL = map.unproject([0, 0]).toArray();
+    var cUR = map.unproject([w, 0]).toArray();
+    var cLR = map.unproject([w, h]).toArray();
+    var cLL = map.unproject([0, h]).toArray();
+    var coordinates = [cUL, cUR, cLR, cLL];
+
     return {
         center: center,
         zoom: map.getZoom(),
         bearing: map.getBearing(),
-        pitch: map.getPitch()
+        pitch: map.getPitch(),
+        _derived: {
+            coordinates: coordinates
+        }
     };
 };
 
 proto.getViewEdits = function(cont) {
     var id = this.id;
-    var keys = ['center', 'zoom', 'bearing', 'pitch'];
+    var keys = ['center', 'zoom', 'bearing', 'pitch', '_derived'];
     var obj = {};
 
     for(var i = 0; i < keys.length; i++) {

test/jasmine/tests/mapbox_test.js

@@ -1226,11 +1226,18 @@ describe('@noCI, mapbox plots', function() {
             expect(layout.zoom).toBeCloseTo(zoom);
         }
 
-        function _assert(center, zoom) {
+        function _assert(center, zoom, lonMin, latMin, lonMax, latMax) {
             _assertLayout(center, zoom);
 
             expect([evtData['mapbox.center'].lon, evtData['mapbox.center'].lat]).toBeCloseToArray(center);
             expect(evtData['mapbox.zoom']).toBeCloseTo(zoom);
+            expect(evtData['mapbox._derived']).toEqual({
+                coordinates: [
+                    [lonMin, latMax],
+                    [lonMax, latMax],
+                    [lonMax, latMin],
+                    [lonMin, latMin]
+                ]});
         }
 
         _assertLayout([-4.710, 19.475], 1.234);
@@ -1241,15 +1248,19 @@ describe('@noCI, mapbox plots', function() {
             expect(relayoutCnt).toBe(1, 'relayout cnt');
             expect(relayoutingCnt).toBe(1, 'relayouting cnt');
             expect(doubleClickCnt).toBe(0, 'double click cnt');
-            _assert([-19.651, 13.751], 1.234);
+            _assert([-19.651, 13.751], 1.234,
+                -155.15981291032617, -25.560300274373148,
+                115.85734493011842, 47.573988219006424);
 
             return _doubleClick(p1);
         })
         .then(function() {
             expect(relayoutCnt).toBe(2, 'relayout cnt');
             expect(relayoutingCnt).toBe(1, 'relayouting cnt');
             expect(doubleClickCnt).toBe(1, 'double click cnt');
-            _assert([-4.710, 19.475], 1.234);
+            _assert([-4.710, 19.475], 1.234,
+                -140.21950652441467, -20.054298691163496,
+                130.79765131602989, 51.4513888208798);
 
             return _scroll(pointPos);
         })