VisLeafletFlowMap: Invalid LatLng object: (NaN, NaN)

[ereid7]

This error occurs when calling fitView on the component

Error in /turbo_modules/leaflet@1.7.1/dist/leaflet-src.js (1365:11)
Invalid LatLng object: (NaN, NaN)

Using firefox on mac

Instructions to reproduce:

1. Load the following stackblitz https://stackblitz.com/edit/react-ts-m4jm7q?file=App.tsx
2. Replace <maptiler-key> with maptiler kay
3. Click the toggle button in the web preview

[rokotyan]

@ereid7
When you call childRef.current.component?.leafletMap?.fitView() the div containing VisLeafletFlowMap is still hidden and has no dimensions, so Leaflet fails to do its internal math.

You can solve that by calling fitView() in the next frame by using requestAnimationFrame. Also I recommend calling the fitView method of the component itself, not of its internal leafletMap instance:

  useEffect(() => {
    if (!isHidden) {
      requestAnimationFrame(() => {
        childRef.current.component?.fitView();
      })
    }
  }, [isHidden]);

[ereid7]

@rokotyan Thanks for the response, this resolved my issue