TaniaYuniar/Pertemuan-1-2-3-4
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:
TaniaYuniar
2026-06-11 12:38:46 +00:00
parent 7e56daf591
commit 55ac8ecc20
1 changed files with 15 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Tugas4/index.html
+15
View File
@@ -0,0 +1,15 @@
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tugas 4 - GeoJSON Kecamatan Pontianak</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<style>html,body,#map{height:100%;margin:0;font-family:Arial}.panel{position:absolute;z-index:999;top:14px;left:14px;background:#fff;padding:14px;border-radius:12px;box-shadow:0 4px 18px #0002;width:320px}.back{display:block;color:#0f766e;text-decoration:none;font-weight:bold;margin-bottom:8px}.list{max-height:260px;overflow:auto;margin-top:8px}.item{padding:8px;margin:6px 0;background:#f8fafc;border-radius:8px;border:1px solid #e2e8f0;font-size:13px}</style>
</head>
<body><div id="map"></div><div class="panel"><a class="back" href="../">← Kembali ke Landing Page</a><h3>Tugas 4 - Populasi Kecamatan</h3><p style="font-size:13px;color:#555">Menampilkan GeoJSON kecamatan Pontianak beserta nama kecamatan dan populasi.</p><div id="list" class="list">Memuat data...</div></div>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script>
const map=L.map('map').setView([-0.0263,109.3425],12);L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{maxZoom:19,attribution:'© OpenStreetMap'}).addTo(map);
function angka(n){return (parseInt(n||0)).toLocaleString('id-ID')}
fetch('../Admin_Kecamatan.json').then(r=>{if(!r.ok)throw new Error('Admin_Kecamatan.json tidak ditemukan');return r.json()}).then(data=>{let html='';const geo=L.geoJSON(data,{style:f=>({color:'#0f766e',weight:2,fillColor:'#14b8a6',fillOpacity:.22}),onEachFeature:(f,l)=>{const p=f.properties||{};const nama=p.Ket||p.kecamatan||'Kecamatan';const pop=p.Populasi||0;html+=`<div class="item"><b>${nama}</b><br>Populasi: ${angka(pop)} jiwa</div>`;l.bindPopup(`<b>${nama}</b><br>Populasi: ${angka(pop)} jiwa`);}}).addTo(map);document.getElementById('list').innerHTML=html||'Data tidak ditemukan';try{map.fitBounds(geo.getBounds())}catch(e){}}).catch(err=>{document.getElementById('list').innerHTML='<span style="color:red">Gagal memuat GeoJSON: '+err.message+'</span>';});
</script></body></html>