Add zoom buttons to the location view (#7482)

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",