Search code examples
routesopenlayers-3polylineosrm

using OSRM Routing in Openlayers 3 to draw polyines on the map along the direction of the map

I'd like to implement routing on my map using OSRM and Openlayers 3 but there don't seem to be any examples or tutorials anywhere.All the sample are to confusing

Sources refereed 1:http://workshop.pgrouting.org/chapters/ol3_client.html (in this sample i don't know from where to get the data to plot the polyline i will be getting the data as a json which contains array of object with latitude and longitude)

2:http://wiki.openstreetmap.org/wiki/Routing/online_routers don't know where to start with to accomplish it

3:OSRM Routing in Openlayers 3

i am able to draw a straight line but i wanted to draw different color lines along the direction of the map , i came to know for this i have to use a direction service can any body please point to some sample code or post any help will be thankful please say a way to accomplish it

Solution

  • Start using an online service and if you feel comfortable with it go for devloping your own (if needed)

    so lets assume you are going to use YOURS routing service. info and details here

    1. create a GET request http://www.yournavigation.org/api/1.0/gosmore.php?format=geojson&flat=52.215676&flon=5.963946&tlat=52.2573&tlon=6.1799&v=motorcar&fast=1&layer=mapnik

    just put the above url into a browser. It shall give you back a response containing the coordinates of the line you are looking for. To use it with in your own app you propably have to create a proxy servlet to avoid the cross domain scripting problem.

    1. Parse the responce getted back. Note that the response is not a proper geojson (at least as ol3 may understand it) so you get the coordinates, create the geometry and reproject them to your projection

    2. Finally display your route to your map and zoom to the extent of your route

    here is a fiddle to see it in action. Note that I am using the responce of the above request as a json object within the code.

    UPDATE

    The same request for OSRM would be

    https://api-osrm-routed-production.tilestream.net/viaroute?instructions=true&alt=true&loc=52.215676,5.963946&loc=52.2573,6.1799

    This should return an encoded polyline. So you may decode your route using the ol.format.Polyline class. Check this fiddle