src/pages/DetailsPage.svelte

   1 <script>
   2   import { onMount } from 'svelte';
   3   import { fetch_from_api, update_html_title } from '../lib/api_utils.js';
   4   import { current_result_store } from '../lib/stores.js';
   5
   6   import {
   7     osmLink, detailsURL, wikipediaLink, coverageType, isAdminBoundary,
   8     formatAddressRank, formatKeywordToken
   9   } from '../lib/helpers.js';
  10   import MapIcon from '../components/MapIcon.svelte';
  11   import DetailsIndex from '../components/DetailsIndex.svelte';
  12   import DetailsOneRow from '../components/DetailsOneRow.svelte';
  13   import Map from '../components/Map.svelte';
  14
  15   let aPlace;
  16   let base_url = window.location.search;
  17
  18   function loaddata() {
  19     var search_params = new URLSearchParams(window.location.search);
  20
  21     var api_request_params = {
  22       place_id: search_params.get('place_id'),
  23       osmtype: search_params.get('osmtype'),
  24       osmid: search_params.get('osmid'),
  25       class: search_params.get('class'),
  26       keywords: search_params.get('keywords'),
  27       addressdetails: 1,
  28       hierarchy: (search_params.get('hierarchy') === '1' ? 1 : 0),
  29       group_hierarchy: 1,
  30       polygon_geojson: 1,
  31       format: 'json'
  32     };
  33
  34     if (api_request_params.place_id || (api_request_params.osmtype && api_request_params.osmid)) {
  35
  36       if (api_request_params.place_id) {
  37         update_html_title('Details for ' + api_request_params.place_id);
  38       } else {
  39         update_html_title('Details for ' + api_request_params.osmtype + api_request_params.osmid);
  40       }
  41
  42       fetch_from_api('details', api_request_params, function (data) {
  43         aPlace = data;
  44         current_result_store.set(data);
  45       });
  46     } else {
  47       aPlace = undefined;
  48     }
  49   }
  50   onMount(loaddata);
  51
  52 </script>
  53
  54 {#if aPlace}
  55   <div class="container">
  56     <div class="row">
  57       <div class="col-sm-10">
  58         <h1>
  59           {aPlace.localname}
  60           <small><a href="{detailsURL(aPlace)}">link to this page</a></small>
  61         </h1>
  62       </div>
  63       <div class="col-sm-2 text-right">
  64         <MapIcon aPlace={aPlace} />
  65       </div>
  66     </div>
  67     <div class="row">
  68       <div class="col-md-6">
  69         <table id="locationdetails" class="table table-striped">
  70           <tbody>
  71             <tr>
  72               <td>Name</td>
  73               <td>
  74                 {#each Object.keys(aPlace.names) as name}
  75                   <div class="line">
  76                     <span class="name">{aPlace.names[name]}</span> ({name})
  77                   </div>
  78                 {/each}
  79               </td>
  80             </tr>
  81             <tr>
  82               <td>Type</td>
  83               <td>{aPlace.category}:{aPlace.type}</td>
  84             </tr>
  85             <tr>
  86               <td>Last Updated</td>
  87               <td>{aPlace.indexed_date}</td>
  88             </tr>
  89             {#if (isAdminBoundary(aPlace)) }
  90             <tr>
  91               <td>Admin Level</td>
  92               <td>{aPlace.admin_level}</td>
  93             </tr>
  94             {/if}
  95             <tr>
  96               <td>Search Rank</td>
  97               <td>{aPlace.rank_search}</td>
  98             </tr>
  99             <tr>
 100               <td>Address Rank</td>
 101               <td>{aPlace.rank_address} ({formatAddressRank(aPlace.rank_address)})</td>
 102             </tr>
 103             {#if aPlace.calculated_importance}
 104               <tr>
 105                 <td>Importance</td>
 106                 <td>
 107                   {aPlace.calculated_importance}
 108                   {#if !aPlace.importance} (estimated){/if}
 109                 </td>
 110               </tr>
 111             {/if}
 112             <tr>
 113               <td>Coverage</td>
 114               <td>{coverageType(aPlace)}</td>
 115             </tr>
 116             <tr>
 117               <td>Centre Point (lat,lon)</td>
 118               <td>
 119                 {aPlace.centroid.coordinates[1]},{aPlace.centroid.coordinates[0]}
 120               </td>
 121             </tr>
 122             <tr>
 123               <td>OSM</td>
 124               <td>{@html osmLink(aPlace)}
 125             </tr>
 126             <tr>
 127               <td>
 128                 Place Id
 129                 (<a href="https://nominatim.org/release-docs/develop/api/Output/#place_id-is-not-a-persistent-id">on this server</a>)
 130               </td>
 131               <td>{aPlace.place_id}</td>
 132             </tr>
 133             {#if aPlace.calculated_wikipedia}
 134               <tr>
 135                 <td>Wikipedia Calculated</td>
 136                 <td>{@html wikipediaLink(aPlace)}</td>
 137               </tr>
 138             {/if}
 139             <tr>
 140               <td>Computed Postcode</td>
 141               <td>{aPlace.calculated_postcode}</td>
 142             </tr>
 143             <tr>
 144               <td>Address Tags</td>
 145               <td>
 146                 {#each Object.keys(aPlace.addresstags) as name}
 147                   <div class="line">
 148                     <span class="name">{aPlace.addresstags[name]}</span> ({name})
 149                   </div>
 150                 {/each}
 151               </td>
 152             </tr>
 153             <tr>
 154               <td>Extra Tags</td>
 155               <td>
 156                 {#each Object.keys(aPlace.extratags) as name}
 157                   <div class="line">
 158                     <span class="name">{aPlace.extratags[name]}</span> ({name})
 159                   </div>
 160                 {/each}
 161               </td>
 162             </tr>
 163           </tbody>
 164         </table>
 165       </div>
 166       <div class="col-md-6">
 167         <div id="map-wrapper">
 168           <Map/>
 169         </div>
 170       </div>
 171     </div>
 172     <div class="row">
 173       <div class="col-md-12">
 174         <h2>Address</h2>
 175          <table id="address" class="table table-striped table-small">
 176           <thead>
 177             <tr>
 178               <th>Local name</th>
 179               <th>Type</th>
 180               <th>OSM</th>
 181               <th>Address rank</th>
 182               <th>Admin level</th>
 183               <th>Distance</th>
 184               <th></th>
 185             </tr>
 186           </thead>
 187           <tbody>
 188             {#if aPlace.address}
 189               {#each aPlace.address as addressLine}
 190                 <DetailsOneRow addressLine={addressLine} bDistanceInMeters=false />
 191               {/each}
 192             {/if}
 193
 194             {#if aPlace.linked_places}
 195               <tr class="all-columns"><td colspan="6"><h2>Linked Places</h2></td></tr>
 196               {#each aPlace.linked_places as addressLine}
 197                 <DetailsOneRow addressLine={addressLine} bDistanceInMeters=true />
 198               {/each}
 199             {/if}
 200
 201             <tr class="all-columns"><td colspan="6"><h2>Keywords</h2></td></tr>
 202             {#if aPlace.keywords}
 203               <tr class="all-columns"><td colspan="6"><h3>Name Keywords</h3></td></tr>
 204               {#each aPlace.keywords.name as keyword}
 205                 <tr>
 206                   <td>{formatKeywordToken(keyword.token)}</td>
 207                   {#if keyword.id}
 208                     <td>word id: {keyword.id}</td>
 209                   {/if}
 210                 </tr>
 211               {/each}
 212
 213               <tr class="all-columns"><td colspan="6"><h3>Address Keywords</h3></td></tr>
 214               {#each aPlace.keywords.address as keyword}
 215                 <tr>
 216                   <td>{formatKeywordToken(keyword.token)}</td>
 217                   {#if keyword.id}
 218                     <td>word id: {keyword.id}</td>
 219                   {/if}
 220               </tr>
 221               {/each}
 222             {:else}
 223               <tr>
 224                 <td>
 225                    <a class="btn btn-outline-secondary btn-sm"
 226                     href="{base_url}&keywords=1">display keywords</a>
 227                 </td>
 228               </tr>
 229             {/if}
 230
 231             <tr class="all-columns"><td colspan="6"><h2>Parent Of</h2></td></tr>
 232             {#if aPlace.hierarchy}
 233
 234               {#each Object.keys(aPlace.hierarchy) as type}
 235                 <tr class="all-columns"><td colspan="6"><h3>{type}</h3></td></tr>
 236                 {#each aPlace.hierarchy[type] as line}
 237                   <DetailsOneRow addressLine={line} bDistanceInMeters=true />
 238                {/each}
 239               {/each}
 240
 241               {#if Object.keys(aPlace.hierarchy) > 500}
 242                 <p>There are more child objects which are not shown.</p>
 243               {/if}
 244             {:else}
 245               <tr>
 246                 <td>
 247                    <a class="btn btn-outline-secondary btn-sm"
 248                     href="{base_url}&hierarchy=1">display child places</a>
 249                 </td>
 250               </tr>
 251             {/if}
 252           </tbody>
 253         </table>
 254       </div>
 255     </div>
 256   </div>
 257 {:else if (window.location.search === '')}
 258   <DetailsIndex/>
 259 {:else}
 260   No such place found.
 261 {/if}
 262
 263
 264
 265 <style>
 266   h1 {
 267     margin: 10px 0;
 268     padding-left: 8px;
 269   }
 270
 271   h1 small a {
 272     font-size: 0.5em;
 273     white-space: nowrap;
 274   }
 275
 276   h2 {
 277     font-size: 2em;
 278     padding-left: 8px;
 279     background-color: white;
 280   }
 281   h3 {
 282     font-size: 1.5em;
 283     padding-left: 8px;
 284   }
 285
 286   tr.all-columns {
 287     background-color: white !important;
 288     border: none;
 289   }
 290   tr.all-columns td {
 291     border-top: none !important;
 292     padding-left: 0 !important;
 293   }
 294
 295   .table {
 296     width: 100%;
 297   }
 298   .table td {
 299     font-size: 0.9em;
 300   }
 301   .table>thead>tr>th, .table>tbody>tr>td {
 302     padding: 2px 8px;
 303   }
 304   .name{
 305     font-weight: bold;
 306   }
 307   #map-wrapper {
 308     width:100%;
 309     min-height: auto;
 310     height:300px;
 311     border: 1px solid #666;
 312   }
 313 </style>