add help with overpass-turbo query for calculated postcode (#118)

diff --git a/src/components/DetailsPostcodeHint.svelte b/src/components/DetailsPostcodeHint.svelte
new file mode 100644 (file)
index 0000000..72d05b8
--- /dev/null
+++ b/src/components/DetailsPostcodeHint.svelte
@@ -0,0 +1,68 @@
+<script>
+  export let postcode;
+  export let lat;
+  export let lon;
+
+  let overpass_query = `
+    // Based on the map bounds, you can zoom out and rerun the query
+
+    [timeout:30]; // in seconds
+
+    // we define a shortcut
+    // https://wiki.openstreetmap.org/wiki/Overpass_turbo/Extended_Overpass_Turbo_Queries
+    {{postcode=${postcode}}}
+
+    (
+      node["addr:postcode"="{{postcode}}"]({{bbox}});
+      way["addr:postcode"="{{postcode}}"]({{bbox}});
+      relation["addr:postcode"="{{postcode}}"]({{bbox}});
+
+      node["postal_code"="{{postcode}}"]({{bbox}});
+      way["postal_code"="{{postcode}}"]({{bbox}});
+      relation["postal_code"="{{postcode}}"]({{bbox}});
+    );
+
+    out body;
+    >;
+    out skel qt;
+  `.replace(/^ {4}/gm, '');
+
+  // https://wiki.openstreetmap.org/wiki/Overpass_turbo/Development#URL_Parameters
+  // Q: the query
+  // C: map position
+  // R: run the query
+  let url = 'https://overpass-turbo.eu/'
+    + '?Q=' + encodeURIComponent(overpass_query)
+    + '&C=' + encodeURIComponent([lat, lon, 15].join(';'))
+    + '&R';
+
+  function openHint() {
+    document.getElementById('postcode-hint').style.display = 'block';
+  }
+  function closeHint() {
+    document.getElementById('postcode-hint').style.display = 'none';
+  }
+</script>
+
+(<a href="#openHint" on:click|preventDefault|stopPropagation={openHint}>how?</a>)
+
+<div id="postcode-hint" class="my-2 p-2">
+  <button type="button" class="close" aria-label="Close" on:click|stopPropagation={closeHint}>
+    <span aria-hidden="true">&times;</span>
+  </button>
+
+  Nightly calculated from nearby places having this postcode.
+  <a href="https://nominatim.org/release-docs/latest/develop/Postcodes/">Documentation</a>.
+  You can search for those with an <a href={url} target="_blank">Overpass Turbo query</a>.
+</div>
+
+<style>
+  #postcode-hint {
+    font-size: 0.9em;
+    background-color: #ededff;
+    display: none;
+  }
+  .close {
+    font-size: 1rem;
+  }
+</style>
\ No newline at end of file

diff --git a/src/pages/DetailsPage.svelte b/src/pages/DetailsPage.svelte
index 500c5c30248062c1964789ffb9a63988acecfeb8..34a7f6365bf4aede5f75d4d1fa97f76ea535ca75 100644 (file)
--- a/src/pages/DetailsPage.svelte
+++ b/src/pages/DetailsPage.svelte
@@ -11,6 +11,7 @@
   import SearchSectionDetails from '../components/SearchSectionDetails.svelte';
   import DetailsOneRow from '../components/DetailsOneRow.svelte';
   import DetailsLink from '../components/DetailsLink.svelte';
+  import DetailsPostcodeHint from '../components/DetailsPostcodeHint.svelte';
   import InfoRow from '../components/DetailsInfoRow.svelte';
   import InfoRowList from '../components/DetailsInfoRowList.svelte';
   import Map from '../components/Map.svelte';
@@ -109,7 +110,12 @@
             {#if aPlace.calculated_wikipedia}
               <InfoRow title="Wikipedia Calculated">{@html wikipediaLink(aPlace)}</InfoRow>
             {/if}
-            <InfoRow title="Computed Postcode">{aPlace.calculated_postcode || ''}</InfoRow>
+            <InfoRow title="Computed Postcode">
+              {#if aPlace.calculated_postcode}
+                {aPlace.calculated_postcode}
+                <DetailsPostcodeHint postcode={aPlace.calculated_postcode} lat={aPlace.centroid.coordinates[1]} lon={aPlace.centroid.coordinates[0]} />
+              {/if}
+            </InfoRow>
             <InfoRow title="Address Tags"><InfoRowList items={aPlace.addresstags} /></InfoRow>
             <InfoRow title="Extra Tags"><InfoRowList items={aPlace.extratags} /></InfoRow>
           </tbody>