src/components/ReverseBar.svelte

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