src/components/DetailsPostcodeHint.svelte

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