-
Notifications
You must be signed in to change notification settings - Fork 7
/
QuickViewMapView.vue
61 lines (52 loc) · 1.16 KB
/
QuickViewMapView.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<template>
<QuickViewCardOverview
:title="t('datasets.quickView.locationOnMap')"
content-has-no-padding
:sections="[]"
>
<template #content>
<MapBase :center="map.center" :markers="map.markers" />
</template>
</QuickViewCardOverview>
</template>
<script setup lang="ts">
import { computed, defineProps, withDefaults } from 'vue';
import { PointExpression } from 'leaflet';
import { useI18n } from 'vue-i18n';
import QuickViewCardOverview from './QuickViewCardOverview.vue';
import MapBase from '../../components/map/MapBase.vue';
const { t } = useI18n();
interface GpsInfo {
Latitude: number;
Longitude: number;
}
const props = withDefaults(
defineProps<{
gpsInfo: Array<GpsInfo>;
}>(),
{
gpsInfo: () => [],
}
);
const map = computed(() => {
if (!props.gpsInfo.length) {
return {
center: undefined,
markers: [],
};
}
const { Longitude, Latitude } = props.gpsInfo[0];
const mapObj = {
center: [Latitude, Longitude] as PointExpression,
markers: [
{
position: {
lat: Latitude,
lng: Longitude,
},
},
],
};
return mapObj;
});
</script>