How to render results from java client in a map

[martino]

Hi there,

i´m completely new to GH and just started to test with the java client from Github.

So, in the end I have a GHResponse object that is set up via:

GHResponse resFull = gh.route(req);

I wonder how to render the routing results as a (leaflet) map in xhtml. I´m developing with JSF 2.2 by the way.

I would be glad to get a nudge in the right direction.

[karussell]

If you already use Leaflet you should use our JavaScript client instead.

[martino]

I tried to but the script that I found here

https://github.com/graphhopper/directions-api-js-client/blob/master/js/GraphHopperRouting.js

isnt´t getting me forward neither. Is there a hands-on example how to calculate a route and render it on a map?

[karussell]

Currently not. Maybe you have interests in contributing a detailed one which we post on our blog ? I can assist. First, try just to display a route from two fixed coordinates, for that

• create a routingLayer: var routingLayer = L.geoJson().addTo(map);
• create a GraphHopperRouting object like here: var ghRouting = new GraphHopperRouting({key: defaultKey, host: host, vehicle: profile, elevation: false});
• add the markers to the routingLayer:
  L.marker(e.latlng, {icon: iconObject}).addTo(routingLayer) and add the two coordinates to the GraphHopperRouting object via
  ghRouting.addPoint(new GHInput(e.latlng.lat, e.latlng.lng));
• then do the request and parse the returned json where you only grab the points for now and add this to the routingLayer:

  var path = json.paths[0];         
  routingLayer.addData({"type": "Feature", "geometry": path.points});

• then you should already see the route and can enhance the demo via making the points clickable map.on('click', function (e) {} or similar.

[martino]

Ok, i got it working so far. But when I click the map twice in order to set the second point, the doRequest results in "An error occured: Unknown error" ?!

Besides I want to set start and destination by code (from my bean), what would be the appropriate data format for latLng and how to notate it?

[karussell]

But when I click the map twice in order to set the second point, the doRequest results in "An error occured: Unknown error" ?!

You'll need to debug this (did you clear the routingLayer, etc ?)

Besides I want to set start and destination by code (from my bean)

You can return this point via json to the front end or calculate the route on the backend and return the route json to the front end. You somehow need to establish a communication. I have no experience with JSF (these days) so I cannot say how this is normally done with JS.

[martino]

Well, here is my code, taken and modified from the demo. I found out how to set points from code (start, destination). The function executes as expected but the request result is stil "Unknown error".

function setupRoutingAPI(map, ghRouting) {                  
           	map.setView([52.521235, 13.3992], 12);
                
                var iconObject = L.icon({
                    iconUrl: './resources/images/marker.png',
                    shadowSize: [50, 64],
                    shadowAnchor: [4, 62],
                    iconAnchor: [12, 40]
                });
                
                var routingLayer = L.geoJson().addTo(map);
                routingLayer.options = {
                    style: {color: "#00cc33", "weight": 5, "opacity": 0.6}
                };
                                  
                ghRouting.clearPoints();
                routingLayer.clearLayers();                

                var start = L.latLng(50.123456, 9.123456);
                var destination = L.latLng(50.654321, 9.654321);
                	
                L.marker(start, {icon: iconObject}).addTo(routingLayer);
                ghRouting.addPoint(new GHInput(start.lat, start.lng));
                               
                L.marker(destination, {icon: iconObject}).addTo(routingLayer);
                ghRouting.addPoint(new GHInput(destination.lat, destination.lng));               
                
                //  Calculate route! 
                ghRouting.doRequest(function (json) {
                    if (json.message) {
                        var str = "An error occured: " + json.message;
                        if (json.hints)
                            str += json.hints;
                            window.alert(str);
                    } else {
                        var path = json.paths[0];
                        routingLayer.addData({
                            "type": "Feature",
                            "geometry": path.points
                        });

                        if (path.bbox) {
                            var minLon = path.bbox[0];
                            var minLat = path.bbox[1];
                            var maxLon = path.bbox[2];
                            var maxLat = path.bbox[3];
                            var tmpB = new L.LatLngBounds(new L.LatLng(minLat, minLon), new L.LatLng(maxLat, maxLon));
                            map.fitBounds(tmpB);
                        }

                    }
                });
            }

[martino]

Ok, seems it was just a problem with the server connection. Got it working now.