Test create route

src/components/DestinationInfoCard.vue

@@ -254,6 +254,7 @@ export default {
       if (this.isLocationRequested && !this.userLocation) {
         return 'Requesting location...';
       } else if (this.userLocation) {
+        this.Routing();
         return `${this.userLocation.lon.toFixed(6)}, ${this.userLocation.lat.toFixed(6)}`;
       }
       return 'Location not available';
@@ -268,10 +269,13 @@ export default {
     this.getUserLocation();
     this.showRoute = true;
     },
+    enterRoute() {
+      console.log('Entering Route!');
+    },
     getUserLocation() {
       this.isLocationRequested = true;
       if (navigator.geolocation) {
-        navigator.geolocation.getCurrentPosition(this.setLocation, this.handleLocationError);
+        navigator.geolocation.getCurrentPosition(this.setLocation, this.handleLocationError)
       } else {
         console.error("Geolocation is not supported by this browser.");
       }
@@ -282,7 +286,6 @@ export default {
         lon: position.coords.longitude
       };
       console.log('User Location:', this.userLocation);
-      this.$emit('updateLocation', this.userLocation);
     },
     handleLocationError(error) {
       console.error('Error getting location:', error);
@@ -329,9 +332,7 @@ export default {
         this.$router.push({ name: 'login' });
       }
     },
-    enterRoute(){
-      console.log("start routing!.")
-
+    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
@@ -340,36 +341,14 @@ export default {
       axios.get(`https://api.openrouteservice.org/v2/directions/wheelchair?api_key=${apiKey}&start=${startCoord}&end=${endCoord}`)
         .then(response => {
           const route = response.data.features[0].geometry.coordinates;
-          console.log('This is route :',route)
+          console.log('This is route :',{start:this.userLocation,stop:{lat:parseFloat(this.nearestStructureData.lat),lon:parseFloat(this.nearestStructureData.lon)},route:route})
+          this.$emit('updateRouting', {start:this.userLocation,stop:{lat:parseFloat(this.nearestStructureData.lat),lon:parseFloat(this.nearestStructureData.lon)},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
-
   },
   
 };

src/views/Home.vue

@@ -10,7 +10,7 @@
       v-if="popupData"
       :nearestStructureData="popupData"
       :onClose="closePopup"
-      @updateLocation="handleUserLocation"
+      @updateRouting="handleRouting"
     />
     
   </div>
@@ -58,7 +58,7 @@
       </v-list>
 
   <!-- <map/> -->
-    <ol-map
+  <ol-map
     :loadTilesWhileAnimating="true"
     :loadTilesWhileInteracting="true"
     style=
@@ -80,6 +80,26 @@
     <ol-tile-layer>
       <ol-source-osm />
     </ol-tile-layer>
+
+    <ol-vector-layer v-if="isRouting">
+      <ol-source-vector>
+        <ol-feature>
+          <ol-geom-line-string
+            :coordinates="route"
+          ></ol-geom-line-string>
+
+          <ol-style>
+            <ol-style-stroke
+              :color="strokeColor"
+              :width="strokeWidth"
+            ></ol-style-stroke>
+            <ol-style-icon :src="startMarker" :scale="0.1"></ol-style-icon>
+          </ol-style>
+
+        </ol-feature>
+      </ol-source-vector>
+    </ol-vector-layer>
+
   </ol-map>
 
 </template>
@@ -94,6 +114,8 @@ import { ref } from "vue";
 import axios from "axios";
 import DestinationInfoCard from '@/components/DestinationInfoCard.vue';
 
+import startMarker from '../../assets/map-marker-symbolic.png';
+import stopMarker from '../../assets/flag-filled-symbolic.png';
 
 const center = ref([100.538611, 13.764722]);
 const projection = ref("EPSG:4326");
@@ -102,6 +124,13 @@ const rotation = ref(0);
 
 const popupData = ref(null);
 
+const isRouting = ref(false);
+const startPoint = ref(null);
+const stopPoint = ref(null);
+const route = ref(null);
+const strokeWidth = ref(5);
+const strokeColor = ref("red");
+
 //search
 const searchQuery = ref("");
 const searchResults = ref([]);
@@ -152,8 +181,13 @@ const closePopup = () => {
   popupData.value = null; // Hide popup
 };
 
-const handleUserLocation = (location) => {
-  console.log("Received user location:", location);
+const handleRouting = (res) => {
+  console.log("Received Route:", res);
+  startPoint.value = [parseFloat(res.start.lat),parseFloat(res.start.lon)];
+  stopPoint.value = [parseFloat(res.stop.lat),parseFloat(res.stop.lon)];
+  route.value = res.route;
+  // console.log(startPoint,stopPoint,route);
+  isRouting.value = true;
 };