WebView show Leaflet map with GraphHopper routing

Question

I am using the Leaflet API to show a map in a JavaFX application. I'm using a WebView to visualize the website with the map in my application. The application shows a driving simulation of a car between some points. If I use the OSMR Routing i don't have any problems to visualize the website & the map.

The problem is that I have to use the GraphHopper routing machine.

If I use the GraphHopper routing the control elements of the map will be shown, but the map is only grey.

If I open the website in a browser I don't have any problems.

Here is the Code of the map

<body>
<div id="map" class="map"></div>
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script src="rm/dist/leaflet-routing-machine.js"></script>
<script src="rm/lrm-graphhopper.js"></script>
<script type="text/javascript">
var map = L.map('map');
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

L.Routing.control({
    waypoints: [
        L.latLng(57.74, 11.94),
        L.latLng(57.6792, 11.949)
    ],
    router: L.Routing.graphHopper('Api-key'),
    routeWhileDragging: true
}).addTo(map);
</script>
</body>

And this is the code of the javaFX application:

WebEngine webEngine = webView.getEngine();
webEngine.setJavaScriptEnabled(true);
webEngine.load(Main.class.getResource("/application/index.html").toExternalForm() );

Can anybody help me ?

Are you using a valid api key? What is printed in the console? Are requests made? Are they all okay and just not visualized? — Karussell, Jul 18 '16 at 21:19
Yes, I'm using a valid api key. The problem is the request of the routing. It's https and not http. And the webview have some problems with the certificates i think. — D. Hanser, Jul 20 '16 at 06:23
And I'm using the lrm-graphhopper library, not directly the graphhopper java api. — D. Hanser, Jul 22 '16 at 05:06

score 0 · Answer 1 · answered Jul 20 '16 at 06:25

One problem is that your map is not fully initialized until you have set the view. Try, for example:

var map = L.map('map').setView([57.74, 11.94], 10);

or even just:

var map = L.map('map').setView([0, 0], 0);

and you should see your map tiles and, hopefully, your route.

WebView show Leaflet map with GraphHopper routing

1 Answers1