src/pages/DetailsPage.svelte

   1 <script>
   2   import { untrack } from 'svelte';
   3   import { update_html_title } from '../lib/api_utils.js';
   4   import { appState } from '../state/AppState.svelte.js';
   5
   6   import {
   7     coverageType, isAdminBoundary,
   8     formatAddressRank, formatKeywordToken, formatOSMType
   9   } from '../lib/helpers.js';
  10   import Header from '../components/Header.svelte';
  11   import MapIcon from '../components/MapIcon.svelte';
  12   import SearchSectionDetails from '../components/SearchSectionDetails.svelte';
  13   import DetailsTableHeader from '../components/DetailsTableHeader.svelte';
  14   import DetailsOneRow from '../components/DetailsOneRow.svelte';
  15   import DetailsLink from '../components/DetailsLink.svelte';
  16   import DetailsPostcodeHint from '../components/DetailsPostcodeHint.svelte';
  17   import InfoRowList from '../components/DetailsInfoRowList.svelte';
  18   import WikipediaLink from '../components/WikipediaLink.svelte';
  19   import OsmLink from '../components/OsmLink.svelte';
  20   import Map from '../components/Map.svelte';
  21
  22   let aPlace = $state();
  23   let base_url = $state();
  24   let api_request_params = $state.raw();
  25   let api_request_finished = $state(false);
  26
  27   function loaddata(search_params) {
  28     api_request_params = {
  29       place_id: search_params.get('place_id'),
  30       osmtype: search_params.get('osmtype'),
  31       osmid: search_params.get('osmid'),
  32       class: search_params.get('class'),
  33       keywords: search_params.get('keywords'),
  34       addressdetails: 1,
  35       entrances: 1,
  36       hierarchy: (search_params.get('hierarchy') === '1' ? 1 : 0),
  37       group_hierarchy: 1,
  38       polygon_geojson: 1,
  39       format: 'json'
  40     };
  41     api_request_finished = false;
  42
  43     if (api_request_params.place_id || (api_request_params.osmtype && api_request_params.osmid)) {
  44
  45       if (api_request_params.place_id) {
  46         update_html_title('Details for ' + api_request_params.place_id);
  47       } else {
  48         update_html_title('Details for ' + api_request_params.osmtype + api_request_params.osmid);
  49       }
  50
  51       appState.fetchFromApi('details', api_request_params, function (data) {
  52         window.scrollTo(0, 0);
  53         api_request_finished = true;
  54         aPlace = (data && !data.error) ? data : undefined;
  55       });
  56     } else {
  57       aPlace = undefined;
  58     }
  59   }
  60
  61   function place_has_keywords(aThisPlace) {
  62     // Return false if Nominatim API sends 'keywords: { name: [], address: [] }'
  63     // Like no longer needed after Nominatim version 4.3
  64     return (
  65       aThisPlace.keywords && aThisPlace.keywords.name && aThisPlace.keywords.address
  66       && (aThisPlace.keywords.name.length > 0 || aThisPlace.keywords.address.length > 0)
  67     );
  68   }
  69
  70   function country_code(aThisPlace) {
  71     let aLine = aThisPlace.address.find((address_line) => address_line.type === 'country_code');
  72     return aLine ? aLine.localname : null;
  73   }
  74
  75   $effect(() => {
  76     if (appState.page.tab === 'details') {
  77       const params = appState.page.params;
  78       untrack(() => {
  79         loaddata(params);
  80         base_url = window.location.search;
  81       });
  82     }
  83   });
  84
  85   const reverse_only = Nominatim_Config.Reverse_Only;
  86 </script>
  87
  88 {#snippet subheader()}
  89   <SearchSectionDetails api_request_params={api_request_params}/>
  90 {/snippet}
  91 <Header {subheader} />
  92
  93 <div class="container">
  94   {#if aPlace}
  95     <div class="row">
  96       <div class="col-sm-10">
  97         <h1>
  98           {aPlace.localname || `${formatOSMType(aPlace.osm_type)} ${aPlace.osm_id}` }
  99           <small><DetailsLink feature={aPlace} text="link to this page" /></small>
 100         </h1>
 101       </div>
 102       <div class="col-sm-2 text-end">
 103         <MapIcon aPlace={aPlace} />
 104       </div>
 105     </div>
 106     <div class="row">
 107       <div class="col-md-6">
 108         <table id="locationdetails" class="table table-striped table-responsive">
 109           <tbody>
 110             <tr><td>Name</td><td>
 111             {#if aPlace.names && typeof (aPlace.names) === 'object'
 112               && Object.keys(aPlace.names).length}
 113               <InfoRowList items={aPlace.names} />
 114             {:else}
 115               <span class="noname fw-bold">No Name</span>
 116             {/if}
 117             </td></tr>
 118             <tr><td>Type</td><td>{aPlace.category}:{aPlace.type}</td></tr>
 119             <tr><td>Last Updated</td><td>{aPlace.indexed_date}</td></tr>
 120             {#if (isAdminBoundary(aPlace)) }
 121               <tr><td>Admin Level</td><td>{aPlace.admin_level}</td></tr>
 122             {/if}
 123             <tr><td>Search Rank</td><td>{aPlace.rank_search}</td></tr>
 124             <tr><td>Address Rank</td><td>
 125               {aPlace.rank_address} ({formatAddressRank(aPlace.rank_address)})
 126             </td></tr>
 127             {#if aPlace.calculated_importance}
 128               <tr><td>Importance</td><td>
 129                   {aPlace.calculated_importance}
 130                   {#if !aPlace.importance} (estimated){/if}
 131               </td></tr>
 132             {/if}
 133             <tr><td>Coverage</td><td>{coverageType(aPlace)}</td></tr>
 134             <tr><td>Centre Point (lat,lon)</td><td>
 135                 {aPlace.centroid.coordinates[1]},{aPlace.centroid.coordinates[0]}
 136             </td></tr>
 137             <tr><td>OSM</td><td>
 138               <OsmLink osmType={aPlace.osm_type} osmId={aPlace.osm_id}/>
 139             </td></tr>
 140             <tr><td>Place Id</td><td>
 141                {aPlace.place_id}
 142                (<a href="https://nominatim.org/release-docs/develop/api/Output/#place_id-is-not-a-persistent-id">
 143                  on this server
 144                </a>)
 145             </td></tr>
 146             {#if aPlace.calculated_wikipedia}
 147               <tr><td>Wikipedia Calculated</td><td>
 148               <WikipediaLink wikipedia={aPlace.calculated_wikipedia} />
 149               </td></tr>
 150             {/if}
 151             <tr><td>Computed Postcode</td><td>
 152               {#if aPlace.calculated_postcode}
 153                 {aPlace.calculated_postcode}
 154                 <DetailsPostcodeHint postcode={aPlace.calculated_postcode}
 155                                      lat={aPlace.centroid.coordinates[1]}
 156                                      lon={aPlace.centroid.coordinates[0]} />
 157               {/if}
 158             </td></tr>
 159             <tr><td>Address Tags</td><td>
 160               <InfoRowList items={aPlace.addresstags} />
 161             </td></tr>
 162             <tr><td>Extra Tags</td><td>
 163               <InfoRowList items={aPlace.extratags} />
 164             </td></tr>
 165           </tbody>
 166         </table>
 167       </div>
 168       <div class="col-md-6">
 169         <div id="map-wrapper">
 170           <Map current_result={aPlace} />
 171         </div>
 172       </div>
 173     </div>
 174   {:else if (window.location.search !== '' && api_request_finished)}
 175     No such place found.
 176   {/if}
 177
 178   {#if aPlace}
 179     <div class="row">
 180       <div class="col-md-12">
 181
 182         <h2>Address</h2>
 183         {#if aPlace.address}
 184           <table id="address" class="table table-striped table-small">
 185             <DetailsTableHeader />
 186             <tbody>
 187               {#each aPlace.address as addressLine}
 188                 <DetailsOneRow addressLine={addressLine}
 189                                bMarkUnusedLines={true}
 190                                bDistanceInMeters={false}
 191                                sCountryCode={country_code(aPlace)} />
 192               {/each}
 193             </tbody>
 194           </table>
 195         {/if}
 196
 197         <h2>Linked Places</h2>
 198         {#if aPlace.linked_places}
 199           <table class="table table-striped table-small">
 200             <DetailsTableHeader />
 201             <tbody>
 202               {#each aPlace.linked_places as addressLine}
 203                 <DetailsOneRow addressLine={addressLine}
 204                                bMarkUnusedLines={true}
 205                                bDistanceInMeters={true} />
 206               {/each}
 207             </tbody>
 208           </table>
 209         {/if}
 210
 211         <h2>Entrances</h2>
 212         {#if aPlace.entrances && aPlace.entrances.length}
 213           <table class="table table-striped table-small">
 214             <thead>
 215               <tr>
 216                 <th></th>
 217                 <th>Entrance Type</th>
 218                 <th>OSM</th>
 219                 <th>Extra Tags</th>
 220               </tr>
 221             </thead>
 222             <tbody>
 223               {#each aPlace.entrances as entrance, i}
 224                 <tr class="all-columns">
 225                   <td>{i + 1}</td>
 226                   <td>{entrance.type}</td>
 227                   <td><OsmLink osmType='N' osmId={entrance.osm_id} /></td>
 228                   <td><InfoRowList items={entrance.extratags || {}} /></td>
 229                 </tr>
 230               {/each}
 231             </tbody>
 232           </table>
 233         {:else}
 234           <p>Place does not have entrances</p>
 235         {/if}
 236
 237       {#if !reverse_only}
 238         <h2>Keywords</h2>
 239         {#if api_request_params.keywords}
 240           {#if place_has_keywords(aPlace)}
 241             <h3>Name Keywords</h3>
 242
 243             <table class="table table-striped table-small">
 244               <tbody>
 245                 {#each aPlace.keywords.name as keyword}
 246                   <tr>
 247                     <td>{formatKeywordToken(keyword.token)}</td>
 248                     {#if keyword.id}
 249                       <td>word id: {keyword.id}</td>
 250                     {/if}
 251                   </tr>
 252                 {/each}
 253               </tbody>
 254             </table>
 255             {#if aPlace.keywords.address}
 256               <h3>Address Keywords</h3>
 257
 258               <table class="table table-striped table-small">
 259                 <tbody>
 260                   {#each aPlace.keywords.address as keyword}
 261                     <tr>
 262                       <td>{formatKeywordToken(keyword.token)}</td>
 263                       <td>word id: {keyword.id || '?'}</td>
 264                     </tr>
 265                   {/each}
 266                 </tbody>
 267               </table>
 268             {/if}
 269           {:else}
 270             <p>Place has no keywords</p>
 271           {/if}
 272         {:else}
 273           <a class="btn btn-outline-secondary btn-sm"
 274             href="{base_url}&keywords=1">display keywords</a>
 275         {/if}
 276       {/if}
 277
 278       <h2>Parent Of</h2>
 279       {#if api_request_params.hierarchy}
 280         {#if aPlace.hierarchy && typeof (aPlace.hierarchy) === 'object'
 281           && Object.keys(aPlace.hierarchy).length}
 282
 283           {#each Object.keys(aPlace.hierarchy) as type}
 284             <h3>{type}</h3>
 285             <table class="table table-striped table-small">
 286               <DetailsTableHeader />
 287               <tbody>
 288                 {#each aPlace.hierarchy[type] as line}
 289                   <DetailsOneRow addressLine={line} bDistanceInMeters={true} />
 290                 {/each}
 291               </tbody>
 292             </table>
 293           {/each}
 294           {#if Object.keys(aPlace.hierarchy) > 500}
 295             <p>There are more child objects which are not shown.</p>
 296           {/if}
 297         {:else}
 298           <p>Place is not parent of other places</p>
 299         {/if}
 300       {:else}
 301         <a class="btn btn-outline-secondary btn-sm"
 302             href="{base_url}&hierarchy=1">display child places</a>
 303       {/if}
 304     </div>
 305   </div>
 306   {/if}
 307 </div>
 308
 309
 310
 311 <style>
 312   h1 {
 313     margin: 10px 0;
 314     padding-left: 8px;
 315   }
 316
 317   h1 small :global(a) {
 318     font-size: 0.5em;
 319     white-space: nowrap;
 320   }
 321
 322   h2 {
 323     font-size: 2em;
 324     background-color: var(--bs-body-bg);
 325     border-bottom: 2px solid silver;
 326     margin-top: 2em;
 327     margin-bottom: 0.5em;
 328   }
 329   h3 {
 330     font-size: 1.5em;
 331   }
 332
 333   table#locationdetails td {
 334     padding: 2px 8px;
 335     font-size: 0.9em;
 336   }
 337
 338   tr.all-columns {
 339     background-color: var(--bs-body-bg) !important;
 340     border: none;
 341   }
 342   tr.all-columns td {
 343     border-top: none !important;
 344     padding-left: 0 !important;
 345   }
 346   :global(span.noname){
 347     color: var(--bs-danger);
 348   }
 349
 350   #map-wrapper {
 351     position: relative;
 352     width:100%;
 353     min-height: auto;
 354     height:300px;
 355     border: 1px solid #666;
 356   }
 357 </style>