]> git.openstreetmap.org Git - nominatim-ui.git/blob - src/pages/ReversePage.svelte
put search,reverse,by-id links into top navbar (#75)
[nominatim-ui.git] / src / pages / ReversePage.svelte
1 <script>
2   import { page, results_store } from '../lib/stores.js';
3   import { get_config_value } from '../lib/config_reader.js';
4   import { fetch_from_api, update_html_title } from '../lib/api_utils.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 api_request_params;
12   let current_result;
13   let position_marker; // what the user searched for
14
15   function loaddata(search_params) {
16     update_html_title();
17
18     api_request_params = {
19       lat: search_params.get('lat'),
20       lon: search_params.get('lon'),
21       zoom: (search_params.get('zoom') > 1
22         ? Number(search_params.get('zoom'))
23         : Number(get_config_value('Reverse_Default_Search_Zoom'))),
24       format: 'jsonv2'
25     };
26
27     if (api_request_params.lat || api_request_params.lat) {
28
29       fetch_from_api('reverse', api_request_params, function (data) {
30         if (data && !data.error) {
31           position_marker = [api_request_params.lat, api_request_params.lon];
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 {...api_request_params} />
58 </Header>
59
60 <div id="content">
61   <div class="sidebar">
62     <ResultsList bind:current_result reverse_search={true} />
63   </div>
64   <div id="map-wrapper">
65     <Map {current_result} {position_marker} display_minimap={true} />
66   </div>
67 </div>
68
69
70 <style>
71   .sidebar {
72     width: 25%;
73     padding: 15px;
74     padding-top: 0;
75     display: inline-block;
76     float: left;
77   }
78
79   #map-wrapper {
80     position: relative;
81     min-height: 300px;
82     height: calc(100vh - 250pt);
83     width: 75%;
84     padding-right: 20px;
85     display: inline-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       height: 300px;
99     }
100   }
101 </style>