reverse map: add tooltips to circle markers

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

diff --git a/src/components/Header.svelte b/src/components/Header.svelte
index 06f3bd4aa6c06f936ecdb16caca60951a01e63e2..0fbead9ae9839ca7f20bf77dabcdfa4ffff33323 100644 (file)
--- a/src/components/Header.svelte
+++ b/src/components/Header.svelte
@@ -2,11 +2,25 @@
   import PageLink from './PageLink.svelte';
   import ReverseLink from './ReverseLink.svelte';
   import LastUpdated from './LastUpdated.svelte';
   import PageLink from './PageLink.svelte';
   import ReverseLink from './ReverseLink.svelte';
   import LastUpdated from './LastUpdated.svelte';

+  import Error from './Error.svelte';

 
 

-  import { page } from '../lib/stores.js';
-  import { get_config_value } from '../lib/config_reader.js';
+  import { map_store, page } from '../lib/stores.js';

 
   $: view = $page.tab;
 
   $: view = $page.tab;

+  $: page_title = Nominatim_Config.Page_Title;
+  $: reverse_only = Nominatim_Config.Reverse_Only;
+
+  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>
 </script>
 
 <style>


@@ -51,37 +65,41 @@
 
 <header class="container-fluid">
   <nav class="navbar navbar-expand-sm navbar-light">
 
 <header class="container-fluid">
   <nav class="navbar navbar-expand-sm navbar-light">

-    <!-- Brand -->
-    <div class="navbar-brand">
-      <PageLink page="search">
-        <img alt="logo" id="theme-logo" src="theme/logo.png" />
-        <h1>{get_config_value('Page_Title')}</h1>
-      </PageLink>
-    </div>
-    <!-- Toggler (hamburger button) -->
-    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
-      <span class="navbar-toggler-icon"></span>
-    </button>
-    <div class="collapse navbar-collapse" id="navbarSupportedContent">
-      <!-- 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>
-        </li>
-        <li class="nav-item {view === 'reverse' ? 'active' : ''}">
-          <ReverseLink 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>
+    <div class="container-fluid">
+      <!-- Brand -->
+      <div class="navbar-brand">
+        <PageLink page={reverse_only ? 'reverse' : 'search'}>
+          <img alt="logo" id="theme-logo" src="theme/logo.png" />
+          <h1>{page_title}</h1>
+        </PageLink>
+      </div>
+      <!-- Toggler (hamburger button) -->
+      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+      </button>
+      <div class="collapse navbar-collapse" id="navbarSupportedContent">
+        <!-- Left-aligned links -->
+        <ul class="navbar-nav me-auto">
+          {#if !reverse_only}
+            <li class="nav-item">
+              <PageLink page="search" extra_classes="nav-link {view === 'search' ? 'active' : ''}">Search</PageLink>
+            </li>
+          {/if}
+          <li class="nav-item">
+            <ReverseLink lat={map_lat} lon={map_lon} extra_classes="nav-link {view === 'reverse' ? 'active' : ''}">Reverse</ReverseLink>
+          </li>
+          <li class="nav-item">
+            <PageLink page="details" extra_classes="nav-link {view === 'details' ? 'active' : ''}">Search By ID</PageLink>
+          </li>
+        </ul>
+      </div>
+      <!-- Right aligned links -->
+      <ul class="navbar-nav">
+        <li class="nav-item">
+          <PageLink page="about" extra_classes="nav-link {view === 'about' ? 'active' : ''}">About & Help</PageLink>

         </li>
       </ul>
     </div>
         </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>
-      </li>
-    </ul>

   </nav>
 </header>
 <section class="page-title-section">
   </nav>
 </header>
 <section class="page-title-section">


@@ -90,4 +108,5 @@
 <section class="search-section">
   <slot/>
 </section>
 <section class="search-section">
   <slot/>
 </section>

+<Error/>

 <LastUpdated/>
 <LastUpdated/>