dena27
169 lines
5.4 KiB
HTML
169 lines
5.4 KiB
HTML
<!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: '© <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 © <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 ? ' – ' + fmt(to) : '+')
|
||
);
|
||
}
|
||
|
||
div.innerHTML = labels.join('<br>');
|
||
return div;
|
||
};
|
||
|
||
legend.addTo(map);
|
||
</script>
|
||
|
||
</body>
|
||
</html> |