returning to the latest version of react-map-gl, changing browserlist to exclude internet explorer entirely

package-lock.json

@@ -54,7 +54,7 @@
         "react-horizontal-scrolling-menu": "^7.1.1",
         "react-infinite-scroller": "^1.2.6",
         "react-joyride": "^2.9.3",
-        "react-map-gl": "^7.1.9",
+        "react-map-gl": "^8.0.1",
         "react-phone-input-2": "^2.15.1",
         "react-router-dom": "^6.28.0",
         "react-virtualized-auto-sizer": "^1.0.25",
@@ -6597,6 +6597,41 @@
         "url": "https://opencollective.com/eslint"
       }
     },
+    "node_modules/@vis.gl/react-mapbox": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/@vis.gl/react-mapbox/-/react-mapbox-8.0.1.tgz",
+      "integrity": "sha512-s/OokvgK1T43Ev2/4hj21C0DKrf79nIigBCdYPtAkEX88qGLRQ5t5zCRqg5Zl+44xXfVxcVpX2/vWUKd9oYGKQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "mapbox-gl": ">=3.5.0",
+        "react": ">=16.3.0",
+        "react-dom": ">=16.3.0"
+      },
+      "peerDependenciesMeta": {
+        "mapbox-gl": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vis.gl/react-maplibre": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/@vis.gl/react-maplibre/-/react-maplibre-8.0.1.tgz",
+      "integrity": "sha512-IFguo7DKIDZ9U9uRI4thZRfc5aTHEH4lWlIjedBeCpLeMm7wdrqtU2JshyEQt8dDO85kkEE7CbrtjMx5MplaoA==",
+      "license": "MIT",
+      "dependencies": {
+        "@maplibre/maplibre-gl-style-spec": "^19.2.1"
+      },
+      "peerDependencies": {
+        "maplibre-gl": ">=4.0.0",
+        "react": ">=16.3.0",
+        "react-dom": ">=16.3.0"
+      },
+      "peerDependenciesMeta": {
+        "maplibre-gl": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@vitejs/plugin-react": {
       "version": "4.3.4",
       "integrity": "sha512-SCCPBJtYLdE8PX/7ZQAs1QAZ8Jqwih+0VBLum1EGqmCCQal+MIUqLCzj3ZUy8ufbC0cAM4LRlSTm7IQJwWT4ug==",
@@ -11323,17 +11358,17 @@
       }
     },
     "node_modules/react-map-gl": {
-      "version": "7.1.9",
+      "version": "8.0.1",
-      "resolved": "https://registry.npmjs.org/react-map-gl/-/react-map-gl-7.1.9.tgz",
+      "resolved": "https://registry.npmjs.org/react-map-gl/-/react-map-gl-8.0.1.tgz",
-      "integrity": "sha512-KsCc8Gyn05wVGlHZoopaiiCr0RCAQ6LDISo5sEy1/pV/d7RlozkF946tiX7IgyijJQMRujHol5QdwUPESjh73w==",
+      "integrity": "sha512-VQjLcZdtyJCPXxy5xVL2QIgfA+YG3v+PzSdt07WWbVmXFhV4wUuy6DZSQYDdfqVH2BujKo/ImdL5zfEJApRnpg==",
       "license": "MIT",
       "dependencies": {
-        "@maplibre/maplibre-gl-style-spec": "^19.2.1",
+        "@vis.gl/react-mapbox": "8.0.1",
-        "@types/mapbox-gl": ">=1.0.0"
+        "@vis.gl/react-maplibre": "8.0.1"
       },
       "peerDependencies": {
         "mapbox-gl": ">=1.13.0",
-        "maplibre-gl": ">=1.13.0 <5.0.0",
+        "maplibre-gl": ">=1.13.0",
         "react": ">=16.3.0",
         "react-dom": ">=16.3.0"
       },

package.json

@@ -64,7 +64,7 @@
     "react-horizontal-scrolling-menu": "^7.1.1",
     "react-infinite-scroller": "^1.2.6",
     "react-joyride": "^2.9.3",
-    "react-map-gl": "^7.1.9",
+    "react-map-gl": "^8.0.1",
     "react-phone-input-2": "^2.15.1",
     "react-router-dom": "^6.28.0",
     "react-virtualized-auto-sizer": "^1.0.25",
@@ -107,7 +107,7 @@
       "not safari < 10",
       "not chrome < 51",
       "not android < 5",
-      "not ie < 12"
+      "not ie"
     ],
     "development": [
       "last 1 chrome version",

src/common/MapGL.tsx

@@ -3,7 +3,7 @@ import { Beenhere } from "@mui/icons-material";
 import { useThemeType } from "hooks";
 import moment from "moment";
 import React, { useEffect, useState } from "react";
-import Map, { Marker } from "react-map-gl";
+import Map, { Marker } from "react-map-gl/mapbox-legacy";
 
 const MAPBOX_TOKEN = import.meta.env.VITE_MAPBOX_ACCESS_TOKEN;
 

src/maps/MapBase.tsx

@@ -33,7 +33,7 @@ import { GeometryMapping, shapeFromCoords } from "models/GeometryMapping";
 import { FeatureCollection, Feature } from "geojson";
 import DrawController from "./mapControllers/drawController";
 //import { Geometry } from "geojson";
-import Map, { MapLayerMouseEvent, MapRef, Marker, MarkerDragEvent } from "react-map-gl";
+import Map, { MapRef, Marker, MarkerDragEvent } from "react-map-gl/mapbox-legacy";
 import { getDistanceUnit } from "utils";
 import { MapMouseEvent } from "mapbox-gl";
 import { makeStyles } from "@mui/styles";
@@ -109,7 +109,7 @@ export interface MeasurementData {
 
 interface Props {
   mapTools: JSX.Element;
-  mapClick(mapClickEvent: MapLayerMouseEvent): void;
+  mapClick(mapClickEvent: MapMouseEvent): void;
   currentView: ViewData;
   ignoreHomeLoad?: boolean;
   defaultMapStyle?: string;
@@ -419,7 +419,7 @@ export default function MapBase(props: Props) {
     );
   };
 
-  const mapClick = (event: MapLayerMouseEvent) => {
+  const mapClick = (event: MapMouseEvent) => {
     if (!watching) {
       props.mapClick(event);
     }

src/maps/mapControllers/Geocoder.tsx

@@ -1,4 +1,4 @@
-import { ControlPosition, useMap } from "react-map-gl";
+import { ControlPosition, useMap } from "react-map-gl/mapbox-legacy";
 import MapboxGeocoder, { Result } from "@mapbox/mapbox-gl-geocoder";
 import { useEffect, useState } from "react";
 

src/maps/mapControllers/drawController.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useRef } from "react";
-import { useMap } from "react-map-gl";
+import { useMap } from "react-map-gl/mapbox-legacy";
 import { FeatureCollection } from "geojson";
 import MapboxDraw from "@mapbox/mapbox-gl-draw";
 

src/maps/mapMarkers/Markers.tsx

@@ -5,7 +5,7 @@ import { useMobile } from "hooks";
 import { clone } from "lodash";
 import { pond } from "protobuf-ts/pond";
 import React, { useCallback, useEffect, useState } from "react";
-import { Marker } from "react-map-gl";
+import { Marker } from "react-map-gl/mapbox-legacy";
 
 //interface for markers
 export interface MarkerData {