From aebdf21ac7da374cf937f204b79c2845b0951570 Mon Sep 17 00:00:00 2001 From: Dennis Luxen Date: Mon, 1 Jun 2026 22:47:08 +0200 Subject: [PATCH 1/2] feat: add OSRM Trip HTTP API web demo Add an interactive MapLibre-based visualization for the OSRM Trip API that allows adding, dragging, and removing up to 25 points, computing an optimized round trip route with live map rendering. --- trip.html | 599 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 599 insertions(+) create mode 100644 trip.html diff --git a/trip.html b/trip.html new file mode 100644 index 0000000..b6f45fa --- /dev/null +++ b/trip.html @@ -0,0 +1,599 @@ + + + + + + OSRM Trip Demo + + + + + +
+
+ +
+ + + + From bec1c6f122e7eac71c5484fe7092f1c7a9909847 Mon Sep 17 00:00:00 2001 From: Dennis Luxen Date: Mon, 1 Jun 2026 23:17:47 +0200 Subject: [PATCH 2/2] fix: address PR #40 review feedback - Use public router instance as default (https://router.project-osrm.org) - Move buildTripUrl() inside try block for proper error handling - Guard error.message with instanceof Error check - Replace innerHTML with safe DOM node creation - Add explicit check for empty base URL before constructing URL - Remove redundant localStorage.setItem in change handler --- trip.html | 19 +++++++++++++------ 1 file changed, 13 insertions(+), 6 deletions(-) diff --git a/trip.html b/trip.html index b6f45fa..343e77f 100644 --- a/trip.html +++ b/trip.html @@ -183,7 +183,7 @@

OSRM Trip Demo

- +
@@ -445,7 +445,10 @@

OSRM Trip Demo

const meta = document.createElement('div'); meta.className = 'meta'; - meta.innerHTML = `${labels.title}${labels.coords}
${labels.extra}`; + + const strong = document.createElement('strong'); + strong.textContent = labels.title; + meta.append(strong, labels.coords, document.createElement('br'), labels.extra); const remove = document.createElement('button'); remove.className = 'danger'; @@ -523,6 +526,9 @@

OSRM Trip Demo

function buildTripUrl() { const server = getServerUrl(); + if (!server) { + throw new Error('Please enter a valid osrm-routed base URL.'); + } const coordinates = state.points.map((point) => `${point.lng},${point.lat}`).join(';'); const url = new URL(`/trip/v1/driving/${coordinates}`, server); url.searchParams.set('roundtrip', 'true'); @@ -540,10 +546,10 @@

OSRM Trip Demo

} const requestId = ++state.tripRequestId; - const url = buildTripUrl(); - setStatus(`Requesting trip from ${url.origin} ...`); try { + const url = buildTripUrl(); + setStatus(`Requesting trip from ${url.origin} ...`); const response = await fetch(url, { headers: { Accept: 'application/json' } }); if (!response.ok) { throw new Error(`HTTP ${response.status}`); @@ -575,14 +581,15 @@

OSRM Trip Demo

setStatus(`Trip computed for ${state.points.length} locations.`); } catch (error) { clearRoute(); - setStatus(`Trip error: ${error.message}`); + const message = error instanceof Error ? error.message : String(error); + setStatus(`Trip error: ${message}`); } } elements.clear.addEventListener('click', clearPoints); elements.refresh.addEventListener('click', runTrip); elements.serverUrl.addEventListener('change', () => { - localStorage.setItem('osrmTripServerUrl', getServerUrl()); + getServerUrl(); scheduleTrip(); });