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