|
|
@@ -27,14 +27,17 @@ const MARKER_COLORS: Record<string, string> = {
|
|
|
location: '#FFF82A',
|
|
|
}
|
|
|
|
|
|
-const MARKER_SIZE = 10
|
|
|
+const MARKER_SIZE = 7
|
|
|
|
|
|
-function createIcon(color: string): L.DivIcon {
|
|
|
+function createIcon(color: string, ghost?: boolean): L.DivIcon {
|
|
|
+ const bg = ghost
|
|
|
+ ? 'radial-gradient(circle, rgba(255, 238, 0, 1) 0%, rgba(255, 238, 0, 0) 75%)'
|
|
|
+ : color
|
|
|
return L.divIcon({
|
|
|
className: '',
|
|
|
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>`,
|
|
|
+ html: `<div style="width:${MARKER_SIZE}px;height:${MARKER_SIZE}px;background:${bg};border-radius:50%"></div>`,
|
|
|
})
|
|
|
}
|
|
|
|
|
|
@@ -103,7 +106,7 @@ export function createLeafletMapProvider(): MapProvider {
|
|
|
const ghost = options?.ghost
|
|
|
const type = options?.type || 'place'
|
|
|
const color = options?.color || MARKER_COLORS[type] || '#FFF82A'
|
|
|
- const icon = createIcon(color)
|
|
|
+ const icon = createIcon(color, ghost)
|
|
|
const interactive = !ghost
|
|
|
const marker = L.marker([lat, lng], { icon, interactive }).addTo(map)
|
|
|
|