diff --git a/assets/flag-filled-symbolic.png b/assets/flag-filled-symbolic.png
new file mode 100644
index 0000000..afc4c4c
Binary files /dev/null and b/assets/flag-filled-symbolic.png differ
diff --git a/assets/flag-filled-symbolic.svg b/assets/flag-filled-symbolic.svg
new file mode 100644
index 0000000..7312640
--- /dev/null
+++ b/assets/flag-filled-symbolic.svg
@@ -0,0 +1,2 @@
+
+
diff --git a/assets/map-marker-symbolic.png b/assets/map-marker-symbolic.png
new file mode 100644
index 0000000..28393f4
Binary files /dev/null and b/assets/map-marker-symbolic.png differ
diff --git a/assets/map-marker-symbolic.svg b/assets/map-marker-symbolic.svg
new file mode 100644
index 0000000..8a58190
--- /dev/null
+++ b/assets/map-marker-symbolic.svg
@@ -0,0 +1,2 @@
+
+
diff --git a/src/components/DestinationInfoCard.vue b/src/components/DestinationInfoCard.vue
index bce9749..659bd8c 100644
--- a/src/components/DestinationInfoCard.vue
+++ b/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
-
},
};
diff --git a/src/views/Home.vue b/src/views/Home.vue
index eae7370..aecdd3c 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -10,7 +10,7 @@
v-if="popupData"
:nearestStructureData="popupData"
:onClose="closePopup"
- @updateLocation="handleUserLocation"
+ @updateRouting="handleRouting"
/>
@@ -58,7 +58,7 @@
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -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;
};