From 3ab2e60cb9b66b6bf50dff42f658efec7df7e222 Mon Sep 17 00:00:00 2001 From: csawatzky Date: Wed, 7 May 2025 16:22:58 -0600 Subject: [PATCH] returning to the latest version of react-map-gl, changing browserlist to exclude internet explorer entirely --- package-lock.json | 49 ++++++++++++++++++---- package.json | 4 +- src/common/MapGL.tsx | 2 +- src/maps/MapBase.tsx | 6 +-- src/maps/mapControllers/Geocoder.tsx | 2 +- src/maps/mapControllers/drawController.tsx | 2 +- src/maps/mapMarkers/Markers.tsx | 2 +- 7 files changed, 51 insertions(+), 16 deletions(-) diff --git a/package-lock.json b/package-lock.json index 6cdfd73..af2a156 100644 --- a/package-lock.json +++ b/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", - "resolved": "https://registry.npmjs.org/react-map-gl/-/react-map-gl-7.1.9.tgz", - "integrity": "sha512-KsCc8Gyn05wVGlHZoopaiiCr0RCAQ6LDISo5sEy1/pV/d7RlozkF946tiX7IgyijJQMRujHol5QdwUPESjh73w==", + "version": "8.0.1", + "resolved": "https://registry.npmjs.org/react-map-gl/-/react-map-gl-8.0.1.tgz", + "integrity": "sha512-VQjLcZdtyJCPXxy5xVL2QIgfA+YG3v+PzSdt07WWbVmXFhV4wUuy6DZSQYDdfqVH2BujKo/ImdL5zfEJApRnpg==", "license": "MIT", "dependencies": { - "@maplibre/maplibre-gl-style-spec": "^19.2.1", - "@types/mapbox-gl": ">=1.0.0" + "@vis.gl/react-mapbox": "8.0.1", + "@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" }, diff --git a/package.json b/package.json index 2db9abb..bf76da1 100644 --- a/package.json +++ b/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", diff --git a/src/common/MapGL.tsx b/src/common/MapGL.tsx index 2d7980a..bbeadb0 100644 --- a/src/common/MapGL.tsx +++ b/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; diff --git a/src/maps/MapBase.tsx b/src/maps/MapBase.tsx index 86dc3ff..3ae82b0 100644 --- a/src/maps/MapBase.tsx +++ b/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); } diff --git a/src/maps/mapControllers/Geocoder.tsx b/src/maps/mapControllers/Geocoder.tsx index 56bff1a..162bc97 100644 --- a/src/maps/mapControllers/Geocoder.tsx +++ b/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"; diff --git a/src/maps/mapControllers/drawController.tsx b/src/maps/mapControllers/drawController.tsx index 8d80f54..a173888 100644 --- a/src/maps/mapControllers/drawController.tsx +++ b/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"; diff --git a/src/maps/mapMarkers/Markers.tsx b/src/maps/mapMarkers/Markers.tsx index 3e9ed25..9c1024e 100644 --- a/src/maps/mapMarkers/Markers.tsx +++ b/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 {