thumbnail button inside map info box

app/views/layouts/_templates.html.erb

@@ -34,6 +34,10 @@
       <p class="mapCreatedAt"><span>Created by:</span> {{user_name}} on {{created_at}}</p>
       <p class="mapEditedAt"><span>Last edited:</span> {{updated_at}}</p>
       <div class="mapInfoButtonsWrapper">
+        <div class="mapInfoThumbnail">
+          <div class="thumbnail"></div>
+          <span>Update Thumbnail</span>
+        </div>
         <div class="mapInfoDelete">
           <div class="deleteMap"></div>
           <span>Delete</span>

frontend/src/Metamaps/Map/InfoBox.js

@@ -35,9 +35,11 @@ const InfoBox = {
       data-bip-value="{{desc}}"
     >{{desc}}</span>`,
   userImageUrl: '',
-  init: function(serverData) {
+  init: function(serverData, updateThumbnail) {
     var self = InfoBox
 
+    self.updateThumbnail = updateThumbnail
+
     $('.mapInfoIcon').click(self.toggleBox)
     $('.mapInfoBox').click(function(event) {
       event.stopPropagation()
@@ -181,6 +183,7 @@ const InfoBox = {
     $('.mapInfoBox.yourMap').unbind('.yourMap').bind('click.yourMap', self.hidePermissionSelect)
 
     $('.yourMap .mapInfoDelete').unbind().click(self.deleteActiveMap)
+    $('.mapInfoThumbnail').unbind().click(self.updateThumbnail)
 
     $('.mapContributors span, #mapContribs').unbind().click(function(event) {
       $('.mapContributors .tip').toggle()

frontend/src/Metamaps/Map/index.js

@@ -45,7 +45,10 @@ const Map = {
     GlobalUI.CreateMap.emptyForkMapForm = $('#fork_map').html()
 
     self.updateStar()
-    InfoBox.init(serverData)
+
+    InfoBox.init(serverData, function updateThumbnail() {
+      self.uploadMapScreenshot()
+    })
     CheatSheet.init(serverData)
 
     $('.viewOnly .requestAccess').click(self.requestAccess)
@@ -251,8 +254,8 @@ const Map = {
     }
   },
   exportImage: function() {
-    Map.offerScreenshotDownload()
     Map.uploadMapScreenshot()
+    Map.offerScreenshotDownload()
   },
   offerScreenshotDownload: () => {
     const canvas = Map.getMapCanvasForScreenshots()
@@ -278,10 +281,10 @@ const Map = {
         processData: false,
         contentType: false,
         success: function(data) {
-          console.log('successfully uploaded map screenshot')
+          GlobalUI.notifyUser('Successfully updated map screenshot.')
         },
         error: function() {
-          console.log('failed to save map screenshot')
+          GlobalUI.notifyUser('Failed to update map screenshot.')
         }
       })
     })