Disable zoom in/out buttons when at max or min zoom already (close #6847)

css/80_app.css

@@ -2977,8 +2977,8 @@ input.key-trap {
     border-radius: 0;
 }
 
-.map-control > button:hover,
-.map-control > button:focus {
+.map-control > button:not(.disabled):hover,
+.map-control > button:not(.disabled):focus {
     background: rgba(0, 0, 0, .8);
 }
 
@@ -2987,6 +2987,10 @@ input.key-trap {
     background: #7092ff;
 }
 
+.map-control > button.disabled .icon {
+    color: rgba(255, 255, 255, 0.5);
+}
+
 
 /* Fullscreen Button (disabled)
 ------------------------------------------------------- */
@@ -5696,4 +5700,4 @@ li.hide + li.version .badge .tooltip .tooltip-arrow {
 .list-item-photos.list-item-mapillary-map-features .request-data-link {
     float: right;
     margin-top: -20px;
-}
+}

modules/renderer/map.js

@@ -19,8 +19,10 @@ import { utilGetDimensions } from '../util/dimensions';
 
 // constants
 var TILESIZE = 256;
-var kMin = geoZoomToScale(2, TILESIZE);
-var kMax = geoZoomToScale(24, TILESIZE);
+var minZoom = 2;
+var maxZoom = 24;
+var kMin = geoZoomToScale(minZoom, TILESIZE);
+var kMax = geoZoomToScale(maxZoom, TILESIZE);
 
 function clamp(num, min, max) {
     return Math.max(min, Math.min(num, max));
@@ -720,10 +722,11 @@ export function rendererMap(context) {
 
     map.zoomIn = function() { zoomIn(1); };
     map.zoomInFurther = function() { zoomIn(4); };
+    map.canZoomIn = function() { return map.zoom() < maxZoom; };
 
     map.zoomOut = function() { zoomOut(1); };
     map.zoomOutFurther = function() { zoomOut(4); };
-
+    map.canZoomOut = function() { return map.zoom() > minZoom; };
 
     map.center = function(loc2) {
         if (!arguments.length) {

modules/ui/zoom.js

@@ -79,5 +79,21 @@ export function uiZoom(context) {
             context.keybinding().on([key], zoomOut);
             context.keybinding().on([uiCmd('⌘' + key)], zoomOutFurther);
         });
+
+        function updateButtonStates() {
+            var canZoomIn = context.map().canZoomIn();
+            selection.select('button.zoom-in')
+                .classed('disabled', !canZoomIn)
+                .attr('disabled', canZoomIn ? null : true);
+
+            var canZoomOut = context.map().canZoomOut();
+            selection.select('button.zoom-out')
+                .classed('disabled', !canZoomOut)
+                .attr('disabled', canZoomOut ? null : true);
+        }
+
+        updateButtonStates();
+
+        context.map().on('move.uiZoom', updateButtonStates);
     };
 }