feat: allow to import full geometries from search results

Co-authored-by: David Larlet <david@larlet.fr>

umap/static/umap/js/modules/data/layer.js

@@ -332,6 +332,7 @@ export class DataLayer extends ServerStored {
         .parse(raw, this.options.remoteData.format)
         .then((geojson) => this.fromGeoJSON(geojson))
         .catch((error) => {
+          console.debug(error)
           Alert.error(
             translate('Cannot parse remote data for layer "{layer}" with url "{url}"', {
               layer: this.getName(),
@@ -532,6 +533,7 @@ export class DataLayer extends ServerStored {
         return data
       })
       .catch((error) => {
+        console.debug(error)
         Alert.error(translate('Import failed: invalid data'))
       })
   }

umap/static/umap/js/modules/global.js

@@ -1,5 +1,9 @@
 import { uMapAlert as Alert } from '../components/alerts/alert.js'
-import { AjaxAutocomplete, AjaxAutocompleteMultiple, AutocompleteDatalist } from './autocomplete.js'
+import {
+  AjaxAutocomplete,
+  AjaxAutocompleteMultiple,
+  AutocompleteDatalist,
+} from './autocomplete.js'
 import Help from './help.js'
 import { ServerRequest } from './request.js'
 import { SCHEMA } from './schema.js'

umap/static/umap/js/umap.controls.js

@@ -430,10 +430,14 @@ U.Search = L.PhotonSearch.extend({
   },
 
   formatResult: function (feature, el) {
-    const [tools, { button }] = U.Utils.loadTemplateWithRefs(`
+    const [tools, { point, geom }] = U.Utils.loadTemplateWithRefs(`
-      <span class="search-result-tools"><button type="button" title="${L._('Save this location as new feature')}" data-ref=button><i class="icon icon-24 icon-marker"></i></button></span>
+      <span class="search-result-tools">
+        <button type="button" title="${L._('Save this geometry as a new feature')}" data-ref=geom><i class="icon icon-16 icon-polygon"></i></button>
+        <button type="button" title="${L._('Save this place as a new feature')}" data-ref=point><i class="icon icon-16 icon-marker"></i></button>
+      </span>
     `)
-    button.addEventListener('mousedown', (event) => {
+    geom.hidden = !['R', 'W'].includes(feature.properties.osm_type)
+    point.addEventListener('mousedown', (event) => {
       event.stopPropagation()
       const datalayer = this.map._umap.defaultEditDataLayer()
       const marker = datalayer.makeFeature(feature)
@@ -441,6 +445,27 @@ U.Search = L.PhotonSearch.extend({
       marker.edit()
       this.map._umap.panel.close()
     })
+    geom.addEventListener('mousedown', async (event) => {
+      event.stopPropagation()
+      const osm_id = feature.properties.osm_id
+      const types = {
+        R: 'relation',
+        W: 'way',
+        N: 'node',
+      }
+      const osm_type = types[feature.properties.osm_type]
+      if (!osm_type || !osm_id) return
+      const url = `https://www.openstreetmap.org/api/0.6/${osm_type}/${osm_id}/full`
+      const response = await this.map._umap.request.get(url)
+      if (response?.ok) {
+        const importer = this.map._umap.importer
+        importer.build()
+        importer.format = 'osm'
+        importer.raw = await response.text()
+        importer.submit()
+        this.map._umap.panel.close()
+      }
+    })
     el.appendChild(tools)
     this._formatResult(feature, el)
   },

umap/static/umap/map.css

@@ -303,7 +303,7 @@ ul.photon-autocomplete {
     display: none;
 }
 .photon-autocomplete li.on .search-result-tools {
-    display: block;
+    display: flex;
 }