Pārlūkot izejas kodu

fix: все маркеры 10px, обновлена цветовая схема

neyrogovnarik 1 mēnesi atpakaļ
vecāks
revīzija
31d1960ce7
2 mainītis faili ar 14 papildinājumiem un 38 dzēšanām
  1. 2 4
      frontend/src/components/MapView.tsx
  2. 12 34
      frontend/src/lib/map.ts

+ 2 - 4
frontend/src/components/MapView.tsx

@@ -62,8 +62,7 @@ export default function MapView() {
             provider.setCenter(lat, lng)
             provider.addMarker('_user_location', lat, lng, {
               type: 'location',
-              ghost: !user,
-              color: user ? '#FF4907' : undefined,
+              color: user ? '#FF4B4B' : '#FFF82A',
             })
           },
           () => {},
@@ -94,8 +93,7 @@ export default function MapView() {
     provider.removeMarker('_user_location')
     provider.addMarker('_user_location', pos.lat, pos.lng, {
       type: 'location',
-      ghost: !user,
-      color: user ? '#FF4907' : undefined,
+      color: user ? '#FF4B4B' : '#FFF82A',
     })
   }, [user])
 

+ 12 - 34
frontend/src/lib/map.ts

@@ -20,43 +20,21 @@ export interface MarkerOptions {
 
 const TILE_URL = 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png'
 const MARKER_COLORS: Record<string, string> = {
-  place: '#3b82f6',
-  studio: '#a855f7',
-  visitor: '#22c55e',
-  visitor_registered: '#FF4907',
-  location: '#3b82f6',
+  place: '#FFF82A',
+  studio: '#FF80DF',
+  visitor: '#FFF82A',
+  visitor_registered: '#FF4B4B',
+  location: '#FFF82A',
 }
 
-function createIcon(type: string, size: number, ghost?: boolean, color?: string): L.DivIcon {
-  const bg = color || (ghost
-    ? 'radial-gradient(circle, rgba(255, 238, 0, 1) 0%, rgba(255, 238, 0, 0) 75%)'
-    : MARKER_COLORS[type] || '#3b82f6')
-
-  if (type === 'location') {
-    const r = parseInt(bg.slice(1, 3), 16), g = parseInt(bg.slice(3, 5), 16), b = parseInt(bg.slice(5, 7), 16)
-    const ringColor = isNaN(r) ? 'rgba(59,130,246,0.3)' : `rgba(${r},${g},${b},0.3)`
-    const locStyle = ghost
-      ? `width:10px;height:10px;background:radial-gradient(circle, rgba(255, 238, 0, 1) 0%, rgba(255, 238, 0, 0) 75%);border-radius:50%`
-      : `width:12px;height:12px;background:${bg};border-radius:50%;border:3px solid white;box-shadow:0 0 0 4px ${ringColor}`
-    const s = ghost ? 10 : 20
-    return L.divIcon({
-      className: '',
-      iconSize: [s, s],
-      iconAnchor: [s / 2, s / 2],
-      html: `<div style="${locStyle}"></div>`,
-    })
-  }
-
-  const ghostSize = 10
-  const style = ghost
-    ? `width:${ghostSize}px;height:${ghostSize}px;background:${bg};border-radius:50%`
-    : `width:${size}px;height:${size}px;background:${bg};border-radius:50%;border:${size > 20 ? '3px' : '2px'} solid white;box-shadow:0 2px 8px rgba(0,0,0,0.3)`
+const MARKER_SIZE = 10
 
+function createIcon(color: string): L.DivIcon {
   return L.divIcon({
     className: '',
-    iconSize: ghost ? [ghostSize, ghostSize] : [size, size],
-    iconAnchor: ghost ? [ghostSize / 2, ghostSize / 2] : [size / 2, size / 2],
-    html: `<div style="${style}"></div>`,
+    iconSize: [MARKER_SIZE, MARKER_SIZE],
+    iconAnchor: [MARKER_SIZE / 2, MARKER_SIZE / 2],
+    html: `<div style="width:${MARKER_SIZE}px;height:${MARKER_SIZE}px;background:${color};border-radius:50%"></div>`,
   })
 }
 
@@ -124,8 +102,8 @@ export function createLeafletMapProvider(): MapProvider {
       if (!map) return
       const ghost = options?.ghost
       const type = options?.type || 'place'
-      const size = type === 'visitor' || type === 'visitor_registered' || type === 'location' ? 12 : 32
-      const icon = createIcon(type, size, ghost, options?.color)
+      const color = options?.color || MARKER_COLORS[type] || '#FFF82A'
+      const icon = createIcon(color)
       const interactive = !ghost
       const marker = L.marker([lat, lng], { icon, interactive }).addTo(map)