fixed map legend responsiveness issue

Author: sumedhkumar96

src/components/BMDashboard/InteractiveMap/EmbedInteractiveMap.jsx

@@ -5,34 +5,33 @@ import { useHistory } from 'react-router-dom';
 import { MapContainer, TileLayer } from 'react-leaflet';
 import MarkerClusterGroup from '@changey/react-leaflet-markercluster';
 import axios from 'axios';
-import L from 'leaflet';
 import { ENDPOINTS } from '../../../utils/URL';
-import { MapThemeUpdater, Legend, ProjectMarkers, MapUtils } from './MapSharedComponents';
+import {
+  MapThemeUpdater,
+  ProjectMarkers,
+  MapUtils,
+  MapLegend,
+  ProjectCounter,
+} from './MapSharedComponents';
 
-/* -----------------------------------------------------
-   EMBED INTERACTIVE MAP
------------------------------------------------------ */
 function EmbedInteractiveMap() {
   const darkMode = useSelector(state => state.theme.darkMode);
   const history = useHistory();
   const [orgs, setOrgs] = useState([]);
   const [loading, setLoading] = useState(true);
 
-  // fetch projects/orgs
   const fetchOrgs = async () => {
     try {
       let response;
       try {
         response = await axios.get(ENDPOINTS.BM_PROJECTS_WITH_LOCATION);
       } catch (projectError) {
-        // Fallback to organization data for now
         console.log('Projects with location endpoint not available, using organization data');
         response = await axios.get(ENDPOINTS.BM_ORGS_WITH_LOCATION);
       }
 
       const data = response.data.data || [];
 
-      // If no data from backend, use pseudo data
       if (data.length === 0) {
         console.log('No data from backend, using pseudo data');
         const pseudoData = MapUtils.getPseudoOrgs();
@@ -43,7 +42,6 @@ function EmbedInteractiveMap() {
       return data;
     } catch (error) {
       console.error('Error fetching project/org data:', error);
-      // If fetch fails, use pseudo data
       const pseudoData = MapUtils.getPseudoOrgs();
       setOrgs(pseudoData);
       return [];
@@ -53,7 +51,6 @@ function EmbedInteractiveMap() {
   };
 
   const handleProjectClick = org => {
-    // Navigate to project details page
     history.push(`/bmdashboard/projects/${org.orgId}`);
   };
 
@@ -71,25 +68,13 @@ function EmbedInteractiveMap() {
         background: darkMode ? '#0d1b2a' : 'white',
       }}
     >
-      {/* Project counter for embed version */}
-      <div
-        style={{
-          position: 'absolute',
-          left: '15px',
-          top: '15px',
-          padding: '8px 12px',
-          background: darkMode ? 'rgba(30, 42, 58, 0.9)' : 'rgba(255, 255, 255, 0.9)',
-          borderRadius: '6px',
-          fontSize: '13px',
-          backdropFilter: 'blur(10px)',
-          color: darkMode ? 'white' : '#222',
-          border: darkMode ? '1px solid #3a506b' : '1px solid rgba(0,0,0,0.1)',
-          zIndex: 1000,
-          fontWeight: '500',
-        }}
-      >
-        Showing {orgs.length} projects
-      </div>
+      <ProjectCounter
+        count={orgs.length}
+        darkMode={darkMode}
+        position="bottomleft"
+        isEmbed={true}
+      />
+      <MapLegend position="bottomleft" darkMode={darkMode} isEmbed={true} />
 
       <MapContainer
         center={[20, 0]}
@@ -109,7 +94,6 @@ function EmbedInteractiveMap() {
         worldCopyJump
       >
         <MapThemeUpdater darkMode={darkMode} />
-
         <TileLayer
           noWrap={false}
           attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
@@ -121,9 +105,6 @@ function EmbedInteractiveMap() {
           minZoom={1}
           maxZoom={15}
         />
-
-        <Legend position="bottomleft" />
-
         <MarkerClusterGroup
           disableClusteringAtZoom={13}
           spiderfyOnMaxZoom={true}

src/components/BMDashboard/InteractiveMap/InteractiveMap.jsx

@@ -6,7 +6,13 @@ import { MapContainer, TileLayer } from 'react-leaflet';
 import MarkerClusterGroup from '@changey/react-leaflet-markercluster';
 import axios from 'axios';
 import { ENDPOINTS } from '../../../utils/URL';
-import { MapThemeUpdater, Legend, ProjectMarkers, MapUtils } from './MapSharedComponents';
+import {
+  MapThemeUpdater,
+  ProjectMarkers,
+  MapUtils,
+  MapLegend,
+  ProjectCounter,
+} from './MapSharedComponents';
 import 'leaflet/dist/leaflet.css';
 import styles from './InteractiveMap.module.css';
 
@@ -22,9 +28,6 @@ export default function InteractiveMap() {
   const [mapKey, setMapKey] = useState(0);
   const [errMsg, setErrMsg] = useState('');
 
-  /* -----------------------------------------
-     FETCH
-  ----------------------------------------- */
   const fetchOrgs = async () => {
     try {
       let response;
@@ -35,11 +38,8 @@ export default function InteractiveMap() {
       }
 
       const data = response.data.data || [];
-
-      // Print fetched data to check if backend is correct
       console.log('Backend data fetched:', data);
 
-      // If no data from backend, use pseudo data
       if (data.length === 0) {
         console.log('No data from backend, using pseudo data');
         const pseudoData = MapUtils.getPseudoOrgs();
@@ -51,7 +51,6 @@ export default function InteractiveMap() {
       }
     } catch (e) {
       console.error('Error fetching data:', e);
-      // If fetch fails, use pseudo data
       const pseudoData = MapUtils.getPseudoOrgs();
       setOrgs(pseudoData);
       setFilteredOrgs(pseudoData);
@@ -60,9 +59,6 @@ export default function InteractiveMap() {
     }
   };
 
-  /* -----------------------------------------
-     FILTERING
-  ----------------------------------------- */
   const applyDateFilters = () => {
     if (startDate && endDate && new Date(endDate) < new Date(startDate)) {
       setErrMsg('End date cannot be earlier than start date');
@@ -86,9 +82,6 @@ export default function InteractiveMap() {
 
   const handleProjectClick = org => history.push(`/bmdashboard/projects/${org.orgId}`);
 
-  /* -----------------------------------------
-     EFFECTS
-  ----------------------------------------- */
   useEffect(() => {
     fetchOrgs();
   }, []);
@@ -97,17 +90,10 @@ export default function InteractiveMap() {
     setMapKey(k => k + 1);
   }, [darkMode]);
 
-  /* -----------------------------------------
-     STYLES
-  ----------------------------------------- */
   const S = MapUtils.getMapStyles(darkMode);
 
-  /* -----------------------------------------
-     RENDER
-  ----------------------------------------- */
   return (
     <div style={S.container}>
-      {/* HEADER ROW — Title (left) + Filters (right) */}
       <div style={S.headerRow}>
         <h2 style={S.titleText}>Global Distribution and Project Status Overview</h2>
 
@@ -137,12 +123,14 @@ export default function InteractiveMap() {
         </div>
       </div>
 
-      {/* MAP — full width, flexible height */}
       <div style={S.mapArea}>
-        {/* Bottom-left label inside map */}
-        <div style={S.bottomLeftLabel}>
-          Showing {filteredOrgs.length} of {orgs.length} projects
-        </div>
+        <ProjectCounter
+          count={filteredOrgs.length}
+          total={orgs.length}
+          darkMode={darkMode}
+          position="bottomleft"
+        />
+        <MapLegend position="bottomright" darkMode={darkMode} />
 
         {loading ? (
           <div
@@ -161,10 +149,12 @@ export default function InteractiveMap() {
             center={[40, 0]}
             zoom={3}
             scrollWheelZoom
-            style={{ width: '100%', height: '100%' }}
+            style={{
+              width: '100%',
+              height: '100%',
+            }}
           >
             <MapThemeUpdater darkMode={darkMode} />
-
             <TileLayer
               url={
                 darkMode
@@ -173,9 +163,6 @@ export default function InteractiveMap() {
               }
               attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
             />
-
-            <Legend />
-
             <MarkerClusterGroup maxClusterRadius={70} chunkedLoading spiderfyOnMaxZoom={true}>
               <ProjectMarkers
                 orgs={filteredOrgs}

src/components/BMDashboard/InteractiveMap/InteractiveMap.module.css

@@ -1,3 +1,4 @@
+/* eslint-disable */
 /* Light Mode Map */
 :global(.light-mode-map) {
   background-color: white;
@@ -9,6 +10,15 @@
   background-color: #0d1b2a;
 }
 
+/* Remove underline from zoom controls */
+:global(.leaflet-control-zoom a) {
+  text-decoration: none !important;
+}
+
+:global(.leaflet-control-zoom a:hover) {
+  text-decoration: none !important;
+}
+
 /* Remove default popup background and styling */
 :global(.leaflet-popup-content-wrapper) {
   background: transparent !important;
@@ -137,22 +147,26 @@
   color: white !important;
   border-color: #3a506b !important;
   transition: all 0.2s ease;
+  text-decoration: none !important;
 }
 
 :global(.dark-mode-map .leaflet-control-zoom a:hover) {
   background-color: #3a506b !important;
   transform: translateY(-1px);
+  text-decoration: none !important;
 }
 
 :global(.light-mode-map .leaflet-control-zoom a) {
   background-color: white !important;
   color: #222 !important;
   border-color: #ddd !important;
   transition: all 0.2s ease;
+  text-decoration: none !important;
 }
 
 :global(.light-mode-map .leaflet-control-zoom a:hover) {
   background-color: #f5f5f5 !important;
+  text-decoration: none !important;
 }
 
 :global(.dark-mode-map .leaflet-control-zoom-in),