src/pages/ReversePage.svelte

   1 <script>
   2   import { untrack } from 'svelte';
   3   import { update_html_title } from '../lib/api_utils.js';
   4   import { appState } from '../state/AppState.svelte.js';
   5
   6   import Header from '../components/Header.svelte';
   7   import SearchSectionReverse from '../components/SearchSectionReverse.svelte';
   8   import ResultsList from '../components/ResultsList.svelte';
   9   import Map from '../components/Map.svelte';
  10
  11   let results = $state.raw();
  12   let api_request_params = $state.raw();
  13   let current_result = $state();
  14   let position_marker = $state(); // what the user searched for
  15
  16   function loaddata(search_params) {
  17     update_html_title();
  18
  19     api_request_params = {
  20       lat: search_params.get('lat'),
  21       lon: search_params.get('lon'),
  22       zoom: (search_params.get('zoom') > 1
  23         ? Number(search_params.get('zoom'))
  24         : Number(Nominatim_Config.Reverse_Default_Search_Zoom)),
  25       polygon_geojson: Nominatim_Config.Search_AreaPolygons ? 1 : 0,
  26       layer: search_params.get('layer'),
  27       polygon_threshold: search_params.get('polygon_threshold'),
  28       'accept-language': search_params.get('accept-language'),
  29       format: 'jsonv2'
  30     };
  31
  32     if (api_request_params.lat && api_request_params.lon) {
  33       position_marker = [api_request_params.lat, api_request_params.lon];
  34
  35       appState.fetchFromApi('reverse', api_request_params, function (data) {
  36         if (data && !data.error) {
  37           results = [data];
  38         } else {
  39           results = [];
  40         }
  41
  42         update_html_title('Reverse result for '
  43                             + api_request_params.lat
  44                             + ','
  45                             + api_request_params.lon);
  46         document.querySelector('input[name=lat]').focus();
  47       });
  48     } else {
  49       results = undefined;
  50     }
  51   }
  52
  53   $effect(() => {
  54     if (appState.page.tab === 'reverse') {
  55       const params = appState.page.params;
  56       untrack(() => loaddata(params));
  57     }
  58   });
  59 </script>
  60
  61 {#snippet subheader()}
  62   <SearchSectionReverse lat={api_request_params?.lat}
  63                         lon={api_request_params?.lon}
  64                         zoom={api_request_params?.zoom}
  65                         api_request_params={api_request_params} />
  66 {/snippet}
  67 <Header {subheader} />
  68
  69 <div id="content">
  70   <div class="sidebar">
  71     <ResultsList {results} bind:current_result reverse_search={true} />
  72   </div>
  73   <div id="map-wrapper">
  74     <Map {current_result} {position_marker} display_minimap={true} />
  75   </div>
  76 </div>
  77
  78
  79 <style>
  80   .sidebar {
  81     width: 25%;
  82     min-width: 200px;
  83     padding: 15px;
  84     padding-top: 0;
  85     display: block;
  86     float: left;
  87   }
  88
  89   #map-wrapper {
  90     position: relative;
  91     height: calc(100vh - 250pt);
  92     min-height: 300px;
  93     width: 75%;
  94     padding-right: 20px;
  95     display: block;
  96     float: left;
  97   }
  98
  99   @media (max-width: 768px) {
 100     #content {
 101       top: 0;
 102       position: relative;
 103     }
 104     .sidebar {
 105       width: 100%;
 106     }
 107     #map-wrapper {
 108       width: 100%;
 109       height: 300px;
 110       padding-left: 20px;
 111     }
 112   }
 113 </style>