Skip to content

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)

  1. PATCH /api/routes/:id/rename: New endpoint to rename a route.
  2. Nearest Point Finder: A pure TS spatial utility findClosestNodeIndex(clickLngLat, polylineCoords) to match a map click to the exact array index.
  3. GPX Generator: A utility to convert [lng, lat] arrays into standard XML .gpx format.

🎨 3. Frontend Refactor (apps/web)

  1. Remove Sliders: Rip out the dual-thumb slider UI created in UC-029.2.
  2. Context Menu Engine:
    • Intercept MapLibre contextmenu events.
    • Use map.queryRenderedFeatures to 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 ].
  3. 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 /crop endpoint) and [ ❌ Discard ].