1
|
import { ThemeProvider } from '@mui/material'
|
2
|
import { useRef, useEffect } from 'react'
|
3
|
import { MapContainer, TileLayer } from 'react-leaflet'
|
4
|
import { useSelector } from 'react-redux'
|
5
|
import mapConfig from '../../../config/mapConfig'
|
6
|
import { RootState } from '../../redux/store'
|
7
|
import { buildTheme } from '../../Theme/ThemeWrapper'
|
8
|
import RightClickPopupMenu from '../Import/ImportContextMenu'
|
9
|
import MapPath from './MapPath'
|
10
|
import L, { Map as LeafletMap } from 'leaflet'
|
11
|
import { } from 'leaflet.fullscreen'
|
12
|
|
13
|
const mapTheme = buildTheme('light')
|
14
|
|
15
|
const Map = () => {
|
16
|
|
17
|
const mapCenter = useSelector((state: RootState) => state.trackingTool.mapCenter)
|
18
|
|
19
|
const mapRef = useRef<LeafletMap | undefined>(undefined)
|
20
|
useEffect(() => {
|
21
|
if (!mapRef || !mapRef.current) {
|
22
|
return
|
23
|
}
|
24
|
|
25
|
const map = mapRef.current
|
26
|
map.setView(mapCenter, mapConfig.defaultZoom, {
|
27
|
animate: true,
|
28
|
})
|
29
|
}, [mapCenter, mapRef])
|
30
|
|
31
|
return (
|
32
|
<ThemeProvider theme={mapTheme}>
|
33
|
<MapContainer
|
34
|
center={[mapCenter[0], mapCenter[1]]}
|
35
|
zoom={mapConfig.defaultZoom}
|
36
|
style={{ height: '100%', minHeight: '100%' }}
|
37
|
whenCreated={(map) => {
|
38
|
mapRef.current = map
|
39
|
}}
|
40
|
>
|
41
|
<TileLayer
|
42
|
attribution={mapConfig.attribution}
|
43
|
url={mapConfig.url}
|
44
|
/>
|
45
|
<MapPath />
|
46
|
<RightClickPopupMenu />
|
47
|
</MapContainer>
|
48
|
</ThemeProvider>
|
49
|
)
|
50
|
}
|
51
|
|
52
|
export default Map
|