timeout fix

resources/views/menu_v1/reports/_trip_detail.blade.php

@@ -49,7 +49,7 @@
 				<p class="mb-0">{{$duration}}</p>	
 			</div>
 			<div class="col-12">
-				<div id="leafMap" style="height: 300px;"></div>
+				<div id="leafMap" style="height: 400px;"></div>
 			</div>
 			<div class="col-12">
 				<!-- <li class="list-group-item p-1 px-2">
@@ -111,7 +111,7 @@
 
 		setTimeout(() => {
 			map.invalidateSize();            // force Leaflet to recalc
-			map.fitBounds(polyline.getBounds());
+			// map.fitBounds(polyline.getBounds());
 		}, 200);
 
 		const linesData = (@json($list));
@@ -131,22 +131,119 @@
 			.map((point) => [point.latitude, point.longitude])
 
 		// // 4) Add polyline
-		const polyline = L.polyline(points)
-		const lines = L.Routing.control({
-			waypoints: points,
-			router: L.Routing.osrmv1({
-				serviceUrl: "https://brilianapps.britimorleste.tl:5001/route/v1",
-			}),
-			show: false,
-			itinerary: null, // 👈 completely removes the panel
-			addWaypoints: false, // ❌ prevent adding points by clicking
-			draggableWaypoints: false, // ❌ prevent dragging markers
-			routeWhileDragging: false, // optional: don’t reroute while dragging
-			createMarker: () => null,
-			lineOptions:{
-				styles: [{ color: "#2980B9", weight: 4, opacity: 0.8 }],
-			},
-		}).addTo(map)
+		// const polyline = L.polyline(points,{
+		// 	color: 'blue',
+		// 	weight: 3,
+		// 	opacity: 0.7,
+		// 	smoothFactor: 1
+		// }).addTo(map);
+
+		// const lines = L.Routing.control({
+		// 	waypoints: points,
+		// 	// router: L.Routing.osrmv1(),
+		// 	router: L.Routing.osrmv1({
+		// 		serviceUrl: "https://brilianapps.britimorleste.tl:5001/route/v1",
+		// 	}),
+		// 	show: false,
+		// 	itinerary: null, // 👈 completely removes the panel
+		// 	addWaypoints: false, // ❌ prevent adding points by clicking
+		// 	draggableWaypoints: false, // ❌ prevent dragging markers
+		// 	routeWhileDragging: false, // optional: don’t reroute while dragging
+		// 	createMarker: () => null,
+		// 	routingOptions: {
+		// 	radiuses: [100, 100] // tolerance in meters per waypoint
+		// 	},
+		// 	lineOptions:{
+		// 		styles: [{ color: "#C0392B", weight: 4, opacity: 0.7 }],
+		// 	},
+		// }).addTo(map)
+
+		function fetchOsrm(points) {
+            // balik koordinat: [lat, lon] -> [lon, lat]
+            const coords = points
+
+            // hints: N-1 semicolon
+            const hints = ";".repeat(points.length - 1);
+
+            const body = {
+                coordinates: coords,
+                overview: "false",
+                alternatives: "true",
+                steps: "true",
+                hints: hints
+            };
+
+            let config = {
+                method: 'post',
+                maxBodyLength: Infinity,
+                url: 'https://brilianapps.britimorleste.tl/osrm-backend/post-route/v1/driving/',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                data: body
+            };
+
+            return axios.request(config)
+                .then((response) => {
+                    // console.log(JSON.stringify(response.data));
+                    return response.data; // supaya bisa dipakai di luar
+                })
+                .catch((error) => {
+                    console.error("Error:", err.message);
+                    return null;
+                });
+
+        }
+
+        function decodeOSRMGeometry(encoded) {
+            const coordinates = [];
+            let index = 0,
+                lat = 0,
+                lng = 0;
+
+            while (index < encoded.length) {
+                let result = 1,
+                    shift = 0,
+                    b;
+                do {
+                    b = encoded.charCodeAt(index++) - 63 - 1;
+                    result += b << shift;
+                    shift += 5;
+                } while (b >= 0x1f);
+                lat += (result & 1 ? ~(result >> 1) : result >> 1);
+
+                result = 1;
+                shift = 0;
+                do {
+                    b = encoded.charCodeAt(index++) - 63 - 1;
+                    result += b << shift;
+                    shift += 5;
+                } while (b >= 0x1f);
+                lng += (result & 1 ? ~(result >> 1) : result >> 1);
+
+                coordinates.push([lat / 1e5, lng / 1e5]);
+            }
+
+            return coordinates;
+        }
+
+
+        fetchOsrm(points).then(osrm => {
+            if (!osrm) return console.log("OSRM gagal");
+
+            const coords = osrm.routes[0].legs.flatMap(leg =>
+                leg.steps.flatMap(step =>
+                    decodeOSRMGeometry(step.geometry)
+                )
+            );
+
+            L.polyline(coords, {
+                color: "#2980B9",
+                weight: 3,
+                opacity: 0.8
+            }).addTo(map);
+            map.fitBounds(coords.map(c => L.latLng(c[0], c[1])));
+        });
 
 
 		// start and finish point
@@ -164,8 +261,8 @@
 		})
 		L.marker(points[points.length - 1], {icon: finishIcon}).addTo(map)
 
-		// 5) Auto-fit map to polyline bounds
-		map.fitBounds(polyline.getBounds())
+		// // 5) Auto-fit map to polyline bounds
+		// map.fitBounds(polyline.getBounds())
 
 		// download pdf
 		$(document).on('click', '#btnDownloadReport', function () {