OpenServiceRoute integration on OpenLayer 6.3.1

Hello,

I’m doing wemapping and I use OpenLayer 6.3.1 as a mapping API,
and I would like to know how to integrate OpenServiceRoute in my project.
Is there any site or tutorial I can follow ?

Thank you

Hi @Ntsou,

You can use the openrouteservice-js package to generate a geojson which you can display in your OL map like this.

I’ve created a relatively basic application (in leaflet though) for a project a few months ago.
If you clone this repo and create the routing app you can take a look at how it works and might be able to reproduce it in OL.

Best regards

1 Like

In this case it might be easier for you to just query the geojson endpoint directly via JavaScript

let request = new XMLHttpRequest();

request.open('POST', "https://api.openrouteservice.org/v2/directions/driving-car/geojson");

request.setRequestHeader('Accept', 'application/json, application/geo+json, application/gpx+xml, img/png; charset=utf-8');
request.setRequestHeader('Content-Type', 'application/json');
request.setRequestHeader('Authorization', 'your-api-key');

request.onreadystatechange = function () {
  if (this.readyState === 4) {
    console.log('Status:', this.status);
    console.log('Headers:', this.getAllResponseHeaders());
    console.log('Body:', this.responseText);
  }
};

const body = '{"coordinates":[[8.681495,49.41461],[8.687872,49.420318]]}';

request.send(body);

Instead of the static body you have to dynamically pass the coordinates.
Use the api playground to see what other functionality there is for the endpoint.

But for now i suggest you just stick to start and endpoint.
We can’t provide you with basic coding help, there is enough tutorials for how to add geojsons to an open layers map online. Just search the web a bit and i’m confident you will be able to display the geojson you requested on the map.

If you have specific questions on how to use ORS feel free to ask.

Best regards

1 Like

Thank you for your response and help.
If I have any further questions, I will get back to you.