add file

2026-06-10 19:26:40 +07:00
parent 02c8394972
commit 7e2d324c2e
49 changed files with 6334 additions and 0 deletions
@@ -0,0 +1,166 @@
+<!DOCTYPE html>
+<html lang="id">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+
+<title>Peta Choropleth Pontianak</title>
+
+<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;
+}
+#map {
+	width: 100%;
+	height: 100vh;
+}
+.info {
+	padding: 6px 8px;
+	font: 14px Arial;
+	background: rgba(255,255,255,0.9);
+	box-shadow: 0 0 15px rgba(0,0,0,0.2);
+	border-radius: 5px;
+}
+.legend {
+	line-height: 18px;
+	color: #555;
+}
+.legend i {
+	width: 18px;
+	height: 18px;
+	float: left;
+	margin-right: 8px;
+	opacity: 0.7;
+}
+</style>
+</head>
+
+<body>
+
+<div id="map"></div>
+
+<!-- DATA PONTIANAK -->
+<script src="pontianak.js"></script>
+
+<script>
+
+// ================= MAP =================
+const map = L.map('map').setView([-0.0263, 109.3424], 12);
+
+L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+	maxZoom: 19
+}).addTo(map);
+
+// ================= INFO =================
+const info = L.control();
+
+info.onAdd = function () {
+	this._div = L.DomUtil.create('div', 'info');
+	this.update();
+	return this._div;
+};
+
+info.update = function (props) {
+	const isi = props
+		? `<b>${props.name}</b><br>${props.density} jiwa/km²`
+		: 'Arahkan kursor ke wilayah';
+
+	this._div.innerHTML = `<h4>Kepadatan Penduduk Pontianak</h4>${isi}`;
+};
+
+info.addTo(map);
+
+// ================= WARNA =================
+function getColor(d) {
+	return d > 10000 ? '#800026' :
+	       d > 8000  ? '#BD0026' :
+	       d > 6000  ? '#E31A1C' :
+	       d > 4000  ? '#FC4E2A' :
+	       d > 2000  ? '#FD8D3C' :
+	       d > 1000  ? '#FEB24C' :
+	       d > 500   ? '#FED976' :
+	                    '#FFEDA0';
+}
+
+// ================= STYLE =================
+function style(feature) {
+	return {
+		weight: 2,
+		opacity: 1,
+		color: 'white',
+		dashArray: '3',
+		fillOpacity: 0.7,
+		fillColor: getColor(feature.properties.density)
+	};
+}
+
+// ================= INTERAKSI =================
+function highlightFeature(e) {
+	const layer = e.target;
+
+	layer.setStyle({
+		weight: 5,
+		color: '#666',
+		dashArray: '',
+		fillOpacity: 0.7
+	});
+
+	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
+	});
+}
+
+// ================= GEOJSON =================
+const geojson = L.geoJson(pontianakData, {
+	style: style,
+	onEachFeature: onEachFeature
+}).addTo(map);
+
+// ================= LEGEND =================
+const legend = L.control({position: 'bottomright'});
+
+legend.onAdd = function () {
+	const div = L.DomUtil.create('div', 'info legend');
+	const grades = [0, 500, 1000, 2000, 4000, 6000, 8000, 10000];
+
+	let labels = [];
+
+	for (let i = 0; i < grades.length; i++) {
+		let from = grades[i];
+		let to = grades[i + 1];
+
+		labels.push(
+			`<i style="background:${getColor(from + 1)}"></i> ${from}${to ? '–' + to : '+'}`
+		);
+	}
+
+	div.innerHTML = labels.join('<br>');
+	return div;
+};
+
+legend.addTo(map);
+
+</script>
+
+</body>
+</html>