keplergl-jupyter: Map doesn't fill viewport on initial render (requires resize event)

[yharby]

Description

When using keplergl Python package (v0.3.7) with _repr_html_() to serve the map in a web page, the map renders small on initial page load and only fills the full viewport after manually resizing the browser window.

Steps to Reproduce

1. Install keplergl: pip install keplergl==0.3.7
2. Generate HTML and serve it:

from keplergl import KeplerGl
kepler_map = KeplerGl()
html = kepler_map._repr_html_()
# Serve html via Flask/FastAPI/etc

3. Open the page in browser
4. Map appears small (not filling viewport)
5. Resize browser window → map expands to fill viewport

Expected Behavior

Map should fill the full viewport on initial page load without requiring a resize event.

Root Cause Analysis

The bundled React component in keplergl.html creates a div with inline styles width: 100vw; height: 100vh, but the Kepler.gl component doesn't correctly calculate its dimensions on initial render. It relies on window.resize events to recalculate dimensions.

Workaround

Inject a script to trigger a resize event after page load:

resize_script = """<script>
    window.addEventListener('load', function() {
        setTimeout(function() {
            window.dispatchEvent(new Event('resize'));
        }, 100);
    });
</script>"""
html = html.replace("</body></html>", f"{resize_script}</body></html>", 1)

Note: Don't use </body> alone as replacement target - it appears inside minified JS string literals.

Environment

• keplergl version: 0.3.7
• Browser: Firefox/Chrome (both affected)
• OS: macOS

Suggested Fix

The bindings/kepler.gl-jupyter/js/lib/keplergl/main.js could dispatch a resize event after initial render, or the component could use ResizeObserver for more reliable dimension calculation.