[v7] Bug fixes (#1673)

src/components/layer.ts

@@ -25,7 +25,7 @@ function updateLayer(map: MapboxMap, id: string, props: LayerProps, prevProps: L
   if (beforeId !== prevProps.beforeId) {
     map.moveLayer(id, beforeId);
   }
-  if (props.layout !== prevProps.layout) {
+  if (layout !== prevProps.layout) {
     const prevLayout = prevProps.layout || {};
     for (const key in layout) {
       if (!deepEqual(layout[key], prevLayout[key])) {
@@ -38,7 +38,7 @@ function updateLayer(map: MapboxMap, id: string, props: LayerProps, prevProps: L
       }
     }
   }
-  if (props.paint !== prevProps.paint) {
+  if (paint !== prevProps.paint) {
     const prevPaint = prevProps.paint || {};
     for (const key in paint) {
       if (!deepEqual(paint[key], prevPaint[key])) {
@@ -51,7 +51,7 @@ function updateLayer(map: MapboxMap, id: string, props: LayerProps, prevProps: L
       }
     }
   }
-  if (!deepEqual(props.filter, prevProps.filter)) {
+  if (!deepEqual(filter, prevProps.filter)) {
     map.setFilter(id, filter);
   }
   if (minzoom !== prevProps.minzoom || maxzoom !== prevProps.maxzoom) {

src/components/popup.ts

@@ -94,7 +94,7 @@ function Popup(props: PopupProps) {
     popup.setLngLat([props.longitude, props.latitude]);
   }
   // @ts-ignore
-  if (props.offset && deepEqual(popup.options.offset, props.offset)) {
+  if (props.offset && !deepEqual(popup.options.offset, props.offset)) {
     popup.setOffset(props.offset);
   }
   // @ts-ignore

src/components/source.ts

@@ -99,21 +99,14 @@ function Source(props: SourceProps) {
 
       return () => {
         map.off('styledata', forceUpdate);
-        /* global requestAnimationFrame */
-        // Do not remove source immediately because the
-        // dependent <Layer>s' componentWillUnmount() might not have been called
-        // Removing source before dependent layers will throw error
-        // TODO - find a more robust solution
-        requestAnimationFrame(() => {
-          // @ts-ignore
-          if (map.style && map.style._loaded && map.getSource(id)) {
-            map.removeSource(id);
-          }
-        });
+        // @ts-ignore
+        if (map.style && map.style._loaded && map.getSource(id)) {
+          map.removeSource(id);
+        }
       };
     }
     return undefined;
-  }, [map, id]);
+  }, []);
 
   // @ts-ignore
   let source = map && map.style && map.getSource(id);

src/components/use-map.tsx

@@ -14,24 +14,25 @@ export const MountedMapsContext = React.createContext<MountedMapsContextValue>(n
 export const MapProvider: React.FC<{}> = props => {
   const [maps, setMaps] = useState<{[id: string]: MapRef}>({});
 
-  const onMapMount = useCallback(
-    (map: MapRef, id: string = 'default') => {
-      if (maps[id]) {
+  const onMapMount = useCallback((map: MapRef, id: string = 'default') => {
+    setMaps(currMaps => {
+      if (currMaps[id]) {
         throw new Error(`Multiple maps with the same id: ${id}`);
       }
-      setMaps({...maps, [id]: map});
-    },
-    [maps]
-  );
+      return {...currMaps, [id]: map};
+    });
+  }, []);
 
-  const onMapUnmount = useCallback(
-    (id: string = 'default') => {
-      const nextMaps = {...maps};
-      delete nextMaps[id];
-      setMaps(nextMaps);
-    },
-    [maps]
-  );
+  const onMapUnmount = useCallback((id: string = 'default') => {
+    setMaps(currMaps => {
+      if (currMaps[id]) {
+        const nextMaps = {...currMaps};
+        delete nextMaps[id];
+        return nextMaps;
+      }
+      return currMaps;
+    });
+  }, []);
 
   return (
     <MountedMapsContext.Provider

src/mapbox/mapbox.ts

@@ -1,8 +1,9 @@
-import {Transform, transformToViewState, applyViewStateToTransform} from '../utils/transform';
+import {transformToViewState, applyViewStateToTransform} from '../utils/transform';
 import {normalizeStyle} from '../utils/style-utils';
 import {deepEqual} from '../utils/deep-equal';
 
 import type {
+  Transform,
   ProjectionSpecification,
   ViewState,
   ViewStateChangeEvent,

src/types/index.ts

@@ -1,4 +1,27 @@
+import {PaddingOptions, LngLat, Point, LngLatBounds} from 'mapbox-gl';
+
 export * from './external';
 
 // re-export mapbox types
 export type {AnyLayer, AnySourceData, AnySourceImpl, Popup as MapboxPopup} from 'mapbox-gl';
+
+/**
+ * Stub for mapbox's Transform class
+ * https://github.com/mapbox/mapbox-gl-js/blob/main/src/geo/transform.js
+ */
+export type Transform = {
+  width: number;
+  height: number;
+  center: {lng: number; lat: number};
+  zoom: number;
+  bearing: number;
+  pitch: number;
+  padding: PaddingOptions;
+
+  clone: () => Transform;
+  resize: (width: number, height: number) => void;
+  isPaddingEqual: (value: PaddingOptions) => boolean;
+  getBounds: () => LngLatBounds;
+  locationPoint: (lngLat: LngLat) => Point;
+  pointLocation: (p: Point) => LngLat;
+};

src/utils/style-utils.ts

@@ -15,6 +15,9 @@ export function normalizeStyle(style: string | MapboxStyle | ImmutableLike): str
   if ('toJS' in style) {
     style = style.toJS() as MapboxStyle;
   }
+  if (!style.layers) {
+    return style;
+  }
   const layerIndex = {};
 
   for (const layer of style.layers) {

src/utils/transform.ts

@@ -1,25 +1,7 @@
 import mapboxgl from './mapboxgl';
 
 import type {MapboxProps} from '../mapbox/mapbox';
-import type {PaddingOptions, ViewState} from '../types';
-
-/**
- * Stub for mapbox's Transform class
- * https://github.com/mapbox/mapbox-gl-js/blob/main/src/geo/transform.js
- */
-export type Transform = {
-  width: number;
-  height: number;
-  center: {lng: number; lat: number};
-  zoom: number;
-  bearing: number;
-  pitch: number;
-  padding: PaddingOptions;
-
-  clone: () => Transform;
-  resize: (width: number, height: number) => void;
-  isPaddingEqual: (value: PaddingOptions) => boolean;
-};
+import type {Transform, ViewState} from '../types';
 
 /**
  * Capture a transform's current state

src/utils/use-isomorphic-layout-effect.ts

@@ -2,6 +2,6 @@
 // useLayoutEffect but does not trigger warning in server-side rendering
 import {useEffect, useLayoutEffect} from 'react';
 
-const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
+const useIsomorphicLayoutEffect = typeof document !== 'undefined' ? useLayoutEffect : useEffect;
 
 export default useIsomorphicLayoutEffect;