change-request: add custom geo layer
This commit is contained in:
@@ -39,7 +39,7 @@ class TourismController extends Controller
|
||||
$tourisms->village_name = $village ? $village->village_name : null;
|
||||
|
||||
$district = DB::table('districts')->where('district_code', $tourisms->district_code)->first();
|
||||
$tourisms->district_name = $village ? $village->village_name : null;
|
||||
$tourisms->district_name = $district ? $district->district_name : null;
|
||||
return $tourisms;
|
||||
});
|
||||
|
||||
|
||||
@@ -3,6 +3,8 @@ import gridjs from "gridjs/dist/gridjs.umd.js";
|
||||
import "gridjs/dist/gridjs.umd.js";
|
||||
import GlobalConfig from "../../global-config.js";
|
||||
import GeneralTable from "../../table-generator.js";
|
||||
import L from "leaflet";
|
||||
import "leaflet/dist/leaflet.css";
|
||||
|
||||
const dataTourismsColumns = [
|
||||
"No",
|
||||
@@ -21,6 +23,7 @@ const dataTourismsColumns = [
|
||||
widht: "120px",
|
||||
formatter: function (cell, row) {
|
||||
const id = row.cells[11].data;
|
||||
const district = row.cells[4].data;
|
||||
const long = row.cells[9].data;
|
||||
const lat = row.cells[10].data;
|
||||
const model = "data/tourisms";
|
||||
@@ -32,7 +35,7 @@ const dataTourismsColumns = [
|
||||
<i class='bx bx-edit'></i></button>
|
||||
|
||||
<button class="btn btn-info me-2 btn-view"
|
||||
data-long="${long}" data-lat="${lat}">
|
||||
data-long="${long}" data-lat="${lat}" data-district="${district}">
|
||||
<i class='bx bx-map'></i></button>
|
||||
|
||||
<button class="btn btn-red btn-delete"
|
||||
@@ -74,24 +77,117 @@ document.addEventListener("DOMContentLoaded", () => {
|
||||
table.init();
|
||||
|
||||
// Event listener untuk tombol "View" yang memunculkan modal
|
||||
// document.addEventListener("click", function (e) {
|
||||
// if (e.target && e.target.classList.contains("btn-view")) {
|
||||
// const long = e.target.getAttribute("data-long");
|
||||
// const lat = e.target.getAttribute("data-lat");
|
||||
|
||||
// // Menyiapkan URL iframe dengan koordinat yang didapatkan
|
||||
// const iframeSrc = `https://www.google.com/maps?q=${lat},${long}&hl=es;z=14&output=embed`;
|
||||
|
||||
// // Menemukan modal dan iframe di dalam modal
|
||||
// const modal = document.querySelector(".modalGMaps");
|
||||
// const iframe = modal.querySelector("iframe");
|
||||
|
||||
// // Set src iframe untuk menampilkan peta dengan koordinat yang relevan
|
||||
// iframe.src = iframeSrc;
|
||||
|
||||
// // Menampilkan modal
|
||||
// var modalInstance = new bootstrap.Modal(modal);
|
||||
// modalInstance.show();
|
||||
// }
|
||||
// });
|
||||
|
||||
let map;
|
||||
let geoLayer;
|
||||
// Event listener untuk tombol "View" yang memunculkan modal dengan Leaflet
|
||||
document.addEventListener("click", function (e) {
|
||||
if (e.target && e.target.classList.contains("btn-view")) {
|
||||
const long = e.target.getAttribute("data-long");
|
||||
const lat = e.target.getAttribute("data-lat");
|
||||
const long = parseFloat(e.target.getAttribute("data-long"));
|
||||
const lat = parseFloat(e.target.getAttribute("data-lat"));
|
||||
const district = e.target.getAttribute("data-district");
|
||||
|
||||
// Menyiapkan URL iframe dengan koordinat yang didapatkan
|
||||
const iframeSrc = `https://www.google.com/maps?q=${lat},${long}&hl=es;z=14&output=embed`;
|
||||
|
||||
// Menemukan modal dan iframe di dalam modal
|
||||
const modal = document.querySelector(".modalGMaps");
|
||||
const iframe = modal.querySelector("iframe");
|
||||
|
||||
// Set src iframe untuk menampilkan peta dengan koordinat yang relevan
|
||||
iframe.src = iframeSrc;
|
||||
|
||||
// Menampilkan modal
|
||||
var modalInstance = new bootstrap.Modal(modal);
|
||||
modalInstance.show();
|
||||
|
||||
setTimeout(() => {
|
||||
if (!map) {
|
||||
map = L.map("map").setView([lat, long], 14);
|
||||
|
||||
// Tambahkan tile layer (peta dasar)
|
||||
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
|
||||
attribution: '© OpenStreetMap contributors'
|
||||
}).addTo(map);
|
||||
} else {
|
||||
map.setView([lat, long], 14);
|
||||
}
|
||||
|
||||
if (geoLayer) {
|
||||
map.removeLayer(geoLayer);
|
||||
}
|
||||
|
||||
// Tambahkan marker untuk lokasi
|
||||
L.marker([lat, long]).addTo(map)
|
||||
.bindPopup(`<b>${district}</b><br>Lat: ${lat}, Long: ${long}`)
|
||||
.openPopup();
|
||||
|
||||
// Tambahkan GeoJSON ke dalam peta
|
||||
fetch(`/storage/maps/tourisms/${district.toUpperCase()}.json`)
|
||||
.then((res) => res.json())
|
||||
.then((geojson) => {
|
||||
let colorMapping = {
|
||||
BJ: "rgb(235, 30, 30)",
|
||||
BA: "rgb(151, 219, 242)",
|
||||
CA: "rgb(70, 70, 165)",
|
||||
"P-2": "rgb(230, 255, 75)",
|
||||
HL: "rgb(50, 95, 40)",
|
||||
HPT: "rgb(75, 155, 55)",
|
||||
HP: "rgb(125, 180, 55)",
|
||||
W: "rgb(255, 165, 255)",
|
||||
PTL: "rgb(0, 255, 205)",
|
||||
"IK-2": "rgb(130, 185, 210)",
|
||||
"P-3": "rgb(175, 175, 55)",
|
||||
PS: "rgb(5, 215, 215)",
|
||||
PD: "rgb(235, 155, 60)",
|
||||
PK: "rgb(245, 155, 30)",
|
||||
HK: "rgb(155, 0, 255)",
|
||||
KPI: "rgb(105, 0, 0)",
|
||||
MBT: "rgb(95, 115, 145)",
|
||||
"P-4": "rgb(185, 235, 185)",
|
||||
TB: "rgb(70, 150, 255)",
|
||||
"P-1": "rgb(200, 245, 70)",
|
||||
TR: "rgb(215, 55, 0)",
|
||||
THR: "rgb(185, 165, 255)",
|
||||
TWA: "rgb(210, 190, 255)",
|
||||
};
|
||||
var geoLayer = L.geoJSON(geojson, {
|
||||
style: function (feature) {
|
||||
let htmlString = feature.properties.description.toString();
|
||||
let match = htmlString.match(
|
||||
/<td>Kode Zona<\/td>\s*<td>(.*?)<\/td>/
|
||||
);
|
||||
|
||||
let color_code = match[1];
|
||||
return {
|
||||
color: colorMapping[color_code],
|
||||
fillColor: colorMapping[color_code] || "#cccccc",
|
||||
fillOpacity: 0.6,
|
||||
weight: 1.5,
|
||||
};
|
||||
},
|
||||
onEachFeature: function(feature, layer) {
|
||||
if (feature.properties && feature.properties.name) {
|
||||
layer.bindPopup(feature.properties.name);
|
||||
}
|
||||
},
|
||||
}).addTo(map);
|
||||
map.fitBounds(geoLayer.getBounds());
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("Error loading GeoJSON:", error);
|
||||
});
|
||||
}, 500);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
@@ -39,14 +39,15 @@
|
||||
aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<iframe
|
||||
{{-- <iframe
|
||||
src=""
|
||||
width="100%"
|
||||
height="450"
|
||||
style="border:0;"
|
||||
allowfullscreen=""
|
||||
loading="lazy">
|
||||
</iframe>
|
||||
</iframe> --}}
|
||||
<div id="map" style="height: 400px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user