From 9c66652e4f7ec86aa771eba37c62d3b570730b1a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C5=BEe=20Fortun?= <joze.fortun@gmail.com>
Date: Fri, 7 Apr 2023 14:45:47 +0200
Subject: [PATCH] Improve geometry field ui/ux

---
 .../ModuleFields/Editor/Geometry.vue          | 22 +++++++++++++++++--
 .../ModuleFields/Viewer/Geometry.vue          |  1 +
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/client/web/compose/src/components/ModuleFields/Editor/Geometry.vue b/client/web/compose/src/components/ModuleFields/Editor/Geometry.vue
index c0c8d356e..41c8e96e9 100644
--- a/client/web/compose/src/components/ModuleFields/Editor/Geometry.vue
+++ b/client/web/compose/src/components/ModuleFields/Editor/Geometry.vue
@@ -68,6 +68,18 @@
           :placeholder="$t('longitude')"
         />
         <b-input-group-append>
+          <b-button
+            :title="$t('tooltip.openMap')"
+            variant="light"
+            class="d-flex align-items-center"
+            @click="openMap(ctx.index)"
+          >
+            <font-awesome-icon
+              :icon="['fas', 'map-marked-alt']"
+              class="text-primary"
+            />
+          </b-button>
+
           <b-button
             v-if="!field.options.hideCurrentLocationButton"
             :title="$t('tooltip.useCurrentLocation')"
@@ -181,10 +193,12 @@
           v-for="(marker, i) in markers"
           :key="i"
           :lat-lng="marker"
+          :opacity="i == localValueIndex ? 1.0 : 0.6"
           @click="removeMarker(i)"
         />
         <l-control class="leaflet-bar">
           <a
+            v-if="!field.options.hideCurrentLocationButton"
             :title="$t('tooltip.goToCurrentLocation')"
             role="button"
             class="d-flex justify-content-center align-items-center"
@@ -224,6 +238,7 @@ export default {
   data () {
     return {
       localValue: undefined,
+      localValueIndex: undefined,
 
       map: {
         show: false,
@@ -277,8 +292,9 @@ export default {
   },
 
   methods: {
-    openMap () {
-      const firstCoordinates = (this.field.isMulti ? this.localValue[0] : this.localValue) || {}
+    openMap (index) {
+      this.localValueIndex = index
+      const firstCoordinates = (index ? this.localValue[index] : (this.field.isMulti ? this.localValue[0] : this.localValue)) || {}
       this.map.center = firstCoordinates.coordinates && firstCoordinates.coordinates.length ? firstCoordinates.coordinates : this.field.options.center
       this.map.zoom = this.field.options.zoom
       this.map.show = true
@@ -363,6 +379,8 @@ export default {
 
     onLocationFound ({ latitude, longitude }) {
       const zoom = this.$refs.map.mapObject._zoom >= 15 ? this.$refs.map.mapObject._zoom : 15
+      const latlng = { lat: latitude, lng: longitude }
+      this.placeMarker({ latlng })
       this.$refs.map.mapObject.flyTo([latitude, longitude], zoom)
     },
 
diff --git a/client/web/compose/src/components/ModuleFields/Viewer/Geometry.vue b/client/web/compose/src/components/ModuleFields/Viewer/Geometry.vue
index 2c8f96534..dd7d9fb25 100644
--- a/client/web/compose/src/components/ModuleFields/Viewer/Geometry.vue
+++ b/client/web/compose/src/components/ModuleFields/Viewer/Geometry.vue
@@ -67,6 +67,7 @@
         />
         <l-control class="leaflet-bar">
           <a
+            v-if="!field.options.hideCurrentLocationButton"
             :title="$t('tooltip.goToCurrentLocation')"
             role="button"
             class="d-flex justify-content-center align-items-center"