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>