Improve map markers

2 files changed, 11 insertions, 3 deletions

diff --git a/modern/src/other/EventPage.js b/modern/src/other/EventPage.js
index 9da8be79..8adc142c 100644
--- a/modern/src/other/EventPage.js
+++ b/modern/src/other/EventPage.js
@@ -13,6 +13,7 @@ import MapCamera from '../map/MapCamera';
 import MapPositions from '../map/MapPositions';
 import MapGeofence from '../map/MapGeofence';
 import StatusCard from '../common/components/StatusCard';
+import { formatNotificationTitle } from '../common/util/formatter';
 
 const useStyles = makeStyles(() => ({
   root: {
@@ -39,6 +40,13 @@ const EventPage = () => {
   const [position, setPosition] = useState();
   const [showCard, setShowCard] = useState(false);
 
+  const formatType = (event) => formatNotificationTitle(t, {
+    type: event.type,
+    attributes: {
+      alarms: event.attributes.alarm,
+    },
+  });
+
   const onMarkerClick = useCallback((positionId) => {
     setShowCard(!!positionId);
   }, [setShowCard]);
@@ -75,13 +83,13 @@ const EventPage = () => {
           <IconButton color="inherit" edge="start" sx={{ mr: 2 }} onClick={() => navigate('/')}>
             <ArrowBackIcon />
           </IconButton>
-          <Typography variant="h6">{t('positionEvent')}</Typography>
+          <Typography variant="h6">{formatType(event)}</Typography>
         </Toolbar>
       </AppBar>
       <div className={classes.mapContainer}>
         <MapView>
           <MapGeofence />
-          {position && <MapPositions positions={[position]} onClick={onMarkerClick} />}
+          {position && <MapPositions positions={[position]} onClick={onMarkerClick} titleField="fixTime" />}
         </MapView>
         {position && <MapCamera latitude={position.latitude} longitude={position.longitude} />}
         {position && showCard && (
diff --git a/modern/src/other/ReplayPage.js b/modern/src/other/ReplayPage.js
index ab549eba..8839138f 100644
--- a/modern/src/other/ReplayPage.js
+++ b/modern/src/other/ReplayPage.js
@@ -161,7 +161,7 @@ const ReplayPage = () => {
         <MapRoutePath positions={positions} />
         <MapRoutePoints positions={positions} onClick={onPointClick} />
         {index < positions.length && (
-          <MapPositions positions={[positions[index]]} onClick={onMarkerClick} />
+          <MapPositions positions={[positions[index]]} onClick={onMarkerClick} titleField="fixTime" />
         )}
       </MapView>
       <MapCamera positions={positions} />