upgrade react-map-gl

wri · Jan 15, 2025 · a2a8ade · a2a8ade
1 parent dfd4198
commit a2a8ade
Show file tree

Hide file tree

Showing 12 changed files with 265 additions and 168 deletions.
diff --git a/components/map/index.js b/components/map/index.js
@@ -6,7 +6,7 @@ import * as Sentry from "@sentry/nextjs";
 import isEqual from 'react-fast-compare';
 import { isEmpty } from 'utils/general';
 
-import ReactMapGL, { FlyToInterpolator } from 'react-map-gl';
+import ReactMapGL from 'react-map-gl';
 import { fitBounds } from 'viewport-mercator-project';
 
 const DEFAULT_VIEWPORT = {
@@ -15,6 +15,20 @@ const DEFAULT_VIEWPORT = {
   longitude: 0
 };
 
+function transformRequest(uri) {
+  if (uri.startsWith(process.env.OTP_API)) {
+    return {
+      url: uri,
+      headers: {
+        'Content-Type': 'application/json',
+        'OTP-API-KEY': process.env.OTP_API_KEY
+      }
+    };
+  }
+
+  return null;
+}
+
 class Map extends Component {
   HOVER = {};
   CLICK = {};
@@ -73,9 +87,6 @@ class Map extends Component {
     /** A function that exposes mouseleave from features. */
     onMouseLeave: PropTypes.func,
 
-    /** A function that exposes the viewport */
-    getCursor: PropTypes.func,
-
     /** A string that defines the language for mapbox labels */
     language: PropTypes.string
   };
@@ -87,15 +98,7 @@ class Map extends Component {
     bounds: {},
     dragPan: true,
     dragRotate: true,
-
-    onViewportChange: () => {},
-    onLoad: () => {},
-    onReady: () => {},
-    getCursor: ({ isHovering, isDragging }) => {
-      if (isHovering) return 'pointer';
-      if (isDragging) return 'grabbing';
-      return 'grab';
-    }
+    scrollZoom: true,
   };
 
   state = {
@@ -154,6 +157,7 @@ class Map extends Component {
 
   componentWillUnmount() {
     const { onUnmount } = this.props;
+    if (this.deckInitializedInterval) clearInterval(this.deckInitializedInterval);
     if (onUnmount) onUnmount();
   }
 
@@ -167,7 +171,7 @@ class Map extends Component {
       }
     });
 
-    onReady({
+    onReady && onReady({
       map: this.map,
       mapContainer: this.mapContainer
     });
@@ -185,8 +189,9 @@ class Map extends Component {
     });
 
     this.setLocalizedLabels();
+    this.fixCursorChange();
 
-    onLoad({
+    onLoad && onLoad({
       map: this.map,
       mapContainer: this.mapContainer
     });
@@ -196,7 +201,7 @@ class Map extends Component {
     const { onViewportChange } = this.props;
 
     this.setState({ viewport: v });
-    onViewportChange(v);
+    onViewportChange && onViewportChange(v);
   };
 
   onResize = (v) => {
@@ -208,38 +213,15 @@ class Map extends Component {
     };
 
     this.setState({ viewport: newViewport });
-    onViewportChange(newViewport);
+    onViewportChange && onViewportChange(newViewport);
   };
 
-  onMoveEnd = () => {
-    const { onViewportChange } = this.props;
-    const { viewport } = this.state;
-
-    if (this.map) {
-      const bearing = this.map.getBearing();
-      const pitch = this.map.getPitch();
-      const zoom = this.map.getZoom();
-      const { lng, lat } = this.map.getCenter();
-
-      const newViewport = {
-        ...viewport,
-        bearing,
-        pitch,
-        zoom,
-        latitude: lat,
-        longitude: lng
-      };
-
-      // Publish new viewport and save it into the state
-      this.setState({ viewport: newViewport });
-      onViewportChange(newViewport);
-    }
-  };
-
-  onHover = e => {
+  onMouseMove = e => {
     const { onHover } = this.props;
     const { features } = e;
-    if (!!onHover && features && features.length) {
+
+    // hover state for the feature under the mouse on the map
+    if (!!features && features.length) {
       const { id, source, sourceLayer } = features[0];
 
       if (this.HOVER.id) {
@@ -270,8 +252,15 @@ class Map extends Component {
     !!onHover && onHover(e);
   };
 
+  onMouseEnter = e => {
+    this.map.getCanvas().style.cursor = "pointer";
+    this.isHovering = true;
+  }
+
   onMouseLeave = e => {
     const { onMouseLeave } = this.props;
+    this.isHovering = false;
+    this.map.getCanvas().style.cursor = "";
     if (this.HOVER.id) {
       this.map.setFeatureState(
         {
@@ -286,9 +275,13 @@ class Map extends Component {
     !!onMouseLeave && onMouseLeave(e);
   };
 
+  onMove = e => {
+    this.onViewportChange(e.viewState);
+  }
+
   fitBounds = (transitionDuration = 2500) => {
-    const { bounds, onViewportChange } = this.props;
-    const { bbox, options } = bounds;
+    const { bounds } = this.props;
+    const { bbox, options } = bounds || {};
 
     try {
       const { longitude, latitude, zoom } = fitBounds({
@@ -308,14 +301,14 @@ class Map extends Component {
         longitude,
         latitude,
         zoom: useMaxZoom ? options.maxZoom : zoom,
-        transitionDuration
+        duration: transitionDuration
       };
 
+      this.map.flyTo(newViewport);
+
       this.setState({
-        flying: true,
-        viewport: newViewport
+        flying: true
       });
-      onViewportChange(newViewport);
 
       setTimeout(() => {
         this.setState({ flying: false });
@@ -361,20 +354,32 @@ class Map extends Component {
     }
   }
 
+  fixCursorChange = () => {
+    this.deckInitializedInterval = setInterval(() => {
+      if (this.map && this.map.__deck) {
+        this.map.__deck.props.getCursor = () => {
+          return this.isHovering ? 'pointer' : '';
+        }
+        clearInterval(this.deckInitializedInterval);
+      }
+    }, 100);
+  }
+
   render() {
     const {
       customClass,
+      bounds,
       children,
-      getCursor,
       dragPan,
       dragRotate,
       scrollZoom,
       touchZoom,
       touchRotate,
       doubleClickZoom,
+      onClick,
       ...mapboxProps
     } = this.props;
-    const { viewport, loaded, flying } = this.state;
+    const { loaded, flying, viewport } = this.state;
 
     return (
       <div
@@ -390,13 +395,15 @@ class Map extends Component {
           ref={(map) => {
             this.map = map && map.getMap();
           }}
-          mapboxApiAccessToken={process.env.MAPBOX_API_KEY}
+          mapLib={import('mapbox-gl')}
+          mapboxAccessToken={process.env.MAPBOX_API_KEY}
+          mapStyle="mapbox://styles/mapbox/light-v9"
           // CUSTOM PROPS FROM REACT MAPBOX API
           {...mapboxProps}
+
           // VIEWPORT
           {...viewport}
-          width="100%"
-          height="100%"
+          style={{ width: '100%', height: '100%' }}
           // INTERACTIVE
           dragPan={!flying && dragPan}
           dragRotate={!flying && dragRotate}
@@ -405,14 +412,14 @@ class Map extends Component {
           touchRotate={!flying && touchRotate}
           doubleClickZoom={!flying && doubleClickZoom}
           // DEFAULT FUNC IMPLEMENTATIONS
-          onViewportChange={this.onViewportChange}
           onResize={this.onResize}
+          onClick={onClick}
           onLoad={this.onLoad}
-          onHover={this.onHover}
+          onMouseMove={this.onMouseMove}
+          onMouseEnter={this.onMouseEnter}
           onMouseLeave={this.onMouseLeave}
-          // getCursor={getCursor}
-
-          transitionInterpolator={new FlyToInterpolator()}
+          onMove={this.onMove}
+          transformRequest={transformRequest}
         >
           {loaded &&
             !!this.map &&

diff --git a/components/map/popup/component.js b/components/map/popup/component.js
@@ -26,16 +26,12 @@ class PopupComponent extends PureComponent {
     onClose: PropTypes.func
   };
 
-  componentDidUpdate(prevProps) {
-    const { popup } = this.props;
-    const { popup: prevPopup } = prevProps;
-
-    if (!isEmpty(popup) && !isEqual(popup, prevPopup)) {
-      window.removeEventListener('click', this.onClickOutside);
-      window.addEventListener('click', this.onClickOutside);
-    } else {
-      window.removeEventListener('click', this.onClickOutside);
-    }
+  componentDidMount() {
+    window.addEventListener('click', this.onClickOutside);
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('click', this.onClickOutside);
   }
 
   onClose = (e) => {
@@ -48,10 +44,10 @@ class PopupComponent extends PureComponent {
   onClickOutside = (e) => {
     if (!this.popup) return null;
 
-    const { _containerRef } = this.popup;
-    const { current } = _containerRef;
+    const clickedElement = e.target;
+    const popupContainer = this.popup._container;
 
-    if (!current.contains(e.target)) { this.onClose(); }
+    if (!clickedElement.classList.contains('mapboxgl-canvas') && !popupContainer.contains(clickedElement)) { this.onClose(); }
   }
 
   render() {
@@ -62,6 +58,7 @@ class PopupComponent extends PureComponent {
     return (
       <Popup
         {...popup}
+        maxWidth={null}
         ref={(r) => { this.popup = r; }}
         closeButton={false}
         closeOnClick={false}

diff --git a/components/operators-detail/fmus.js b/components/operators-detail/fmus.js
@@ -51,8 +51,6 @@ import { CERTIFICATIONS } from 'constants/fmu';
 
 import { withDeviceInfo } from 'hooks/use-device-info';
 
-import { transformRequest } from 'utils/map';
-
 class OperatorsDetailFMUs extends React.Component {
   componentDidMount() {
     const { fmus, fmu, operatorsDetailFmus } = this.props;
@@ -257,7 +255,6 @@ class OperatorsDetailFMUs extends React.Component {
         <div className="c-map-container -static">
           {/* Map */}
           <Map
-            mapStyle="mapbox://styles/mapbox/light-v9"
             language={this.props.language}
             bounds={fmu.bounds}
             // options
@@ -276,11 +273,7 @@ class OperatorsDetailFMUs extends React.Component {
                 .addEventListener('click', this.onCustomAttribute);
             }}
             // Options
-            transformRequest={transformRequest}
-            mapOptions={{
-              customAttribution:
-                '<a id="forest-atlas-attribution" href="http://cod.forest-atlas.org/?l=en" rel="noopener noreferrer" target="_blank">Forest Atlas</a>',
-            }}
+            customAttribution='<a id="forest-atlas-attribution" href="http://cod.forest-atlas.org/?l=en" rel="noopener noreferrer" target="_blank">Forest Atlas</a>'
           >
             {(map) => (
               <Fragment>

diff --git a/components/ui/map-sub-component.js b/components/ui/map-sub-component.js
@@ -8,8 +8,6 @@ import Spinner from 'components/ui/spinner';
 
 import { PALETTE_COLOR_1 } from 'constants/rechart';
 
-import { transformRequest } from 'utils/map';
-
 class MapSubComponent extends React.Component {
   static propTypes = {
     id: PropTypes.string,
@@ -38,7 +36,6 @@ class MapSubComponent extends React.Component {
 
             {/* Map */}
             <Map
-              mapStyle="mapbox://styles/mapbox/light-v9"
               language={this.props.language}
 
               // options
@@ -51,9 +48,6 @@ class MapSubComponent extends React.Component {
                 latitude: location.lat
               }}
               onViewportChange={this.setMapocation}
-
-              // Options
-              transformRequest={transformRequest}
             >
               {map => (
                 <Fragment>

diff --git a/components/ui/sawmill-modal.js b/components/ui/sawmill-modal.js
@@ -24,7 +24,6 @@ import MapControls from 'components/map/map-controls';
 import ZoomControl from 'components/map/controls/zoom-control';
 import LocationSearch from 'components/map/location-search';
 
-import { transformRequest } from 'utils/map';
 import CancelButton from '../form/CancelButton';
 
 class SawmillModal extends React.Component {
@@ -200,17 +199,13 @@ class SawmillModal extends React.Component {
 
                   {/* Map */}
                   <Map
-                    mapStyle="mapbox://styles/mapbox/light-v9"
                     language={this.props.language}
 
                     // viewport
                     viewport={sawmillMap.viewport}
                     onViewportChange={(location) => this.setMapLocation(location, setFormValues)}
 
                     onClick={this.onClick}
-
-                    // Options
-                    transformRequest={transformRequest}
                   >
                     {map => (
                       <Fragment>