Add geosearch support for geometry module field editor

client/web/compose/package.json

@@ -68,6 +68,7 @@
     "js-yaml": "^3.13.1",
     "json-bigint": "^1.0.0",
     "leaflet": "^1.7.1",
+    "leaflet-geosearch": "^3.7.0",
     "lodash": "^4.17.19",
     "markdown-it": "^12.3.2",
     "mixin-deep": "^1.3.2",

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>

client/web/compose/yarn.lock

@@ -916,6 +916,13 @@
     "@fullcalendar/core" "~4.4.0"
     fast-deep-equal "^2.0.1"
 
+"@googlemaps/js-api-loader@^1.14.3":
+  version "1.15.1"
+  resolved "https://registry.yarnpkg.com/@googlemaps/js-api-loader/-/js-api-loader-1.15.1.tgz#7d5f1d55a4ec5c99b1d8f0708f3a46b83a71384c"
+  integrity sha512-AsnEgNsB7S/VdrHGEQUaUM2e5tmjFGKBAfzR/AqO8O7TPq/jQGvoRw5liPBw4EMF38RDsHmKDV89q/X+qiUREQ==
+  dependencies:
+    fast-deep-equal "^3.1.3"
+
 "@hapi/address@2.x.x":
   version "2.1.4"
   resolved "https://registry.yarnpkg.com/@hapi/address/-/address-2.1.4.tgz#5d67ed43f3fd41a69d4b9ff7b56e7c0d1d0a81e5"
@@ -5031,7 +5038,7 @@ fast-deep-equal@^2.0.1:
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz#7b05218ddf9667bf7f370bf7fdb2cb15fdd0aa49"
   integrity sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk=
 
-fast-deep-equal@^3.1.1:
+fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
   integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
@@ -6994,6 +7001,19 @@ lcid@^2.0.0:
   dependencies:
     invert-kv "^2.0.0"
 
+leaflet-geosearch@^3.7.0:
+  version "3.7.0"
+  resolved "https://registry.yarnpkg.com/leaflet-geosearch/-/leaflet-geosearch-3.7.0.tgz#42f8918ed2584956c90d8c8798cc13aa8a22972f"
+  integrity sha512-pvDiBc+gnl0eCazT8Ls88cbCQN6NVFoYYqlK6wtQFxObkNlzlj1p919XKuhKJwrLQiF97GxY8pny5mcV9kCe6g==
+  optionalDependencies:
+    "@googlemaps/js-api-loader" "^1.14.3"
+    leaflet "^1.6.0"
+
+leaflet@^1.6.0:
+  version "1.9.3"
+  resolved "https://registry.yarnpkg.com/leaflet/-/leaflet-1.9.3.tgz#52ec436954964e2d3d39e0d433da4b2500d74414"
+  integrity sha512-iB2cR9vAkDOu5l3HAay2obcUHZ7xwUBBjph8+PGtmW/2lYhbLizWtG7nTeYht36WfOslixQF9D/uSIzhZgGMfQ==
+
 leaflet@^1.7.1:
   version "1.7.1"
   resolved "https://registry.yarnpkg.com/leaflet/-/leaflet-1.7.1.tgz#10d684916edfe1bf41d688a3b97127c0322a2a19"

locale/en/corteza-webapp-compose/field.yaml

@@ -151,6 +151,7 @@ kind:
       goToCurrentLocation: Go to current location
       useCurrentLocation: Use current location
       openMap: Open map
+    geosearchInputPlaceholder: Enter address, place or postcode
 noPermission: No permission to read field value
 no-items-found: No items found
 options: