CORS error using Leaflet Routing Machine in Angular 19

openrouteservice
1

Hi,
I am using Leaflet Routing Machine and when I insert ApiKey, it throws error

 var router: any = {};
 router = L.Routing.control({
   router: new L.Routing.OpenRouteServiceV2('apikey'),
  waypoints: [
    L.latLng(_origin[1], _origin[0]),
    L.latLng(_destination[1],_destination[0])
  ],
  //routeWhileDragging: false,
  //show: false,
  //fitSelectedRoutes: false,
  //createMarker: function (i, waypoint, n) {
  //    return null;
  //},
  lineOptions: {
      styles: [{ color: '#9f150b', opacity: 1, weight: 4, className: 'animate' }],
      extendToWaypoints: false,
      missingRouteTolerance: 0
  }
});

router.addTo(osmmap);

I get CORS error
…
Access to XMLHttpRequest at ‘https://api.openrouteservice.org/directions?coordinates=80.140111%2C12.852134|79.5596749969%2C12.2287612318&instructions=true&instructions_format=text&geometry_format=geojson&preference=recommended&units=m&profile=driving-car&api_key= apikey’ from origin ‘https://127.0.0.1:54037’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
…
Thanks in advance

2

Note sure routing is included by default with leaflet what are you using ? (looks like routing machine that has not been maintain in 9 years).

Request format does not match v2 documentation Dashboard | ORS

1 Like
3

Tyvm I was not using this latest one. I need one more help. I used Directions and it gives me json as segments. But what gives me coordinates instead? Thanks in advance

4

Can you explain what you are trying to do and how you are trying to to it ?

1 Like
5

hi
this is my new code

let request = new XMLHttpRequest();

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

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', 'apiKey');

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

const body = '{"coordinates":[' + _origin + ',' + _destination + ']}';

request.send(body);

The origin and destination are Chennai and Kanchipuram of India
It returns features->geometry as
…
2010
“Could not find routable point within a radius of 350.0 meters of specified coordinate 0: 12.8521340 80.1401110.; Could not find routable point within a radius of 350.0 meters of specified coordinate 1: 12.2287612 79.5596750.”
…
But in old coding it (leaflet routing machine ) return coordinates correctly
Also for Western cities it returns correctly under features->geometry in the form of my needed coordinates
Is it feasible for south indian cities?

6

Use long,lat coordinates

Note : API playgroud is quite uselfull and let you test request to detect this kind of mistakes

1 Like
7

API Playground is giving the error too. Is it possible for any two cities in South India ? I need only 2 cities animated maps

8

You didnt gave me the requests you were trying to pass . Did you try switching coordinates to long,lat ? Neither what you were expecting as result

9

start
12.2287612318, 79.5596749969
end
13.0832,80.2755
this is my new request

let request = new XMLHttpRequest();

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

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', 'apikey');

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

const body = '{"coordinates":[[12.2287612318, 79.5596749969],[13.0832,80.2755]]}';

request.send(body);

I was expecting features>geometry array. Now currently it shows error 2010 radius 350 error
switched coordinates same error :frowning:
ETA:
I need what are the openrouteservice coordinates for Chennai. Can i find it on openrouteservice playground?

10

Need long lat coordinates.

Additionnaly it seem that your stating point is nowhere near a driveable Road is that correct?
API playground request with slightly different starting point :

chenay
chenay1606×1567 248 KB

1 Like
11

Whoa thanks for finding the correct coordinates. Could you give me exact start coordinates? they are not accepting in script for start. same error for start only
End is working
No problem if start is farther from current coordinate.

also you forgot to hide the apikey from bottom textbox

12

Thx !

If you need coordinates just right click on google map to show the locations coordinates ( in lat,long), just pick a point on a road if you want to be sure to get a response

2 Likes
13

I made a mistake. it is hard coded. brb

14

Thanks a lot it is working
I have a doubt. When I place two maps on a page, only first one is loading. Is it possible to place 2 maps on same page? Thanks in advance
(map_libregl maps)

15

Hey,

this is a support forum for the openrouteservice, and this question is regarding maplibre GL.

I suggest asking in their community, or on a general forum like stackoverflow.

Best regards