use openrouteservice api

src/components/DestinationInfoCard.vue

@@ -231,6 +231,7 @@ const detial = [
 </script>
 
 <script>
+import axios from "axios";
 export default {
   props: {
     nearestStructureData: Object,
@@ -267,9 +268,6 @@ export default {
     this.getUserLocation();
     this.showRoute = true;
     },
-    enterRoute() {
-      console.log("Enter Route");
-    },
     getUserLocation() {
       this.isLocationRequested = true;
       if (navigator.geolocation) {
@@ -285,7 +283,6 @@ export default {
       };
       console.log('User Location:', this.userLocation);
     },
-
     handleLocationError(error) {
       console.error('Error getting location:', error);
     },
@@ -330,7 +327,47 @@ export default {
         console.log('User not logged in. Unable to add to favorites.');
         this.$router.push({ name: 'login' });
       }
-}
+    },
+    enterRoute(){
+      console.log("start routing!.")
+
+      // Make a request to OpenRouteService API for a sample route
+      const apiKey = import.meta.env.VITE_OPENROUTESERVICE_API_KEY;
+      const startCoord = '100.53860,13.76410'; //(lon,lat) test data
+      const endCoord = '100.53928,13.76526';//(lon,lat) test data
+
+      axios.get(`https://api.openrouteservice.org/v2/directions/driving-car?api_key=${apiKey}&start=${startCoord}&end=${endCoord}`)
+        .then(response => {
+          const route = response.data.features[0].geometry.coordinates;
+          console.log('This is route :',route)
+          // this.plotRoute(route);
+        })
+        .catch(error => {
+          console.error('Error fetching route:', error);
+        });
+    },
+    // plotRoute(coordinates) {
+    //   const routeFeature = new Feature({
+    //     geometry: new LineString(coordinates).transform('EPSG:4326', 'EPSG:3857'),
+    //   });
+
+    //   routeFeature.setStyle(
+    //     new Style({
+    //       stroke: new Stroke({
+    //         color: 'blue',
+    //         width: 2,
+    //       }),
+    //     })
+    //   );
+
+    //   const vectorLayer = new VectorLayer({
+    //     source: new VectorSource({
+    //       features: [routeFeature],
+    //     }),
+    //   });
+
+    //   this.map.addLayer(vectorLayer);
+    //   this.ma
 
   },