chore: hide layer control when map collapsed

Author: RRanath

app/components/Analyst/Map/SummaryMap.tsx

@@ -21,8 +21,23 @@ import {
   ScaleControl,
 } from 'react-leaflet';
 import { useEffect, useRef, useState } from 'react';
+import styled from 'styled-components';
 import styles from './Tooltip.module.css';
 
+interface SummaryMapProps {
+  height: string;
+  width: string;
+  expanded?: boolean;
+}
+
+const StyledMapContainer = styled(MapContainer)<SummaryMapProps>`
+  height: ${(props) => props.height};
+  width: ${(props) => props.width};
+  .leaflet-control-layers {
+    visibility: ${(props) => (props.expanded ? 'visible' : 'hidden')};
+  }
+`;
+
 const generateUniqueKey = () => {
   return `${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
 };
@@ -92,7 +107,7 @@ const RenderMarkers = ({ markers, name }) => (
   </>
 );
 
-const SummaryMap = ({ initialData, height, width }) => {
+const SummaryMap = ({ initialData, height, width, expanded = true }) => {
   const data = initialData;
   const tooltipClass = styles['tooltip-map'];
   const tooltipTextClass = styles['tooltip-text-map'];
@@ -105,7 +120,7 @@ const SummaryMap = ({ initialData, height, width }) => {
     }
   }, [data, mapReady]);
   return (
-    <MapContainer
+    <StyledMapContainer
       preferCanvas
       attributionControl={false}
       ref={mapRef}
@@ -117,10 +132,12 @@ const SummaryMap = ({ initialData, height, width }) => {
       // Zoom is automatically set when using bounds
       // zoom={5}
       scrollWheelZoom
-      style={{ height, width }}
       whenReady={() => {
         setMapReady(true);
       }}
+      height={height}
+      width={width}
+      expanded={expanded}
     >
       <TileLayer
         attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
@@ -264,7 +281,7 @@ const SummaryMap = ({ initialData, height, width }) => {
           </>
         )}
       </LayersControl>
-    </MapContainer>
+    </StyledMapContainer>
   );
 };
 

app/components/Analyst/SideMap.tsx

@@ -26,7 +26,12 @@ const SideMap = ({ mapData, isMapExpanded, setIsMapExpanded }) => {
       <StyledMap>
         {!isMapExpanded && (
           <>
-            <MapCaller initialData={mapData} height="230px" width="230px" />
+            <MapCaller
+              initialData={mapData}
+              height="230px"
+              width="230px"
+              expanded={false}
+            />
             <StyledLink
               data-testid="expand-map"
               onClick={(e) => {