Improve map state management

packages/map-interface/src/helpers.ts

@@ -86,14 +86,15 @@ export function MapPaddingManager({
 export function MapMovedReporter({ onMapMoved = null }) {
   const mapRef = useMapRef();
   const dispatch = useMapDispatch();
+  const { isInitialized } = useMapStatus();
 
   const mapMovedCallback = useCallback(() => {
     const map = mapRef.current;
     if (map == null) return;
     const mapPosition = getMapPosition(map);
     dispatch({ type: "map-moved", payload: mapPosition });
     onMapMoved?.(mapPosition, map);
-  }, [mapRef.current, onMapMoved, dispatch]);
+  }, [onMapMoved, dispatch, isInitialized]);
 
   useEffect(() => {
     // Get the current value of the map. Useful for gradually moving away
@@ -120,6 +121,7 @@ export function MapLoadingReporter({
   const mapRef = useMapRef();
   const loadingRef = useRef(false);
   const dispatch = useMapDispatch();
+  const { isInitialized } = useMapStatus();
 
   useEffect(() => {
     const map = mapRef.current;
@@ -148,36 +150,35 @@ export function MapLoadingReporter({
       map?.off("sourcedataloading", loadingCallback);
       map?.off("idle", idleCallback);
     };
-  }, [ignoredSources, mapRef.current, mapIsLoading]);
+  }, [ignoredSources, mapIsLoading, isInitialized]);
   return null;
 }
 
 export function MapMarker({ position, setPosition, centerMarker = true }) {
   const mapRef = useMapRef();
   const markerRef = useRef(null);
+  const { isInitialized } = useMapStatus();
 
   useMapMarker(mapRef, markerRef, position);
 
-  const handleMapClick = useCallback(
-    (event: mapboxgl.MapMouseEvent) => {
+  useEffect(() => {
+    const map = mapRef.current;
+    if (map == null || setPosition == null) return;
+
+    const handleMapClick = (event: mapboxgl.MapMouseEvent) => {
       setPosition(event.lngLat, event, mapRef.current);
       // We should integrate this with the "easeToCenter" hook
       if (centerMarker) {
         mapRef.current?.flyTo({ center: event.lngLat, duration: 800 });
       }
-    }, // eslint-disable-next-line react-hooks/exhaustive-deps
-    [mapRef.current, setPosition]
-  );
+    };
+
+    map.on("click", handleMapClick);
 
-  useEffect(() => {
-    const map = mapRef.current;
-    if (map != null && setPosition != null) {
-      map.on("click", handleMapClick);
-    }
     return () => {
       map?.off("click", handleMapClick);
     };
-  }, [mapRef.current, setPosition]);
+  }, [setPosition, isInitialized]);
 
   return null;
 }

packages/map-interface/src/map-view/index.ts

@@ -119,26 +119,37 @@ export function MapView(props: MapViewProps) {
 
   useEffect(() => {
     if (style == null) return;
-    if (mapRef.current != null) {
+    let map = mapRef.current;
+    if (map != null) {
       console.log("Setting style", style);
-      mapRef.current.setStyle(style);
-      return;
+      map.setStyle(style);
+    } else {
+      console.log("Initializing map", style);
+      const map = initializeMap(ref.current, {
+        style,
+        projection,
+        mapPosition,
+        ...rest,
+      });
+      dispatch({ type: "set-map", payload: map, mapPosition });
+      map.setPadding(getMapPadding(ref, parentRef), { animate: false });
+      onMapLoaded?.(map);
     }
 
-    console.log("Initializing map", style);
-    const map = initializeMap(ref.current, {
-      style,
-      projection,
-      mapPosition,
-      ...rest,
-    });
-    map.setPadding(getMapPadding(ref, parentRef), { animate: false });
-    map.on("style.load", () => {
+    const loadCallback = () => {
       onStyleLoaded?.(map);
       dispatch({ type: "set-style-loaded", payload: true });
-    });
-    onMapLoaded?.(map);
-    dispatch({ type: "set-map", payload: map });
+    };
+
+    map = mapRef.current;
+    if (map.isStyleLoaded()) {
+      // Catch a race condition where the style is loaded before the callback is set
+      loadCallback();
+    }
+    map.on("style.load", loadCallback);
+    return () => {
+      map.off("style.load", loadCallback);
+    };
   }, [style]);
 
   const _computedMapPosition = useMapPosition();

packages/mapbox-react/src/context.ts

@@ -63,13 +63,16 @@ type MapAction =
   | { type: "set-initialized"; payload: boolean }
   | { type: "set-style-loaded"; payload: boolean }
   | { type: "map-moved"; payload: MapPosition }
-  | { type: "set-map"; payload: Map };
+  | { type: "set-map"; payload: Map; mapPosition?: MapPosition };
 
 function mapReducer(state: MapCtx, action: MapAction): MapCtx {
   switch (action.type) {
     case "set-map":
       return update(state, {
-        status: { isInitialized: { $set: true } },
+        status: {
+          isInitialized: { $set: true },
+        },
+        position: { $set: action.mapPosition ?? state.position },
       });
     case "set-loading":
       return update(state, { status: { isLoading: { $set: action.payload } } });
@@ -97,6 +100,7 @@ export function MapboxMapProvider({ children }) {
   );
 
   const dispatch = useCallback((action: MapAction) => {
+    console.log("Dispatching", action);
     if (action.type === "set-map") {
       mapRef.current = action.payload;
     }

packages/mapbox-react/src/focus-state.ts

@@ -167,7 +167,7 @@ export function useMapEaseTo(props: MapEaseToProps) {
     // Add the proposed update to the queue
     updateQueue.current.push({ bounds, padding, center, zoom });
 
-    const map = mapRef?.current;
+    const map = mapRef.current;
     if (map == null) {
       return;
     }
@@ -190,7 +190,7 @@ export function useMapEaseTo(props: MapEaseToProps) {
     map.once("moveend", () => {
       prevState.current = state;
     });
-  }, [bounds, padding, center, zoom, mapRef?.current, isInitialized]);
+  }, [bounds, padding, center, zoom, isInitialized]);
 
   /** Handle map resize events */
   useEffect(() => {
@@ -345,6 +345,7 @@ export function useFocusState(
 ) {
   const map = useMapRef();
   const [focusState, setFocusState] = useState<PositionFocusState | null>(null);
+  const { isInitialized } = useMapStatus();
 
   useEffect(() => {
     if (map.current == null || position == null) return;
@@ -357,7 +358,7 @@ export function useFocusState(
     return () => {
       map.current?.off("move", cb);
     };
-  }, [map.current, position]);
+  }, [isInitialized, position]);
 
   return focusState;
 }