Initial commit

2026-06-10 18:48:37 +07:00
commit 084b171dbd
44 changed files with 35487 additions and 0 deletions
@@ -0,0 +1,169 @@
+<!DOCTYPE html>
+<html lang="id">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Kepadatan Penduduk Kota Pontianak 2025</title>
+
+  <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; }
+    #map { width: 100%; height: 100vh; }
+
+    .info {
+      padding: 6px 10px;
+      font: 14px/16px Arial, Helvetica, sans-serif;
+      background: rgba(255,255,255,0.9);
+      box-shadow: 0 0 15px rgba(0,0,0,0.2);
+      border-radius: 5px;
+      min-width: 180px;
+    }
+    .info h4 { margin: 0 0 6px; color: #555; font-size: 13px; }
+    .info .kec-name { font-weight: bold; font-size: 15px; }
+    .info .kec-density { color: #333; margin-top: 2px; }
+
+    .legend { line-height: 20px; color: #444; }
+    .legend i {
+      width: 18px; height: 18px;
+      float: left; margin-right: 8px;
+      opacity: 0.75; border-radius: 2px;
+    }
+  </style>
+</head>
+<body>
+
+<div id="map"></div>
+<script src="kec-ptk.js"></script>
+
+<script>
+  // ── Peta: center Pontianak, zoom 12 ──────────────────────────────────────
+  const map = L.map('map').setView([-0.027, 109.335], 12);
+
+  L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+    maxZoom: 19,
+    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+  }).addTo(map);
+
+  // ── Kontrol info hover ───────────────────────────────────────────────────
+  const info = L.control({ position: 'topright' });
+
+  info.onAdd = function () {
+    this._div = L.DomUtil.create('div', 'info');
+    this.update();
+    return this._div;
+  };
+
+  info.update = function (props) {
+    if (props) {
+      const penduduk = props.Penduduk.toLocaleString('id-ID');
+      this._div.innerHTML =
+        '<h4>Kota Pontianak</h4>' +
+        '<div class="kec-name">' + props.Ket + '</div>' +
+        '<div class="kec-density">' + penduduk + ' jiwa</div>';
+    } else {
+      this._div.innerHTML =
+        '<h4>Kota Pontianak</h4>Arahkan kursor ke kecamatan';
+    }
+  };
+
+  info.addTo(map);
+
+  // ── Warna berdasarkan jumlah penduduk ────────────────────────────────────
+  // Rentang: 50.589 (Tenggara) – 153.809 (Barat)
+  function getColor(penduduk) {
+    return penduduk > 150000 ? '#800026' :
+           penduduk > 130000 ? '#BD0026' :
+           penduduk > 110000 ? '#E31A1C' :
+           penduduk > 90000  ? '#FC4E2A' :
+           penduduk > 70000  ? '#FD8D3C' :
+           penduduk > 50000  ? '#FEB24C' :
+                              '#FFEDA0';
+  }
+
+  // Menambahkan properti 'Penduduk' ke setiap feature (sudah ada) dan style
+  function style(feature) {
+    const penduduk = feature.properties.Penduduk;
+    return {
+      weight: 2,
+      opacity: 1,
+      color: 'white',
+      dashArray: '3',
+      fillOpacity: 0.75,
+      fillColor: getColor(penduduk)
+    };
+  }
+
+  function highlightFeature(e) {
+    const layer = e.target;
+    layer.setStyle({
+      weight: 4,
+      color: '#333',
+      dashArray: '',
+      fillOpacity: 0.85
+    });
+    layer.bringToFront();
+    info.update(layer.feature.properties);
+  }
+
+  function resetHighlight(e) {
+    geojson.resetStyle(e.target);
+    info.update();
+  }
+
+  function zoomToFeature(e) {
+    map.fitBounds(e.target.getBounds());
+  }
+
+  function onEachFeature(feature, layer) {
+    layer.on({
+      mouseover: highlightFeature,
+      mouseout:  resetHighlight,
+      click:     zoomToFeature
+    });
+  }
+
+  /* global statesData */
+  const geojson = L.geoJson(statesData, {
+    style: style,
+    onEachFeature: onEachFeature
+  }).addTo(map);
+
+  // Zoom agar semua kecamatan langsung kelihatan
+  map.fitBounds(geojson.getBounds());
+
+  // ── Atribusi data ─────────────────────────────────────────────────────────
+  map.attributionControl.addAttribution(
+    'Data penduduk &copy; <a href="https://disdukcapil.pontianak.go.id/posts/penduduk-kota-pontianak-semester-ii-tahun-2025-berjumlah-693685-jiwa" target="_blank">Disdukcapil Kota Pontianak 2025</a>'
+  );
+
+  // ── Legenda ───────────────────────────────────────────────────────────────
+  const legend = L.control({ position: 'bottomright' });
+
+  legend.onAdd = function () {
+    const div    = L.DomUtil.create('div', 'info legend');
+    const grades = [50000, 70000, 90000, 110000, 130000, 150000];
+    const labels = ['<strong>Jumlah Penduduk</strong>'];
+
+    for (let i = 0; i < grades.length; i++) {
+      const from = grades[i];
+      const to   = grades[i + 1];
+      const fmt  = n => n.toLocaleString('id-ID');
+      labels.push(
+        '<i style="background:' + getColor(from + 1) + '"></i> ' +
+        fmt(from) + (to ? ' &ndash; ' + fmt(to) : '+')
+      );
+    }
+
+    div.innerHTML = labels.join('<br>');
+    return div;
+  };
+
+  legend.addTo(map);
+</script>
+
+</body>
+</html>