]> git.openstreetmap.org Git - nominatim-ui.git/blob - src/components/SearchSectionReverse.svelte
Reverse map: show search position (red circle) also when no search results
[nominatim-ui.git] / src / components / SearchSectionReverse.svelte
1 <script>
2   import UrlSubmitForm from '../components/UrlSubmitForm.svelte';
3
4   import { zoomLevels } from '../lib/helpers.js';
5   import { map_store, refresh_page } from '../lib/stores.js';
6
7   export let lat = '';
8   export let lon = '';
9   export let zoom = '';
10
11   function gotoCoordinates(newlat, newlon, newzoom) {
12     if (newlat === null || newlon === null) return;
13
14     let params = new URLSearchParams();
15     params.set('lat', newlat);
16     params.set('lon', newlon);
17     params.set('zoom', newzoom || zoom);
18     refresh_page('reverse', params);
19   }
20
21   map_store.subscribe(map => {
22     if (map) {
23       map.on('click', (e) => {
24         let coords = e.latlng.wrap();
25         gotoCoordinates(coords.lat.toFixed(5), coords.lng.toFixed(5));
26       });
27     }
28   });
29
30   // common mistake is to copy&paste latitude and longitude into the 'lat' search box
31   function maybeSplitLatitude(e) {
32     var coords_split = e.target.value.split(/,|%2C/);
33     if (coords_split.length === 2) {
34       document.querySelector('input[name=lat]').value = L.Util.trim(coords_split[0]);
35       document.querySelector('input[name=lon]').value = L.Util.trim(coords_split[1]);
36     }
37   }
38
39 </script>
40
41 <UrlSubmitForm page="reverse">
42   <div class="col-auto">
43     <label for="reverse-lat">lat</label>
44   </div>
45   <div class="col-auto">
46     <input id="reverse-lat"
47            name="lat"
48            type="text"
49            class="form-control form-control-sm d-inline"
50            placeholder="latitude"
51            pattern="^-?\d+(\.\d+)?$"
52            autofocus
53            bind:value={lat}
54            on:change={maybeSplitLatitude} />
55   </div>
56   <div class="col-auto">
57     <a id="switch-coords"
58        on:click|preventDefault|stopPropagation={() => gotoCoordinates(lon, lat)}
59        class="btn btn-outline-secondary btn-sm"
60        title="switch lat and lon">&lt;&gt;</a>
61   </div>
62   <div class="col-auto">
63     <label for="reverse-lon">lon</label>
64   </div>
65   <div class="col-auto">
66     <input id="reverse-lon"
67            name="lon"
68            type="text"
69            class="form-control form-control-sm"
70            placeholder="longitude"
71            pattern="^-?\d+(\.\d+)?$"
72            bind:value={lon} />
73   </div>
74   <div class="col-auto">
75     <label for="reverse-zoom">max zoom</label>
76   </div>
77   <div class="col-auto">
78     <select id="reverse-zoom" name="zoom" class="form-select form-select-sm" bind:value={zoom}>
79       <option value="">---</option>
80       {#each zoomLevels() as zoomTitle, i}
81         <option value="{i}">{i} - {zoomTitle}</option>
82       {/each}
83     </select>
84   </div>
85   <div class="col-auto">
86     <button type="submit" class="btn btn-primary btn-sm mx-1">Search</button>
87   </div>
88 </UrlSubmitForm>
89
90 <style>
91   label {
92     font-size: 0.9rem;
93     margin-top: 0.3rem;
94   }
95
96   #switch-coords {
97     font-size: 0.6rem;
98     font-weight: bold;
99     cursor: pointer;
100     padding: 2px;
101     margin: 5px;
102   }
103
104   @media (max-width: 850px) {
105     #reverse-lon, #reverse-lat, #reverse-zoom {
106       width: 8em;
107     }
108   }
109 </style>