diff options
| -rw-r--r-- | modern/src/map/PositionsMap.js | 7 | ||||
| -rw-r--r-- | modern/src/settings/PreferencesPage.js | 5 | ||||
| -rw-r--r-- | web/l10n/en.json | 1 |
3 files changed, 11 insertions, 2 deletions
diff --git a/modern/src/map/PositionsMap.js b/modern/src/map/PositionsMap.js index 033ec760..2a5be791 100644 --- a/modern/src/map/PositionsMap.js +++ b/modern/src/map/PositionsMap.js @@ -4,6 +4,7 @@ import { useDispatch, useSelector } from 'react-redux'; import { map } from './Map'; import { getStatusColor } from '../common/formatter'; import { devicesActions } from '../store'; +import usePersistedState from '../common/usePersistedState'; const PositionsMap = ({ positions }) => { const id = 'positions'; @@ -12,6 +13,8 @@ const PositionsMap = ({ positions }) => { const dispatch = useDispatch(); const devices = useSelector((state) => state.devices.items); + const [mapCluster] = usePersistedState('mapCluster', true); + const createFeature = (devices, position) => { const device = devices[position.deviceId]; return { @@ -52,7 +55,7 @@ const PositionsMap = ({ positions }) => { type: 'FeatureCollection', features: [], }, - cluster: true, + cluster: mapCluster, clusterMaxZoom: 14, clusterRadius: 50, }); @@ -116,7 +119,7 @@ const PositionsMap = ({ positions }) => { map.removeSource(id); } }; - }, [clusters, onMarkerClick, onClusterClick]); + }, [mapCluster, clusters, onMarkerClick, onClusterClick]); useEffect(() => { map.getSource(id).setData({ diff --git a/modern/src/settings/PreferencesPage.js b/modern/src/settings/PreferencesPage.js index d9d0c87e..3c7862c7 100644 --- a/modern/src/settings/PreferencesPage.js +++ b/modern/src/settings/PreferencesPage.js @@ -25,6 +25,7 @@ const PreferencesPage = () => { const [mapLiveRoutes, setMapLiveRoutes] = usePersistedState('mapLiveRoutes', false); const [mapFollow, setMapFollow] = usePersistedState('mapFollow', false); + const [mapCluster, setMapCluster] = usePersistedState('mapCluster', true); return ( <OptionsLayout> @@ -59,6 +60,10 @@ const PreferencesPage = () => { control={<Checkbox checked={mapFollow} onChange={(event) => setMapFollow(event.target.checked)} />} label={t('deviceFollow')} /> + <FormControlLabel + control={<Checkbox checked={mapCluster} onChange={(event) => setMapCluster(event.target.checked)} />} + label={t('mapClustering')} + /> </AccordionDetails> </Accordion> </Container> diff --git a/web/l10n/en.json b/web/l10n/en.json index 4e09eac6..cd8b39b9 100644 --- a/web/l10n/en.json +++ b/web/l10n/en.json @@ -273,6 +273,7 @@ "mapLiveRoutes": "Live Routes", "mapCurrentLocation": "Current Location", "mapPoiLayer": "POI Layer", + "mapClustering": "Clustering", "stateTitle": "State", "stateName": "Attribute", "stateValue": "Value", |