diff --git a/assets/js/rover_map_hook.ts b/assets/js/rover_map_hook.ts index e9a33e4f..f730c3cc 100644 --- a/assets/js/rover_map_hook.ts +++ b/assets/js/rover_map_hook.ts @@ -58,27 +58,15 @@ function tierForScore(score: number): string | null { return null } -function buildStationDivIcon(station: Station): L.DivIcon { - const halo = station.selected - ? "box-shadow:0 0 0 3px rgba(14,165,233,0.55),0 0 10px 2px rgba(14,165,233,0.45);" - : "" - const html = ` -
-
- - - -
-
- ${station.callsign} -
-
` - return L.divIcon({ - html, - className: "rover-station-icon", - iconSize: [40, 36], - iconAnchor: [20, 7] - }) +function buildStationMarker(station: Station): L.CircleMarker { + return L.circleMarker([station.lat, station.lon], { + radius: 4, + color: "#fff", + weight: 1.5, + fillColor: station.selected ? "#0ea5e9" : "#64748b", + fillOpacity: 0.95, + interactive: true + }).bindTooltip(station.callsign, { direction: "top", offset: [0, -6] }) } export const RoverMap: Partial = { @@ -241,12 +229,7 @@ export const RoverMap: Partial = { renderStations(this: RoverMapHook) { this.stationMarkers.clearLayers() for (const s of this.stations) { - const marker = L.marker([s.lat, s.lon], { - icon: buildStationDivIcon(s), - interactive: false, - keyboard: false - }) - this.stationMarkers.addLayer(marker) + this.stationMarkers.addLayer(buildStationMarker(s)) } },