Add geosearch support for geometry module field editor

client/web/compose/src/components/ModuleFields/Editor/Geometry.vue

@@ -141,6 +141,24 @@
         {{ $t('clickToPlaceMarker') }}
       </template>
 
+      <div class="geosearch-container">
+        <input
+          class="geosearch-input"
+          :placeholder="$t('geosearchInputPlaceholder')"
+          @input="onGeoSearch"
+        >
+        <div class="geosearch-results">
+          <div
+            v-for="(result, idx) in searchResults"
+            :key="idx"
+            class="geosearch-result"
+            @click="placeGeoSearchMarker(result)"
+          >
+            {{ result.label }}
+          </div>
+        </div>
+      </div>
+
       <l-map
         ref="map"
         :zoom="map.zoom"
@@ -178,8 +196,10 @@
 </template>
 <script>
 import base from './base'
+import { debounce } from 'lodash'
 import { latLng } from 'leaflet'
 import { LControl } from 'vue2-leaflet'
+import { OpenStreetMapProvider } from 'leaflet-geosearch'
 
 export default {
   i18nOptions: {
@@ -204,6 +224,8 @@ export default {
         rotation: 0,
         attribution: '&copy; <a target="_blank" href="http://osm.org/copyright">OpenStreetMap</a>',
       },
+
+      searchResults: [],
     }
   },
 
@@ -280,6 +302,8 @@ export default {
       } else {
         this.localValue = coords
       }
+
+      this.searchResults = []
     },
 
     removeMarker (i) {
@@ -331,6 +355,70 @@ export default {
       const zoom = this.$refs.map.mapObject._zoom >= 13 ? this.$refs.map.mapObject._zoom : 13
       this.$refs.map.mapObject.flyTo([latitude, longitude], zoom)
     },
+
+    placeGeoSearchMarker (result) {
+      this.map.center = [result.latlng.lat, result.latlng.lng]
+      this.placeMarker(result)
+    },
+
+    onGeoSearch: debounce(async function (e) {
+      const provider = new OpenStreetMapProvider()
+      const results = await provider.search({ query: e.target.value })
+
+      this.searchResults = results.map(result => ({
+        ...result,
+        latlng: {
+          lat: result.raw.lat,
+          lng: result.raw.lon,
+        },
+      }))
+    }, 500),
   },
 }
 </script>
+
+<style>
+.geosearch-container {
+  position: absolute;
+  display: block;
+  height: auto;
+  width: 400px;
+  max-width: 400px;
+  margin: 10px auto 0;
+  cursor: auto;
+  z-index: 10000;
+  border: 2px solid rgba(0,0,0,.2);
+  background-color: #fff;
+  padding: 0 8px;
+  font-size: 12px;
+  padding-bottom: 5px;
+  left: 25%;
+  top: 0px;
+}
+
+.geosearch-input {
+  background-color: #fff;
+  border-radius: 2px;
+  height: 38px;
+  border: none;
+  min-width: 100%;
+  width: 100%;
+  outline: none;
+}
+
+.geosearch-result {
+  border: 1px solid transparent;
+  line-height: 32px;
+  padding: 0 8px;
+  font-size: 12px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.geosearch-result:hover {
+  background-color: #f8f8f8;
+  border-color: #c6c6c6;
+  cursor: pointer;
+}
+</style>