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"
  51           class="btn-close float-end m-1"
  52           aria-label="Close"
  53           on:click|stopPropagation={closeHint}
  54   />
  55   <p>
  56     Nightly calculated from nearby places having this postcode.
  57     <a href="https://nominatim.org/release-docs/latest/admin/Maintenance/#updating-postcodes">
  58       Documentation
  59     </a>.
  60   </p>
  61   <p>
  62     You can search for those with an
  63     <a href={url} target="_blank" rel="noreferrer">Overpass Turbo query</a>.
  64   </p>
  65   <p>
  66     <a href="https://nominatim.org/2022/06/26/state-of-postcodes.html"
  67        target="_blank" rel="noreferrer">How Nominatim uses postcodes</a>.
  68   </p>
  69 </div>
  70
  71 <style>
  72   #postcode-hint {
  73     font-size: 0.9em;
  74     background-color: #ededff;
  75     display: none;
  76   }
  77 </style>