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)
})
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.
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:
L.geoJson().addTo(map); : geoJson does not exist for type L, and I can only use L.geoJSON, that I believe leads to
routingLayer.options = { style: {color: "#00cc33", "weight": 5, "opacity": 0.6} }; that tells me that style is not assignable to type geoJSONOptions, and
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.
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.