|
|
@@ -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)
|
|
|
|