feat: leaflet marker cluster (#65)

* added marker cluster, modified map to set a cluster

* remove console log

* meant to push this package file

Author: amandamartin-dev

package-lock.json

@@ -10,6 +10,7 @@
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
     "react-leaflet": "^4.0.0",
+    "react-leaflet-cluster": "^2.0.0",
     "react-scripts": "5.0.1",
     "serve": "^12.0.1",
     "socket.io-client": "^4.5.1",
@@ -48,4 +49,4 @@
   "overrides": {
     "autoprefixer": "10.4.5"
   }
-}
+}

package.json

@@ -1,3 +1,4 @@
+import MarkerClusterGroup from 'react-leaflet-cluster'
 import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";
 import * as L from "leaflet";
 import "leaflet/dist/leaflet.css";
@@ -16,6 +17,9 @@ function Map({ events }) {
         attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
         url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
       />
+      <MarkerClusterGroup
+        chunkedLoading
+      >
       {events.map(event => (
         <>
           <Marker
@@ -38,6 +42,7 @@ function Map({ events }) {
           </Marker>
         </>
       ))}
+      </MarkerClusterGroup>
       <Version />
     </MapContainer>
   );