|
|
@@ -11,30 +11,23 @@ export interface MapBounds {
|
|
|
}
|
|
|
|
|
|
export interface MarkerOptions {
|
|
|
- type?: 'place' | 'studio'
|
|
|
title?: string
|
|
|
onClick?: () => void
|
|
|
ghost?: boolean
|
|
|
- color?: string
|
|
|
}
|
|
|
|
|
|
const TILE_URL = 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png'
|
|
|
-const MARKER_COLORS: Record<string, string> = {
|
|
|
- place: '#FFF82A',
|
|
|
- studio: '#FF80DF',
|
|
|
-}
|
|
|
|
|
|
const MARKER_SIZE = 7
|
|
|
|
|
|
-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
|
|
|
+const GRADIENT = 'radial-gradient(circle, rgba(255, 238, 0, 1) 0%, rgba(255, 238, 0, 0) 75%)'
|
|
|
+
|
|
|
+function createIcon(): L.DivIcon {
|
|
|
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:${bg};border-radius:50%"></div>`,
|
|
|
+ html: `<div style="width:${MARKER_SIZE}px;height:${MARKER_SIZE}px;background:${GRADIENT};border-radius:50%"></div>`,
|
|
|
})
|
|
|
}
|
|
|
|
|
|
@@ -104,11 +97,8 @@ export function createLeafletMapProvider(): MapProvider {
|
|
|
const existing = markers.get(id)
|
|
|
if (existing) existing.remove()
|
|
|
const ghost = options?.ghost
|
|
|
- const type = options?.type || 'place'
|
|
|
- const color = options?.color || MARKER_COLORS[type] || '#FFF82A'
|
|
|
- const icon = createIcon(color, ghost)
|
|
|
- const interactive = !ghost
|
|
|
- const marker = L.marker([lat, lng], { icon, interactive }).addTo(map)
|
|
|
+ const icon = createIcon()
|
|
|
+ const marker = L.marker([lat, lng], { icon, interactive: !ghost }).addTo(map)
|
|
|
|
|
|
if (options?.title && !ghost) {
|
|
|
marker.bindTooltip(options.title, { direction: 'top' })
|