Components for internal links (#69)

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

diff --git a/src/components/SearchBar.svelte b/src/components/SearchBar.svelte
index 306ce6e2c08701bf63afc45561c7b93e1efeff96..dca6161ad7b187a3924a70d593056ce04d30f277 100644 (file)
--- a/src/components/SearchBar.svelte
+++ b/src/components/SearchBar.svelte
@@ -1,5 +1,7 @@
 <script>
   import UrlSubmitForm from '../components/UrlSubmitForm.svelte';
+  import DetailsLink from '../components/DetailsLink.svelte';
+  import ReverseLink from '../components/ReverseLink.svelte';
 
   import { map_store } from '../lib/stores.js';
   import { get } from 'svelte/store';
@@ -7,6 +9,8 @@
   export let bStructuredSearch = false;
   export let api_request_params = {};
   let sViewBox;
+  let lat;
+  let lon;
 
   function map_viewbox_as_string(map) {
     var bounds = map.getBounds();
@@ -38,12 +42,9 @@
   }
 
   function update_reverse_link(map) {
-    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);
-    }
+    let center_lat_lng = map.wrapLatLng(map.getCenter());
+    lat = center_lat_lng.lat.toFixed(5);
+    lon = center_lat_lng.lng.toFixed(5);
   }
 
   map_store.subscribe(map => {
@@ -88,8 +89,8 @@
       <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>
+      <DetailsLink extra_classes="mr-2">search by id</DetailsLink>
+      <ReverseLink lat={lat} lon={lon}>reverse search</ReverseLink>
     </div>
   </ul>
   <div class="tab-content p-2">