Leaflet Map in JavaFX WebEngine

Question

I'm having some Problems with Leaflet in the JavaFX Webengine. I want to visualize GPS tracks with the geoJson format. The code listing below shows the HTML and JavaScript code I have developed so far.

<html>
<head>
  <title>A Leaflet map!</title>
  <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
  <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>

<script src="79_SubaruStretch.js"></script>


  <style>
    #map{ height: 100% }
  </style>
</head>
<body>

  <div id="map"></div>

  <script>

 var map = L.map('map').setView([48.70, 8.98], 13);
 L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map); //will be our basemap.


function onEachFeature(feature, layer) {
    if (feature.properties) {
        layer.bindPopup("<b>" + feature.properties.phase + "</b> from" + feature.properties.from + " to " + feature.properties.to);
    }
}
//map.tap.disable();

var streets = new L.geoJson(roads, {
  onEachFeature: onEachFeature,
  style: function(feature) { return {color: feature.properties.color}; }
 }).addTo(map);

  </script>
</body>
</html>

When I open this HTML page with Iceweasel/Firefox I'm able to click at the gps plot and the popups will be displayed. But when I open the same HTML page in the JavaFX WebEngine I can't click at the track anymore. The code below shows the JavaFX application.

public class WebViewSample extends Application {
private Scene scene;
@Override public void start(Stage stage) {
    // create the scene
    stage.setTitle("Web View");
    scene = new Scene(new Browser(),750,500, Color.web("#666970"));
    stage.setScene(scene);
//            scene.getStylesheets().add("webviewsample/BrowserToolbar.css");        
    stage.show();
}

public static void main(String[] args){
    launch(args);
}
}
class Browser extends Region {
final WebView smallView = new WebView();
final WebView browser = new WebView();
final WebEngine webEngine = browser.getEngine();

public Browser() {
    //apply the styles
    getStyleClass().add("browser");
    // load the web page
    webEngine.load("file:///test2.html");
    webEngine.setJavaScriptEnabled(true);

//     webEngine.load("http://openstreetmap.de/karte.html");
    //add the web view to the scene
    getChildren().add(browser);


}
private Node createSpacer() {
    Region spacer = new Region();
    HBox.setHgrow(spacer, Priority.ALWAYS);
    return spacer;
}

@Override protected void layoutChildren() {
    double w = getWidth();
    double h = getHeight();
    layoutInArea(browser,0,0,w,h,0, HPos.CENTER, VPos.CENTER);
}

@Override protected double computePrefWidth(double height) {
    return 750;
}

@Override protected double computePrefHeight(double width) {
    return 500;
}
}

When I position the coursor on the track in Iceweasel, the cursor changes and shows, that the track is clickable. In the JavaFX webengine the cursor shows all the time the clickable symbole whether the mouse is positioned on the track or not. Does some know how to fix this issue?

Edit (2015-07-10): I think that the webengine has a problem to determine a click on the drawn path. I added a method that opens an alert when the map is beeing clicked:

map.on('click', function(){
        alert("map clicked");
    });

This works fine for me. But the same function for the paths, doesn't work:

streets.on('click', function(e){
   alert(e.layer.feature.properties.phase);
});

I also added an AlertHandler to the JavaFX webengine.

score 0 · Answer 1 · answered Jul 10 '15 at 07:34

Maybe you try to handle a mouseclick on the Browser class. To me it seems like JavaFx does block any mouseclick, so you can't click anywhere.

I added some handling stuff to your Browser class. Maybe it works.

public Browser() {
    //apply the styles
    getStyleClass().add("browser");
    // load the web page
    webEngine.load("file:///test2.html");
    webEngine.setJavaScriptEnabled(true);

    //webEngine.load("http://openstreetmap.de/karte.html");
    //add the web view to the scene
    getChildren().add(browser);

    //clickevent
            this.setOnMouseClicked(new EventHandler<MouseEvent>() {

            @Override
            public void handle(MouseEvent event){
                onActionProperty().get().handle(event);
            }

        });


    }

/**
 * MouseHandler
 */
private ObjectProperty<EventHandler<MouseEvent>> propertyOnAction = new SimpleObjectProperty<EventHandler<MouseEvent>>();

public final ObjectProperty<EventHandler<MouseEvent>> onActionProperty() {
    return propertyOnAction;
}

public final void setOnAction(EventHandler<MouseEvent> handler) {
    propertyOnAction.set(handler);
}

public final EventHandler<MouseEvent> getOnAction() {
    return propertyOnAction.get();

}    


private Node createSpacer() {
    Region spacer = new Region();
    HBox.setHgrow(spacer, Priority.ALWAYS);
    return spacer;
}

@Override protected void layoutChildren() {
    double w = getWidth();
    double h = getHeight();
    layoutInArea(browser,0,0,w,h,0, HPos.CENTER, VPos.CENTER);
}

@Override protected double computePrefWidth(double height) {
    return 750;
}

@Override protected double computePrefHeight(double width) {
    return 500;
}

Leaflet Map in JavaFX WebEngine

1 Answers1