From e493bb4c64693b0c5b1bc6baef57abe338bee3bd Mon Sep 17 00:00:00 2001
From: Bryan Housel <bryan@mapbox.com>
Date: Wed, 13 Jun 2018 15:00:05 -0400
Subject: [PATCH] Reset marker for panoramic/viewfield when switching steetview
 layer

---
 modules/services/mapillary.js     | 13 +++++++++++++
 modules/services/openstreetcam.js | 13 +++++++++++++
 modules/services/streetside.js    | 15 ++++++++++++++-
 modules/svg/streetside.js         | 28 +++++++++++-----------------
 4 files changed, 51 insertions(+), 18 deletions(-)

diff --git a/modules/services/mapillary.js b/modules/services/mapillary.js
index db31b56a0..bc9c96622 100644
--- a/modules/services/mapillary.js
+++ b/modules/services/mapillary.js
@@ -683,6 +683,19 @@ export default {
             .classed('highlighted', function(d) { return d.properties.key === hoveredSequenceKey; })
             .classed('selected', function(d) { return d.properties.key === selectedSequenceKey; });
 
+        // update viewfields if needed
+        d3_selectAll('.viewfield-group .viewfield')
+            .attr('d', viewfieldPath);
+
+        function viewfieldPath() {
+            var d = this.parentNode.__data__;
+            if (d.pano && d.key !== selectedImageKey) {
+                return 'M 8,13 m -10,0 a 10,10 0 1,0 20,0 a 10,10 0 1,0 -20,0';
+            } else {
+                return 'M 6,9 C 8,8.4 8,8.4 10,9 L 16,-2 C 12,-5 4,-5 0,-2 z';
+            }
+        }
+
         return this;
     },
 
diff --git a/modules/services/openstreetcam.js b/modules/services/openstreetcam.js
index 3579e658b..271fee008 100644
--- a/modules/services/openstreetcam.js
+++ b/modules/services/openstreetcam.js
@@ -573,6 +573,19 @@ export default {
             .classed('highlighted', function(d) { return d.properties.key === hoveredSequenceKey; })
             .classed('selected', function(d) { return d.properties.key === selectedSequenceKey; });
 
+        // update viewfields if needed
+        d3_selectAll('.viewfield-group .viewfield')
+            .attr('d', viewfieldPath);
+
+        function viewfieldPath() {
+            var d = this.parentNode.__data__;
+            if (d.pano && d.key !== selectedImageKey) {
+                return 'M 8,13 m -10,0 a 10,10 0 1,0 20,0 a 10,10 0 1,0 -20,0';
+            } else {
+                return 'M 6,9 C 8,8.4 8,8.4 10,9 L 16,-2 C 12,-5 4,-5 0,-2 z';
+            }
+        }
+
         return this;
     },
 
diff --git a/modules/services/streetside.js b/modules/services/streetside.js
index b3e8b6ade..bedef4a91 100644
--- a/modules/services/streetside.js
+++ b/modules/services/streetside.js
@@ -370,7 +370,7 @@ export default {
     },
 
 
-    initViewer: function (context) {
+    initViewer: function () {
         if (!window.pannellum) return;
         if (_pannellumViewer) return;
 
@@ -623,6 +623,19 @@ export default {
             .classed('highlighted', function (d) { return d.properties.key === hoveredSequenceKey; })
             .classed('selected', function (d) { return d.properties.key === selectedSequenceKey; });
 
+        // update viewfields if needed
+        d3_selectAll('.viewfield-group .viewfield')
+            .attr('d', viewfieldPath);
+
+        function viewfieldPath() {
+            var d = this.parentNode.__data__;
+            if (d.pano && d.key !== selectedBubbleKey) {
+                return 'M 8,13 m -10,0 a 10,10 0 1,0 20,0 a 10,10 0 1,0 -20,0';
+            } else {
+                return 'M 6,9 C 8,8.4 8,8.4 10,9 L 16,-2 C 12,-5 4,-5 0,-2 z';
+            }
+        }
+
         return this;
     },
 
diff --git a/modules/svg/streetside.js b/modules/svg/streetside.js
index c3d541797..2d6b8a066 100644
--- a/modules/svg/streetside.js
+++ b/modules/svg/streetside.js
@@ -98,18 +98,10 @@ export function svgStreetside(projection, context, dispatch) {
 
         _viewerYaw = 0;
 
-        // reset bubble back to a circular field
-        layer.selectAll('.viewfield-group.selected .viewfield')
-            .attr('d', viewfieldPath);
-
         service
             .selectImage(d)
             .showViewer();
 
-        // show selected bubble with a viewfield
-        layer.selectAll('.viewfield-group.selected .viewfield')
-            .attr('d', 'M 6,9 C 8,8.4 8,8.4 10,9 L 16,-2 C 12,-5 4,-5 0,-2 z');
-
         context.map().centerEase(d.loc);
     }
 
@@ -237,6 +229,17 @@ export function svgStreetside(projection, context, dispatch) {
             .attr('class', 'viewfield')
             .attr('transform', 'scale(1.5,1.5),translate(-8, -13)')
             .attr('d', viewfieldPath);
+
+
+        function viewfieldPath() {
+            var d = this.parentNode.__data__;
+            if (d.pano) {
+                return 'M 8,13 m -10,0 a 10,10 0 1,0 20,0 a 10,10 0 1,0 -20,0';
+            } else {
+                return 'M 6,9 C 8,8.4 8,8.4 10,9 L 16,-2 C 12,-5 4,-5 0,-2 z';
+            }
+        }
+
     }
 
     /**
@@ -283,15 +286,6 @@ export function svgStreetside(projection, context, dispatch) {
     }
 
 
-    function viewfieldPath() {
-        var d = this.parentNode.__data__;
-        if (d.pano) {
-            return 'M 8,13 m -10,0 a 10,10 0 1,0 20,0 a 10,10 0 1,0 -20,0';
-        } else {
-            return 'M 6,9 C 8,8.4 8,8.4 10,9 L 16,-2 C 12,-5 4,-5 0,-2 z';
-        }
-    }
-
     /**
      * drawImages.enabled().
      */