Freya_Martines/TugasSIG_Kelas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Upload files to "Tugas4"

Browse Source
This commit is contained in:
Freya_Martines
2026-06-12 17:52:19 +00:00
parent c12e7c95a5
commit 64e1823baa
1 changed files with 60 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Tugas4/index.html
+60
View File
@@ -0,0 +1,60 @@
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<title>Tugas 4 - GeoJSON Kecamatan Pontianak</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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; font-family: Arial, Helvetica, sans-serif;}
#map {height:100%;}
input, select {width:100%; margin-bottom:5px; padding:4px;}
button {margin-top:5px; cursor:pointer;}
.back-link {
position: fixed; z-index: 9999; left: 12px; top: 12px;
background: white; color: #111827; padding: 9px 12px;
border-radius: 10px; text-decoration: none; font-weight: 700;
box-shadow: 0 3px 14px rgba(0,0,0,.18); font-size: 13px;
}
.legend { background:white; padding:10px; line-height:18px; color:#333; border-radius:5px; box-shadow:0 0 5px rgba(0,0,0,.3); }
.legend i { width:18px; height:18px; float:left; margin-right:8px; opacity:.8; }
</style>
</head>
<body>
<a class="back-link" href="../">← Landing Page</a>
<div id="map"></div>
<script>
const map = L.map('map').setView([-0.02, 109.34], 12);
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
fetch('../Admin_Kecamatan.json')
.then(res => res.json())
.then(data => {
const geojsonLayer = L.geoJSON(data, {
style: function(feature) {
const nama = feature.properties.Ket;
let warna = 'gray';
if(nama == 'Pontianak Timur') warna = 'pink';
else if(nama == 'Pontianak Barat') warna = 'skyblue';
else if(nama == 'Pontianak Kota') warna = 'gold';
else if(nama == 'Pontianak Selatan') warna = 'violet';
else if(nama == 'Pontianak Tenggara') warna = 'sienna';
else if(nama == 'Pontianak Utara') warna = 'slategray';
return { color:'black', weight:2, fillColor:warna, fillOpacity:0.55 };
},
onEachFeature: function(feature, layer) {
const nama = feature.properties.Ket || 'Tidak ada nama';
const populasi = feature.properties.Populasi || 'Tidak ada data';
layer.bindPopup(`<b>Kecamatan:</b> ${nama}<br><b>Populasi:</b> ${populasi}`);
}
}).addTo(map);
try { map.fitBounds(geojsonLayer.getBounds()); } catch(e) {}
})
.catch(err => alert('Gagal memuat Admin_Kecamatan.json. Pastikan file tersebut tetap ada di root repo.'));
const legend = L.control({position:'bottomright'});
legend.onAdd=function(){ const div=L.DomUtil.create('div','legend'); div.innerHTML='<b>Kecamatan Pontianak</b><br><i style="background:pink"></i> Pontianak Timur<br><i style="background:skyblue"></i> Pontianak Barat<br><i style="background:gold"></i> Pontianak Kota<br><i style="background:violet"></i> Pontianak Selatan<br><i style="background:sienna"></i> Pontianak Tenggara<br><i style="background:slategray"></i> Pontianak Utara'; return div; };
legend.addTo(map);
</script>
</body>
</html>