From 3e976a2d2037ad129c2b3d94f0a70900443e301e Mon Sep 17 00:00:00 2001
From: phl0 <github@florian-wolters.de>
Date: Tue, 25 Nov 2025 09:12:19 +0100
Subject: [PATCH] Fix colors in visitor map

---
 application/controllers/Gridmap.php         |  2 +-
 application/views/visitor/layout/footer.php |  2 +-
 assets/js/leaflet/L.MaidenheadColoured.js   | 23 ++++++++++++++-------
 assets/js/sections/common.js                | 18 ----------------
 assets/js/sections/gridmap.js               | 18 ++++++++++++++++
 5 files changed, 35 insertions(+), 28 deletions(-)

diff --git a/application/controllers/Gridmap.php b/application/controllers/Gridmap.php
index c6e4ca926..152e0f460 100644
--- a/application/controllers/Gridmap.php
+++ b/application/controllers/Gridmap.php
@@ -44,8 +44,8 @@ class Gridmap extends CI_Controller {
         $footerData = [];
 		$footerData['scripts'] = [
 			'assets/js/leaflet/geocoding.js',
-			'assets/js/leaflet/L.MaidenheadColouredGridMap.js',
 			'assets/js/sections/gridmap.js?',
+			'assets/js/leaflet/L.MaidenheadColouredGridMap.js',
 			'assets/js/sections/itumap_geojson.js?' . filemtime(realpath(__DIR__ . "/../../assets/js/sections/itumap_geojson.js")),
 			'assets/js/sections/cqmap_geojson.js?' . filemtime(realpath(__DIR__ . "/../../assets/js/sections/cqmap_geojson.js")),
 			'assets/js/bootstrap-multiselect.js?' . filemtime(realpath(__DIR__ . "/../../assets/js/bootstrap-multiselect.js")),
diff --git a/application/views/visitor/layout/footer.php b/application/views/visitor/layout/footer.php
index 9c03db1f9..2dc434e9d 100644
--- a/application/views/visitor/layout/footer.php
+++ b/application/views/visitor/layout/footer.php
@@ -93,8 +93,8 @@ if ($lang_code != 'en' && !file_exists(FCPATH . "assets/json/datatables_language
 
 <?php if ($this->uri->segment(2) == "satellites") { ?>
 
-<script type="text/javascript" src="<?php echo base_url();?>assets/js/leaflet/L.MaidenheadColoured.js"></script>
 <script type="text/javascript" src="<?php echo base_url();?>assets/js/sections/gridmap.js?"></script>
+<script type="text/javascript" src="<?php echo base_url();?>assets/js/leaflet/L.MaidenheadColoured.js"></script>
 
 <script>
 
diff --git a/assets/js/leaflet/L.MaidenheadColoured.js b/assets/js/leaflet/L.MaidenheadColoured.js
index 395843def..23e73779a 100644
--- a/assets/js/leaflet/L.MaidenheadColoured.js
+++ b/assets/js/leaflet/L.MaidenheadColoured.js
@@ -4,9 +4,16 @@
 
 L.Maidenhead = L.LayerGroup.extend({
 
-
 	options: {
 		// Line and label color
+		workedColor: user_map_custom?.qso?.color
+			? hexToRgba(user_map_custom.qso.color, 0.5)
+			: 'rgba(255, 0, 0, 0.4)',
+
+		confirmedColor: user_map_custom?.qsoconfirm?.color
+			? hexToRgba(user_map_custom.qsoconfirm.color, 0.5)
+			: 'rgba(144,238,144, 0.5)',
+
 		color: 'rgba(255, 0, 0, 0.4)',
 
 		// Redraw on move or moveend
@@ -69,10 +76,10 @@ L.Maidenhead = L.LayerGroup.extend({
 					if(grid_two.includes(locator) || grid_four.includes(locator) || grid_six.includes(locator)) {
 
 						if(grid_two_confirmed.includes(locator) || grid_four_confirmed.includes(locator) || grid_six_confirmed.includes(locator)) {
-							var rectConfirmed = L.rectangle(bounds, {className: 'grid-rectangle grid-confirmed', color: 'rgba(144,238,144, 0.6)', weight: 1, fillOpacity: 1, fill:true, interactive: false});
+							var rectConfirmed = L.rectangle(bounds, {className: 'grid-rectangle grid-confirmed', color: this.options.confirmedColor, weight: 1, fillOpacity: 1, fill:true, interactive: false});
 							this.addLayer(rectConfirmed);
 						} else {
-							var rectWorked = L.rectangle(bounds, {className: 'grid-rectangle grid-worked', color: this.options.color, weight: 1, fillOpacity: 1, fill:true, interactive: false})
+							var rectWorked = L.rectangle(bounds, {className: 'grid-rectangle grid-worked', color: this.options.workedColor, weight: 1, fillOpacity: 1, fill:true, interactive: false})
 							this.addLayer(rectWorked);
 						}
 						// Controls text on grid on various zoom levels
@@ -80,11 +87,11 @@ L.Maidenhead = L.LayerGroup.extend({
 							this.addLayer(this._getLabel(lon+unit-(unit/lcor),lat+(unit/2)+(unit/lcor*c)));
 						}
 						if (zoom < 3 ) {
-							this.addLayer(L.rectangle(bounds, {className: 'grid-rectangle', color: this.options.color, weight: 1, fill:false, interactive: false}));
+							this.addLayer(L.rectangle(bounds, {className: 'grid-rectangle', color: this.options.workedColor, weight: 1, fill:false, interactive: false}));
 						}
 					} else {
 						if (zoom < 3 || zoom > 5) {
-							this.addLayer(L.rectangle(bounds, {className: 'grid-rectangle', color: this.options.color, weight: 1, fill:false, interactive: false}));
+							this.addLayer(L.rectangle(bounds, {className: 'grid-rectangle', color: this.options.workedColor, weight: 1, fill:false, interactive: false}));
 						}
 					}
 					if (zoom < 3 || zoom > 5) {
@@ -106,7 +113,7 @@ L.Maidenhead = L.LayerGroup.extend({
 
 						this.addLayer(L.rectangle(bounds, {
 							className: 'grid-rectangle',
-							color: this.options.color,
+							color: this.options.workedColor,
 							weight: 1,
 							fill: false,
 							interactive: false
@@ -125,7 +132,7 @@ L.Maidenhead = L.LayerGroup.extend({
 	  var title = '';
 	  var locator = this._getLocator(lon,lat);
 	  if (zoom != 4 && zoom != 3) {
-		  title = '<span class="grid-text" style="cursor: default;"><font style="color:'+this.options.color+'; font-size:'+size+'; font-weight: 900; ">' + locator + '</font></span>';
+		  title = '<span class="grid-text" style="cursor: default;"><font style="color:'+this.options.workedColor+'; font-size:'+size+'; font-weight: 900; ">' + locator + '</font></span>';
 	  }
 	  var myIcon = L.divIcon({className: 'my-div-icon', html: title});
       var marker = L.marker([lat,lon], {icon: myIcon}, clickable=false);
@@ -175,7 +182,7 @@ L.Maidenhead = L.LayerGroup.extend({
 		var title_size = new Array(0, 10, 12, 16, 20, 26, 26, 16, 24, 36, 12, 14, 20, 36, 60, 12, 20, 36, 60, 12, 24);
 		var zoom = map.getZoom();
 		var size = title_size[zoom]+'px';
-		var title = '<span class="grid-text" style="cursor: default;"><font style="color:'+this.options.color+'; font-size:'+size+'; font-weight: 900; ">' + this._getLocator2(lon,lat) + '</font></span>';
+		var title = '<span class="grid-text" style="cursor: default;"><font style="color:'+this.options.workedColor+'; font-size:'+size+'; font-weight: 900; ">' + this._getLocator2(lon,lat) + '</font></span>';
 		var myIcon = L.divIcon({className: 'my-div-icon', html: title});
 		var marker = L.marker([lat,lon], {icon: myIcon}, clickable=false);
 		return marker;
diff --git a/assets/js/sections/common.js b/assets/js/sections/common.js
index a0715ca28..ec30538d6 100644
--- a/assets/js/sections/common.js
+++ b/assets/js/sections/common.js
@@ -1377,24 +1377,6 @@ function showToast(title, text, type = 'bg-success text-white', delay = 3000) {
 	toastEl.addEventListener('hidden.bs.toast', () => toastEl.remove());
 }
 
-function hexToRgba(hex, alpha = 1) {
-	if (!hex) return null;
-	// Remove the leading "#"
-	hex = hex.replace(/^#/, '');
-
-	// Expand short form (#f0a → #ff00aa)
-	if (hex.length === 3) {
-		hex = hex.split('').map(c => c + c).join('');
-	}
-
-	const num = parseInt(hex, 16);
-	const r = (num >> 16) & 255;
-	const g = (num >> 8) & 255;
-	const b = num & 255;
-
-	return `rgba(${r}, ${g}, ${b}, ${alpha})`;
-}
-
 /**
  * Cookie Management Utilities
  */
diff --git a/assets/js/sections/gridmap.js b/assets/js/sections/gridmap.js
index 8b2f19206..e76d26f9a 100644
--- a/assets/js/sections/gridmap.js
+++ b/assets/js/sections/gridmap.js
@@ -304,6 +304,24 @@ function hideLegend() {
 	$("#gridmapLegend").hide();
 }
 
+function hexToRgba(hex, alpha = 1) {
+	if (!hex) return null;
+	// Remove the leading "#"
+	hex = hex.replace(/^#/, '');
+
+	// Expand short form (#f0a → #ff00aa)
+	if (hex.length === 3) {
+		hex = hex.split('').map(c => c + c).join('');
+	}
+
+	const num = parseInt(hex, 16);
+	const r = (num >> 16) & 255;
+	const g = (num >> 8) & 255;
+	const b = num & 255;
+
+	return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+
 $(document).ready(function(){
 	gridPlot(this.form, visitor);
 	$(window).resize(function () {