keplergl-jupyter: Map doesn't fill viewport on initial render (requires resize event)
- 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