1

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

Improve this question
1
  • 3
    Neither of the following issues are the cause of the issue you are asking about. Loading resources from files won't work when you package your application, because the src directory won't be in your distribution package. See how to load resources. You should log stack traces, otherwise you will lose information about what went wrong, e.printStackTrace(), or, if using slf4j, log.error("My error message", e).
    – jewelsea
    Commented Jan 5 at 11:31

1 Answer 1

Reset to default
1

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);
    }
}
Improve this answer
3
  • any alternative i can use for showing a map. i also tried google maps that also does not work
    – Chris Turindwa
    Commented Jan 5 at 16:27
  • Yes, I know Google Maps does not work with JavaFX. I marked your previous question on google maps as a duplicate. I know no alternative that works. There is the unmaintained mapjfx. There is (unmaintained) java leaflet, I have no idea if it still works given that JavaScript leaflet in a WebView is broken. It seems to also rely on WebView, so my guess is that it is broken too.
    – jewelsea
    Commented Jan 6 at 7:42
  • There is gluon maps, maybe that will work. If not and Gluon still support it, you can contact Gluon and pay them to get some support if it is something that you want to pursue.
    – jewelsea
    Commented Jan 6 at 7:47

Not the answer you're looking for? Browse other questions tagged or ask your own question.