From 2835ffb7df60ff6f79b8be693d8f4f186ba1a80f Mon Sep 17 00:00:00 2001
From: Om Mishra <32200996+mishraomp@users.noreply.github.com>
Date: Sat, 24 Feb 2024 17:10:18 -0800
Subject: [PATCH] feat: map updates (#31)

---
 frontend/src/components/MapView.jsx | 69 +++++++++++++++++------------
 1 file changed, 41 insertions(+), 28 deletions(-)

diff --git a/frontend/src/components/MapView.jsx b/frontend/src/components/MapView.jsx
index 70cf1ded..a49253c2 100644
--- a/frontend/src/components/MapView.jsx
+++ b/frontend/src/components/MapView.jsx
@@ -5,6 +5,10 @@ import { useEffect, useState } from 'react'
 import apiService from '@/service/api-service'
 import pin from '../assets/marker-icon-2x-red.png'
 import shadow from '../assets/marker-shadow.png'
+import Table from '@mui/material/Table'
+import TableCell from '@mui/material/TableCell'
+import TableRow from '@mui/material/TableRow'
+
 /**
  * Renders a map with a marker at the supplied location
  *
@@ -24,7 +28,13 @@ const LeafletMapWithPoint = () => {
           ?.map((item) => {
             return {
               position: [item?.Latitude, item?.Longitude],
-              details: item,
+              details: {
+                'Authorization Number': item['Authorization Number'],
+                'Authorization Type': item['Authorization Type'],
+                'Authorization Status': item['Authorization Status'],
+                'Regulated Party': item['Regulated Party'],
+                'Facility Location': item['Facility Location'],
+              },
             }
           })
         setData(points)
@@ -38,11 +48,10 @@ const LeafletMapWithPoint = () => {
   // Set the position of the marker for center of BC
   const position = [53.7267, -127.6476]
   // define points
-  const samplePoints = [
-    { position: [60, -140], details: 'BC' },
-    { position: [49.019, -122.455], details: 'BC' },
-    { position: [51.7267, -128.6476], details: 'BC' },
-  ]
+  const samplePoints = [{ position: [60, -140], details: 'BC' }, {
+    position: [49.019, -122.455],
+    details: 'BC',
+  }, { position: [51.7267, -128.6476], details: 'BC' }]
   //define red icon
   const redIcon = new L.Icon({
     //read from assets
@@ -54,28 +63,32 @@ const LeafletMapWithPoint = () => {
     shadowSize: [41, 41],
   })
 
-  return (
-    <>
-      <MapContainer
-        id="map"
-        center={position}
-        zoom={6}
-        style={{ height: '60em', width: '100%', marginLeft: '4em' }}
-        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"
-        />
-        {dataFetched &&
-          data.map((item, index) => (
-            <Marker key={index} position={item.position} icon={redIcon}>
-              <Popup>{item.details['Authorization Number']}</Popup>
-            </Marker>
-          ))}
-      </MapContainer>
-    </>
-  )
+  return (<>
+    <MapContainer
+      id="map"
+      center={position}
+      zoom={6}
+      style={{ height: '60em', width: '100%', marginLeft: '4em' }}
+      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"
+      />
+      {dataFetched && data.map((item, index) => (<Marker key={index} position={item.position} icon={redIcon}>
+          <Popup sx={{ maxWidth: '50em' }}>
+            <Table size="small">
+              {Object.keys(item.details).map((itemDetails) => (
+                <><TableRow><TableCell variant="head" align="right">{itemDetails}</TableCell>
+                  <TableCell align="right">{item.details[itemDetails]}</TableCell></TableRow></>
+              ))
+              }
+            </Table>
+          </Popup>
+        </Marker>
+      ))}
+    </MapContainer>
+  </>)
 }
 
 export default LeafletMapWithPoint