]> git.openstreetmap.org Git - nominatim-ui.git/blob - src/components/DetailsPostcodeHint.svelte
23999572229a4926eb39197bef1007c6663e8d3c
[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="close" aria-label="Close" on:click|stopPropagation={closeHint}>
51     <span aria-hidden="true">&times;</span>
52   </button>
53
54   Nightly calculated from nearby places having this postcode.
55   <a href="https://nominatim.org/release-docs/latest/develop/Postcodes/">Documentation</a>.
56   You can search for those with an <a href={url} target="_blank" rel="noreferrer">Overpass Turbo query</a>.
57 </div>
58
59 <style>
60   #postcode-hint {
61     font-size: 0.9em;
62     background-color: #ededff;
63     display: none;
64   }
65   .close {
66     font-size: 1rem;
67   }
68 </style>