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