246 lines
5.9 KiB
HTML
246 lines
5.9 KiB
HTML
|
|
<!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>
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet-draw/dist/leaflet.draw.css">
|
|
<script src="https://unpkg.com/leaflet-draw/dist/leaflet.draw.js"></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="control">
|
|
<button onclick="aktifkanMode()">Gambar Tanah</button>
|
|
<button onclick="simpanPolygon()">Simpan Tanah</button>
|
|
<button onclick="resetPolygon()">Reset</button>
|
|
</div>
|
|
|
|
<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: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
|
|
}).addTo(map);
|
|
|
|
let modeGambar = false;
|
|
let titikPolygon = [];
|
|
let polygonSementara = null;
|
|
let titikMarkers = [];
|
|
let layerTanah = L.layerGroup().addTo(map);
|
|
|
|
function aktifkanMode() {
|
|
modeGambar = true;
|
|
}
|
|
|
|
function resetPolygon() {
|
|
titikPolygon = [];
|
|
if (polygonSementara) {
|
|
map.removeLayer(polygonSementara);
|
|
polygonSementara = null;
|
|
}
|
|
|
|
titikMarkers.forEach(m => map.removeLayer(m));
|
|
titikMarkers = [];
|
|
}
|
|
|
|
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);
|
|
|
|
map.on('click', function(e) {
|
|
if (!modeGambar) return;
|
|
|
|
const latlng = e.latlng;
|
|
|
|
titikPolygon.push([latlng.lat, latlng.lng]);
|
|
|
|
const markerTitik = L.circleMarker([latlng.lat, latlng.lng], {
|
|
radius: 5,
|
|
color: 'black',
|
|
fillColor: 'yellow',
|
|
fillOpacity: 1
|
|
}).addTo(map);
|
|
|
|
titikMarkers.push(markerTitik);
|
|
|
|
if (polygonSementara) {
|
|
map.removeLayer(polygonSementara);
|
|
}
|
|
|
|
polygonSementara = L.polygon(titikPolygon, {
|
|
color: 'blue',
|
|
fillOpacity: 0.3
|
|
}).addTo(map);
|
|
});
|
|
|
|
function simpanPolygon() {
|
|
if (titikPolygon.length < 3) {
|
|
alert("Minimal 3 titik!");
|
|
return;
|
|
}
|
|
|
|
const form = `
|
|
<form onsubmit="prosesSimpanPolygon(event)">
|
|
<label>Nama:</label><br>
|
|
<input type="text" id="namaTanah" required><br><br>
|
|
|
|
<label>Status Tanah:</label><br>
|
|
<select id="statusTanah">
|
|
<option value="SHM">Sertifikat Hak Milik (SHM)</option>
|
|
<option value="HGB">Sertifikat Hak Guna Bangunan (HGB)</option>
|
|
<option value="HGU">Sertifikat Hak Guna Usaha (HGU)</option>
|
|
<option value="HP">Sertifikat Hak Pakai (HP)</option>
|
|
</select><br><br>
|
|
|
|
<button type="submit">Simpan</button>
|
|
</form>
|
|
`;
|
|
|
|
L.popup()
|
|
.setLatLng(titikPolygon[titikPolygon.length - 1])
|
|
.setContent(form)
|
|
.openOn(map);
|
|
}
|
|
|
|
function hitungLuas(koordinat) {
|
|
return L.GeometryUtil.geodesicArea(
|
|
koordinat.map(k => L.latLng(k[0], k[1]))
|
|
);
|
|
}
|
|
|
|
function prosesSimpanPolygon(event) {
|
|
event.preventDefault();
|
|
|
|
try {
|
|
let nama = document.getElementById("namaTanah").value;
|
|
let status = document.getElementById("statusTanah").value;
|
|
|
|
let luas = hitungLuas(titikPolygon);
|
|
|
|
const dataBaru = {
|
|
nama: nama,
|
|
koordinat: [...titikPolygon],
|
|
status: status,
|
|
luas: luas
|
|
};
|
|
|
|
let data = JSON.parse(localStorage.getItem("tanah")) || [];
|
|
data.push(dataBaru);
|
|
|
|
localStorage.setItem("tanah", JSON.stringify(data));
|
|
|
|
alert("Tanah berhasil disimpan!");
|
|
|
|
map.closePopup();
|
|
resetPolygon();
|
|
modeGambar = false;
|
|
loadData();
|
|
|
|
} catch (error) {
|
|
console.error(error);
|
|
alert("Terjadi error: " + error.message);
|
|
}
|
|
}
|
|
|
|
function hapusTanah(index) {
|
|
let data = JSON.parse(localStorage.getItem("tanah")) || [];
|
|
|
|
data.splice(index, 1);
|
|
|
|
localStorage.setItem("tanah", JSON.stringify(data));
|
|
|
|
alert("Tanah dihapus!");
|
|
|
|
loadData();
|
|
}
|
|
|
|
function loadData() {
|
|
|
|
layerTanah.clearLayers();
|
|
|
|
let dataJalan = JSON.parse(localStorage.getItem("tanah")) || [];
|
|
|
|
dataJalan.forEach((t, index) => {
|
|
|
|
let warna;
|
|
|
|
if (t.status === "SHM") {
|
|
warna = "red";
|
|
} else if (t.status === "HGB") {
|
|
warna = "blue";
|
|
} else if (t.status === "HGU") {
|
|
warna = "green";
|
|
} else {
|
|
warna = "orange";
|
|
}
|
|
|
|
let luasM = t.luas.toLocaleString('id-ID', {
|
|
maximumFractionDigits: 2
|
|
});
|
|
|
|
let poly = L.polygon(t.koordinat, {
|
|
fillOpacity: 0.4,
|
|
color: warna
|
|
});
|
|
|
|
poly.bindPopup(`
|
|
<b>${t.nama}</b><br>
|
|
<b>Status:</b> ${t.status}<br><br>
|
|
Luas: ${luasM} m²<br><br>
|
|
<button onclick="hapusTanah(${index})">Hapus</button>
|
|
`);
|
|
|
|
layerTanah.addLayer(poly);
|
|
});
|
|
}
|
|
|
|
loadData();
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|