feat(frontend): maps (#29)

frontend/Caddyfile

@@ -36,7 +36,7 @@
 		Cache-Control "no-store, no-cache, must-revalidate, proxy-revalidate"
 		X-Content-Type-Options "nosniff"
 		Strict-Transport-Security "max-age=31536000"
-		Content-Security-Policy "default-src 'self' https://spt.apps.gov.bc.ca data:; script-src 'self' 'unsafe-eval' https://www2.gov.bc.ca ;style-src 'self' 'unsafe-inline' https://fonts.googleapis.com https://use.fontawesome.com; font-src 'self' https://fonts.gstatic.com; img-src 'self' data: https://fonts.googleapis.com http://www.w3.org https://*.gov.bc.ca"
+		Content-Security-Policy "default-src 'self' https://spt.apps.gov.bc.ca data:; script-src 'self' 'unsafe-eval' https://www2.gov.bc.ca https://*.openstreetmap.org;style-src 'self' 'unsafe-inline' https://fonts.googleapis.com https://use.fontawesome.com; font-src 'self' https://fonts.gstatic.com https://*.openstreetmap.org; img-src 'self' data: https://fonts.googleapis.com http://www.w3.org https://*.gov.bc.ca https://*.openstreetmap.org"
 		Referrer-Policy "same-origin"
 		Feature-Policy "fullscreen 'self'; camera 'none'; microphone 'none'"
 	}

frontend/src/components/DataTable.tsx

@@ -126,7 +126,7 @@ export default function DataTable() {
         onRowClick={(params) => setSelectedRow(params.row)}
       />
       <Dialog open={!!selectedRow} onClose={handleClose}>
-        <DialogTitle>Row Details</DialogTitle>
+        <DialogTitle>Details</DialogTitle>
         <DialogContent>
           <Table>
             <TableBody>

frontend/src/components/MapView.jsx

@@ -0,0 +1,81 @@
+import 'leaflet/dist/leaflet.css' // Import Leaflet CSS
+import L from 'leaflet'
+import { MapContainer, Marker, Popup, TileLayer } from 'react-leaflet'
+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'
+/**
+ * Renders a map with a marker at the supplied location
+ *
+ */
+const LeafletMapWithPoint = () => {
+  const [data, setData] = useState([])
+  const [dataFetched, setDataFetched] = useState(false)
+
+  useEffect(() => {
+    apiService
+      .getAxiosInstance()
+      .get('/omrr')
+      .then((response) => {
+        // iterate over the response data and set the state key is lat and long and details is rest of the data
+        const points = response?.data
+          ?.filter((item) => item.Latitude && item.Longitude)
+          ?.map((item) => {
+            return {
+              position: [item?.Latitude, item?.Longitude],
+              details: item,
+            }
+          })
+        setData(points)
+        console.log(points)
+        setDataFetched(true)
+      })
+      .catch((error) => {
+        console.error(error)
+      })
+  }, [])
+  // 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' },
+  ]
+  //define red icon
+  const redIcon = new L.Icon({
+    //read from assets
+    iconUrl: pin,
+    shadowUrl: shadow,
+    iconSize: [25, 41],
+    iconAnchor: [12, 41],
+    popupAnchor: [1, -34],
+    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>
+    </>
+  )
+}
+
+export default LeafletMapWithPoint

frontend/src/index.css

@@ -1,28 +1,33 @@
 @font-face {
-  font-family: 'BCSans';
-  font-style: normal;
-  src: url('../node_modules/@bcgov/bc-sans/fonts/BCSans-Regular.woff')
-    format('woff');
+    font-family: 'BCSans';
+    font-style: normal;
+    src: url('../node_modules/@bcgov/bc-sans/fonts/BCSans-Regular.woff') format('woff');
 }
+
 @font-face {
-  font-family: 'BCSans-Italic';
-  font-style: italic;
-  src: url('../node_modules/@bcgov/bc-sans/fonts/BCSans-Italic.woff')
-    format('woff');
+    font-family: 'BCSans-Italic';
+    font-style: italic;
+    src: url('../node_modules/@bcgov/bc-sans/fonts/BCSans-Italic.woff') format('woff');
 }
+
 @font-face {
-  font-family: 'BCSans-Bold';
-  font-weight: 700;
-  src: url('../node_modules/@bcgov/bc-sans/fonts/BCSans-Bold.woff')
-    format('woff');
+    font-family: 'BCSans-Bold';
+    font-weight: 700;
+    src: url('../node_modules/@bcgov/bc-sans/fonts/BCSans-Bold.woff') format('woff');
 }
+
 @font-face {
-  font-family: 'BCSans-BoldItalic';
-  font-style: italic;
-  font-weight: 700;
-  src: url('../node_modules/@bcgov/bc-sans/fonts/BCSans-BoldItalic.woff')
-    format('woff');
+    font-family: 'BCSans-BoldItalic';
+    font-style: italic;
+    font-weight: 700;
+    src: url('../node_modules/@bcgov/bc-sans/fonts/BCSans-BoldItalic.woff') format('woff');
 }
+
 .MuiDrawer-paperAnchorLeft {
-  margin-top: 4.2em !important;
+    margin-top: 4.2em !important;
+}
+
+.map-container {
+    border-radius: 4px;
+    z-index: 1;
 }

frontend/src/routes/index.tsx

@@ -2,14 +2,14 @@ import { Routes, Route } from 'react-router-dom'
 import NotFound from '@/components/NotFound'
 import Dashboard from '@/components/Dashboard'
 import DataTable from '@/components/DataTable'
-//import MapComponent from '@/components/MapView'
+import LeafletMapWithPoint from '@/components/MapView'
 
 export default function AppRoutes() {
   return (
     <Routes>
       <Route path="/" element={<Dashboard />} />
       <Route path="/table" element={<DataTable />} />
-      {/*<Route path="/map" element={<MapComponent />} />*/}
+      <Route path="/map" element={<LeafletMapWithPoint />} />
       <Route path="*" element={<NotFound />} />
     </Routes>
   )