91 lines
3.1 KiB
HTML
91 lines
3.1 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="id">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>Leaflet Draw Polygon</title>
|
||
|
||
<!-- Leaflet CSS -->
|
||
<link
|
||
rel="stylesheet"
|
||
href="https://unpkg.com/leaflet/dist/leaflet.css"
|
||
/>
|
||
|
||
<!-- Leaflet Draw CSS -->
|
||
<link
|
||
rel="stylesheet"
|
||
href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css"
|
||
/>
|
||
|
||
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js"></script>
|
||
|
||
<style>
|
||
#map {
|
||
height: 500px;
|
||
} /* Atur tinggi peta */
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div id="map"></div>
|
||
|
||
<script>
|
||
// 1️⃣ Inisialisasi peta
|
||
var map = L.map("map").setView([-6.2, 106.816666], 12); // Jakarta
|
||
|
||
// 2️⃣ Tambahkan tile layer (OpenStreetMap)
|
||
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
|
||
attribution: "© OpenStreetMap contributors",
|
||
}).addTo(map);
|
||
|
||
// 3️⃣ Inisialisasi fitur gambar (Leaflet Draw)
|
||
var drawnItems = new L.FeatureGroup();
|
||
map.addLayer(drawnItems);
|
||
|
||
var drawControl = new L.Control.Draw({
|
||
draw: {
|
||
polygon: true, // Izinkan user menggambar polygon
|
||
polyline: false,
|
||
rectangle: false,
|
||
circle: false,
|
||
marker: false,
|
||
circlemarker: false,
|
||
},
|
||
edit: {
|
||
featureGroup: drawnItems, // Edit hanya objek yang sudah digambar
|
||
remove: true, // Izinkan menghapus objek
|
||
},
|
||
});
|
||
map.addControl(drawControl);
|
||
|
||
// 4️⃣ Event saat user menggambar polygon
|
||
map.on("draw:created", function (event) {
|
||
var layer = event.layer;
|
||
drawnItems.addLayer(layer);
|
||
var coordinates = layer.getLatLngs();
|
||
console.log("Koordinat Polygon:", coordinates);
|
||
alert(
|
||
"Polygon berhasil dibuat! Cek console untuk koordinatnya."
|
||
);
|
||
});
|
||
|
||
// 5️⃣ Event saat user mengedit polygon
|
||
map.on("draw:edited", function (event) {
|
||
var layers = event.layers;
|
||
layers.eachLayer(function (layer) {
|
||
var coordinates = layer.getLatLngs();
|
||
console.log("Koordinat setelah diedit:", coordinates);
|
||
alert(
|
||
"Polygon berhasil diedit! Cek console untuk koordinatnya."
|
||
);
|
||
});
|
||
});
|
||
|
||
// 6️⃣ Event saat user menghapus polygon
|
||
map.on("draw:deleted", function (event) {
|
||
alert("Polygon telah dihapus!");
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|