From a87c4a8cb3ee62686ba3c6cdad6ef86310ab0c2b Mon Sep 17 00:00:00 2001 From: Peter Goodhall Date: Sun, 10 Aug 2025 22:35:30 +0100 Subject: [PATCH] Add callsign label toggle to map view Introduces a button and supporting logic to toggle callsign labels on the map using Leaflet DivIcons. Also updates the Logbook model to include gridsquare in plot data for potential label use and enhances CSS for callsign label styling. --- application/models/Logbook_model.php | 1 + application/views/map/custom_date.php | 145 +++++++++++++++++++++++++- 2 files changed, 144 insertions(+), 2 deletions(-) diff --git a/application/models/Logbook_model.php b/application/models/Logbook_model.php index f44b579e..e9b6f5f4 100755 --- a/application/models/Logbook_model.php +++ b/application/models/Logbook_model.php @@ -4857,6 +4857,7 @@ class Logbook_model extends CI_Model $plot = array('lat' => 0, 'lng' => 0, 'html' => '', 'label' => '', 'flag' => '', 'confirmed' => 'N'); $plot['label'] = $row->COL_CALL; + $plot['gridsquare'] = $row->COL_GRIDSQUARE; // Add gridsquare for potential use in labels $flag = strtolower($CI->dxccflag->getISO($row->COL_DXCC)); $plot['flag'] = 'name))) . '"> '; $plot['html'] = ($row->COL_GRIDSQUARE != null ? "Grid: " . $row->COL_GRIDSQUARE . "
" : ""); diff --git a/application/views/map/custom_date.php b/application/views/map/custom_date.php index 78b57492..636d6413 100644 --- a/application/views/map/custom_date.php +++ b/application/views/map/custom_date.php @@ -1,5 +1,80 @@ + +

@@ -204,7 +279,7 @@
- + @@ -303,7 +381,8 @@
- Click on markers for QSO details + Click on markers for QSO details • Use + to toggle callsign labels
@@ -412,6 +491,58 @@ function toggleFullscreen() { } } +// Global variable to track if callsign labels are shown +let callsignLabelsVisible = false; +let callsignLabels = []; + +function toggleCallsignLabels() { + const button = document.getElementById('callsign-labels-btn'); + + if (!callsignLabelsVisible) { + // Show callsign labels + if (typeof plotlayers !== 'undefined' && plotlayers.length > 0) { + plotlayers.forEach(function(marker) { + if (marker.data && (marker.data.callsign || marker.data.label)) { + // Use callsign if available, otherwise fall back to label + const callsign = marker.data.callsign || marker.data.label; + + // Try a different approach - create a DivIcon instead of tooltip + const labelIcon = L.divIcon({ + className: 'callsign-label-icon', + html: `
${callsign}
`, + iconSize: [0, 0], // No fixed size, let CSS handle it + iconAnchor: [0, -5] // Position above the marker with minimal offset + }); + + // Create a separate marker for the label + const labelMarker = L.marker(marker.getLatLng(), { + icon: labelIcon, + interactive: false, + zIndexOffset: 1000 + }); + + map.addLayer(labelMarker); + callsignLabels.push(labelMarker); + } + }); + + callsignLabelsVisible = true; + button.classList.remove('btn-outline-success'); + button.classList.add('btn-success'); + } + } else { + // Hide callsign labels + callsignLabels.forEach(function(labelMarker) { + map.removeLayer(labelMarker); + }); + + callsignLabels = []; + callsignLabelsVisible = false; + button.classList.remove('btn-success'); + button.classList.add('btn-outline-success'); + } +} + // Update statistics when map loads function updateMapStatistics(plotjson) { if (plotjson && plotjson.markers) { @@ -448,6 +579,16 @@ function updateMapStatistics(plotjson) { mapStatusElement.classList.add('d-none'); }, 3000); } + + // Reapply callsign labels if they were previously enabled + if (callsignLabelsVisible) { + // Reset state and toggle to reapply labels to new markers + callsignLabelsVisible = false; + callsignLabels = []; + setTimeout(() => { + toggleCallsignLabels(); + }, 100); // Small delay to ensure markers are fully rendered + } } } \ No newline at end of file