Display the user's avatar when they shared their location (#7424)

Author: andybalaam

res/css/views/messages/_MLocationBody.scss

@@ -14,9 +14,30 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_MLocationBody_map {
-    width: 450px;
-    height: 300px;
+.mx_MLocationBody {
+    .mx_MLocationBody_map {
+        width: 450px;
+        height: 300px;
 
-    border-radius: $timeline-image-border-radius;
+        border-radius: $timeline-image-border-radius;
+    }
+
+    .mx_MLocationBody_markerBorder {
+        width: 31px;
+        height: 31px;
+        border-radius: 50%;
+        background-color: $accent;
+        filter: drop-shadow(0px 3px 5px rgba(0, 0, 0, 0.2));
+
+        .mx_BaseAvatar {
+            margin-top: 2px;
+            margin-left: 2px;
+        }
+    }
+
+    .mx_MLocationBody_pointer {
+        position: absolute;
+        bottom: -3px;
+        left: 12px;
+    }
 }

res/img/location/pointer.svg

@@ -23,6 +23,7 @@ import SdkConfig from '../../../SdkConfig';
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 import { IBodyProps } from "./IBodyProps";
 import { _t } from '../../../languageHandler';
+import MemberAvatar from '../avatars/MemberAvatar';
 
 interface IState {
     error: Error;
@@ -32,7 +33,6 @@ interface IState {
 export default class MLocationBody extends React.Component<IBodyProps, IState> {
     private map: maplibregl.Map;
     private coords: GeolocationCoordinates;
-    private description: string;
 
     constructor(props: IBodyProps) {
         super(props);
@@ -49,8 +49,6 @@ export default class MLocationBody extends React.Component<IBodyProps, IState> {
         this.state = {
             error: undefined,
         };
-
-        this.description = loc?.description ?? content['body'];
     }
 
     componentDidMount() {
@@ -65,13 +63,12 @@ export default class MLocationBody extends React.Component<IBodyProps, IState> {
             zoom: 13,
         });
 
-        new maplibregl.Popup({
-            closeButton: false,
-            closeOnClick: false,
-            closeOnMove: false,
+        new maplibregl.Marker({
+            element: document.getElementById(this.getMarkerId()),
+            anchor: 'bottom',
+            offset: [0, -1],
         })
             .setLngLat(coordinates)
-            .setHTML(this.description)
             .addTo(this.map);
 
         this.map.on('error', (e)=>{
@@ -88,6 +85,10 @@ export default class MLocationBody extends React.Component<IBodyProps, IState> {
         return `mx_MLocationBody_${this.props.mxEvent.getId()}`;
     };
 
+    private getMarkerId = () => {
+        return `mx_MLocationBody_marker_${this.props.mxEvent.getId()}`;
+    };
+
     render() {
         const error = this.state.error ?
             <div className="mx_EventTile_tileError mx_EventTile_body">
@@ -97,6 +98,22 @@ export default class MLocationBody extends React.Component<IBodyProps, IState> {
         return <div className="mx_MLocationBody">
             <div id={this.getBodyId()} className="mx_MLocationBody_map" />
             { error }
+            <div className="mx_MLocationBody_marker" id={this.getMarkerId()}>
+                <div className="mx_MLocationBody_markerBorder">
+                    <MemberAvatar
+                        member={this.props.mxEvent.sender}
+                        width={27}
+                        height={27}
+                        viewUserOnClick={false}
+                    />
+                </div>
+                <img
+                    className="mx_MLocationBody_pointer"
+                    src={require("../../../../res/img/location/pointer.svg")}
+                    width="9"
+                    height="5"
+                />
+            </div>
         </div>;
     }
 }