timeout fix
This commit is contained in:
@ -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 () {
|
||||
|
||||
@ -49,8 +49,8 @@
|
||||
<div class="form-group">
|
||||
<label class="text-muted">From</label>
|
||||
<!-- default today -->
|
||||
<!-- <input class="form-control" id="tgl0" value="25-08-2025 00:00"> -->
|
||||
<input class="form-control" id="tgl0" value="{{ date('d-m-Y 00:00') }}">
|
||||
<input class="form-control" id="tgl0" value="25-08-2025 00:00">
|
||||
<!-- <input class="form-control" id="tgl0" value="{{ date('d-m-Y 00:00') }}"> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
@ -201,6 +201,7 @@
|
||||
<script src="https://unpkg.com/leaflet-routing-machine@3.2.12/dist/leaflet-routing-machine.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
|
||||
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
Reference in New Issue
Block a user