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,193 @@
+
+<!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);
+
+	const tiles = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+		maxZoom: 19,
+		attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+	}).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]
+    });
+
+	const marker = L.marker([-0.059502, 109.34626578]).addTo(map)
+		.bindPopup('<b>Hello world!</b><br />I am a popup.').openPopup();
+
+	const circle = L.circle([-0.059502, 109.346544546], {
+		color: 'red',
+		fillColor: '#f03',
+		fillOpacity: 0.5,
+		radius: 500
+	}).addTo(map).bindPopup('I am a circle.');
+
+	const polygon = L.polygon([
+		[-0.0595334, 109.346224],
+		[-0.0577872, 109.34999],
+		[-0.059872, 109.3476675]
+	]).addTo(map).bindPopup('I am a polygon.');
+
+
+	const popup = L.popup()
+		.setLatLng([-0.059502, 109.3462785])
+		.setContent('I am a standalone popup.')
+		.openOn(map);
+
+	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
+    }).addTo(map);
+
+    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!");
+	}
+
+
+</script>
+
+
+
+</body>
+</html>