1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
|
import React, { useRef, useLayoutEffect, useEffect, useState } from 'react';
import { useSelector } from 'react-redux';
import mapManager from './mapManager';
const MainMap = () => {
const containerEl = useRef(null);
const [mapReady, setMapReady] = useState(false);
const mapCenter = useSelector(state => {
if (state.devices.selectedId) {
const position = state.positions.items[state.devices.selectedId] || null;
if (position) {
return [position.longitude, position.latitude];
}
}
return null;
});
const createFeature = (state, position) => {
const device = state.devices.items[position.deviceId] || null;
return {
name: device ? device.name : '',
}
};
const positions = useSelector(state => ({
type: 'FeatureCollection',
features: Object.values(state.positions.items).map(position => ({
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [position.longitude, position.latitude]
},
properties: createFeature(state, position),
})),
}));
useLayoutEffect(() => {
const currentEl = containerEl.current;
currentEl.appendChild(mapManager.element);
if (mapManager.map) {
mapManager.map.resize();
}
return () => {
currentEl.removeChild(mapManager.element);
};
}, [containerEl]);
useEffect(() => {
mapManager.registerListener(() => setMapReady(true));
}, []);
useEffect(() => {
if (mapReady) {
mapManager.map.addSource('positions', {
'type': 'geojson',
'data': positions,
});
mapManager.addLayer('device-background', 'positions', 'background', '{name}');
mapManager.addLayer('device-icon', 'positions', 'icon-marker');
const bounds = mapManager.calculateBounds(positions.features);
if (bounds) {
mapManager.map.fitBounds(bounds, {
padding: 100,
maxZoom: 9
});
}
return () => {
mapManager.map.removeLayer('device-background');
mapManager.map.removeLayer('device-icon');
mapManager.map.removeSource('positions');
};
}
}, [mapReady]);
useEffect(() => {
mapManager.map.easeTo({
center: mapCenter
});
}, [mapCenter]);
useEffect(() => {
const source = mapManager.map.getSource('positions');
if (source) {
source.setData(positions);
}
}, [positions]);
const style = {
width: '100%',
height: '100%',
};
return <div style={style} ref={containerEl} />;
}
export default MainMap;
|
