Start viewer with correct compass yaw, adjust viewfield as user rotates

css/60_photos.css

@@ -195,27 +195,21 @@
 
 
 /* Streetside viewer */
-#ms .domRenderer .TagSymbol {
-    font-size: 10px;
-    background-color: rgba(0,0,0,0.4);
-    padding: 0 4px;
-    border-radius: 4px;
-    top: -25px;
-}
-#ms .domRenderer .Attribution {
-    /* we will roll our own to avoid async update issues like #4526 */
-    display: none;
-}
-
 .ms-wrapper .photo-attribution a:active,
 .ms-wrapper .photo-attribution a:hover {
     color: #35af6d;
 }
 
-.ms-wrapper .mapillary-js-dom {
-    z-index: 9;
+.pnlm-compass {
+    width: 26px;
+    height: 26px;
+    left: 4px;
+    top: 60px;
+    background-size: contain;
+    background-repeat: no-repeat no-repeat;
 }
 
+
 /* Mapillary viewer */
 #mly .domRenderer .TagSymbol {
     font-size: 10px;
@@ -238,6 +232,7 @@
     z-index: 9;
 }
 
+
 /* OpenStreetCam viewer */
 .osc-wrapper {
     position: relative;

modules/services/streetside.js

@@ -3,8 +3,9 @@ import _forEach from 'lodash-es/forEach';
 import _map from 'lodash-es/map';
 import _union from 'lodash-es/union';
 
-import { range as d3_range } from 'd3-array';
 import { dispatch as d3_dispatch } from 'd3-dispatch';
+import { range as d3_range } from 'd3-array';
+import { timer as d3_timer } from 'd3-timer';
 
 import {
     select as d3_select,
@@ -312,12 +313,21 @@ export default {
         _pannellumViewer = window.pannellum.viewer('viewer-streetside', options);
 
         _pannellumViewer
-            .on('mouseup', updateRotation)
-            .on('touchend', updateRotation);
-
-        function updateRotation() {
-            dispatch.call('viewerChanged');
-        }
+            .on('mousedown', function() {
+                d3_select(window).on('mousemove.pannellum', function() {
+                    dispatch.call('viewerChanged');
+                });
+            })
+            .on('mouseup', function() {
+                d3_select(window).on('mousemove.pannellum', null);
+                // continue dispatching events for a few seconds, in case viewer has inertia.
+                var t = d3_timer(function(elapsed) {
+                    dispatch.call('viewerChanged');
+                    if (elapsed > 2000) {
+                        t.stop();
+                    }
+                });
+            });
     },
 
 
@@ -483,6 +493,7 @@ export default {
                 showFullscreenCtrl: false,
                 autoLoad: true,
                 compass: true,
+                yaw: d.ca,
                 type: 'cubemap',
                 cubeMap: [
                     imgUrlPrefix + imgLocIdxArr[0] + imgUrlSuffix,