Spaces:

tuhbooh
/

HuggingMaps

Running

App Files Files Community

tuhbooh commited on Jan 29

Commit

735aaeb

verified ·

1 Parent(s): d4b1b68

Update index.html

Browse files

Files changed (1) hide show

index.html +121 -121

index.html CHANGED Viewed

@@ -3,137 +3,137 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Leaflet Mega GUI - Minh Đức</title>
-    <!-- Core Leaflet CSS -->
     <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
-    <!-- Plugin CSS Libraries -->
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet.fullscreen@2.4.0/Control.FullScreen.css" />
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet.locatecontrol@0.79.0/dist/L.Control.Locate.min.css" />
-    <link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css" />
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css" />
-    <link rel="stylesheet" href="https://unpkg.com/leaflet-minimap@3.6.1/dist/Control.MiniMap.min.css" />
-    <link rel="stylesheet" href="https://ppete2.github.io/Leaflet.PolylineMeasure/Leaflet.PolylineMeasure.css" />
     <style>
-        body, html { margin: 0; padding: 0; height: 100%; width: 100%; overflow: hidden; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
         #map { height: 100%; width: 100%; }
-        /* Làm đẹp các thanh điều khiển */
-        .leaflet-control { border: none !important; box-shadow: 0 2px 6px rgba(0,0,0,0.3) !important; }
         .map-title {
-            position: absolute;
-            top: 10px;
-            left: 50%;
-            transform: translateX(-50%);
-            z-index: 1000;
-            background: rgba(255, 255, 255, 0.9);
-            padding: 5px 20px;
-            border-radius: 20px;
-            font-weight: bold;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            pointer-events: none;
         }
     </style>
 </head>
 <body>
-    <div class="map-title">Leaflet Ultimate GUI</div>
-    <div id="map"></div>
-    <!-- Core Leaflet JS -->
-    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
-    <!-- Plugin JS Libraries -->
-    <script src="https://cdn.jsdelivr.net/npm/leaflet.fullscreen@2.4.0/Control.FullScreen.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/leaflet.locatecontrol@0.79.0/dist/L.Control.Locate.min.js"></script>
-    <script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js"></script>
-    <script src="https://unpkg.com/leaflet-minimap@3.6.1/dist/Control.MiniMap.min.js"></script>
-    <script src="https://ppete2.github.io/Leaflet.PolylineMeasure/Leaflet.PolylineMeasure.js"></script>
-    <script>
-        window.onload = function() {
-            // 1. Cấu hình các lớp nền (Base Layers)
-            const osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-                attribution: '© OpenStreetMap'
-            });
-            const satellite = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
-                attribution: '© Esri'
-            });
-            const terrain = L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', {
-                attribution: '© OpenTopoMap'
-            });
-            // 2. Khởi tạo bản đồ
-            const map = L.map('map', {
-                center: [10.7626, 106.6602],
-                zoom: 13,
-                layers: [osm],
-                fullscreenControl: true
-            });
-            // 3. GUI: Lớp điều khiển bản đồ (Layer Control)
-            const baseMaps = {
-                "Bản đồ đường đi": osm,
-                "Vệ tinh": satellite,
-                "Địa hình": terrain
-            };
-            L.control.layers(baseMaps).addTo(map);
-            // 4. GUI: Định vị (Locate)
-            L.control.locate({
-                strings: { title: "Vị trí của tôi" },
-                locateOptions: { maxZoom: 16 }
-            }).addTo(map);
-            // 5. GUI: Tìm kiếm (Search/Geocoder)
-            L.Control.geocoder({
-                defaultMarkGeocode: true,
-                placeholder: "Tìm địa chỉ..."
-            }).addTo(map);
-            // 6. GUI: Thước đo (Polyline Measure) - Nút hình cây thước
-            L.control.polylineMeasure({
-                position: 'topleft',
-                unit: 'metres',
-                showBearings: true,
-                clearMeasurementsOnStop: false,
-                showUnitControl: true
-            }).addTo(map);
-            // 7. GUI: Công cụ vẽ (Drawing Tools) - Hình vuông, tròn, đa giác
-            const drawnItems = new L.FeatureGroup();
-            map.addLayer(drawnItems);
-            const drawControl = new L.Control.Draw({
-                edit: { featureGroup: drawnItems },
-                draw: { polygon: true, polyline: true, rectangle: true, circle: true, marker: true }
-            });
-            map.addControl(drawControl);
-            map.on(L.Draw.Event.CREATED, function (event) {
-                drawnItems.addLayer(event.layer);
             });
-            // 8. GUI: Bản đồ thu nhỏ (MiniMap) - Góc dưới bên phải
-            const osm2 = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
-            new L.Control.MiniMap(osm2, { toggleDisplay: true, minimized: false }).addTo(map);
-            // 9. GUI: Thước tỉ lệ (Scale)
-            L.control.scale({ imperial: false }).addTo(map);
-            // Hiện tọa độ khi click
-            map.on('click', function(e) {
-                L.popup()
-                    .setLatLng(e.latlng)
-                    .setContent("Tọa độ: " + e.latlng.lat.toFixed(6) + ", " + e.latlng.lng.toFixed(6))
-                    .openOn(map);
-            });
-        };
-    </script>
 </body>
 </html>

 <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);
+        handleData(conn);
+    }
+    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>