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