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     if (newlat === null || newlon === null) return;
  13
  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 <UrlSubmitForm page="reverse">
  42   <div class="col-auto">
  43     <label for="reverse-lat">lat</label>
  44   </div>
  45   <div class="col-auto">
  46     <input id="reverse-lat"
  47            name="lat"
  48            type="text"
  49            class="form-control form-control-sm d-inline"
  50            placeholder="latitude"
  51            pattern="^-?\d+(\.\d+)?$"
  52            autofocus
  53            bind:value={lat}
  54            on:change={maybeSplitLatitude} />
  55   </div>
  56   <div class="col-auto">
  57     <a id="switch-coords"
  58        on:click|preventDefault|stopPropagation={() => gotoCoordinates(lon, lat)}
  59        class="btn btn-outline-secondary btn-sm"
  60        title="switch lat and lon">&lt;&gt;</a>
  61   </div>
  62   <div class="col-auto">
  63     <label for="reverse-lon">lon</label>
  64   </div>
  65   <div class="col-auto">
  66     <input id="reverse-lon"
  67            name="lon"
  68            type="text"
  69            class="form-control form-control-sm"
  70            placeholder="longitude"
  71            pattern="^-?\d+(\.\d+)?$"
  72            bind:value={lon} />
  73   </div>
  74   <div class="col-auto">
  75     <label for="reverse-zoom">max zoom</label>
  76   </div>
  77   <div class="col-auto">
  78     <select id="reverse-zoom" name="zoom" class="form-select form-select-sm" bind:value={zoom}>
  79       <option value="">---</option>
  80       {#each zoomLevels() as zoomTitle, i}
  81         <option value="{i}">{i} - {zoomTitle}</option>
  82       {/each}
  83     </select>
  84   </div>
  85   <div class="col-auto">
  86     <button type="submit" class="btn btn-primary btn-sm mx-1">Search</button>
  87   </div>
  88 </UrlSubmitForm>
  89
  90 <style>
  91   label {
  92     font-size: 0.9rem;
  93     margin-top: 0.3rem;
  94   }
  95
  96   #switch-coords {
  97     font-size: 0.6rem;
  98     font-weight: bold;
  99     cursor: pointer;
 100     padding: 2px;
 101     margin: 5px;
 102   }
 103
 104   @media (max-width: 850px) {
 105     #reverse-lon, #reverse-lat, #reverse-zoom {
 106       width: 8em;
 107     }
 108   }
 109 </style>