Add location to f2f clusters (#899)

* Add f2f location clusters --------- Co-authored-by: Reckless_Satoshi <[email protected]>
RoboSats · Oct 17, 2023 · b7f4d55 · b7f4d55
1 parent 8aed0aa
commit b7f4d55
Show file tree

Hide file tree

Showing 4 changed files with 294 additions and 7 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -49,6 +49,7 @@
   },
   "dependencies": {
     "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@christopherpickering/react-leaflet-markercluster": "^1.1.0",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@mui/base": "^5.0.0-beta.7",

diff --git a/frontend/src/components/Map/index.tsx b/frontend/src/components/Map/index.tsx
@@ -4,10 +4,11 @@ import { MapContainer, GeoJSON, useMapEvents, TileLayer, Tooltip, Marker } from
 import { useTheme, LinearProgress } from '@mui/material';
 import { UseAppStoreType, AppContext } from '../../contexts/AppContext';
 import { GeoJsonObject } from 'geojson';
-import { Icon, LeafletMouseEvent, Point } from 'leaflet';
+import { Icon, LeafletMouseEvent } from 'leaflet';
 import { PublicOrder } from '../../models';
 import OrderTooltip from '../Charts/helpers/OrderTooltip';
 import getWorldmapGeojson from '../../geo/Web';
+import MarkerClusterGroup from '@christopherpickering/react-leaflet-markercluster';
 
 interface Props {
   orderType?: number;
@@ -91,14 +92,20 @@ const Map = ({
   };
 
   const getOrderMarkers = () => {
-    return orders.map((order) => {
-      if (!order.latitude || !order.longitude) return <></>;
-      return RobotMarker(order.id, [order.latitude, order.longitude], order.type || 0, order);
-    });
+    if (orders.length < 1) return <></>;
+    return (
+      <MarkerClusterGroup showCoverageOnHover={false} disableClusteringAtZoom={14}>
+        {orders.map((order) => {
+          if (!order.latitude || !order.longitude) return <></>;
+          return RobotMarker(order.id, [order.latitude, order.longitude], order.type || 0, order);
+        })}
+      </MarkerClusterGroup>
+    );
   };
 
   return (
     <MapContainer
+      maxZoom={15}
       center={center ?? [0, 0]}
       zoom={zoom ? zoom : 2}
       attributionControl={false}