Improves home page chapter map

frontend/__tests__/unit/pages/Home.test.tsx

@@ -114,7 +114,7 @@ describe('Home', () => {
     render(<Home />)
 
     await waitFor(() => {
-      expect(screen.getByText('OWASP Chapters Nearby')).toBeInTheDocument()
+      expect(screen.getByText('OWASP Chapters Worldwide')).toBeInTheDocument()
     })
   })
 

frontend/src/components/CardDetailsPage.tsx

@@ -67,6 +67,7 @@ const DetailsCard = ({
             <div className="mb-8 h-[250px] md:col-span-4 md:h-auto">
               <ChapterMap
                 geoLocData={geolocationData ? [geolocationData] : []}
+                showLocal={true}
                 style={{
                   height: '100%',
                   width: '100%',

frontend/src/components/ChapterMap.tsx

@@ -8,14 +8,17 @@ import { GeoLocDataAlgolia, GeoLocDataGraphQL } from 'types/chapter'
 
 const ChapterMap = ({
   geoLocData,
+  showLocal,
   style,
 }: {
   geoLocData: GeoLocDataGraphQL[] | GeoLocDataAlgolia[]
+  showLocal: boolean
   style: React.CSSProperties
 }) => {
   const mapRef = useRef<L.Map | null>(null)
+  const markerClusterRef = useRef<L.MarkerClusterGroup | null>(null)
 
-  const normalizedData = useMemo(() => {
+  const chapters = useMemo(() => {
     return geoLocData.map((chapter) => ({
       lat: '_geoloc' in chapter ? chapter._geoloc.lat : chapter.geoLocation.lat,
       lng: '_geoloc' in chapter ? chapter._geoloc.lng : chapter.geoLocation.lng,
@@ -24,14 +27,13 @@ const ChapterMap = ({
     }))
   }, [geoLocData])
 
-  //for reference: https://leafletjs.com/reference.html#map-example
   useEffect(() => {
     if (!mapRef.current) {
       mapRef.current = L.map('chapter-map', {
-        worldCopyJump: false, // Prevents the map from wrapping around the world
+        worldCopyJump: false,
         maxBounds: [
-          [-90, -180], // Southwest corner of the map bounds (latitude, longitude)
-          [90, 180], // Northeast corner of the map bounds (latitude, longitude)
+          [-90, -180],
+          [90, 180],
         ],
         maxBoundsViscosity: 1.0,
       }).setView([20, 0], 2)
@@ -43,29 +45,28 @@ const ChapterMap = ({
     }
 
     const map = mapRef.current
-
     // Remove previous markers
     map.eachLayer((layer) => {
       if (layer instanceof L.Marker || layer instanceof L.LayerGroup) {
         map.removeLayer(layer)
       }
     })
 
+    // Create a new marker cluster group
     const markerClusterGroup = L.markerClusterGroup()
     const bounds: [number, number][] = []
-    normalizedData.forEach((chapter) => {
+    markerClusterRef.current = markerClusterGroup
+    chapters.forEach((chapter) => {
       const markerIcon = new L.Icon({
-        iconAnchor: [12, 41], // Anchor point
+        iconAnchor: [12, 41],
         iconRetinaUrl: '/img/marker-icon-2x.png',
-        iconSize: [25, 41], // Default size for Leaflet markers
+        iconSize: [25, 41],
         iconUrl: '/img/marker-icon.png',
-        popupAnchor: [1, -34], // Popup position relative to marker
-        shadowSize: [41, 41], // Shadow size
+        popupAnchor: [1, -34],
+        shadowSize: [41, 41],
         shadowUrl: '/img/marker-shadow.png',
       })
-      const marker = L.marker([chapter.lat, chapter.lng], {
-        icon: markerIcon,
-      })
+      const marker = L.marker([chapter.lat, chapter.lng], { icon: markerIcon })
       const popup = L.popup()
       const popupContent = document.createElement('div')
       popupContent.className = 'popup-content'
@@ -81,12 +82,19 @@ const ChapterMap = ({
 
     map.addLayer(markerClusterGroup)
 
-    if (bounds.length > 0) {
-      map.fitBounds(bounds as L.LatLngBoundsExpression, { maxZoom: 10 })
+    if (showLocal) {
+      const maxNearestChapters = 5
+      const localChapters = chapters.slice(0, maxNearestChapters - 1)
+      const localBounds = L.latLngBounds(localChapters.map((ch) => [ch.lat, ch.lng]))
+      const firstChapter = chapters[0]
+
+      const maxZoom = 7
+      map.setView([firstChapter.lat, firstChapter.lng], maxZoom)
+      map.fitBounds(localBounds, { maxZoom: maxZoom })
     }
-  }, [normalizedData])
+  }, [chapters, showLocal])
 
-  return <div id="chapter-map" className="rounded-lg dark:bg-[#212529]" style={style} />
+  return <div id="chapter-map" style={style} />
 }
 
 export default ChapterMap

frontend/src/pages/Chapters.tsx

@@ -92,6 +92,7 @@ const ChaptersPage = () => {
         {chapters.length > 0 && (
           <ChapterMap
             geoLocData={searchQuery ? chapters : geoLocData}
+            showLocal={true}
             style={{ height: '400px', width: '100%', zIndex: '0' }}
           />
         )}

frontend/src/pages/Home.tsx

@@ -55,7 +55,7 @@ export default function Home() {
         indexName: 'chapters',
         query: '',
         currentPage: 1,
-        hitsPerPage: 25,
+        hitsPerPage: 1000,
       }
       const data: AlgoliaResponseType<ChapterTypeAlgolia> = await fetchAlgoliaData(
         searchParams.indexName,
@@ -205,14 +205,15 @@ export default function Home() {
           </div>
         </SecondaryCard>
       </div>
-      <TopContributors contributors={data.topContributors} maxInitialDisplay={9} />
       <div className="mb-20">
-        <h2 className="mb-6 text-3xl font-semibold">OWASP Chapters Nearby</h2>
+        <h2 className="mb-6 text-3xl font-semibold">OWASP Chapters Worldwide</h2>
         <ChapterMap
           geoLocData={geoLocData}
+          showLocal={false}
           style={{ height: '400px', width: '100%', zIndex: '0' }}
         />
       </div>
+      <TopContributors contributors={data.topContributors} maxInitialDisplay={9} />
       <div className="grid gap-4 md:grid-cols-2">
         <ItemCardList
           title="Recent Issues"

frontend/src/pages/SnapshotDetails.tsx

@@ -146,6 +146,7 @@ const SnapshotDetailsPage: React.FC = () => {
             <div className="mb-4">
               <ChapterMap
                 geoLocData={snapshot.newChapters}
+                showLocal={false}
                 style={{ height: '400px', width: '100%', zIndex: '0' }}
               />
             </div>