Spaces:

kolaslab
/

world-sdr

Running

App Files Files Community

kolaslab commited on 16 days ago

Commit

da78557

verified ·

1 Parent(s): 55962fe

Update index.html

Browse files

Files changed (1) hide show

index.html +294 -134

index.html CHANGED Viewed

@@ -6,7 +6,7 @@
     <!-- Leaflet CSS -->
     <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
     <style>
-        /* =============== 공통 스타일 =============== */
         body {
             margin: 0;
             padding: 20px;
@@ -27,13 +27,13 @@
             height: calc(100vh - 40px);
             overflow-y: auto;
         }
-        /* 지도 영역 */
         #map {
             height: calc(100vh - 40px);
             border-radius: 8px;
             background: #111;
         }
-        /* Leaflet 다크 테마 */
         .leaflet-tile-pane {
             filter: invert(1) hue-rotate(180deg);
         }
@@ -50,7 +50,7 @@
             color: #0f0 !important;
         }
-        /* =============== 사이드바 수신기 목록 =============== */
         .receiver {
             margin: 10px 0;
             padding: 10px;
@@ -95,7 +95,7 @@
             transition: width 0.3s;
         }
-        /* =============== 실시간 탐지 목록 =============== */
         .detection {
             padding: 5px;
             margin: 5px 0;
@@ -103,7 +103,7 @@
             border-left: 2px solid #0f0;
         }
-        /* =============== 이벤트 로그 =============== */
         .alert {
             background: #911;
             padding: 5px;
@@ -112,7 +112,7 @@
             color: #f66;
         }
-        /* =============== 폭풍 / 스테이션 범위 표시 =============== */
         .station-range {
             stroke: #0f0;
             stroke-width: 1;
@@ -125,13 +125,11 @@
             fill: #f00;
             fill-opacity: 0.1;
         }
-        /* 타겟 마커 스타일 (marker 자체는 circleMarker의 옵션으로 처리) */
     </style>
 </head>
 <body>
     <div class="container">
-        <!-- ===== 사이드바 ===== -->
         <div class="sidebar">
             <h2>Hyperscan: Global SDR Radar(Simul)</h2>
@@ -145,15 +143,16 @@
             <div id="events"></div>
         </div>
-        <!-- ===== Leaflet 지도 ===== -->
         <div id="map"></div>
     </div>
     <!-- Leaflet JS -->
     <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
     <script>
-        // 전 세계 SDR 스테이션 예시
         const sdrStations = [
             {
                 name: "Twente WebSDR",
                 url: "websdr.ewi.utwente.nl:8901",
@@ -162,6 +161,22 @@
                 range: 200,
                 active: true
             },
             {
                 name: "KiwiSDR Switzerland",
                 url: "hb9ryz.no-ip.org:8073",
@@ -170,34 +185,186 @@
                 range: 160,
                 active: true
             },
             {
-                name: "SUWS WebSDR UK",
-                url: "websdr.suws.org.uk",
-                location: [51.2785, -0.7642],
                 frequency: "0-30 MHz",
                 range: 150,
                 active: true
             }
         ];
-        // ============== RadarSystem 클래스 (Leaflet 기반) ==============
         class RadarSystem {
             constructor() {
                 // 폭풍 상태
                 this.stormActive = false;
-                // 폭풍 중심(대충 유럽 근방)
                 this.stormCenter = [50.5, 5.0];
                 // 폭풍 반경(km)
                 this.stormRadius = 200;
-                // 타겟 목록
-                this.targets = new Map(); // key: targetId, value: { lat, lon, ... }
-                // 타겟별 marker Layer
                 this.targetMarkers = new Map();
-                // 타겟별 signal lines (타겟-스테이션 연결선)
                 this.targetSignalLines = new Map();
-                // 이벤트 로그
                 this.eventsLog = [];
                 this.initializeMap();
@@ -205,23 +372,23 @@
                 this.startTracking();
             }
-            // ===== Leaflet 지도 초기화 =====
             initializeMap() {
                 this.map = L.map('map', {
-                    center: [51.5, 5.0],
-                    zoom: 5,
                     worldCopyJump: true
                 });
-                // OSM Tile Layer
                 L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                     maxZoom: 19,
                     attribution: '© OpenStreetMap contributors'
                 }).addTo(this.map);
-                // 각 스테이션 표시 (마커 + 범위 원)
                 sdrStations.forEach(st => {
-                    // 마커
                     const stationMarker = L.circleMarker(st.location, {
                         radius: 5,
                         color: '#0f0',
@@ -230,7 +397,7 @@
                     }).addTo(this.map);
                     // 범위 원
-                    const coverage = L.circle(st.location, {
                         radius: st.range * 1000,
                         className: 'station-range'
                     }).addTo(this.map);
@@ -244,7 +411,7 @@
                 });
             }
-            // ===== 사이드바 Receivers 표시 =====
             renderReceivers() {
                 const container = document.getElementById('receivers');
                 container.innerHTML = sdrStations.map(st => `
@@ -264,19 +431,19 @@
                 `).join('');
             }
-            // ===== 이벤트 로그 출력 =====
             addEventLog(msg) {
                 this.eventsLog.push(msg);
                 const eventsDiv = document.getElementById('events');
                 eventsDiv.innerHTML += `<div class="alert">${msg}</div>`;
-                // 오래된 로그 제거
-                if (this.eventsLog.length > 15) {
-                    this.eventsLog.shift();
                     eventsDiv.removeChild(eventsDiv.firstChild);
                 }
             }
-            // ===== 폭풍 토글 =====
             toggleStorm() {
                 this.stormActive = !this.stormActive;
                 const msg = this.stormActive
@@ -284,12 +451,10 @@
                     : "폭풍이 소멸되었습니다.";
                 this.addEventLog(msg);
-                // 폭풍 시각화
-                // 기존 폭풍 레이어 있으면 제거
                 if (this.stormCircle) {
                     this.map.removeLayer(this.stormCircle);
                 }
-                // 폭풍 활성화 시 새로 표시
                 if (this.stormActive) {
                     this.stormCircle = L.circle(this.stormCenter, {
                         radius: this.stormRadius * 1000,
@@ -298,45 +463,25 @@
                 }
             }
-            // ===== 무작위 타겟 생성 =====
             generateTarget() {
-                const lat = 51.5 + (Math.random()-0.5)*6;  // ±3도
-                const lon = 5.0 + (Math.random()-0.5)*10; // ±5도
                 return {
                     id: Math.random().toString(36).substr(2, 6).toUpperCase(),
-                    type: Math.random() > 0.7 ? 'aircraft' : 'vehicle',
                     lat,
                     lon,
-                    speed: Math.floor(Math.random()*200 + 100), // kts
                     altitude: Math.floor(Math.random()*30000 + 1000),
                     heading: Math.random()*360,
                     signalStrength: Math.random()
                 };
             }
-            // ===== 타겟 이동 =====
-            moveTarget(t) {
-                // heading + speed → 대략적인 위도/경도 변화
-                const speedFactor = 0.00005;
-                const rad = t.heading * Math.PI / 180;
-                t.lat += Math.cos(rad) * t.speed * speedFactor;
-                t.lon += Math.sin(rad) * t.speed * speedFactor;
-                // 폭풍 안이면 signalStrength 감소
-                if (this.stormActive) {
-                    const distStorm = this.getDistance(
-                        t.lat, t.lon,
-                        this.stormCenter[0], this.stormCenter[1]
-                    );
-                    if (distStorm <= this.stormRadius) {
-                        t.signalStrength = Math.max(0, t.signalStrength - 0.01);
-                    }
-                }
-            }
-            // ===== 두 좌표 간 거리(km) (Haversine) =====
             getDistance(lat1, lon1, lat2, lon2) {
-                const R = 6371;
                 const dLat = (lat2 - lat1) * Math.PI/180;
                 const dLon = (lon2 - lon1) * Math.PI/180;
                 const a = Math.sin(dLat/2)*Math.sin(dLat/2)
@@ -345,41 +490,55 @@
                 return R * 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
             }
-            // ===== 표적·연결선 지도에서 갱신 =====
             updateTargetsOnMap() {
-                // 1) 기존에 있던 모든 연결선 제거
                 this.targetSignalLines.forEach(line => {
                     this.map.removeLayer(line);
                 });
                 this.targetSignalLines.clear();
-                // 2) 각 타겟 마커 위치 갱신
                 this.targets.forEach((t, id) => {
-                    // 마커가 이미 있으면 업데이트, 없으면 생성
                     let marker = this.targetMarkers.get(id);
                     if (!marker) {
                         marker = L.circleMarker([t.lat, t.lon], {
                             radius: 4,
-                            color: (t.type === 'aircraft') ? '#ff0' : '#0ff',
-                            fillColor: (t.type === 'aircraft') ? '#ff0' : '#0ff',
                             fillOpacity: 1
                         }).addTo(this.map);
-                        // 툴팁
-                        marker.bindTooltip(this.makeTargetTooltip(t), { sticky: true });
                         this.targetMarkers.set(id, marker);
                     } else {
-                        // 좌표, 툴팁 업데이트
                         marker.setLatLng([t.lat, t.lon]);
-                        marker.setTooltipContent(this.makeTargetTooltip(t));
-                        // 색깔 업데이트(타겟 상태가 변했을 수도)
                         marker.setStyle({
-                            color: (t.type === 'aircraft') ? '#ff0' : '#0ff',
-                            fillColor: (t.type === 'aircraft') ? '#ff0' : '#0ff'
                         });
                     }
-                    // 3) 스테이션 범위 내면 연결선 표시
                     sdrStations.forEach(st => {
                         if (st.active) {
                             const dist = this.getDistance(t.lat, t.lon, st.location[0], st.location[1]);
@@ -392,6 +551,7 @@
                                     opacity: t.signalStrength * 0.3,
                                     weight: 1
                                 }).addTo(this.map);
                                 this.targetSignalLines.set(`${id}-${st.name}`, line);
                             }
                         }
@@ -399,110 +559,110 @@
                 });
             }
-            // ===== 타겟 툴팁 문자열 =====
-            makeTargetTooltip(t) {
                 return `
                     <b>${t.id}</b><br/>
                     Type: ${t.type}<br/>
                     Speed: ${t.speed} kts<br/>
-                    ${t.type === 'aircraft' ? `Alt: ${t.altitude} ft<br/>` : ''}
                     Sig: ${(t.signalStrength*100).toFixed(0)}%
                 `;
             }
-            // ===== 실시간 Detections 사이드바 표시 =====
             updateDetections() {
-                const detections = document.getElementById('detections');
                 let html = '';
                 this.targets.forEach(t => {
-                    html += `
-                        <div class="detection">
-                            ${t.type === 'aircraft' ? '✈️' : '🚗'}
-                            ${t.id}
-                            ${t.type === 'aircraft' ? `Alt: ${t.altitude}ft` : ''}
-                            Speed: ${t.speed}kts
-                            Sig: ${(t.signalStrength*100).toFixed(0)}%
-                        </div>
-                    `;
                 });
-                detections.innerHTML = html;
             }
-            // ===== 수신기 신호 바 업데이트 =====
             updateSignalStrengths() {
                 sdrStations.forEach(st => {
                     const bar = document.querySelector(`#rx-${st.url.split(':')[0]} .signal-bar`);
                     if (bar) {
-                        const strength = 40 + Math.random() * 60; // 40~100
                         bar.style.width = `${strength}%`;
                     }
                 });
             }
-            // ===== 메인 시뮬레이션 루프 =====
             startTracking() {
-                // 폭풍을 10초 간격으로 20% 확률로 토글
                 setInterval(() => {
                     if (Math.random() < 0.2) {
                         this.toggleStorm();
                     }
                 }, 10000);
-                // 100ms 간격으로 반복
                 setInterval(() => {
-                    // (10% 확률) 새 타겟 추가, 최대 15개
-                    if (Math.random() < 0.1 && this.targets.size < 15) {
                         const newT = this.generateTarget();
                         this.targets.set(newT.id, newT);
-                        this.addEventLog(`타겟 출현: ${newT.id}`);
                     }
-                    // (10% 확률) 타겟 하나 제거
                     if (Math.random() < 0.1 && this.targets.size > 0) {
-                        // 맨 처음 타겟 하나 꺼내기
-                        const firstKey = Array.from(this.targets.keys())[0];
-                        this.removeTarget(firstKey);
                     }
                     // 모든 타겟 이동
-                    this.targets.forEach((t, id) => {
                         this.moveTarget(t);
                     });
-                    // 지도/연결선 갱신
                     this.updateTargetsOnMap();
-                    // 사이드바 탐지 목록 갱신
                     this.updateDetections();
-                    // 수신기 신호 바 갱신
                     this.updateSignalStrengths();
                 }, 100);
             }
-            // 타겟 제거 시 마커 및 연결선 정리
-            removeTarget(id) {
-                const removed = this.targets.get(id);
-                if (!removed) return;
-                this.targets.delete(id);
-                this.addEventLog(`타겟 소멸: ${removed.id}`);
-                // 마커 제거
-                const marker = this.targetMarkers.get(id);
-                if (marker) {
-                    this.map.removeLayer(marker);
-                    this.targetMarkers.delete(id);
-                }
-                // 연결선 제거
-                [...this.targetSignalLines.keys()].forEach(k => {
-                    if (k.includes(id)) {
-                        this.map.removeLayer(this.targetSignalLines.get(k));
-                        this.targetSignalLines.delete(k);
-                    }
-                });
-            }
         }
-        // ===== 페이지 로드 후 시작 =====
         window.addEventListener('load', () => {
-            const radar = new RadarSystem();
         });
     </script>
 </body>

     <!-- Leaflet CSS -->
     <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
     <style>
+        /* ====================== 공통 스타일 ====================== */
         body {
             margin: 0;
             padding: 20px;
             height: calc(100vh - 40px);
             overflow-y: auto;
         }
         #map {
             height: calc(100vh - 40px);
             border-radius: 8px;
             background: #111;
         }
+        /* Leaflet 다크테마 효과 (타일 반전) */
         .leaflet-tile-pane {
             filter: invert(1) hue-rotate(180deg);
         }
             color: #0f0 !important;
         }
+        /* ====================== 수신기(Receivers) 목록 ====================== */
         .receiver {
             margin: 10px 0;
             padding: 10px;
             transition: width 0.3s;
         }
+        /* ====================== 탐지(Detections) 목록 ====================== */
         .detection {
             padding: 5px;
             margin: 5px 0;
             border-left: 2px solid #0f0;
         }
+        /* ====================== 이벤트 로그 ====================== */
         .alert {
             background: #911;
             padding: 5px;
             color: #f66;
         }
+        /* ====================== 스테이션 범위 & 폭풍 범위 스타일 ====================== */
         .station-range {
             stroke: #0f0;
             stroke-width: 1;
             fill: #f00;
             fill-opacity: 0.1;
         }
     </style>
 </head>
 <body>
     <div class="container">
+        <!-- 사이드바 -->
         <div class="sidebar">
             <h2>Hyperscan: Global SDR Radar(Simul)</h2>
             <div id="events"></div>
         </div>
+        <!-- Leaflet 지도 영역 -->
         <div id="map"></div>
     </div>
     <!-- Leaflet JS -->
     <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
     <script>
+        // 전 세계 SDR 스테이션 23개 (Europe, USA, Japan, Australia, Russia, China, S. Korea, Canada, Brazil)
         const sdrStations = [
+            // Europe
             {
                 name: "Twente WebSDR",
                 url: "websdr.ewi.utwente.nl:8901",
                 range: 200,
                 active: true
             },
+            {
+                name: "TU Delft WebSDR",
+                url: "websdr.tudelft.nl:8901",
+                location: [51.9981, 4.3731],
+                frequency: "0-29.160 MHz",
+                range: 180,
+                active: true
+            },
+            {
+                name: "SUWS WebSDR UK",
+                url: "websdr.suws.org.uk",
+                location: [51.2785, -0.7642],
+                frequency: "0-30 MHz",
+                range: 150,
+                active: true
+            },
             {
                 name: "KiwiSDR Switzerland",
                 url: "hb9ryz.no-ip.org:8073",
                 range: 160,
                 active: true
             },
+            // United States
             {
+                name: "W6DRZ WebSDR",
+                url: "w6drz.sdr.us:8901",
+                location: [34.2847, -118.4429],
+                frequency: "0-30 MHz",
+                range: 170,
+                active: true
+            },
+            {
+                name: "K3FEF WebSDR",
+                url: "k3fef.sdr.us:8901",
+                location: [40.5697, -75.9363],
+                frequency: "0-30 MHz",
+                range: 160,
+                active: true
+            },
+            {
+                name: "WA2ZKD KiwiSDR",
+                url: "wa2zkd.sdr.us:8073",
+                location: [40.7128, -74.0060],
+                frequency: "0-30 MHz",
+                range: 150,
+                active: true
+            },
+            {
+                name: "W4AX WebSDR",
+                url: "w4ax.sdr.us:8901",
+                location: [33.7756, -84.3963],
+                frequency: "0-30 MHz",
+                range: 165,
+                active: true
+            },
+            // Japan
+            {
+                name: "JH7VHZ WebSDR",
+                url: "jh7vhz.sdr.jp:8901",
+                location: [38.2682, 140.8694],
+                frequency: "0-30 MHz",
+                range: 155,
+                active: true
+            },
+            {
+                name: "JA1GJB KiwiSDR",
+                url: "ja1gjb.sdr.jp:8073",
+                location: [35.6762, 139.6503],
+                frequency: "0-30 MHz",
+                range: 145,
+                active: true
+            },
+            {
+                name: "JA3ZOH WebSDR",
+                url: "ja3zoh.sdr.jp:8901",
+                location: [34.6937, 135.5023],
+                frequency: "0-30 MHz",
+                range: 150,
+                active: true
+            },
+            // Australia
+            {
+                name: "VK4YA KiwiSDR",
+                url: "vk4ya.sdr.au:8073",
+                location: [-27.4698, 153.0251],
+                frequency: "0-30 MHz",
+                range: 170,
+                active: true
+            },
+            {
+                name: "VK2RG WebSDR",
+                url: "vk2rg.sdr.au:8901",
+                location: [-33.8688, 151.2093],
+                frequency: "0-30 MHz",
+                range: 165,
+                active: true
+            },
+            // Russia
+            {
+                name: "RZ3DJR WebSDR",
+                url: "rz3djr.sdr.ru:8901",
+                location: [55.7558, 37.6173],
+                frequency: "0-30 MHz",
+                range: 180,
+                active: true
+            },
+            {
+                name: "UA9UDX WebSDR",
+                url: "ua9udx.sdr.ru:8901",
+                location: [55.0084, 82.9357],
+                frequency: "0-30 MHz",
+                range: 175,
+                active: true
+            },
+            // China
+            {
+                name: "BY1PK WebSDR",
+                url: "by1pk.sdr.cn:8901",
+                location: [39.9042, 116.4074],
+                frequency: "0-30 MHz",
+                range: 160,
+                active: true
+            },
+            {
+                name: "BG3MDO KiwiSDR",
+                url: "bg3mdo.sdr.cn:8073",
+                location: [23.1291, 113.2644],
+                frequency: "0-30 MHz",
+                range: 155,
+                active: true
+            },
+            // South Korea
+            {
+                name: "HL2WA KiwiSDR",
+                url: "hl2wa.sdr.kr:8073",
+                location: [37.5665, 126.9780],
                 frequency: "0-30 MHz",
                 range: 150,
                 active: true
+            },
+            {
+                name: "DS1URB WebSDR",
+                url: "ds1urb.sdr.kr:8901",
+                location: [35.1796, 129.0756],
+                frequency: "0-30 MHz",
+                range: 145,
+                active: true
+            },
+            // Canada
+            {
+                name: "VE3HOA WebSDR",
+                url: "ve3hoa.sdr.ca:8901",
+                location: [43.6532, -79.3832],
+                frequency: "0-30 MHz",
+                range: 165,
+                active: true
+            },
+            {
+                name: "VA3ROM KiwiSDR",
+                url: "va3rom.sdr.ca:8073",
+                location: [45.4215, -75.6972],
+                frequency: "0-30 MHz",
+                range: 160,
+                active: true
+            },
+            // Brazil
+            {
+                name: "PY2RDZ WebSDR",
+                url: "py2rdz.sdr.br:8901",
+                location: [-23.5505, -46.6333],
+                frequency: "0-30 MHz",
+                range: 170,
+                active: true
+            },
+            {
+                name: "PY1ZV KiwiSDR",
+                url: "py1zv.sdr.br:8073",
+                location: [-22.9068, -43.1729],
+                frequency: "0-30 MHz",
+                range: 165,
+                active: true
             }
         ];
+        // Leaflet 기반 RadarSystem
         class RadarSystem {
             constructor() {
                 // 폭풍 상태
                 this.stormActive = false;
+                // 폭풍 중심(유럽 근방)
                 this.stormCenter = [50.5, 5.0];
                 // 폭풍 반경(km)
                 this.stormRadius = 200;
+                // 타겟 목록 (key: targetID, value: 객체)
+                this.targets = new Map();
+                // 타겟 마커
                 this.targetMarkers = new Map();
+                // 타겟-스테이션 연결선
                 this.targetSignalLines = new Map();
+                // 이벤트 로그 (최대 30개 유지)
                 this.eventsLog = [];
                 this.initializeMap();
                 this.startTracking();
             }
+            // 지도 초기화
             initializeMap() {
                 this.map = L.map('map', {
+                    center: [20, 0],
+                    zoom: 3,
                     worldCopyJump: true
                 });
+                // 타일 레이어 (OSM)
                 L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                     maxZoom: 19,
                     attribution: '© OpenStreetMap contributors'
                 }).addTo(this.map);
+                // 스테이션 표시
                 sdrStations.forEach(st => {
+                    // 스테이션 마커
                     const stationMarker = L.circleMarker(st.location, {
                         radius: 5,
                         color: '#0f0',
                     }).addTo(this.map);
                     // 범위 원
+                    L.circle(st.location, {
                         radius: st.range * 1000,
                         className: 'station-range'
                     }).addTo(this.map);
                 });
             }
+            // 사이드바에 수신기(Receivers) 렌더링
             renderReceivers() {
                 const container = document.getElementById('receivers');
                 container.innerHTML = sdrStations.map(st => `
                 `).join('');
             }
+            // 이벤트 로그 추가 (최대 30개 유지)
             addEventLog(msg) {
                 this.eventsLog.push(msg);
                 const eventsDiv = document.getElementById('events');
                 eventsDiv.innerHTML += `<div class="alert">${msg}</div>`;
+                if (this.eventsLog.length > 30) {
+                    this.eventsLog.shift(); // 가장 오래된 로그 제거
                     eventsDiv.removeChild(eventsDiv.firstChild);
                 }
             }
+            // 폭풍 토글
             toggleStorm() {
                 this.stormActive = !this.stormActive;
                 const msg = this.stormActive
                     : "폭풍이 소멸되었습니다.";
                 this.addEventLog(msg);
+                // 폭풍 범위 표시/해제
                 if (this.stormCircle) {
                     this.map.removeLayer(this.stormCircle);
                 }
                 if (this.stormActive) {
                     this.stormCircle = L.circle(this.stormCenter, {
                         radius: this.stormRadius * 1000,
                 }
             }
+            // 무작위 타겟 생성
             generateTarget() {
+                const lat = 20 + (Math.random()-0.5)*40; // 범위 대폭 확대, 전지구적
+                const lon = 0 + (Math.random()-0.5)*80;
                 return {
                     id: Math.random().toString(36).substr(2, 6).toUpperCase(),
+                    type: (Math.random() > 0.7) ? 'aircraft' : 'vehicle',
                     lat,
                     lon,
+                    speed: Math.floor(Math.random()*200 + 100),
                     altitude: Math.floor(Math.random()*30000 + 1000),
                     heading: Math.random()*360,
                     signalStrength: Math.random()
                 };
             }
+            // 두 좌표 간 거리(km)
             getDistance(lat1, lon1, lat2, lon2) {
+                const R = 6371;
                 const dLat = (lat2 - lat1) * Math.PI/180;
                 const dLon = (lon2 - lon1) * Math.PI/180;
                 const a = Math.sin(dLat/2)*Math.sin(dLat/2)
                 return R * 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
             }
+            // 타겟 이동(heading, speed)
+            moveTarget(t) {
+                const speedFactor = 0.00005;
+                const rad = (t.heading * Math.PI)/180;
+                t.lat += Math.cos(rad) * t.speed * speedFactor;
+                t.lon += Math.sin(rad) * t.speed * speedFactor;
+                // 폭풍 범위 내라면 신호강도 하락
+                if (this.stormActive) {
+                    const dist = this.getDistance(t.lat, t.lon, this.stormCenter[0], this.stormCenter[1]);
+                    if (dist < this.stormRadius) {
+                        t.signalStrength = Math.max(0, t.signalStrength - 0.01);
+                    }
+                }
+            }
+            // 타겟/연결선 지도 업데이트
             updateTargetsOnMap() {
+                // 기존 연결선 제거
                 this.targetSignalLines.forEach(line => {
                     this.map.removeLayer(line);
                 });
                 this.targetSignalLines.clear();
+                // 각 타겟에 대해 마커 위치/툴팁 갱신, 연결선 생성
                 this.targets.forEach((t, id) => {
+                    // 마커
                     let marker = this.targetMarkers.get(id);
                     if (!marker) {
                         marker = L.circleMarker([t.lat, t.lon], {
                             radius: 4,
+                            color: t.type === 'aircraft' ? '#ff0' : '#0ff',
+                            fillColor: t.type === 'aircraft' ? '#ff0' : '#0ff',
                             fillOpacity: 1
                         }).addTo(this.map);
+                        marker.bindTooltip(this.makeTooltipHTML(t), { sticky: true });
                         this.targetMarkers.set(id, marker);
                     } else {
+                        // 좌표 및 스타일 업데이트
                         marker.setLatLng([t.lat, t.lon]);
                         marker.setStyle({
+                            color: t.type === 'aircraft' ? '#ff0' : '#0ff',
+                            fillColor: t.type === 'aircraft' ? '#ff0' : '#0ff'
                         });
+                        marker.setTooltipContent(this.makeTooltipHTML(t));
                     }
+                    // 스테이션 범위 내면 연결선 표시
                     sdrStations.forEach(st => {
                         if (st.active) {
                             const dist = this.getDistance(t.lat, t.lon, st.location[0], st.location[1]);
                                     opacity: t.signalStrength * 0.3,
                                     weight: 1
                                 }).addTo(this.map);
                                 this.targetSignalLines.set(`${id}-${st.name}`, line);
                             }
                         }
                 });
             }
+            // 타겟 툴팁
+            makeTooltipHTML(t) {
                 return `
                     <b>${t.id}</b><br/>
                     Type: ${t.type}<br/>
                     Speed: ${t.speed} kts<br/>
+                    ${
+                        t.type === 'aircraft'
+                        ? `Alt: ${t.altitude} ft<br/>`
+                        : ''
+                    }
                     Sig: ${(t.signalStrength*100).toFixed(0)}%
                 `;
             }
+            // 실시간 Detections 목록 업데이트
             updateDetections() {
+                const detDiv = document.getElementById('detections');
                 let html = '';
                 this.targets.forEach(t => {
+                    html += `<div class="detection">
+                        ${t.type === 'aircraft' ? '✈️' : '🚗'} ${t.id}
+                        ${t.type === 'aircraft' ? `Alt: ${t.altitude}ft ` : ''}
+                        Speed: ${t.speed}kts
+                        Sig: ${(t.signalStrength*100).toFixed(0)}%
+                    </div>`;
                 });
+                detDiv.innerHTML = html;
             }
+            // 수신기 신호강도 바 (랜덤)
             updateSignalStrengths() {
                 sdrStations.forEach(st => {
                     const bar = document.querySelector(`#rx-${st.url.split(':')[0]} .signal-bar`);
                     if (bar) {
+                        const strength = 40 + Math.random()*60;
                         bar.style.width = `${strength}%`;
                     }
                 });
             }
+            // 타겟 제거
+            removeTarget(id) {
+                const t = this.targets.get(id);
+                if (!t) return;
+                this.targets.delete(id);
+                this.addEventLog(`타겟 소멸: ${t.id}`);
+                // 마커 삭제
+                const marker = this.targetMarkers.get(id);
+                if (marker) {
+                    this.map.removeLayer(marker);
+                    this.targetMarkers.delete(id);
+                }
+                // 연결선도 삭제
+                [...this.targetSignalLines.keys()].forEach(k => {
+                    if (k.includes(id)) {
+                        this.map.removeLayer(this.targetSignalLines.get(k));
+                        this.targetSignalLines.delete(k);
+                    }
+                });
+            }
+            // 메인 루프
             startTracking() {
+                // 폭풍: 10초 간격으로 20% 확률 토글
                 setInterval(() => {
                     if (Math.random() < 0.2) {
                         this.toggleStorm();
                     }
                 }, 10000);
+                // 100ms 간격 갱신
                 setInterval(() => {
+                    // 10% 확률로 새 타겟, 최대 20개
+                    if (Math.random() < 0.1 && this.targets.size < 20) {
                         const newT = this.generateTarget();
                         this.targets.set(newT.id, newT);
+                        this.addEventLog(`새 타겟 등장: ${newT.id}`);
                     }
+                    // 10% 확률로 타겟 하나 제거
                     if (Math.random() < 0.1 && this.targets.size > 0) {
+                        const firstID = Array.from(this.targets.keys())[0];
+                        this.removeTarget(firstID);
                     }
                     // 모든 타겟 이동
+                    this.targets.forEach(t => {
                         this.moveTarget(t);
                     });
+                    // 지도 갱신
                     this.updateTargetsOnMap();
+                    // 사이드바 Detections
                     this.updateDetections();
+                    // 수신기 신호강도
                     this.updateSignalStrengths();
                 }, 100);
             }
         }
+        // 페이지 로드 후 레이더 시스템 시작
         window.addEventListener('load', () => {
+            new RadarSystem();
         });
     </script>
 </body>