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))
}
},