EXPERIMENT: single cluster

src/components/map/layers/custom/GeodsPointsOfInterestLayer.tsx

@@ -1,7 +1,6 @@
 import { Icon, type LatLngBounds } from "leaflet";
 import { useMemo } from "react";
 import { Marker } from "react-leaflet";
-import MarkerClusterGroup from "react-leaflet-cluster";
 import { useCachedQuery } from "../../../../hooks/useCachedQuery";
 import { useErrorToast } from "../../../../hooks/useErrorToast";
 import { useGeodsPOI } from "../../../../hooks/useGeodsPOI";
@@ -37,7 +36,7 @@ export function GeodsPointsOfInterestLayer({ bounds }: GeodsPointsOfInterestLaye
   }, []);
 
   return (
-    <MarkerClusterGroup chunkedLoading showCoverageOnHover={false} removeOutsideVisibleBounds>
+    <>
       {data?.results?.map((result) => (
         <Marker key={result.id} position={[result.lat, result.long]} icon={categoryIcon(result.categories?.[0])}>
           <ResultPopup
@@ -51,7 +50,7 @@ export function GeodsPointsOfInterestLayer({ bounds }: GeodsPointsOfInterestLaye
           />
         </Marker>
       ))}
-    </MarkerClusterGroup>
+    </>
   );
 }
 

src/components/map/layers/custom/GeographLayer.tsx

@@ -1,6 +1,5 @@
 import { LatLngBounds } from "leaflet";
 import { Marker, useMap } from "react-leaflet";
-import MarkerClusterGroup from "react-leaflet-cluster";
 import { useErrorToast } from "../../../../hooks/useErrorToast";
 import { useGeograph } from "../../../../hooks/useGeograph";
 import { blueMarker } from "../../../../icons";
@@ -21,7 +20,7 @@ export function GeographLayer({ bounds }: GeographLayerProps) {
   useErrorToast("geograph-error", "Error loading Geograph images", error);
 
   return (
-    <MarkerClusterGroup chunkedLoading showCoverageOnHover={false} removeOutsideVisibleBounds>
+    <>
       {data?.map((item) => (
         <Marker key={item.guid} position={[parseFloat(item.lat), parseFloat(item.long)]} icon={blueMarker}>
           <ResultPopup
@@ -34,7 +33,7 @@ export function GeographLayer({ bounds }: GeographLayerProps) {
           />
         </Marker>
       ))}
-    </MarkerClusterGroup>
+    </>
   );
 }
 

src/components/map/layers/custom/GpsRoutesLayer.tsx

@@ -1,6 +1,5 @@
 import { type LatLngBounds } from "leaflet";
 import { Marker } from "react-leaflet";
-import MarkerClusterGroup from "react-leaflet-cluster";
 import { useCachedQuery } from "../../../../hooks/useCachedQuery";
 import { useErrorToast } from "../../../../hooks/useErrorToast";
 import { useGpsRoutes } from "../../../../hooks/useGpsRoutes";
@@ -16,7 +15,7 @@ export function GpsRoutesLayer({ bounds }: GpsRoutesLayerProps) {
   useErrorToast("gps-routes-error", "Error loading GPS routes", error);
 
   return (
-    <MarkerClusterGroup chunkedLoading showCoverageOnHover={false} removeOutsideVisibleBounds>
+    <>
       {data?.hits.map((result) => (
         <Marker key={result.objectID} position={[result._geoloc.lat, result._geoloc.lng]} icon={violetMarker}>
           <ResultPopup
@@ -28,6 +27,6 @@ export function GpsRoutesLayer({ bounds }: GpsRoutesLayerProps) {
           />
         </Marker>
       ))}
-    </MarkerClusterGroup>
+    </>
   );
 }

src/components/map/layers/custom/UnifiedClusterLayer.tsx

@@ -0,0 +1,37 @@
+import { type LatLngBounds } from "leaflet";
+import { useMap } from "react-leaflet";
+import MarkerClusterGroup from "react-leaflet-cluster";
+import { CompanyDataLayer } from "./CompanyDataLayer";
+import { GeodsPointsOfInterestLayer } from "./GeodsPointsOfInterestLayer";
+import { GeographLayer } from "./GeographLayer";
+import { GpsRoutesLayer } from "./GpsRoutesLayer";
+
+interface UnifiedClusterLayerProps {
+  bounds: LatLngBounds;
+}
+
+// Define min/max zoom for each layer
+const LAYER_ZOOM = {
+  gpsRoutes: { minZoom: 10 },
+  geograph: { minZoom: 16 },
+  geodsPoi: { minZoom: 14 },
+  companyData: { minZoom: 16 },
+} as const;
+
+export function UnifiedClusterLayer({ bounds }: UnifiedClusterLayerProps) {
+  const map = useMap();
+  const currentZoom = map.getZoom();
+
+  const shouldRenderLayer = (minZoom: number) => {
+    return currentZoom > minZoom;
+  };
+
+  return (
+    <MarkerClusterGroup chunkedLoading showCoverageOnHover={false} removeOutsideVisibleBounds>
+      {shouldRenderLayer(LAYER_ZOOM.gpsRoutes.minZoom) && <GpsRoutesLayer bounds={bounds} />}
+      {shouldRenderLayer(LAYER_ZOOM.geograph.minZoom) && <GeographLayer bounds={bounds} />}
+      {shouldRenderLayer(LAYER_ZOOM.geodsPoi.minZoom) && <GeodsPointsOfInterestLayer bounds={bounds} />}
+      {shouldRenderLayer(LAYER_ZOOM.companyData.minZoom) && <CompanyDataLayer bounds={bounds} />}
+    </MarkerClusterGroup>
+  );
+}

src/config/layer.tsx

@@ -1,11 +1,8 @@
 import { createListCollection } from "@chakra-ui/react";
 import { LatLngBounds } from "leaflet";
 import { TileLayer, WMSTileLayer } from "react-leaflet";
-import { CompanyDataLayer } from "../components/map/layers/custom/CompanyDataLayer";
-import { GeodsPointsOfInterestLayer } from "../components/map/layers/custom/GeodsPointsOfInterestLayer";
-import { GeographLayer } from "../components/map/layers/custom/GeographLayer";
-import { GpsRoutesLayer } from "../components/map/layers/custom/GpsRoutesLayer";
 import { PostcodePolygonsLayer } from "../components/map/layers/custom/PostcodePolygonsLayer";
+import { UnifiedClusterLayer } from "../components/map/layers/custom/UnifiedClusterLayer";
 import { WeatherLayer } from "../components/map/layers/custom/WeatherLayer";
 
 export type Tile = {
@@ -191,10 +188,7 @@ const BASE_LAYERS: LayerOption[] = [
 ];
 
 export const OVERLAYS: Record<string, Overlay> = {
-  "GPS Routes": { minZoom: 10, component: GpsRoutesLayer },
-  Geograph: { minZoom: 16, component: GeographLayer },
-  "GeoDS POI": { minZoom: 14, component: GeodsPointsOfInterestLayer },
-  "Company Data": { minZoom: 16, component: CompanyDataLayer },
+  "Clustered Markers": { minZoom: 6, component: UnifiedClusterLayer },
   Postcodes: { minZoom: 11, component: PostcodePolygonsLayer },
   "Waymarked Hiking Trails": {
     minZoom: 6,