Bump maplibre-gl to 3.0.0 and react-map-gl to 7.0.25 (#6)

* Bump maplibre-gl to 3.0.0 and react-map-gl to 7.0.25
* Remove temporary fixes no longer required for react-map-gl
* Use same maplibre-gl version for the included css as in package.json

package.json

@@ -29,14 +29,14 @@
     "i18next-browser-languagedetector": "^7.0.1",
     "i18next-http-backend": "^2.1.1",
     "lodash": "^4.17.21",
-    "maplibre-gl": "^3.0.0-pre.9",
+    "maplibre-gl": "^3.0.0",
     "mdi-material-ui": "^7.6.0",
     "mqtt": "^4.3.7",
     "process": "^0.11.10",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-i18next": "^12.2.0",
-    "react-map-gl": "^7.0.23",
+    "react-map-gl": "^7.0.25",
     "react-router-dom": "^6.8.1",
     "react-scripts": "^5.0.1",
     "react-svg": "^16.1.4",

public/index.html

@@ -35,7 +35,7 @@
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
     <link
-      href="https://unpkg.com/maplibre-gl@3.0.0-pre.5/dist/maplibre-gl.css"
+      href="https://unpkg.com/maplibre-gl@3.0.0/dist/maplibre-gl.css"
       rel="stylesheet"
     />
     <link

src/components/map/VehicleMapContainer.tsx

@@ -1,7 +1,6 @@
 import { useEffect, useRef } from 'react';
 
 import { Box, useTheme } from '@mui/material';
-import mapboxgl from 'mapbox-gl';
 import maplibregl from 'maplibre-gl';
 import { QualityHigh, QualityLow } from 'mdi-material-ui';
 import Map, {
@@ -24,32 +23,6 @@ import StopsLayer from './StopsLayer';
 import VehicleMarkerLayer from './VehicleMarkerLayer';
 import VehicleRouteLayer from './VehicleRouteLayer';
 
-/**
- * Temporary fix for https://github.com/visgl/react-map-gl/issues/2176 until it gets fixed.
- * Latest maplibregl no longer has built-in supported() method that react-map-gl assumes.
- */
-(
-  maplibregl as typeof maplibregl & {
-    supported: () => boolean;
-  }
-).supported = () => true;
-
-/**
- * Temporary fix for https://github.com/visgl/react-map-gl/issues/2166 until it gets fixed.
- * When react-map-gl Map gets reused (reuseMaps is true) it does not properly tell the
- * _resizeObserver of the reused instance to observe the new container.
- */
-const fixMapResizeObserver = (
-  map: mapboxgl.Map & {
-    _resizeObserver?: ResizeObserver;
-  }
-) => {
-  if (map._resizeObserver) {
-    map._resizeObserver.disconnect();
-    map._resizeObserver.observe(map.getContainer());
-  }
-};
-
 type VehicleMapContainerProps = {
   selectedVehicleId: number | null;
   station?: TrainStation;
@@ -93,12 +66,6 @@ const VehicleMapContainer = ({
     }
   }, [map, station]);
 
-  useEffect(() => {
-    if (map) {
-      fixMapResizeObserver(map.getMap());
-    }
-  }, [map]);
-
   return (
     <Map
       mapLib={maplibregl}