CODEWITHSUNDEEP
javafxleafletopenstreetmapdirection
Chris Turindwa
Chris Turindwa

Reputation: 21

WebView in javaFX not showing leaflet map correct

I'm trying to add a webview and webengine into java.

When I try it with openstreetmap, it is not problem.

<html>
<head>
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
var map;
var markers = new OpenLayers.Layer.Markers("Markers");

function start() {
    map = new OpenLayers.Map("mapdiv");
    map.addLayer(new OpenLayers.Layer.OSM());

    var lonlat = new OpenLayers.LonLat(4.7860003, 51.5891643)
        .transform(
            new OpenLayers.Projection("EPSG:4326"),
            map.getProjectionObject()
        );

    var zoom = 12;
    map.addLayer(markers);
    map.setCenter(lonlat, zoom);
}

function addPin(lon, lat) {
    var lonlat = new OpenLayers.LonLat(lon, lat)
        .transform(
            new OpenLayers.Projection("EPSG:4326"),
            map.getProjectionObject()
        );

    theMarker = new OpenLayers.Marker(lonlat);
    markers.addMarker(theMarker);
    map.addLayer(markers);
    var zoom = 16; // Adjust the zoom level as desired    
    map.setCenter(lonlat, zoom);
}

function removePins() {
    markers.clearMarkers();
}
</script>
</head>

<body onload="start()">
  <div id="mapdiv"></div>
</body>

</html>

when i try leaflet becuase leaflet has routing options :

`<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Leaflet Map with Directions</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
    <link rel="stylesheet" href="https://unpkg.com/leaflet-routing-machine/dist/leaflet-routing-machine.css" />
    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
    <script src="https://unpkg.com/leaflet-routing-machine/dist/leaflet-routing-machine.js"></script>
</head>
<body style="margin: 0; padding: 0;">
    <div id="map" style="height: 100vh;"></div>

    <script>
        var map = L.map('map').setView([52.0484, 5.9475], 10);

        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);

        L.Routing.control({
            waypoints: [
                L.latLng(51.79510, 5.02421),
                L.latLng(52.22336, 6.87060)
            ],
        }).addTo(map);
    </script>
</body>
</html>`

i get weird stuff. i think it is because of the old javaFX webengine and it can't render javascript. now i get weird overlay in weird map.

I also tried adding: chromiumembedded-java-cef inside my JavaFX Maven but it is too difficult and no easy instruction.

The way I load it in my JavaFX:

try {
    URL url = new File("src/main/resources/mapOplaadpaal.html").toURI().toURL();
    engine.load(url.toString());
} catch (Exception e) {
    System.out.println(e.getMessage());
}

i just want a map to show with routing.

working leaflet map with navigation

Upvotes: 1

Views: 388

Answers (2)

ThomasDaheim
ThomasDaheim

Reputation: 13

I have downgraded leaflet to v1.8.0 to make this work with both JavaFX 23 and 21.

Upvotes: 0

jewelsea
jewelsea

Reputation: 159281

Yes, as of JavaFX 21, leaflet maps do not display correctly in WebView.

The leaflet maps are displayed as tiles. The tiles for the map do not all display, and the ones that do display are usually in the wrong position. This makes the maps broken and useless.

There is no available work-around for this.

Test application:

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.web.WebView;
import javafx.stage.Stage;

public class MapApp extends Application {
    @Override
    public void start(Stage stage) {
        WebView webView = new WebView();
        webView.getEngine().load("https://leafletjs.com/");
        webView.getEngine().setOnError(System.out::println);
        stage.setScene(new Scene(webView));
        stage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

Upvotes: 1

Related Questions