fix broken map marker images on the members map (#1421)

* fix broken map marker images on the members map

* Prettified Code!

* fix broken map marker images on the members map

* Prettified Code!

* Restore development mode map disabled message

Re-enable development mode message for MemberMap component.

* return `L.Icon` instead of `L.Icon.Default` - this fixes the broken images.

Signed-off-by: Joe Karow <[email protected]>

* Prettified Code!

* Enable local dev of map view

---------

Signed-off-by: Joe Karow <[email protected]>
Co-authored-by: pedaars <[email protected]>
Co-authored-by: Joe Karow <[email protected]>
Co-authored-by: Dan Ott <[email protected]>
Co-authored-by: danieltott <[email protected]>

Author: 3 people

src/app/members/map-loader.tsx

@@ -1,10 +1,47 @@
 'use client';
 
 import dynamic from 'next/dynamic';
+import { CSSProperties, useEffect, useRef, useState } from 'react';
+import type { MappableMember } from '@/content/members/types';
+
+const loaderStyle: CSSProperties = {
+	aspectRatio: '16/6',
+	minHeight: 400,
+	position: 'relative',
+	display: 'flex',
+	justifyContent: 'center',
+	alignItems: 'center',
+};
+
+export function MapLoaderDev({ members }: { members: MappableMember[] }) {
+	const [toLoad, setToLoad] = useState(false);
+	const hasLoadedOnce = useRef(false);
+
+	useEffect(() => {
+		if (!hasLoadedOnce.current && typeof window !== 'undefined') {
+			window.setTimeout(() => {
+				setToLoad(true);
+			}, 4000);
+			hasLoadedOnce.current = true;
+		}
+	}, []);
+
+	if (toLoad) {
+		return <MapDynamicLoader members={members} />;
+	}
+
+	return <div style={loaderStyle}>Loading...</div>;
+}
+
+export const MapDynamicLoader = dynamic(
+	() => import('@/components/MemberMap'),
+	{
+		loading: () => <div style={loaderStyle}>Loading...</div>,
+		ssr: false,
+	},
+);
 
 export const MapLoader = dynamic(() => import('@/components/MemberMap'), {
-	loading: () => (
-		<div style={{ aspectRatio: '16/9', minHeight: 400 }}>Loading...</div>
-	),
+	loading: () => <div style={loaderStyle}>Loading...</div>,
 	ssr: false,
 });

src/app/members/page.tsx

@@ -8,7 +8,7 @@ import { createMetaData } from '@/util/createMetaData.server';
 import type { MappableMember } from '@/content/members/types';
 import 'leaflet/dist/leaflet.css';
 import { Suspense } from 'react';
-import { MapLoader } from './map-loader';
+import { MapLoader, MapLoaderDev } from './map-loader';
 
 export const metadata = createMetaData({
 	title: 'Virtual Coffee Members',
@@ -39,7 +39,11 @@ export default async function EventsIndex() {
 				</div>
 
 				<Suspense>
-					<MapLoader members={mapMembers} />
+					{process.env.NODE_ENV === 'development' ? (
+						<MapLoaderDev members={mapMembers} />
+					) : (
+						<MapLoader members={mapMembers} />
+					)}
 				</Suspense>
 			</div>
 			<div className="bg-light py-5">

src/app/monthlychallenges/(challenges)/nov-2023/page.tsx

@@ -1,4 +1,3 @@
- 
 import { Fragment } from 'react';
 import { createMetaData } from '@/util/createMetaData.server';
 import { getWritingChallengeData } from '@/data/monthlyChallenges/NaNoWriMo';

src/app/monthlychallenges/(challenges)/nov-2024/page.tsx

@@ -1,4 +1,3 @@
- 
 import { Fragment } from 'react';
 import { createMetaData } from '@/util/createMetaData.server';
 import { getWritingChallengeData } from '@/data/monthlyChallenges/NaNoWriMo';

src/components/MemberMap.tsx

@@ -7,8 +7,6 @@ import { MapContainer, Marker, TileLayer, Popup, useMap } from 'react-leaflet';
 import MarkerClusterGroup from 'react-leaflet-cluster';
 import 'leaflet/dist/leaflet.css';
 
-const defaultCustomIcon = '/assets/images/virtual-coffee-mug-circle.svg';
-
 const createClusterCustomIcon = function (cluster: L.MarkerCluster) {
 	return L.divIcon({
 		html: `<span>${cluster.getChildCount()}</span>`,
@@ -18,11 +16,10 @@ const createClusterCustomIcon = function (cluster: L.MarkerCluster) {
 };
 
 const createCustomIcon = function (avatarUrl?: string) {
-	return new L.Icon.Default({
-		iconUrl: avatarUrl || defaultCustomIcon,
+	return new L.Icon({
+		iconUrl: avatarUrl || 'assets/images/virtual-coffee-mug-circle.svg',
 		iconSize: new L.Point(33, 33, true),
 		className: 'leaflet-custom-marker',
-		shadowUrl: undefined,
 	});
 };
 
@@ -44,8 +41,8 @@ function Markers({ members }: { members: MappableMember[] }) {
 
 	return (
 		<>
-			{members.map((member) => {
-				const customIcon = createCustomIcon(member.avatarUrl);
+			{members?.map((member) => {
+				const customIcon = createCustomIcon(member?.avatarUrl);
 
 				return (
 					<Marker
@@ -70,23 +67,6 @@ function Markers({ members }: { members: MappableMember[] }) {
 }
 
 export default function MemberMap({ members }: { members: MappableMember[] }) {
-	if (process.env.NODE_ENV === 'development') {
-		return (
-			<div
-				style={{
-					aspectRatio: '16/6',
-					minHeight: 400,
-					position: 'relative',
-					display: 'flex',
-					justifyContent: 'center',
-					alignItems: 'center',
-				}}
-			>
-				Map disabled in local dev
-			</div>
-		);
-	}
-
 	return (
 		<div>
 			<MapContainer