fix failed build images from leaflet

resources/js/data/tourisms/data-tourisms.js

@@ -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", {
+                    L.tileLayer(
-                        attribution: '&copy; OpenStreetMap contributors'
+                        "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
-                    }).addTo(map);
+                        {
+                            attribution: "&copy; OpenStreetMap contributors",
+                        }
+                    ).addTo(map);
                 } else {
                     map.setView([lat, long], 14);
                 }
@@ -156,8 +172,11 @@ document.addEventListener("DOMContentLoaded", () => {
                 }
 
                 // 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();
 
                 // Tambahkan GeoJSON ke dalam peta
@@ -191,7 +210,8 @@ document.addEventListener("DOMContentLoaded", () => {
                         };
                         var geoLayer = L.geoJSON(geojson, {
                             style: function (feature) {
-                            let htmlString = feature.properties.description.toString();
+                                let htmlString =
+                                    feature.properties.description.toString();
                                 let match = htmlString.match(
                                     /<td>Kode Zona<\/td>\s*<td>(.*?)<\/td>/
                                 );
@@ -199,13 +219,17 @@ document.addEventListener("DOMContentLoaded", () => {
                                 let color_code = match[1];
                                 return {
                                     color: colorMapping[color_code],
-                                fillColor: colorMapping[color_code] || "#cccccc", 
+                                    fillColor:
+                                        colorMapping[color_code] || "#cccccc",
                                     fillOpacity: 0.6,
                                     weight: 1.5,
                                 };
                             },
                             onEachFeature: function (feature, layer) {
-                            if (feature.properties && feature.properties.name) {
+                                if (
+                                    feature.properties &&
+                                    feature.properties.name
+                                ) {
                                     layer.bindPopup(feature.properties.name);
                                 }
                             },