Merge pull request #3370 from Vizzuality/feature/zoom-alert

feature/zoom-alert

Author: pjosh

app/assets/javascripts/map/presenters/ReactMapMiddlePresenter.js

@@ -60,6 +60,11 @@ define(
               window.dispatchEvent(new Event('isRecentImageryActivated'));
             }
           }
+        },
+        {
+          'ReactMap/zoom-go-back': function(slug) {
+            mps.publish('Map/set-zoom', [this.view.previousZoom]);
+          }
         }
       ],
 
@@ -96,6 +101,10 @@ define(
         return {
           recentImagery: this.status.get('recentImagery')
         };
+      },
+
+      notificate: function(id) {
+        mps.publish('Notification/open', [id]);
       }
     });
 

app/assets/javascripts/map/views/ReactMapMiddleView.js

@@ -52,6 +52,15 @@ define(
         this.presenter.updateLayer(slug);
       },
 
+      showZoomAlert: function(alert, currentZoom) {
+        this.previousZoom = currentZoom;
+        this.showAlertNotification(alert);
+      },
+
+      showAlertNotification: function(alert) {
+        this.presenter.notificate(alert);
+      },
+
       getParams: function(e) {
         return this.params;
       },

app/javascript/pages/map/recent-imagery/recent-imagery-reducers.js

@@ -14,7 +14,7 @@ export const initialState = {
       left: '50%'
     },
     layerSlug: 'sentinel_tiles',
-    minZoom: 8,
+    minZoom: 9,
     thumbsToShow: 5,
     selectedTileIndex: 0,
     date: null,

app/javascript/pages/map/recent-imagery/recent-imagery.js

@@ -165,6 +165,7 @@ class RecentImageryContainer extends PureComponent {
     });
     if (zoom < minZoom) {
       map.setZoom(minZoom);
+      this.middleView.showZoomAlert('notification-zoom-go-back', zoom);
     }
   }
 

app/views/shared/_notifications.html.erb

@@ -101,6 +101,9 @@
   <div id="notification-no-images-highres" data-type="error">
     <p>No imagery is available in this area for the selected time period and settings.</p>
   </div>
+  <div id="notification-zoom-go-back" data-type="warning">
+    <p>We are zooming the map to overlay recent satellite imagery. <button class="btn little white action" data-action="ReactMap/zoom-go-back">Cancel</button></p>
+  </div>
 
 
   <!-- SOURCE MAP -->