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

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

@@ -44,7 +44,7 @@ const dataTourismsColumns = [
<button class="btn btn-info me-2 btn-view"
data-long="${long}" data-lat="${lat}" data-district="${district}">
<i class='bx bx-map'></i>
</button>`
</button>`;
}
// Tampilkan tombol Edit jika user punya akses update
@@ -65,13 +65,17 @@ const dataTourismsColumns = [
<button class="btn btn-red btn-delete"
data-id="${id}">
<i class='bx bxs-trash'></i>
</button>`
</button>`;
}
actionButtons += '</div>';
actionButtons += "</div>";
// 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}`,
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) {
return data.data.map((item) => {
@@ -144,9 +157,12 @@ document.addEventListener("DOMContentLoaded", () => {
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: '&copy; OpenStreetMap contributors'
}).addTo(map);
L.tileLayer(
"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
{
attribution: "&copy; OpenStreetMap contributors",
}
).addTo(map);
} else {
map.setView([lat, long], 14);
}
@@ -156,65 +172,73 @@ document.addEventListener("DOMContentLoaded", () => {
}
// Tambahkan marker untuk lokasi
L.marker([lat, long]).addTo(map)
.bindPopup(`<b>${district}</b><br>Lat: ${lat}, Long: ${long}`)
L.marker([lat, long], { icon: customIcon })
.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>/
);
.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);
});
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);
}
});