JavaFX WebView is kinda stuck in the past when it comes to WebGL support, which is exactly what MapLibre needs. That's why it works fine when you open the HTML directly in Chrome but WebView just gives you a blank screen.

A couple ways you could go with this:

You could try using CDN links instead of local files - sometimes WebView gets weird with those relative paths. Something like:

HTML

<link href="https://cdn.jsdelivr.net/npm/maplibre-gl/dist/maplibre-gl.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/maplibre-gl/dist/maplibre-gl.js"></script>

Honestly though? For a school project, I'd probably just ditch WebView entirely and grab GMapsFX or JxMaps. Saved me a ton of headaches when I was working on something similar.

in my understating try using logging to help understand what is actually failing , my advice would be to ditch webView for now cause of compatibility issue this does not answer your question but might help you move in right direction for this