Test create route

assets/flag-filled-symbolic.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="16px" viewBox="0 0 16 16" width="16px"><filter id="a" height="100%" width="100%" x="0%" y="0%"><feColorMatrix color-interpolation-filters="sRGB" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/></filter><mask id="b"><g filter="url(#a)"><path d="m -1.6 -1.6 h 19.2 v 19.2 h -19.2 z" fill-opacity="0.5"/></g></mask><clipPath id="c"><path d="m 0 0 h 1600 v 1200 h -1600 z"/></clipPath><mask id="d"><g filter="url(#a)"><path d="m -1.6 -1.6 h 19.2 v 19.2 h -19.2 z" fill-opacity="0.7"/></g></mask><clipPath id="e"><path d="m 0 0 h 1600 v 1200 h -1600 z"/></clipPath><mask id="f"><g filter="url(#a)"><path d="m -1.6 -1.6 h 19.2 v 19.2 h -19.2 z" fill-opacity="0.35"/></g></mask><clipPath id="g"><path d="m 0 0 h 1600 v 1200 h -1600 z"/></clipPath><path d="m 1.980469 1.003906 v 14 h 2 v -6 h 2.382812 l 0.722657 1.445313 c 0.171874 0.339843 0.519531 0.554687 0.894531 0.554687 h 5 c 0.554687 0 1 -0.449218 1 -1 v -6 c 0 -0.550781 -0.445313 -1 -1 -1 h -3.378907 l -0.726562 -1.449218 c -0.167969 -0.335938 -0.515625 -0.550782 -0.894531 -0.550782 z m 0 0" fill="#222222"/><g mask="url(#b)"><g clip-path="url(#c)" transform="matrix(1 0 0 1 -580 -600)"><path d="m 550 182 c -0.351562 0.003906 -0.695312 0.101562 -1 0.28125 v 3.4375 c 0.304688 0.179688 0.648438 0.277344 1 0.28125 c 1.105469 0 2 -0.894531 2 -2 s -0.894531 -2 -2 -2 z m 0 5 c -0.339844 0 -0.679688 0.058594 -1 0.175781 v 6.824219 h 4 v -4 c 0 -1.65625 -1.34375 -3 -3 -3 z m 0 0"/></g></g><g mask="url(#d)"><g clip-path="url(#e)" transform="matrix(1 0 0 1 -580 -600)"><path d="m 569 182 v 4 c 1.105469 0 2 -0.894531 2 -2 s -0.894531 -2 -2 -2 z m 0 5 v 7 h 3 v -4 c 0 -1.65625 -1.34375 -3 -3 -3 z m 0 0"/></g></g><g mask="url(#f)"><g clip-path="url(#g)" transform="matrix(1 0 0 1 -580 -600)"><path d="m 573 182.269531 v 3.449219 c 0.613281 -0.355469 0.996094 -1.007812 1 -1.71875 c 0 -0.714844 -0.382812 -1.375 -1 -1.730469 z m 0 4.90625 v 6.824219 h 2 v -4 c 0 -1.269531 -0.800781 -2.402344 -2 -2.824219 z m 0 0"/></g></g></svg>

assets/map-marker-symbolic.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="16px" viewBox="0 0 16 16" width="16px"><filter id="a" height="100%" width="100%" x="0%" y="0%"><feColorMatrix color-interpolation-filters="sRGB" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/></filter><mask id="b"><g filter="url(#a)"><path d="m -1.6 -1.6 h 19.2 v 19.2 h -19.2 z" fill-opacity="0.5"/></g></mask><clipPath id="c"><path d="m 0 0 h 1600 v 1200 h -1600 z"/></clipPath><mask id="d"><g filter="url(#a)"><path d="m -1.6 -1.6 h 19.2 v 19.2 h -19.2 z" fill-opacity="0.7"/></g></mask><clipPath id="e"><path d="m 0 0 h 1600 v 1200 h -1600 z"/></clipPath><mask id="f"><g filter="url(#a)"><path d="m -1.6 -1.6 h 19.2 v 19.2 h -19.2 z" fill-opacity="0.35"/></g></mask><clipPath id="g"><path d="m 0 0 h 1600 v 1200 h -1600 z"/></clipPath><path d="m 8 0 c -3.589844 0 -6.5 2.910156 -6.5 6.5 s 2.910156 6.496094 6.5 6.496094 c 3.589844 0.003906 6.5 -2.90625 6.5 -6.496094 s -2.910156 -6.5 -6.5 -6.5 z m 0 4 c 1.378906 0 2.5 1.117188 2.5 2.5 c 0 1.378906 -1.121094 2.5 -2.5 2.496094 c -1.378906 0 -2.5 -1.117188 -2.5 -2.496094 s 1.117188 -2.5 2.5 -2.5 z m 0 0" fill="#222222"/><path d="m 14.097656 8.746094 l -5.660156 0.230468 l -6.535156 -0.230468 c 0.6875 2.152344 4.097656 5.25 6.097656 7.25 v 0.003906 v -0.003906 c 2 -2 5.410156 -5.101563 6.097656 -7.25 z m 0 0" fill="#222222"/><g mask="url(#b)"><g clip-path="url(#c)" transform="matrix(1 0 0 1 -700 -60)"><path d="m 550 182 c -0.351562 0.003906 -0.695312 0.101562 -1 0.28125 v 3.4375 c 0.304688 0.179688 0.648438 0.277344 1 0.28125 c 1.105469 0 2 -0.894531 2 -2 s -0.894531 -2 -2 -2 z m 0 5 c -0.339844 0 -0.679688 0.058594 -1 0.175781 v 6.824219 h 4 v -4 c 0 -1.65625 -1.34375 -3 -3 -3 z m 0 0"/></g></g><g mask="url(#d)"><g clip-path="url(#e)" transform="matrix(1 0 0 1 -700 -60)"><path d="m 569 182 v 4 c 1.105469 0 2 -0.894531 2 -2 s -0.894531 -2 -2 -2 z m 0 5 v 7 h 3 v -4 c 0 -1.65625 -1.34375 -3 -3 -3 z m 0 0"/></g></g><g mask="url(#f)"><g clip-path="url(#g)" transform="matrix(1 0 0 1 -700 -60)"><path d="m 573 182.269531 v 3.449219 c 0.613281 -0.355469 0.996094 -1.007812 1 -1.71875 c 0 -0.714844 -0.382812 -1.375 -1 -1.730469 z m 0 4.90625 v 6.824219 h 2 v -4 c 0 -1.269531 -0.800781 -2.402344 -2 -2.824219 z m 0 0"/></g></g></svg>

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(){
+    Routing(){
-      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
@@ -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>
@@ -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) => {
+const handleRouting = (res) => {
-  console.log("Received user location:", location);
+  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;
 };