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

Upload files to "Tugas3"

Browse Source
This commit is contained in:
Freya_Martines
2026-06-12 17:52:03 +00:00
parent 55d37deaf6
commit c12e7c95a5
1 changed files with 54 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Tugas3/index.html
+54
View File
@@ -0,0 +1,54 @@
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<title>Tugas 3 - Layer Control SPBU</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], 13);
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
const iconHijau = new L.Icon({iconUrl:'https://maps.google.com/mapfiles/ms/icons/green-dot.png',iconSize:[32,32]});
const iconMerah = new L.Icon({iconUrl:'https://maps.google.com/mapfiles/ms/icons/red-dot.png',iconSize:[32,32]});
const spbuBuka = L.layerGroup();
const spbuTutup = L.layerGroup();
fetch('../ambil.php').then(res=>res.json()).then(data=>{
data.forEach(d=>{
const icon = d.buka=='Iya' ? iconHijau : iconMerah;
const marker = L.marker([d.lat,d.lng],{icon}).bindPopup(`<b>${d.nama}</b><br>WA: ${d.wa}<br>${d.buka=='Iya'?'Buka 24 Jam':'Tidak Buka 24 Jam'}`);
if(d.buka=='Iya') marker.addTo(spbuBuka); else marker.addTo(spbuTutup);
});
spbuBuka.addTo(map); spbuTutup.addTo(map);
});
const overlayMaps = {
'<img src="https://maps.google.com/mapfiles/ms/icons/green-dot.png" width="18"> SPBU Buka 24 Jam': spbuBuka,
'<img src="https://maps.google.com/mapfiles/ms/icons/red-dot.png" width="18"> SPBU Tidak Buka': spbuTutup
};
L.control.layers(null, overlayMaps).addTo(map);
const legend = L.control({position:'bottomright'});
legend.onAdd=function(){ const div=L.DomUtil.create('div','legend'); div.innerHTML='<b>Legenda SPBU</b><br><img src="https://maps.google.com/mapfiles/ms/icons/green-dot.png" width="18"> Buka 24 Jam<br><img src="https://maps.google.com/mapfiles/ms/icons/red-dot.png" width="18"> Tidak Buka 24 Jam'; return div; };
legend.addTo(map);
</script>
</body>
</html>