Add coordinates to POI info and make them copyable

frontend/src/lib/components/marker-info/marker-info.ts

@@ -13,10 +13,11 @@ import { flyTo, getZoomDestinationForMarker } from "../../utils/zoom";
 import Icon from "../ui/icon/icon";
 import StringMap from "../../utils/string-map";
 import { Context } from "../facilmap/facilmap";
+import Coordinates from "../ui/coordinates/coordinates";
 
 @WithRender
 @Component({
-	components: { EditMarker, Icon }
+	components: { Coordinates, EditMarker, Icon }
 })
 export default class MarkerInfo extends Vue {
 

frontend/src/lib/components/marker-info/marker-info.vue

@@ -5,7 +5,7 @@
 	</h2>
 	<dl class="fm-search-box-collapse-point">
 		<dt class="pos">Coordinates</dt>
-		<dd class="pos">{{marker.lat | round(5)}}, {{marker.lon | round(5)}}</dd>
+		<dd class="pos"><Coordinates :point="marker"></Coordinates></dd>
 
 		<template v-if="marker.ele != null">
 			<dt class="elevation">Elevation</dt>

frontend/src/lib/components/overpass-info/overpass-info.ts

@@ -10,10 +10,11 @@ import { MapComponents, MapContext } from "../leaflet-map/leaflet-map";
 import { flyTo, getZoomDestinationForMarker } from "../../utils/zoom";
 import { Context } from "../facilmap/facilmap";
 import { OverpassElement } from "facilmap-leaflet";
+import Coordinates from "../ui/coordinates/coordinates";
 
 @WithRender
 @Component({
-	components: { Icon }
+	components: { Coordinates, Icon }
 })
 export default class OverpassInfo extends Vue {
 

frontend/src/lib/components/overpass-info/overpass-info.vue

@@ -4,6 +4,9 @@
 		{{element.tags.name || 'Unnamed POI'}}
 	</h2>
 	<dl class="fm-search-box-collapse-point">
+		<dt>Coordinates</dt>
+		<dd><Coordinates :point="element"></Coordinates></dd>
+
 		<template v-for="(value, key) in element.tags">
 			<dt>{{key}}</dt>
 			<dd v-html="renderOsmTag(key, value)"></dd>

frontend/src/lib/components/search-result-info/search-result-info.ts

@@ -11,10 +11,11 @@ import { MapComponents, MapContext } from "../leaflet-map/leaflet-map";
 import { isLineResult, isMarkerResult } from "../../utils/search";
 import { flyTo, getZoomDestinationForSearchResult } from "../../utils/zoom";
 import { Context } from "../facilmap/facilmap";
+import Coordinates from "../ui/coordinates/coordinates";
 
 @WithRender
 @Component({
-	components: { Icon }
+	components: { Coordinates, Icon }
 })
 export default class SearchResultInfo extends Vue {
 

frontend/src/lib/components/search-result-info/search-result-info.vue

@@ -11,7 +11,7 @@
 		<dd v-if="result.address">{{result.address}}</dd>
 
 		<dt v-if="result.type != 'coordinates' && result.lat != null && result.lon != null">Coordinates</dt>
-		<dd v-if="result.type != 'coordinates' && result.lat != null && result.lon != null">{{result.lat | round(5)}}, {{result.lon | round(5)}}</dd>
+		<dd v-if="result.type != 'coordinates' && result.lat != null && result.lon != null"><Coordinates :point="result"></Coordinates></dd>
 
 		<dt v-if="result.elevation != null">Elevation</dt>
 		<dd v-if="result.elevation != null">{{result.elevation}} m</dd>

frontend/src/lib/components/ui/coordinates/coordinates.scss

@@ -0,0 +1,9 @@
+.fm-coordinates {
+	button {
+		margin-left: 0.5rem;
+		padding: 0 0.25rem;
+		line-height: 1;
+		font-size: 0.85em;
+		vertical-align: top;
+	}
+}

frontend/src/lib/components/ui/coordinates/coordinates.ts

@@ -0,0 +1,27 @@
+import WithRender from "./coordinates.vue";
+import Vue from "vue";
+import { Component, Prop } from "vue-property-decorator";
+import { Point } from "facilmap-types";
+import "./coordinates.scss";
+import copyToClipboard from "copy-to-clipboard";
+import { round } from "facilmap-utils";
+import Icon from "../icon/icon";
+
+@WithRender
+@Component({
+	components: { Icon }
+})
+export default class Coordinates extends Vue {
+
+	@Prop({ type: String }) point!: Point;
+
+	get formattedCoordinates(): string {
+		return `${round(this.point.lat, 5)}, ${round(this.point.lon, 5)}`;
+	}
+
+	copy(): void {
+		copyToClipboard(this.formattedCoordinates);
+		this.$bvToast.toast("The coordinates were copied to the clipboard.", { variant: "success", title: "Coordinates copied" });
+	}
+
+}

frontend/src/lib/components/ui/coordinates/coordinates.vue

@@ -0,0 +1,4 @@
+<span class="fm-coordinates">
+	<span>{{formattedCoordinates}}</span>
+	<b-button @click="copy()" v-b-tooltip.hover="'Copy to clipboard'"><Icon icon="copy" alt="Copy to clipboard"></Icon></b-button>
+</span>

leaflet/src/utils/icons.ts

@@ -15,7 +15,7 @@ for (const key of rawIconsContext.keys() as string[]) {
 }
 
 rawIcons["fontawesome"] = {};
-for (const name of ["arrow-left", "arrow-right", "biking", "car-alt", "chart-line", "info-circle", "slash", "walking"]) {
+for (const name of ["arrow-left", "arrow-right", "biking", "car-alt", "chart-line", "copy", "info-circle", "slash", "walking"]) {
 	rawIcons["fontawesome"][name] = require(`@fortawesome/fontawesome-free/svgs/solid/${name}.svg`);
 }