Upload files to "tugas04"

2026-06-09 12:51:01 +00:00
parent d292e5f49b
commit 0e8afc93bb
2 changed files with 152 additions and 0 deletions
@@ -0,0 +1,21 @@
+# Project 4 - GeoJSON Kecamatan Pontianak
+
+Project ini khusus untuk menampilkan data kecamatan Pontianak dari file `Kecamatan.json`.
+
+## Database
+
+Project ini tidak membutuhkan database karena data sudah tersedia dalam file GeoJSON.
+
+Properti yang digunakan dari `Kecamatan.json`:
+
+- `Ket` untuk nama kecamatan.
+- `Populasi` untuk jumlah populasi.
+- `Plan_Area` untuk luas area.
+
+## Cara Menjalankan
+
+1. Letakkan folder ini di `htdocs`.
+2. Jalankan Apache di XAMPP.
+3. Buka `http://localhost/webgis_pisah/project_04_geojson_kecamatan_pontianak/`.
+
+Jangan membuka `index.html` langsung dari file explorer karena `fetch('Kecamatan.json')` biasanya diblokir browser jika tidak dijalankan melalui server lokal.
@@ -0,0 +1,131 @@
+<!DOCTYPE html>
+<html lang="id">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Project 4 - GeoJSON Kecamatan Pontianak</title>
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
+    <style>
+        body { margin: 0; font-family: Arial, sans-serif; }
+        #map { height: 100vh; width: 100%; }
+        .title-box {
+            position: absolute; top: 10px; left: 55px; z-index: 999;
+            background: white; padding: 10px 14px; border-radius: 6px;
+            box-shadow: 0 2px 10px rgba(0,0,0,.2);
+        }
+        .title-box h3 { margin: 0 0 4px; }
+        .title-box p { margin: 0; font-size: 13px; color: #555; }
+        .legend {
+            background: rgba(255,255,255,.95); padding: 10px 14px;
+            border-radius: 6px; box-shadow: 0 2px 10px rgba(0,0,0,.2);
+            line-height: 1.5;
+            max-height: 260px;
+            overflow-y: auto;
+        }
+    </style>
+</head>
+<body>
+<div class="title-box">
+    <h3>Project 4 - GeoJSON Kecamatan Pontianak</h3>
+    <p>Menampilkan nama kecamatan dan jumlah populasi dari Kecamatan.json.</p>
+</div>
+<div id="map"></div>
+
+<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
+<script>
+    const map = L.map('map').setView([-0.0227, 109.3425], 12);
+
+    const osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+        attribution: '&copy; OpenStreetMap contributors'
+    }).addTo(map);
+
+    const satellite = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
+        attribution: 'Tiles &copy; Esri'
+    });
+
+    const kecamatanLayer = L.layerGroup().addTo(map);
+
+    L.control.layers(
+        { 'OpenStreetMap': osm, 'Satellite': satellite },
+        { 'Batas Kecamatan Pontianak': kecamatanLayer },
+        { collapsed: false }
+    ).addTo(map);
+
+    const warnaKecamatan = {
+        'Pontianak Timur': '#e74c3c',
+        'Pontianak Selatan': '#3498db',
+        'Pontianak Barat': '#2ecc71',
+        'Pontianak Utara': '#f39c12',
+        'Pontianak Kota': '#9b59b6',
+        'Pontianak Tenggara': '#16a085'
+    };
+
+    function getWarna(nama) {
+        return warnaKecamatan[nama] || '#7f8c8d';
+    }
+
+    function formatAngka(nilai) {
+        return Number(nilai || 0).toLocaleString('id-ID');
+    }
+
+    fetch('Kecamatan.json')
+        .then(res => res.json())
+        .then(data => {
+            const geojson = L.geoJSON(data, {
+                style: function(feature) {
+                    const nama = feature.properties.Ket || feature.properties.Nama || feature.properties.name || 'Kecamatan';
+                    const warna = getWarna(nama);
+                    return {
+                        color: warna,
+                        weight: 2,
+                        fillColor: warna,
+                        fillOpacity: 0.4
+                    };
+                },
+                onEachFeature: function(feature, layer) {
+                    const prop = feature.properties || {};
+                    const nama = prop.Ket || prop.Nama || prop.name || 'Kecamatan';
+                    const populasi = prop.Populasi || prop.populasi || 0;
+                    const area = prop.Plan_Area || 0;
+
+                    layer.bindPopup(`
+                        <b>${nama}</b><br>
+                        <b>Populasi:</b> ${formatAngka(populasi)} jiwa<br>
+                        <b>Luas Area:</b> ${formatAngka(area)} m²
+                    `);
+
+                    layer.bindTooltip(`${nama}<br>${formatAngka(populasi)} jiwa`, {
+                        sticky: true,
+                        direction: 'center'
+                    });
+                }
+            });
+
+            geojson.addTo(kecamatanLayer);
+            map.fitBounds(geojson.getBounds());
+            buatLegenda(data.features || []);
+        })
+        .catch(() => alert('Gagal memuat file Kecamatan.json. Jalankan melalui localhost, bukan langsung dibuka dari file explorer.'));
+
+    function buatLegenda(features) {
+        const legend = L.control({ position: 'bottomright' });
+        legend.onAdd = function () {
+            const div = L.DomUtil.create('div', 'legend');
+            let html = '<b>Populasi Kecamatan</b><br>';
+
+            features.forEach(feature => {
+                const prop = feature.properties || {};
+                const nama = prop.Ket || prop.Nama || prop.name || 'Kecamatan';
+                const populasi = prop.Populasi || prop.populasi || 0;
+                const warna = getWarna(nama);
+                html += `<span style="display:inline-block;width:12px;height:12px;background:${warna};margin-right:6px"></span>${nama}: ${formatAngka(populasi)}<br>`;
+            });
+
+            div.innerHTML = html;
+            return div;
+        };
+        legend.addTo(map);
+    }
+</script>
+</body>
+</html>