add files

2026-06-10 18:32:52 +07:00
parent 12c04e37eb
commit 3430850d69
45 changed files with 7872 additions and 0 deletions
@@ -0,0 +1,198 @@
+<!DOCTYPE html>
+<html lang="id">
+<head>
+	<base target="_top">
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	
+	<title>Choropleth Kepadatan Penduduk - Kota Pontianak</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: 8px 12px;
+			font: 14px/16px Arial, Helvetica, sans-serif;
+			background: white;
+			background: rgba(255,255,255,0.9);
+			box-shadow: 0 0 15px rgba(0,0,0,0.2);
+			border-radius: 5px;
+		}
+		.info h4 {
+			margin: 0 0 5px;
+			color: #555;
+			font-size: 13px;
+			text-transform: uppercase;
+			letter-spacing: 0.5px;
+		}
+		.info .kecamatan-name {
+			font-weight: bold;
+			font-size: 15px;
+			color: #222;
+		}
+		.info .density-val {
+			color: #666;
+			font-size: 13px;
+			margin-top: 2px;
+		}
+		.legend {
+			text-align: left;
+			line-height: 20px;
+			color: #444;
+			font: 13px Arial, Helvetica, sans-serif;
+		}
+		.legend i {
+			width: 18px;
+			height: 18px;
+			float: left;
+			margin-right: 8px;
+			opacity: 0.8;
+			border-radius: 2px;
+		}
+		.legend .title {
+			font-weight: bold;
+			font-size: 12px;
+			text-transform: uppercase;
+			color: #555;
+			margin-bottom: 6px;
+			display: block;
+		}
+	</style>
+</head>
+<body>
+
+<div id="map"></div>
+
+<script type="text/javascript" src="pontianak.js"></script>
+
+<script type="text/javascript">
+
+	// Inisialisasi peta dengan koordinat pusat Kota Pontianak
+	const map = L.map('map').setView([-0.02655429055939295, 109.34202184397597], 13);
+
+	// Tile layer OpenStreetMap
+	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 info yang muncul saat 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) {
+		if (props) {
+			this._div.innerHTML = `
+				<h4>Kepadatan Penduduk</h4>
+				<div class="kecamatan-name">${props.name}</div>
+				<div class="density-val">${props.density.toLocaleString('id-ID')} jiwa / km²</div>
+			`;
+		} else {
+			this._div.innerHTML = `<h4>Kepadatan Penduduk</h4><span style="color:#999;font-size:13px">Arahkan kursor ke kecamatan</span>`;
+		}
+	};
+
+	info.addTo(map);
+
+	// Warna berdasarkan kepadatan penduduk (jiwa/km²)
+	function getColor(d) {
+		return d > 10000 ? '#800026' :
+		       d > 8000  ? '#BD0026' :
+		       d > 6000  ? '#E31A1C' :
+		       d > 4000  ? '#FC4E2A' :
+		       d > 3000  ? '#FD8D3C' :
+		       d > 2000  ? '#FEB24C' :
+		       d > 1000  ? '#FED976' : '#FFEDA0';
+	}
+
+	function style(feature) {
+		return {
+			weight: 2,
+			opacity: 1,
+			color: 'white',
+			dashArray: '3',
+			fillOpacity: 0.75,
+			fillColor: getColor(feature.properties.density)
+		};
+	}
+
+	function highlightFeature(e) {
+		const layer = e.target;
+		layer.setStyle({
+			weight: 4,
+			color: '#444',
+			dashArray: '',
+			fillOpacity: 0.85
+		});
+		layer.bringToFront();
+		info.update(layer.feature.properties);
+	}
+
+	/* global pontianakData */
+	const geojson = L.geoJson(pontianakData, {
+		style,
+		onEachFeature
+	}).addTo(map);
+
+	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
+		});
+	}
+
+	map.attributionControl.addAttribution('Data Wilayah &copy; BPS Kota Pontianak');
+
+	// Legend
+	const legend = L.control({position: 'bottomright'});
+
+	legend.onAdd = function (map) {
+		const div = L.DomUtil.create('div', 'info legend');
+		const grades = [0, 1000, 2000, 3000, 4000, 6000, 8000, 10000];
+		const labels = ['<span class="title">Jiwa / km²</span>'];
+		let from, to;
+
+		for (let i = 0; i < grades.length; i++) {
+			from = grades[i];
+			to = grades[i + 1];
+			labels.push(
+				`<i style="background:${getColor(from + 1)}"></i> ` +
+				from.toLocaleString('id-ID') +
+				(to ? `&ndash;${to.toLocaleString('id-ID')}` : '+')
+			);
+		}
+
+		div.innerHTML = labels.join('<br>');
+		return div;
+	};
+
+	legend.addTo(map);
+
+</script>
+
+</body>
+</html>