iarv/meshcore-hub
1
0
Fork 1
mirror of https://github.com/ipnet-mesh/meshcore-hub.git synced 2026-03-28 17:42:56 +01:00
Code Issues Packages Projects Releases Wiki Activity

Use colored dots for map markers instead of logo

Browse Source 
Replace logo icons with colored circle markers:
- Red dots for infrastructure nodes
- Blue dots for public nodes

Update popup overlay to show type emoji (📡, 💬, etc.) on the left
and infra/public indicator dot on the right of the node name.
Update legend to match new marker style.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Louis King
2026-02-08 23:50:44 +00:00
parent 0e6cbc8094
commit 25831f14e6
2 changed files with 25 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/meshcore_hub/web/static/js/map-main.js
View File

@@ -104,10 +104,10 @@
var relativeTime = typeof formatRelativeTime === 'function' ? formatRelativeTime(node.last_seen) : '';
var timeDisplay = relativeTime ? ' (' + relativeTime + ')' : '';
// Use logo for infrastructure nodes, blue circle for others
// Use red circle for infrastructure nodes, blue circle for others
var iconHtml;
if (node.is_infra) {
iconHtml = '<img src="' + logoUrl + '" alt="Infra" style="width: 24px; height: 24px; filter: drop-shadow(0 0 2px #1a237e) drop-shadow(0 0 4px #1a237e) drop-shadow(0 1px 2px rgba(0,0,0,0.7));">';
iconHtml = '<div style="width: 12px; height: 12px; background: #ef4444; border: 2px solid #b91c1c; border-radius: 50%; box-shadow: 0 0 4px rgba(239,68,68,0.6), 0 1px 2px rgba(0,0,0,0.5);"></div>';
} else {
iconHtml = '<div style="width: 12px; height: 12px; background: #3b82f6; border: 2px solid #1e40af; border-radius: 50%; box-shadow: 0 0 4px rgba(59,130,246,0.6), 0 1px 2px rgba(0,0,0,0.5);"></div>';
}
@@ -123,6 +123,17 @@
});
}
/**
* Get type emoji for node
*/
function getTypeEmoji(node) {
var type = normalizeType(node.adv_type);
if (type === 'chat') return '💬';
if (type === 'repeater') return '📡';
if (type === 'room') return '🪧';
return '📍';
}
/**
* Create popup content for a node
*/
@@ -141,18 +152,23 @@
}
var typeDisplay = getTypeDisplay(node);
var typeEmoji = getTypeEmoji(node);
// Use logo for infrastructure nodes, blue circle for others
var iconHtml = node.is_infra
? '<img src="' + logoUrl + '" alt="Infra" style="width: 20px; height: 20px; display: inline-block; vertical-align: middle;">'
: '<span style="display: inline-block; width: 12px; height: 12px; background: #3b82f6; border: 2px solid #1e40af; border-radius: 50%; vertical-align: middle;"></span>';
// Infra indicator (red/blue dot) shown to the right of the title if is_infra is defined
var infraIndicatorHtml = '';
if (typeof node.is_infra !== 'undefined') {
var dotColor = node.is_infra ? '#ef4444' : '#3b82f6';
var borderColor = node.is_infra ? '#b91c1c' : '#1e40af';
var title = node.is_infra ? 'Infrastructure' : 'Public';
infraIndicatorHtml = ' <span style="display: inline-block; width: 10px; height: 10px; background: ' + dotColor + '; border: 2px solid ' + borderColor + '; border-radius: 50%; vertical-align: middle;" title="' + title + '"></span>';
}
var lastSeenHtml = node.last_seen
? '<p><span class="opacity-70">Last seen:</span> ' + node.last_seen.substring(0, 19).replace('T', ' ') + '</p>'
: '';
return '<div class="p-2">' +
'<h3 class="font-bold text-lg mb-2">' + iconHtml + ' ' + node.name + '</h3>' +
'<h3 class="font-bold text-lg mb-2">' + typeEmoji + ' ' + node.name + infraIndicatorHtml + '</h3>' +
'<div class="space-y-1 text-sm">' +
'<p><span class="opacity-70">Type:</span> ' + typeDisplay + '</p>' +
roleHtml +

4
src/meshcore_hub/web/templates/map.html
View File

@@ -65,12 +65,12 @@
<div class="mt-4 flex flex-wrap gap-4 items-center text-sm">
<span class="opacity-70">Legend:</span>
<div class="flex items-center gap-1">
<img src="{{ logo_url }}" alt="Infrastructure" class="h-5 w-5">
<div style="width: 10px; height: 10px; background: #ef4444; border: 2px solid #b91c1c; border-radius: 50%;"></div>
<span>Infrastructure</span>
</div>
<div class="flex items-center gap-1">
<div style="width: 10px; height: 10px; background: #3b82f6; border: 2px solid #1e40af; border-radius: 50%;"></div>
<span>Node</span>
<span>Public</span>
</div>
</div>