Monarch055
240 lines
9.1 KiB
HTML
240 lines
9.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>View Maps</title>
|
|
<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>
|
|
<!-- Google Fonts for premium typography -->
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
font-family: 'Inter', system-ui, -apple-system, sans-serif;
|
|
background: #f8fafc;
|
|
color: #0f172a;
|
|
}
|
|
#map { height: 100vh; width: 100vw; }
|
|
#legend {
|
|
position: fixed;
|
|
top: 20px;
|
|
right: 20px;
|
|
z-index: 1000;
|
|
background: #ffffff;
|
|
border: 1px solid #e2e8f0;
|
|
border-radius: 12px;
|
|
padding: 16px;
|
|
width: 280px;
|
|
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
|
|
font-size: 13px;
|
|
color: #0f172a;
|
|
}
|
|
#legend h3 {
|
|
margin: 0 0 6px 0;
|
|
font-size: 15px;
|
|
font-weight: 700;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
#legend p {
|
|
margin: 0 0 12px 0;
|
|
color: #64748b;
|
|
font-size: 12px;
|
|
line-height: 1.4;
|
|
}
|
|
#legend ul {
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
#legend li {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
line-height: 1.35;
|
|
}
|
|
/* Custom styled indicators for the read-only legend */
|
|
.legend-indicator {
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 50%;
|
|
flex-shrink: 0;
|
|
display: inline-block;
|
|
}
|
|
.indicator-spbu-active { background-color: #10b981; }
|
|
.indicator-spbu-inactive { background-color: #ef4444; }
|
|
.indicator-jalan-nas { background-color: #ef4444; }
|
|
.indicator-jalan-prov { background-color: #10b981; }
|
|
.indicator-jalan-kab { background-color: #3b82f6; }
|
|
.indicator-parsil-shm { background-color: #f59e0b; }
|
|
.indicator-parsil-hgb { background-color: #8b5cf6; }
|
|
.indicator-parsil-hgu { background-color: #f97316; }
|
|
.indicator-parsil-hp { background-color: #6b7280; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="map"></div>
|
|
<div id="legend">
|
|
<h3>Legend</h3>
|
|
<p>Halaman ini hanya untuk melihat data peta (read-only).</p>
|
|
<ul>
|
|
<li>
|
|
<span class="legend-indicator indicator-spbu-active"></span>
|
|
<span>SPBU Buka 24 Jam</span>
|
|
</li>
|
|
<li>
|
|
<span class="legend-indicator indicator-spbu-inactive"></span>
|
|
<span>SPBU Buka < 24 Jam</span>
|
|
</li>
|
|
<li>
|
|
<span class="legend-indicator indicator-jalan-nas"></span>
|
|
<span>Jalan Nasional</span>
|
|
</li>
|
|
<li>
|
|
<span class="legend-indicator indicator-jalan-prov"></span>
|
|
<span>Jalan Provinsi</span>
|
|
</li>
|
|
<li>
|
|
<span class="legend-indicator indicator-jalan-kab"></span>
|
|
<span>Jalan Kabupaten</span>
|
|
</li>
|
|
<li>
|
|
<span class="legend-indicator indicator-parsil-shm"></span>
|
|
<span>Parsil SHM (Milik)</span>
|
|
</li>
|
|
<li>
|
|
<span class="legend-indicator indicator-parsil-hgb"></span>
|
|
<span>Parsil HGB (Bangunan)</span>
|
|
</li>
|
|
<li>
|
|
<span class="legend-indicator indicator-parsil-hgu"></span>
|
|
<span>Parsil HGU (Usaha)</span>
|
|
</li>
|
|
<li>
|
|
<span class="legend-indicator indicator-parsil-hp"></span>
|
|
<span>Parsil HP (Pakai)</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<script>
|
|
const map = L.map('map').setView([-0.055, 109.34], 13);
|
|
|
|
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
maxZoom: 19,
|
|
attribution: '© OpenStreetMap'
|
|
}).addTo(map);
|
|
|
|
const markersLayer = L.layerGroup().addTo(map);
|
|
const roadsLayer = L.layerGroup().addTo(map);
|
|
const parcelsLayer = L.layerGroup().addTo(map);
|
|
|
|
const greenIcon = new L.Icon({
|
|
iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-green.png',
|
|
shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
|
|
iconSize: [25, 41], iconAnchor: [12, 41], popupAnchor: [1, -34], shadowSize: [41, 41]
|
|
});
|
|
const redIcon = new L.Icon({
|
|
iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-red.png',
|
|
shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
|
|
iconSize: [25, 41], iconAnchor: [12, 41], popupAnchor: [1, -34], shadowSize: [41, 41]
|
|
});
|
|
|
|
function roadColor(status) {
|
|
if (status === 'Jalan Nasional') return '#FF0000';
|
|
if (status === 'Jalan Provinsi') return '#00FF00';
|
|
if (status === 'Jalan Kabupaten') return '#0000FF';
|
|
return '#666666';
|
|
}
|
|
|
|
function parcelFillColor(status) {
|
|
if (status === 'SHM') return '#FFD700';
|
|
if (status === 'HGB') return '#800080';
|
|
if (status === 'HGU') return '#FFA500';
|
|
if (status === 'HP') return '#808080';
|
|
return '#666666';
|
|
}
|
|
|
|
function refreshMarkers() {
|
|
return fetch('get_spbu.php')
|
|
.then(r => r.json())
|
|
.then(rows => {
|
|
markersLayer.clearLayers();
|
|
rows.forEach(spbu => {
|
|
const markerIcon = (spbu.status === 'Buka 24 Jam') ? greenIcon : redIcon;
|
|
const lat = spbu.Latitude;
|
|
const lng = spbu.Longitude;
|
|
|
|
const marker = L.marker([lat, lng], { icon: markerIcon });
|
|
marker.bindPopup(`
|
|
<b>${spbu.nama}</b><br>
|
|
Nomor: ${spbu.nomor}<br>
|
|
Buka: ${spbu.status}
|
|
`);
|
|
marker.addTo(markersLayer);
|
|
});
|
|
})
|
|
.catch(err => console.error('Error fetching spbu:', err));
|
|
}
|
|
|
|
function refreshRoads() {
|
|
return fetch('get_jalan.php')
|
|
.then(r => r.json())
|
|
.then(rows => {
|
|
roadsLayer.clearLayers();
|
|
rows.forEach(row => {
|
|
let geom;
|
|
try { geom = JSON.parse(row.koordinat); } catch { return; }
|
|
|
|
const gj = L.geoJSON(geom, {
|
|
style: { color: roadColor(row.status_jalan), weight: 4 }
|
|
});
|
|
gj.eachLayer(l => {
|
|
l.bindPopup(`
|
|
<b>${row.nama_jalan}</b><br>
|
|
Status: ${row.status_jalan}<br>
|
|
Panjang (m): ${Number(row.panjang_meter || 0).toFixed(2)}
|
|
`);
|
|
});
|
|
gj.addTo(roadsLayer);
|
|
});
|
|
})
|
|
.catch(err => console.error('Error fetching jalan:', err));
|
|
}
|
|
|
|
function refreshParcels() {
|
|
return fetch('get_parsil.php')
|
|
.then(r => r.json())
|
|
.then(rows => {
|
|
parcelsLayer.clearLayers();
|
|
rows.forEach(row => {
|
|
let geom;
|
|
try { geom = JSON.parse(row.koordinat); } catch { return; }
|
|
|
|
const gj = L.geoJSON(geom, {
|
|
style: { color: '#333333', weight: 2, fillColor: parcelFillColor(row.status_kepemilikan), fillOpacity: 0.45 }
|
|
});
|
|
gj.eachLayer(l => {
|
|
l.bindPopup(`
|
|
<b>${row.nama_pemilik}</b><br>
|
|
Status: ${row.status_kepemilikan}<br>
|
|
Luas (m²): ${Number(row.luas_m2 || 0).toFixed(2)}
|
|
`);
|
|
});
|
|
gj.addTo(parcelsLayer);
|
|
});
|
|
})
|
|
.catch(err => console.error('Error fetching parsil:', err));
|
|
}
|
|
|
|
Promise.all([refreshMarkers(), refreshRoads(), refreshParcels()]);
|
|
</script>
|
|
</body>
|
|
</html> |