fix: add isMapReady state to MarkerMap and use it for conditional rendering

Author: graffkevin

src/Features/MarkerMap/MarkerMap.tsx

@@ -54,6 +54,7 @@ const MarkerMap = ({
     coreStyle,
     coopGestures,
     route,
+    isMapReady,
   } = useMarkerMap({
     baseMapView,
     center,
@@ -105,31 +106,32 @@ const MarkerMap = ({
             onMapClick?.(e.lngLat.lng, e.lngLat.lat);
           }}
         >
-          {markers.filter(isValidMarker).map((m) => (
-            <Marker
-              key={m.id}
-              longitude={m.lng}
-              latitude={m.lat}
-              anchor="bottom"
-              onClick={(e) => {
-                e.originalEvent.stopPropagation();
-                m.id && handleMarkerClick(m.id, Boolean(m.Tooltip));
-              }}
-            >
-              <Box
-                component="div"
-                onMouseEnter={() => {
-                  m.id && handleMarkerHover(m.id, Boolean(m.Tooltip));
+          {isMapReady &&
+            markers.filter(isValidMarker).map((m) => (
+              <Marker
+                key={m.id}
+                longitude={m.lng}
+                latitude={m.lat}
+                anchor="bottom"
+                onClick={(e) => {
+                  e.originalEvent.stopPropagation();
+                  m.id && handleMarkerClick(m.id, Boolean(m.Tooltip));
                 }}
-                onMouseLeave={() => handleMarkerHover(null)}
-                style={{ cursor: m.Tooltip ? "pointer" : "default" }}
               >
-                {m.IconComponent ? <m.IconComponent {...m.iconProps} /> : <DefaultMarker color={m.color} variant={m.variant} />}
-              </Box>
-            </Marker>
-          ))}
+                <Box
+                  component="div"
+                  onMouseEnter={() => {
+                    m.id && handleMarkerHover(m.id, Boolean(m.Tooltip));
+                  }}
+                  onMouseLeave={() => handleMarkerHover(null)}
+                  style={{ cursor: m.Tooltip ? "pointer" : "default" }}
+                >
+                  {m.IconComponent ? <m.IconComponent {...m.iconProps} /> : <DefaultMarker color={m.color} variant={m.variant} />}
+                </Box>
+              </Marker>
+            ))}
 
-          {selectedMarker?.Tooltip && (
+          {isMapReady && selectedMarker?.Tooltip && (
             <Popup
               longitude={isNumber(selectedMarker.lng) ? selectedMarker.lng : 0}
               latitude={isNumber(selectedMarker.lat) ? selectedMarker.lat : 0}
@@ -145,7 +147,7 @@ const MarkerMap = ({
             </Popup>
           )}
 
-          {route && (
+          {isMapReady && route && (
             <Source type="geojson" data={route}>
               <Layer
                 type="line"

src/Features/MarkerMap/useMarkerMap.ts

@@ -27,6 +27,7 @@ const useMarkerMap = ({
   const mapRef = useRef<MapRef | null>(null);
   const [route, setRoute] = useState<Feature<LineString, GeoJsonProperties> | null>(null);
   const [selected, setSelected] = useState<string | number | null>(openPopup ?? null);
+  const [isMapReady, setIsMapReady] = useState(false);
 
   const initialCenter = useMemo(() => {
     if (isArray(center)) {
@@ -59,7 +60,9 @@ const useMarkerMap = ({
   const handleMapLoad = () => {
     const map = mapRef.current?.getMap?.();
     if (map) {
-      map.setStyle(mapStyle);
+      map.once("idle", () => {
+        setIsMapReady(true);
+      });
     }
   };
 
@@ -101,6 +104,7 @@ const useMarkerMap = ({
     handleMarkerClick,
     handleMarkerHover,
     initialCenter,
+    isMapReady,
     mapRef,
     route,
     selected,