graham/prop
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(rover): render fixed stations as small dots, not triangle+label divIcons

Browse source
This commit is contained in:
Graham McIntire 2026-04-25 16:32:55 -05:00
parent 6f25993998
commit 150762d21d
No known key found for this signature in database
GPG key ID: F4ABF488E6029E59
1 changed files with 10 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
assets/js/rover_map_hook.ts
View file

@ -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 = `
<div style="display:flex;flex-direction:column;align-items:center;pointer-events:none;">
<div style="${halo}border-radius:9999px;padding:2px;background:transparent;">
<svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg">
<polygon points="7,1 13,12 1,12" fill="#475569" stroke="#fff" stroke-width="1.2" stroke-linejoin="round"/>
</svg>
</div>
<div style="font-size:10px;font-weight:600;color:#0f172a;background:rgba(255,255,255,0.85);padding:0 4px;border-radius:3px;margin-top:2px;white-space:nowrap;">
${station.callsign}
</div>
</div>`
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<RoverMapHook> = {
@ -241,12 +229,7 @@ export const RoverMap: Partial<RoverMapHook> = {
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))
}
},