feat: add marker clustering setting (#13)

closes #10

frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "realt-properties-map-frontend",
-  "version": "1.3.1",
+  "version": "1.4.0",
   "license": "Apache-2.0",
   "scripts": {
     "start": "PORT=3010 react-scripts start",

frontend/src/components/Map/MapMarkers.ts

@@ -125,6 +125,7 @@ export function MapMarkers({
     displayRmm,
     differentiateOwned,
     markerOpacity,
+    markerClustering,
   } = useAppSelector((state) => state.mapOptions);
   const selectedUrlParam = useAppSelector(selectedProperty);
 
@@ -166,9 +167,9 @@ export function MapMarkers({
     map.removeEventListener('moveend');
   }
 
-  function getCleanMarkerCluster() {
+  function getCleanMarkerCluster(clustering: number = 14) {
     return markerClusterGroup({
-      disableClusteringAtZoom: 14,
+      disableClusteringAtZoom: clustering,
       showCoverageOnHover: false,
       chunkedLoading: true,
       maxClusterRadius: 100,
@@ -179,7 +180,7 @@ export function MapMarkers({
 
   useEffect(() => {
     clearMap();
-    markerCluster = getCleanMarkerCluster();
+    markerCluster = getCleanMarkerCluster(markerClustering);
 
     filterProperties(properties, displayAll, displayGnosis, displayRmm, selectedUrlParam)
       .forEach((property) => {
@@ -213,7 +214,7 @@ export function MapMarkers({
       clearMap();
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [properties, displayAll, displayGnosis, displayRmm, differentiateOwned, markerOpacity]);
+  }, [properties, displayAll, displayGnosis, displayRmm, differentiateOwned, markerOpacity, markerClustering]);
 
   return null;
 }

frontend/src/components/Settings/Settings/MapOptions/MapMarkerClustering.tsx

@@ -0,0 +1,42 @@
+import { Grid, Slider } from "@mantine/core";
+import OpacityIcon from '@mui/icons-material/Opacity';
+import { useAppDispatch, useAppSelector } from "../../../../hooks/useInitStore";
+import { setMarkerClustering } from "../../../../store/mapOptions/mapOptionsReducer";
+import { selectMarkerClustering } from "../../../../store/mapOptions/mapOptionsSelector";
+import { useTranslation } from "react-i18next";
+
+export function MapMarkerClustering() {
+  const { t } = useTranslation('common');
+  const dispatch = useAppDispatch();
+  const markerClustering = useAppSelector(selectMarkerClustering);
+
+  function onClusteringChange(value: number) {
+    dispatch(setMarkerClustering(value));
+  }
+
+  return (
+    <Grid className="mt-2">
+      <Grid.Col span={12}>
+        <h3 className="text-base font-semibold leading-7">
+          <OpacityIcon className="inline-block mr-2" />
+          { t('settings.markersClustering') }
+        </h3>
+      </Grid.Col>
+      <Grid.Col span={12} className="mt-4">
+        <Slider
+          label={(value) => `zoom: ${value}`}
+          step={1}
+          min={10}
+          max={18}
+          defaultValue={markerClustering}
+          thumbLabel={t('settings.mapMarkersClustering')}
+          onChangeEnd={onClusteringChange}
+          marks={[
+            { value: 10, label: '10' },
+            { value: 14, label: `14 (${t('extra.default')})` },
+            { value: 18, label: '18' },
+          ]}/>
+      </Grid.Col>
+    </Grid>
+  )
+} 

frontend/src/components/Settings/Settings/MapOptions/MapOptions.tsx

@@ -7,6 +7,7 @@ import { setDifferentiateOwned, setDisplayAll, setDisplayGnosis, setDisplayRmm }
 import { SettingsPanelSection } from "../../SettingsPanelSection";
 import { selectWalletAddresses } from "../../../../store/settings/settingsSelector";
 import { MapMarkerOpacity } from "./MapMarkerOpacity";
+import { MapMarkerClustering } from "./MapMarkerClustering";
 
 export function MapOptions() {
   const { t } = useTranslation('common', { keyPrefix: 'mapOptions' });
@@ -65,6 +66,7 @@ export function MapOptions() {
         disabled={walletAddresses.length === 0}
         onChange={(e) => onDifferentiateOwned(e)} />
       <MapMarkerOpacity />
+      <MapMarkerClustering />
     </SettingsPanelSection>
   )
 }

frontend/src/i18next/locales/en/common.json

@@ -59,7 +59,9 @@
     "french": "French",
     "english": "English",
     "markersOpacity": "Markers Opacity",
+    "markersClustering": "Markers Clustering",
     "mapMarkersOpacity": "Map Markers Opacity",
+    "mapClustersOpacity": "Map Clusters Opacity",
     "generalOptions": {
       "title": "General Options",
       "displayStartTooltip": "Display start tooltip"
@@ -104,6 +106,7 @@
     "madeBy": "Made with ❤️ by",
     "baseOn": "Based on the work of",
     "startTooltip": "Add your wallets to get started",
-    "reportIssue": "Report an issue"
+    "reportIssue": "Report an issue",
+    "default": "Default"
   }
 }

frontend/src/i18next/locales/fr/common.json

@@ -59,7 +59,9 @@
     "french": "Français",
     "english": "Anglais",
     "markersOpacity": "Opacité des marqueurs",
+    "markersClustering": "Regroupement des marqueurs",
     "mapMarkersOpacity": "Opacité des marqueurs sur la carte",
+    "mapMarkersClustering": "Regroupement des marqueurs sur la carte",
     "generalOptions": {
       "title": "Options Générales",
       "displayStartTooltip": "Afficher l'info-bulle de démarrage"
@@ -104,6 +106,7 @@
     "madeBy": "Fait avec ❤️ par",
     "baseOn": "Basé sur le travail de",
     "startTooltip": "Ajouter vos portefeuilles pour commencer",
-    "reportIssue": "Signaler un problème"
+    "reportIssue": "Signaler un problème",
+    "default": "Défaut"
   }
 }

frontend/src/store/mapOptions/mapOptionsReducer.ts

@@ -9,6 +9,7 @@ interface MapOptionsState {
   displayRmm: boolean;
   differentiateOwned: boolean;
   markerOpacity: number;
+  markerClustering: number;
 }
 
 const initialState: MapOptionsState = getItem<MapOptionsState>(LOCAL_STORAGE_NAME, {
@@ -17,6 +18,7 @@ const initialState: MapOptionsState = getItem<MapOptionsState>(LOCAL_STORAGE_NAM
   displayRmm: true,
   differentiateOwned: true,
   markerOpacity: .8,
+  markerClustering: 14,
 });
 
 export const mapOptionsSlice = createSlice({
@@ -30,6 +32,7 @@ export const mapOptionsSlice = createSlice({
         displayRmm: action.payload.displayRmm,
         differentiateOwned: action.payload.differentiateOwned,
         markerOpacity: action.payload.markerOpacity,
+        markerClustering: action.payload.markerClustering,
       };
       setItem<MapOptionsState>(LOCAL_STORAGE_NAME, newState);
       return newState;
@@ -56,10 +59,22 @@ export const mapOptionsSlice = createSlice({
       }
       state.markerOpacity = action.payload;
       setItem<MapOptionsState>(LOCAL_STORAGE_NAME, state);
+    },
+    setMarkerClustering: (state, action: PayloadAction<number>) => {
+      state.markerClustering = action.payload;
+      setItem<MapOptionsState>(LOCAL_STORAGE_NAME, state);
     }
   }
 });
 
-export const { setAll, setDisplayAll, setDisplayGnosis, setDisplayRmm, setDifferentiateOwned, setMarkerOpacity } = mapOptionsSlice.actions;
+export const {
+  setAll,
+  setDisplayAll,
+  setDisplayGnosis,
+  setDisplayRmm,
+  setDifferentiateOwned,
+  setMarkerOpacity,
+  setMarkerClustering,
+} = mapOptionsSlice.actions;
 
 export default mapOptionsSlice.reducer;

frontend/src/store/mapOptions/mapOptionsSelector.ts

@@ -4,4 +4,6 @@ export const selectMapOptions = (state: RootState) => state.mapOptions;
 
 export const selectMarkerOpacity = (state: RootState) => state.mapOptions.markerOpacity;
 
-export const selectDifferentiateOwned = (state: RootState) => state.mapOptions.differentiateOwned;
+export const selectDifferentiateOwned = (state: RootState) => state.mapOptions.differentiateOwned;
+
+export const selectMarkerClustering = (state: RootState) => state.mapOptions.markerClustering;