Not able to show routing result on leaflet map

Developers
1

After getting the result from graphhopper RoutingAPI , I would like to show the route on leaflet map.
I’ve followed the instructions here, but it didn’t work.
Here is the complete code:

var myLayer = L.geoJSON().addTo(this.map);
var ghRouting = new GraphHopperRouting({key: defaultKey, host: host, vehicle:profile,elevation:false})

ghRouting.addPoint(new GHInput(47.400905, 8.534317));
ghRouting.addPoint(new GHInput(47.394108, 8.538265));

ghRouting.doRequest().then(function(json){
   var path = json.paths[0];
 var geojsonFeature = {
"type": "Feature",   
"geometry": path.points
};
myLayer.addData(geojsonFeature);
 }).catch(function(err){
   console.log("Error "+ err.message)
  })

I couldn’t use directly

routingLayer.addData({
                    "type": "Feature",
                    "geometry": path.points
                });

as written in the github example since it told me that “geometry” did not exist for type geoJsonFeature, so I had to “split” it up.
Don’t know if it’s useful, but here there’s the result of the request made.

2

I don’t understand the issue here. You can have a look at this fiddle, you will see that everything works, I just copied code pieces from the example.

1 Like
3

I know, I’ve followed the code on github, but it doesn’t work for me.
If I write your code, the IDE tells me that:

  1. L.geoJson().addTo(map); : geoJson does not exist for type L, and I can only use L.geoJSON, that I believe leads to
  2. routingLayer.options = { style: {color: "#00cc33", "weight": 5, "opacity": 0.6} }; that tells me that style is not assignable to type geoJSONOptions, and
  3. routingLayer.addData({ "type": "Feature", "geometry": path.points }); that tells me that geometry is not assignable to parameter of type geoJSONOptions.

The only thing I could do was to create the var geojsonFeature and then do routingLayer.addData(geojsonFeature), while for the style I couldn’t do anything.

4

Apparently, your IDE or the leaflet types are wrong, just ignore your IDE in this case as it seems to work ;).

5

Ok, I’ve tried ignoring it but there’s this runtime error:

Property 'geoJson' does not exist on type 'typeof L'.

Found this question and tried with the solution proposed, so the code now is:

var routingLayer = L.geoJSON().addTo(this.map) ;

(routingLayer as any).options = {
style: {color: "#00cc33", "weight": 5, "opacity": 0.6}
}

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

It’s not the best solution, but for now it works. Still, I had to use geoJSON instead of geoJson. I wonder why I have to use as any to make it work, and what could be the solution to this problem, since it’s just a workaround and not a solution.

6

Might be a difference between Leaflet < 1.0 and Leaflet >= 1.0. The fiddle above uses Leaflet 0.7.2.

This is a typescript issue. It seems like you didn’t install/use the leaflet types.

1 Like