Hello and happy new year!
I am trying to create a routing web app in react and i am using openrouteservice js api!
when i use the coordinates that api doc provides it draws a route even though its not correct, but when i use some random coordinates i get an error 404. Here is the code:
import React, {useEffect, useState} from “react”;
import L from “leaflet”;
import { useMap, Polyline } from “react-leaflet”;
import “leaflet-routing-machine”;
import ‘leaflet.locatecontrol’;
import ‘leaflet.locatecontrol/dist/L.Control.Locate.min.css’;
import Openrouteservice from ‘openrouteservice-js’;
const LeafletRoutingMachine = () => {
const map = useMap();
const apiKey = “”;
useEffect(() => {
L.control.locate({
locateOptions: {
enableHighAccuracy: true
}
}).addTo(map);
});
const orsDirections = new Openrouteservice.Directions({
api_key: apiKey
})
orsDirections.calculate({
coordinates: [[8.681495,49.41461],[8.686507,49.41943],[8.687872,49.420318]],
profile: "driving-car",
extra_info: ["waytype", "steepness"],
format: "geojson",
api_version: 'v2',
})
.then(function(response) {
console.log(response);
if (response && response.features && response.features[0]) {
const feature = response.features[0];
const result = {
coordinates: [],
};
if (feature.geometry && Array.isArray(feature.geometry.coordinates)) {
result.coordinates = feature.geometry.coordinates;
const polyline = L.polyline(result.coordinates, {color: 'red'}).addTo(map);
map.fitBounds(polyline.getBounds());
}
}
})
.catch(function(error) {
console.log('Error:', error);
});
};
export default LeafletRoutingMachine;