AlertMap using leaflet

Author: ioRekz

package.json

@@ -19,13 +19,16 @@
     "@mui/icons-material": "^7.2.0",
     "@mui/material": "^7.2.0",
     "@tanstack/react-query": "^5.82.0",
+    "@types/leaflet": "^1.9.20",
     "axios": "^1.10.0",
     "i18next": "^25.3.2",
     "i18next-browser-languagedetector": "^8.2.0",
+    "leaflet": "^1.9.4",
     "moment-timezone": "^0.6.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-i18next": "^15.6.0",
+    "react-leaflet": "^5.0.0",
     "react-router-dom": "^7.6.3",
     "zod": "^3.25.76"
   },

pnpm-lock.yaml

@@ -26,6 +26,8 @@ export const AlertContainer = ({ alert, resetAlert }: AlertContainerType) => {
 
   // TODO : fetch detections of the selected sequence
 
+  console.log('AlertContainer', alert);
+
   return (
     <>
       {selectedSequence && (
@@ -42,7 +44,10 @@ export const AlertContainer = ({ alert, resetAlert }: AlertContainerType) => {
             <AlertImages sequence={selectedSequence} />
           </Grid>
           <Grid size={{ xs: 12, md: 3 }}>
-            <AlertInfos sequence={selectedSequence} />
+            <AlertInfos
+              sequence={selectedSequence}
+              sequences={alert.sequences}
+            />
           </Grid>
         </Grid>
       )}

src/assets/site-icon.png

@@ -1,25 +1,20 @@
 import SportsEsportsIcon from '@mui/icons-material/SportsEsports';
-import {
-  Box,
-  Button,
-  Divider,
-  Grid,
-  Skeleton,
-  Typography,
-} from '@mui/material';
+import { Button, Divider, Grid, Typography } from '@mui/material';
 import Paper from '@mui/material/Paper';
 import { useTheme } from '@mui/material/styles';
 
 import type { SequenceWithCameraInfoType } from '../../../utils/alerts';
 import { formatToDateTime } from '../../../utils/dates';
 import { useTranslationPrefix } from '../../../utils/useTranslationPrefix';
 import { AlertInfosSection } from './AlertInfosSection';
+import AlertMap from './AlertMap';
 
 interface AlertInfosType {
   sequence: SequenceWithCameraInfoType;
+  sequences?: SequenceWithCameraInfoType[];
 }
 
-export const AlertInfos = ({ sequence }: AlertInfosType) => {
+export const AlertInfos = ({ sequence, sequences }: AlertInfosType) => {
   const theme = useTheme();
   const { t } = useTranslationPrefix('alerts');
 
@@ -59,10 +54,7 @@ export const AlertInfos = ({ sequence }: AlertInfosType) => {
               {sequence.camera?.lat && `${sequence.camera.lat.toString()}, `}
               {sequence.camera?.lon.toString()}
             </AlertInfosSection>
-            <Box width="100%" height={200} bgcolor="white" borderRadius={1}>
-              {/* One Skeleton in place of the map */}
-              <Skeleton variant="rectangular" width="100%" height={200} />
-            </Box>
+            <AlertMap sequences={sequences ?? []} height={200} />
           </Grid>
           <Grid container spacing={2} direction="column">
             <Button

src/components/Alerts/AlertDetails/AlertContainer.tsx

@@ -0,0 +1,61 @@
+import 'leaflet/dist/leaflet.css';
+
+import L from 'leaflet';
+import { MapContainer, Marker, Popup, TileLayer } from 'react-leaflet';
+
+import siteIcon from '@/assets/site-icon.png';
+
+import type { SequenceWithCameraInfoType } from '../../../utils/alerts';
+
+const customIcon = new L.Icon({
+  iconUrl: siteIcon,
+  iconSize: [32, 32],
+  iconAnchor: [16, 32],
+  popupAnchor: [0, -32],
+});
+
+interface CameraMapProps {
+  sequences: SequenceWithCameraInfoType[];
+  height?: number;
+}
+
+export default function AlertMap({ sequences, height = 200 }: CameraMapProps) {
+  const coordinates = sequences.map(
+    (seq) => [seq.camera?.lat, seq.camera?.lon] as [number, number]
+  );
+
+  return (
+    <MapContainer
+      bounds={coordinates}
+      boundsOptions={{ padding: [20, 20] }}
+      style={{ height, width: '100%', borderRadius: 4 }}
+    >
+      <TileLayer
+        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+      />
+      {sequences.map((sequence) => (
+        <Marker
+          key={sequence.id}
+          position={
+            [sequence.camera?.lat, sequence.camera?.lon] as [number, number]
+          }
+          icon={customIcon}
+        >
+          <Popup>
+            <div>
+              <strong>{sequence.camera?.name}</strong>
+              <br />
+              Elevation: {sequence.camera?.elevation}m
+              <br />
+              Angle of view: {sequence.camera?.angle_of_view}°
+              <br />
+              Location: {sequence.camera?.lat.toFixed(6)},{' '}
+              {sequence.camera?.lon.toFixed(6)}
+            </div>
+          </Popup>
+        </Marker>
+      ))}
+    </MapContainer>
+  );
+}

src/components/Alerts/AlertDetails/AlertInfos.tsx

@@ -15,6 +15,11 @@ export default defineConfig({
     }),
     checker({ typescript: true }),
   ],
+  resolve: {
+    alias: {
+      '@': '/src',
+    },
+  },
   // https://vitest.dev/config/
   test: {
     globals: true,