TaniaYuniar/Pertemuan-1-2-3-4
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:
TaniaYuniar
2026-06-11 12:34:45 +00:00
parent 3a09115a2f
commit 7e56daf591
1 changed files with 16 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Tugas3/index.html
+16
View File
@@ -0,0 +1,16 @@
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tugas 3 - Layer Control SPBU</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:300px}.back{display:block;color:#0f766e;text-decoration:none;font-weight:bold;margin-bottom:8px}.panel p{font-size:13px;color:#555}.leaflet-control-layers{font-size:14px}</style>
</head>
<body><div id="map"></div><div class="panel"><a class="back" href="../">← Kembali ke Landing Page</a><h3>Tugas 3 - Layer Control</h3><p>Gunakan layer control kanan atas untuk menampilkan SPBU 24 jam atau tidak 24 jam.</p></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);const osm=L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{maxZoom:19,attribution:'© OpenStreetMap'}).addTo(map);const carto=L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png',{maxZoom:19,attribution:'© OSM & CartoDB'});
const layer24=L.layerGroup().addTo(map);const layerNon24=L.layerGroup();L.control.layers({'OpenStreetMap':osm,'Carto Light':carto},{'⛽ SPBU Buka 24 Jam':layer24,'⛽ SPBU Tidak 24 Jam':layerNon24},{collapsed:false}).addTo(map);
function icon(color){return L.divIcon({html:`<div style="background:${color};color:white;border-radius:20px;padding:7px;border:2px solid white;box-shadow:0 2px 8px #0005">⛽</div>`,className:'',iconSize:[34,34],iconAnchor:[17,17]});}
function loadData(){layer24.clearLayers();layerNon24.clearLayers();fetch('../api.php?action=get_spbu').then(r=>r.json()).then(data=>{data.forEach(d=>{const target=d.buka==1?layer24:layerNon24;L.marker([d.lat,d.lng],{icon:icon(d.buka==1?'#16a34a':'#dc2626')}).addTo(target).bindPopup(`<b>${d.nama}</b><br>${d.hp||''}<br>${d.buka==1?'Buka 24 Jam':'Tidak 24 Jam'}`);});});}loadData();
</script></body></html>