Routing with Leaflet

[modus...@gmail.com]

Hi!

I'm doing a Jquery Mobile + Phonegap app and I want to use Leaflet.

I need calculate routes with waypoints and I don't know how...:(

I've read I'd have to send an Ajax call to a web service and then "paint" the results...

Can somebody show me how I have to do it?

Thanks!

[Neil]

Hey,

I used Cloudmade's routing API and created a function that took an array of Marker objects as its only argument. 

(The Markers got added to the array by a user selecting them or adding their own markers)

function getRoute(routepoints) {

if (routepoints.length<2){

alert('Please pick at least 2 points to construct a route');

return false;

};

       /*

      Assemble way points and end points for the URL

      Bunch of stuff here to assemble the route coordinates, which will vary from case to case ...

      but you want to end up with something like '53.19218,-2.88104,[53.190898,-2.888764],53.189466,-2.885075'

      (The bit in square brackets are your "transit points" - points on the way rather than the start or fin'sh point)

       */

url = '/route/' + startpoint + transitpoints + endpoint+ '/foot.js?units=miles';

$.ajax({

url: url,

dataType: "jsonp",

async:false,

jsonpCallback: "routeParseToGeojson",

jsonp: 'callback'

   });

};

Then I have function routeParseToGeojson() that takes the response and has to kind of reverse all the coordinates and reassemble the data as a GeoJSON object.

You don't NEED to do this, it was just handy for my situation.

Neil

[Ricardo Freitas]

Are you guys actually building a route (ie.: using real roads) or just consider the route to be a line through the different points?

--
 
---
You received this message because you are subscribed to the Google Groups "Leaflet" group.
To unsubscribe from this group and stop receiving emails from it, send an email to leaflet-js+...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[James David Smith]

I'm a real javascript and leaflet novice, but I have started trying to
do a routing + D3 + leaflet type project here, so have read this
conversation with interest!

https://github.com/JimShady/Stoller-Routing

Index: http://htmlpreview.github.com/?https://github.com/JimShady/Stoller-Routing/blob/master/index.html

Note that if you left click a few times on the map and then right
click it should show you your array of points.

My workflow is planned to be:

1) Use leaflet for the map and to collect an array of lat longs from
the user clicking on the map
2) From this construct a URL to send to the API here:
https://github.com/DennisOSRM/Project-OSRM/wiki
3) Get the route back as a JSON, parse it using jQuery, and extract
the overview polyline field
4) Use this package to decode the polyline and display it on a map:
https://github.com/jieter/Leaflet.encoded

I'm doing this as a learning project really. At the moment I'm stuck
as I haven't figured out the cross-domain JSON thing... but doing so
is part of the learning process.

Anyway, I realise this doesn't really solve any of the issues in this
conversation, I just thought that people might be interested!

Jim

[Neil]

Hi Jim,

Regarding your cross domain problem, my function (in the first reply) uses jsonp and so kind of bypasses the cross domain problem.

Separately though, my Apache server is also configured to rewrite requests to http://mydomain/route to the Cloudmade routing service, so it all appears to be 'happening' locally as far as the server is concerned as well.

Neil

[James David Smith]

Hi Neil,

Thanks for the reply. I did see your code and thought that I might be
able to use it somehow. The API I am using will allow me to send it a
request like this:

http://router.project-osrm.org/viaroute?loc=51.492072,-0.103340&loc=51.504362,-0.091152&jsonp=myroute

Which returns a file of "route.js". So can I use this in your code
below do you think? Any guidance would be much appreciated.

url = 'http://router.project-osrm.org/viaroute?loc=51.492072,-0.103340&loc=51.504362,-0.091152&jsonp=myroute';

$.ajax({
url: url,
dataType: "jsonp",
async:false,
jsonpCallback: "routeParseToGeojson",
jsonp: 'callback'
});

Thanks

James