diff --git a/css/60_photos.css b/css/60_photos.css
index cc853900c..c1e4a0d9e 100644
--- a/css/60_photos.css
+++ b/css/60_photos.css
@@ -177,6 +177,13 @@
 .layer-mapillary-images .viewfield-group * {
     fill: #55ff22;
 }
+.layer-mapillary-images .viewfield-group .viewfield {
+    display: none;
+}
+.layer-mapillary-images .viewfield-group.selected .viewfield,
+.layer-mapillary-images .viewfield-group .viewfield.pano {
+    display: inline;
+}
 .layer-mapillary-images .sequence {
     stroke: #55ff22;
 }
diff --git a/modules/services/mapillary.js b/modules/services/mapillary.js
index b73db8b71..8be72b3f1 100644
--- a/modules/services/mapillary.js
+++ b/modules/services/mapillary.js
@@ -29,7 +29,7 @@ var clientId = 'NzNRM2otQkR2SHJzaXJmNmdQWVQ0dzo1ZWYyMmYwNjdmNDdlNmVi';
 var maxResults = 1000;
 var tileZoom = 14;
 var tiler = utilTiler().zoomExtent([tileZoom, tileZoom]).skipNullIsland(true);
-var dispatch = d3_dispatch('loadedImages', 'loadedSigns');
+var dispatch = d3_dispatch('loadedImages', 'loadedSigns', 'bearingChanged');
 var _mlyFallback = false;
 var _mlyCache;
 var _mlyClicks;
@@ -471,6 +471,7 @@ export default {
 
             _mlyViewer = new Mapillary.Viewer('mly', clientId, null, opts);
             _mlyViewer.on('nodechanged', nodeChanged);
+            _mlyViewer.on('bearingchanged', bearingChanged);
             _mlyViewer.moveToKey(imageKey)
                 .catch(function(e) { console.error('mly3', e); });  // eslint-disable-line no-console
         }
@@ -505,6 +506,10 @@ export default {
                 that.selectImage(undefined, node.key, true);
             }
         }
+
+        function bearingChanged(e) {
+            dispatch.call('bearingChanged', undefined, e);
+        }
     },
 
 
diff --git a/modules/svg/mapillary_images.js b/modules/svg/mapillary_images.js
index fb8a4b4b8..641882790 100644
--- a/modules/svg/mapillary_images.js
+++ b/modules/svg/mapillary_images.js
@@ -1,4 +1,5 @@
 import _throttle from 'lodash-es/throttle';
+import _isNumber from 'lodash-es/isNumber';
 import { select as d3_select } from 'd3-selection';
 import { svgPath, svgPointTransform } from './index';
 import { services } from '../services';
@@ -11,6 +12,7 @@ export function svgMapillaryImages(projection, context, dispatch) {
     var minViewfieldZoom = 18;
     var layer = d3_select(null);
     var _mapillary;
+    var viewerCompassAngle;
 
 
     function init() {
@@ -24,6 +26,19 @@ export function svgMapillaryImages(projection, context, dispatch) {
         if (services.mapillary && !_mapillary) {
             _mapillary = services.mapillary;
             _mapillary.event.on('loadedImages', throttledRedraw);
+            _mapillary.event.on('bearingChanged', function(e) {
+                viewerCompassAngle = e;
+
+                // avoid updating if the map is currently transformed
+                // e.g. during drags or easing.
+                if (context.map().isTransformed()) return;
+
+                layer.selectAll('.viewfield-group.selected')
+                    .filter(function(d) {
+                        return d.pano;
+                    })
+                    .attr('transform', transform);
+            });
         } else if (!services.mapillary && _mapillary) {
             _mapillary = null;
         }
@@ -102,7 +117,9 @@ export function svgMapillaryImages(projection, context, dispatch) {
 
     function transform(d) {
         var t = svgPointTransform(projection)(d);
-        if (d.ca) {
+        if (d.pano && _isNumber(viewerCompassAngle)) {
+            t += ' rotate(' + Math.floor(viewerCompassAngle) + ',0,0)';
+        } else if (d.ca) {
             t += ' rotate(' + Math.floor(d.ca) + ',0,0)';
         }
         return t;
@@ -184,6 +201,7 @@ export function svgMapillaryImages(projection, context, dispatch) {
         viewfields.enter()               // viewfields may or may not be drawn...
             .insert('path', 'circle')    // but if they are, draw below the circles
             .attr('class', 'viewfield')
+            .classed('pano', function() { return this.parentNode.__data__.pano; })
             .attr('transform', 'scale(1.5,1.5),translate(-8, -13)')
             .attr('d', viewfieldPath);