From 53b5082158660b378e1d134e27252f94edeea7d8 Mon Sep 17 00:00:00 2001
From: Kenneth Brewer <kennethbrewer3@gmail.com>
Date: Wed, 29 Apr 2026 13:55:36 -0400
Subject: [PATCH] Map markers are now their own SVG that have an accurate point
 to the coordinate. Also the map marker accepts an icon parameter for future
 UI improvement. Currently the default map icon is a white circle.

---
 admin/inertia/components/maps/MarkerPin.tsx | 69 ++++++++++++++++++---
 1 file changed, 62 insertions(+), 7 deletions(-)

diff --git a/admin/inertia/components/maps/MarkerPin.tsx b/admin/inertia/components/maps/MarkerPin.tsx
index 94c86af..44d3e72 100644
--- a/admin/inertia/components/maps/MarkerPin.tsx
+++ b/admin/inertia/components/maps/MarkerPin.tsx
@@ -1,17 +1,72 @@
-import { IconMapPinFilled } from '@tabler/icons-react'
+import {IconCircleFilled} from '@tabler/icons-react'
+import type { ComponentType, CSSProperties } from 'react'
+
+type MarkerIconProps = {
+  size?: number
+  color?: string
+  style?: CSSProperties
+  className?: string
+}
 
 interface MarkerPinProps {
   color?: string
   active?: boolean
+  Icon?: ComponentType<MarkerIconProps>
+  iconColor?: string
 }
 
-export default function MarkerPin({ color = '#a84a12', active = false }: MarkerPinProps) {
+export default function MarkerPin({
+                                    color = '#a84a12',
+                                    active = false,
+                                    Icon = IconCircleFilled,
+                                    iconColor = '#ffffff',
+                                  }: MarkerPinProps) {
+  const width = active ? 42 : 36
+  const height = active ? 52 : 46
+  const iconSize = active ? 18 : 16
+
   return (
-    <div className="cursor-pointer" style={{ filter: 'drop-shadow(0 1px 2px rgba(0,0,0,0.4))' }}>
-      <IconMapPinFilled
-        size={active ? 36 : 32}
-        style={{ color }}
-      />
+    <div
+      className="cursor-pointer"
+      style={{
+        width,
+        height,
+        filter: 'drop-shadow(0 1px 2px rgba(0,0,0,0.4))',
+      }}
+    >
+      <svg
+        width={width}
+        height={height}
+        viewBox="0 0 36 46"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        aria-hidden="true"
+      >
+        {/* Pin body: circular head + precise pointed tip */}
+        <path
+          d="M18 45 C18 45 4 27.5 4 16.5 C4 7.4 10.3 1 18 1 C25.7 1 32 7.4 32 16.5 C32 27.5 18 45 18 45 Z"
+          fill={color}
+          stroke="rgba(0,0,0,0.25)"
+          strokeWidth="1.5"
+        />
+
+        {/* Inner icon circle */}
+        <circle cx="18" cy="16.5" r="10.5" fill="rgba(255,255,255,0.18)" />
+      </svg>
+
+      <div
+        className="pointer-events-none absolute flex items-center justify-center"
+        style={{
+          left: '50%',
+          top: active ? 17 : 15,
+          transform: 'translate(-50%, -50%)',
+          width: iconSize,
+          height: iconSize,
+        }}
+      >
+        <Icon size={iconSize} color={iconColor} />
+      </div>
     </div>
   )
 }
+