blacklight/gpstracker
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Link to OSM on PointInfo latlng

Browse source
This commit is contained in:
Fabio Manganiello 2025-02-24 02:26:27 +01:00
parent 1f4eebf17c
commit 696bb89e04
Signed by: blacklight
GPG key ID: D90FBA7F76362774
1 changed files with 21 additions and 3 deletions

24
frontend/src/components/PointInfo.vue
View file

@ -6,8 +6,22 @@
</div> </div>
<div class="point-info"> <div class="point-info">
<h2 class="address" v-if="point.address">{{ point.address }}</h2> <h2 class="address" v-if="point.address">{{ point.address }}</h2>
<h2 class="latlng" v-else>{{ point.latitude }}, {{ point.longitude }}</h2> <h2 class="latlng" v-else>
<p class="latlng" v-if="point.address">{{ point.latitude }}, {{ point.longitude }}</p> <a :href="osmUrl" target="_blank" rel="noopener noreferrer">
<font-awesome-icon icon="fas fa-map-marker-alt" />
{{ point.latitude }}, {{ point.longitude }}
</a>
</h2>
<p class="latlng" v-if="point.address">
<a :href="osmUrl" target="_blank" rel="noopener noreferrer">
<font-awesome-icon icon="fas fa-map-marker-alt" />
{{ point.latitude }}, {{ point.longitude }}
</a>
</p>
<p class="altitude" v-if="point.altitude">
<font-awesome-icon icon="fas fa-mountain" />
{{ point.altitude }} m
</p>
<p class="locality" v-if="point.locality">{{ point.locality }}</p> <p class="locality" v-if="point.locality">{{ point.locality }}</p>
<p class="postal-code" v-if="point.postalCode">{{ point.postalCode }}</p> <p class="postal-code" v-if="point.postalCode">{{ point.postalCode }}</p>
<p class="country" v-if="country"> <p class="country" v-if="country">
@ -59,6 +73,10 @@ export default {
return this.country ? getEmojiFlag(this.country.iso2 as TCountryCode) : null return this.country ? getEmojiFlag(this.country.iso2 as TCountryCode) : null
}, },
osmUrl(): string {
return `https://www.openstreetmap.org/?mlat=${this.point?.latitude}&mlon=${this.point?.longitude}`
},
timeString(): string | null { timeString(): string | null {
return this.displayDate(this.point?.timestamp) return this.displayDate(this.point?.timestamp)
}, },
@ -129,7 +147,7 @@ export default {
pointer-events: none; pointer-events: none;
} }
p.latlng { p.latlng, p.altitude {
font-size: 0.8em; font-size: 0.8em;
margin: -0.25em 0 0.25em 0; margin: -0.25em 0 0.25em 0;
} }