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
+173 -40
View File
@@ -1,51 +1,187 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="id">
<head> <head>
<base target="_top">
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <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" />
<!-- Leaflet CSS -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/> <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> <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
<style> <style>
html, body { body, html {
height: 100%;
margin: 0; margin: 0;
padding: 0;
height: 100%;
font-family: 'Inter', sans-serif;
overflow: hidden;
background-color: #f8fafc;
} }
.leaflet-container {
height: 400px; #map {
width: 600px; width: 100vw;
max-width: 100%; height: 100vh;
max-height: 100%; 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>
<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> </head>
<body> <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" src="pontianakk.js"></script>
<script type="text/javascript"> <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', { const tiles = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19, maxZoom: 19,
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>' attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map); }).addTo(map);
// control that shows state info on hover // Info control (hover)
const info = L.control(); const info = L.control();
info.onAdd = function (map) { info.onAdd = function (map) {
@@ -55,15 +191,16 @@
}; };
info.update = function (props) { info.update = function (props) {
const contents = props ? `<b>${props.name}</b><br />${props.civilians.toLocaleString()} jiwa` : 'Hover ke kecamatan'; const contents = props
this._div.innerHTML = `<h4>Pontianak Population Civilians</h4>${contents}`; ? `<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); info.addTo(map);
// Warna gradien berdasarkan jumlah penduduk
// get color depending on population density value function getColor(d) {
function getColor(d) {
return d > 140000 ? '#800026' : return d > 140000 ? '#800026' :
d > 120000 ? '#BD0026' : d > 120000 ? '#BD0026' :
d > 100000 ? '#E31A1C' : d > 100000 ? '#E31A1C' :
@@ -71,15 +208,15 @@ function getColor(d) {
d > 60000 ? '#FD8D3C' : d > 60000 ? '#FD8D3C' :
d > 50000 ? '#FEB24C' : d > 50000 ? '#FEB24C' :
'#FFEDA0'; '#FFEDA0';
} }
function style(feature) { function style(feature) {
return { return {
weight: 2, weight: 2.5,
opacity: 1, opacity: 1,
color: 'white', color: 'white',
dashArray: '3', dashArray: '3',
fillOpacity: 0.7, fillOpacity: 0.75,
fillColor: getColor(feature.properties.civilians) fillColor: getColor(feature.properties.civilians)
}; };
} }
@@ -88,18 +225,16 @@ function getColor(d) {
const layer = e.target; const layer = e.target;
layer.setStyle({ layer.setStyle({
weight: 5, weight: 4,
color: '#666', color: '#1d4ed8',
dashArray: '', dashArray: '',
fillOpacity: 0.7 fillOpacity: 0.85
}); });
layer.bringToFront(); layer.bringToFront();
info.update(layer.feature.properties); info.update(layer.feature.properties);
} }
/* global statesData */
const geojson = L.geoJson(pontianakData, { const geojson = L.geoJson(pontianakData, {
style, style,
onEachFeature 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'}); const legend = L.control({position: 'bottomright'});
legend.onAdd = function (map) { legend.onAdd = function (map) {
const div = L.DomUtil.create('div', 'info legend'); const div = L.DomUtil.create('div', 'info legend');
const grades = [50000, 60000, 80000, 100000, 120000, 140000]; const grades = [50000, 60000, 80000, 100000, 120000, 140000];
const labels = []; const labels = [];
let from, to; let from, to;
labels.push('<strong>Jiwa / Kecamatan</strong><br><br>');
for (let i = 0; i < grades.length; i++) { for (let i = 0; i < grades.length; i++) {
from = grades[i]; from = grades[i];
to = grades[i + 1]; 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>'); div.innerHTML = labels.join('<br>');
@@ -146,10 +282,7 @@ function getColor(d) {
}; };
legend.addTo(map); legend.addTo(map);
</script> </script>
</body> </body>
</html> </html>
index.php
+68 -9
View File
@@ -1,3 +1,10 @@
<?php
// Semua project di-deploy dalam satu folder — gunakan relative path
$url_spbu = 'SIG_spbu/';
$url_miskin = 'SIG_miskin/gis/';
$url_jalantanah = 'SIG2_jalantanah/';
$url_choropleth = 'Choropleth/ptk.html';
?>
<!DOCTYPE html> <!DOCTYPE html>
<html lang="id"> <html lang="id">
<head> <head>
@@ -21,7 +28,7 @@ body {
.navbar { .navbar {
background: var(--white); background: var(--white);
padding: 20px 40px; padding: 20px 40px;
display: flex;href display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
border-bottom: 1px solid var(--border); border-bottom: 1px solid var(--border);
@@ -55,21 +62,40 @@ body {
.main { max-width: 1140px; margin: 60px auto; padding: 0 24px; flex: 1; width: 100%; } .main { max-width: 1140px; margin: 60px auto; padding: 0 24px; flex: 1; width: 100%; }
.projects { .projects {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
@media (max-width: 1100px) {
.projects {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
.projects {
grid-template-columns: 1fr;
}
} }
@media (max-width: 900px) { .projects { grid-template-columns: 1fr; } }
.project-card { .project-card {
background: var(--white); border: 1px solid var(--border); background: var(--white); border: 1px solid var(--border);
border-radius: 16px; overflow: hidden; text-decoration: none; color: inherit; border-radius: 16px; overflow: hidden; text-decoration: none; color: inherit;
display: flex; flex-direction: column; display: flex; flex-direction: column;
transition: all .25s ease; transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 4px 6px -1px rgba(0,0,0,.05), 0 2px 4px -1px rgba(0,0,0,.03); box-shadow: 0 4px 6px -1px rgba(0,0,0,.05), 0 2px 4px -1px rgba(0,0,0,.03);
} }
.project-card:hover { .project-card:hover {
transform: translateY(-5px); transform: translateY(-5px);
box-shadow: 0 20px 25px -5px rgba(0,0,0,.1), 0 10px 10px -5px rgba(0,0,0,.04); box-shadow: 0 20px 25px -5px rgba(0,0,0,.08), 0 10px 10px -5px rgba(0,0,0,.03);
border-color: #bfdbfe; border-color: #3b82f6;
}
.project-card:hover .pc-icon {
background: var(--blue-primary);
color: var(--white);
transform: scale(1.08) rotate(2deg);
}
.project-card:hover .pc-link svg {
transform: translateX(6px);
} }
.pc-head { .pc-head {
padding: 30px 24px 20px; border-bottom: 1px solid var(--border); padding: 30px 24px 20px; border-bottom: 1px solid var(--border);
@@ -80,6 +106,7 @@ body {
display: flex; align-items: center; justify-content: center; display: flex; align-items: center; justify-content: center;
margin-bottom: 18px; margin-bottom: 18px;
background: var(--blue-light); color: var(--blue-primary); background: var(--blue-light); color: var(--blue-primary);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
} }
.pc-icon svg { width: 28px; height: 28px; } .pc-icon svg { width: 28px; height: 28px; }
.pc-head h2 { font-size: 18px; font-weight: 700; margin-bottom: 8px; color: #1e293b; } .pc-head h2 { font-size: 18px; font-weight: 700; margin-bottom: 8px; color: #1e293b; }
@@ -97,6 +124,9 @@ body {
font-size: 14px; font-weight: 600; color: var(--blue-primary); font-size: 14px; font-weight: 600; color: var(--blue-primary);
display: flex; align-items: center; gap: 4px; display: flex; align-items: center; gap: 4px;
} }
.pc-link svg {
transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.pc-tag { .pc-tag {
font-size: 11px; font-weight: 600; text-transform: uppercase; font-size: 11px; font-weight: 600; text-transform: uppercase;
letter-spacing: .05em; padding: 4px 10px; border-radius: 6px; letter-spacing: .05em; padding: 4px 10px; border-radius: 6px;
@@ -133,7 +163,7 @@ body {
<main class="main"> <main class="main">
<div class="projects"> <div class="projects">
<a class="project-card" href="http://zcgk444o4k8okss8ggcos4os.203.24.51.230.sslip.io"> <a class="project-card" href="<?= htmlspecialchars($url_spbu) ?>">
<div class="pc-head"> <div class="pc-head">
<div class="pc-icon"> <div class="pc-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 22v-8p2 2 0 0 1 4 0h10a2 2 0 0 1 2 2v4"/><path d="M14 22V4a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v18"/><path d="M14 13h2a2 2 0 0 1 2 2v2a2 2 0 0 0 2 2h0a2 2 0 0 0 2-2V9.83a2 2 0 0 0-.59-1.42L18 5"/></svg> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 22v-8p2 2 0 0 1 4 0h10a2 2 0 0 1 2 2v4"/><path d="M14 22V4a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v18"/><path d="M14 13h2a2 2 0 0 1 2 2v2a2 2 0 0 0 2 2h0a2 2 0 0 0 2-2V9.83a2 2 0 0 0-.59-1.42L18 5"/></svg>
@@ -150,10 +180,11 @@ body {
</div> </div>
<div class="pc-foot"> <div class="pc-foot">
<span class="pc-link">Buka aplikasi <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg></span> <span class="pc-link">Buka aplikasi <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg></span>
<span class="pc-tag">SIG SPBU</span>
</div> </div>
</a> </a>
<a class="project-card" href="http://vk04ckgok4s0wosoc884os48.203.24.51.230.sslip.io"> <a class="project-card" href="<?= htmlspecialchars($url_miskin) ?>">
<div class="pc-head"> <div class="pc-head">
<div class="pc-icon"> <div class="pc-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
@@ -170,10 +201,11 @@ body {
</div> </div>
<div class="pc-foot"> <div class="pc-foot">
<span class="pc-link">Masuk ke aplikasi <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg></span> <span class="pc-link">Masuk ke aplikasi <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg></span>
<span class="pc-tag">SIG Miskin</span>
</div> </div>
</a> </a>
<a class="project-card" href="http://bggcs44gog844wkcko8sko04.203.24.51.230.sslip.io"> <a class="project-card" href="<?= htmlspecialchars($url_jalantanah) ?>">
<div class="pc-head"> <div class="pc-head">
<div class="pc-icon"> <div class="pc-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
@@ -190,6 +222,33 @@ body {
</div> </div>
<div class="pc-foot"> <div class="pc-foot">
<span class="pc-link">Buka aplikasi <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg></span> <span class="pc-link">Buka aplikasi <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg></span>
<span class="pc-tag">SIG Jalan</span>
</div>
</a>
<a class="project-card" href="<?= htmlspecialchars($url_choropleth) ?>">
<div class="pc-head">
<div class="pc-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<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>
</div>
<h2>Kepadatan Penduduk Pontianak</h2>
<p>Peta tematik choropleth wilayah Kota Pontianak berdasarkan jumlah kepadatan penduduk per kecamatan.</p>
</div>
<div class="pc-body">
<ul class="pc-features">
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg>Peta choropleth interaktif</li>
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg>Data populasi per kecamatan</li>
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg>Informasi detail saat hover</li>
</ul>
</div>
<div class="pc-foot">
<span class="pc-link">Buka peta tematik <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg></span>
<span class="pc-tag">Choropleth</span>
</div> </div>
</a> </a>