]> git.openstreetmap.org Git - nominatim-ui.git/blob - src/components/DetailsPostcodeHint.svelte
Reverse map: show search position (red circle) also when no search results
[nominatim-ui.git] / src / components / DetailsPostcodeHint.svelte
1 <script>
2   export let postcode;
3   export let lat;
4   export let lon;
5
6   let overpass_query = `
7     // Based on the map bounds, you can zoom out and rerun the query
8
9     [timeout:30]; // in seconds
10
11     // we define a shortcut
12     // https://wiki.openstreetmap.org/wiki/Overpass_turbo/Extended_Overpass_Turbo_Queries
13     {{postcode=${postcode}}}
14
15     (
16       node["addr:postcode"="{{postcode}}"]({{bbox}});
17       way["addr:postcode"="{{postcode}}"]({{bbox}});
18       relation["addr:postcode"="{{postcode}}"]({{bbox}});
19
20       node["postal_code"="{{postcode}}"]({{bbox}});
21       way["postal_code"="{{postcode}}"]({{bbox}});
22       relation["postal_code"="{{postcode}}"]({{bbox}});
23     );
24
25     out body;
26     >;
27     out skel qt;
28   `.replace(/^ {4}/gm, '');
29
30   // https://wiki.openstreetmap.org/wiki/Overpass_turbo/Development#URL_Parameters
31   // Q: the query
32   // C: map position
33   // R: run the query
34   let url = 'https://overpass-turbo.eu/'
35     + '?Q=' + encodeURIComponent(overpass_query)
36     + '&C=' + encodeURIComponent([lat, lon, 15].join(';'))
37     + '&R';
38
39   function openHint() {
40     document.getElementById('postcode-hint').style.display = 'block';
41   }
42   function closeHint() {
43     document.getElementById('postcode-hint').style.display = 'none';
44   }
45 </script>
46
47 (<a href="#openHint" on:click|preventDefault|stopPropagation={openHint}>how?</a>)
48
49 <div id="postcode-hint" class="my-2 p-2">
50   <button type="button" class="btn-close float-end m-1" aria-label="Close" on:click|stopPropagation={closeHint} />
51
52   <p>
53     Nightly calculated from nearby places having this postcode.
54     <a href="https://nominatim.org/release-docs/latest/admin/Maintenance/#updating-postcodes">Documentation</a>.
55   </p>
56   <p>
57     You can search for those with an <a href={url} target="_blank" rel="noreferrer">Overpass Turbo query</a>.
58   </p>
59   <p>
60     <a href="https://nominatim.org/2022/06/26/state-of-postcodes.html" target="_blank" rel="noreferrer">How Nominatim uses postcodes</a>.
61 </div>
62
63 <style>
64   #postcode-hint {
65     font-size: 0.9em;
66     background-color: #ededff;
67     display: none;
68   }
69 </style>