Appearance
UC-029.3: Map Engine — Context Menu Refactor & GPX Export
📖 1. Context & Problem Statement
The backend math (Haversine) and RAM optimization (Douglas-Peucker) from UC-029.2 are working perfectly. However, the crop UI for long routes needs a clearer map-first interaction model. We need to refactor the Map UI to use a professional "Context Menu" (Right-Click) pattern for spatial interactions, add Start/End visual markers, and introduce .gpx file exporting.
⚙️ 2. Backend & Utilities (apps/api & packages/shared)
PATCH /api/routes/:id/rename: New endpoint to rename a route.- Nearest Point Finder: A pure TS spatial utility
findClosestNodeIndex(clickLngLat, polylineCoords)to match a map click to the exact array index. - GPX Generator: A utility to convert
[lng, lat]arrays into standard XML.gpxformat.
🎨 3. Frontend Refactor (apps/web)
- Remove Sliders: Rip out the dual-thumb slider UI created in UC-029.2.
- Context Menu Engine:
- Intercept MapLibre
contextmenuevents. - Use
map.queryRenderedFeaturesto detect clicks on the route line. - If Route Clicked: Open floating HTML menu
[ ✂️ Set as New Start ]&[ ✂️ Set as New End ]. Clicking these triggers the Nearest Point Finder, visually trims the local line layer, and shifts the HUD into Edit Mode. - If Empty Map:
[ 📋 Copy Coordinates ].
- Intercept MapLibre
- Minimal Route HUD:
- Float over the map: Route Name, Distance,
[ ⬇️ Export GPX ],[ ✖ Close ]. - Edit Mode: If cropped via Context Menu, show
[ ✅ Save Crop ](dispatches the existing/cropendpoint) and[ ❌ Discard ].
- Float over the map: Route Name, Distance,