adam/potato-mesh
1
0
Fork 0
mirror of https://github.com/l5yth/potato-mesh.git synced 2026-08-06 08:53:41 +02:00
Code Issues Packages Projects Releases Wiki Activity

Color markers by role with grayscale map (#16)

Browse Source 
* Color markers by device role and grayscale map

* add working background tile layer
This commit is contained in:
l5y
2025-09-13 14:56:23 +02:00
committed by GitHub
parent da1296b320
commit f7582d062d
1 changed files with 35 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/public/nodes.html
+35 -4
View File
@@ -35,6 +35,8 @@
button:hover { background: #f6f6f6; }
label { font-size: 14px; color: #333; }
input[type="text"] { padding: 6px 10px; border: 1px solid #ccc; border-radius: 6px; }
.legend { background: #fff; padding: 6px 8px; border: 1px solid #ccc; border-radius: 4px; font-size: 12px; line-height: 18px; }
.legend span { display: inline-block; width: 12px; height: 12px; margin-right: 6px; vertical-align: middle; }
</style>
</head>
<body>
@@ -82,17 +84,39 @@
const baseTitle = document.title;
let allNodes = [];
const roleColors = {
CLIENT: '#A8D5BA',
CLIENT_HIDDEN: '#B8DCA9',
CLIENT_MUTE: '#D2E3A2',
TRACKER: '#E8E6A1',
SENSOR: '#F4E3A3',
LOST_AND_FOUND: '#F9D4A6',
REPEATER: '#F7B7A3',
ROUTER_LATE: '#F29AA3',
ROUTER: '#E88B94'
};
// --- Map setup ---
const map = L.map('map', { worldCopyJump: true });
const osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '&copy; OpenStreetMap contributors'
const tiles = L.tileLayer('https://tiles.stadiamaps.com/tiles/stamen_toner_lite/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: '&copy; OpenStreetMap contributors &amp; WMF Labs'
}).addTo(map);
// Default view (Berlin) until first data arrives
map.setView([52.5200, 13.4050], 10);
const markersLayer = L.layerGroup().addTo(map);
const legend = L.control({ position: 'bottomright' });
legend.onAdd = function () {
const div = L.DomUtil.create('div', 'legend');
for (const [role, color] of Object.entries(roleColors)) {
div.innerHTML += `<div><span style="background:${color}"></span>${role}</div>`;
}
return div;
};
legend.addTo(map);
// --- Helpers ---
function fmt(v, d = 5) {
if (v == null) return "";
@@ -145,7 +169,14 @@
const lat = Number(n.latitude), lon = Number(n.longitude);
if (Number.isNaN(lat) || Number.isNaN(lon)) continue;
const marker = L.marker([lat, lon]);
const color = roleColors[n.role] || '#3388ff';
const marker = L.circleMarker([lat, lon], {
radius: 6,
color: '#000',
weight: 1,
fillColor: color,
fillOpacity: 1
});
const lines = [
`<b>${n.short_name || ''}</b> <span class="mono">${n.node_id || ''}</span>`,
n.hw_model ? `Model: ${n.hw_model}` : null,