Remove static Mapillary thumbnail image

(Viewer object shows the image while loading)

css/app.css

@@ -660,7 +660,7 @@ button.save.has-count .count::before {
     bottom: 0;
 }
 
-.mapillary-image {
+.mapillary-wrap {
     position: absolute;
     bottom: 30px;
     width: 330px;
@@ -669,29 +669,19 @@ button.save.has-count .count::before {
     background-color: #fff;
 }
 
-.mapillary-image img {
-    width: 100%;
-    height: auto;
-    display: none;
-}
-
-.mapillary-image img.active {
-    display: block;
-}
-
-.mapillary-image.hidden {
+.mapillary-wrap.hidden {
     visibility: hidden;
 }
 
-.mapillary-image.temp button {
+.mapillary-wrap.temp button {
     display: none;
 }
 
-.mapillary-image .uil-ripple-css {
+.mapillary-wrap .uil-ripple-css {
   top: -22px;
   left: -16px;
 }
-.mapillary-image button.thumb-hide {
+.mapillary-wrap button.thumb-hide {
     border-radius: 0;
     padding: 5px;
     position: absolute;
@@ -708,6 +698,7 @@ button.save.has-count .count::before {
   visibility: visible;
 }
 
+
 .feature-list-pane .inspector-body {
     top: 120px;
 }

js/id/services/mapillary.js

@@ -202,65 +202,47 @@ iD.services.mapillary = function() {
         var detectionPackage = d.signs[0].package,
             type = d.signs[0].type,
             country = detectionPackage.split('_')[1];
+
         return iD.services.mapillary.sign_defs[country][type];
     };
 
-    mapillary.showThumbnail = function(imageKey, position, interactive) {
+    mapillary.showThumbnail = function(imageKey) {
         if (!imageKey) return;
 
-        var positionClass = {
-            'ar': (position !== 'left'),
-            'al': (position === 'left')
-        };
-
-        var thumbnail = d3.select('#content').selectAll('.mapillary-image')
+        var thumbnail = d3.select('#content').selectAll('.mapillary-wrap')
             .data([0]);
 
         // Enter
         var enter = thumbnail.enter().append('div')
-            .attr('class', 'mapillary-image ar');
+            .attr('class', 'mapillary-wrap al');   // 'al'=left,  'ar'=right
 
         enter.append('button')
             .attr('class', 'thumb-hide')
-            .on('click', function () {
-                mapillary.hideThumbnail();
-            })
+            .on('click', function () { mapillary.hideThumbnail(); })
             .append('div')
             .call(iD.svg.Icon('#icon-close'));
 
-        enter.append('img');
-
         enter.append('div')
-            .attr('class', 'mly-wrapper inactive')
+            .attr('class', 'mly-wrapper active')
             .attr('id', 'mly');
 
-
         // Update
-        thumbnail.selectAll('img')
-            .attr('src', urlThumb + imageKey + '/thumb-320.jpg')
-            .classed('active', !interactive);
+        thumbnail
+            .classed('hidden', false)
+            .selectAll('.mly-wrapper')
+            .attr('class', 'active');
 
-        thumbnail.selectAll('.mly-wrapper')
-          .classed('active', interactive);
-
-        if (position) {
-            thumbnail.classed(positionClass);
-        }
-
-        if(!iD.services.mapillary.viewer) {
+        if (!iD.services.mapillary.viewer) {
             iD.services.mapillary.viewer = new Mapillary.Viewer('mly', clientId, imageKey, {
-                'imagePlane': false,
-                'image': true,
-                'cover': false,
-                'debug': false
+                baseImageSize: 320,
+                imagePlane: false,
+                cover: false,
+                debug: false
             });
         }
-        if (interactive) {
-            iD.services.mapillary.viewer.moveToKey(imageKey);
-        }
 
-        thumbnail
-            .classed('hidden', false);
+        iD.services.mapillary.viewer.moveToKey(imageKey);
+
     };
 
     mapillary.hideThumbnail = function() {
@@ -268,7 +250,7 @@ iD.services.mapillary = function() {
             iD.services.mapillary.thumb = null;
         }
 
-        d3.select('#content').selectAll('.mapillary-image')
+        d3.select('#content').selectAll('.mapillary-wrap')
             .classed('hidden', true);
 
         d3.select('#content').selectAll('.mly-wrapper')
@@ -283,7 +265,7 @@ iD.services.mapillary = function() {
             iD.services.mapillary.thumb = null;
             iD.services.mapillary.viewer = null;
         }
-        d3.select('#content').selectAll('.mapillary-image')
+        d3.select('#content').selectAll('.mapillary-wrap')
             .remove();
     };
 

js/id/svg/mapillary_images.js

@@ -28,21 +28,19 @@ iD.svg.MapillaryImages = function(projection, context, dispatch) {
             .classed('loading', function(d) { return d.key === image.key; });
     }
 
-    function showThumbnail(image, interactive) {
+    function showThumbnail(image) {
         var mapillary = getMapillary();
         if (!mapillary) return;
 
-        var thumb = mapillary.selectedThumbnail(),
-            position = 'left';  // or 'right'
-
+        var thumb = mapillary.selectedThumbnail();
         if (thumb) {
             d3.selectAll('.layer-mapillary-images .viewfield-group, .layer-mapillary-signs .icon-sign')
                 .classed('selected', function(d) { return d.key === thumb.key; });
         }
 
-        mapillary.showThumbnail(image.key, position, interactive);
+        mapillary.showThumbnail(image.key);
 
-        if (!_viewer && interactive) {
+        if (!_viewer) {
             _viewer = iD.services.mapillary.viewer;
             _viewer.on('nodechanged', viewerNavHandler);
 
@@ -54,7 +52,7 @@ iD.svg.MapillaryImages = function(projection, context, dispatch) {
                         .classed('loading', function() { return false; });
                     mapillary.selectedThumbnail(pendingImg);
                     context.map().centerEase(pendingImg.loc);
-                    showThumbnail(pendingImg, true);
+                    showThumbnail(pendingImg);
                     pendingImg = null;
                 }
                 _mlyLoading = s;
@@ -172,7 +170,7 @@ iD.svg.MapillaryImages = function(projection, context, dispatch) {
                 } else {
                     mapillary.selectedThumbnail(d);
                     context.map().centerEase(d.loc);
-                    showThumbnail(d, true);
+                    showThumbnail(d);
                 }
             });
 

js/id/svg/mapillary_signs.js

@@ -20,19 +20,18 @@ iD.svg.MapillarySigns = function(projection, context, dispatch) {
         return _mapillary;
     }
 
-    function showThumbnail(image, interactive) {
+    function showThumbnail(image) {
         var mapillary = getMapillary();
         if (!mapillary) return;
 
-        var thumb = mapillary.selectedThumbnail(),
-            position = 'left';  // or 'right'
+        var thumb = mapillary.selectedThumbnail();
 
         if (thumb) {
             d3.selectAll('.layer-mapillary-images .viewfield-group, .layer-mapillary-signs .icon-sign')
                 .classed('selected', function(d) { return d.key === thumb.key; });
         }
 
-        mapillary.showThumbnail(image.key, position, interactive);
+        mapillary.showThumbnail(image.key);
     }
 
     function hideThumbnail() {
@@ -93,7 +92,7 @@ iD.svg.MapillarySigns = function(projection, context, dispatch) {
 
                 mapillary.selectedThumbnail(d);
                 context.map().centerEase(d.loc);
-                showThumbnail(d, true);
+                showThumbnail(d);
             });
 
         // Exit