r/JavaFX

Hi everyone,

I am embedding Leaflet inside JavaFX WebView for a profile location picker.

The map initializes, marker appears, and controls render, but most of the map area becomes gray or partially painted (only a portion of tiles is visible).

From my screenshot:

- Zoom controls are visible.

- Marker is visible.

- Some map tiles render in a small region.

- Large area stays gray / not fully repainted.

Environment:

- Java: 25

- JavaFX: ${javafx.version} (I dont know if it will be the latest or not)

- Leaflet: 1.9.4 loaded from unpkg CDN

- OS: Windows

Expected:

- Leaflet should fill the full WebView map area and repaint correctly after layout/resize.

Actual:

- Only part of the map paints; remaining region stays gray.

What I already do:

- Call map.invalidateSize() on load.

- Call map.invalidateSize() when WebView width/height changes.

- Update marker via JS bridge.

Minimal relevant code:

Leaflet HTML in WebView:

html, body { width: 100%; height: MAP_HEIGHT_PX; margin: 0; padding: 0; overflow: hidden; }

#map { width: 100%; height: MAP_HEIGHT_PX; border-radius: 12px; }

var map = L.map('map', { zoomControl: true, preferCanvas: true }).setView([lat, lon], 11);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {

maxZoom: 19,

attribution: '© OpenStreetMap'

}).addTo(map);

window.updateMarker = function(lat, lon, name) {

map.setView([lat, lon], 11, { animate: false });

marker.setLatLng([lat, lon]);

if (name) marker.bindPopup(name).openPopup();

map.invalidateSize({ animate: false });

};

map.once('load', function() { map.invalidateSize(); });

Java side:

webView.widthProperty().addListener((obs, o, n) -> invalidateSize());

webView.heightProperty().addListener((obs, o, n) -> invalidateSize());

engine.loadContent(html);

public void invalidateSize() {

if (!ready) return;

Platform.runLater(() -> engine.executeScript("map.invalidateSize({animate:false});"));

}

Question:

- Is this a known JavaFX WebView + Leaflet repaint issue?

- Should I remove preferCanvas, delay first invalidateSize, or handle container sizing differently?

- Any robust pattern for Leaflet in JavaFX WebView that avoids partial tile rendering?

If needed, I can share the full helper class.

Thanks a lot.