Add live location sharing

map/.env.development

@@ -8,3 +8,4 @@ REACT_APP_WEBSITE_NAME='Welcome to Local OsmAnd.'
 ; REACT_APP_OSM_GPX_URL='https://test.osmand.net'
 REACT_APP_MAX_APPROXIMATE_KM='100'
 REACT_APP_DEVEL_FEATURES='yes'
+REACT_APP_WS_URL='ws://localhost:8080/osmand-websocket'

map/.env.production

@@ -8,3 +8,4 @@ REACT_APP_GPX_API='https://maptile.osmand.net'
 REACT_APP_OSM_GPX_URL='https://test.osmand.net'
 REACT_APP_MAX_APPROXIMATE_KM='100'
 REACT_APP_DEVEL_FEATURES='no'
+REACT_APP_WS_URL='wss://osmand.net/osmand-websocket'

map/.env.staging

@@ -7,3 +7,4 @@ REACT_APP_USER_API_SITE=
 REACT_APP_GPX_API=
 REACT_APP_MAX_APPROXIMATE_KM='100'
 REACT_APP_DEVEL_FEATURES='yes'
+REACT_APP_WS_URL='wss://test.osmand.net/osmand-websocket'

map/package.json

@@ -10,6 +10,7 @@
         "@hello-pangea/dnd": "^15.0.0",
         "@mui/icons-material": "^5.8.3",
         "@mui/material": "^5.8.3",
+        "@stomp/stompjs": "^7.3.0",
         "@tiptap/pm": "^3.22.4",
         "@tiptap/react": "^3.22.4",
         "@tiptap/starter-kit": "^3.22.4",
@@ -57,7 +58,7 @@
     "scripts": {
         "start": "yarn generate-resources && react-scripts start",
         "start:mobile": "yarn generate-resources && HOST=0.0.0.0 react-scripts start",
-        "start:local": "yarn generate-resources && USE_LOCAL_API=yes react-scripts start",
+        "start:local": "yarn generate-resources && USE_LOCAL_API=yes REACT_APP_WS_URL=ws://localhost:8080/osmand-websocket react-scripts start",
         "start:fallback": "yarn generate-resources && USE_MAIN_API=yes react-scripts start",
         "build": "yarn generate-resources && react-scripts build",
         "build:staging": "yarn generate-resources && env-cmd -f .env.staging react-scripts build",

map/src/App.js

@@ -20,6 +20,7 @@ import {
     PLANROUTE_URL,
     SETTINGS_URL,
     TRACKS_URL,
+    LIVE_TRACKS_URL,
     VISIBLE_TRACKS_URL,
     WEATHER_URL,
     EXPLORE_URL,
@@ -167,6 +168,7 @@ const App = () => {
                                             },
                                         ],
                                     },
+                                    { path: LIVE_TRACKS_URL, element: <TracksMenu /> },
                                     { path: VISIBLE_TRACKS_URL, element: <VisibleTracks /> },
                                     {
                                         path: FAVORITES_URL,

map/src/context/AppContext.js

@@ -56,6 +56,8 @@ export const PREVIOUS_ROUTE_STORAGE_KEY = 'previousRoute';
 export const OBJECT_TYPE_TRAVEL = 'travel';
 export const OBJECT_TYPE_SHARE_FILE = 'share_file';
 
+export const LIVE_TRACKS_STORAGE_KEY = 'liveTranslations';
+
 export const MAX_RECENT_OBJS = 5;
 
 export const defaultConfigureMapStateValues = {
@@ -187,6 +189,21 @@ export const AppContextProvider = (props) => {
     const [fitBoundsShareTracks, setFitBoundsShareTracks] = useState(null);
 
     const [smartFoldersCache, setSmartFoldersCache] = useState(null);
+
+    // live tracks
+    const [liveTranslations, setLiveTranslations] = useState(() => {
+        try {
+            return JSON.parse(localStorage.getItem(LIVE_TRACKS_STORAGE_KEY)) ?? [];
+        } catch {
+            return [];
+        }
+    });
+    const [liveParticipants, setLiveParticipants] = useState({});
+    const [liveViewers, setLiveViewers] = useState({});
+    const [selectedLiveTranslation, setSelectedLiveTranslation] = useState(null);
+    const [followLiveLocation, setFollowLiveLocation] = useState(null);
+    const [myBroadcastTid, setMyBroadcastTid] = useState(null);
+    const [isMyBroadcastPaused, setIsMyBroadcastPaused] = useState(false);
     // selected track
     const [selectedGpxFile, setSelectedGpxFile] = useState({});
     const [unverifiedGpxFile, setUnverifiedGpxFile] = useState(null); // see Effect in LocalClientTrackLayer
@@ -739,6 +756,20 @@ export const AppContextProvider = (props) => {
                 setStopByUrl,
                 closeMapObj,
                 setCloseMapObj,
+                liveTranslations,
+                setLiveTranslations,
+                liveParticipants,
+                setLiveParticipants,
+                liveViewers,
+                setLiveViewers,
+                selectedLiveTranslation,
+                setSelectedLiveTranslation,
+                followLiveLocation,
+                setFollowLiveLocation,
+                myBroadcastTid,
+                setMyBroadcastTid,
+                isMyBroadcastPaused,
+                setIsMyBroadcastPaused,
                 saveTrackToCloud,
                 setSaveTrackToCloud,
                 selectedLocalTrackObj,

map/src/frame/components/titles/SubTitleMenu.jsx

@@ -2,12 +2,13 @@ import { MenuItem, Typography } from '@mui/material';
 import React from 'react';
 import styles from './titles.module.css';
 
-export default function SubTitleMenu({ text }) {
+export default function SubTitleMenu({ text, rightContent }) {
     return (
-        <MenuItem sx={{ pointerEvents: 'none' }} className={styles.subtitleItem}>
-            <Typography className={styles.subtitle} noWrap>
+        <MenuItem sx={{ pointerEvents: rightContent ? 'auto' : 'none' }} className={styles.subtitleItem}>
+            <Typography className={styles.subtitle} noWrap sx={{ flex: 1 }}>
                 {text}
             </Typography>
+            {rightContent}
         </MenuItem>
     );
 }

map/src/index.js

@@ -26,3 +26,9 @@ root.render(<App />);
 // to log results (for example: reportWebVitals(console.log))
 // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
 reportWebVitals();
+
+if (process.env.NODE_ENV === 'development') {
+    import('./test/liveTrackSimulator').then((sim) => {
+        globalThis.__liveTrackSim = sim;
+    });
+}

map/src/manager/GlobalManager.js

@@ -47,6 +47,7 @@ export const WEATHER_URL = 'weather/';
 export const WEATHER_FORECAST_URL = 'forecast/';
 
 export const TRACKS_URL = 'mydata/tracks/';
+export const LIVE_TRACKS_URL = 'live/';
 export const VISIBLE_TRACKS_URL = 'visible-tracks/';
 
 export const FAVORITES_URL = 'mydata/favorites/';

map/src/map/OsmAndMap.jsx

@@ -25,13 +25,19 @@ import HeightmapLayer from './layers/HeightmapLayer';
 import TravelLayer from './layers/TravelLayer';
 import ShareFileLayer from './layers/ShareFileLayer';
 import TrackAnalyzerLayer from './layers/TrackAnalyzerLayer';
+import LiveTrackLayer from './layers/LiveTrackLayer';
 import { Box } from '@mui/material';
 import TransportStopsLayer from './layers/TransportStopsLayer';
+import { extractAndSaveLiveTrackKey } from '../util/livetracks/liveTrackUtils';
 
 function getInitialViewFromHash() {
     const hash = window.location.hash;
     if (!hash || hash.length < 2) return null;
-    const [zoomStr, latStr, lngStr] = hash.slice(1).split('/');
+    const raw = hash.slice(1);
+
+    if (extractAndSaveLiveTrackKey(raw)) return null;
+
+    const [zoomStr, latStr, lngStr] = raw.split('/');
     const zoom = Number.parseInt(zoomStr, 10);
     const lat = Number.parseFloat(latStr);
     const lng = Number.parseFloat(lngStr);
@@ -224,6 +230,7 @@ const OsmAndMap = ({ mainMenuWidth, menuInfoWidth }) => {
                 {routersReady && <NavigationLayer geocodingData={geocodingData} region={regionData} />}
                 <TrackAnalyzerLayer />
                 <ShareFileLayer />
+                <LiveTrackLayer />
                 <TravelLayer />
                 <FavoriteLayer />
                 <WeatherLayer />

map/src/map/layers/LiveTrackLayer.js

@@ -0,0 +1,137 @@
+import { useContext, useEffect, useRef, useState } from 'react';
+import { useMap } from 'react-leaflet';
+import L from 'leaflet';
+import AppContext from '../../context/AppContext';
+import { panToVisibleCenter } from './MapStateLayer';
+
+export default function LiveTrackLayer() {
+    const ctx = useContext(AppContext);
+    const map = useMap();
+
+    // { [translationId]: { [nickname]: { polyline, marker } } }
+    const layersRef = useRef({});
+    const [pannedFor, setPannedFor] = useState(null);
+
+    useEffect(() => {
+        const selectedTid = ctx.selectedLiveTranslation?.id ?? null;
+
+        // Remove layers for any translation that is not currently selected
+        Object.keys(layersRef.current).forEach((tid) => {
+            if (tid !== selectedTid) removeTidLayers(map, layersRef, tid);
+        });
+
+        if (!selectedTid) return;
+
+        const byNickname = ctx.liveParticipants?.[selectedTid];
+        if (!byNickname) return;
+
+        if (!layersRef.current[selectedTid]) layersRef.current[selectedTid] = {};
+
+        const activeNicks = new Set(Object.keys(byNickname));
+
+        // Remove layers for participants no longer present in selected translation
+        Object.keys(layersRef.current[selectedTid]).forEach((nick) => {
+            if (!activeNicks.has(nick)) {
+                const { polyline, marker } = layersRef.current[selectedTid][nick];
+                if (polyline) map.removeLayer(polyline);
+                if (marker) map.removeLayer(marker);
+                delete layersRef.current[selectedTid][nick];
+            }
+        });
+
+        Object.values(byNickname).forEach((participant) => {
+            const { nickname, color, locations } = participant;
+            if (!locations || locations.length === 0) return;
+
+            const latLngs = locations
+                .slice()
+                .reverse()
+                .map((l) => [l.lat, l.lon]);
+            const lastLoc = locations[0];
+
+            const existing = layersRef.current[selectedTid][nickname];
+
+            if (existing) {
+                existing.polyline.setLatLngs(latLngs);
+                existing.marker.setLatLng([lastLoc.lat, lastLoc.lon]);
+            } else {
+                const polyline = L.polyline(latLngs, { color, weight: 4, opacity: 0.85 }).addTo(map);
+                const iconHtml = `<div style="width:14px;height:14px;border-radius:50%;background:${color};border:2px solid #fff;box-shadow:0 0 4px rgba(0,0,0,.5)"></div>`;
+                const icon = L.divIcon({ html: iconHtml, className: '', iconSize: [14, 14], iconAnchor: [7, 7] });
+                const marker = L.marker([lastLoc.lat, lastLoc.lon], { icon }).addTo(map);
+                marker.bindTooltip(nickname, { permanent: false, direction: 'top', offset: [0, -10] });
+                layersRef.current[selectedTid][nickname] = { polyline, marker };
+            }
+        });
+    }, [ctx.liveParticipants, ctx.selectedLiveTranslation]);
+
+    // Center map when a translation is selected (if data already loaded)
+    useEffect(() => {
+        const translation = ctx.selectedLiveTranslation;
+        if (!translation) {
+            setPannedFor(null);
+            return;
+        }
+        if (pannedFor === translation.id) return;
+        const panned = panToTranslation(map, ctx.liveParticipants, translation.id, ctx.infoBlockWidth);
+        if (panned) setPannedFor(translation.id);
+    }, [ctx.selectedLiveTranslation]);
+
+    // Center map when data arrives for the selected translation (if not panned yet)
+    useEffect(() => {
+        const translation = ctx.selectedLiveTranslation;
+        if (!translation) return;
+        if (pannedFor === translation.id) return;
+        const panned = panToTranslation(map, ctx.liveParticipants, translation.id, ctx.infoBlockWidth);
+        if (panned) setPannedFor(translation.id);
+    }, [ctx.liveParticipants]);
+
+    // Pan to location when Follow button is clicked in context menu.
+    useEffect(() => {
+        if (!ctx.followLiveLocation) return;
+        const infoBlockWidthPx = Number.parseInt(String(ctx.infoBlockWidth), 10);
+        panToVisibleCenter(map, ctx.followLiveLocation, infoBlockWidthPx);
+        ctx.setFollowLiveLocation(null);
+    }, [ctx.followLiveLocation]);
+
+    // Cleanup on unmount
+    useEffect(() => {
+        return () => removeAllLayers(map, layersRef);
+    }, []);
+
+    return null;
+}
+
+function removeTidLayers(map, layersRef, tid) {
+    if (!layersRef.current[tid]) return;
+    Object.values(layersRef.current[tid]).forEach(({ polyline, marker }) => {
+        if (polyline) map.removeLayer(polyline);
+        if (marker) map.removeLayer(marker);
+    });
+    delete layersRef.current[tid];
+}
+
+function removeAllLayers(map, layersRef) {
+    Object.keys(layersRef.current).forEach((tid) => removeTidLayers(map, layersRef, tid));
+}
+
+function panToTranslation(map, liveParticipants, translationId, infoBlockWidth) {
+    const participants = liveParticipants?.[translationId];
+    if (!participants) return false;
+
+    const locs = Object.values(participants)
+        .map((p) => p.locations?.[0])
+        .filter(Boolean);
+
+    if (locs.length === 0) return false;
+
+    const infoBlockWidthPx = Number.parseInt(String(infoBlockWidth), 10);
+    if (locs.length === 1) {
+        panToVisibleCenter(map, locs[0], infoBlockWidthPx);
+    } else {
+        const bounds = L.latLngBounds(locs.map((l) => [l.lat, l.lon]));
+        map.fitBounds(bounds, { padding: [40, 40] });
+    }
+
+    return true;
+}

map/src/menu/MainMenu.js

@@ -69,6 +69,7 @@ import {
     PLANROUTE_URL,
     SETTINGS_URL,
     TRACKS_URL,
+    LIVE_TRACKS_URL,
     VISIBLE_TRACKS_URL,
     WEATHER_URL,
     TRAVEL_URL,
@@ -371,8 +372,14 @@ export default function MainMenu({
         }
     }, [ctx.selectedSort]);
 
+    function matchItemByUrl(pathname) {
+        return items.find(
+            (item) => pathname.startsWith(item.url) || item.otherUrls?.some((u) => pathname.startsWith(u))
+        );
+    }
+
     function selectMenuByUrl() {
-        const item = items.find((item) => location.pathname.startsWith(item.url));
+        const item = matchItemByUrl(location.pathname);
         if (item) {
             ctx.setInfoBlockWidth(MENU_INFO_OPEN_SIZE + 'px');
             return selectMenu({ item, openFromUrl: true });
@@ -390,7 +397,7 @@ export default function MainMenu({
         if (ctx.selectedSearchObj) {
             return;
         }
-        const matchedItem = items.find((item) => location.pathname.startsWith(item.url));
+        const matchedItem = matchItemByUrl(location.pathname);
         if (matchedItem && !isSelectedMenuItem(matchedItem)) {
             setMenuInfo(matchedItem.component);
             setSelectedType(matchedItem.type);
@@ -446,6 +453,7 @@ export default function MainMenu({
             show: true,
             id: MENU_IDS.tracks,
             url: MAIN_URL_WITH_SLASH + TRACKS_URL,
+            otherUrls: [MAIN_URL_WITH_SLASH + LIVE_TRACKS_URL],
         },
         {
             name: t('shared_string_my_favorites'),
@@ -886,7 +894,7 @@ export default function MainMenu({
 
     function navigateToUrl({ menu = null, isMain = false, params = null }) {
         if (menu) {
-            const isSubroute = location.pathname.startsWith(menu.url) && location.pathname !== menu.url;
+            const isSubroute = matchItemByUrl(location.pathname) === menu && location.pathname !== menu.url;
             if (isSubroute) {
                 return;
             }