78 lines
2.7 KiB
PHP
78 lines
2.7 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('title', 'Laporan Bencana')
|
|
@section('page-title', 'Laporan Bencana Alam')
|
|
|
|
@section('content')
|
|
<div class="map">
|
|
<div class="text-center pt-4 no-select">Pemetaan Bencana Alam Wilayah Kabupaten Lumajang</div>
|
|
<div id="map"></div>
|
|
</div>
|
|
@endsection
|
|
|
|
@push('scripts')
|
|
<script>
|
|
function initMap() {
|
|
var location = [-8.132932, 113.221684]; // Koordinat Lumajang
|
|
var map = L.map('map').setView(location, 10);
|
|
|
|
// Set the bounds for the map
|
|
var bounds = [
|
|
[-7.893539, 112.899152], // Utara-Barat (top-left)
|
|
[-8.349499, 113.379803] // Selatan-Timur (bottom-right)
|
|
];
|
|
map.setMaxBounds(bounds);
|
|
|
|
// Prevent map from moving out of bounds
|
|
map.on('drag', function() {
|
|
map.panInsideBounds(bounds, { animate: false });
|
|
});
|
|
|
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
maxZoom: 18,
|
|
minZoom: 10.5,
|
|
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
|
}).addTo(map);
|
|
|
|
// Fetch laporan jalan data from API
|
|
fetch('/api/laporan-jalan')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
data.forEach(laporan => {
|
|
var markerIcon;
|
|
if (laporan.status === 'menunggu' && laporan.jenis_rusak === 'jalan rusak ringan') {
|
|
markerIcon = 'menunggu_ringan.png';
|
|
} else if (laporan.status === 'menunggu' && laporan.jenis_rusak === 'jalan rusak berat') {
|
|
markerIcon = 'menunggu_berat.png';
|
|
} else if (laporan.status === 'dalam_proses' && laporan.jenis_rusak === 'jalan rusak ringan') {
|
|
markerIcon = 'proses_ringan.png';
|
|
} else if (laporan.status === 'dalam_proses' && laporan.jenis_rusak === 'jalan rusak berat') {
|
|
markerIcon = 'proses_berat.png';
|
|
}
|
|
|
|
var customIcon = L.icon({
|
|
iconUrl: `icon/${markerIcon}`,
|
|
iconSize: [40, 40],
|
|
iconAnchor: [12, 41],
|
|
popupAnchor: [1, -34],
|
|
shadowSize: [41, 41]
|
|
});
|
|
|
|
L.marker([laporan.latitude, laporan.longitude], { icon: customIcon })
|
|
.addTo(map)
|
|
.bindPopup(`Status: ${laporan.status}<br>Jenis Kerusakan: ${laporan.jenis_rusak}`);
|
|
});
|
|
})
|
|
.catch(error => console.error('Error fetching data:', error));
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
if (window.L) {
|
|
initMap();
|
|
} else {
|
|
console.error("Leaflet library not loaded.");
|
|
}
|
|
});
|
|
</script>
|
|
@endpush
|