Map misaligned inside a modal, drawer or tab

• After the modal opens, only half the map is drawn and the rest is grey until you drag or zoom.
• Switching back to a tab shows a blank map that only reappears after a zoom.
• The map behaves normally on the main page and only fails inside the dialog.

1. Determine whether the container was hidden at the moment of initialisation.
2. If so, create the map after the modal transition ends rather than on page load.
3. If initialisation must happen early, call invalidateSize() or updateSize() when the container becomes visible.
4. Attach a debounced ResizeObserver for layouts that change size dynamically.
5. For Cesium, call viewer.resize() or viewer.scene.requestRender(), especially with requestRenderMode enabled.

Initialise once the container is visible, or call map.invalidateSize() in Leaflet / map.updateSize() in OpenLayers on show; debounce a ResizeObserver so layout-driven size changes are handled centrally.

function openDialog() {
  dialog.style.display = 'block';
  requestAnimationFrame(function () {
    if (!map) {
      map = L.map('map', { center: [39.9, 116.4], zoom: 12 });
      L.tileLayer(url).addTo(map);
    }
  });
}

// Leaflet
map.invalidateSize();

// OpenLayers
map.updateSize();

• Calling invalidateSize() during the open animation, which measures an intermediate size.
• Creating a new map instance every time the modal opens, leaking listeners and canvases.