Initial commit

2026-06-10 19:36:52 +07:00
commit 7ad037bf0a
69 changed files with 16579 additions and 0 deletions
@@ -0,0 +1,175 @@
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<base target="_top">
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	
+	<title>Peta Choropleth - Leaflet</title>
+	
+	<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />
+
+    <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%;
+			width: 100%;
+			margin: 0;
+			overflow: hidden;
+		}
+		#map {
+			position: fixed;
+			inset: 0;
+			width: 100vw;
+			height: 100vh;
+		}
+		.info {
+			padding: 6px 8px;
+			font: 14px/16px Arial, Helvetica, sans-serif;
+			background: white;
+			background: rgba(255,255,255,0.8);
+			box-shadow: 0 0 15px rgba(0,0,0,0.2);
+			border-radius: 5px;
+		}
+		.info h4 { margin: 0 0 5px; color: #777; }
+		.legend { text-align: left; 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>
+
+<script type="text/javascript">
+
+	const map = L.map('map').setView([-0.03, 109.33], 12);
+
+	const tiles = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+		maxZoom: 19,
+		attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+	}).addTo(map);
+
+	// control that shows area info on hover
+	const info = L.control();
+
+	info.onAdd = function (map) {
+		this._div = L.DomUtil.create('div', 'info');
+		this.update();
+		return this._div;
+	};
+
+	info.update = function (props) {
+		const contents = props
+			? `<b>${props.Ket}</b><br />${Number(props.Penduduk).toLocaleString('id-ID')} jiwa`
+			: 'Arahkan kursor ke kecamatan';
+		this._div.innerHTML = `<h4>Penduduk per Kecamatan</h4>${contents}`;
+	};
+
+	info.addTo(map);
+
+
+	// get color depending on population (Penduduk) value
+	// Ranges:
+	// > 140,000
+	// 120,000 - 140,000
+	// 100,000 - 120,000
+	// 60,000 - 100,000
+	// 0 - 60,000
+	function getColor(d) {
+		return d > 140000 ? '#006d2c' :
+			d > 120000 ? '#238b45' :
+			d > 100000 ? '#41ab5d' :
+			d > 60000  ? '#74c476' : '#c7e9c0';
+	}
+
+	function style(feature) {
+		return {
+			weight: 2,
+			opacity: 1,
+			color: 'white',
+			dashArray: '3',
+			fillOpacity: 0.7,
+			fillColor: getColor(Number(feature.properties.Penduduk) || 0)
+		};
+	}
+
+	function highlightFeature(e) {
+		const layer = e.target;
+
+		layer.setStyle({
+			weight: 5,
+			color: '#666',
+			dashArray: '',
+			fillOpacity: 0.7
+		});
+
+		layer.bringToFront();
+
+		info.update(layer.feature.properties);
+	}
+
+	let geojson;
+
+	function resetHighlight(e) {
+		if (!geojson) return;
+		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
+		});
+	}
+
+	fetch('Admin_Kecamatan.json')
+		.then((response) => {
+			if (!response.ok) throw new Error(`Gagal memuat Admin_Kecamatan.json: ${response.status}`);
+			return response.json();
+		})
+		.then((data) => {
+			geojson = L.geoJson(data, {
+				style,
+				onEachFeature
+			}).addTo(map);
+
+			map.fitBounds(geojson.getBounds(), { padding: [10, 10] });
+		})
+		.catch((err) => {
+			console.error(err);
+		});
+
+
+	const legend = L.control({position: 'bottomright'});
+
+	legend.onAdd = function (map) {
+
+		const div = L.DomUtil.create('div', 'info legend');
+		div.innerHTML = [
+			`<h4>Jumlah Penduduk</h4>`,
+			`<i style="background:${getColor(1)}"></i> 0&ndash;60.000`,
+			`<i style="background:${getColor(60001)}"></i> 60.000&ndash;100.000`,
+			`<i style="background:${getColor(100001)}"></i> 100.000&ndash;120.000`,
+			`<i style="background:${getColor(120001)}"></i> 120.000&ndash;140.000`,
+			`<i style="background:${getColor(140001)}"></i> Lebih dari 140.000`
+		].join('<br>');
+		return div;
+	};
+
+	legend.addTo(map);
+
+</script>
+
+
+
+</body>
+</html>