From 64e1823baa2637b5d654c54aa65bfa85b533fe1c Mon Sep 17 00:00:00 2001
From: Freya_Martines <d1041231078@student.untan.ac.id>
Date: Fri, 12 Jun 2026 17:52:19 +0000
Subject: [PATCH] Upload files to "Tugas4"

---
 Tugas4/index.html | 60 +++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 60 insertions(+)
 create mode 100644 Tugas4/index.html
diff --git a/Tugas4/index.html b/Tugas4/index.html
new file mode 100644
index 0000000..7e73732
--- /dev/null
+++ b/Tugas4/index.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="id">
+<head>
+<meta charset="utf-8">
+<title>Tugas 4 - GeoJSON Kecamatan Pontianak</title>
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"/>
+<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
+<style>
+html, body {height:100%; margin:0; font-family: Arial, Helvetica, sans-serif;}
+#map {height:100%;}
+input, select {width:100%; margin-bottom:5px; padding:4px;}
+button {margin-top:5px; cursor:pointer;}
+.back-link {
+  position: fixed; z-index: 9999; left: 12px; top: 12px;
+  background: white; color: #111827; padding: 9px 12px;
+  border-radius: 10px; text-decoration: none; font-weight: 700;
+  box-shadow: 0 3px 14px rgba(0,0,0,.18); font-size: 13px;
+}
+.legend { background:white; padding:10px; line-height:18px; color:#333; border-radius:5px; box-shadow:0 0 5px rgba(0,0,0,.3); }
+.legend i { width:18px; height:18px; float:left; margin-right:8px; opacity:.8; }
+</style>
+</head>
+<body>
+<a class="back-link" href="../">← Landing Page</a>
+<div id="map"></div>
+<script>
+const map = L.map('map').setView([-0.02, 109.34], 12);
+L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
+fetch('../Admin_Kecamatan.json')
+  .then(res => res.json())
+  .then(data => {
+    const geojsonLayer = L.geoJSON(data, {
+      style: function(feature) {
+        const nama = feature.properties.Ket;
+        let warna = 'gray';
+        if(nama == 'Pontianak Timur') warna = 'pink';
+        else if(nama == 'Pontianak Barat') warna = 'skyblue';
+        else if(nama == 'Pontianak Kota') warna = 'gold';
+        else if(nama == 'Pontianak Selatan') warna = 'violet';
+        else if(nama == 'Pontianak Tenggara') warna = 'sienna';
+        else if(nama == 'Pontianak Utara') warna = 'slategray';
+        return { color:'black', weight:2, fillColor:warna, fillOpacity:0.55 };
+      },
+      onEachFeature: function(feature, layer) {
+        const nama = feature.properties.Ket || 'Tidak ada nama';
+        const populasi = feature.properties.Populasi || 'Tidak ada data';
+        layer.bindPopup(`<b>Kecamatan:</b> ${nama}<br><b>Populasi:</b> ${populasi}`);
+      }
+    }).addTo(map);
+    try { map.fitBounds(geojsonLayer.getBounds()); } catch(e) {}
+  })
+  .catch(err => alert('Gagal memuat Admin_Kecamatan.json. Pastikan file tersebut tetap ada di root repo.'));
+
+const legend = L.control({position:'bottomright'});
+legend.onAdd=function(){ const div=L.DomUtil.create('div','legend'); div.innerHTML='<b>Kecamatan Pontianak</b><br><i style="background:pink"></i> Pontianak Timur<br><i style="background:skyblue"></i> Pontianak Barat<br><i style="background:gold"></i> Pontianak Kota<br><i style="background:violet"></i> Pontianak Selatan<br><i style="background:sienna"></i> Pontianak Tenggara<br><i style="background:slategray"></i> Pontianak Utara'; return div; };
+legend.addTo(map);
+</script>
+</body>
+</html>
