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       format: 'jsonv2'
  24     };
  25
  26     if (api_request_params.lat || api_request_params.lat) {
  27
  28       fetch_from_api('reverse', api_request_params, function (data) {
  29         position_marker = [api_request_params.lat, api_request_params.lon];
  30         if (data && !data.error) {
  31           results_store.set([data]);
  32         } else {
  33           results_store.set([]);
  34         }
  35
  36         update_html_title('Reverse result for '
  37                             + api_request_params.lat
  38                             + ','
  39                             + api_request_params.lon);
  40         document.querySelector('input[name=lat]').focus();
  41       });
  42     } else {
  43       results_store.set(undefined);
  44     }
  45   }
  46
  47   $: {
  48     let pageinfo = $page;
  49     if (pageinfo.tab === 'reverse') {
  50       loaddata(pageinfo.params);
  51     }
  52   }
  53 </script>
  54
  55 <Header>
  56   <SearchSectionReverse {...api_request_params} />
  57 </Header>
  58
  59 <div id="content">
  60   <div class="sidebar">
  61     <ResultsList bind:current_result reverse_search={true} />
  62   </div>
  63   <div id="map-wrapper">
  64     <Map {current_result} {position_marker} display_minimap={true} />
  65   </div>
  66 </div>
  67
  68
  69 <style>
  70   .sidebar {
  71     width: 25%;
  72     min-width: 200px;
  73     padding: 15px;
  74     padding-top: 0;
  75     display: block;
  76     float: left;
  77   }
  78
  79   #map-wrapper {
  80     position: relative;
  81     height: calc(100vh - 250pt);
  82     min-height: 300px;
  83     width: 75%;
  84     padding-right: 20px;
  85     display: block;
  86     float: left;
  87   }
  88
  89   @media (max-width: 768px) {
  90     #content {
  91       top: 0;
  92       position: relative;
  93     }
  94     .sidebar {
  95       width: 100%;
  96     }
  97     #map-wrapper {
  98       width: 100%;
  99       height: 300px;
 100       padding-left: 20px;
 101     }
 102   }
 103 </style>