Simple static location sharing (#7135)

Adds maplibre as a dependency, and behind a labs flag, lets users send and receive [MSC3488](https://github.com/matrix-org/matrix-doc/blob/matthew/location/proposals/3488-location.md) style location shares - with backwards compatibility with old school `m.location` `msgtype` location shares too.

For this to work, you have to define a valid maptile server and API in your config.json's `map_style_url`.

res/css/_common.scss

@@ -1,7 +1,8 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
 Copyright 2017 Vector Creations Ltd
-Copyright 2017 New Vector Ltd
+Copyright 2017 - 2019 New Vector Ltd
+Copyright 2019 - 2021 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.
@@ -19,6 +20,7 @@ limitations under the License.
 @import "./_font-sizes.scss";
 @import "./_font-weights.scss";
 @import "./_animations.scss";
+@import url("maplibre-gl/dist/maplibre-gl.css");
 
 $hover-transition: 0.08s cubic-bezier(.46, .03, .52, .96); // quadratic
 

res/css/_components.scss

@@ -173,6 +173,7 @@
 @import "./views/groups/_GroupPublicityToggle.scss";
 @import "./views/groups/_GroupRoomList.scss";
 @import "./views/groups/_GroupUserSettings.scss";
+@import "./views/location/_LocationPicker.scss";
 @import "./views/messages/_CallEvent.scss";
 @import "./views/messages/_CreateEvent.scss";
 @import "./views/messages/_DateSeparator.scss";
@@ -182,6 +183,7 @@
 @import "./views/messages/_MImageBody.scss";
 @import "./views/messages/_MImageReplyBody.scss";
 @import "./views/messages/_MJitsiWidgetEvent.scss";
+@import "./views/messages/_MLocationBody.scss";
 @import "./views/messages/_MNoticeBody.scss";
 @import "./views/messages/_MPollBody.scss";
 @import "./views/messages/_MStickerBody.scss";

res/css/views/location/_LocationPicker.scss

@@ -0,0 +1,44 @@
+/*
+Copyright 2021 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_LocationPicker {
+    // placeholder sizing to be replaced once there's a proper design
+    width: 450px;
+    height: 500px;
+
+    border-radius: 4px;
+
+    display: flex;
+    flex-direction: column;
+}
+
+#mx_LocationPicker_map {
+    height: 324px;
+    border-radius: 8px 8px 0px 0px;
+}
+
+.mx_LocationPicker_footer {
+    margin: 24px;
+
+    .mx_Dropdown_menu {
+        max-height: 140px;
+    }
+}
+
+.mx_LocationPicker_error {
+    color: red;
+    margin: auto;
+}

res/css/views/messages/_MLocationBody.scss

@@ -0,0 +1,22 @@
+/*
+Copyright 2021 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_MLocationBody_map {
+    width: 450px;
+    height: 300px;
+
+    border-radius: $timeline-image-border-radius;
+}

res/css/views/rooms/_MessageComposer.scss

@@ -256,6 +256,10 @@ limitations under the License.
     mask-image: url('$(res)/img/element-icons/room/composer/emoji.svg');
 }
 
+.mx_MessageComposer_location::before {
+    mask-image: url('$(res)/img/element-icons/room/composer/location.svg');
+}
+
 .mx_MessageComposer_stickers::before {
     mask-image: url('$(res)/img/element-icons/room/composer/sticker.svg');
 }

res/img/element-icons/room/composer/location.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 2C8.13 2 5 5.13 5 9C5 13.17 9.42 18.92 11.24 21.11C11.64 21.59 12.37 21.59 12.77 21.11C14.58 18.92 19 13.17 19 9C19 5.13 15.87 2 12 2ZM12 11.5C10.62 11.5 9.5 10.38 9.5 9C9.5 7.62 10.62 6.5 12 6.5C13.38 6.5 14.5 7.62 14.5 9C14.5 10.38 13.38 11.5 12 11.5Z" fill="#0DBD8B"/>
+</svg>