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