309 lines
13 KiB
PHP
309 lines
13 KiB
PHP
@extends('users/layouts.template')
|
|
|
|
@php
|
|
use Carbon\Carbon;
|
|
@endphp
|
|
|
|
@section('content')
|
|
<style>
|
|
#map {
|
|
height: 500px;
|
|
}
|
|
|
|
.wrapper-bg {
|
|
position: relative;
|
|
height: 250px;
|
|
}
|
|
|
|
.wrapper-bg::before {
|
|
content: "";
|
|
background-image: url('assets/users/img/pt2.jpg');
|
|
background-size: cover;
|
|
background-position: center;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
filter: brightness(0.3);
|
|
}
|
|
|
|
.container {
|
|
text-align: center;
|
|
position: relative;
|
|
z-index: 1;
|
|
color: white;
|
|
}
|
|
</style>
|
|
|
|
<section class="wrapper-bg bg-lalin">
|
|
<div class="container py-12 py-md-4 text-center">
|
|
<div class="row">
|
|
<div class="col-lg-10 col-xxl-12 mx-auto">
|
|
<h1 class="display-1 mb-3 text-white" style="filter: brightness(100) !important;">Pemetaan</h1>
|
|
<p class="lead mb-1">Pemetaan Daerah Rawan Kecelakaan Berdasarkan Data Kecelakaan di Jalan Nasional Tahun
|
|
2018 dan 2019</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="wrapper bg-light">
|
|
<div class="container pb-2 pt-10">
|
|
<div class="row gx-lg-8 gx-xl-12">
|
|
<h2 class="header-title mb-10 text-start" style="font-family: Arial;">Peta Kerawanan Lokasi Kecelakaan</h2>
|
|
<div class="col-lg-10">
|
|
<div class="row">
|
|
<div class="col-lg-2 text-start pt-2">
|
|
<p style="color: grey;">Filter Kerawanan :</p>
|
|
</div>
|
|
<div class="col-lg-3">
|
|
<div class="form-group mb-3">
|
|
<select id="filterKerawanan" class="form-control">
|
|
<option value="all">-- Semua --</option>
|
|
<option value="Aman">Aman</option>
|
|
<option value="Rawan">Rawan</option>
|
|
<option value="Sangat Rawan">Sangat Rawan</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-2 text-end pt-2">
|
|
<p style="color: grey;">Filter Jalan :</p>
|
|
</div>
|
|
<div class="col-lg-4">
|
|
<div class="form-group mb-3">
|
|
<select id="filterJalan" class="form-control">
|
|
<option value="all">-- Semua --</option>
|
|
@foreach ($data as $dataItem)
|
|
<option value="{{ $dataItem['nama_jalan'] }}">{{ $dataItem['nama_jalan'] }}</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<section class="wrapper bg-light mb-5">
|
|
<div id="map"></div>
|
|
</section>
|
|
</div>
|
|
<div class="col-md-3 col-lg-2 pt-12">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<p style="color: grey; font-size:10pt">Keterangan :</p>
|
|
<hr>
|
|
<div class="row pt-2">
|
|
<div class="col text-center">
|
|
<div>
|
|
<img class="img-fluid" src="assets/dashboard/images/marker-green.png" class="card-img-top" alt="Image" alt="Image" style="width:30px;">
|
|
</div>
|
|
<p style="color: black;">Aman</p>
|
|
</div>
|
|
</div>
|
|
<div class="row pt-2">
|
|
<div class="col text-center">
|
|
<div>
|
|
<img class="img-fluid" src="assets/dashboard/images/marker-yellow.png" class="card-img-top" alt="Image" alt="Image" style="width:30px;">
|
|
</div>
|
|
<p style="color: black;">Rawan</p>
|
|
</div>
|
|
</div>
|
|
<div class="row pt-2">
|
|
<div class="col text-center">
|
|
<div>
|
|
<img class="img-fluid" src="assets/dashboard/images/marker-red.png" class="card-img-top" alt="Image" alt="Image" style="width:30px;">
|
|
</div>
|
|
<p style="color: black;">Sangat Rawan</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- <section class="wrapper bg-light">
|
|
<div class="container py-8 py-md-6">
|
|
<h2 class="my-5">Data Lokasi Kecelakaan</h2>
|
|
<hr class="my-5">
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<table id="example" class="table table-striped text-center" style="width:100%">
|
|
<thead>
|
|
<tr>
|
|
<th>No</th>
|
|
<th>Nama Jalan</th>
|
|
<th>Tanggal</th>
|
|
<th>Kecamatan</th>
|
|
<th>Status Kerawanan</th>
|
|
<th>Action</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@foreach ($kecelakaan as $k)
|
|
<tr>
|
|
<td>{{ $loop->iteration }}</td>
|
|
<td>{{ $k->jalan->nama_jalan }}</td>
|
|
<td><?php
|
|
// Mengubah format tanggal
|
|
$tanggal = $k->tanggal;
|
|
$tanggal_baru = date('d-m-Y', strtotime($tanggal));
|
|
|
|
echo $tanggal_baru;
|
|
?></td>
|
|
<td>{{ $k->kecamatan }}</td>
|
|
<td>
|
|
@if ($k->tingkat_kerawanan == 'Aman')
|
|
<a
|
|
class="btn btn-green rounded-pill">{{ $k->tingkat_kerawanan }}</a>
|
|
@elseif ($k->tingkat_kerawanan == 'Rawan')
|
|
<a
|
|
class="btn btn-yellow rounded-pill">{{ $k->tingkat_kerawanan }}</a>
|
|
@else
|
|
<a class="btn btn-red rounded-pill">{{ $k->tingkat_kerawanan }}</a>
|
|
@endif
|
|
</td>
|
|
<td> <a href="{{ route('detail', $k->id) }}"
|
|
class="btn btn-outline-primary rounded-pill mx-1 mb-2 mb-md-0">Detail</a>
|
|
</td>
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
<tfoot>
|
|
<tr>
|
|
<th>No</th>
|
|
<th>Nama Jalan</th>
|
|
<th>Alamat</th>
|
|
<th>Status Kerawanan</th>
|
|
<th>Action</th>
|
|
</tr>
|
|
</tfoot>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section> -->
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="wrapper bg-gray">
|
|
<div class="container py-8 py-md-6">
|
|
<!-- Placeholder for additional content or buttons -->
|
|
</div>
|
|
</section>
|
|
|
|
<section class="wrapper bg-light">
|
|
<div class="container py-4 py-md-6">
|
|
<h2 class="my-5">Data Tingkat Kerawanan Jalan</h2>
|
|
<hr class="my-5">
|
|
@include('users/pemetaan/data')
|
|
|
|
<div class="row pt-5">
|
|
<div class="col-12">
|
|
<table id="example" class="table table-striped text-center" style="width:100%">
|
|
<thead>
|
|
<tr>
|
|
<th>No</th>
|
|
<th>Nama Jalan</th>
|
|
<th>Tingkat Kerawanan</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@foreach ($data as $dataItem)
|
|
<tr>
|
|
<td>{{ $loop->iteration }}</td>
|
|
<td class="text-start">{{ $dataItem['nama_jalan'] }}</td>
|
|
<td>
|
|
@if ($dataItem['status_kerawanan'] == 'Aman')
|
|
<a class="btn btn-green rounded-pill">{{ $dataItem['status_kerawanan'] }}</a>
|
|
@elseif ($dataItem['status_kerawanan'] == 'Rawan')
|
|
<a class="btn btn-yellow rounded-pill">{{ $dataItem['status_kerawanan'] }}</a>
|
|
@else
|
|
<a class="btn btn-red rounded-pill">{{ $dataItem['status_kerawanan'] }}</a>
|
|
@endif
|
|
</td>
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
<tfoot>
|
|
<tr>
|
|
<th>No</th>
|
|
<th>Nama Jalan</th>
|
|
<th>Tingkat Kerawanan</th>
|
|
</tr>
|
|
</tfoot>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
@include('users/pemetaan/modalCreate')
|
|
@include('users/pemetaan/modalDetail')
|
|
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
|
|
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
|
|
<script src="https://cdn.datatables.net/1.13.4/js/dataTables.bootstrap5.min.js"></script>
|
|
<script>
|
|
$(document).ready(function() {
|
|
$('#example').DataTable();
|
|
});
|
|
|
|
const map = L.map('map').setView([-8.1332, 113.2226], 11);
|
|
|
|
L.tileLayer('http://{s}.google.com/vt?lyrs=m&x={x}&y={y}&z={z}', {
|
|
maxZoom: 20,
|
|
subdomains: ['mt0', 'mt1', 'mt2', 'mt3']
|
|
}).addTo(map);
|
|
|
|
const markers = [];
|
|
const kecelakaanData = @json($kecelakaan);
|
|
|
|
kecelakaanData.forEach(lokasi => {
|
|
var markerColor = "green";
|
|
|
|
if (lokasi.tingkat_kerawanan === 'Sangat Rawan') {
|
|
markerColor = "red";
|
|
} else if (lokasi.tingkat_kerawanan === 'Rawan') {
|
|
markerColor = "yellow";
|
|
} else if (lokasi.tingkat_kerawanan === 'Aman') {
|
|
markerColor = "green";
|
|
}
|
|
|
|
var marker = L.marker([lokasi.latitude, lokasi.longitude], {
|
|
icon: L.icon({
|
|
iconUrl: 'https://maps.google.com/mapfiles/ms/micons/' + markerColor +
|
|
'-dot.png',
|
|
iconSize: [32, 32],
|
|
iconAnchor: [16, 32],
|
|
popupAnchor: [0, -28]
|
|
})
|
|
}).addTo(map);
|
|
|
|
var popupContent =
|
|
`<b>${lokasi.jalan.nama_jalan}</b><br>${lokasi.kecamatan}<br>${lokasi.kabupaten}<br> Koordinat : ${lokasi.latitude} ${lokasi.longitude}`;
|
|
marker.bindPopup(popupContent).openPopup();
|
|
|
|
markers.push({
|
|
marker: marker,
|
|
tingkat_kerawanan: lokasi.tingkat_kerawanan,
|
|
nama_jalan: lokasi.jalan.nama_jalan
|
|
});
|
|
});
|
|
|
|
function filterMarkers() {
|
|
const filterKerawanan = document.getElementById('filterKerawanan').value;
|
|
const filterJalan = document.getElementById('filterJalan').value;
|
|
|
|
markers.forEach(item => {
|
|
const matchKerawanan = filterKerawanan === 'all' || item.tingkat_kerawanan === filterKerawanan;
|
|
const matchJalan = filterJalan === 'all' || item.nama_jalan === filterJalan;
|
|
|
|
if (matchKerawanan && matchJalan) {
|
|
map.addLayer(item.marker);
|
|
} else {
|
|
map.removeLayer(item.marker);
|
|
}
|
|
});
|
|
}
|
|
|
|
document.getElementById('filterKerawanan').addEventListener('change', filterMarkers);
|
|
document.getElementById('filterJalan').addEventListener('change', filterMarkers);
|
|
</script>
|
|
@endsection
|