1
|
import { Button, Grid, Stack, Typography } from '@mui/material'
|
2
|
import { Fragment } from 'react'
|
3
|
import AddIcon from '@mui/icons-material/Add'
|
4
|
import { MapContainer, Marker, Polyline, Popup, TileLayer } from 'react-leaflet'
|
5
|
import mapConfig from '../../config/mapConfig'
|
6
|
import TextPath from 'react-leaflet-textpath'
|
7
|
|
8
|
// Page with tracking tool
|
9
|
const TrackingTool = () => {
|
10
|
const generateDummyPath = () => {
|
11
|
// Sample dummy path to display
|
12
|
const dummyPath = []
|
13
|
for (let i = 0; i < 10; i += 1) {
|
14
|
dummyPath.push({
|
15
|
latitude:
|
16
|
mapConfig.defaultCoordinates[0] +
|
17
|
i * 0.1 +
|
18
|
Math.random() * 0.1,
|
19
|
longitude:
|
20
|
mapConfig.defaultCoordinates[1] +
|
21
|
i * 0.1 +
|
22
|
Math.random() * 0.1,
|
23
|
})
|
24
|
}
|
25
|
return dummyPath
|
26
|
}
|
27
|
|
28
|
const createDummyPathPolylines = () => {
|
29
|
const dummyPath = generateDummyPath()
|
30
|
const polylines: any[] = []
|
31
|
|
32
|
if (dummyPath.length < 2) {
|
33
|
return []
|
34
|
}
|
35
|
|
36
|
for (let i = 0; i < dummyPath.length - 1; i += 1) {
|
37
|
polylines.push(
|
38
|
// <Polyline
|
39
|
// key={i}
|
40
|
// positions={[
|
41
|
// [dummyPath[i].latitude, dummyPath[i].longitude],
|
42
|
// [dummyPath[i + 1].latitude, dummyPath[i + 1].longitude],
|
43
|
// ]}
|
44
|
// color="red"
|
45
|
// weight={5}
|
46
|
// opacity={1}
|
47
|
|
48
|
// smoothFactor={1}
|
49
|
// >
|
50
|
// <Popup>Caesar 🥗 War Path (Allegedly)</Popup>
|
51
|
// </Polyline>
|
52
|
<TextPath
|
53
|
positions={[
|
54
|
[dummyPath[i].latitude, dummyPath[i].longitude],
|
55
|
[dummyPath[i + 1].latitude, dummyPath[i + 1].longitude],
|
56
|
]}
|
57
|
text="►"
|
58
|
attributes={{
|
59
|
'font-size': 25,
|
60
|
'fill': 'blue'
|
61
|
}}
|
62
|
repeat
|
63
|
center
|
64
|
weight={10}
|
65
|
>
|
66
|
<Popup>Caesar 🥗 War Path (Allegedly)</Popup>
|
67
|
</TextPath>
|
68
|
)
|
69
|
}
|
70
|
|
71
|
return polylines
|
72
|
}
|
73
|
|
74
|
const polylines = createDummyPathPolylines()
|
75
|
|
76
|
return (
|
77
|
<Fragment>
|
78
|
<Typography variant="h3" sx={{ mb: 2 }} fontWeight="bold">
|
79
|
Tracking Tool
|
80
|
</Typography>
|
81
|
|
82
|
<Grid container>
|
83
|
<Grid item xs={12} md={4}>
|
84
|
<Stack
|
85
|
direction="row"
|
86
|
alignItems="flex-start"
|
87
|
spacing={2}
|
88
|
sx={{ m: 0, p: 0 }}
|
89
|
>
|
90
|
<Typography
|
91
|
variant="h5"
|
92
|
sx={{ mb: 2 }}
|
93
|
fontWeight="500"
|
94
|
>
|
95
|
Upload:
|
96
|
</Typography>
|
97
|
<Button
|
98
|
variant="contained"
|
99
|
color="primary"
|
100
|
startIcon={<AddIcon />}
|
101
|
>
|
102
|
Plaintext
|
103
|
</Button>
|
104
|
<Button
|
105
|
variant="contained"
|
106
|
color="primary"
|
107
|
startIcon={<AddIcon />}
|
108
|
>
|
109
|
File
|
110
|
</Button>
|
111
|
</Stack>
|
112
|
</Grid>
|
113
|
<Grid
|
114
|
item
|
115
|
xs={12}
|
116
|
md={8}
|
117
|
style={{
|
118
|
minHeight: '60vh',
|
119
|
maxHeight: '100vh',
|
120
|
width: '100%',
|
121
|
}}
|
122
|
>
|
123
|
<MapContainer
|
124
|
center={[
|
125
|
mapConfig.defaultCoordinates[0],
|
126
|
mapConfig.defaultCoordinates[1],
|
127
|
]}
|
128
|
zoom={mapConfig.defaultZoom}
|
129
|
style={{ height: '100%', minHeight: '100%' }}
|
130
|
>
|
131
|
<TileLayer
|
132
|
attribution={mapConfig.attribution}
|
133
|
url={mapConfig.url}
|
134
|
/>
|
135
|
{polylines}
|
136
|
</MapContainer>
|
137
|
</Grid>
|
138
|
</Grid>
|
139
|
</Fragment>
|
140
|
)
|
141
|
}
|
142
|
|
143
|
export default TrackingTool
|