Revize 76e15218

dummy path with arrows example

re #9547

frontend/src/features/TrackingTool/TrackingTool.tsx

@@ -1 +1 @@
 import { Button, Grid, Stack, Typography } from '@mui/material'
 import { Fragment } from 'react'
 import AddIcon from '@mui/icons-material/Add'
-import { MapContainer, Marker, Popup, TileLayer } from 'react-leaflet'
+import { MapContainer, Marker, Polyline, Popup, TileLayer } from 'react-leaflet'
 import mapConfig from '../../config/mapConfig'
+import TextPath from 'react-leaflet-textpath'
 
 // Page with tracking tool
 const TrackingTool = () => {
+    const generateDummyPath = () => {
+        // Sample dummy path to display
+        const dummyPath = []
+        for (let i = 0; i < 10; i += 1) {
+            dummyPath.push({
+                latitude:
+                    mapConfig.defaultCoordinates[0] +
+                    i * 0.1 +
+                    Math.random() * 0.1,
+                longitude:
+                    mapConfig.defaultCoordinates[1] +
+                    i * 0.1 +
+                    Math.random() * 0.1,
+            })
+        }
+        return dummyPath
+    }
+
+    const createDummyPathPolylines = () => {
+        const dummyPath = generateDummyPath()
+        const polylines: any[] = []
+
+        if (dummyPath.length < 2) {
+            return []
+        }
+
+        for (let i = 0; i < dummyPath.length - 1; i += 1) {
+            polylines.push(
+                // <Polyline
+                //     key={i}
+                //     positions={[
+                //         [dummyPath[i].latitude, dummyPath[i].longitude],
+                //         [dummyPath[i + 1].latitude, dummyPath[i + 1].longitude],
+                //     ]}
+                //     color="red"
+                //     weight={5}
+                //     opacity={1}
+
+                //     smoothFactor={1}
+                // >
+                //     <Popup>Caesar 🥗 War Path (Allegedly)</Popup>
+                //     </Polyline>
+                <TextPath
+                    positions={[
+                        [dummyPath[i].latitude, dummyPath[i].longitude],
+                        [dummyPath[i + 1].latitude, dummyPath[i + 1].longitude],
+                    ]}
+                    text="►"
+                    attributes={{
+                        'font-size': 25,
+                        'fill': 'blue'
+                    }}
+                    repeat
+                    center
+                    weight={10}
+                >
+                    <Popup>Caesar 🥗 War Path (Allegedly)</Popup>
+                </TextPath>
+            )
+        }
+
+        return polylines
+    }
+
+    const polylines = createDummyPathPolylines()
 
     return (
         <Fragment>
@@ -44 +110 @@
                         </Button>
                     </Stack>
                 </Grid>
-                <Grid item xs={12} md={8} style={{minHeight: '60vh', maxHeight: '100vh', width: '100%'}}>
+                <Grid
+                    item
+                    xs={12}
+                    md={8}
+                    style={{
+                        minHeight: '60vh',
+                        maxHeight: '100vh',
+                        width: '100%',
+                    }}
+                >
                     <MapContainer
-                        center={[mapConfig.defaultCoordinates[0], mapConfig.defaultCoordinates[1]]}
+                        center={[
+                            mapConfig.defaultCoordinates[0],
+                            mapConfig.defaultCoordinates[1],
+                        ]}
                         zoom={mapConfig.defaultZoom}
                         style={{ height: '100%', minHeight: '100%' }}
                     >
-                    <TileLayer attribution={mapConfig.attribution} url={mapConfig.url} />
-                        
+                        <TileLayer
+                            attribution={mapConfig.attribution}
+                            url={mapConfig.url}
+                        />
+                        {polylines}
                     </MapContainer>
                 </Grid>
             </Grid>