Reverse page: new optional parameter -layer-

diff --git a/src/components/SearchSectionReverse.svelte b/src/components/SearchSectionReverse.svelte
index 46bb2b9d11a850b6f99fa6e01d7723b76d9f3eff..70174b697ed9f1ba552a582d1079ec518806cb07 100644 (file)
--- a/src/components/SearchSectionReverse.svelte
+++ b/src/components/SearchSectionReverse.svelte
@@ -7,6 +7,7 @@
   export let lat = '';
   export let lon = '';
   export let zoom = '';
+  export let api_request_params = {};
 
   function gotoCoordinates(newlat, newlon, newzoom) {
     if (newlat === null || newlon === null) return;
@@ -36,6 +37,9 @@
     }
   }
 
+  function set_api_param(e) {
+    document.querySelector('input[name=' + e.target.dataset.apiParam + ']').value = e.target.value;
+  }
 </script>
 
 <UrlSubmitForm page="reverse">
@@ -81,11 +85,27 @@
       {/each}
     </select>
   </div>
+  <input type="hidden"
+         name="layer" value="{api_request_params.layer || ''}" />
   <div class="col-auto">
     <button type="submit" class="btn btn-primary btn-sm mx-1">Search</button>
   </div>
 </UrlSubmitForm>
 
+<!-- Additional options -->
+<details id="searchAdvancedOptions" class="mt-2">
+  <summary><small>Advanced options</small></summary>
+  <ul>
+    <li>
+      <label for="option_layer">Layer</label>
+      <input id="option_layer" name="layer" placeholder="e.g. address,poi,railway,natural,manmade"
+        value="{api_request_params.layer || ''}"
+        data-api-param="layer" on:change={set_api_param}
+        class="form-control form-control-sm d-inline w-auto api-param-setting">
+    </li>
+  </ul>
+</details>
+
 <style>
   label {
     font-size: 0.9rem;
@@ -100,6 +120,24 @@
     margin: 5px;
   }
 
+  #searchAdvancedOptions ul {
+    list-style-type: none;
+    padding: 0;
+    font-size: 0.85rem;
+  }
+
+  #searchAdvancedOptions li {
+    display: inline-block;
+    padding: 4px 10px;
+    border-radius: 5px;
+    border: 1px dotted #ccc;
+    margin-right: 1em;
+  }
+
+  #searchAdvancedOptions label {
+    margin-right: 0.5em;
+  }
+
   @media (max-width: 850px) {
     #reverse-lon, #reverse-lat, #reverse-zoom {
       width: 8em;

diff --git a/src/pages/ReversePage.svelte b/src/pages/ReversePage.svelte
index 7d1fe609075d9809e5f4add0c1a5fb9a1a534b37..987f206e53406b8cf1e8260a8ddeaea2aa5675a5 100644 (file)
--- a/src/pages/ReversePage.svelte
+++ b/src/pages/ReversePage.svelte
@@ -20,6 +20,7 @@
       zoom: (search_params.get('zoom') > 1
         ? Number(search_params.get('zoom'))
         : Number(Nominatim_Config.Reverse_Default_Search_Zoom)),
+      layer: search_params.get('layer'),
       format: 'jsonv2'
     };
 
@@ -53,7 +54,10 @@
 </script>
 
 <Header>
-  <SearchSectionReverse {...api_request_params} />
+  <SearchSectionReverse lat={api_request_params.lat}
+                        lon={api_request_params.lon}
+                        zoom={api_request_params.zoom}
+                        api_request_params={api_request_params} />
 </Header>
 
 <div id="content">