Update dependency maplibre-gl to v2 (#9699)

* Update dependency maplibre-gl to v2

* update types and mocks for maplibre 2.0

* prettier + strict fix

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Kerry Archibald <kerrya@element.io>

src/components/views/beacon/BeaconMarker.tsx

@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import React, { ReactNode, useContext } from "react";
-import maplibregl from "maplibre-gl";
+import * as maplibregl from "maplibre-gl";
 import { Beacon, BeaconEvent } from "matrix-js-sdk/src/matrix";
 import { LocationAssetType } from "matrix-js-sdk/src/@types/location";
 

src/components/views/beacon/BeaconViewDialog.tsx

@@ -17,7 +17,7 @@ limitations under the License.
 import React, { useState, useEffect } from "react";
 import { MatrixClient } from "matrix-js-sdk/src/client";
 import { Beacon, Room } from "matrix-js-sdk/src/matrix";
-import maplibregl from "maplibre-gl";
+import * as maplibregl from "maplibre-gl";
 
 import { Icon as LiveLocationIcon } from "../../../../res/img/location/live-location.svg";
 import { useLiveBeacons } from "../../../utils/beacon/useLiveBeacons";

src/components/views/location/LocationPicker.tsx

@@ -137,7 +137,7 @@ class LocationPicker extends React.Component<ILocationPickerProps, IState> {
 
     private addMarkerToMap = () => {
         this.marker = new maplibregl.Marker({
-            element: document.getElementById(this.getMarkerId()),
+            element: document.getElementById(this.getMarkerId()) ?? undefined,
             anchor: "bottom",
             offset: [0, -1],
         })

src/components/views/location/Map.tsx

@@ -16,7 +16,7 @@ limitations under the License.
 
 import React, { ReactNode, useContext, useEffect } from "react";
 import classNames from "classnames";
-import maplibregl from "maplibre-gl";
+import * as maplibregl from "maplibre-gl";
 import { ClientEvent, IClientWellKnown } from "matrix-js-sdk/src/matrix";
 import { logger } from "matrix-js-sdk/src/logger";
 

src/components/views/location/SmartMarker.tsx

@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import React, { ReactNode, useCallback, useEffect, useState } from "react";
-import maplibregl from "maplibre-gl";
+import * as maplibregl from "maplibre-gl";
 import { RoomMember } from "matrix-js-sdk/src/matrix";
 
 import { createMarker, parseGeoUri } from "../../../utils/location";

src/components/views/location/ZoomButtons.tsx

@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import React from "react";
-import maplibregl from "maplibre-gl";
+import * as maplibregl from "maplibre-gl";
 
 import { _t } from "../../../languageHandler";
 import AccessibleButton from "../elements/AccessibleButton";

src/utils/location/map.ts

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import maplibregl from "maplibre-gl";
+import * as maplibregl from "maplibre-gl";
 import { MatrixEvent } from "matrix-js-sdk/src/matrix";
 import { M_LOCATION } from "matrix-js-sdk/src/@types/location";
 import { logger } from "matrix-js-sdk/src/logger";