CalvinBackup/Shadowbroker
1
0
Fork 0
mirror of https://github.com/BigBodyCobain/Shadowbroker.git synced 2026-04-29 14:35:57 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix: replace KiwiSDR orange circles with radio tower icons

Browse Source 
Individual nodes now render as amber radio tower SVGs with signal waves.
Clusters use a subtle amber glow ring with count label instead of solid
orange blobs. Much less visual clutter against the flight/ship markers.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Former-commit-id: 96baa3415440118a6084c739d500a1ce5951d27f
This commit is contained in:
anoracleofra-code
2026-03-13 16:36:48 -06:00
parent 8ee807276c
commit eaa4210959
2 changed files with 17 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/MaplibreViewer.tsx
+16 -16
View File
@@ -19,7 +19,7 @@ import {
svgTanker, svgRecon, svgPlanePink, svgPlaneAlertRed, svgPlaneDarkBlue,
svgPlaneWhiteAlert, svgHeliPink, svgHeliAlertRed, svgHeliDarkBlue,
svgHeliBlue, svgHeliLime, svgHeliWhiteAlert, svgPlaneBlack, svgHeliBlack,
svgDrone, svgDataCenter, svgShipGray, svgShipRed, svgShipYellow,
svgDrone, svgDataCenter, svgRadioTower, svgShipGray, svgShipRed, svgShipYellow,
svgShipBlue, svgShipWhite, svgCarrier, svgCctv, svgWarning, svgThreat,
svgTriangleYellow, svgTriangleRed,
svgFireYellow, svgFireOrange, svgFireRed, svgFireDarkRed,
@@ -423,6 +423,7 @@ const MaplibreViewer = ({ data, activeLayers, onEntityClick, flyToLocation, sele
// Deferred icons — for off-by-default layers and rare variants
// Loaded in next frame to avoid blocking initial map render
setTimeout(() => {
loadImg('svgRadioTower', svgRadioTower);
loadImg('svgPlanePink', svgPlanePink);
loadImg('svgPlaneAlertRed', svgPlaneAlertRed);
loadImg('svgPlaneDarkBlue', svgPlaneDarkBlue);
@@ -1763,38 +1764,37 @@ const MaplibreViewer = ({ data, activeLayers, onEntityClick, flyToLocation, sele
</Source>
)}
{/* KiwiSDR Receivers — clustered amber dots */}
{/* KiwiSDR Receivers — radio tower icons */}
{kiwisdrGeoJSON && (
<Source id="kiwisdr" type="geojson" data={kiwisdrGeoJSON as any} cluster={true} clusterRadius={50} clusterMaxZoom={14}>
{/* Cluster glow ring */}
<Layer
id="kiwisdr-clusters"
type="circle"
filter={['has', 'point_count']}
paint={{
'circle-color': '#f59e0b',
'circle-radius': ['step', ['get', 'point_count'], 14, 10, 18, 50, 24, 200, 30],
'circle-opacity': 0.8,
'circle-stroke-width': 2,
'circle-stroke-color': '#d97706'
'circle-color': 'rgba(245, 158, 11, 0.15)',
'circle-radius': ['step', ['get', 'point_count'], 18, 10, 22, 50, 28, 200, 34],
'circle-stroke-width': 1.5,
'circle-stroke-color': 'rgba(245, 158, 11, 0.5)'
}}
/>
<Layer
id="kiwisdr-cluster-count"
type="symbol"
filter={['has', 'point_count']}
layout={{ 'text-field': '{point_count_abbreviated}', 'text-size': 12, 'text-allow-overlap': true }}
paint={{ 'text-color': '#ffffff', 'text-halo-color': '#000000', 'text-halo-width': 1 }}
layout={{ 'text-field': '{point_count_abbreviated}', 'text-size': 11, 'text-allow-overlap': true, 'text-font': ['Noto Sans Bold'] }}
paint={{ 'text-color': '#f59e0b', 'text-halo-color': '#000000', 'text-halo-width': 1.5 }}
/>
{/* Individual tower icons */}
<Layer
id="kiwisdr-layer"
type="circle"
type="symbol"
filter={['!', ['has', 'point_count']]}
paint={{
'circle-color': '#f59e0b',
'circle-radius': ['interpolate', ['linear'], ['zoom'], 2, 2, 8, 4, 14, 6],
'circle-opacity': 0.9,
'circle-stroke-width': 1,
'circle-stroke-color': '#d97706'
layout={{
'icon-image': 'svgRadioTower',
'icon-size': ['interpolate', ['linear'], ['zoom'], 2, 0.5, 8, 0.8, 14, 1.0],
'icon-allow-overlap': true,
}}
/>
</Source>
frontend/src/components/map/icons/AircraftIcons.ts
+1
View File
@@ -33,6 +33,7 @@ export const svgShipBlue = `data:image/svg+xml;utf8,${encodeURIComponent(`<svg x
export const svgShipWhite = `data:image/svg+xml;utf8,${encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="36" viewBox="0 0 24 24" fill="none"><path d="M5 21 L5 8 L12 2 L19 8 L19 21 C19 23 5 23 5 21 Z" fill="white" stroke="#000" stroke-width="1"/><rect x="7" y="10" width="10" height="8" fill="#90cdf4" stroke="#000" stroke-width="1"/><circle cx="12" cy="14" r="2" fill="yellow" stroke="#000"/></svg>`)}`;
export const svgCarrier = `data:image/svg+xml;utf8,${encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="orange" stroke="black"><polygon points="3,21 21,21 20,4 16,4 16,3 12,3 12,4 4,4" /><rect x="15" y="6" width="3" height="10" /></svg>`)}`;
export const svgCctv = `data:image/svg+xml;utf8,${encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="cyan" stroke-width="2"><path d="M16.75 12h3.632a1 1 0 0 1 .894 1.447l-2.034 4.069a1 1 0 0 1-.894.553H5.652a1 1 0 0 1-.894-.553L2.724 13.447A1 1 0 0 1 3.618 12h3.632M14 12V8a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v4a4 4 0 1 0 8 0Z" /></svg>`)}`;
export const svgRadioTower = `data:image/svg+xml;utf8,${encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#f59e0b" stroke-width="1.5"><line x1="12" y1="10" x2="12" y2="23" stroke="#f59e0b" stroke-width="2"/><line x1="8" y1="23" x2="16" y2="23" stroke="#f59e0b" stroke-width="2" stroke-linecap="round"/><line x1="9" y1="16" x2="15" y2="16" stroke="#f59e0b" stroke-width="1.5" stroke-linecap="round"/><circle cx="12" cy="9" r="2" fill="#f59e0b" stroke="none"/><path d="M8 6a5.5 5.5 0 0 1 8 0" fill="none" stroke="#f59e0b" stroke-width="1.5" stroke-linecap="round"/><path d="M5.5 3.5a9 9 0 0 1 13 0" fill="none" stroke="#f59e0b" stroke-width="1.5" stroke-linecap="round" opacity="0.6"/></svg>`)}`;
export const svgWarning = `data:image/svg+xml;utf8,${encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="yellow" stroke="black"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z" /><path d="M12 9v4" /><path d="M12 17h.01" /></svg>`)}`;
export const svgThreat = `data:image/svg+xml;utf8,${encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="#ffff00" stroke="#ff0000" stroke-width="2"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z" /><path d="M12 9v4" /><path d="M12 17h.01" /></svg>`)}`;
export const svgTriangleYellow = `data:image/svg+xml;utf8,${encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="#ffaa00" stroke="#000" stroke-width="1"><path d="M1 21h22L12 2 1 21z"/></svg>`)}`;