Add zoom buttons to the location view

res/css/views/dialogs/_LocationViewDialog.scss

@@ -49,8 +49,48 @@ limitations under the License.
         }
     }
 
-    .mx_MLocationBody .mx_MLocationBody_map {
-        width: 80vw;
-        height: 80vh;
+    .mx_MLocationBody {
+        position: absolute;
+
+        .mx_MLocationBody_map {
+            width: 80vw;
+            height: 80vh;
+        }
+
+        .mx_MLocationBody_zoomButtons {
+            position: absolute;
+            display: grid;
+            grid-template-columns: auto;
+            grid-row-gap: 8px;
+
+            right: 24px;
+            bottom: 48px;
+
+            .mx_AccessibleButton {
+                background-color: $background;
+                box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.25);
+                border-radius: 4px;
+                width: 24px;
+                height: 24px;
+
+                .mx_MLocationBody_zoomButton {
+                    background-color: $primary-content;
+                    margin: 4px;
+                    width: 16px;
+                    height: 16px;
+                    mask-repeat: no-repeat;
+                    mask-size: contain;
+                    mask-position: center;
+                }
+
+                .mx_MLocationBody_plusButton {
+                    mask-image: url('$(res)/img/element-icons/plus-button.svg');
+                }
+
+                .mx_MLocationBody_minusButton {
+                    mask-image: url('$(res)/img/element-icons/minus-button.svg');
+                }
+            }
+        }
     }
 }

src/components/views/location/LocationViewDialog.tsx

@@ -33,11 +33,13 @@ interface IState {
 @replaceableComponent("views.location.LocationViewDialog")
 export default class LocationViewDialog extends React.Component<IProps, IState> {
     private coords: GeolocationCoordinates;
+    private map?: maplibregl.Map;
 
     constructor(props: IProps) {
         super(props);
 
         this.coords = parseGeoUri(locationEventGeoUri(this.props.mxEvent));
+        this.map = null;
         this.state = {
             error: undefined,
         };
@@ -48,7 +50,7 @@ export default class LocationViewDialog extends React.Component<IProps, IState>
             return;
         }
 
-        createMap(
+        this.map = createMap(
             this.coords,
             true,
             this.getBodyId(),
@@ -65,6 +67,14 @@ export default class LocationViewDialog extends React.Component<IProps, IState>
         return `mx_MLocationViewDialog_marker_${this.props.mxEvent.getId()}`;
     };
 
+    private onZoomIn = () => {
+        this.map?.zoomIn();
+    };
+
+    private onZoomOut = () => {
+        this.map?.zoomOut();
+    };
+
     render() {
         return (
             <BaseDialog
@@ -77,6 +87,9 @@ export default class LocationViewDialog extends React.Component<IProps, IState>
                     bodyId={this.getBodyId()}
                     markerId={this.getMarkerId()}
                     error={this.state.error}
+                    zoomButtons={true}
+                    onZoomIn={this.onZoomIn}
+                    onZoomOut={this.onZoomOut}
                 />
             </BaseDialog>
         );

src/components/views/messages/MLocationBody.tsx

@@ -29,6 +29,7 @@ import Modal from '../../../Modal';
 import LocationViewDialog from '../location/LocationViewDialog';
 import TooltipTarget from '../elements/TooltipTarget';
 import { Alignment } from '../elements/Tooltip';
+import AccessibleButton from '../elements/AccessibleButton';
 
 interface IState {
     error: Error;
@@ -89,7 +90,7 @@ export default class MLocationBody extends React.Component<IBodyProps, IState> {
         );
     };
 
-    render() {
+    render(): React.ReactElement<HTMLDivElement> {
         return <LocationBodyContent
             mxEvent={this.props.mxEvent}
             bodyId={this.getBodyId()}
@@ -108,9 +109,13 @@ interface ILocationBodyContentProps {
     error: Error;
     tooltip?: string;
     onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    zoomButtons?: boolean;
+    onZoomIn?: () => void;
+    onZoomOut?: () => void;
 }
 
-export function LocationBodyContent(props: ILocationBodyContentProps) {
+export function LocationBodyContent(props: ILocationBodyContentProps):
+        React.ReactElement<HTMLDivElement> {
     const mapDiv = <div
         id={props.bodyId}
         onClick={props.onClick}
@@ -152,6 +157,36 @@ export function LocationBodyContent(props: ILocationBodyContentProps) {
                 height="5"
             />
         </div>
+        {
+            props.zoomButtons
+                ? <ZoomButtons
+                    onZoomIn={props.onZoomIn}
+                    onZoomOut={props.onZoomOut}
+                />
+                : null
+        }
+    </div>;
+}
+
+interface IZoomButtonsProps {
+    onZoomIn: () => void;
+    onZoomOut: () => void;
+}
+
+function ZoomButtons(props: IZoomButtonsProps): React.ReactElement<HTMLDivElement> {
+    return <div className="mx_MLocationBody_zoomButtons">
+        <AccessibleButton
+            onClick={props.onZoomIn}
+            title={_t("Zoom in")}
+        >
+            <div className="mx_MLocationBody_zoomButton mx_MLocationBody_plusButton" />
+        </AccessibleButton>
+        <AccessibleButton
+            onClick={props.onZoomOut}
+            title={_t("Zoom out")}
+        >
+            <div className="mx_MLocationBody_zoomButton mx_MLocationBody_minusButton" />
+        </AccessibleButton>
     </div>;
 }
 

src/i18n/strings/en_EN.json

@@ -2093,6 +2093,8 @@
     "You sent a verification request": "You sent a verification request",
     "Expand map": "Expand map",
     "Failed to load map": "Failed to load map",
+    "Zoom in": "Zoom in",
+    "Zoom out": "Zoom out",
     "Vote not registered": "Vote not registered",
     "Sorry, your vote was not registered. Please try again.": "Sorry, your vote was not registered. Please try again.",
     "Final result based on %(count)s votes|other": "Final result based on %(count)s votes",
@@ -2201,8 +2203,6 @@
     "%(count)s members including %(commaSeparatedMembers)s|one": "%(commaSeparatedMembers)s",
     "%(count)s people you know have already joined|other": "%(count)s people you know have already joined",
     "%(count)s people you know have already joined|one": "%(count)s person you know has already joined",
-    "Zoom out": "Zoom out",
-    "Zoom in": "Zoom in",
     "Rotate Left": "Rotate Left",
     "Rotate Right": "Rotate Right",
     "Information": "Information",