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>

__mocks__/maplibre-gl.js

@@ -28,6 +28,7 @@ class MockMap extends EventEmitter {
 }
 const MockMapInstance = new MockMap();
 
+class MockAttributionControl {}
 class MockGeolocateControl extends EventEmitter {
     trigger = jest.fn();
 }
@@ -43,5 +44,5 @@ module.exports = {
     LngLat,
     LngLatBounds,
     NavigationControl,
-    AttributionControl,
+    AttributionControl: MockAttributionControl,
 };

package.json

@@ -89,7 +89,7 @@
         "linkify-string": "4.0.0-beta.4",
         "linkifyjs": "4.0.0-beta.4",
         "lodash": "^4.17.20",
-        "maplibre-gl": "^1.15.2",
+        "maplibre-gl": "^2.0.0",
         "matrix-encrypt-attachment": "^1.0.3",
         "matrix-events-sdk": "0.0.1",
         "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#develop",

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";

test/components/views/beacon/BeaconMarker-test.tsx

@@ -17,7 +17,7 @@ limitations under the License.
 import React from "react";
 // eslint-disable-next-line deprecate/import
 import { mount } from "enzyme";
-import maplibregl from "maplibre-gl";
+import * as maplibregl from "maplibre-gl";
 import { act } from "react-dom/test-utils";
 import { Beacon, Room, RoomMember, MatrixEvent, getBeaconInfoIdentifier } from "matrix-js-sdk/src/matrix";
 
@@ -41,7 +41,8 @@ describe("<BeaconMarker />", () => {
 
     const aliceMember = new RoomMember(roomId, aliceId);
 
-    const mockMap = new maplibregl.Map();
+    const mapOptions = { container: {} as unknown as HTMLElement, style: "" };
+    const mockMap = new maplibregl.Map(mapOptions);
 
     const mockClient = getMockClientWithEventEmitter({
         getClientWellKnown: jest.fn().mockReturnValue({

test/components/views/beacon/BeaconViewDialog-test.tsx

@@ -19,7 +19,7 @@ import React from "react";
 import { mount, ReactWrapper } from "enzyme";
 import { act } from "react-dom/test-utils";
 import { MatrixClient, MatrixEvent, Room, RoomMember, getBeaconInfoIdentifier } from "matrix-js-sdk/src/matrix";
-import maplibregl from "maplibre-gl";
+import * as maplibregl from "maplibre-gl";
 import { mocked } from "jest-mock";
 
 import BeaconViewDialog from "../../../../src/components/views/beacon/BeaconViewDialog";
@@ -58,7 +58,8 @@ describe("<BeaconViewDialog />", () => {
         getVisibleRooms: jest.fn().mockReturnValue([]),
     });
 
-    const mockMap = new maplibregl.Map();
+    const mapOptions = { container: {} as unknown as HTMLElement, style: "" };
+    const mockMap = new maplibregl.Map(mapOptions);
 
     // make fresh rooms every time
     // as we update room state
@@ -91,10 +92,6 @@ describe("<BeaconViewDialog />", () => {
             component.setProps({});
         });
 
-    beforeAll(() => {
-        maplibregl.AttributionControl = jest.fn();
-    });
-
     beforeEach(() => {
         jest.spyOn(OwnBeaconStore.instance, "getLiveBeaconIds").mockRestore();
         jest.spyOn(OwnBeaconStore.instance, "getBeaconById").mockRestore();

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

@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import React from "react";
-import maplibregl from "maplibre-gl";
+import * as maplibregl from "maplibre-gl";
 // eslint-disable-next-line deprecate/import
 import { mount } from "enzyme";
 import { act } from "react-dom/test-utils";
@@ -62,8 +62,9 @@ describe("LocationPicker", () => {
                 wrappingComponentProps: { value: mockClient },
             });
 
-        const mockMap = new maplibregl.Map();
+        const mapOptions = { container: {} as unknown as HTMLElement, style: "" };
-        const mockGeolocate = new maplibregl.GeolocateControl();
+        const mockMap = new maplibregl.Map(mapOptions);
+        const mockGeolocate = new maplibregl.GeolocateControl({});
         const mockMarker = new maplibregl.Marker();
 
         const mockGeolocationPosition = {

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

@@ -19,7 +19,6 @@ import React from "react";
 import { mount } from "enzyme";
 import { RoomMember } from "matrix-js-sdk/src/matrix";
 import { LocationAssetType } from "matrix-js-sdk/src/@types/location";
-import maplibregl from "maplibre-gl";
 
 import LocationViewDialog from "../../../../src/components/views/location/LocationViewDialog";
 import { TILE_SERVER_WK_KEY } from "../../../../src/utils/WellKnownUtils";
@@ -42,10 +41,6 @@ describe("<LocationViewDialog />", () => {
     };
     const getComponent = (props = {}) => mount(<LocationViewDialog {...defaultProps} {...props} />);
 
-    beforeAll(() => {
-        maplibregl.AttributionControl = jest.fn();
-    });
-
     it("renders map correctly", () => {
         const component = getComponent();
         expect(component.find("Map")).toMatchSnapshot();

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

@@ -18,7 +18,7 @@ import React from "react";
 // eslint-disable-next-line deprecate/import
 import { mount } from "enzyme";
 import { act } from "react-dom/test-utils";
-import maplibregl from "maplibre-gl";
+import * as maplibregl from "maplibre-gl";
 import { ClientEvent } from "matrix-js-sdk/src/matrix";
 import { logger } from "matrix-js-sdk/src/logger";
 
@@ -45,10 +45,6 @@ describe("<Map />", () => {
             wrappingComponentProps: { value: matrixClient },
         });
 
-    beforeAll(() => {
-        maplibregl.AttributionControl = jest.fn();
-    });
-
     beforeEach(() => {
         jest.clearAllMocks();
         matrixClient.getClientWellKnown.mockReturnValue({
@@ -58,7 +54,8 @@ describe("<Map />", () => {
         jest.spyOn(logger, "error").mockRestore();
     });
 
-    const mockMap = new maplibregl.Map();
+    const mapOptions = { container: {} as unknown as HTMLElement, style: "" };
+    const mockMap = new maplibregl.Map(mapOptions);
 
     it("renders", () => {
         const component = getComponent();

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

@@ -18,7 +18,7 @@ import React from "react";
 // eslint-disable-next-line deprecate/import
 import { mount } from "enzyme";
 import { mocked } from "jest-mock";
-import maplibregl from "maplibre-gl";
+import * as maplibregl from "maplibre-gl";
 
 import SmartMarker from "../../../../src/components/views/location/SmartMarker";
 
@@ -27,7 +27,8 @@ jest.mock("../../../../src/utils/location/findMapStyleUrl", () => ({
 }));
 
 describe("<SmartMarker />", () => {
-    const mockMap = new maplibregl.Map();
+    const mapOptions = { container: {} as unknown as HTMLElement, style: "" };
+    const mockMap = new maplibregl.Map(mapOptions);
     const mockMarker = new maplibregl.Marker();
 
     const defaultProps = {

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

@@ -17,14 +17,15 @@ limitations under the License.
 import React from "react";
 // eslint-disable-next-line deprecate/import
 import { mount } from "enzyme";
-import maplibregl from "maplibre-gl";
+import * as maplibregl from "maplibre-gl";
 import { act } from "react-dom/test-utils";
 
 import ZoomButtons from "../../../../src/components/views/location/ZoomButtons";
 import { findByTestId } from "../../../test-utils";
 
 describe("<ZoomButtons />", () => {
-    const mockMap = new maplibregl.Map();
+    const mapOptions = { container: {} as unknown as HTMLElement, style: "" };
+    const mockMap = new maplibregl.Map(mapOptions);
     const defaultProps = {
         map: mockMap,
     };

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

@@ -26,7 +26,7 @@ exports[`<LocationViewDialog /> renders map correctly 1`] = `
           "addControl": [MockFunction] {
             "calls": [
               [
-                mockConstructor {},
+                MockAttributionControl {},
                 "top-right",
               ],
             ],
@@ -94,7 +94,7 @@ exports[`<LocationViewDialog /> renders map correctly 1`] = `
           "addControl": [MockFunction] {
             "calls": [
               [
-                mockConstructor {},
+                MockAttributionControl {},
                 "top-right",
               ],
             ],

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

@@ -18,7 +18,7 @@ import React from "react";
 // eslint-disable-next-line deprecate/import
 import { mount } from "enzyme";
 import { act } from "react-dom/test-utils";
-import maplibregl from "maplibre-gl";
+import * as maplibregl from "maplibre-gl";
 import { BeaconEvent, getBeaconInfoIdentifier, RelationType, MatrixEvent, EventType } from "matrix-js-sdk/src/matrix";
 import { Relations } from "matrix-js-sdk/src/models/relations";
 import { M_BEACON } from "matrix-js-sdk/src/@types/beacon";
@@ -48,7 +48,8 @@ describe("<MBeaconBody />", () => {
     const roomId = "!room:server";
     const aliceId = "@alice:server";
 
-    const mockMap = new maplibregl.Map();
+    const mapOptions = { container: {} as unknown as HTMLElement, style: "" };
+    const mockMap = new maplibregl.Map(mapOptions);
     const mockMarker = new maplibregl.Marker();
 
     const mockClient = getMockClientWithEventEmitter({
@@ -81,10 +82,6 @@ describe("<MBeaconBody />", () => {
 
     const modalSpy = jest.spyOn(Modal, "createDialog").mockReturnValue(undefined);
 
-    beforeAll(() => {
-        maplibregl.AttributionControl = jest.fn();
-    });
-
     beforeEach(() => {
         jest.clearAllMocks();
     });

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

@@ -19,7 +19,7 @@ import React from "react";
 import { mount } from "enzyme";
 import { LocationAssetType } from "matrix-js-sdk/src/@types/location";
 import { ClientEvent, RoomMember } from "matrix-js-sdk/src/matrix";
-import maplibregl from "maplibre-gl";
+import * as maplibregl from "maplibre-gl";
 import { logger } from "matrix-js-sdk/src/logger";
 import { act } from "react-dom/test-utils";
 import { SyncState } from "matrix-js-sdk/src/sync";
@@ -35,6 +35,7 @@ import { makeLocationEvent } from "../../../test-utils/location";
 import { getMockClientWithEventEmitter } from "../../../test-utils";
 
 describe("MLocationBody", () => {
+    const mapOptions = { container: {} as unknown as HTMLElement, style: "" };
     describe("<MLocationBody>", () => {
         const roomId = "!room:server";
         const userId = "@user:server";
@@ -60,7 +61,7 @@ describe("MLocationBody", () => {
                 wrappingComponentProps: { value: mockClient },
             });
         const getMapErrorComponent = () => {
-            const mockMap = new maplibregl.Map();
+            const mockMap = new maplibregl.Map(mapOptions);
             mockClient.getClientWellKnown.mockReturnValue({
                 [TILE_SERVER_WK_KEY.name]: { map_style_url: "bad-tile-server.com" },
             });
@@ -73,10 +74,6 @@ describe("MLocationBody", () => {
             return component;
         };
 
-        beforeAll(() => {
-            maplibregl.AttributionControl = jest.fn();
-        });
-
         beforeEach(() => {
             jest.clearAllMocks();
         });
@@ -131,7 +128,7 @@ describe("MLocationBody", () => {
             });
 
             it("renders map correctly", () => {
-                const mockMap = new maplibregl.Map();
+                const mockMap = new maplibregl.Map(mapOptions);
                 const component = getComponent();
 
                 expect(component).toMatchSnapshot();
@@ -154,7 +151,7 @@ describe("MLocationBody", () => {
             });
 
             it("renders marker correctly for a non-self share", () => {
-                const mockMap = new maplibregl.Map();
+                const mockMap = new maplibregl.Map(mapOptions);
                 const component = getComponent();
 
                 expect(component.find("SmartMarker").at(0).props()).toEqual(

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

@@ -131,11 +131,11 @@ exports[`MLocationBody <MLocationBody> without error renders map correctly 1`] =
                     "addControl": [MockFunction] {
                       "calls": [
                         [
-                          mockConstructor {},
+                          MockAttributionControl {},
                           "top-right",
                         ],
                         [
-                          mockConstructor {},
+                          MockAttributionControl {},
                           "top-right",
                         ],
                       ],

yarn.lock

@@ -1470,7 +1470,7 @@
     "@jridgewell/resolve-uri" "3.1.0"
     "@jridgewell/sourcemap-codec" "1.4.14"
 
-"@mapbox/geojson-rewind@^0.5.0":
+"@mapbox/geojson-rewind@^0.5.2":
   version "0.5.2"
   resolved "https://registry.yarnpkg.com/@mapbox/geojson-rewind/-/geojson-rewind-0.5.2.tgz#591a5d71a9cd1da1a0bf3420b3bea31b0fc7946a"
   integrity sha512-tJaT+RbYGJYStt7wI3cq4Nl4SXxG8W7JDG5DMJu97V25RnbNg3QtQtf+KD+VLjNpWKYsRvXDNmNrBgEETr1ifA==
@@ -1478,35 +1478,30 @@
     get-stream "^6.0.1"
     minimist "^1.2.6"
 
-"@mapbox/geojson-types@^1.0.2":
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/@mapbox/geojson-types/-/geojson-types-1.0.2.tgz#9aecf642cb00eab1080a57c4f949a65b4a5846d6"
-  integrity sha512-e9EBqHHv3EORHrSfbR9DqecPNn+AmuAoQxV6aL8Xu30bJMJR1o8PZLZzpk1Wq7/NfCbuhmakHTPYRhoqLsXRnw==
-
 "@mapbox/jsonlint-lines-primitives@^2.0.2":
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/@mapbox/jsonlint-lines-primitives/-/jsonlint-lines-primitives-2.0.2.tgz#ce56e539f83552b58d10d672ea4d6fc9adc7b234"
   integrity sha512-rY0o9A5ECsTQRVhv7tL/OyDpGAoUB4tTvLiW1DSzQGq4bvTPhNw1VpSNjDJc5GFZ2XuyOtSWSVN05qOtcD71qQ==
 
-"@mapbox/mapbox-gl-supported@^1.5.0":
+"@mapbox/mapbox-gl-supported@^2.0.1":
-  version "1.5.0"
+  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/@mapbox/mapbox-gl-supported/-/mapbox-gl-supported-1.5.0.tgz#f60b6a55a5d8e5ee908347d2ce4250b15103dc8e"
+  resolved "https://registry.yarnpkg.com/@mapbox/mapbox-gl-supported/-/mapbox-gl-supported-2.0.1.tgz#c15367178d8bfe4765e6b47b542fe821ce259c7b"
-  integrity sha512-/PT1P6DNf7vjEEiPkVIRJkvibbqWtqnyGaBz3nfRdcxclNSnSdaLU5tfAgcD7I8Yt5i+L19s406YLl1koLnLbg==
+  integrity sha512-HP6XvfNIzfoMVfyGjBckjiAOQK9WfX0ywdLubuPMPv+Vqf5fj0uCbgBQYpiqcWZT6cbyyRnTSXDheT1ugvF6UQ==
 
 "@mapbox/point-geometry@0.1.0", "@mapbox/point-geometry@^0.1.0", "@mapbox/point-geometry@~0.1.0":
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/@mapbox/point-geometry/-/point-geometry-0.1.0.tgz#8a83f9335c7860effa2eeeca254332aa0aeed8f2"
   integrity sha512-6j56HdLTwWGO0fJPlrZtdU/B13q8Uwmo18Ck2GnGgN9PCFyKTZ3UbXeEdRFh18i9XQ92eH2VdtpJHpBD3aripQ==
 
-"@mapbox/tiny-sdf@^1.1.1":
+"@mapbox/tiny-sdf@^2.0.5":
-  version "1.2.5"
+  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/@mapbox/tiny-sdf/-/tiny-sdf-1.2.5.tgz#424c620a96442b20402552be70a7f62a8407cc59"
+  resolved "https://registry.yarnpkg.com/@mapbox/tiny-sdf/-/tiny-sdf-2.0.5.tgz#cdba698d3d65087643130f9af43a2b622ce0b372"
-  integrity sha512-cD8A/zJlm6fdJOk6DqPUV8mcpyJkRz2x2R+/fYcWDYG3oWbG7/L7Yl/WqQ1VZCjnL9OTIMAn6c+BC5Eru4sQEw==
+  integrity sha512-OhXt2lS//WpLdkqrzo/KwB7SRD8AiNTFFzuo9n14IBupzIMa67yGItcK7I2W9D8Ghpa4T04Sw9FWsKCJG50Bxw==
 
-"@mapbox/unitbezier@^0.0.0":
+"@mapbox/unitbezier@^0.0.1":
-  version "0.0.0"
+  version "0.0.1"
-  resolved "https://registry.yarnpkg.com/@mapbox/unitbezier/-/unitbezier-0.0.0.tgz#15651bd553a67b8581fb398810c98ad86a34524e"
+  resolved "https://registry.yarnpkg.com/@mapbox/unitbezier/-/unitbezier-0.0.1.tgz#d32deb66c7177e9e9dfc3bbd697083e2e657ff01"
-  integrity sha512-HPnRdYO0WjFjRTSwO3frz1wKaU649OBFPX3Zo/2WZvuRi6zMiRGui8SnPQiQABgqCf8YikDe5t3HViTVw1WUzA==
+  integrity sha512-nMkuDXFv60aBr9soUG5q+GvZYL+2KZHVvsqFCzqnkGEf46U2fvmytHaEVc1/YZbiLn8X+eR3QzX1+dwDO1lxlw==
 
 "@mapbox/vector-tile@^1.3.1":
   version "1.3.1"
@@ -2070,7 +2065,7 @@
   dependencies:
     "@types/node" "*"
 
-"@types/geojson@^7946.0.8":
+"@types/geojson@*", "@types/geojson@^7946.0.10", "@types/geojson@^7946.0.8":
   version "7946.0.10"
   resolved "https://registry.yarnpkg.com/@types/geojson/-/geojson-7946.0.10.tgz#6dfbf5ea17142f7f9a043809f1cd4c448cb68249"
   integrity sha512-Nmh0K3iWQJzniTuPRcJn5hxXkfB1T1pgB89SBig5PlJQU5yocazeu4jATJlaA0GYFKWMqDdvYemoSnF2pXgLVA==
@@ -2146,6 +2141,20 @@
   resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.191.tgz#09511e7f7cba275acd8b419ddac8da9a6a79e2fa"
   integrity sha512-BdZ5BCCvho3EIXw6wUCXHe7rS53AIDPLE+JzwgT+OsJk53oBfbSmZZ7CX4VaRoN78N+TJpFi9QPlfIVNmJYWxQ==
 
+"@types/mapbox__point-geometry@*", "@types/mapbox__point-geometry@^0.1.2":
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/@types/mapbox__point-geometry/-/mapbox__point-geometry-0.1.2.tgz#488a9b76e8457d6792ea2504cdd4ecdd9860a27e"
+  integrity sha512-D0lgCq+3VWV85ey1MZVkE8ZveyuvW5VAfuahVTQRpXFQTxw03SuIf1/K4UQ87MMIXVKzpFjXFiFMZzLj2kU+iA==
+
+"@types/mapbox__vector-tile@^1.3.0":
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/@types/mapbox__vector-tile/-/mapbox__vector-tile-1.3.0.tgz#8fa1379dbaead1e1b639b8d96cfd174404c379d6"
+  integrity sha512-kDwVreQO5V4c8yAxzZVQLE5tyWF+IPToAanloQaSnwfXmIcJ7cyOrv8z4Ft4y7PsLYmhWXmON8MBV8RX0Rgr8g==
+  dependencies:
+    "@types/geojson" "*"
+    "@types/mapbox__point-geometry" "*"
+    "@types/pbf" "*"
+
 "@types/minimist@^1.2.0":
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/@types/minimist/-/minimist-1.2.2.tgz#ee771e2ba4b3dc5b372935d549fd9617bf345b8c"
@@ -2191,6 +2200,11 @@
   resolved "https://registry.yarnpkg.com/@types/parse5/-/parse5-6.0.3.tgz#705bb349e789efa06f43f128cef51240753424cb"
   integrity sha512-SuT16Q1K51EAVPz1K29DJ/sXjhSQ0zjvsypYJ6tlwVsRV9jwW5Adq2ch8Dq8kDBCkYnELS7N7VNCSB5nC56t/g==
 
+"@types/pbf@*", "@types/pbf@^3.0.2":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@types/pbf/-/pbf-3.0.2.tgz#8d291ad68b4b8c533e96c174a2e3e6399a59ed61"
+  integrity sha512-EDrLIPaPXOZqDjrkzxxbX7UlJSeQVgah3i0aA4pOSzmK9zq3BIh7/MZIQxED7slJByvKM4Gc6Hypyu2lJzh3SQ==
+
 "@types/prettier@^2.1.5":
   version "2.7.1"
   resolved "https://registry.yarnpkg.com/@types/prettier/-/prettier-2.7.1.tgz#dfd20e2dc35f027cdd6c1908e80a5ddc7499670e"
@@ -3783,7 +3797,7 @@ domutils@^3.0.1:
     domelementtype "^2.3.0"
     domhandler "^5.0.1"
 
-earcut@^2.2.2:
+earcut@^2.2.4:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/earcut/-/earcut-2.2.4.tgz#6d02fd4d68160c114825d06890a92ecaae60343a"
   integrity sha512-/pjZsA1b4RPHbeWZQn66SWS8nZZWLQQ23oE3Eam7aroEFGEvwKAsJfZ9ytiEMycfzXWpca4FA9QIOehf7PocBQ==
@@ -4787,7 +4801,7 @@ gfm.css@^1.1.2:
   resolved "https://registry.yarnpkg.com/gfm.css/-/gfm.css-1.1.2.tgz#94acfa600672663b9dd0fd4b6ee5d11c8dbc161e"
   integrity sha512-KhK3rqxMj+UTLRxWnfUA5n8XZYMWfHrrcCxtWResYR2B3hWIqBM6v9FPGZSlVuX+ScLewizOvNkjYXuPs95ThQ==
 
-gl-matrix@^3.2.1:
+gl-matrix@^3.4.3:
   version "3.4.3"
   resolved "https://registry.yarnpkg.com/gl-matrix/-/gl-matrix-3.4.3.tgz#fc1191e8320009fd4d20e9339595c6041ddc22c9"
   integrity sha512-wcCp8vu8FT22BnvKVPjXa/ICBWRq/zjFfdofZy1WSpQZpphblv12/bOQLBC1rMM7SGOFS9ltVmKOHil5+Ml7gA==
@@ -4903,11 +4917,6 @@ grapheme-splitter@^1.0.4:
   resolved "https://registry.yarnpkg.com/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz#9cf3a665c6247479896834af35cf1dbb4400767e"
   integrity sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==
 
-grid-index@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/grid-index/-/grid-index-1.1.0.tgz#97f8221edec1026c8377b86446a7c71e79522ea7"
-  integrity sha512-HZRwumpOGUrHyxO5bqKZL0B0GlUpwtCAzZ42sgxUPniu33R1LSFH5yrIcBCHjkctCAh3mtWKcKd9J4vDDdeVHA==
-
 hard-rejection@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/hard-rejection/-/hard-rejection-2.1.0.tgz#1c6eda5c1685c63942766d79bb40ae773cecd883"
@@ -6341,34 +6350,35 @@ map-obj@^4.0.0:
   resolved "https://registry.yarnpkg.com/map-obj/-/map-obj-4.3.0.tgz#9304f906e93faae70880da102a9f1df0ea8bb05a"
   integrity sha512-hdN1wVrZbb29eBGiGjJbeP8JbKjq1urkHJ/LIP/NY48MZ1QVXUsQBV1G1zvYFHn1XE06cwjBsOI2K3Ulnj1YXQ==
 
-maplibre-gl@^1.15.2:
+maplibre-gl@^2.0.0:
-  version "1.15.3"
+  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/maplibre-gl/-/maplibre-gl-1.15.3.tgz#eebbdd6b4cba46c61a660d6fa1808fced126e24d"
+  resolved "https://registry.yarnpkg.com/maplibre-gl/-/maplibre-gl-2.4.0.tgz#2b53dbf526626bf4ee92ad4f33f13ef09e5af182"
-  integrity sha512-ZuOhLCNgp7Yl1L9uyKgZeuo7kKdewP0iWtmEXsZ/snp0JiVkR1Kl+m1rsfKT/wpm/O4zZ7mUGxF16cYbMIFDRA==
+  integrity sha512-csNFylzntPmHWidczfgCZpvbTSmhaWvLRj9e1ezUDBEPizGgshgm3ea1T5TCNEEBq0roauu7BPuRZjA3wO4KqA==
   dependencies:
-    "@mapbox/geojson-rewind" "^0.5.0"
+    "@mapbox/geojson-rewind" "^0.5.2"
-    "@mapbox/geojson-types" "^1.0.2"
     "@mapbox/jsonlint-lines-primitives" "^2.0.2"
-    "@mapbox/mapbox-gl-supported" "^1.5.0"
+    "@mapbox/mapbox-gl-supported" "^2.0.1"
     "@mapbox/point-geometry" "^0.1.0"
-    "@mapbox/tiny-sdf" "^1.1.1"
+    "@mapbox/tiny-sdf" "^2.0.5"
-    "@mapbox/unitbezier" "^0.0.0"
+    "@mapbox/unitbezier" "^0.0.1"
     "@mapbox/vector-tile" "^1.3.1"
     "@mapbox/whoots-js" "^3.1.0"
+    "@types/geojson" "^7946.0.10"
+    "@types/mapbox__point-geometry" "^0.1.2"
+    "@types/mapbox__vector-tile" "^1.3.0"
+    "@types/pbf" "^3.0.2"
     csscolorparser "~1.0.3"
-    earcut "^2.2.2"
+    earcut "^2.2.4"
     geojson-vt "^3.2.1"
-    gl-matrix "^3.2.1"
+    gl-matrix "^3.4.3"
-    grid-index "^1.1.0"
+    global-prefix "^3.0.0"
-    minimist "^1.2.6"
     murmurhash-js "^1.0.0"
     pbf "^3.2.1"
-    potpack "^1.0.1"
+    potpack "^1.0.2"
     quickselect "^2.0.0"
-    rw "^1.3.3"
+    supercluster "^7.1.5"
-    supercluster "^7.1.0"
     tinyqueue "^2.0.3"
-    vt-pbf "^3.1.1"
+    vt-pbf "^3.1.3"
 
 mathml-tag-names@^2.1.3:
   version "2.1.3"
@@ -7077,7 +7087,7 @@ posthog-js@1.36.0:
     fflate "^0.4.1"
     rrweb-snapshot "^1.1.14"
 
-potpack@^1.0.1:
+potpack@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/potpack/-/potpack-1.0.2.tgz#23b99e64eb74f5741ffe7656b5b5c4ddce8dfc14"
   integrity sha512-choctRBIV9EMT9WGAZHn3V7t0Z2pMQyl0EZE6pFc/6ml3ssw7Dlf/oAOvFwjm1HVsqfQN8GfeFyJ+d8tRzqueQ==
@@ -7672,11 +7682,6 @@ run-parallel@^1.1.9:
   dependencies:
     queue-microtask "^1.2.2"
 
-rw@^1.3.3:
-  version "1.3.3"
-  resolved "https://registry.yarnpkg.com/rw/-/rw-1.3.3.tgz#3f862dfa91ab766b14885ef4d01124bfda074fb4"
-  integrity sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ==
-
 rxjs@^7.5.1:
   version "7.5.7"
   resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-7.5.7.tgz#2ec0d57fdc89ece220d2e702730ae8f1e49def39"
@@ -8121,7 +8126,7 @@ stylelint@^14.9.1:
     v8-compile-cache "^2.3.0"
     write-file-atomic "^4.0.2"
 
-supercluster@^7.1.0:
+supercluster@^7.1.5:
   version "7.1.5"
   resolved "https://registry.yarnpkg.com/supercluster/-/supercluster-7.1.5.tgz#65a6ce4a037a972767740614c19051b64b8be5a3"
   integrity sha512-EulshI3pGUM66o6ZdH3ReiFcvHpM3vAigyK+vcxdjpJyEbIIrtbmBdY23mGgnI24uXiGFvrGq9Gkum/8U7vJWg==
@@ -8576,7 +8581,7 @@ verror@1.10.0:
     core-util-is "1.0.2"
     extsprintf "^1.2.0"
 
-vt-pbf@^3.1.1:
+vt-pbf@^3.1.3:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/vt-pbf/-/vt-pbf-3.1.3.tgz#68fd150756465e2edae1cc5c048e063916dcfaac"
   integrity sha512-2LzDFzt0mZKZ9IpVF2r69G9bXaP2Q2sArJCmcCgvfTdCCZzSyz4aCLoQyUilu37Ll56tCblIZrXFIjNUpGIlmA==