Update Banyak

2025-09-21 21:40:17 +07:00
parent c6bee729c5
commit efca8f5f80
145 changed files with 195185 additions and 1378 deletions
@@ -0,0 +1,99 @@
+let map;
+const markers = [];
+let streetLayer, satelliteLayer, labelsLayer, hybridLayer;
+
+function initMap(center) {
+    // Base layers
+    streetLayer = L.tileLayer(
+        'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+        { attribution: '© OpenStreetMap contributors' }
+    );
+
+    satelliteLayer = L.tileLayer(
+        'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
+        { attribution: 'Tiles © Esri' }
+    );
+
+    labelsLayer = L.tileLayer(
+        'https://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Transportation/MapServer/tile/{z}/{y}/{x}',
+        { attribution: 'Labels © Esri' }
+    );
+
+    hybridLayer = L.layerGroup([satelliteLayer, labelsLayer]);
+
+    // Init map dengan posisi dari API
+    map = L.map('map', {
+        center: [center.lat, center.lng],
+        zoom: 12,
+        layers: [hybridLayer],
+        fullscreenControl: true,
+        fullscreenControlOptions: { position: 'topleft' }
+    });
+
+    // Control layer
+    L.control.layers({
+        "Jalan (OSM)": streetLayer,
+        "Hybrid (Satelit + Jalan)": hybridLayer
+    }).addTo(map);
+
+    // Ambil marker pertama kali
+    fetchMarkers();
+    // Refresh marker tiap 30 detik
+    setInterval(fetchMarkers, 30000);
+}
+
+function fetchMarkers() {
+    fetch(`load/maps_marker.php?i=${topologiId}`)
+        .then(response => {
+            if (!response.ok) throw new Error('Network response was not ok ' + response.statusText);
+            return response.json();
+        })
+        .then(res => {
+            if (!res.status) {
+                console.warn("⚠️ Tidak ada data marker");
+                return;
+            }
+
+            // Hapus marker lama
+            markers.forEach(marker => map.removeLayer(marker));
+            markers.length = 0;
+
+            // Tambahkan marker baru
+            res.data.forEach(markerData => {
+                const iconCustom = L.icon({
+                    iconUrl: markerData.icon,
+                    iconSize: [30, 30]
+                });
+
+                const markerInstance = L.marker(
+                    [markerData.lat, markerData.lng],
+                    { icon: iconCustom, title: markerData.title }
+                ).addTo(map);
+
+                markerInstance.bindPopup(markerData.content);
+                markers.push(markerInstance);
+            });
+
+            console.log(`✅ Marker berhasil ditampilkan: ${markers.length}`);
+        })
+        .catch(error => console.error('❌ Error fetching markers:', error));
+}
+
+// Ambil dulu center dari API sebelum init map
+window.onload = function() {
+    fetch(`load/maps_marker.php?i=${topologiId}`)
+        .then(res => res.json())
+        .then(res => {
+            if (res.status && res.centerlonglat) {
+                console.log("📍 Init map pakai centerlonglat:", res.centerlonglat);
+                initMap(res.centerlonglat);
+            } else {
+                console.warn("⚠️ Centerlonglat tidak ada, pakai fallback Jakarta");
+                initMap({ lat: -6.2, lng: 106.816666 });
+            }
+        })
+        .catch(err => {
+            console.error("❌ Gagal ambil data awal:", err);
+            initMap({ lat: -6.2, lng: 106.816666 }); // fallback
+        });
+};