Look up tile server info in homeserver's .well-known area

src/components/views/location/LocationPicker.tsx

@@ -18,6 +18,7 @@ import React, { SyntheticEvent } from 'react';
 import maplibregl from 'maplibre-gl';
 import { logger } from "matrix-js-sdk/src/logger";
 import { RoomMember } from 'matrix-js-sdk/src/models/room-member';
+import { IClientWellKnown } from 'matrix-js-sdk/src/client';
 
 import DialogButtons from "../elements/DialogButtons";
 import { _t } from '../../../languageHandler';
@@ -27,6 +28,7 @@ import MatrixClientContext from '../../../contexts/MatrixClientContext';
 import Modal from '../../../Modal';
 import ErrorDialog from '../dialogs/ErrorDialog';
 import { findMapStyleUrl } from '../messages/MLocationBody';
+import { tileServerFromWellKnown } from '../../../utils/WellKnownUtils';
 
 interface IProps {
     sender: RoomMember;
@@ -51,9 +53,9 @@ interface IState {
 class LocationPicker extends React.Component<IProps, IState> {
     public static contextType = MatrixClientContext;
     public context!: React.ContextType<typeof MatrixClientContext>;
-    private map: maplibregl.Map;
-    private geolocate: maplibregl.GeolocateControl;
-    private marker: maplibregl.Marker;
+    private map?: maplibregl.Map;
+    private geolocate?: maplibregl.GeolocateControl;
+    private marker?: maplibregl.Marker;
 
     constructor(props: IProps) {
         super(props);
@@ -62,13 +64,18 @@ class LocationPicker extends React.Component<IProps, IState> {
             position: undefined,
             error: undefined,
         };
+        this.map = null;
+        this.geolocate = null;
+        this.marker = null;
     }
 
     private getMarkerId = () => {
         return "mx_MLocationPicker_marker";
     };
 
     componentDidMount() {
+        this.context.on("WellKnown.client", this.updateStyleUrl);
+
         try {
             this.map = new maplibregl.Map({
                 container: 'mx_LocationPicker_map',
@@ -130,11 +137,19 @@ class LocationPicker extends React.Component<IProps, IState> {
 
     componentWillUnmount() {
         this.geolocate?.off('geolocate', this.onGeolocate);
+        this.context.off("WellKnown.client", this.updateStyleUrl);
     }
 
+    private updateStyleUrl = (clientWellKnown: IClientWellKnown) => {
+        const style = tileServerFromWellKnown(clientWellKnown)?.["map_style_url"];
+        if (style) {
+            this.map?.setStyle(style);
+        }
+    };
+
     private onGeolocate = (position: GeolocationPosition) => {
         this.setState({ position });
-        this.marker.setLngLat(
+        this.marker?.setLngLat(
             new maplibregl.LngLat(
                 position.coords.longitude,
                 position.coords.latitude,

src/components/views/location/LocationViewDialog.tsx

@@ -16,13 +16,16 @@ limitations under the License.
 
 import React from 'react';
 import { MatrixEvent } from 'matrix-js-sdk/src/models/event';
+import { IClientWellKnown, MatrixClient } from 'matrix-js-sdk/src/client';
 
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 import BaseDialog from "../dialogs/BaseDialog";
 import { IDialogProps } from "../dialogs/IDialogProps";
 import { createMap, LocationBodyContent, locationEventGeoUri, parseGeoUri } from '../messages/MLocationBody';
+import { tileServerFromWellKnown } from '../../../utils/WellKnownUtils';
 
 interface IProps extends IDialogProps {
+    matrixClient: MatrixClient;
     mxEvent: MatrixEvent;
 }
 
@@ -50,6 +53,8 @@ export default class LocationViewDialog extends React.Component<IProps, IState>
             return;
         }
 
+        this.props.matrixClient.on("WellKnown.client", this.updateStyleUrl);
+
         this.map = createMap(
             this.coords,
             true,
@@ -59,6 +64,17 @@ export default class LocationViewDialog extends React.Component<IProps, IState>
         );
     }
 
+    componentWillUnmount() {
+        this.props.matrixClient.off("WellKnown.client", this.updateStyleUrl);
+    }
+
+    private updateStyleUrl = (clientWellKnown: IClientWellKnown) => {
+        const style = tileServerFromWellKnown(clientWellKnown)?.["map_style_url"];
+        if (style) {
+            this.map?.setStyle(style);
+        }
+    };
+
     private getBodyId = () => {
         return `mx_LocationViewDialog_${this.props.mxEvent.getId()}`;
     };

src/components/views/messages/MLocationBody.tsx

@@ -24,6 +24,7 @@ import {
     ILocationContent,
     LOCATION_EVENT_TYPE,
 } from 'matrix-js-sdk/src/@types/location';
+import { IClientWellKnown } from 'matrix-js-sdk/src/client';
 
 import SdkConfig from '../../../SdkConfig';
 import { replaceableComponent } from "../../../utils/replaceableComponent";
@@ -35,17 +36,21 @@ import LocationViewDialog from '../location/LocationViewDialog';
 import TooltipTarget from '../elements/TooltipTarget';
 import { Alignment } from '../elements/Tooltip';
 import AccessibleButton from '../elements/AccessibleButton';
-import { getTileServerWellKnown } from '../../../utils/WellKnownUtils';
+import { getTileServerWellKnown, tileServerFromWellKnown } from '../../../utils/WellKnownUtils';
+import MatrixClientContext from '../../../contexts/MatrixClientContext';
 
 interface IState {
     error: Error;
 }
 
 @replaceableComponent("views.messages.MLocationBody")
 export default class MLocationBody extends React.Component<IBodyProps, IState> {
+    public static contextType = MatrixClientContext;
+    public context!: React.ContextType<typeof MatrixClientContext>;
     private coords: GeolocationCoordinates;
     private bodyId: string;
     private markerId: string;
+    private map?: maplibregl.Map;
 
     constructor(props: IBodyProps) {
         super(props);
@@ -55,6 +60,7 @@ export default class MLocationBody extends React.Component<IBodyProps, IState> {
         this.bodyId = `mx_MLocationBody_${idSuffix}`;
         this.markerId = `mx_MLocationBody_marker_${idSuffix}`;
         this.coords = parseGeoUri(locationEventGeoUri(this.props.mxEvent));
+        this.map = null;
 
         this.state = {
             error: undefined,
@@ -66,7 +72,9 @@ export default class MLocationBody extends React.Component<IBodyProps, IState> {
             return;
         }
 
-        createMap(
+        this.context.on("WellKnown.client", this.updateStyleUrl);
+
+        this.map = createMap(
             this.coords,
             false,
             this.bodyId,
@@ -75,6 +83,17 @@ export default class MLocationBody extends React.Component<IBodyProps, IState> {
         );
     }
 
+    componentWillUnmount() {
+        this.context.off("WellKnown.client", this.updateStyleUrl);
+    }
+
+    private updateStyleUrl = (clientWellKnown: IClientWellKnown) => {
+        const style = tileServerFromWellKnown(clientWellKnown)?.["map_style_url"];
+        if (style) {
+            this.map?.setStyle(style);
+        }
+    };
+
     private onClick = (
         event: React.MouseEvent<HTMLDivElement, MouseEvent>,
     ) => {
@@ -88,7 +107,10 @@ export default class MLocationBody extends React.Component<IBodyProps, IState> {
             'Location View',
             '',
             LocationViewDialog,
-            { mxEvent: this.props.mxEvent },
+            {
+                matrixClient: this.context,
+                mxEvent: this.props.mxEvent,
+            },
             "mx_LocationViewDialog_wrapper",
             false, // isPriority
             true, // isStatic

src/utils/WellKnownUtils.ts

@@ -14,6 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import { IClientWellKnown } from 'matrix-js-sdk/src/client';
 import { UnstableValue } from 'matrix-js-sdk/src/NamespacedValue';
 
 import { MatrixClientPeg } from '../MatrixClientPeg';
@@ -56,8 +57,13 @@ export function getE2EEWellKnown(): IE2EEWellKnown {
     return null;
 }
 
-export function getTileServerWellKnown(): ITileServerWellKnown {
-    const clientWellKnown = MatrixClientPeg.get().getClientWellKnown();
+export function getTileServerWellKnown(): ITileServerWellKnown | undefined {
+    return tileServerFromWellKnown(MatrixClientPeg.get().getClientWellKnown());
+}
+
+export function tileServerFromWellKnown(
+    clientWellKnown?: IClientWellKnown | undefined,
+): ITileServerWellKnown {
     return (
         clientWellKnown?.[TILE_SERVER_WK_KEY.name] ??
         clientWellKnown?.[TILE_SERVER_WK_KEY.altName]