src/components/SearchSectionReverse.svelte

   1 <script>
   2   import UrlSubmitForm from '../components/UrlSubmitForm.svelte';
   3
   4   import { zoomLevels } from '../lib/helpers.js';
   5   import { map_store, refresh_page } from '../lib/stores.js';
   6
   7   export let lat = '';
   8   export let lon = '';
   9   export let zoom = '';
  10
  11   function gotoCoordinates(newlat, newlon, newzoom) {
  12     let params = new URLSearchParams();
  13     params.set('lat', newlat);
  14     params.set('lon', newlon);
  15     params.set('zoom', newzoom || zoom);
  16     refresh_page('reverse', params);
  17   }
  18
  19   map_store.subscribe(map => {
  20     if (map) {
  21       map.on('click', (e) => {
  22         let coords = e.latlng.wrap();
  23         gotoCoordinates(coords.lat.toFixed(5), coords.lng.toFixed(5));
  24       });
  25     }
  26   });
  27
  28   // common mistake is to copy&paste latitude and longitude into the 'lat' search box
  29   function maybeSplitLatitude(e) {
  30     var coords_split = e.target.value.split(',');
  31     if (coords_split.length === 2) {
  32       document.querySelector('input[name=lat]').value = L.Util.trim(coords_split[0]);
  33       document.querySelector('input[name=lon]').value = L.Util.trim(coords_split[1]);
  34     }
  35   }
  36
  37 </script>
  38
  39 <UrlSubmitForm page="reverse">
  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            bind:value={lat}
  49            on:change={maybeSplitLatitude} />
  50     <a id="switch-coords"
  51        on:click|preventDefault|stopPropagation={() => gotoCoordinates(lon, lat)}
  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            bind:value={lon} />
  61     <label for="reverse-zoom">max zoom</label>
  62     <select id="reverse-zoom" name="zoom" class="form-control form-control-sm" bind:value={zoom}>
  63       <option value="">---</option>
  64       {#each zoomLevels() as zoomTitle, i}
  65         <option value="{i}">{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 </UrlSubmitForm>
  73
  74 <style>
  75   label {
  76     font-weight: normal;
  77     margin-left: 0.4rem;
  78     margin-right: 0.4rem;
  79   }
  80
  81   #switch-coords {
  82     font-size: 0.6rem;
  83     font-weight: bold;
  84     cursor: pointer;
  85     padding: 2px;
  86     margin: 5px;
  87   }
  88 </style>