feat: update map pin cluster design (#4012)

src/pages/Maps/Content/MapView/Sprites.tsx

@@ -1,9 +1,11 @@
+import { useEffect } from 'react'
 import L from 'leaflet'
 import { IModerationStatus } from 'oa-shared'
 import clusterIcon from 'src/assets/icons/map-cluster.svg'
 import AwaitingModerationHighlight from 'src/assets/icons/map-unpproved-pin.svg'
 import { logger } from 'src/logger'
 import Workspace from 'src/pages/User/workspace/Workspace'
+import { useThemeUI } from 'theme-ui'
 
 import type { MarkerCluster } from 'leaflet'
 import type { IMapPin } from 'oa-shared'
@@ -16,19 +18,54 @@ import './sprites.css'
  * such as total pins. Currently none used, but retaining
  */
 export const createClusterIcon = () => {
+  const { theme } = useThemeUI() as any
+  const path = clusterIcon
+  let iconAsString: string = ''
+  useEffect(() => {
+    fetch(path)
+      .then((response) => response.text())
+      .then((data) => {
+        iconAsString = data.replaceAll(
+          /#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})/g,
+          theme.colors.accent.base,
+        )
+      })
+      .catch((fetchError) => console.error(fetchError))
+  }, [path, theme])
   return (cluster: MarkerCluster) => {
     const className = ['icon']
     let icon: any
-    if (cluster.getChildCount() > 1) {
+    let outlineSize: number = 0
+    const clusterChildCount: number = cluster.getChildCount()
+    if (clusterChildCount > 1) {
       className.push('icon-cluster-many')
-      icon = clusterIcon
-    } else if (cluster.getChildCount() === 1) {
-      icon = cluster[0].pinType.icon
+      icon = iconAsString
+      // Calcute Outline CSS
+      if (clusterChildCount > 49) {
+        outlineSize = 24
+      } else {
+        outlineSize = 4 + ((clusterChildCount - 2) / 50) * 20
+      }
+    } else if (clusterChildCount === 1) {
+      icon = `<img src="${cluster[0].pinType.icon} />`
     }
     const { fontSize, iconSize, lineHeight } = getClusterSizes(cluster)
 
+    // Prepare Outline CSS for groups
+    const borderRadius = lineHeight / 2
+    const themeBaseColorForRgba: RegExpExecArray | null =
+      /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(theme.colors.accent.base)
+
     return L.divIcon({
-      html: `<img src="${icon}" /><span class="icon-cluster-text" style="font-size: ${fontSize}px; line-height: ${lineHeight}px">${cluster.getChildCount()}</span>`,
+      html: `${icon}<span class="icon-cluster-text" style="
+        font-size: ${fontSize}px;
+        line-height: ${lineHeight}px;
+        border-radius: ${borderRadius}px;
+        outline: ${outlineSize}px solid rgba(
+          ${parseInt(themeBaseColorForRgba![1], 16)},
+          ${parseInt(themeBaseColorForRgba![2], 16)},
+          ${parseInt(themeBaseColorForRgba![3], 16)}, 0.5);
+        ">${clusterChildCount}</span>`,
       className: className.join(' '),
       iconSize: L.point(iconSize, iconSize, true),
     })