1 |
48690561
|
Vaclav Honzik
|
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 |
fc8a530f
|
Vaclav Honzik
|
import L, { Map as LeafletMap } from 'leaflet'
|
11 |
|
|
import { } from 'leaflet.fullscreen'
|
12 |
48690561
|
Vaclav Honzik
|
|
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
|