Details page: Use osm type and it as placeholder for unnamed places (#121)

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

diff --git a/src/components/Header.svelte b/src/components/Header.svelte
index 4e6359a2a7e11fcde699752ce7690c86c20fd9cb..514fe20519ec992827aff9a41b9bcf5e1fde94a3 100644 (file)
--- a/src/components/Header.svelte
+++ b/src/components/Header.svelte
@@ -4,10 +4,22 @@
   import LastUpdated from './LastUpdated.svelte';
   import Error from './Error.svelte';
 
-  import { page } from '../lib/stores.js';
+  import { map_store, page } from '../lib/stores.js';
 
   $: view = $page.tab;
   $: page_title = Nominatim_Config.Page_Title;
+
+  let map_lat;
+  let map_lon;
+
+  map_store.subscribe(map => {
+    if (!map) return;
+
+    map.on('move', function () {
+      map_lat = map.getCenter().lat;
+      map_lon = map.getCenter().lng;
+    });
+  });
 </script>
 
 <style>
@@ -67,20 +79,20 @@
       <!-- Left-aligned links -->
       <ul class="navbar-nav mr-auto">
         <li class="nav-item {view === 'search' ? 'active' : ''}">
-          <PageLink page="search" extra_classes="nav-link ">Search</PageLink>
+          <PageLink page="search" extra_classes="nav-link">Search</PageLink>
         </li>
         <li class="nav-item {view === 'reverse' ? 'active' : ''}">
-          <ReverseLink extra_classes="nav-link ">Reverse</ReverseLink>
+          <ReverseLink lat={map_lat} lon={map_lon} extra_classes="nav-link">Reverse</ReverseLink>
         </li>
         <li class="nav-item {view === 'details' ? 'active' : ''}">
-          <PageLink page="details" extra_classes="nav-link ">Search By ID</PageLink>
+          <PageLink page="details" extra_classes="nav-link">Search By ID</PageLink>
         </li>
       </ul>
     </div>
     <!-- Right aligned links -->
     <ul class="navbar-nav">
       <li class="nav-item {view === 'about' ? 'active' : ''}">
-        <PageLink page="about" extra_classes="nav-link ">About & Help</PageLink>
+        <PageLink page="about" extra_classes="nav-link">About & Help</PageLink>
       </li>
     </ul>
   </nav>