keplergl / keplergl/kepler.gl

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

Open
#3,252 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
12k
Forks
2k
Avg merge
1d 5h
Merged PRs (30d)
66

Description

## 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:
```python
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:

```python
resize_script = """
window.addEventListener('load', function() {
setTimeout(function() {
window.dispatchEvent(new Event('resize'));
}, 100);
});
"""
html = html.replace("", f"{resize_script}", 1)
```

**Note**: Don't use `` 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.

Contributor guide

No contributing guide indexed for this repository

Research direction

Start in bindings/kepler.gl-jupyter/js/lib/keplergl/main.js and reproduce the _repr_html_() page-load behavior using the provided Python example. Trace how the bundled React component calculates its initial dimensions and compare that with the resize path. Done means the map fills the viewport on the initial load in Firefox and Chrome without a manual resize.

Written by the indexing model from the issue text.

Assessment

Tech stack
python, react, typescript
Domain
data-visualization, frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.