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">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>