Fix colors in visitor map

This commit is contained in:
phl0
2025-11-25 09:12:19 +01:00
parent 28088eecc4
commit 3e976a2d20
5 changed files with 35 additions and 28 deletions

View File

@@ -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")),

View File

@@ -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>

View File

@@ -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;

View File

@@ -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
*/

View File

@@ -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 () {