diff --git a/public/leaflet/layers-2x.png b/public/leaflet/layers-2x.png
new file mode 100644
index 0000000..200c333
Binary files /dev/null and b/public/leaflet/layers-2x.png differ
diff --git a/public/leaflet/layers.png b/public/leaflet/layers.png
new file mode 100644
index 0000000..1a72e57
Binary files /dev/null and b/public/leaflet/layers.png differ
diff --git a/public/leaflet/marker-icon-2x.png b/public/leaflet/marker-icon-2x.png
new file mode 100644
index 0000000..88f9e50
Binary files /dev/null and b/public/leaflet/marker-icon-2x.png differ
diff --git a/public/leaflet/marker-icon.png b/public/leaflet/marker-icon.png
new file mode 100644
index 0000000..950edf2
Binary files /dev/null and b/public/leaflet/marker-icon.png differ
diff --git a/public/leaflet/marker-shadow.png b/public/leaflet/marker-shadow.png
new file mode 100644
index 0000000..9fd2979
Binary files /dev/null and b/public/leaflet/marker-shadow.png differ
diff --git a/resources/js/data/tourisms/data-tourisms.js b/resources/js/data/tourisms/data-tourisms.js
index 0106273..54d4d9f 100644
--- a/resources/js/data/tourisms/data-tourisms.js
+++ b/resources/js/data/tourisms/data-tourisms.js
@@ -44,9 +44,9 @@ const dataTourismsColumns = [
`
+ `;
}
-
+
// Tampilkan tombol Edit jika user punya akses update
if (canUpdate) {
hasPrivilege = true;
@@ -65,13 +65,17 @@ const dataTourismsColumns = [
`
+ `;
}
- actionButtons += '';
+ actionButtons += "";
// Jika tidak memiliki akses, tampilkan teks "No Privilege"
- return gridjs.html(hasPrivilege ? actionButtons : 'No Privilege');
- }
+ return gridjs.html(
+ hasPrivilege
+ ? actionButtons
+ : 'No Privilege'
+ );
+ },
},
];
@@ -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) => {
@@ -142,11 +155,14 @@ document.addEventListener("DOMContentLoaded", () => {
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);
+ L.tileLayer(
+ "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
+ {
+ attribution: "© 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(`${district}
Lat: ${lat}, Long: ${long}`)
+ L.marker([lat, long], { icon: customIcon })
+ .addTo(map)
+ .bindPopup(
+ `${district}
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(
- /Kode Zona<\/td>\s* | (.*?)<\/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(
+ / | Kode Zona<\/td>\s* | (.*?)<\/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);
}
});
|