feat: SRS-681: Add Map showing the specific location for the site id on Summary tab

frontend/src/app/features/details/SummaryForm.tsx

@@ -52,6 +52,7 @@ const SummaryForm: FC<SummaryFormProps> = ({
         label: 'Latitude (D, M, S)',
         value: '',
         isChildLabel: true,
+        customLabelCss: 'custom-summary-lbl-text',
         children: [
           {
             type: FormFieldType.Text,
@@ -109,6 +110,7 @@ const SummaryForm: FC<SummaryFormProps> = ({
         label: 'Longitude (D, M, S)',
         value: '',
         isChildLabel: true,
+        customLabelCss: 'custom-summary-lbl-text',
         children: [
           {
             type: FormFieldType.Text,

frontend/src/app/features/details/summary/Summary.css

@@ -48,3 +48,9 @@
     align-items: center; /* Center items */
   }
 }
+
+.map-container {
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+}

frontend/src/app/features/details/summary/Summary.tsx

@@ -91,6 +91,7 @@ const Summary = () => {
 
   const detailsMode = useSelector(siteDetailsMode);
   const details = useSelector(selectSiteDetails);
+  console.log('nupur: ', details);
   const [editSiteDetailsObject, setEditSiteDetailsObject] = useState(details);
   const resetDetails = useSelector(resetSiteDetails);
   useEffect(() => {
@@ -119,15 +120,22 @@ const Summary = () => {
   // State Initializations
   const initialParcelIds = [0];
 
-  const [location, setLocation] = useState([48.46762, -123.25458]);
-
   useEffect(() => {
     console.log('Change in details');
     let address = document.getElementsByTagName('h3');
     address.length > 0 && address[0] && address[0].remove();
     setEditSiteDetailsObject(details);
   }, [details]);
 
+  const [location, setLocation] = useState([48.46762, -123.25458]);
+
+  useEffect(() => {
+    if (editSiteDetailsObject) {
+      const { latDegrees, longDegrees } = editSiteDetailsObject;
+      setLocation([latDegrees, longDegrees * -1]);
+    }
+  }, [editSiteDetailsObject]);
+
   const [parcelIds, setParcelIds] = useState(initialParcelIds);
 
   // Utility Functions

frontend/src/app/features/details/summary/SummaryInfo.tsx

@@ -1,10 +1,27 @@
-import React from 'react';
+import React, { useContext, useEffect, useRef } from 'react';
 import PanelWithUpDown from '../../../components/simple/PanelWithUpDown';
 // const Map: any = require('../../../../../node_modules/react-parcelmap-bc/dist/Map').default;
 // @ts-ignore
-import Map from '../../../../../node_modules/react-parcelmap-bc/dist/Map';
+import { Map } from 'leaflet';
 import SummaryForm from '../SummaryForm';
 import { ApproveRejectButtons } from '../../../components/approve/ApproveReject';
+import { MapContainer, useMap } from 'react-leaflet';
+import { SiteMarkers } from '../../map/siteMarkers/SiteMarkers';
+import { LatLngBounds, LatLngTuple } from 'leaflet';
+import { TileLayer } from 'react-leaflet';
+import { SiteMarker } from '../../map/siteMarkers/SiteMarker';
+import './Summary.css';
+import 'leaflet/dist/leaflet.css';
+import { useMediaQuery, useTheme } from '@mui/material';
+import { MAP_FLY_OPTIONS, getZoom } from '../../map/mapOptions';
+import { get } from 'http';
+import { MapSearchQueryParamsContext } from '../../map/mapSearchQueryParamsContext/MapSearchQueryParamsContext';
+import {
+  useMapSearchQuery,
+  useMapSearch_FindSiteBySiteIdQuery,
+} from '../../../../graphql/generated';
+import { Site } from '../../map/MapView';
+import { set } from 'date-fns';
 
 export interface ISummaryInfo {
   location: any;
@@ -33,14 +50,58 @@ const SummaryInfo: React.FC<ISummaryInfo> = ({
       console.log('Approve Handler Not Provided');
     });
 
+  const CENTER_OF_BC: LatLngTuple = [53.7267, -127.6476];
+
+  const { data } = useMapSearch_FindSiteBySiteIdQuery({
+    variables: { siteId: siteData.id },
+  });
+
+  const selectedSiteData = data?.findSiteBySiteId.data;
+  const mapRef = useRef<Map>(null);
+  const map_fly_options = { animate: false, duration: 0.2 };
+
+  const MapWithMarker = ({ site }: { site: any }) => {
+    const map = useMap();
+
+    useEffect(() => {
+      if (!site.latdeg || !site.longdeg) return;
+      map.flyTo(
+        {
+          lat: site.latdeg,
+          lng: site.longdeg,
+        },
+        getZoom(map),
+        map_fly_options,
+      );
+    }),
+      [site, map];
+
+    return (
+      site && <SiteMarker position={{ lat: site.latdeg, lng: site.longdeg }} />
+    );
+  };
+
   return (
     <PanelWithUpDown
       label="Location Details"
       secondChild={
         <div className="row w-100">
           <div className="col-12 col-lg-6">
-            {/* <Map callback={() => {}} initLocation={location} readOnly={true} /> */}
+            <MapContainer
+              center={CENTER_OF_BC}
+              zoom={6}
+              zoomControl={false}
+              ref={mapRef}
+              className="map-container"
+            >
+              <TileLayer
+                attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+                url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+              />
+              {<MapWithMarker site={selectedSiteData} />}
+            </MapContainer>
           </div>
+
           <div className="col-12 col-lg-6">
             {siteData != null && (
               <SummaryForm