Mapa s trasami letu u eventu, drobna uprava vizualu eventu

src/components/map/MapWithMarkers.vue

@@ -1,14 +1,20 @@
 <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";
+import {computed} from "vue";
 
 
 const props = defineProps({
   gpxTrack: {
     type: Object,
     required: false,
+    default: () => {
+    }
+  },
+  tracks: {
+    type: Array,
+    required: false,
+    default: () => []
   },
   markers: {
     type: Array,
@@ -26,12 +32,47 @@ const props = defineProps({
   }
 })
 
-const track = ref([]);
 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);
+  const coordinates = [
+    ...[...props.markers, ...photosTransformed].filter(i => !!i.position).map(i => i.position),
+    ...(props.gpxTrack || []),
+    ...(props.tracks || []).flat()
+  ];
+
+  const minLat = Math.min(...coordinates.map(i => i.lat));
+  const maxLat = Math.max(...coordinates.map(i => i.lat));
+  const minLng = Math.min(...coordinates.map(i => i.lng));
+  const maxLng = Math.max(...coordinates.map(i => i.lng));
+
+  return [
+    {lat: minLat, lng: minLng},
+    {lat: minLat, lng: maxLng},
+    {lat: maxLat, lng: minLng},
+    {lat: maxLat, lng: maxLng},
+  ];
 });
+
+
+const getRandomColor = () => {
+  const r = Math.floor(Math.random() * 256);
+  const g = Math.floor(Math.random() * 256);
+  const b = Math.floor(Math.random() * 256);
+
+  return `rgb(${r}, ${g}, ${b})`;
+}
+
+const getColor = (i) => {
+  const colors = [
+    '#FF0000',
+    '#5733FF', '#4bec41', '#8d3f25',
+    '#33A1FF', '#6d7e59', '#FF3333', '#0e1c48',
+    '#A133FF', '#FFFF33', '#c9decc'
+  ]
+  return colors[i] || getRandomColor()
+}
+
+
 </script>
 
 <template>
@@ -47,6 +88,12 @@ const bounds = computed(() => {
       <Polyline :options="{path: gpxTrack, geodesic: true, strokeColor: '#ff0000', strokeOpacity: 0.3, strokeWeight: 5}"/>
     </template>
 
+    <template v-if="tracks && tracks.length > 0">
+      <template v-for="(track, i) in tracks" :key="track">
+        <Polyline :options="{path: track, geodesic: false, strokeColor: getColor(i), strokeOpacity: 1, strokeWeight: 3}"/>
+      </template>
+    </template>
+
     <Marker v-if="highlightPosition" :options="{position: highlightPosition, icon: '/mapIcons/currentPosition32x32.png'}"/>
 
   </MapWrapper>