reverse search: better initial zoom (#63)

[nominatim-ui.git] / src / components / SearchBar.svelte

diff --git a/src/components/SearchBar.svelte b/src/components/SearchBar.svelte
index 507bffc985a382e957fac189b3d847964791bc6f..306ce6e2c08701bf63afc45561c7b93e1efeff96 100644 (file)
--- a/src/components/SearchBar.svelte
+++ b/src/components/SearchBar.svelte
@@ -1,11 +1,10 @@
 <script>
 <script>

+  import UrlSubmitForm from '../components/UrlSubmitForm.svelte';

 
 

-  import { zoomLevels } from '../lib/helpers.js';

   import { map_store } from '../lib/stores.js';
   import { get } from 'svelte/store';
 
   export let bStructuredSearch = false;
   import { map_store } from '../lib/stores.js';
   import { get } from 'svelte/store';
 
   export let bStructuredSearch = false;

-  export let reverse_search = false;

   export let api_request_params = {};
   let sViewBox;
 
   export let api_request_params = {};
   let sViewBox;
 


@@ -30,8 +29,8 @@
   }
 
   function set_viewbox(map) {
   }
 
   function set_viewbox(map) {

-    let set_viewbox = document.getElementById('use_viewbox');
-    if (set_viewbox && set_viewbox.checked) {
+    let use_viewbox = document.getElementById('use_viewbox');
+    if (use_viewbox && use_viewbox.checked) {

       sViewBox = map_viewbox_as_string(map);
     } else {
       sViewBox = '';
       sViewBox = map_viewbox_as_string(map);
     } else {
       sViewBox = '';


@@ -42,27 +41,28 @@
     let link = document.getElementById('switch-to-reverse');
     if (link) {
       let center_lat_lng = map.wrapLatLng(map.getCenter());
     let link = document.getElementById('switch-to-reverse');
     if (link) {
       let center_lat_lng = map.wrapLatLng(map.getCenter());

-      link.href = 'reverse.html?lat=' + center_lat_lng.lat.toFixed(5) + '&lon=' + center_lat_lng.lng.toFixed(5);
+      link.href = 'reverse.html?lat=' + center_lat_lng.lat.toFixed(5)
+                   + '&lon=' + center_lat_lng.lng.toFixed(5);

     }
   }
 
   map_store.subscribe(map => {
     }
   }
 
   map_store.subscribe(map => {

-    if(!map) { return; }
+    if (!map) { return; }

 
     map.on('move', function () {
       set_viewbox(map);
 
     map.on('move', function () {
       set_viewbox(map);

-      update_reverse_link(map) 
+      update_reverse_link(map);

     });
 
     map.on('load', function () {
       set_viewbox(map);
     });
 
     map.on('load', function () {
       set_viewbox(map);

-      update_reverse_link(map) 
+      update_reverse_link(map);

     });
   });
 
   function reset_viewbox() {
     let map = get(map_store);
     });
   });
 
   function reset_viewbox() {
     let map = get(map_store);

-    if (map) { set_viewbox(map) };
+    if (map) { set_viewbox(map); }

   }
 
   function set_bounded(e) {
   }
 
   function set_bounded(e) {


@@ -74,162 +74,112 @@
     document.querySelector('input[name=dedupe]').value = e.target.checked ? 1 : '';
   }
 
     document.querySelector('input[name=dedupe]').value = e.target.checked ? 1 : '';
   }
 

-  function set_api_param(e){
-    document.querySelector('input[name=' + e.target.dataset['apiParam'] + ']').value = e.target.value;
-  }
-
-  function handleSwitchCoords() {
-    let lat = document.querySelector('input[name=lat]').value;
-    let lon = document.querySelector('input[name=lon]').value;
-    document.querySelector('input[name=lat]').value = lon;
-    document.querySelector('input[name=lon]').value = lat;
-    document.querySelector('form').submit();
+  function set_api_param(e) {
+    document.querySelector('input[name=' + e.target.dataset.apiParam + ']').value = e.target.value;

   }
 </script>
 
   }
 </script>
 

-{#if reverse_search}
-  <div class="top-bar">
-    <form class="form-inline" role="search" accept-charset="UTF-8" action="">
-      <div class="form-group">
-        <input name="format" type="hidden" value="html">
-        <label>lat</label>
-        <input name="lat"
+<div class="top-bar">
+  <ul class="nav nav-tabs">
+    <li class="nav-item">
+      <a class="nav-link" class:active={!bStructuredSearch} data-toggle="tab" href="#simple">simple</a>
+    </li>
+    <li class="nav-item">
+      <a class="nav-link" class:active={bStructuredSearch} data-toggle="tab" href="#structured">structured</a>
+    </li>
+    <div class="search-type-link">
+      <a href="details.html" class="mr-2">search by id</a>
+      <a id="switch-to-reverse" href="reverse.html">reverse search</a>
+    </div>
+  </ul>
+  <div class="tab-content p-2">
+    <div class="tab-pane" class:active={!bStructuredSearch} id="simple" role="tabpanel">
+      <UrlSubmitForm>
+        <input id="q"
+               name="q"

                type="text"
                class="form-control form-control-sm"
                type="text"
                class="form-control form-control-sm"

-               placeholder="latitude"
-               value="{api_request_params.lat || ''}" />
-        <a id="switch-coords"
-           on:click|preventDefault|stopPropagation={handleSwitchCoords}
-           class="btn btn-outline-secondary btn-sm"
-           title="switch lat and lon">&lt;&gt;</a>
-        <label>lon</label>
-        <input name="lon"
-               type="text"
-               class="form-control form-control-sm"
-               placeholder="longitude"
-               value="{api_request_params.lon || ''}" />
-        <label>max zoom</label>
-        <select name="zoom" class="form-control form-control-sm" value="{api_request_params.zoom}">
-          <option value="" selected={!api_request_params.zoom}>---</option>
-          {#each zoomLevels() as zoomTitle, i}
-            <option value="{i}" selected={i === api_request_params.zoom}>{i} - {zoomTitle}</option>
-          {/each}
-        </select>
-        <button type="submit" class="btn btn-primary btn-sm mx-1">
-          Search
-        </button>
-      </div>
-      <div class="search-type-link">
-        <a href="details.html" class="mr-2">search by id</a>
-        <a href="search.html">forward search</a>
-      </div>
-    </form>
-  </div>
-
-{:else}
-
-  <div class="top-bar">
-    <ul class="nav nav-tabs">
-      <li class="nav-item">
-        <a class="nav-link" class:active={!bStructuredSearch} data-toggle="tab" href="#simple">simple</a>
-      </li>
-      <li class="nav-item">
-        <a class="nav-link" class:active={bStructuredSearch} data-toggle="tab" href="#structured">structured</a>
-      </li>
-      <div class="search-type-link">
-        <a href="details.html" class="mr-2">search by id</a>
-        <a id="switch-to-reverse" href="reverse.html">reverse search</a>
-      </div>
-    </ul>
-    <div class="tab-content p-2">
-      <div class="tab-pane" class:active={!bStructuredSearch} id="simple" role="tabpanel">
-        <form class="form-inline" role="search" accept-charset="UTF-8" action="">
-          <input id="q"
-                 name="q"
-                 type="text"
-                 class="form-control form-control-sm"
-                 placeholder="Search"
-                 value="{api_request_params.q || ''}" />
-
-          <div class="form-group search-button-group">
-            <button type="submit" class="btn btn-primary btn-sm mx-1">Search</button>
-            <input type="hidden" name="viewbox" value="{sViewBox || ''}" />
-            <input type="hidden" name="dedupe" value="{!api_request_params.dedupe ? '' : 1}" />
-            <input type="hidden" name="bounded" value="{api_request_params.bounded ? 1 : ''}" />
-            <input type="hidden" name="accept-language" value="{api_request_params['accept-language'] || ''}" />
-            <input type="hidden" name="countrycodes" value="{api_request_params.countrycodes || ''}" />
-            <input type="hidden" name="limit" value="{api_request_params.limit || ''}" />
-            <input type="hidden" name="polygon_threshold" value="{api_request_params.polygon_threshold || ''}" />
+               placeholder="Search"
+               value="{api_request_params.q || ''}" />
+
+        <div class="form-group search-button-group">
+          <button type="submit" class="btn btn-primary btn-sm mx-1">Search</button>
+          <input type="hidden" name="viewbox" value="{sViewBox || ''}" />
+          <input type="hidden" name="dedupe" value="{!api_request_params.dedupe ? '' : 1}" />
+          <input type="hidden" name="bounded" value="{api_request_params.bounded ? 1 : ''}" />
+          <input type="hidden" name="accept-language" value="{api_request_params['accept-language'] || ''}" />
+          <input type="hidden" name="countrycodes" value="{api_request_params.countrycodes || ''}" />
+          <input type="hidden" name="limit" value="{api_request_params.limit || ''}" />
+          <input type="hidden" name="polygon_threshold" value="{api_request_params.polygon_threshold || ''}" />
+        </div>
+      </UrlSubmitForm>
+    </div>
+    <div class="tab-pane" class:active={bStructuredSearch} id="structured" role="tabpanel">
+      <UrlSubmitForm>
+        <input name="street" type="text" class="form-control form-control-sm mr-1"
+               placeholder="House number/Street"
+               value="{api_request_params.street || ''}" />
+        <input name="city" type="text" class="form-control form-control-sm mr-1"
+               placeholder="City"
+               value="{api_request_params.city || ''}" />
+        <input id="county" name="county" type="text" class="form-control form-control-sm mr-1"
+               placeholder="County"
+               value="{api_request_params.county || ''}" />
+        <input name="state" type="text" class="form-control form-control-sm mr-1"
+               placeholder="State"
+               value="{api_request_params.state || ''}" />
+        <input name="country" type="text" class="form-control form-control-sm mr-1"
+               placeholder="Country"
+               value="{api_request_params.country || ''}" />
+        <input name="postalcode" type="text" class="form-control form-control-sm mr-1"
+               placeholder="Postal Code"
+               value="{api_request_params.postalcode || ''}" />
+
+        <div class="form-group search-button-group">
+          <button type="submit" class="btn btn-primary btn-sm mx-1">Search</button>
+          <input type="hidden" name="viewbox" value="{sViewBox || ''}" />
+          <input type="hidden" name="dedupe" value="{!api_request_params.dedupe ? '' : 1}" />
+          <input type="hidden" name="bounded" value="{api_request_params.bounded ? 1 : ''}" />
+          <input type="hidden" name="accept-language" value="{api_request_params['accept-language'] || ''}" />
+          <input type="hidden" name="countrycodes" value="{api_request_params.countrycodes || ''}" />
+          <input type="hidden" name="limit" value="{api_request_params.limit || ''}" />
+          <input type="hidden" name="polygon_threshold" value="{api_request_params.polygon_threshold || ''}" />
+        </div>
+      </UrlSubmitForm>
+    </div>
+    <!-- Additional options -->
+    <a href="#advanced" class="btn btn-outline-secondary btn-sm" data-toggle="collapse" data-target="#searchAdvancedOptions" role="button" aria-expanded="false" aria-controls="collapseAdvancedOptions">
+      Advanced options
+    </a>
+    <div class="collapse" id="searchAdvancedOptions">
+      <div id="searchAdvancedOptionsContent">
+          <div class="form-check form-check-inline">
+            <span><input type="checkbox" class="form-check-input api-param-setting"
+                   id="use_viewbox" checked={api_request_params.viewbox} on:change={reset_viewbox}>
+            <label class="form-check-label" for="use_viewbox">apply viewbox</label></span>
+            <span><input type="checkbox" class="form-check-input api-param-setting"
+                   id="option_bounded" checked={!!api_request_params.bounded} on:change={set_bounded}>
+            <label class="form-check-label" for="option_bounded">bounded to viewbox</label></span>
+            <span><input type="checkbox" class="form-check-input api-param-setting"
+                   id="option_dedupe" checked={!!api_request_params.dedupe} on:change={set_dedupe}>
+            <label class="form-check-label" for="option_dedupe">deduplicate results</label></span>

           </div>
           </div>

-        </form>
-      </div>
-      <div class="tab-pane" class:active={bStructuredSearch} id="structured" role="tabpanel">
-        <form class="form-inline" role="search" accept-charset="UTF-8" action="">
-          <input name="street" type="text" class="form-control form-control-sm mr-1"
-                 placeholder="House number/Street"
-                 value="{api_request_params.street || ''}" />
-          <input name="city" type="text" class="form-control form-control-sm mr-1"
-                 placeholder="City"
-                 value="{api_request_params.city || ''}" />
-          <input id="county" name="county" type="text" class="form-control form-control-sm mr-1"
-                 placeholder="County"
-                 value="{api_request_params.county || ''}" />
-          <input name="state" type="text" class="form-control form-control-sm mr-1"
-                 placeholder="State"
-                 value="{api_request_params.state || ''}" />
-          <input name="country" type="text" class="form-control form-control-sm mr-1"
-                 placeholder="Country"
-                 value="{api_request_params.country || ''}" />
-          <input name="postalcode" type="text" class="form-control form-control-sm mr-1"
-                 placeholder="Postal Code"
-                 value="{api_request_params.postalcode || ''}" />
-
-          <div class="form-group search-button-group">
-            <button type="submit" class="btn btn-primary btn-sm mx-1">Search</button>
-            <input type="hidden" name="viewbox" value="{sViewBox || ''}" />
-            <input type="hidden" name="dedupe" value="{!api_request_params.dedupe ? '' : 1}" />
-            <input type="hidden" name="bounded" value="{api_request_params.bounded ? 1 : ''}" />
-            <input type="hidden" name="accept-language" value="{api_request_params['accept-language'] || ''}" />
-            <input type="hidden" name="countrycodes" value="{api_request_params.countrycodes || ''}" />
-            <input type="hidden" name="limit" value="{api_request_params.limit || ''}" />
-            <input type="hidden" name="polygon_threshold" value="{api_request_params.polygon_threshold || ''}" />
+          <div class="form-check form-check-inline">
+            <span><label class="form-check-label" for="option_limit">Maximum number of results: </label>
+            <input type="number" class="form-check-input api-param-setting" data-api-param="limit" id="option_limit" size="5" min="1" max="50" value="{api_request_params.limit || ''}" on:change={set_api_param}></span>
+            <span><label class="form-check-label" for="option_polygon_threashold">Polygon simplification: </label>
+            <input type="number" class="form-check-input api-param-setting" data-api-param="polygon_threshold" id="option_polygon_threshold" size="5" min="0.0" step="0.01" value="{api_request_params.polygon_threshold || ''}" on:change={set_api_param}></span>

           </div>
           </div>

-        </form>
-      </div>
-      <!-- Additional options -->
-      <a href="#advanced" class="btn btn-outline-secondary btn-sm" data-toggle="collapse" data-target="#searchAdvancedOptions" role="button" aria-expanded="false" aria-controls="collapseAdvancedOptions">
-        Advanced options
-      </a>
-      <div class="collapse" id="searchAdvancedOptions">
-        <div id="searchAdvancedOptionsContent">
-            <div class="form-check form-check-inline">
-              <span><input type="checkbox" class="form-check-input api-param-setting"
-                     id="use_viewbox" checked={api_request_params.viewbox} on:change={reset_viewbox}>
-              <label class="form-check-label" for="use_viewbox">apply viewbox</label></span>
-              <span><input type="checkbox" class="form-check-input api-param-setting"
-                     id="option_bounded" checked={!!api_request_params.bounded} on:change={set_bounded}>
-              <label class="form-check-label" for="option_bounded">bounded to viewbox</label></span>
-              <span><input type="checkbox" class="form-check-input api-param-setting"
-                     id="option_dedupe" checked={!!api_request_params.dedupe} on:change={set_dedupe}>
-              <label class="form-check-label" for="option_dedupe">deduplicate results</label></span>
-            </div>
-            <div class="form-check form-check-inline">
-              <span><label class="form-check-label" for="option_limit">Maximum number of results: </label>
-              <input type="number" class="form-check-input api-param-setting" data-api-param="limit" id="option_limit" size="5" min="1" max="50" value="{api_request_params.limit || ''}" on:change={set_api_param}></span>
-              <span><label class="form-check-label" for="option_polygon_threashold">Polygon simplification: </label>
-              <input type="number" class="form-check-input api-param-setting" data-api-param="polygon_threshold" id="option_polygon_threshold" size="5" min="0.0" step="0.01" value="{api_request_params.polygon_threshold || ''}" on:change={set_api_param}></span>
-            </div>
-            <div class="form-check form-check-inline">
-              <span><label class="form-check-label" for="accept_lang">Languages: </label>
-              <input type="text" placeholder="e.g. en,zh-Hant" class="form-check-input api-param-setting" data-api-param="accept-language" id="accept_lang" size="15" value="{api_request_params['accept-language'] || ''}" on:change={set_api_param}></span>
-              <span><label class="form-check-label" for="option_ccode">Countries: </label>
-              <input type="text" placeholder="e.g. de,gb" class="form-check-input api-param-setting" data-api-param="countrycodes" id="option_ccode" size="15" value="{api_request_params.countrycodes || ''}" on:change={set_api_param}></span>
-            </div>
-         </div>
-      </div>
-    </div> <!-- /tab-content -->
-  </div> <!-- /top-bar -->
-{/if}
+          <div class="form-check form-check-inline">
+            <span><label class="form-check-label" for="accept_lang">Languages: </label>
+            <input type="text" placeholder="e.g. en,zh-Hant" class="form-check-input api-param-setting" data-api-param="accept-language" id="accept_lang" size="15" value="{api_request_params['accept-language'] || ''}" on:change={set_api_param}></span>
+            <span><label class="form-check-label" for="option_ccode">Countries: </label>
+            <input type="text" placeholder="e.g. de,gb" class="form-check-input api-param-setting" data-api-param="countrycodes" id="option_ccode" size="15" value="{api_request_params.countrycodes || ''}" on:change={set_api_param}></span>
+          </div>
+       </div>
+    </div>
+  </div> <!-- /tab-content -->
+</div> <!-- /top-bar -->

 
 <style>
   .top-bar {
 
 <style>
   .top-bar {


@@ -248,17 +198,19 @@
     align-items: baseline
   }
 
     align-items: baseline
   }
 

-  form #q {
+  #q {

     min-width: 500px;
   }
   @media (max-width: 850px) {
     min-width: 500px;
   }
   @media (max-width: 850px) {

-    form #q {
+    #q {

       min-width: 400px;
     }
   }
 
   label {
     font-weight: normal;
       min-width: 400px;
     }
   }
 
   label {
     font-weight: normal;

+    margin-left: 0.4rem;
+    margin-right: 0.4rem;

   }
 
   #searchAdvancedOptionsContent {
   }
 
   #searchAdvancedOptionsContent {


@@ -275,12 +227,6 @@
     padding: 4px 10px;
   }
 
     padding: 4px 10px;
   }
 

-  form label {
-    margin-left: 0.4rem;
-    margin-right: 0.4rem;
-  }
-  
-

   .search-type-link {
     display: inline;
     margin-right: 2em;
   .search-type-link {
     display: inline;
     margin-right: 2em;


@@ -288,20 +234,9 @@
     right: 0
   }
 
     right: 0
   }
 

-  #switch-coords {
-    font-size: 0.6rem;
-    font-weight: bold;
-    cursor: pointer;
-    padding: 2px;
-    margin: 5px;
-  } 
-
-
-
-

   @media (max-width: 768px) {
     .search-button-group {
       display: inline;
     }
   }
   @media (max-width: 768px) {
     .search-button-group {
       display: inline;
     }
   }

-</style>
\ No newline at end of file
+</style>