muthiaastarii/UAS_WebGIS_MuthiaNurainiAstari_D1041231019
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

keterangan commit

Browse Source
This commit is contained in:
muthianura
2026-06-13 14:23:23 +07:00
parent 9a49719508
commit 62a5a26fe0
2 changed files with 250 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Choropleth/ptk.html
+182 -49
View File
@@ -1,51 +1,187 @@
<!DOCTYPE html>
<html lang="en">
<html lang="id">
<head>
<base target="_top">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Kepadatan Penduduk Pontianak - Choropleth Map</title>
<title>Choropleth Tutorial - Leaflet</title>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<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>
<!-- Leaflet CSS -->
<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%;
body, html {
margin: 0;
padding: 0;
height: 100%;
font-family: 'Inter', sans-serif;
overflow: hidden;
background-color: #f8fafc;
}
.leaflet-container {
height: 400px;
width: 600px;
max-width: 100%;
max-height: 100%;
#map {
width: 100vw;
height: 100vh;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
/* Brand panel overlay */
.brand-panel {
position: absolute;
top: 20px;
left: 20px;
z-index: 1000;
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(8px);
border: 1px solid rgba(191, 219, 254, 0.6);
padding: 20px;
border-radius: 16px;
box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.05);
max-width: 320px;
transition: all 0.3s ease;
}
.brand-panel:hover {
box-shadow: 0 20px 25px -5px rgba(0,0,0,0.15), 0 10px 10px -5px rgba(0,0,0,0.08);
border-color: rgba(29, 78, 216, 0.3);
}
.brand-title {
font-size: 18px;
font-weight: 700;
color: #1e293b;
margin-bottom: 6px;
display: flex;
align-items: center;
gap: 8px;
}
.brand-title svg {
color: #1d4ed8;
}
.brand-subtitle {
font-size: 13px;
color: #64748b;
margin-bottom: 16px;
line-height: 1.5;
}
.btn-back {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 13px;
font-weight: 600;
color: #1d4ed8;
background: #eff6ff;
border: 1px solid #bfdbfe;
padding: 10px 16px;
border-radius: 10px;
text-decoration: none;
transition: all 0.2s ease;
width: 100%;
box-sizing: border-box;
justify-content: center;
}
.btn-back:hover {
background: #dbeafe;
color: #1e40af;
transform: translateY(-1px);
}
.btn-back svg {
width: 16px;
height: 16px;
}
/* Custom Info Box style */
.info {
padding: 12px 18px;
font-family: 'Inter', sans-serif;
background: rgba(255, 255, 255, 0.9) !important;
backdrop-filter: blur(8px);
border: 1px solid rgba(191, 219, 254, 0.8) !important;
box-shadow: 0 10px 20px -3px rgba(0, 0, 0, 0.08) !important;
border-radius: 14px !important;
color: #1e293b;
min-width: 200px;
}
.info h4 {
margin: 0 0 6px;
color: #64748b;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.info b {
color: #1e293b;
font-size: 15px;
font-weight: 700;
}
.info-desc {
font-size: 13px;
color: #475569;
margin-top: 4px;
}
/* Custom Legend style */
.legend {
line-height: 22px;
color: #475569;
font-family: 'Inter', sans-serif;
font-size: 12px;
padding: 14px 18px;
background: rgba(255, 255, 255, 0.9) !important;
backdrop-filter: blur(8px);
border: 1px solid rgba(191, 219, 254, 0.8) !important;
box-shadow: 0 10px 20px -3px rgba(0, 0, 0, 0.08) !important;
border-radius: 14px !important;
}
.legend i {
width: 18px;
height: 18px;
float: left;
margin-right: 10px;
opacity: 0.85;
border-radius: 4px;
}
</style>
<style>#map { width: 800px; height: 500px; }
.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>
<div class="brand-panel">
<div class="brand-title">
<svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
Kepadatan Penduduk
</div>
<div class="brand-subtitle">Visualisasi choropleth spasial jumlah penduduk per kecamatan di Kota Pontianak.</div>
<a href="../index.php" class="btn-back">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>
Kembali ke Portal
</a>
</div>
<div id="map"></div>
<!-- GeoJSON Data -->
<script type="text/javascript" src="pontianakk.js"></script>
<script type="text/javascript">
// Inisialisasi peta
const map = L.map('map', { zoomControl: false }).setView([-0.02, 109.34], 12);
const map = L.map('map').setView([-0.02, 109.34], 12);
// Tambahkan tombol zoom di kanan bawah agar tidak bertabrakan dengan brand panel
L.control.zoom({ position: 'bottomright' }).addTo(map);
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 state info on hover
// Info control (hover)
const info = L.control();
info.onAdd = function (map) {
@@ -55,31 +191,32 @@
};
info.update = function (props) {
const contents = props ? `<b>${props.name}</b><br />${props.civilians.toLocaleString()} jiwa` : 'Hover ke kecamatan';
this._div.innerHTML = `<h4>Pontianak Population Civilians</h4>${contents}`;
const contents = props
? `<b>Kec. ${props.name}</b><br /><div class="info-desc">${props.civilians.toLocaleString('id-ID')} jiwa</div>`
: '<div class="info-desc">Hover ke kecamatan</div>';
this._div.innerHTML = `<h4>Info Kependudukan</h4>${contents}`;
};
info.addTo(map);
// get color depending on population density value
function getColor(d) {
return d > 140000 ? '#800026' :
d > 120000 ? '#BD0026' :
d > 100000 ? '#E31A1C' :
d > 80000 ? '#FC4E2A' :
d > 60000 ? '#FD8D3C' :
d > 50000 ? '#FEB24C' :
'#FFEDA0';
}
// Warna gradien berdasarkan jumlah penduduk
function getColor(d) {
return d > 140000 ? '#800026' :
d > 120000 ? '#BD0026' :
d > 100000 ? '#E31A1C' :
d > 80000 ? '#FC4E2A' :
d > 60000 ? '#FD8D3C' :
d > 50000 ? '#FEB24C' :
'#FFEDA0';
}
function style(feature) {
return {
weight: 2,
weight: 2.5,
opacity: 1,
color: 'white',
dashArray: '3',
fillOpacity: 0.7,
fillOpacity: 0.75,
fillColor: getColor(feature.properties.civilians)
};
}
@@ -88,18 +225,16 @@ function getColor(d) {
const layer = e.target;
layer.setStyle({
weight: 5,
color: '#666',
weight: 4,
color: '#1d4ed8',
dashArray: '',
fillOpacity: 0.7
fillOpacity: 0.85
});
layer.bringToFront();
info.update(layer.feature.properties);
}
/* global statesData */
const geojson = L.geoJson(pontianakData, {
style,
onEachFeature
@@ -122,23 +257,24 @@ function getColor(d) {
});
}
map.attributionControl.addAttribution('Population data &copy; <a href="http://census.gov/">US Census Bureau</a>');
// Legend control
const legend = L.control({position: 'bottomright'});
legend.onAdd = function (map) {
const div = L.DomUtil.create('div', 'info legend');
const grades = [50000, 60000, 80000, 100000, 120000, 140000];
const labels = [];
let from, to;
labels.push('<strong>Jiwa / Kecamatan</strong><br><br>');
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}${to ? `&ndash;${to}` : '+'}`);
labels.push(
`<i style="background:${getColor(from + 1)}"></i> ` +
`${from.toLocaleString('id-ID')}${to ? ` &ndash; ${to.toLocaleString('id-ID')}` : '+'}`
);
}
div.innerHTML = labels.join('<br>');
@@ -146,10 +282,7 @@ function getColor(d) {
};
legend.addTo(map);
</script>
</body>
</html>