Conversation
There was a problem hiding this comment.
Pull request overview
This PR introduces “Live Tracks” (live location sharing) to the OsmAnd Web map UI, including encrypted location payloads, STOMP/WebSocket connectivity, and new menu/map-layer integrations for viewing participants in real time.
Changes:
- Added live-track encryption + share-link utilities (key-in-fragment flow with sessionStorage handoff).
- Implemented STOMP client hook for subscribing/broadcasting live locations, plus menu UI for creating/bookmarking live tracks.
- Added a Leaflet map layer to render live participant tracks/markers and basic live-track analytics in the context menu.
Reviewed changes
Copilot reviewed 28 out of 30 changed files in this pull request and generated 12 comments.
Show a summary per file
| File | Description |
|---|---|
| map/yarn.lock | Locks new STOMP dependency. |
| map/package.json | Adds @stomp/stompjs + sets WS URL for start:local. |
| map/.env.development | Adds REACT_APP_WS_URL for dev. |
| map/.env.staging | Adds REACT_APP_WS_URL for staging. |
| map/.env.production | Adds REACT_APP_WS_URL for production. |
| map/src/manager/GlobalManager.js | Adds LIVE_TRACKS_URL route constant. |
| map/src/App.js | Registers /map/live/ route. |
| map/src/menu/MainMenu.js | Treats /map/live/ as part of Tracks menu selection. |
| map/src/context/AppContext.js | Adds live-tracks state (translations/participants/viewers/etc.). |
| map/src/util/livetracks/liveTrackUtils.js | Builds share URL + extracts fragment key into sessionStorage. |
| map/src/util/livetracks/liveTrackCrypto.js | AES-GCM encrypt/decrypt helpers + key/id derivation. |
| map/src/util/hooks/live/useLiveTrackUrl.js | Reads live-track URL params + restores fragment key from sessionStorage. |
| map/src/util/hooks/live/useLiveTracking.js | STOMP connection, subscriptions, geo broadcasting, state updates. |
| map/src/menu/tracks/TracksMenu.jsx | Integrates Live Tracks folder/context menu into Tracks panel. |
| map/src/menu/tracks/liveTrack/LiveTrackGroup.jsx | Adds Live Tracks entry in Tracks root list. |
| map/src/menu/tracks/liveTrack/LiveTrackFolder.jsx | Live Tracks list UI + create dialog entry point. |
| map/src/menu/tracks/liveTrack/LiveTrackItem.jsx | Live track list item UI + actions menu integration. |
| map/src/menu/tracks/liveTrack/CreateLiveTrackDialog.jsx | Creates a live translation, shows/copies share link. |
| map/src/menu/tracks/liveTrack/LiveTrackContextMenu.jsx | Shows participant cards + intervals/elevation analytics + follow action. |
| map/src/menu/actions/LiveTrackItemActions.jsx | Actions menu for live-track item (start/pause/copy/delete/etc.). |
| map/src/map/OsmAndMap.jsx | Loads LiveTrackLayer + extracts live-track key from URL hash. |
| map/src/map/layers/LiveTrackLayer.js | Renders polylines/markers for participants + panning/follow logic. |
| map/src/menu/analyzer/util/SegmentColorizer.js | Exports getColorByIndex for live-tracks coloring. |
| map/src/frame/components/titles/SubTitleMenu.jsx | Adds rightContent slot (used by live-track participant cards). |
| map/src/menu/trackfavmenu.module.css | Adds styles for live-track UI and tweaks menu button container layout. |
| map/src/resources/translations/en/web-translation.json | Adds Live Tracks strings. |
| map/src/assets/icons/ic_action_folder_location.svg | Adds Live Tracks folder icon asset. |
| map/src/setupProxy.js | Adds WS proxy routing for /osmand-websocket. |
| map/src/index.js | Exposes live-track simulator in dev builds. |
| map/src/test/liveTrackSimulator.js | Adds dev-only simulator tool for generating live points. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| // Sync the selected translation from the URL (?tid=...#<key>), restoring the AES key the map | ||
| // stashed in sessionStorage before leaflet-hash cleared the fragment. |
There was a problem hiding this comment.
Think about implementing a URL scheme with a hash saved in the query string. For example, /map/live/?hash=17/50/40&tid=xxx#key may store/clear the key and finally restore the leaflet hash to keep saved map zoom/lat/lon.
| const key = keysRef.current[tid]; | ||
| if (!key) continue; | ||
| encryptLocation(key, locationData) | ||
| .then((encData) => { | ||
| apiPost( | ||
| '/mapapi/translation/msg', | ||
| `translationId=${encodeURIComponent(tid)}&encryptedData=${encodeURIComponent(encData)}`, | ||
| { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } } | ||
| ).catch(() => {}); | ||
| }) | ||
| .catch(() => {}); | ||
| } |
There was a problem hiding this comment.
- Add throttling (limit not to send POST queries too often, at least 1 per second)
- Add reaction on HTTP errors (at least, console.info, at most increase throttling on errors)
- The same points should be considered in Android code (which is even more important to avoid server overloads).
No description provided.