src/pages/ReversePage.svelte

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