Mr.Haruna
64 lines
3.6 KiB
PHP
64 lines
3.6 KiB
PHP
<?php
|
|
/**
|
|
* Peta Publik — akses tanpa login (role Publik).
|
|
* Hanya menampilkan data agregat (choropleth & heatmap), tanpa data pribadi warga.
|
|
*/
|
|
require_once __DIR__ . '/config/app.php';
|
|
?>
|
|
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Peta Sebaran Kemiskinan — WebGIS Publik</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
|
|
<link rel="stylesheet" href="<?= app_url('assets/css/map.css') ?>">
|
|
<style>
|
|
* { margin:0; padding:0; box-sizing:border-box; font-family:'Inter',sans-serif; }
|
|
body { overflow:hidden; }
|
|
#public-map { position:absolute; inset:0; }
|
|
.pub-header { position:absolute; top:0; left:0; right:0; z-index:1000;
|
|
background:linear-gradient(135deg,#1D4ED8,#2563EB); color:#fff; padding:12px 18px;
|
|
display:flex; align-items:center; justify-content:space-between; box-shadow:0 2px 8px rgba(0,0,0,0.15); }
|
|
.pub-header h1 { font-size:1rem; font-weight:700; }
|
|
.pub-header h1 span { font-weight:400; opacity:0.85; font-size:0.82rem; display:block; }
|
|
.pub-header a { color:#fff; background:rgba(255,255,255,0.18); padding:8px 14px; border-radius:8px;
|
|
text-decoration:none; font-size:0.82rem; font-weight:600; }
|
|
.legend { background:#fff; padding:12px 14px; border-radius:10px; box-shadow:0 2px 10px rgba(0,0,0,0.15); font-size:0.78rem; line-height:1.6; }
|
|
.legend h4 { font-size:0.8rem; margin-bottom:6px; }
|
|
.legend i { display:inline-block; width:14px; height:14px; border-radius:3px; margin-right:6px; vertical-align:middle; }
|
|
.map-search { background:#fff; border-radius:10px; box-shadow:0 2px 10px rgba(0,0,0,0.15); padding:6px; width:240px; }
|
|
.map-search input { width:100%; border:1px solid #E5E7EB; border-radius:7px; padding:8px 10px; font-size:0.85rem; outline:none; }
|
|
.map-search input:focus { border-color:#2563EB; }
|
|
.search-results { margin-top:4px; }
|
|
.search-item { padding:8px 10px; font-size:0.83rem; cursor:pointer; border-radius:6px; }
|
|
.search-item:hover { background:#EFF6FF; color:#1D4ED8; }
|
|
.leaflet-control-layers { border-radius:10px !important; box-shadow:0 2px 10px rgba(0,0,0,0.15) !important; font-size:0.83rem; }
|
|
/* beri ruang agar kontrol kanan-atas tidak menabrak header */
|
|
.leaflet-top.leaflet-right { margin-top:56px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="pub-header">
|
|
<h1><i class="fas fa-map-marked-alt"></i> Peta Sebaran Kemiskinan
|
|
<span>Data agregat publik — Pemerintah Kota</span></h1>
|
|
<a href="<?= app_url('login.php') ?>"><i class="fas fa-sign-in-alt"></i> Login Petugas</a>
|
|
</div>
|
|
<div id="public-map"></div>
|
|
|
|
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
|
<script src="https://unpkg.com/leaflet.heat@0.2.0/dist/leaflet-heat.js"></script>
|
|
<script>
|
|
const APP_BASE = '<?= app_url() ?>';
|
|
const map = L.map('public-map', { zoomControl:true }).setView([-0.0500, 109.3450], 13);
|
|
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
maxZoom: 19, attribution: '© OpenStreetMap'
|
|
}).addTo(map);
|
|
// Layer choropleth & heatmap diisi di Fase B (assets/js/public-map.js).
|
|
</script>
|
|
<script src="<?= app_url('assets/js/public-map.js') ?>?v=1"></script>
|
|
</body>
|
|
</html>
|