WD - Dev
100 lines
3.2 KiB
JavaScript
100 lines
3.2 KiB
JavaScript
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
|
|
});
|
|
};
|