소스 검색

feat: add user location dot (blue with ring) for all visitors

neyrogovnarik 1 개월 전
부모
커밋
2cfb047967
2개의 변경된 파일17개의 추가작업 그리고 1개의 파일을 삭제
  1. 6 1
      frontend/src/components/MapView.tsx
  2. 11 0
      frontend/src/lib/map.ts

+ 6 - 1
frontend/src/components/MapView.tsx

@@ -54,7 +54,12 @@ export default function MapView() {
 
       if (navigator.geolocation) {
         navigator.geolocation.getCurrentPosition(
-          (pos) => provider.setCenter(pos.coords.latitude, pos.coords.longitude),
+          (pos) => {
+            provider.setCenter(pos.coords.latitude, pos.coords.longitude)
+            provider.addMarker('_user_location', pos.coords.latitude, pos.coords.longitude, {
+              type: 'location',
+            })
+          },
           () => {},
         )
       }

+ 11 - 0
frontend/src/lib/map.ts

@@ -22,12 +22,23 @@ const MARKER_COLORS: Record<string, string> = {
   place: '#3b82f6',
   studio: '#a855f7',
   visitor: '#22c55e',
+  location: '#3b82f6',
 }
 
 function createIcon(type: string, size: number, ghost?: boolean): L.DivIcon {
   const color = ghost
     ? 'radial-gradient(circle, rgba(255, 215, 0, 0.9) 0%, rgba(255, 215, 0, 0.3) 50%, rgba(255, 215, 0, 0) 70%)'
     : MARKER_COLORS[type] || '#3b82f6'
+
+  if (type === 'location') {
+    return L.divIcon({
+      className: '',
+      iconSize: [20, 20],
+      iconAnchor: [10, 10],
+      html: `<div style="width:12px;height:12px;background:#3b82f6;border-radius:50%;border:3px solid white;box-shadow:0 0 0 4px rgba(59,130,246,0.3)"></div>`,
+    })
+  }
+
   const style = ghost
     ? `width:${size * 2.5}px;height:${size * 2.5}px;background:${color};border-radius:50%;box-shadow:0 0 20px rgba(255, 215, 0, 0.4);pointer-events:none`
     : `width:${size}px;height:${size}px;background:${color};border-radius:50%;border:${size > 20 ? '3px' : '2px'} solid white;box-shadow:0 2px 8px rgba(0,0,0,0.3)`