[FEATURE] show map spot popup on hover, glow effect, close on mouseout#874
Merged
accius merged 7 commits intoaccius:Stagingfrom Apr 5, 2026
Merged
[FEATURE] show map spot popup on hover, glow effect, close on mouseout#874accius merged 7 commits intoaccius:Stagingfrom
accius merged 7 commits intoaccius:Stagingfrom
Conversation
- Popup opens on mouseover for all spot types (DX Cluster, POTA/SOTA/WWFF/WWBOTA, PSK Reporter, WSJT-X) and closes on mouseout - Click still tunes the rig via rig-bridge as before - DX Cluster and PSK TX circle markers get a Leaflet-native glow ring on hover (extra semi-transparent circleMarker) since CSS drop-shadow is clipped by Leaflet's SVG overlay pane - POTA/SOTA/WWFF/WWBOTA and PSK RX diamond markers use CSS drop-shadow filter (works on divIcon HTML elements) - DX Cluster circle markers set to interactive:true so hover works regardless of rig-bridge state Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
ceotjoe
changed the title
Adds a Prerequisites section clarifying that Node.js v20.19+ or v22.12+ is required (not v18). Includes platform-specific install instructions for nvm, NodeSource, Volta, and Windows, plus an explicit warning for Ubuntu/Debian users not to use `apt install nodejs` which ships v18. Fixes reported issue where Ubuntu 24.04 users hit a Vite engine error after following the existing Quick Start instructions. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Collaborator
Author
|
Please leave this for a while untouched. I want to do some minor rework on it. |
Clicking a spot now pins its popup open so the user can read and copy the contents without it disappearing on mouseout. The pinned popup closes when: - the user clicks anywhere else on the map - 20 seconds elapse (auto-close timer) Clicking a second spot while one is already pinned unpins the first and pins the new one immediately. Hover still opens/closes the popup transiently as before; the glow effect always follows the mouse regardless of pin state. L.DomEvent.stopPropagation prevents the map-click handler from firing in the same tick as the marker click, which would instantly unpin the popup that was just pinned. Covers all four spot types: DX Cluster, POTA/SOTA/WWFF/WWBOTA, PSK Reporter, and WSJT-X. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
DX Cluster labels and POTA/SOTA/WWFF/WWBOTA labels are now fully interactive: - Hovering a label shows the spot popup and a CSS drop-shadow glow (band color for DX, spot-type color for activate spots) - Moving off closes the popup and clears the glow (unless pinned) - Clicking a label pins the popup open for 20 s and tunes the rig, identical to clicking the spot marker itself DX labels previously used a Leaflet glow-ring circleMarker; switched to the same CSS drop-shadow filter used by POTA/SOTA labels since the label element is a divIcon in both cases. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Collaborator
Author
|
@accius and @alanhargreaves let me know what you think, I like it. :-) With labels on it is now even better UX on tablets to hit the spots. @alanhargreaves should also keep the functionality to copy contents out of the popups. Frequency is only changed on the radio if spot is clicked. I one just wants the information of the popup it can simply be hovered. |
On touch devices, small spot markers (6 px circles, 8 px diamonds) are difficult to tap precisely. A new `addTouchGhost` helper now overlays an invisible hit-area marker on every spot: a radius-22 transparent circleMarker for SVG spots (DX cluster, PSK TX) and a 44×44 transparent divIcon for icon spots (DX labels, POTA/SOTA/WWFF/WWBOTA markers and labels, PSK RX, WSJT-X). On touch devices the real marker is set to non-interactive so taps fall through to the ghost; on pointer devices the behaviour is unchanged. The ghost shares the same popup HTML and two-tap click logic as the visible marker. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…n/close On touch devices ghost markers were handling taps but not triggering any glow on the underlying visual marker. The addTouchGhost helper now accepts the real marker and its band colour; it wires popupopen/popupclose events on the ghost to add/remove the glow (Leaflet glow ring for circleMarker spots, CSS drop-shadow filter for divIcon spots), matching the pointer- device hover behaviour. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Collaborator
Author
|
I also enhanced the touch area on touch devices for map spots now. Is way better UX now on touch devices. |
Collaborator
|
I pulled the change into my local server and had a play. I'm good with it, but Believe there were also questions for @accius . |
accius
approved these changes
Apr 5, 2026
Owner
accius
left a comment
accius
left a comment
There was a problem hiding this comment.
Looks good — approving to merge. A few notes for future cleanup:
Duplication — The mouseover/mouseout + glow pattern is repeated ~8 times across DX circles, DX labels, POTA/SOTA markers/labels, PSK TX/RX, and WSJT-X. A shared helper like bindHoverPopup(marker, color, markersRef) could cut ~150 lines and make it easier to tweak the glow behavior in one place.
Minor things:
- The
20000ms auto-close timeout appears in 3 places — worth pulling into a constant - Touch detection is static at mount time, so hybrid devices (Surface, iPad w/ keyboard) won't adapt mid-session — fine for now
Nice work on the touch ghost markers — the 44px hit area is a big UX improvement on mobile. README prereqs section is clean and addresses #873 well.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What does this PR do?
This should finally solve #797
Summary
Improves how spots behave on the map and fixes a Node.js install pitfall
in the docs.
Map spot interactions
Hover popup: Hovering any spot (DX cluster, POTA, SOTA, WWFF, WWBOTA,
PSK Reporter, WSJT-X) now opens the spot popup immediately; it closes again
on mouse-out.
Glow on hover: Spots highlight with a bright band-colour glow when
hovered. SVG circle markers (DX cluster, PSK TX) use a Leaflet-native glow
ring;
divIconmarkers use a CSSdrop-shadowfilter.Click-to-pin popup: Clicking a spot pins the popup open so the user can
read or copy the content. The popup auto-closes after 20 seconds or when
the map background is clicked.
Spot labels interactive: Callsign badges drawn on the map (DX, POTA,
SOTA, etc.) now support the same hover glow and click-to-pin behaviour as
the spot markers themselves.
Touch device support: On touch screens, a single tap pins the popup
(replacing hover); a second tap on the same spot tunes the rig. The popup
auto-closes after 20 seconds or on a map tap.
Expanded touch hit area: Tiny spot markers (6 px circles, 8 px
diamonds) are overlaid with invisible ghost markers — a radius-22
circleMarkerfor SVG spots and a 44×44 transparentdivIconfor iconspots — making them much easier to tap on mobile.
Covers: DX Cluster · POTA · SOTA · WWFF · WWBOTA · PSK Reporter · WSJT-X
Docs
or v22.12+) and platform-specific install instructions; explicit
warning for Ubuntu/Debian users not to use
apt install nodejsTest plan
Glow around Pota spot while hovering:
Glow around DX spot while hovering:
Glow around spot label while hovering:
Additionally I made a fix to ReadMe.md because of: #873