button component for correct zoom #2299

client/src/components/FoodSeeker/SearchResults/ResultsMap/ResultsMap.jsx

@@ -7,13 +7,13 @@ import { useCallback, useEffect, useState } from "react";
 // recommendation from Mapbox team
 // https://github.com/mapbox/mapbox-gl-js/issues/10173  See comment by IvanDreamer on Mar 22
 // for craco.config.js contents
-import { Grid } from "@mui/material";
+import { Grid, Box } from "@mui/material";
 import { MAPBOX_STYLE } from "constants/map";
 import { MAPBOX_ACCESS_TOKEN, DEFAULT_VIEWPORT } from "helpers/Constants";
 import useBreakpoints from "hooks/useBreakpoints";
 import useFeatureFlag from "hooks/useFeatureFlag";
 import 'mapbox-gl/dist/mapbox-gl.css';
-import Map, { Layer, Marker, NavigationControl, Source } from "react-map-gl";
+import Map, { Layer, Marker, Source } from "react-map-gl";
 import { useLocation, useNavigate } from "react-router-dom";
 import * as analytics from "services/analytics";
 import {
@@ -43,7 +43,7 @@ const ResultsMap = ({ stakeholders, categoryIds, toggleCategory, loading }) => {
   const selectedOrganization = useSelectedOrganization();
   const navigate = useNavigate();
   const location = useLocation();
-  const { isMobile } = useBreakpoints();
+  const { isMobile, isTablet } = useBreakpoints();
   const isListPanelOpen = useListPanel();
   const isFilterPanelOpen = useFilterPanel();
   const { mapRef, flyTo } = useMapbox();
@@ -71,6 +71,7 @@ const ResultsMap = ({ stakeholders, categoryIds, toggleCategory, loading }) => {
   const onMouseEnter = useCallback(() => setCursor("pointer"), []);
   const onMouseLeave = useCallback(() => setCursor("auto"), []);
   const [interactiveLayerIds, setInteractiveLayerIds] = useState(["nonexist"]);
+  const [currMap, setCurrMap] = useState(null);
 
   useEffect(() => {
     analytics.postEvent("showMap");
@@ -84,8 +85,10 @@ const ResultsMap = ({ stakeholders, categoryIds, toggleCategory, loading }) => {
     }));
   }, [searchCoordinates, longitude, latitude, isMobile]);
 
+
   const onLoad = useCallback(async () => {
     const map = mapRef.current.getMap();
+    setCurrMap(map);
     await loadMarkerIcons(map);
     setMarkersLoaded(true);
     setInteractiveLayerIds([MARKERS_LAYER_ID]);
@@ -134,6 +137,92 @@ const ResultsMap = ({ stakeholders, categoryIds, toggleCategory, loading }) => {
   const listPanelLeftPostion = isListPanelOpen ? 524 : 0;
   const filterPanelLeftPostion = isFilterPanelOpen ? 340 : 0;
 
+  const CustomNavigationControl = () => {
+    if (!currMap) return;
+
+    const zoom = currMap.getZoom();
+    const currentCenter = currMap.getCenter();
+
+    const handleZoomIn = () => {
+      const longOffset = 0.0399 * Math.pow(2, 11 - zoom);
+      const newCenter = {
+        lng: !isTablet && isListPanelOpen ? currentCenter.lng + longOffset : currentCenter.lng,
+        lat: selectedOrganization ? selectedOrganization.latitude : currentCenter.lat
+      };
+
+      currMap.easeTo({
+        center: isListPanelOpen ? newCenter : currentCenter,
+        zoom: zoom + 1,
+        duration: 500,
+      })
+    };
+
+    const handleZoomOut = () => {
+      const zoomOutOffset = 0.0399 * Math.pow(2, 12 - zoom);
+      const newCenter = {
+        lng: currentCenter.lng - zoomOutOffset,
+        lat: currentCenter.lat
+      };
+
+      currMap.easeTo({
+        center: isListPanelOpen ? newCenter : currentCenter,
+        zoom: zoom - 1,
+        duration: 500,
+      })
+    };
+
+    const buttonStyles = {
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      width: "28px",
+      height: "28px",
+      fontSize: "16px",
+      fontWeight: 700,
+      color: "#313131",
+      cursor: "pointer",
+      userSelect: "none",
+      borderBottom: "1px solid rgba(0, 0, 0, 0.1)",
+      '&:hover': {
+        backgroundColor: "#f5f5f5",
+      },
+      '&:active': {
+        backgroundColor: "#e0e0e0",
+      },
+    };
+
+    return (
+      <Box
+        sx={{
+          position: "absolute",
+          top: 8,
+          right: 8,
+          zIndex: 10,
+          display: "flex",
+          flexDirection: "column",
+          background: "#fff",
+          borderRadius: "6px",
+          boxShadow: "0 1px 6px rgba(0, 0, 0, 0.416)",
+          border: "1.5px solid rgba(0, 0, 0, 0.1)",
+          overflow: "hidden",
+        }}
+      >
+        <Box
+          onClick={handleZoomIn}
+          sx={buttonStyles}
+        >
+          ＋
+        </Box>
+        <Box
+          onClick={handleZoomOut}
+          sx={[buttonStyles, { fontSize: 14 }]}
+        >
+          ―
+        </Box>
+      </Box>
+    );
+};
+
   return (
     <div style={{ position: "relative", height: "100%", width: "100%" }}>
       <Map
@@ -152,7 +241,7 @@ const ResultsMap = ({ stakeholders, categoryIds, toggleCategory, loading }) => {
         onMouseLeave={onMouseLeave}
       >
         {!isMobile && (
-          <NavigationControl showCompass={false} style={{ top: 8, right: 8 }} />
+          <CustomNavigationControl />
         )}
         {startIconCoordinates && (
           <Marker