Lepsi podpora elevace terenu

src/components/map/MapWithMarkers.vue

@@ -6,8 +6,8 @@ import {axios} from "boot/axios";
 
 
 const props = defineProps({
-  gpxTrackUrl: {
-    type: String,
+  gpxTrack: {
+    type: Object,
     required: false,
   },
   markers: {
@@ -15,6 +15,10 @@ const props = defineProps({
     required: false,
     default: () => []
   },
+  highlightPosition: {
+    type: Object,
+    required: false,
+  },
   photos: {
     type: Array,
     required: false,
@@ -23,35 +27,8 @@ const props = defineProps({
 })
 
 const track = ref([]);
-const gpxLoading = ref(!!props.gpxTrackUrl);
 const speed = ref([]);
 const elevation = ref([]);
-onMounted(() => {
-  if (!props.gpxTrackUrl) {
-    return;
-  }
-  gpxLoading.value = true;
-  axios.get(props.gpxTrackUrl)
-    .then(({data}) => (new window.DOMParser()).parseFromString(data, "text/xml"))
-    .then(doc => {
-      const points = [];
-      const nodes = [...doc.getElementsByTagName('trkpt')];
-      nodes.forEach(node => {
-        const lat = parseFloat(node.getAttribute("lat"));
-        const lng = parseFloat(node.getAttribute("lon"));
-
-        console.log(node.childNodes);
-
-        points.push({lat, lng});
-        // speed.value.push(node.getElementsByTagName("extensions").getElementsByTagName("speed"));
-        // elevation.value.push(node.getElementsByTagName("ele").innerText);
-      })
-
-      track.value = points;  // puvodne se bounds bralo z tohodle
-    })
-    .finally(() => gpxLoading.value = false);
-});
-
 
 const bounds = computed(() => {
   const photosTransformed = props.photos.map(p => ({position: {lat: p.gpsLatitude, lng: p.gpsLongitude}}));
@@ -61,22 +38,19 @@ const bounds = computed(() => {
 </script>
 
 <template>
-  <q-spinner v-if="gpxLoading" v-bind="$attrs" />
-
-  speed: {{ speed }}
-  elevation: {{ elevation }}
-
-  <MapWrapper v-bind="$attrs" :bounds="bounds" v-if="!gpxLoading">
+  <MapWrapper v-bind="$attrs" :bounds="bounds">
     <Marker v-for="(marker, idx) in markers" :key="idx" :options="marker"/>
-
     <Marker v-for="(photo, idx) in photos" :key="idx" :options="{icon: '/mapIcons/photo-16x16.png', position: {lat: photo.gpsLatitude, lng: photo.gpsLongitude}}">
       <InfoWindow :options="{position: {lat: photo.gpsLatitude, lng: photo.gpsLongitude}}">
-        <img :src="photo.thumbnailUrl" />
+        <img :src="photo.thumbnailUrl"/>
       </InfoWindow>
     </Marker>
 
-    <template v-if="track.length > 0">
-      <Polyline :options="{path: track, geodesic: true, strokeColor: '#ff0000', strokeOpacity: 0.3, strokeWeight: 5}"/>
+    <template v-if="gpxTrack && gpxTrack.length > 0">
+      <Polyline :options="{path: gpxTrack, geodesic: true, strokeColor: '#ff0000', strokeOpacity: 0.3, strokeWeight: 5}"/>
     </template>
+
+    <Marker v-if="highlightPosition" :options="{position: highlightPosition, icon: '/mapIcons/currentPosition32x32.png'}"/>
+
   </MapWrapper>
 </template>