gis-ops / valhalla-app

This is the demo web app running on https://valhalla.openstreetmap.de
https://valhalla.openstreetmap.de
MIT License
154 stars 87 forks source link

Leaflet and Valhalla web app routes issue #205

Closed giuliac89 closed 7 months ago

giuliac89 commented 7 months ago

What would you like to share?

I'm trying to integrate the Valhalla web app with Leaflet and I have some issues with drawing the right route. I want to create a pedestrian route so I call the api https://valhalla1.openstreetmap.de after creating the json. The issues are:

  1. The points are connected well, but the routes are not drawn correctly (they don't follow the street)
  2. If I change the "costing" value nothing change

My resulting json is

{
   "costing":"pedestrian",
   "locations":[
         {"lon":"14.207994","lat":"41.110242","type":"via"},
         {"lon":"14.208491","lat":"41.109895","type":"via"},
         {"lon":"14.211598","lat":"41.107943","type":"via"},
         {"lon":"14.211446","lat":"41.108951","type":"via"},
         {"lon":"14.212708","lat":"41.109952","type":"via"},
         {"lon":"14.213006","lat":"41.110424","type":"via"},
         {"lon":"14.212892","lat":"41.11096","type":"via"},
         {"lon":"14.213697929872753","lat":"41.10965172126981","type":"via"},
         {"lon":"14.217564","lat":"41.106637","type":"via"},
         {"lon":"14.2126","lat":"41.107311","type":"via"},
         {"lon":"14.207614599551142","lat":"41.10673799401134","type":"via"}
    ],
   "language":"it-IT",
   "id":"map_routes"
}

And the call is https://valhalla1.openstreetmap.de/route?json={"costing":"pedestrian","locations":[{"lon":"14.207994","lat":"41.110242","type":"via"},{"lon":"14.208491","lat":"41.109895","type":"via"},{"lon":"14.211598","lat":"41.107943","type":"via"},{"lon":"14.211446","lat":"41.108951","type":"via"},{"lon":"14.212708","lat":"41.109952","type":"via"},{"lon":"14.213006","lat":"41.110424","type":"via"},{"lon":"14.212892","lat":"41.11096","type":"via"},{"lon":"14.213697929872753","lat":"41.10965172126981","type":"via"},{"lon":"14.217564","lat":"41.106637","type":"via"},{"lon":"14.2126","lat":"41.107311","type":"via"},{"lon":"14.207614599551142","lat":"41.10673799401134","type":"via"}],"language":"it-IT","id":"map_routes"}

Then I draw the leaflet polyline with the result (that seems correct) L.polyline(result.trip.locations, {color: '#eb0000'}).addTo(map);

Screenshot 2023-12-13 alle 10 48 00

But I get this (it seems it doesn't follow the streets)

Screenshot 2023-12-13 alle 09 56 12

I can't figure out what I'm doing wrong. Can you help me?

nilsnolde commented 7 months ago

Not sure I understand: this is a web app already, which implements leaflet. Sounds like you’re doing your own app, so it’s not an issue with this project?

nilsnolde commented 7 months ago

cross-posted: https://github.com/valhalla/valhalla/issues/4454