aboutsummaryrefslogtreecommitdiff
path: root/modern/src/map/main
diff options
context:
space:
mode:
Diffstat (limited to 'modern/src/map/main')
-rw-r--r--modern/src/map/main/MapAccuracy.js56
-rw-r--r--modern/src/map/main/MapDefaultCamera.js52
-rw-r--r--modern/src/map/main/MapLiveRoutes.js83
-rw-r--r--modern/src/map/main/MapSelectedDevice.js31
-rw-r--r--modern/src/map/main/PoiMap.js87
5 files changed, 0 insertions, 309 deletions
diff --git a/modern/src/map/main/MapAccuracy.js b/modern/src/map/main/MapAccuracy.js
deleted file mode 100644
index 4f025b08..00000000
--- a/modern/src/map/main/MapAccuracy.js
+++ /dev/null
@@ -1,56 +0,0 @@
-import { useId, useEffect } from 'react';
-import circle from '@turf/circle';
-import { useTheme } from '@mui/styles';
-import { map } from '../core/MapView';
-
-const MapAccuracy = ({ positions }) => {
- const id = useId();
-
- const theme = useTheme();
-
- useEffect(() => {
- map.addSource(id, {
- type: 'geojson',
- data: {
- type: 'FeatureCollection',
- features: [],
- },
- });
- map.addLayer({
- source: id,
- id,
- type: 'fill',
- filter: [
- 'all',
- ['==', '$type', 'Polygon'],
- ],
- paint: {
- 'fill-color': theme.palette.geometry.main,
- 'fill-outline-color': theme.palette.geometry.main,
- 'fill-opacity': 0.25,
- },
- });
-
- return () => {
- if (map.getLayer(id)) {
- map.removeLayer(id);
- }
- if (map.getSource(id)) {
- map.removeSource(id);
- }
- };
- }, []);
-
- useEffect(() => {
- map.getSource(id)?.setData({
- type: 'FeatureCollection',
- features: positions
- .filter((position) => position.accuracy > 0)
- .map((position) => circle([position.longitude, position.latitude], position.accuracy * 0.001)),
- });
- }, [positions]);
-
- return null;
-};
-
-export default MapAccuracy;
diff --git a/modern/src/map/main/MapDefaultCamera.js b/modern/src/map/main/MapDefaultCamera.js
deleted file mode 100644
index 90b3061b..00000000
--- a/modern/src/map/main/MapDefaultCamera.js
+++ /dev/null
@@ -1,52 +0,0 @@
-import maplibregl from 'maplibre-gl';
-import { useEffect, useState } from 'react';
-import { useSelector } from 'react-redux';
-import { usePreference } from '../../common/util/preferences';
-import { map } from '../core/MapView';
-
-const MapDefaultCamera = () => {
- const selectedDeviceId = useSelector((state) => state.devices.selectedId);
- const positions = useSelector((state) => state.session.positions);
-
- const defaultLatitude = usePreference('latitude');
- const defaultLongitude = usePreference('longitude');
- const defaultZoom = usePreference('zoom', 0);
-
- const [initialized, setInitialized] = useState(false);
-
- useEffect(() => {
- if (selectedDeviceId) {
- setInitialized(true);
- } else if (!initialized) {
- if (defaultLatitude && defaultLongitude) {
- map.jumpTo({
- center: [defaultLongitude, defaultLatitude],
- zoom: defaultZoom,
- });
- setInitialized(true);
- } else {
- const coordinates = Object.values(positions).map((item) => [item.longitude, item.latitude]);
- if (coordinates.length > 1) {
- const bounds = coordinates.reduce((bounds, item) => bounds.extend(item), new maplibregl.LngLatBounds(coordinates[0], coordinates[1]));
- const canvas = map.getCanvas();
- map.fitBounds(bounds, {
- duration: 0,
- padding: Math.min(canvas.width, canvas.height) * 0.1,
- });
- setInitialized(true);
- } else if (coordinates.length) {
- const [individual] = coordinates;
- map.jumpTo({
- center: individual,
- zoom: Math.max(map.getZoom(), 10),
- });
- setInitialized(true);
- }
- }
- }
- }, [selectedDeviceId, initialized, defaultLatitude, defaultLongitude, defaultZoom, positions]);
-
- return null;
-};
-
-export default MapDefaultCamera;
diff --git a/modern/src/map/main/MapLiveRoutes.js b/modern/src/map/main/MapLiveRoutes.js
deleted file mode 100644
index 44cdc6ca..00000000
--- a/modern/src/map/main/MapLiveRoutes.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import { useId, useEffect } from 'react';
-import { useSelector } from 'react-redux';
-import { useTheme } from '@mui/styles';
-import { map } from '../core/MapView';
-import { useAttributePreference } from '../../common/util/preferences';
-
-const MapLiveRoutes = () => {
- const id = useId();
-
- const theme = useTheme();
-
- const type = useAttributePreference('mapLiveRoutes', 'none');
-
- const devices = useSelector((state) => state.devices.items);
- const selectedDeviceId = useSelector((state) => state.devices.selectedId);
-
- const history = useSelector((state) => state.session.history);
-
- useEffect(() => {
- if (type !== 'none') {
- map.addSource(id, {
- type: 'geojson',
- data: {
- type: 'Feature',
- geometry: {
- type: 'LineString',
- coordinates: [],
- },
- },
- });
- map.addLayer({
- source: id,
- id,
- type: 'line',
- layout: {
- 'line-join': 'round',
- 'line-cap': 'round',
- },
- paint: {
- 'line-color': ['get', 'color'],
- 'line-width': 2,
- },
- });
-
- return () => {
- if (map.getLayer(id)) {
- map.removeLayer(id);
- }
- if (map.getSource(id)) {
- map.removeSource(id);
- }
- };
- }
- return () => {};
- }, [type]);
-
- useEffect(() => {
- if (type !== 'none') {
- const deviceIds = Object.values(devices)
- .map((device) => device.id)
- .filter((id) => (type === 'selected' ? id === selectedDeviceId : true))
- .filter((id) => history.hasOwnProperty(id));
-
- map.getSource(id)?.setData({
- type: 'FeatureCollection',
- features: deviceIds.map((deviceId) => ({
- type: 'Feature',
- geometry: {
- type: 'LineString',
- coordinates: history[deviceId],
- },
- properties: {
- color: devices[deviceId].attributes['web.reportColor'] || theme.palette.geometry.main,
- },
- })),
- });
- }
- }, [theme, type, devices, selectedDeviceId, history]);
-
- return null;
-};
-
-export default MapLiveRoutes;
diff --git a/modern/src/map/main/MapSelectedDevice.js b/modern/src/map/main/MapSelectedDevice.js
deleted file mode 100644
index caf40cf8..00000000
--- a/modern/src/map/main/MapSelectedDevice.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import { useEffect } from 'react';
-
-import { useSelector } from 'react-redux';
-import dimensions from '../../common/theme/dimensions';
-import { map } from '../core/MapView';
-import { usePrevious } from '../../reactHelper';
-import { useAttributePreference } from '../../common/util/preferences';
-
-const MapSelectedDevice = () => {
- const selectedDeviceId = useSelector((state) => state.devices.selectedId);
- const previousDeviceId = usePrevious(selectedDeviceId);
-
- const selectZoom = useAttributePreference('web.selectZoom', 10);
- const mapFollow = useAttributePreference('mapFollow', false);
-
- const position = useSelector((state) => state.session.positions[selectedDeviceId]);
-
- useEffect(() => {
- if ((selectedDeviceId !== previousDeviceId || mapFollow) && position) {
- map.easeTo({
- center: [position.longitude, position.latitude],
- zoom: Math.max(map.getZoom(), selectZoom),
- offset: [0, -dimensions.popupMapOffset / 2],
- });
- }
- });
-
- return null;
-};
-
-export default MapSelectedDevice;
diff --git a/modern/src/map/main/PoiMap.js b/modern/src/map/main/PoiMap.js
deleted file mode 100644
index 07341183..00000000
--- a/modern/src/map/main/PoiMap.js
+++ /dev/null
@@ -1,87 +0,0 @@
-import { useId, useEffect, useState } from 'react';
-import { kml } from '@tmcw/togeojson';
-import { useTheme } from '@mui/styles';
-import { map } from '../core/MapView';
-import { useEffectAsync } from '../../reactHelper';
-import { usePreference } from '../../common/util/preferences';
-import { findFonts } from '../core/mapUtil';
-
-const PoiMap = () => {
- const id = useId();
-
- const theme = useTheme();
-
- const poiLayer = usePreference('poiLayer');
-
- const [data, setData] = useState(null);
-
- useEffectAsync(async () => {
- if (poiLayer) {
- const file = await fetch(poiLayer);
- const dom = new DOMParser().parseFromString(await file.text(), 'text/xml');
- setData(kml(dom));
- }
- }, [poiLayer]);
-
- useEffect(() => {
- if (data) {
- map.addSource(id, {
- type: 'geojson',
- data,
- });
- map.addLayer({
- source: id,
- id: 'poi-point',
- type: 'circle',
- paint: {
- 'circle-radius': 5,
- 'circle-color': theme.palette.geometry.main,
- },
- });
- map.addLayer({
- source: id,
- id: 'poi-line',
- type: 'line',
- paint: {
- 'line-color': theme.palette.geometry.main,
- 'line-width': 2,
- },
- });
- map.addLayer({
- source: id,
- id: 'poi-title',
- type: 'symbol',
- layout: {
- 'text-field': '{name}',
- 'text-anchor': 'bottom',
- 'text-offset': [0, -0.5],
- 'text-font': findFonts(map),
- 'text-size': 12,
- },
- paint: {
- 'text-halo-color': 'white',
- 'text-halo-width': 1,
- },
- });
- return () => {
- if (map.getLayer('poi-point')) {
- map.removeLayer('poi-point');
- }
- if (map.getLayer('poi-line')) {
- map.removeLayer('poi-line');
- }
- if (map.getLayer('poi-title')) {
- map.removeLayer('poi-title');
- }
- if (map.getSource(id)) {
- map.removeSource(id);
- }
- };
- }
- return () => {};
- }, [data]);
-
- return null;
-};
-
-export default PoiMap;
generated by cgit v1.2.3 (git 2.39.1) at 2024-09-23 07:34:13 +0000