Fix loading group

oacore · Jun 14, 2024 · 8f56c90 · 8f56c90
1 parent c6e5326
commit 8f56c90
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 46 deletions.
diff --git a/main/global.css b/main/global.css
@@ -26,3 +26,8 @@ body,
 .leaflet-popup-tip {
   margin-top: -10px;
 }
+
+.leaflet-container .leaflet-bar a:first-child,
+.leaflet-container .leaflet-bar a:last-child {
+  text-decoration: none;
+}
diff --git a/modules/map/map.jsx b/modules/map/map.jsx
@@ -1,11 +1,12 @@
-import React, { useRef, useEffect } from 'react'
+import React, { useRef, useEffect, useState } from 'react'
 import L from 'leaflet'
-import { MarkerClusterGroup } from 'leaflet.markercluster'
 
+import 'leaflet.markercluster'
 import { getAssetsPath } from 'utils/helpers'
 
-// const centerPosition = new L.LatLng(26.523257520856546, -43.10211013159716)
-const centerPosition = new L.LatLng(50, 10)
+const KEY_MOVE = 'moveend'
+
+const centerPosition = new L.LatLng(26.523257520856546, -43.10211013159716)
 
 const markerIcon = L.icon({
   iconUrl: getAssetsPath('/static/images/map/marker.svg'),
@@ -15,16 +16,25 @@ const markerIcon = L.icon({
 })
 
 const CustomMap = ({ locations }) => {
-  const markersData = locations
+  const [visibleMarkers, setVisibleMarkers] = useState([])
+  // const [mapLoaded, setMapLoaded] = useState(false)
 
   const mapRef = useRef(null)
 
+  const loadVisibleMarkers = () => {
+    const bounds = mapRef.current.getBounds()
+    const inViewMarkers = locations.filter((loc) =>
+      bounds.contains(new L.LatLng(loc.latitude, loc.longitude))
+    )
+    setVisibleMarkers(inViewMarkers)
+  }
+
   useEffect(() => {
     // Initialize the map
-    if (!mapRef.current) {
+    if (locations.length > 0 && !mapRef.current) {
       mapRef.current = L.map('map', {
         center: centerPosition,
-        zoom: 7,
+        zoom: 2,
         minZoom: 1,
         maxZoom: 12,
         layers: [
@@ -34,48 +44,38 @@ const CustomMap = ({ locations }) => {
           }),
         ],
       })
+      // Handle map movements to load new markers
+      mapRef.current.on(KEY_MOVE, loadVisibleMarkers)
     }
 
-    // const markersGroup = new MarkerClusterGroup({
-    //   chunkedLoading: true,
-    //   icon: markerIcon,
-    // })
-
-    // Create and add markers
-    const markers = markersData.map((markerData) => {
-      const { name, href, latitude, longitude } = markerData
-      const latLng = new L.LatLng(latitude, longitude)
-      const marker = L.marker(latLng, {
-        title: name,
-        icon: markerIcon,
-        chunkedLoading: true,
-      }).addTo(mapRef.current)
-      if (href) {
-        marker.bindPopup(
-          `<a
-               href=${href}
-               target="_blank"
-               rel="noopener noreferrer"
-           >
-            ${name}
-           </a>`
-        )
-      } else marker.bindPopup(name)
-
-      // markersGroup.addLayer(marker)
-      // return markersGroup
-      return marker
-    })
+    // Initialize marker cluster group
+    const markerClusterGroup = new L.MarkerClusterGroup()
+    mapRef.current.addLayer(markerClusterGroup)
 
     return () => {
       // Cleanup the map and markers
-      markers.forEach((marker) => marker.remove())
+      mapRef.current.off(KEY_MOVE, loadVisibleMarkers)
       mapRef.current.remove()
       mapRef.current = null
     }
-  }, [markersData])
+  }, [])
+
+  useEffect(() => {
+    const markerClusterGroup = new L.MarkerClusterGroup()
+    // Create and add markers
+    visibleMarkers.forEach(({ name, href, latitude, longitude }) => {
+      const marker = L.marker([latitude, longitude], {
+        icon: markerIcon,
+      }).bindPopup(href ? `<a href=${href} target="_blank">${name}</a>` : name)
+      markerClusterGroup.addLayer(marker)
+    })
+
+    mapRef.current.addLayer(markerClusterGroup)
+
+    return () => markerClusterGroup.clearLayers()
+  }, [visibleMarkers])
 
-  return <div id="map" style={{ height: '40vh', width: '100%' }} />
+  return <div id="map" style={{ height: '26vh', width: '100%' }} />
 }
 
 export default CustomMap
diff --git a/templates/data-providers/index.jsx b/templates/data-providers/index.jsx
@@ -136,9 +136,6 @@ const DataProvidersSearchTemplate = React.memo(
       { isHidden: false }
     )
 
-    // console.log('results ' + JSON.stringify(results))
-    // console.table(results.length)
-
     return (
       <Search className={styles.layout}>
         {Boolean(results.length) && (
@@ -181,9 +178,7 @@ const DataProvidersSearchTemplate = React.memo(
             <Map
               className={styles.map}
               locations={filterAndMapDataProviders(results)}
-              // locations={filterAndMapDataProviders(results.slice(0, 3500))}
-              // locations={filterAndMapDataProviders(results.slice(0, 6500))}
-              // locations={filterAndMapDataProviders(results.slice(0, 8500))}
+              // locations={filterAndMapDataProviders(results.slice(0, 500))}
             />
           )}
           <p>