arifal/sibedas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

partial update add loading on maps and add color for zone type maps

Browse Source
This commit is contained in:
arifal
2025-02-26 23:52:48 +07:00
parent de300c2c32
commit 01fda22c89
5 changed files with 3053 additions and 2996 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
resources/views/maps/google-api.blade.php
View File

@@ -1,45 +1,41 @@
@extends('layouts.vertical', ['subtitle' => 'Google Maps'])
@section('css')
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<style>
.loading-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5); /* Latar belakang gelap transparan */
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
}
.loading-text {
background: white;
padding: 10px 20px;
border-radius: 5px;
font-size: 18px;
font-weight: bold;
}
</style>
@endsection
@section('content')
@include('layouts.partials/page-title', ['title' => 'Maps', 'subtitle' => 'Google Maps'])
@include('layouts.partials.page-title', ['title' => 'Maps', 'subtitle' => 'Google Maps'])
<!-- Elemen loading -->
<div id="loading" class="loading-overlay">
<div class="loading-text">Loading data...</div>
</div>
<!-- Peta -->
<div id="map" style="width: 100%; height: 90vh;"></div>
@endsection
@section('scripts')
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script src="https://unpkg.com/togeojson@0.16.0"></script>
<script src="https://unpkg.com/leaflet-omnivore@0.3.4/leaflet-omnivore.min.js"></script>
<script src="https://unpkg.com/leaflet-kml/L.KML.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function () {
var map = L.map('map').setView([-6.9175, 107.6191], 10); // Jakarta
// Tambahkan peta dasar dari OpenStreetMap
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; OpenStreetMap contributors'
}).addTo(map);
// Muat file KMZ
omnivore.kml("{{ asset('storage/maps/rencanapolaruang_rtrw_2024_2044__rencana_pola_ruang.kml') }}")
.on('ready', function () {
try {
var bounds = this.getBounds();
if (bounds.isValid()) {
map.fitBounds(bounds);
} else {
console.warn("Bounds tidak valid, gunakan fallback.");
map.setView([-6.9175, 107.6191], 10); // Default ke Jakarta
}
} catch (error) {
console.error("Error setting bounds:", error);
map.setView([-6.1751, 106.8650], 10);
}
})
.addTo(map);
});
</script>
@vite(['resources/js/maps/maps-kml.js'])
@endsection