disable max zoom control

Author: dnywh

src/features/map/components/MapControls.tsx

@@ -18,13 +18,15 @@ type MapControlClusterProps = {
   onZoomIn: () => void;
   onZoomOut: () => void;
   searchLabel?: string;
+  zoomInDisabled?: boolean;
   zoomInLabel: string;
   zoomOutLabel: string;
 };
 
 type MapZoomControlsProps = {
   onZoomIn: () => void;
   onZoomOut: () => void;
+  zoomInDisabled?: boolean;
   zoomInLabel: string;
   zoomOutLabel: string;
 };
@@ -71,6 +73,20 @@ const controlButtonStyles = css`
     outline: 3px solid ${theme.colors.focus.outline};
   }
 
+  &:disabled {
+    cursor: default;
+  }
+
+  &:disabled svg {
+    opacity: 0.35;
+    transform: none;
+  }
+
+  &:disabled:hover,
+  &:disabled:active {
+    background: ${theme.colors.background.top};
+  }
+
   svg {
     width: 1rem;
     height: 1rem;
@@ -125,6 +141,7 @@ const ZoomButton = styled.button`
 export function MapZoomControls({
   onZoomIn,
   onZoomOut,
+  zoomInDisabled = false,
   zoomInLabel,
   zoomOutLabel,
 }: MapZoomControlsProps) {
@@ -133,6 +150,7 @@ export function MapZoomControls({
       <ZoomControlGroup
         onZoomIn={onZoomIn}
         onZoomOut={onZoomOut}
+        zoomInDisabled={zoomInDisabled}
         zoomInLabel={zoomInLabel}
         zoomOutLabel={zoomOutLabel}
       />
@@ -143,6 +161,7 @@ export function MapZoomControls({
 function ZoomControlGroup({
   onZoomIn,
   onZoomOut,
+  zoomInDisabled = false,
   zoomInLabel,
   zoomOutLabel,
 }: MapZoomControlsProps) {
@@ -153,6 +172,7 @@ function ZoomControlGroup({
         aria-label={zoomInLabel}
         title={zoomInLabel}
         data-testid="map-control-zoom-in"
+        disabled={zoomInDisabled}
         onClick={onZoomIn}
       >
         <MapControlPlusIcon aria-hidden="true" />
@@ -178,6 +198,7 @@ export default function MapControls({
   onZoomIn,
   onZoomOut,
   searchLabel,
+  zoomInDisabled = false,
   zoomInLabel,
   zoomOutLabel,
 }: MapControlClusterProps) {
@@ -209,6 +230,7 @@ export default function MapControls({
       <ZoomControlGroup
         onZoomIn={onZoomIn}
         onZoomOut={onZoomOut}
+        zoomInDisabled={zoomInDisabled}
         zoomInLabel={zoomInLabel}
         zoomOutLabel={zoomOutLabel}
       />

src/features/map/components/MapView.tsx

@@ -113,6 +113,7 @@ const PIN_HALO_MIN_ZOOM = 8;
 const PIN_HALO_MIN_SCALE = 0.18;
 const PIN_HALO_FULL_ZOOM = MAP_MAX_ZOOM;
 const PIN_HALO_GROWTH_EXPONENT = 2.2;
+const MAP_ZOOM_DISABLED_EPSILON = 0.001;
 
 type MapPinZoomStyle = CSSProperties & {
   "--map-pin-compact-scale": string;
@@ -167,6 +168,10 @@ function resolveMapPinZoomVariables(zoom: number): MapPinZoomStyle {
   };
 }
 
+function isMapZoomAtMax(zoom: number) {
+  return zoom >= MAP_MAX_ZOOM - MAP_ZOOM_DISABLED_EPSILON;
+}
+
 function resolveInitialViewState(
   selectedListing: SelectedListing | null,
   initialCoordinates: InitialMapCoordinates | null
@@ -229,6 +234,9 @@ export default function MapView({
     () => resolveInitialViewState(selectedListing, initialCoordinates),
     [initialCoordinates, selectedListing]
   );
+  const [isZoomInDisabled, setIsZoomInDisabled] = useState(() =>
+    isMapZoomAtMax(initialViewState.zoom)
+  );
   const hasInitialPosition =
     hasValidCoordinates(selectedListing) || initialCoordinates !== null;
 
@@ -258,6 +266,16 @@ export default function MapView({
     [requestBounds]
   );
 
+  const syncZoomControlState = useCallback((zoom: number) => {
+    const nextIsZoomInDisabled = isMapZoomAtMax(zoom);
+
+    setIsZoomInDisabled((currentIsZoomInDisabled) =>
+      currentIsZoomInDisabled === nextIsZoomInDisabled
+        ? currentIsZoomInDisabled
+        : nextIsZoomInDisabled
+    );
+  }, []);
+
   const applyMapPinZoomVariables = useCallback((zoom: number) => {
     const container = mapContainerRef.current;
     if (!container) return;
@@ -324,10 +342,11 @@ export default function MapView({
     if (!map) return null;
 
     applyMapPinZoomVariables(map.getZoom());
+    syncZoomControlState(map.getZoom());
     emitBoundsChange(map.getBounds());
 
     return map;
-  }, [applyMapPinZoomVariables, emitBoundsChange]);
+  }, [applyMapPinZoomVariables, emitBoundsChange, syncZoomControlState]);
 
   const handleLoad = useCallback(() => {
     handleMapLoad();
@@ -389,8 +408,9 @@ export default function MapView({
   const handleMove = useCallback(
     (event: ViewStateChangeEvent) => {
       scheduleMapPinZoomUpdate(event.viewState.zoom);
+      syncZoomControlState(event.viewState.zoom);
     },
-    [scheduleMapPinZoomUpdate]
+    [scheduleMapPinZoomUpdate, syncZoomControlState]
   );
 
   const handleMoveEnd = useCallback(
@@ -517,6 +537,7 @@ export default function MapView({
             onZoomIn={zoomIn}
             onZoomOut={zoomOut}
             searchLabel={t("searchLabel")}
+            zoomInDisabled={isZoomInDisabled}
             zoomInLabel={t("zoomInControl")}
             zoomOutLabel={t("zoomOutControl")}
           />