Prace s mapu, zobrazeni GPX, editace kopilota, skeletony

src/components/map/MapWithMarkers.vue

@@ -0,0 +1,71 @@
+<script setup>
+import MapWrapper from "components/map/MapWrapper.vue";
+import {Marker, Polyline, InfoWindow} from "vue3-google-map";
+import {computed, onMounted, ref} from "vue";
+import {axios} from "boot/axios";
+
+
+const props = defineProps({
+  gpxTrackUrl: {
+    type: String,
+    required: false,
+  },
+  markers: {
+    type: Array,
+    required: false,
+    default: () => []
+  },
+  photos: {
+    type: Array,
+    required: false,
+    default: () => []
+  }
+})
+
+const track = ref([]);
+const gpxLoading = ref(!!props.gpxTrackUrl);
+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"));
+        points.push({lat, lng});
+      })
+
+      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}}));
+  const allData = [...props.markers, ...track.value, ...photosTransformed];
+  return allData.filter(i => !!i.position).map(i => i.position);
+});
+</script>
+
+<template>
+  <div v-if="gpxLoading" v-bind="$attrs">Loading</div>
+  <MapWrapper v-bind="$attrs" :bounds="bounds" v-if="!gpxLoading">
+    <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" />
+      </InfoWindow>
+    </Marker>
+
+    <template v-if="track.length > 0">
+      <Polyline :options="{path: track, geodesic: true, strokeColor: '#ff0000', strokeOpacity: 0.3, strokeWeight: 5}"/>
+    </template>
+  </MapWrapper>
+</template>