58 lines
2.5 KiB
HTML
58 lines
2.5 KiB
HTML
<!doctype html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Rancangan Sistem — Integrasi Rumah Ibadah & Penduduk Miskin</title>
|
|
<style>html,body,#map{height:100%;margin:0} .info{position:absolute;right:8px;top:8px;z-index:400;background:#fff;padding:6px}</style>
|
|
</head>
|
|
<body>
|
|
<div id="map"></div>
|
|
<div class="info">Data: Rumah Ibadah & Penduduk Miskin (dari API)</div>
|
|
|
|
<script src="../global/leaflet-loader.js"></script>
|
|
<script>
|
|
(function waitForLeaflet(){
|
|
if(window.L) return init();
|
|
window.addEventListener('leaflet:loaded', init);
|
|
setTimeout(function(){ if(window.L) init(); }, 1000);
|
|
function init(){
|
|
const map = L.map('map').setView([-0.03,109.34],12);
|
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{attribution:''}).addTo(map);
|
|
|
|
const overlays = {};
|
|
const control = L.control.layers(null, overlays, {collapsed:false}).addTo(map);
|
|
|
|
function addGeoData(data, title){
|
|
try{
|
|
if(!data) return;
|
|
if(data.type==='FeatureCollection' || data.features){
|
|
const layer = L.geoJSON(data, {onEachFeature:function(feature,layer){
|
|
const p = feature.properties || {};
|
|
layer.bindPopup(title+'<br>'+Object.keys(p).map(k=>k+': '+p[k]).join('<br>'));
|
|
}}).addTo(map);
|
|
overlays[title]=layer; control.addOverlay(layer,title);
|
|
} else if(Array.isArray(data)){
|
|
const lg = L.layerGroup();
|
|
data.forEach(it=>{
|
|
const lat = it.lat || it.latitude || it.y;
|
|
const lng = it.lng || it.lon || it.longitude || it.x;
|
|
if(lat && lng){
|
|
const m = L.marker([lat,lng]).bindPopup(title+'<br>'+(it.nama||it.name||''));
|
|
lg.addLayer(m);
|
|
}
|
|
});
|
|
lg.addTo(map); overlays[title]=lg; control.addOverlay(lg,title);
|
|
}
|
|
}catch(e){ console.error('addGeoData error',e); }
|
|
}
|
|
|
|
// load rumah ibadah and penduduk miskin as GeoJSON (endpoints in this folder)
|
|
fetch('get_rumah_ibadah_geojson.php').then(r=>r.json()).then(j=>addGeoData(j,'Rumah Ibadah')).catch(e=>console.error(e));
|
|
fetch('get_penduduk_miskin_geojson.php').then(r=>r.json()).then(j=>addGeoData(j,'Penduduk Miskin')).catch(e=>console.error(e));
|
|
}
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|