diff --git a/app/web/static/geolocate.js b/app/web/static/geolocate.js index ebaad06..6a24bce 100644 --- a/app/web/static/geolocate.js +++ b/app/web/static/geolocate.js @@ -27,6 +27,26 @@ document.addEventListener('DOMContentLoaded', function() { } } + function formatAddress(item) { + if (!item.address) return item.display_name; + const addr = item.address; + let street = addr.road || addr.pedestrian || addr.cycleway || addr.footway || addr.street || ''; + let number = addr.house_number || ''; + let postcode = addr.postcode || ''; + let city = addr.city || addr.town || addr.village || addr.hamlet || addr.municipality || addr.county || ''; + // Build formatted string: Street Number, Postal code City + let address = ''; + if (street) address += street; + if (number) address += (address ? ' ' : '') + number; + if (postcode || city) { + address += (address ? ', ' : ''); + address += postcode; + if (postcode && city) address += ' '; + address += city; + } + return address; + } + function showSuggestions(inputId, suggestionsId, value) { var suggestionsBox = document.getElementById(suggestionsId); if (!value) { @@ -34,7 +54,7 @@ document.addEventListener('DOMContentLoaded', function() { suggestionsBox.style.display = 'none'; return; } - fetch('https://nominatim.openstreetmap.org/search?format=json&q=' + encodeURIComponent(value)) + fetch('https://nominatim.openstreetmap.org/search?format=json&addressdetails=1&q=' + encodeURIComponent(value)) .then(response => response.json()) .then(data => { suggestionsBox.innerHTML = ''; @@ -43,10 +63,11 @@ document.addEventListener('DOMContentLoaded', function() { var option = document.createElement('button'); option.type = 'button'; option.className = 'list-group-item list-group-item-action'; - option.textContent = item.display_name; + option.textContent = formatAddress(item); + option.title = item.display_name; // Show full address on hover option.onclick = function() { var input = document.getElementById(inputId); - input.value = item.display_name; + input.value = formatAddress(item); input.dataset.lat = item.lat; input.dataset.lon = item.lon; suggestionsBox.innerHTML = ''; diff --git a/app/web/static/index.html b/app/web/static/index.html index a0210a9..17a1c0a 100644 --- a/app/web/static/index.html +++ b/app/web/static/index.html @@ -1,10 +1,9 @@ - + - FreeMoto Web + FreeMoto Navigation -
-
-

FreeMoto Route Planner

-
+
+
+ 🏍️ + FreeMoto +
+ +
Route
- - + + + +
- - + + + +
-
- +
+
-
Route Options
-
- - -
-
- - -
-
- - -
-
- - -
-
- - +
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
-
- +
+ +
+ + +
-
- - +
+
diff --git a/app/web/static/route.js b/app/web/static/route.js index 442765d..1dff78c 100644 --- a/app/web/static/route.js +++ b/app/web/static/route.js @@ -47,7 +47,22 @@ document.addEventListener('DOMContentLoaded', function() { }) .then(response => response.json()) .then(data => { - var latlngs = decodePolyline6(data.trip.legs[0].shape); + var leg = data.trip && data.trip.legs && data.trip.legs[0]; + var infoCard = document.getElementById('routeInfoCard'); + if (leg && leg.summary && typeof leg.summary.length === 'number' && typeof leg.summary.time === 'number') { + var distanceKm = (leg.summary.length / 1000).toFixed(1); // meters to km + var durationMin = Math.round(leg.summary.time / 60); // seconds to minutes + var info = `Distance: ${distanceKm} km
+ Estimated Time: ${durationMin} min
+ Motorcycle Profile`; + infoCard.innerHTML = info; + infoCard.classList.remove('d-none'); + } else { + infoCard.innerHTML = `Route info unavailable.`; + infoCard.classList.remove('d-none'); + console.log('Valhalla response:', data); + } + var latlngs = decodePolyline6(leg.shape); if (routePolyline) { map.removeLayer(routePolyline); } @@ -63,6 +78,13 @@ document.addEventListener('DOMContentLoaded', function() { markers.push(marker); points.push(e.latlng); marker.bindPopup(points.length === 1 ? "Start" : "End").openPopup(); + + // Reverse geocode and fill address field + if (points.length === 1) { + reverseGeocode(e.latlng.lat, e.latlng.lng, 'sourceInput'); + } else if (points.length === 2) { + reverseGeocode(e.latlng.lat, e.latlng.lng, 'destInput'); + } } calculateRoute(); }); @@ -135,6 +157,15 @@ document.addEventListener('DOMContentLoaded', function() { map.removeLayer(routePolyline); routePolyline = null; } + // Clear address fields + var sourceInput = document.getElementById('sourceInput'); + var destInput = document.getElementById('destInput'); + sourceInput.value = ''; + destInput.value = ''; + delete sourceInput.dataset.lat; + delete sourceInput.dataset.lon; + delete destInput.dataset.lat; + delete destInput.dataset.lon; } // Make resetMarkers available globally @@ -168,4 +199,56 @@ document.addEventListener('DOMContentLoaded', function() { alert("Please enter valid addresses for both start and destination."); } }); + + function reverseGeocode(lat, lon, inputId) { + fetch(`https://nominatim.openstreetmap.org/reverse?format=json&lat=${lat}&lon=${lon}`) + .then(response => response.json()) + .then(data => { + var input = document.getElementById(inputId); + if (data && data.address) { + // Use the same format as your autocomplete + input.value = formatAddress(data); + } else { + input.value = `${lat}, ${lon}`; + } + input.dataset.lat = lat; + input.dataset.lon = lon; + }); + } + + function exportRouteAsGPX(latlngs) { + if (!latlngs || latlngs.length === 0) { + alert("No route to export."); + return; + } + let gpx = +` + + + FreeMoto Route + +${latlngs.map(pt => ` `).join('\n')} + + +`; + let blob = new Blob([gpx], {type: "application/gpx+xml"}); + let url = URL.createObjectURL(blob); + let a = document.createElement('a'); + a.href = url; + a.download = "freemoto-route.gpx"; + document.body.appendChild(a); + a.click(); + document.body.removeChild(a); + URL.revokeObjectURL(url); + } + + document.getElementById('exportGpxBtn').addEventListener('click', function() { + if (routePolyline) { + // routePolyline.getLatLngs() returns array of LatLng objects + let latlngs = routePolyline.getLatLngs().map(ll => [ll.lat, ll.lng]); + exportRouteAsGPX(latlngs); + } else { + alert("No route to export."); + } + }); }); \ No newline at end of file