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

fix failed build images from leaflet

Browse Source
This commit is contained in:
arifal
2025-03-07 16:41:52 +07:00
parent 098b4c605b
commit 755720bac9
6 changed files with 88 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/leaflet/layers-2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
public/leaflet/layers.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 696 B

BIN
public/leaflet/marker-icon-2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

BIN
public/leaflet/marker-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
public/leaflet/marker-shadow.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 618 B

152
resources/js/data/tourisms/data-tourisms.js
View File

@@ -44,9 +44,9 @@ const dataTourismsColumns = [
<button class="btn btn-info me-2 btn-view" <button class="btn btn-info me-2 btn-view"
data-long="${long}" data-lat="${lat}" data-district="${district}"> data-long="${long}" data-lat="${lat}" data-district="${district}">
<i class='bx bx-map'></i> <i class='bx bx-map'></i>
</button>` </button>`;
} }
// Tampilkan tombol Edit jika user punya akses update // Tampilkan tombol Edit jika user punya akses update
if (canUpdate) { if (canUpdate) {
hasPrivilege = true; hasPrivilege = true;
@@ -65,13 +65,17 @@ const dataTourismsColumns = [
<button class="btn btn-red btn-delete" <button class="btn btn-red btn-delete"
data-id="${id}"> data-id="${id}">
<i class='bx bxs-trash'></i> <i class='bx bxs-trash'></i>
</button>` </button>`;
} }
actionButtons += '</div>'; actionButtons += "</div>";
// Jika tidak memiliki akses, tampilkan teks "No Privilege" // Jika tidak memiliki akses, tampilkan teks "No Privilege"
return gridjs.html(hasPrivilege ? actionButtons : '<span class="text-muted">No Privilege</span>'); return gridjs.html(
} hasPrivilege
? actionButtons
: '<span class="text-muted">No Privilege</span>'
);
},
}, },
]; ];
@@ -82,6 +86,15 @@ document.addEventListener("DOMContentLoaded", () => {
`${GlobalConfig.apiHost}`, `${GlobalConfig.apiHost}`,
dataTourismsColumns dataTourismsColumns
); );
const customIcon = new L.Icon({
iconUrl: "/leaflet/marker-icon.png",
iconRetinaUrl: "leaflet/marker-icon-2x.png",
shadowUrl: "/leaflet/marker-shadow.png",
iconSize: [25, 41],
iconAnchor: [12, 41],
popupAnchor: [1, -34],
shadowSize: [41, 41],
});
table.processData = function (data) { table.processData = function (data) {
return data.data.map((item) => { return data.data.map((item) => {
@@ -142,11 +155,14 @@ document.addEventListener("DOMContentLoaded", () => {
setTimeout(() => { setTimeout(() => {
if (!map) { if (!map) {
map = L.map("map").setView([lat, long], 14); map = L.map("map").setView([lat, long], 14);
// Tambahkan tile layer (peta dasar) // Tambahkan tile layer (peta dasar)
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", { L.tileLayer(
attribution: '&copy; OpenStreetMap contributors' "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
}).addTo(map); {
attribution: "&copy; OpenStreetMap contributors",
}
).addTo(map);
} else { } else {
map.setView([lat, long], 14); map.setView([lat, long], 14);
} }
@@ -156,65 +172,73 @@ document.addEventListener("DOMContentLoaded", () => {
} }
// Tambahkan marker untuk lokasi // Tambahkan marker untuk lokasi
L.marker([lat, long]).addTo(map) L.marker([lat, long], { icon: customIcon })
.bindPopup(`<b>${district}</b><br>Lat: ${lat}, Long: ${long}`) .addTo(map)
.bindPopup(
`<b>${district}</b><br>Lat: ${lat}, Long: ${long}`
)
.openPopup(); .openPopup();
// Tambahkan GeoJSON ke dalam peta // Tambahkan GeoJSON ke dalam peta
fetch(`/storage/maps/tourisms/${district.toUpperCase()}.json`) fetch(`/storage/maps/tourisms/${district.toUpperCase()}.json`)
.then((res) => res.json()) .then((res) => res.json())
.then((geojson) => { .then((geojson) => {
let colorMapping = { let colorMapping = {
BJ: "rgb(235, 30, 30)", BJ: "rgb(235, 30, 30)",
BA: "rgb(151, 219, 242)", BA: "rgb(151, 219, 242)",
CA: "rgb(70, 70, 165)", CA: "rgb(70, 70, 165)",
"P-2": "rgb(230, 255, 75)", "P-2": "rgb(230, 255, 75)",
HL: "rgb(50, 95, 40)", HL: "rgb(50, 95, 40)",
HPT: "rgb(75, 155, 55)", HPT: "rgb(75, 155, 55)",
HP: "rgb(125, 180, 55)", HP: "rgb(125, 180, 55)",
W: "rgb(255, 165, 255)", W: "rgb(255, 165, 255)",
PTL: "rgb(0, 255, 205)", PTL: "rgb(0, 255, 205)",
"IK-2": "rgb(130, 185, 210)", "IK-2": "rgb(130, 185, 210)",
"P-3": "rgb(175, 175, 55)", "P-3": "rgb(175, 175, 55)",
PS: "rgb(5, 215, 215)", PS: "rgb(5, 215, 215)",
PD: "rgb(235, 155, 60)", PD: "rgb(235, 155, 60)",
PK: "rgb(245, 155, 30)", PK: "rgb(245, 155, 30)",
HK: "rgb(155, 0, 255)", HK: "rgb(155, 0, 255)",
KPI: "rgb(105, 0, 0)", KPI: "rgb(105, 0, 0)",
MBT: "rgb(95, 115, 145)", MBT: "rgb(95, 115, 145)",
"P-4": "rgb(185, 235, 185)", "P-4": "rgb(185, 235, 185)",
TB: "rgb(70, 150, 255)", TB: "rgb(70, 150, 255)",
"P-1": "rgb(200, 245, 70)", "P-1": "rgb(200, 245, 70)",
TR: "rgb(215, 55, 0)", TR: "rgb(215, 55, 0)",
THR: "rgb(185, 165, 255)", THR: "rgb(185, 165, 255)",
TWA: "rgb(210, 190, 255)", TWA: "rgb(210, 190, 255)",
}; };
var geoLayer = L.geoJSON(geojson, { var geoLayer = L.geoJSON(geojson, {
style: function (feature) { style: function (feature) {
let htmlString = feature.properties.description.toString(); let htmlString =
let match = htmlString.match( feature.properties.description.toString();
/<td>Kode Zona<\/td>\s*<td>(.*?)<\/td>/ let match = htmlString.match(
); /<td>Kode Zona<\/td>\s*<td>(.*?)<\/td>/
);
let color_code = match[1]; let color_code = match[1];
return { return {
color: colorMapping[color_code], color: colorMapping[color_code],
fillColor: colorMapping[color_code] || "#cccccc", fillColor:
fillOpacity: 0.6, colorMapping[color_code] || "#cccccc",
weight: 1.5, fillOpacity: 0.6,
}; weight: 1.5,
}, };
onEachFeature: function(feature, layer) { },
if (feature.properties && feature.properties.name) { onEachFeature: function (feature, layer) {
layer.bindPopup(feature.properties.name); if (
} feature.properties &&
}, feature.properties.name
}).addTo(map); ) {
map.fitBounds(geoLayer.getBounds()); layer.bindPopup(feature.properties.name);
}) }
.catch((error) => { },
console.error("Error loading GeoJSON:", error); }).addTo(map);
}); map.fitBounds(geoLayer.getBounds());
})
.catch((error) => {
console.error("Error loading GeoJSON:", error);
});
}, 500); }, 500);
} }
}); });