Menu
I have an application made with JavaFX 16 which contains a WebView used to show an interactive map using the Leaflet JS library.
I have a problem when I try to transition to JavaFX 17, the interactive map does not work anymore (it cannot be moved nor clicked, but it can be scrolled). I reproduced the bug on a minimal example with the OpenStreetMap website that uses Leaflet :
package test;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.StackPane;
import javafx.scene.web.WebView;
import javafx.stage.Stage;
public class App extends Application {
@Override
public void start(Stage stage) {
WebView webView = new WebView();
webView.getEngine().load("https://www.openstreetmap.org/");
Scene scene = new Scene(new StackPane(webView), 640, 480);
stage.setScene(scene);
stage.show();
}
public static void main(String[] args) {
launch();
}
}
The interactive map on the OpenStreetMap website is rendered correctly and can be zoomed in but it cannot be moved.
I am using Gradle to download JavaFX, this is my build.gradle :
plugins {
id 'application'
id 'org.openjfx.javafxplugin' version '0.0.10'
}
repositories {
mavenCentral()
}
javafx {
version = "17"
modules = [ 'javafx.controls', 'javafx.web']
}
application {
mainClass = 'test.App'
}
I reproduced the bug with versions :
but the map worked with versions :
So it seems that version 17 brings the issue.
Also I reproduced the bug on macOS 12 (M1 using x86 JavaFX with Rosetta) and on Ubuntu 20. So it does not seem to be an issue with JavaFX on macOS.
Other interactive maps such as Google map, Apple map and Bing map, worked with the same code as above, and MapBoxGL does not work because WebGL is not supported. So it seems that the issue is related to Leaflet.
So I wonder if it is a known issue, if anyone else has the same issue, or if it is an issue on my side ?
764
I have entered this into the JDK bug database because there seems to be a more general issue here. See: https://bugs.openjdk.java.net/browse/JDK-8276859 This is also not the only report about such an issue. See also: After Java update to the version 1.8.0_301 JavaFX WebView with Leaflet.Draw.Circle, Leaflet.Edit.Circle does not work as well as OSM is not draggable
58
It's nice to see that there are more of us looking into this.
I did some deeper investigation and was able to pinpoint the problem which consequently lead me to a workaround/hack which makes dragging of Leaflet map to work fine in WebKit (Java FX 17).
Findings:
This is definitely regression as dragging of Leaflet map works fine with JavaFX releases prior to 17. So as @José pointed out it's most probably related to WebKit 610.2 upgrade (JDK-8259635).
It seems to be related to PointerEvent which seems to not be properly generated in the case of Java FX 17. Following example outputs 1 when dragging with the mouse button down. But it outputs 0 in the case of WebView/WebKit inside Java FX 17. Note that e.buttons value is properly set to 1 in JavaFX WebView/WebKit versions prior to Java FX 17.
<!doctype html>
<body style="height: 200px">
<p>Click and drag & observe the console output</p>
<script>
var onMove = function (e) {
console.log("e.buttons: " + e.buttons);
}
var body = document.getElementsByTagName('body')[0];
document.addEventListener("pointermove", onMove, false);
</script>
</body>Based on the finding no. 2 I was able to identify the JS code which prevent the Leaflet map from moving (while being dragged). In Leaflet 1.7.1. it's actually this if expression which consequently causes map to not be moved (because PointerEvent.buttons is wrongfully set to 0 by Java FX 17):
https://github.com/Leaflet/Leaflet/blob/bd88f73e8ddb90eb945a28bc1de9eb07f7386118/src/dom/DomEvent.Pointer.js#L104
I've already reported this through the Oracle bug report system (JDK-8278150). The issue was "mistakenly" closed - I've already provided them with the info explained in this answer so they will hopefully re-open it or tackle it under JDK-8276859.
Workaround (Leaflet 1.7.1):
Workaround/hack to make Leaflet map work again:
Comment out the if expressions at:
https://github.com/Leaflet/Leaflet/blob/bd88f73e8ddb90eb945a28bc1de9eb07f7386118/src/dom/DomEvent.Pointer.js#L104
This makes the Leaftlet map to move properly while being dragged in the Java FX 17 WebView - but please consider this more like a hack to make it work again as this was not tested out thoroughly...
Update 1
This issue seems to be gone with the latest master branch of Leaflet despite regression in JavaFX WebView/WebKit remains (can anyone please confirm this?).
Update 2
As stated by @mipa, the underlying issue was fixed in 8u291 and openjfx17. More info available at: http://bugs.openjdk.java.net/browse/JDK-8278759
42
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
