From 53fd7f27b8a84b49ef7e4dafbc9e8ac985d7f3af Mon Sep 17 00:00:00 2001
From: Anton Tananaev <anton@traccar.org>
Date: Wed, 4 May 2022 17:26:35 -0700
Subject: Option to disable map clustering

---
 modern/src/map/PositionsMap.js         | 7 +++++--
 modern/src/settings/PreferencesPage.js | 5 +++++
 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",
-- 
cgit v1.2.3