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