Simple static location sharing

res/css/views/location/_LocationPicker.scss

@@ -37,3 +37,8 @@ limitations under the License.
         max-height: 140px;
     }
 }
+
+.mx_LocationPicker_error {
+    color: red;
+    margin: auto;
+}

src/components/views/location/LocationPicker.tsx

@@ -21,10 +21,11 @@ import SdkConfig from '../../../SdkConfig';
 import Field from "../elements/Field";
 import DialogButtons from "../elements/DialogButtons";
 import Dropdown from "../elements/Dropdown";
-import { LocationShareType } from "./LocationShareType";
+import LocationShareType from "./LocationShareType";
 
 import { _t } from '../../../languageHandler';
 import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { logger } from "matrix-js-sdk/src/logger";
 
 interface IDropdownProps {
     value: LocationShareType;
@@ -74,6 +75,7 @@ interface IState {
     type: LocationShareType;
     position?: GeolocationPosition;
     manual: boolean;
+    error: Error;
 }
 
 @replaceableComponent("views.location.LocationPicker")
@@ -89,6 +91,7 @@ class LocationPicker extends React.Component<IProps, IState> {
             type: LocationShareType.OnceOff,
             position: undefined,
             manual: false,
+            error: undefined,
         };
     }
 
@@ -110,6 +113,11 @@ class LocationPicker extends React.Component<IProps, IState> {
         });
         this.map.addControl(this.geolocate);
 
+        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", e.error);
+            this.setState({ error: e.error });
+        });
+
         this.map.on('load', ()=>{
             this.geolocate.trigger();
         });
@@ -152,9 +160,15 @@ class LocationPicker extends React.Component<IProps, IState> {
     };
 
     render() {
+        const error = this.state.error ?
+            <div className="mx_LocationPicker_error">
+                { _t("Failed to load map") }
+            </div> : null;
+
         return (
             <div className="mx_LocationPicker">
                 <div id="mx_LocationPicker_map" />
+                { error }
                 <div className="mx_LocationPicker_footer">
                     <form onSubmit={this.onOk}>
                         <LocationShareTypeDropdown

src/components/views/location/LocationShareType.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-export enum LocationShareType {
+enum LocationShareType {
     Custom = -1,
     OnceOff = 0,
     OneMine = 60,
@@ -26,3 +26,5 @@ export enum LocationShareType {
     OneDay = 24 * 60 * 60,
     Forever = Number.MAX_SAFE_INTEGER,
 }
+
+export default LocationShareType;

src/components/views/messages/MLocationBody.tsx

@@ -19,9 +19,11 @@ import maplibregl from 'maplibre-gl';
 import SdkConfig from '../../../SdkConfig';
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 import { IBodyProps } from "./IBodyProps";
+import { logger } from "matrix-js-sdk/src/logger";
+import { _t } from '../../../languageHandler';
 
 interface IState {
-    fail: boolean;
+    error: Error;
 }
 
 @replaceableComponent("views.messages.MLocationBody")
@@ -44,7 +46,7 @@ export default class MLocationBody extends React.Component<IBodyProps, IState> {
 
         this.coords = this.parseGeoUri(uri);
         this.state = {
-            fail: false,
+            error: undefined,
         };
 
         this.description =
@@ -81,25 +83,24 @@ export default class MLocationBody extends React.Component<IBodyProps, IState> {
             zoom: 13,
         });
 
-        try {
-            this.map.getStyle();
-        } catch (e) {
-            this.setState({ fail: true });
-        }
-
         new maplibregl.Marker()
             .setLngLat([this.coords.longitude, this.coords.latitude])
             .addTo(this.map);
+
+        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", e.error);
+            this.setState({ error: e.error });
+        });
     }
 
     private getBodyId = () => {
         return `mx_MLocationBody_${this.props.mxEvent.getId()}`;
     };
 
     render() {
-        const error = this.state.fail ?
+        const error = this.state.error ?
             <div className="mx_EventTile_tileError mx_EventTile_body">
-                Failed to load map - check config.json has a valid API key
+                { _t("Failed to load map") }
             </div> : null;
 
         return <div className="mx_MLocationBody">

src/components/views/rooms/MessageComposer.tsx

@@ -49,7 +49,6 @@ import { Action } from "../../../dispatcher/actions";
 import EditorModel from "../../../editor/model";
 import EmojiPicker from '../emojipicker/EmojiPicker';
 import LocationPicker from '../location/LocationPicker';
-import MemberStatusMessageAvatar from "../avatars/MemberStatusMessageAvatar";
 import UIStore, { UI_EVENTS } from '../../../stores/UIStore';
 import Modal from "../../../Modal";
 import { RelationType } from 'matrix-js-sdk/src/@types/event';
@@ -59,7 +58,8 @@ import ErrorDialog from "../dialogs/ErrorDialog";
 import PollCreateDialog from "../elements/PollCreateDialog";
 import { MsgType } from "matrix-js-sdk/src/@types/event";
 import { logger } from "matrix-js-sdk/src/logger";
-import { LocationShareType } from "../location/LocationShareType";
+import LocationShareType from "../location/LocationShareType";
+import { SettingUpdatedPayload } from "../../../dispatcher/payloads/SettingUpdatedPayload";
 
 let instanceCount = 0;
 const NARROW_MODE_BREAKPOINT = 500;

src/i18n/strings/en_EN.json

@@ -2065,6 +2065,7 @@
     "Declining …": "Declining …",
     "%(name)s wants to verify": "%(name)s wants to verify",
     "You sent a verification request": "You sent a verification request",
+    "Failed to load map": "Failed to load map",
     "Vote not registered": "Vote not registered",
     "Sorry, your vote was not registered. Please try again.": "Sorry, your vote was not registered. Please try again.",
     "No votes cast": "No votes cast",