Member map clustering (#1109)

* Install react leaflet cluster and add temporary icon

* Adjust temporary icon size and import leaflet styles

* Add custom cluster icon and styling

* Remove console.logs

* Remove remaining console logs and comments

* install leaflet.markercluster

* apply type to cluster param

* update colors

* update classname to share

* use member avatars when available

* add a bit of shadow

---------

Co-authored-by: Dan Ott <dan@dtott.com>

app/components/MemberMap.tsx

@@ -1,6 +1,27 @@
 import type { MappableMember } from 'members/types';
 import { useEffect } from 'react';
+import L from 'leaflet';
 import { MapContainer, Marker, TileLayer, Popup, useMap } from 'react-leaflet';
+import MarkerClusterGroup from 'react-leaflet-cluster';
+import 'leaflet/dist/leaflet.css';
+
+const defaultCustomIcon = require('../../public/assets/images/virtual-coffee-mug-circle.svg');
+
+const createClusterCustomIcon = function (cluster: L.MarkerCluster) {
+	return L.divIcon({
+		html: `<span>${cluster.getChildCount()}</span>`,
+		className: 'leaflet-custom-marker',
+		iconSize: L.point(33, 33, true),
+	});
+};
+
+const createCustomIcon = function (avatarUrl?: string) {
+	return new L.Icon.Default({
+		iconUrl: avatarUrl || defaultCustomIcon,
+		iconSize: new L.Point(33, 33, true),
+		className: 'leaflet-custom-marker',
+	});
+};
 
 function Markers({ members }: { members: MappableMember[] }) {
 	const map = useMap();
@@ -16,42 +37,64 @@ function Markers({ members }: { members: MappableMember[] }) {
 		);
 	}, [members, map]);
 
+	// avatarUrl
+
 	return (
 		<>
-			{members.map((member) => (
-				<Marker
-					key={member.github}
-					position={[member.location?.latitude, member.location?.longitude]}
-				>
-					<Popup>
-						<a href={`#member_${member.github}`}>{member.name}</a>
-						{member.location?.title && (
-							<>
-								{' - '}
-								{member.location?.title}
-							</>
-						)}
-					</Popup>
-				</Marker>
-			))}
+			{members.map((member) => {
+				const customIcon = createCustomIcon(member.avatarUrl);
+
+				return (
+					<Marker
+						key={member.github}
+						position={[member.location?.latitude, member.location?.longitude]}
+						icon={customIcon}
+					>
+						<Popup>
+							<a href={`#member_${member.github}`}>{member.name}</a>
+							{member.location?.title && (
+								<>
+									{' - '}
+									{member.location?.title}
+								</>
+							)}
+						</Popup>
+					</Marker>
+				);
+			})}
 		</>
 	);
 }
 
 export default function MemberMap({ members }: { members: MappableMember[] }) {
 	return (
-		<div style={{ aspectRatio: '16/6', minHeight: 400, position: 'relative' }}>
+		<div>
 			<MapContainer
 				center={[36.674222, -39.082187]}
 				zoom={1}
-				scrollWheelZoom={false}
+				scrollWheelZoom={true}
 				style={{ aspectRatio: '16/6', minHeight: 400, position: 'relative' }}
 			>
 				<TileLayer
 					attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
 					url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
 				/>
-				<Markers members={members} />
+				<MarkerClusterGroup
+					chunkedLoading
+					iconCreateFunction={createClusterCustomIcon}
+					maxClusterRadius={150}
+					spiderfyOnMaxZoom={true}
+					polygonOptions={{
+						fillColor: '#ffffff',
+						color: '#d9376e',
+						weight: 5,
+						opacity: 1,
+						fillOpacity: 0.8,
+					}}
+					showCoverageOnHover={true}
+				>
+					<Markers members={members} />
+				</MarkerClusterGroup>
 			</MapContainer>
 		</div>
 	);

package.json

@@ -69,6 +69,7 @@
 		"hast-util-to-string": "^2.0.0",
 		"hastscript": "^8.0.0",
 		"leaflet": "^1.9.4",
+		"leaflet.markercluster": "^1.5.3",
 		"luxon": "^3.4.3",
 		"markdown-it": "^13.0.2",
 		"mdast-util-toc": "^7.0.0",
@@ -80,6 +81,7 @@
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-leaflet": "^4.2.1",
+		"react-leaflet-cluster": "^2.1.0",
 		"react-router": "^6.17.0",
 		"react-router-dom": "^6.17.0",
 		"rehype-autolink-headings": "^6.1.1",
@@ -104,6 +106,7 @@
 		"@tailwindcss/forms": "^0.5.6",
 		"@tailwindcss/typography": "^0.5.10",
 		"@types/leaflet": "^1.9.7",
+		"@types/leaflet.markercluster": "^1.5.4",
 		"@types/luxon": "^3.3.3",
 		"@types/react": "^18.2.32",
 		"@types/react-dom": "^18.2.14",

styles/_base.scss

@@ -312,6 +312,22 @@ ul {
 	background: none;
 	justify-content: flex-end;
 }
+
 .text-sm {
 	font-size: 0.8rem;
 }
+
+.leaflet-custom-marker {
+	background: #ffffff;
+	border-radius: 50%;
+	color: #000000;
+	height: 33px;
+	// line-height: 37px;
+	text-align: center;
+	width: 33px;
+	border: 3px solid $pink;
+	display: flex !important;
+	justify-content: center;
+	align-items: center;
+	box-shadow: 1px 1px 5px 0px $pink;
+}