Spaces:

tuhbooh
/

HuggingMaps

Running

App Files Files Community

tuhbooh commited on Jan 29

Commit

2dab26e

verified ·

1 Parent(s): 735aaeb

Update index.html

Browse files

Files changed (1) hide show

index.html +105 -85

index.html CHANGED Viewed

@@ -3,69 +3,81 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Leaflet Realtime P2P - Minh Đức</title>
     <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
     <style>
-        body, html { margin: 0; padding: 0; height: 100%; overflow: hidden; font-family: sans-serif; }
-        #map { height: 100%; width: 100%; }
         .map-title {
             position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
-            z-index: 1000; background: white; padding: 8px 15px;
-            border-radius: 20px; font-weight: bold; box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-        }
-        .status-bar {
-            position: absolute; bottom: 20px; left: 10px; z-index: 1000;
-            background: rgba(0,0,0,0.7); color: white; padding: 5px 10px;
-            font-size: 12px; border-radius: 5px;
         }
     </style>
 </head>
 <body>
-<div class="map-title">📍 Bản đồ Realtime P2P - Minh Đức</div>
 <div id="map"></div>
-<div class="status-bar" id="status">Đang khởi tạo Peer...</div>
 <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
 <script src="https://unpkg.com/peerjs@1.5.2/dist/peerjs.min.js"></script>
 <script>
-    // --- CẤU HÌNH ---
-    const ROOM_PREFIX = "minh-duc-room-";
-    const MAX_PEERS = 10; // Quét tối đa 10 người để tránh lag
     const remoteMarkers = {};
-    // --- KHỞI TẠO BẢN ĐỒ ---
-    const map = L.map('map').setView([10.7626, 106.6602], 13);
-    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-        attribution: '© OpenStreetMap'
-    }).addTo(map);
-    // Marker riêng cho bạn bè (Màu đỏ)
-    const friendIcon = L.icon({
-        iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-red.png',
-        iconSize: [25, 41], iconAnchor: [12, 41], popupAnchor: [1, -34]
     });
-    // --- LOGIC PEERJS ---
-    const myNumber = Math.floor(Math.random() * MAX_PEERS);
-    const myId = ROOM_PREFIX + myNumber;
     const peer = new Peer(myId);
-    document.getElementById('status').innerText = "ID của bạn: " + myId + " (Đang quét bạn bè...)";
     peer.on('open', (id) => {
-        // Tự động tìm kết nối với các ID khác trong dải từ 0 - MAX_PEERS
         for (let i = 0; i < MAX_PEERS; i++) {
-            if (i !== myNumber) {
-                connectToPeer(ROOM_PREFIX + i);
-            }
         }
     });
-    peer.on('connection', (conn) => {
-        handleData(conn);
-    });
     function connectToPeer(targetId) {
         const conn = peer.connect(targetId);
@@ -73,67 +85,75 @@
     }
     function handleData(conn) {
-        conn.on('data', async (data) => {
-            if (data.lat && data.lng) {
-                // Nếu chưa có marker hoặc người dùng di chuyển xa, cập nhật địa chỉ
-                updateUserOnMap(conn.peer, data);
             }
         });
     }
-    // --- HÀM LẤY ĐỊA CHỈ TỪ TỌA ĐỘ (Reverse Geocoding) ---
-    // Sử dụng Nominatim miễn phí, không cần API Key
-    async function getAddress(lat, lng) {
-        try {
-            const response = await fetch(`https://nominatim.openstreetmap.org/reverse?format=json&lat=${lat}&lon=${lng}&zoom=18&addressdetails=1`);
-            const data = await response.json();
-            return data.display_name || "Không xác định được địa chỉ";
-        } catch (error) {
-            return "Lỗi lấy địa chỉ";
-        }
-    }
-    async function updateUserOnMap(peerId, coords) {
         if (remoteMarkers[peerId]) {
-            // Cập nhật vị trí marker
-            remoteMarkers[peerId].marker.setLatLng([coords.lat, coords.lng]);
-            // Cứ sau mỗi 10 giây hoặc khi click mới cập nhật lại địa chỉ để tránh spam server Nominatim
-            if (Date.now() - remoteMarkers[peerId].lastUpdate > 10000) {
-                const addr = await getAddress(coords.lat, coords.lng);
-                remoteMarkers[peerId].marker.getPopup().setContent(`<b>User: ${peerId}</b><br>${addr}`);
-                remoteMarkers[peerId].lastUpdate = Date.now();
-            }
         } else {
-            // Tạo mới marker
-            const addr = await getAddress(coords.lat, coords.lng);
-            const marker = L.marker([coords.lat, coords.lng], {icon: friendIcon})
-                .addTo(map)
-                .bindPopup(`<b>User: ${peerId}</b><br>${addr}`);
-            remoteMarkers[peerId] = { marker, lastUpdate: Date.now() };
         }
     }
-    // --- GỬI VỊ TRÍ MỖI 1 GIÂY ---
-    setInterval(() => {
-        if (navigator.geolocation) {
-            navigator.geolocation.getCurrentPosition((position) => {
-                const myData = {
-                    lat: position.coords.latitude,
-                    lng: position.coords.longitude
-                };
-                // Gửi dữ liệu cho tất cả các kết nối đang mở
-                Object.values(peer.connections).forEach(conns => {
-                    conns.forEach(c => {
-                        if (c.open) c.send(myData);
-                    });
-                });
             });
-        }
-    }, 1000);
 </script>
 </body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>P2P Locator - Minh Đức Edition</title>
     <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
     <style>
+        body, html { margin: 0; padding: 0; height: 100%; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
+        #map { height: 100vh; width: 100%; }
+        /* Hiệu ứng nhấp nháy cho dấu chấm */
+        .pulse {
+            width: 15px; height: 15px; background: #ff4444;
+            border-radius: 50%; box-shadow: 0 0 0 rgba(255, 68, 68, 0.4);
+            animation: pulse 2s infinite;
+        }
+        @keyframes pulse {
+            0% { box-shadow: 0 0 0 0 rgba(255, 68, 68, 0.7); }
+            70% { box-shadow: 0 0 0 15px rgba(255, 68, 68, 0); }
+            100% { box-shadow: 0 0 0 0 rgba(255, 68, 68, 0); }
+        }
+        /* Danh sách người dùng */
+        #user-list {
+            position: absolute; top: 70px; right: 10px; z-index: 1000;
+            background: white; padding: 10px; border-radius: 8px;
+            max-height: 200px; overflow-y: auto; box-shadow: 0 2px 10px rgba(0,0,0,0.2);
+            width: 180px;
+        }
+        .user-item {
+            padding: 5px; cursor: pointer; border-bottom: 1px solid #eee; font-size: 13px;
+        }
+        .user-item:hover { background: #f0f0f0; }
         .map-title {
             position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
+            z-index: 1000; background: #333; color: white; padding: 8px 20px;
+            border-radius: 30px; font-size: 14px;
         }
     </style>
 </head>
 <body>
+<div class="map-title">📍 Hệ thống định vị P2P - Minh Đức</div>
+<div id="user-list"><b>Đang online:</b><div id="list-content"></div></div>
 <div id="map"></div>
 <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
 <script src="https://unpkg.com/peerjs@1.5.2/dist/peerjs.min.js"></script>
 <script>
+    const ROOM_PREFIX = "m-duc-group-";
+    const MAX_PEERS = 10;
     const remoteMarkers = {};
+    let myMarker;
+    // 1. Khởi tạo Map
+    const map = L.map('map').setView([10.7626, 106.6602], 15);
+    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
+    // Icon chấm tròn nhấp nháy
+    const pulseIcon = L.divIcon({
+        className: 'pulse-container',
+        html: '<div class="pulse"></div>',
+        iconSize: [20, 20]
     });
+    // 2. PeerJS
+    const myNum = Math.floor(Math.random() * MAX_PEERS);
+    const myId = ROOM_PREFIX + myNum;
     const peer = new Peer(myId);
     peer.on('open', (id) => {
         for (let i = 0; i < MAX_PEERS; i++) {
+            if (i !== myNum) connectToPeer(ROOM_PREFIX + i);
         }
     });
+    peer.on('connection', (conn) => { handleData(conn); });
     function connectToPeer(targetId) {
         const conn = peer.connect(targetId);
     }
     function handleData(conn) {
+        conn.on('data', (data) => {
+            updateRemoteUser(conn.peer, data);
+        });
+        // Khi bạn bè offline
+        conn.on('close', () => {
+            if(remoteMarkers[conn.peer]) {
+                map.removeLayer(remoteMarkers[conn.peer].marker);
+                delete remoteMarkers[conn.peer];
+                renderUserList();
             }
         });
     }
+    // 3. Cập nhật vị trí bạn bè
+    async function updateRemoteUser(peerId, data) {
         if (remoteMarkers[peerId]) {
+            remoteMarkers[peerId].marker.setLatLng([data.lat, data.lng]);
         } else {
+            const marker = L.marker([data.lat, data.lng], {icon: pulseIcon}).addTo(map);
+            marker.bindPopup(`<b>${peerId}</b><br>Đang lấy địa chỉ...`);
+            remoteMarkers[peerId] = { marker, lat: data.lat, lng: data.lng };
+            renderUserList();
+            // Lấy địa chỉ (Reverse Geocoding)
+            fetch(`https://nominatim.openstreetmap.org/reverse?format=json&lat=${data.lat}&lon=${data.lng}`)
+                .then(res => res.json())
+                .then(d => marker.getPopup().setContent(`<b>${peerId}</b><br>${d.display_name}`));
         }
     }
+    // 4. Cập nhật vị trí chính mình (Chức năng cũ)
+    function updateMyLocation() {
+        navigator.geolocation.watchPosition((pos) => {
+            const { latitude: lat, longitude: lng } = pos.coords;
+            const myCoords = { lat, lng };
+            if (!myMarker) {
+                myMarker = L.marker([lat, lng]).addTo(map).bindPopup("Bạn đang ở đây").openPopup();
+                map.setView([lat, lng]); // Tự động zoom vào mình lúc đầu
+            } else {
+                myMarker.setLatLng([lat, lng]);
+            }
+            // Gửi cho bạn bè
+            Object.values(peer.connections).forEach(conns => {
+                conns.forEach(c => { if (c.open) c.send(myCoords); });
             });
+        }, null, { enableHighAccuracy: true });
+    }
+    // 5. Danh sách người dùng để Click-to-View
+    function renderUserList() {
+        const container = document.getElementById('list-content');
+        container.innerHTML = "";
+        Object.keys(remoteMarkers).forEach(id => {
+            const div = document.createElement('div');
+            div.className = "user-item";
+            div.innerText = "👤 " + id;
+            div.onclick = () => {
+                const m = remoteMarkers[id];
+                map.flyTo([m.marker.getLatLng().lat, m.marker.getLatLng().lng], 17);
+                m.marker.openPopup();
+            };
+            container.appendChild(div);
+        });
+    }
+    updateMyLocation();
 </script>
 </body>
 </html>