src/components/ReverseBar.svelte

   1 <script>
   2   import UrlSubmitForm from '../components/UrlSubmitForm.svelte';
   3   import DetailsLink from '../components/DetailsLink.svelte';
   4   import PageLink from '../components/PageLink.svelte';
   5
   6   import { zoomLevels } from '../lib/helpers.js';
   7   import { map_store, refresh_page } from '../lib/stores.js';
   8
   9   export let lat = '';
  10   export let lon = '';
  11   export let zoom = '';
  12
  13   function gotoCoordinates(newlat, newlon, newzoom) {
  14     let params = new URLSearchParams();
  15     params.set('lat', newlat);
  16     params.set('lon', newlon);
  17     params.set('zoom', newzoom || zoom);
  18     refresh_page('reverse', params);
  19   }
  20
  21   map_store.subscribe(map => {
  22     if (map) {
  23       map.on('click', (e) => {
  24         let coords = e.latlng.wrap();
  25         gotoCoordinates(coords.lat.toFixed(5), coords.lng.toFixed(5));
  26       });
  27     }
  28   });
  29
  30   // common mistake is to copy&paste latitude and longitude into the 'lat' search box
  31   function maybeSplitLatitude(e) {
  32     var coords_split = e.target.value.split(',');
  33     if (coords_split.length === 2) {
  34       document.querySelector('input[name=lat]').value = L.Util.trim(coords_split[0]);
  35       document.querySelector('input[name=lon]').value = L.Util.trim(coords_split[1]);
  36     }
  37   }
  38
  39 </script>
  40
  41 <div class="top-bar">
  42   <UrlSubmitForm page="reverse">
  43     <div class="form-group">
  44       <input name="format" type="hidden" value="html">
  45       <label for="reverse-lat">lat</label>
  46       <input id="reverse-lat"
  47              name="lat"
  48              type="text"
  49              class="form-control form-control-sm"
  50              placeholder="latitude"
  51              bind:value={lat}
  52              on:change={maybeSplitLatitude} />
  53       <a id="switch-coords"
  54          on:click|preventDefault|stopPropagation={() => gotoCoordinates(lon, lat)}
  55          class="btn btn-outline-secondary btn-sm"
  56          title="switch lat and lon">&lt;&gt;</a>
  57       <label for="reverse-lon">lon</label>
  58       <input id="reverse-lon"
  59              name="lon"
  60              type="text"
  61              class="form-control form-control-sm"
  62              placeholder="longitude"
  63              bind:value={lon} />
  64       <label for="reverse-zoom">max zoom</label>
  65       <select id="reverse-zoom" name="zoom" class="form-control form-control-sm" bind:value={zoom}>
  66         <option value="">---</option>
  67         {#each zoomLevels() as zoomTitle, i}
  68           <option value="{i}">{i} - {zoomTitle}</option>
  69         {/each}
  70       </select>
  71       <button type="submit" class="btn btn-primary btn-sm mx-1">
  72         Search
  73       </button>
  74     </div>
  75     <div class="search-type-link">
  76       <DetailsLink extra_classes="mr-2">search by id</DetailsLink>
  77       <PageLink page="search">forward search</PageLink>
  78     </div>
  79   </UrlSubmitForm>
  80 </div>
  81
  82 <style>
  83   .top-bar {
  84     width: 100%;
  85     padding: 1em 15px;
  86   }
  87
  88   label {
  89     font-weight: normal;
  90     margin-left: 0.4rem;
  91     margin-right: 0.4rem;
  92   }
  93
  94   .search-type-link {
  95     display: inline;
  96     margin-right: 2em;
  97     position: absolute;
  98     right: 0
  99   }
 100
 101   #switch-coords {
 102     font-size: 0.6rem;
 103     font-weight: bold;
 104     cursor: pointer;
 105     padding: 2px;
 106     margin: 5px;
 107   }
 108 </style>