Use a custom cluster marker style (#1664)

* feat(marker-cluster): use more consistent style * fix(Markers): remove unused classes we no longer differenciate on the number of markers in a group
public-convenience-ltd · May 17, 2024 · a1b4e94 · a1b4e94
1 parent bf1bff8
commit a1b4e94
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 17 deletions.
diff --git a/src/components/LooMap/Markers.tsx b/src/components/LooMap/Markers.tsx
@@ -45,7 +45,7 @@ const Markers = () => {
       boundingBoxWest,
       boundingBoxNorth,
       boundingBoxEast,
-      geohashPrecision
+      geohashPrecision,
     );
   }, [
     boundingBoxEast,
@@ -131,7 +131,7 @@ const MarkerGroup: React.FC<{
           }),
           alt: 'Public Toilet',
           keyboard: false,
-        }
+        },
       )
         .on('click', () => {
           // Clear the current search upon navigation
@@ -151,20 +151,20 @@ const MarkerGroup: React.FC<{
       marker.getElement()?.setAttribute('aria-label', 'Public Toilet');
       return marker;
     },
-    [router, setMapState]
+    [router, setMapState],
   );
 
   const [appliedFilterTypes, setAppliedFilterTypes] = useState<
     Array<FILTER_TYPE>
   >(
     getAppliedFiltersAsFilterTypes(
-      config.filters.filter((filter) => filters?.[filter.id])
-    )
+      config.filters.filter((filter) => filters?.[filter.id]),
+    ),
   );
 
   useEffect(() => {
     const applied: Array<Filter> = config.filters.filter(
-      (filter) => filters?.[filter.id]
+      (filter) => filters?.[filter.id],
     );
     const appliedFilterTypes = getAppliedFiltersAsFilterTypes(applied);
     window.setTimeout(() => {
@@ -180,7 +180,7 @@ const MarkerGroup: React.FC<{
     const parsedAndFilteredMarkers = data?.loosByGeohash
       .map(parseCompressedLoo)
       .filter((compressedLoo) =>
-        filterCompressedLooByAppliedFilters(compressedLoo, appliedFilterTypes)
+        filterCompressedLooByAppliedFilters(compressedLoo, appliedFilterTypes),
       );
 
     return parsedAndFilteredMarkers
@@ -222,18 +222,9 @@ const MarkerGroup: React.FC<{
           .map((child) => child.getIcon().options?.toiletId)
           .join(',');
 
-        let c = ' marker-cluster-';
-        if (childCount < 10) {
-          c += 'small';
-        } else if (childCount < 100) {
-          c += 'medium';
-        } else {
-          c += 'large';
-        }
-
         return new L.DivIcon({
           html: `<div data-toilets=${containedIds}><span>${childCount}</span></div>`,
-          className: 'marker-cluster' + c,
+          className: 'marker-cluster',
           iconSize: new L.Point(40, 40),
         });
       },

diff --git a/src/design-system/components/stylesheet.css b/src/design-system/components/stylesheet.css
@@ -6,3 +6,16 @@
 @import 'src/design-system/components/Switch/Switch.css';
 @import 'src/design-system/components/TextArea/TextArea.css';
 @import 'src/design-system/components/Drawer/Drawer.css';
+
+/* Leaflet Marker Cluster custom styles */
+.leaflet-marker-icon.marker-cluster {
+    display: flex;
+    border: 0.25em solid #ED3D63;
+    background-color: white;
+    padding: 0.125em;
+    border-radius: 40px;
+}
+.leaflet-marker-icon.marker-cluster div {
+    margin: auto;
+    background-color: transparent;
+}