Project Webgis2 SIG

2026-06-11 10:38:09 +07:00
commit eb4d6b7eb0
22 changed files with 2914 additions and 0 deletions
@@ -0,0 +1,213 @@
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<base target="_top">
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	
+	<title>Quick Start - Leaflet</title>
+	
+	<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />
+
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/>
+    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
+
+	<style>
+		html, body {
+			height: 100%;
+			margin: 0;
+		}
+		.leaflet-container {
+			height: 400px;
+			width: 600px;
+			max-width: 100%;
+			max-height: 100%;
+		}
+	</style>
+
+	
+</head>
+<body>
+
+
+
+<div id="map" style="width: 1000px; height: 600px;"></div>
+<script>
+
+	const map = L.map('map').setView([-0.059502, 109.3462785], 16);
+
+	// Base Maps
+    const osm = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+        maxZoom: 19,
+        attribution: '&copy; OpenStreetMap'
+    });
+
+    const satellite = L.tileLayer(
+        'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
+        {
+            attribution: 'Tiles &copy; Esri'
+        }
+    );
+
+    // Layer default
+    osm.addTo(map);
+
+    const iconDefault = new L.Icon.Default();
+
+    const iconHijau = L.icon({
+	    iconUrl: "https://maps.google.com/mapfiles/ms/icons/green-dot.png",
+	    iconSize: [25, 35],
+	    iconAnchor: [12, 35]
+    });
+
+    const iconMerah = L.icon({
+	    iconUrl: "https://maps.google.com/mapfiles/ms/icons/red-dot.png",
+	    iconSize: [25, 35],
+	    iconAnchor: [12, 35]
+    });
+
+    // Layer Group SPBU
+    const spbu24Jam = L.layerGroup();
+    const spbuTidak24Jam = L.layerGroup();
+
+    const popup = L.popup();
+
+	function onMapClick(e) {
+		const lat = e.latlng.lat;
+		const lng = e.latlng.lng;
+
+		const form = `
+		<form onsubmit="simpanData(event, ${lat}, ${lng})">
+			<label>Nama:</label><br>
+			<input type="text" id="nama" required><br><br>
+
+			<label>Nomor:</label><br>
+			<input type="text" id="no"><br><br>
+
+			<label>Buka 24 Jam:</label><br>
+			<select id="24jam">
+				<option value="Ya">Ya</option>
+				<option value="Tidak">Tidak</option>
+			</select><br><br>
+
+			<button type="submit">Save</button>
+		</form>
+		`;
+
+		popup
+			.setLatLng(e.latlng)
+			.setContent(form)
+			.openOn(map);
+	}
+
+	map.on('click', onMapClick);
+
+	function simpanData(event, lat, lng) {
+	    event.preventDefault();
+
+	    const nama = document.getElementById("nama").value;
+	    const nomor = document.getElementById("no").value;
+	    const status = document.getElementById("24jam").value;
+
+	    const dataBaru = { nama, nomor, status, lat, lng };
+
+	    let data = JSON.parse(localStorage.getItem("titik")) || [];
+
+	    data.push(dataBaru);
+
+	    localStorage.setItem("titik", JSON.stringify(data));
+
+	    alert("Data berhasil disimpan!");
+
+	    map.closePopup();
+    }
+
+    let data = JSON.parse(localStorage.getItem("titik")) || [];
+
+    data.forEach((d, index) => {
+	let iconDipakai;
+
+    if (d.status === "Ya") {
+	    iconDipakai = iconHijau;
+    } else {
+	    iconDipakai = iconMerah;
+    } 
+
+    const marker = L.marker([d.lat, d.lng], {
+        icon: iconDipakai,
+        draggable: true
+    });
+
+    if (d.status === "Ya") {
+        spbu24Jam.addLayer(marker);
+    } else {
+        spbuTidak24Jam.addLayer(marker);
+    }
+
+    marker.on('dragend', function (e) {
+	    const posisiBaru = marker.getLatLng();
+	    updateKoordinat(index, posisiBaru.lat, posisiBaru.lng);
+    });
+
+	marker.bindPopup(`
+		<b>${d.nama}</b><br>
+		${d.nomor}<br>
+		Buka 24 jam?: 
+			<span style="color:${d.status === 'Ya' ? 'green' : 'red'}">
+				${d.status}
+			</span><br>
+
+		<button onclick="hapusData(${index})">Hapus</button>
+	    `);
+	});
+
+    function hapusData(index) {
+	    let data = JSON.parse(localStorage.getItem("titik")) || [];
+
+	    data.splice(index, 1);
+
+	    localStorage.setItem("titik", JSON.stringify(data));
+
+	    alert("Data berhasil dihapus!");
+
+	    location.reload();
+	}	
+
+	function updateKoordinat(index, latBaru, lngBaru) {
+	    let data = JSON.parse(localStorage.getItem("titik")) || [];
+
+	    data[index].lat = latBaru;
+	    data[index].lng = lngBaru;
+
+	    localStorage.setItem("titik", JSON.stringify(data));
+
+	    alert("Koordinat berhasil diupdate!");
+	}
+
+    // Base Maps
+    const baseMaps = {
+        "OpenStreetMap": osm,
+        "Satellite": satellite
+    };
+
+    // Overlay Maps
+    const overlayMaps = {
+        "SPBU 24 Jam": spbu24Jam,
+        "SPBU Tidak 24 Jam": spbuTidak24Jam
+    };
+
+    // Tampilkan default
+    spbu24Jam.addTo(map);
+    spbuTidak24Jam.addTo(map);
+
+    // Layer Control
+    L.control.layers(baseMaps, overlayMaps, {
+        collapsed: false
+    }).addTo(map);
+</script>
+
+
+
+</body>
+</html>