fallback to event text in location body when map unavailable (#7982)

* center icon better

Signed-off-by: Kerry Archibald <kerrya@element.io>

* remove debug

Signed-off-by: Kerry Archibald <kerrya@element.io>

* retrigger all builds

Signed-off-by: Kerry Archibald <kerrya@element.io>

* set assetType on share event

Signed-off-by: Kerry Archibald <kerrya@element.io>

* use pin marker on map for pin drop share

Signed-off-by: Kerry Archibald <kerrya@element.io>

* lint

Signed-off-by: Kerry Archibald <kerrya@element.io>

* test events

Signed-off-by: Kerry Archibald <kerrya@element.io>

* pin drop helper text

Signed-off-by: Kerry Archibald <kerrya@element.io>

* use generic location type

Signed-off-by: Kerry Archibald <kerrya@element.io>

* add navigationcontrol when in pin mode

Signed-off-by: Kerry Archibald <kerrya@element.io>

* allow pin drop without location permissions

Signed-off-by: Kerry Archibald <kerrya@element.io>

* remove geolocate control when pin dropping without geo perms

Signed-off-by: Kerry Archibald <kerrya@element.io>

* test locationpicker

Signed-off-by: Kerry Archibald <kerrya@element.io>

* test marker type, tidy

Signed-off-by: Kerry Archibald <kerrya@element.io>

* move findMapStyleUrl

Signed-off-by: Kerry Archibald <kerrya@element.io>

* fallback to event content when cant render map

Signed-off-by: Kerry Archibald <kerrya@element.io>

* update mocks in location picker, show same messages as timeline

Signed-off-by: Kerry Archibald <kerrya@element.io>

* style error message in location share menu

Signed-off-by: Kerry Archibald <kerrya@element.io>

* i18n

Signed-off-by: Kerry Archibald <kerrya@element.io>

* forgotten copyright

Signed-off-by: Kerry Archibald <kerrya@element.io>

* add copyright

Signed-off-by: Kerry Archibald <kerrya@element.io>

* update style

Signed-off-by: Kerry Archibald <kerrya@element.io>

* icon bigger

Signed-off-by: Kerry Archibald <kerrya@element.io>

res/css/_components.scss

@@ -5,6 +5,7 @@
 @import "./_font-weights.scss";
 @import "./_spacing.scss";
 @import "./components/views/location/_LocationShareMenu.scss";
+@import "./components/views/location/_MapError.scss";
 @import "./components/views/location/_ShareDialogButtons.scss";
 @import "./components/views/location/_ShareType.scss";
 @import "./components/views/spaces/_QuickThemeSwitcher.scss";

res/css/components/views/location/_MapError.scss

@@ -0,0 +1,36 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_MapError {
+    padding: 100px $spacing-32 0;
+    text-align: center;
+
+    p {
+        margin: $spacing-16 0 $spacing-32;
+    }
+}
+
+.mx_MapError_heading {
+    padding-top: $spacing-24;
+}
+
+.mx_MapError_icon {
+    height: 58px;
+
+    path {
+        fill: $secondary-content;
+    }
+}

res/css/views/location/_LocationPicker.scss

@@ -21,6 +21,16 @@ limitations under the License.
     position: relative;
     overflow: hidden;
 
+    // when there are errors loading the map
+    // the canvas is still inserted
+    // and can overlap error message/close buttons
+    // hide it
+    &.mx_LocationPicker_hasError {
+        .maplibregl-canvas-container, .maplibregl-control-container {
+            display: none;
+        }
+    }
+
     #mx_LocationPicker_map {
         height: 100%;
         border-radius: 8px;
@@ -94,11 +104,6 @@ limitations under the License.
 
         background-color: $header-panel-bg-color;
     }
-
-    .mx_LocationPicker_error {
-        color: red;
-        margin: auto;
-    }
 }
 
 .mx_MLocationBody_markerIcon {

src/components/views/location/LocationPicker.tsx

@@ -26,12 +26,13 @@ import MemberAvatar from '../avatars/MemberAvatar';
 import MatrixClientContext from '../../../contexts/MatrixClientContext';
 import Modal from '../../../Modal';
 import ErrorDialog from '../dialogs/ErrorDialog';
-import { findMapStyleUrl } from '../messages/MLocationBody';
 import { tileServerFromWellKnown } from '../../../utils/WellKnownUtils';
+import { findMapStyleUrl } from './findMapStyleUrl';
 import { LocationShareType } from './shareLocation';
 import { Icon as LocationIcon } from '../../../../res/img/element-icons/location.svg';
+import { LocationShareError } from './LocationShareErrors';
 import AccessibleButton from '../elements/AccessibleButton';
-
+import { MapError } from './MapError';
 export interface ILocationPickerProps {
     sender: RoomMember;
     shareType: LocationShareType;
@@ -48,7 +49,7 @@ interface IPosition {
 }
 interface IState {
     position?: IPosition;
-    error: Error;
+    error?: LocationShareError;
 }
 
 /*
@@ -104,10 +105,10 @@ class LocationPicker extends React.Component<ILocationPickerProps, IState> {
             this.map.on('error', (e) => {
                 logger.error(
                     "Failed to load map: check map_style_url in config.json "
-                        + "has a valid URL and API key",
+                    + "has a valid URL and API key",
                     e.error,
                 );
-                this.setState({ error: e.error });
+                this.setState({ error: LocationShareError.MapStyleUrlNotReachable });
             });
 
             this.map.on('load', () => {
@@ -129,7 +130,10 @@ class LocationPicker extends React.Component<ILocationPickerProps, IState> {
             }
         } catch (e) {
             logger.error("Failed to render map", e);
-            this.setState({ error: e });
+            const errorType = e?.message === LocationShareError.MapStyleUrlNotConfigured ?
+                LocationShareError.MapStyleUrlNotConfigured :
+                LocationShareError.Default;
+            this.setState({ error: errorType });
         }
     }
 
@@ -213,10 +217,13 @@ class LocationPicker extends React.Component<ILocationPickerProps, IState> {
     };
 
     render() {
-        const error = this.state.error ?
+        if (this.state.error) {
-            <div data-test-id='location-picker-error' className="mx_LocationPicker_error">
+            return <div className="mx_LocationPicker mx_LocationPicker_hasError">
-                { _t("Failed to load map") }
+                <MapError
-            </div> : null;
+                    error={this.state.error}
+                    onFinished={this.props.onFinished} />
+            </div>;
+        }
 
         return (
             <div className="mx_LocationPicker">
@@ -227,7 +234,6 @@ class LocationPicker extends React.Component<ILocationPickerProps, IState> {
                     </span>
                 </div>
                 }
-                { error }
                 <div className="mx_LocationPicker_footer">
                     <form onSubmit={this.onOk}>
 

src/components/views/location/LocationShareErrors.ts

@@ -0,0 +1,34 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { _t } from "../../../languageHandler";
+
+export enum LocationShareError {
+    MapStyleUrlNotConfigured = 'MapStyleUrlNotConfigured',
+    MapStyleUrlNotReachable = 'MapStyleUrlNotReachable',
+    Default = 'Default'
+}
+
+export const getLocationShareErrorMessage = (errorType?: LocationShareError): string => {
+    switch (errorType) {
+        case LocationShareError.MapStyleUrlNotConfigured:
+            return _t('This homeserver is not configured to display maps.');
+        case LocationShareError.MapStyleUrlNotReachable:
+        default:
+            return _t(`This homeserver is not configured correctly to display maps, `
+                + `or the configured map server may be unreachable.`);
+    }
+};

src/components/views/location/MapError.tsx

@@ -0,0 +1,39 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+
+import { Icon as WarningBadge } from '../../../../res/img/element-icons/warning-badge.svg';
+import { _t } from '../../../languageHandler';
+import AccessibleButton from '../elements/AccessibleButton';
+import Heading from '../typography/Heading';
+import { getLocationShareErrorMessage, LocationShareError } from './LocationShareErrors';
+
+interface Props {
+    onFinished: () => void;
+    error: LocationShareError;
+}
+
+export const MapError: React.FC<Props> = ({
+    onFinished, error,
+}) => (<div data-test-id='location-picker-error' className="mx_MapError">
+    <WarningBadge className="mx_MapError_icon" />
+    <Heading className="mx_MapError_heading" size='h3'>{ _t("Unable to load map") }</Heading>
+    <p>
+        { getLocationShareErrorMessage(error) }
+    </p>
+    <AccessibleButton element='button' kind="primary" onClick={onFinished}>{ _t("OK") }</AccessibleButton>
+</div>);

src/components/views/location/findMapStyleUrl.ts

@@ -0,0 +1,41 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { logger } from "matrix-js-sdk/src/logger";
+
+import SdkConfig from "../../../SdkConfig";
+import { getTileServerWellKnown } from "../../../utils/WellKnownUtils";
+import { LocationShareError } from "./LocationShareErrors";
+
+/**
+ * Look up what map tile server style URL was provided in the homeserver's
+ * .well-known location, or, failing that, in our local config, or, failing
+ * that, defaults to the same tile server listed by matrix.org.
+ */
+export function findMapStyleUrl(): string {
+    const mapStyleUrl = (
+        getTileServerWellKnown()?.map_style_url ??
+        SdkConfig.get().map_style_url
+    );
+
+    if (!mapStyleUrl) {
+        logger.error("'map_style_url' missing from homeserver .well-known area, and " +
+            "missing from from config.json.");
+        throw new Error(LocationShareError.MapStyleUrlNotConfigured);
+    }
+
+    return mapStyleUrl;
+}

src/components/views/messages/MLocationBody.tsx

@@ -26,7 +26,6 @@ import {
 } from 'matrix-js-sdk/src/@types/location';
 import { ClientEvent, IClientWellKnown } from 'matrix-js-sdk/src/client';
 
-import SdkConfig from '../../../SdkConfig';
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 import { IBodyProps } from "./IBodyProps";
 import { _t } from '../../../languageHandler';
@@ -36,8 +35,10 @@ import LocationViewDialog from '../location/LocationViewDialog';
 import TooltipTarget from '../elements/TooltipTarget';
 import { Alignment } from '../elements/Tooltip';
 import AccessibleButton from '../elements/AccessibleButton';
-import { getTileServerWellKnown, tileServerFromWellKnown } from '../../../utils/WellKnownUtils';
+import { tileServerFromWellKnown } from '../../../utils/WellKnownUtils';
 import MatrixClientContext from '../../../contexts/MatrixClientContext';
+import { findMapStyleUrl } from '../location/findMapStyleUrl';
+import { getLocationShareErrorMessage, LocationShareError } from '../location/LocationShareErrors';
 
 interface IState {
     error: Error;
@@ -117,14 +118,16 @@ export default class MLocationBody extends React.Component<IBodyProps, IState> {
     };
 
     render(): React.ReactElement<HTMLDivElement> {
-        return <LocationBodyContent
+        return this.state.error ?
-            mxEvent={this.props.mxEvent}
+            <LocationBodyFallbackContent error={this.state.error} event={this.props.mxEvent} /> :
-            bodyId={this.bodyId}
+            <LocationBodyContent
-            markerId={this.markerId}
+                mxEvent={this.props.mxEvent}
-            error={this.state.error}
+                bodyId={this.bodyId}
-            tooltip={_t("Expand map")}
+                markerId={this.markerId}
-            onClick={this.onClick}
+                error={this.state.error}
-        />;
+                tooltip={_t("Expand map")}
+                onClick={this.onClick}
+            />;
     }
 }
 
@@ -146,6 +149,23 @@ interface ILocationBodyContentProps {
     onZoomOut?: () => void;
 }
 
+export const LocationBodyFallbackContent: React.FC<{ event: MatrixEvent, error: Error }> = ({ error, event }) => {
+    const errorType = error?.message as LocationShareError;
+    const message = `${_t('Unable to load map')}: ${getLocationShareErrorMessage(errorType)}`;
+
+    const locationFallback = isSelfLocation(event.getContent()) ?
+        (_t('Shared their location: ') + event.getContent()?.body) :
+        (_t('Shared a location: ') + event.getContent()?.body);
+
+    return <div className="mx_EventTile_body">
+        <span className={errorType !== LocationShareError.MapStyleUrlNotConfigured ? "mx_EventTile_tileError" : ''}>
+            { message }
+        </span>
+        <br />
+        { locationFallback }
+    </div>;
+};
+
 export function LocationBodyContent(props: ILocationBodyContentProps):
         React.ReactElement<HTMLDivElement> {
     const mapDiv = <div
@@ -166,13 +186,6 @@ export function LocationBodyContent(props: ILocationBodyContentProps):
     );
 
     return <div className="mx_MLocationBody">
-        {
-            props.error
-                ? <div className="mx_EventTile_tileError mx_EventTile_body">
-                    { _t("Failed to load map") }
-                </div>
-                : null
-        }
         {
             props.tooltip
                 ? <TooltipTarget
@@ -225,27 +238,6 @@ function ZoomButtons(props: IZoomButtonsProps): React.ReactElement<HTMLDivElemen
     </div>;
 }
 
-/**
- * Look up what map tile server style URL was provided in the homeserver's
- * .well-known location, or, failing that, in our local config, or, failing
- * that, defaults to the same tile server listed by matrix.org.
- */
-export function findMapStyleUrl(): string {
-    const mapStyleUrl = (
-        getTileServerWellKnown()?.map_style_url ??
-        SdkConfig.get().map_style_url
-    );
-
-    if (!mapStyleUrl) {
-        throw new Error(
-            "'map_style_url' missing from homeserver .well-known area, and " +
-            "missing from from config.json.",
-        );
-    }
-
-    return mapStyleUrl;
-}
-
 export function createMap(
     coords: GeolocationCoordinates,
     interactive: boolean,
@@ -279,7 +271,7 @@ export function createMap(
                 + "valid URL and API key",
                 e.error,
             );
-            onError(e.error);
+            onError(new Error(LocationShareError.MapStyleUrlNotReachable));
         });
 
         return map;

src/i18n/strings/en_EN.json

@@ -2134,7 +2134,9 @@
     "%(name)s wants to verify": "%(name)s wants to verify",
     "You sent a verification request": "You sent a verification request",
     "Expand map": "Expand map",
-    "Failed to load map": "Failed to load map",
+    "Unable to load map": "Unable to load map",
+    "Shared their location: ": "Shared their location: ",
+    "Shared a location: ": "Shared a location: ",
     "Zoom in": "Zoom in",
     "Zoom out": "Zoom out",
     "Can't edit poll": "Can't edit poll",
@@ -2182,6 +2184,8 @@
     "Failed to fetch your location. Please try again later.": "Failed to fetch your location. Please try again later.",
     "Timed out trying to fetch your location. Please try again later.": "Timed out trying to fetch your location. Please try again later.",
     "Unknown error fetching location. Please try again later.": "Unknown error fetching location. Please try again later.",
+    "This homeserver is not configured to display maps.": "This homeserver is not configured to display maps.",
+    "This homeserver is not configured correctly to display maps, or the configured map server may be unreachable.": "This homeserver is not configured correctly to display maps, or the configured map server may be unreachable.",
     "We couldn't send your location": "We couldn't send your location",
     "%(brand)s could not send your location. Please try again later.": "%(brand)s could not send your location. Please try again later.",
     "My current location": "My current location",

test/components/views/location/LocationPicker-test.tsx

@@ -13,6 +13,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 */
+
 import React from 'react';
 import maplibregl from "maplibre-gl";
 import { mount } from "enzyme";
@@ -28,8 +29,10 @@ import { LocationShareType } from "../../../../src/components/views/location/sha
 import MatrixClientContext from '../../../../src/contexts/MatrixClientContext';
 import { MatrixClientPeg } from '../../../../src/MatrixClientPeg';
 import { findByTestId } from '../../../test-utils';
+import { findMapStyleUrl } from '../../../../src/components/views/location/findMapStyleUrl';
+import { LocationShareError } from '../../../../src/components/views/location/LocationShareErrors';
 
-jest.mock('../../../../src/components/views/messages/MLocationBody', () => ({
+jest.mock('../../../../src/components/views/location/findMapStyleUrl', () => ({
     findMapStyleUrl: jest.fn().mockReturnValue('tileserver.com'),
 }));
 
@@ -139,6 +142,7 @@ describe("LocationPicker", () => {
             jest.spyOn(MatrixClientPeg, 'get').mockReturnValue(mockClient as unknown as MatrixClient);
             jest.clearAllMocks();
             mocked(mockMap).addControl.mockReset();
+            mocked(findMapStyleUrl).mockReturnValue('tileserver.com');
         });
 
         it('displays error when map emits an error', () => {
@@ -152,7 +156,25 @@ describe("LocationPicker", () => {
                 wrapper.setProps({});
             });
 
-            expect(findByTestId(wrapper, 'location-picker-error').length).toBeTruthy();
+            expect(findByTestId(wrapper, 'location-picker-error').find('p').text()).toEqual(
+                "This homeserver is not configured correctly to display maps, "
+                + "or the configured map server may be unreachable.",
+            );
+        });
+
+        it('displays error when map display is not configured properly', () => {
+            // suppress expected error log
+            jest.spyOn(logger, 'error').mockImplementation(() => { });
+            mocked(findMapStyleUrl).mockImplementation(() => {
+                throw new Error(LocationShareError.MapStyleUrlNotConfigured);
+            });
+
+            const wrapper = getComponent();
+            wrapper.setProps({});
+
+            expect(findByTestId(wrapper, 'location-picker-error').find('p').text()).toEqual(
+                "This homeserver is not configured to display maps.",
+            );
         });
 
         it('displays error when map setup throws', () => {
@@ -165,7 +187,10 @@ describe("LocationPicker", () => {
             const wrapper = getComponent();
             wrapper.setProps({});
 
-            expect(findByTestId(wrapper, 'location-picker-error').length).toBeTruthy();
+            expect(findByTestId(wrapper, 'location-picker-error').find('p').text()).toEqual(
+                "This homeserver is not configured correctly to display maps, "
+                + "or the configured map server may be unreachable.",
+            );
         });
 
         it('initiates map with geolocation', () => {

test/components/views/location/LocationShareMenu-test.tsx

@@ -31,7 +31,7 @@ import { MatrixClientPeg } from '../../../../src/MatrixClientPeg';
 import { LocationShareType } from '../../../../src/components/views/location/shareLocation';
 import { findByTestId } from '../../../test-utils';
 
-jest.mock('../../../../src/components/views/messages/MLocationBody', () => ({
+jest.mock('../../../../src/components/views/location/findMapStyleUrl', () => ({
     findMapStyleUrl: jest.fn().mockReturnValue('test'),
 }));
 

test/components/views/location/MapError-test.tsx

@@ -0,0 +1,43 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import { mount } from 'enzyme';
+
+import '../../../skinned-sdk';
+import { MapError } from '../../../../src/components/views/location/MapError';
+import { LocationShareError } from '../../../../src/components/views/location/LocationShareErrors';
+
+describe('<MapError />', () => {
+    const defaultProps = {
+        onFinished: jest.fn(),
+        error: LocationShareError.MapStyleUrlNotConfigured,
+    };
+    const getComponent = (props = {}) =>
+        mount(<MapError {...defaultProps} {...props} />);
+
+    it('renders correctly for MapStyleUrlNotConfigured', () => {
+        const component = getComponent();
+        expect(component).toMatchSnapshot();
+    });
+
+    it('renders correctly for MapStyleUrlNotReachable', () => {
+        const component = getComponent({
+            error: LocationShareError.MapStyleUrlNotReachable,
+        });
+        expect(component).toMatchSnapshot();
+    });
+});

test/components/views/location/__snapshots__/MapError-test.tsx.snap

@@ -0,0 +1,95 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<MapError /> renders correctly for MapStyleUrlNotConfigured 1`] = `
+<MapError
+  error="MapStyleUrlNotConfigured"
+  onFinished={[MockFunction]}
+>
+  <div
+    className="mx_MapError"
+    data-test-id="location-picker-error"
+  >
+    <div
+      className="mx_MapError_icon"
+    />
+    <Heading
+      className="mx_MapError_heading"
+      size="h3"
+    >
+      <h3
+        className="mx_Heading_h3 mx_MapError_heading"
+      >
+        Unable to load map
+      </h3>
+    </Heading>
+    <p>
+      This homeserver is not configured to display maps.
+    </p>
+    <AccessibleButton
+      element="button"
+      kind="primary"
+      onClick={[MockFunction]}
+      role="button"
+      tabIndex={0}
+    >
+      <button
+        className="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
+        onClick={[MockFunction]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        role="button"
+        tabIndex={0}
+      >
+        OK
+      </button>
+    </AccessibleButton>
+  </div>
+</MapError>
+`;
+
+exports[`<MapError /> renders correctly for MapStyleUrlNotReachable 1`] = `
+<MapError
+  error="MapStyleUrlNotReachable"
+  onFinished={[MockFunction]}
+>
+  <div
+    className="mx_MapError"
+    data-test-id="location-picker-error"
+  >
+    <div
+      className="mx_MapError_icon"
+    />
+    <Heading
+      className="mx_MapError_heading"
+      size="h3"
+    >
+      <h3
+        className="mx_Heading_h3 mx_MapError_heading"
+      >
+        Unable to load map
+      </h3>
+    </Heading>
+    <p>
+      This homeserver is not configured correctly to display maps, or the configured map server may be unreachable.
+    </p>
+    <AccessibleButton
+      element="button"
+      kind="primary"
+      onClick={[MockFunction]}
+      role="button"
+      tabIndex={0}
+    >
+      <button
+        className="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
+        onClick={[MockFunction]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        role="button"
+        tabIndex={0}
+      >
+        OK
+      </button>
+    </AccessibleButton>
+  </div>
+</MapError>
+`;

test/components/views/messages/MLocationBody-test.tsx

@@ -14,6 +14,9 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import React from 'react';
+import { mount } from "enzyme";
+import { mocked } from 'jest-mock';
 import { makeLocationContent } from "matrix-js-sdk/src/content-helpers";
 import {
     M_ASSET,
@@ -24,14 +27,30 @@ import {
 } from "matrix-js-sdk/src/@types/location";
 import { TEXT_NODE_TYPE } from "matrix-js-sdk/src/@types/extensible_events";
 import { MatrixEvent } from "matrix-js-sdk/src/models/event";
+import maplibregl from 'maplibre-gl';
+import { logger } from 'matrix-js-sdk/src/logger';
 
 import sdk from "../../../skinned-sdk";
-import {
+import MLocationBody, {
     createMapSiteLink,
     isSelfLocation,
     parseGeoUri,
 } from "../../../../src/components/views/messages/MLocationBody";
+import MatrixClientContext from "../../../../src/contexts/MatrixClientContext";
+import { RoomPermalinkCreator } from "../../../../src/utils/permalinks/Permalinks";
+import { MediaEventHelper } from "../../../../src/utils/MediaEventHelper";
+import { getTileServerWellKnown } from "../../../../src/utils/WellKnownUtils";
+import SdkConfig from "../../../../src/SdkConfig";
 
+jest.mock("../../../../src/utils/WellKnownUtils", () => ({
+    getTileServerWellKnown: jest.fn(),
+}));
+
+let EVENT_ID = 0;
+function nextId(): string {
+    EVENT_ID++;
+    return EVENT_ID.toString();
+}
 sdk.getComponent("views.messages.MLocationBody");
 
 describe("MLocationBody", () => {
@@ -245,6 +264,59 @@ describe("MLocationBody", () => {
             expect(isSelfLocation(content)).toBe(false);
         });
     });
+
+    describe('<MLocationBody>', () => {
+        describe('with error', () => {
+            const mockClient = {
+                on: jest.fn(),
+                off: jest.fn(),
+            };
+            const defaultEvent = modernLocationEvent("geo:51.5076,-0.1276", LocationAssetType.Pin);
+            const defaultProps = {
+                mxEvent: defaultEvent,
+                highlights: [],
+                highlightLink: '',
+                onHeightChanged: jest.fn(),
+                onMessageAllowed: jest.fn(),
+                permalinkCreator: {} as RoomPermalinkCreator,
+                mediaEventHelper: {} as MediaEventHelper,
+            };
+            const getComponent = (props = {}) => mount(<MLocationBody {...defaultProps} {...props} />, {
+                wrappingComponent: MatrixClientContext.Provider,
+                wrappingComponentProps: { value: mockClient },
+            });
+            let sdkConfigSpy;
+
+            beforeEach(() => {
+                // eat expected errors to keep console clean
+                jest.spyOn(logger, 'error').mockImplementation(() => { });
+                mocked(getTileServerWellKnown).mockReturnValue({});
+                sdkConfigSpy = jest.spyOn(SdkConfig, 'get').mockReturnValue({});
+            });
+
+            afterAll(() => {
+                sdkConfigSpy.mockRestore();
+                jest.spyOn(logger, 'error').mockRestore();
+            });
+
+            it('displays correct fallback content without error style when map_style_url is not configured', () => {
+                const component = getComponent();
+                expect(component.find(".mx_EventTile_body")).toMatchSnapshot();
+            });
+
+            it('displays correct fallback content when map_style_url is misconfigured', () => {
+                const mockMap = new maplibregl.Map();
+                mocked(getTileServerWellKnown).mockReturnValue({ map_style_url: 'bad-tile-server.com' });
+                const component = getComponent();
+
+                // simulate error initialising map in maplibregl
+                // @ts-ignore
+                mockMap.emit('error', { status: 404 });
+                component.setProps({});
+                expect(component.find(".mx_EventTile_body")).toMatchSnapshot();
+            });
+        });
+    });
 });
 
 function oldLocationEvent(geoUri: string): MatrixEvent {
@@ -261,7 +333,7 @@ function oldLocationEvent(geoUri: string): MatrixEvent {
     );
 }
 
-function modernLocationEvent(geoUri: string): MatrixEvent {
+function modernLocationEvent(geoUri: string, assetType?: LocationAssetType): MatrixEvent {
     return new MatrixEvent(
         {
             "event_id": nextId(),
@@ -271,6 +343,7 @@ function modernLocationEvent(geoUri: string): MatrixEvent {
                 geoUri,
                 252523,
                 "Human-readable label",
+                assetType,
             ),
         },
     );
@@ -290,9 +363,3 @@ function nonLocationEvent(): MatrixEvent {
         },
     );
 }
-
-let EVENT_ID = 0;
-function nextId(): string {
-    EVENT_ID++;
-    return EVENT_ID.toString();
-}

test/components/views/messages/__snapshots__/MLocationBody-test.tsx.snap

@@ -0,0 +1,29 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MLocationBody <MLocationBody> with error displays correct fallback content when map_style_url is misconfigured 1`] = `
+<div
+  className="mx_EventTile_body"
+>
+  <span
+    className="mx_EventTile_tileError"
+  >
+    Unable to load map: This homeserver is not configured correctly to display maps, or the configured map server may be unreachable.
+  </span>
+  <br />
+  Shared a location: Found at geo:51.5076,-0.1276 at 2021-12-21T12:22+0000
+</div>
+`;
+
+exports[`MLocationBody <MLocationBody> with error displays correct fallback content without error style when map_style_url is not configured 1`] = `
+<div
+  className="mx_EventTile_body"
+>
+  <span
+    className=""
+  >
+    Unable to load map: This homeserver is not configured to display maps.
+  </span>
+  <br />
+  Shared a location: Found at geo:51.5076,-0.1276 at 2021-12-21T12:22+0000
+</div>
+`;