aboutsummaryrefslogtreecommitdiff
path: root/modern/src/map/PositionsMap.js
diff options
context:
space:
mode:
Diffstat (limited to 'modern/src/map/PositionsMap.js')
-rw-r--r--modern/src/map/PositionsMap.js71
1 files changed, 36 insertions, 35 deletions
diff --git a/modern/src/map/PositionsMap.js b/modern/src/map/PositionsMap.js
index 35d6d926..2de01d2c 100644
--- a/modern/src/map/PositionsMap.js
+++ b/modern/src/map/PositionsMap.js
@@ -3,9 +3,9 @@ import ReactDOM from 'react-dom';
import maplibregl from 'maplibre-gl';
import { Provider, useSelector } from 'react-redux';
+import { useHistory } from 'react-router-dom';
import { map } from './Map';
import store from '../store';
-import { useHistory } from 'react-router-dom';
import StatusView from './StatusView';
const PositionsMap = ({ positions }) => {
@@ -13,9 +13,9 @@ const PositionsMap = ({ positions }) => {
const clusters = `${id}-clusters`;
const history = useHistory();
- const devices = useSelector(state => state.devices.items);
+ const devices = useSelector((state) => state.devices.items);
- const deviceColor = device => {
+ const deviceColor = (device) => {
switch (device.status) {
case 'online':
return 'green';
@@ -33,15 +33,15 @@ const PositionsMap = ({ positions }) => {
name: device.name,
category: device.category || 'default',
color: deviceColor(device),
- }
+ };
};
const onMouseEnter = () => map.getCanvas().style.cursor = 'pointer';
const onMouseLeave = () => map.getCanvas().style.cursor = '';
- const onMarkerClick = useCallback(event => {
+ const onMarkerClick = useCallback((event) => {
const feature = event.features[0];
- let coordinates = feature.geometry.coordinates.slice();
+ const coordinates = feature.geometry.coordinates.slice();
while (Math.abs(event.lngLat.lng - coordinates[0]) > 180) {
coordinates[0] += event.lngLat.lng > coordinates[0] ? 360 : -360;
}
@@ -49,50 +49,52 @@ const PositionsMap = ({ positions }) => {
const placeholder = document.createElement('div');
ReactDOM.render(
<Provider store={store}>
- <StatusView deviceId={feature.properties.deviceId} onShowDetails={positionId => history.push(`/position/${positionId}`)} />
+ <StatusView deviceId={feature.properties.deviceId} onShowDetails={(positionId) => history.push(`/position/${positionId}`)} />
</Provider>,
- placeholder
+ placeholder,
);
new maplibregl.Popup({
offset: 25,
- anchor: 'top'
+ anchor: 'top',
})
.setDOMContent(placeholder)
.setLngLat(coordinates)
.addTo(map);
}, [history]);
- const onClusterClick = event => {
+ const onClusterClick = (event) => {
const features = map.queryRenderedFeatures(event.point, {
layers: [clusters],
});
const clusterId = features[0].properties.cluster_id;
map.getSource(id).getClusterExpansionZoom(clusterId, (error, zoom) => {
- if (!error) map.easeTo({
- center: features[0].geometry.coordinates,
- zoom: zoom,
- });
+ if (!error) {
+ map.easeTo({
+ center: features[0].geometry.coordinates,
+ zoom,
+ });
+ }
});
};
useEffect(() => {
map.addSource(id, {
- 'type': 'geojson',
- 'data': {
+ type: 'geojson',
+ data: {
type: 'FeatureCollection',
features: [],
},
- 'cluster': true,
- 'clusterMaxZoom': 14,
- 'clusterRadius': 50,
+ cluster: true,
+ clusterMaxZoom: 14,
+ clusterRadius: 50,
});
map.addLayer({
- 'id': id,
- 'type': 'symbol',
- 'source': id,
- 'filter': ['!', ['has', 'point_count']],
- 'layout': {
+ id,
+ type: 'symbol',
+ source: id,
+ filter: ['!', ['has', 'point_count']],
+ layout: {
'icon-image': '{category}-{color}',
'icon-allow-overlap': true,
'text-field': '{name}',
@@ -102,17 +104,17 @@ const PositionsMap = ({ positions }) => {
'text-font': ['Roboto Regular'],
'text-size': 12,
},
- 'paint': {
+ paint: {
'text-halo-color': 'white',
'text-halo-width': 1,
},
});
map.addLayer({
- 'id': clusters,
- 'type': 'symbol',
- 'source': id,
- 'filter': ['has', 'point_count'],
- 'layout': {
+ id: clusters,
+ type: 'symbol',
+ source: id,
+ filter: ['has', 'point_count'],
+ layout: {
'icon-image': 'background',
'text-field': '{point_count_abbreviated}',
'text-font': ['Roboto Regular'],
@@ -120,7 +122,6 @@ const PositionsMap = ({ positions }) => {
},
});
-
map.on('mouseenter', id, onMouseEnter);
map.on('mouseleave', id, onMouseLeave);
map.on('mouseenter', clusters, onMouseEnter);
@@ -129,7 +130,7 @@ const PositionsMap = ({ positions }) => {
map.on('click', clusters, onClusterClick);
return () => {
- Array.from(map.getContainer().getElementsByClassName('maplibregl-popup')).forEach(el => el.remove());
+ Array.from(map.getContainer().getElementsByClassName('maplibregl-popup')).forEach((el) => el.remove());
map.off('mouseenter', id, onMouseEnter);
map.off('mouseleave', id, onMouseLeave);
@@ -147,18 +148,18 @@ const PositionsMap = ({ positions }) => {
useEffect(() => {
map.getSource(id).setData({
type: 'FeatureCollection',
- features: positions.filter(it => devices.hasOwnProperty(it.deviceId)).map(position => ({
+ features: positions.filter((it) => devices.hasOwnProperty(it.deviceId)).map((position) => ({
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [position.longitude, position.latitude],
},
properties: createFeature(devices, position),
- }))
+ })),
});
}, [devices, positions]);
return null;
-}
+};
export default PositionsMap;