src/components/SearchSectionReverse.svelte

   1 <script>
   2   import { onDestroy } from 'svelte';
   3   import UrlSubmitForm from '../components/UrlSubmitForm.svelte';
   4   import { SvelteURLSearchParams } from 'svelte/reactivity';
   5
   6   import { zoomLevels } from '../lib/helpers.js';
   7   import { map_store, refresh_page } from '../lib/stores.js';
   8
   9   export let lat = '';
  10   export let lon = '';
  11   export let zoom = '';
  12   export let api_request_params = {};
  13
  14   function gotoCoordinates(newlat, newlon, newzoom) {
  15     if (newlat === null || newlon === null) return;
  16
  17     let params = new SvelteURLSearchParams();
  18     params.set('lat', newlat);
  19     params.set('lon', newlon);
  20     params.set('zoom', newzoom || zoom);
  21     refresh_page('reverse', params);
  22   }
  23
  24   const unsubscribe = map_store.subscribe(map => {
  25     if (map) {
  26       map.on('click', (e) => {
  27         let coords = e.latlng.wrap();
  28         gotoCoordinates(coords.lat.toFixed(5), coords.lng.toFixed(5));
  29       });
  30     }
  31   });
  32
  33   // common mistake is to copy&paste latitude and longitude into the 'lat' search box
  34   function maybeSplitLatitude(e) {
  35     var coords_split = e.target.value.split(/,|%2C/);
  36     if (coords_split.length === 2) {
  37       document.querySelector('input[name=lat]').value = L.Util.trim(coords_split[0]);
  38       document.querySelector('input[name=lon]').value = L.Util.trim(coords_split[1]);
  39     }
  40   }
  41
  42   function set_api_param(e) {
  43     document.querySelector('input[name=' + e.target.dataset.apiParam + ']').value = e.target.value;
  44   }
  45
  46   onDestroy(unsubscribe);
  47 </script>
  48
  49 <UrlSubmitForm page="reverse">
  50   <div class="col-auto">
  51     <label for="reverse-lat">lat</label>
  52   </div>
  53   <div class="col-auto">
  54     <input id="reverse-lat"
  55            name="lat"
  56            type="text"
  57            class="form-control form-control-sm d-inline"
  58            placeholder="latitude"
  59            pattern="^-?\d+(\.\d+)?$"
  60            bind:value={lat}
  61            on:change={maybeSplitLatitude} />
  62   </div>
  63   <div class="col-auto">
  64     <button id="switch-coords"
  65        on:click|preventDefault|stopPropagation={() => gotoCoordinates(lon, lat)}
  66        class="btn btn-outline-secondary btn-sm"
  67        title="switch lat and lon">&lt;&gt;</button>
  68   </div>
  69   <div class="col-auto">
  70     <label for="reverse-lon">lon</label>
  71   </div>
  72   <div class="col-auto">
  73     <input id="reverse-lon"
  74            name="lon"
  75            type="text"
  76            class="form-control form-control-sm"
  77            placeholder="longitude"
  78            pattern="^-?\d+(\.\d+)?$"
  79            bind:value={lon} />
  80   </div>
  81   <div class="col-auto">
  82     <label for="reverse-zoom">max zoom</label>
  83   </div>
  84   <div class="col-auto">
  85     <select id="reverse-zoom" name="zoom" class="form-select form-select-sm" bind:value={zoom}>
  86       <option value="">---</option>
  87       {#each zoomLevels() as zoomTitle, i}
  88         <option value="{i}">{i} - {zoomTitle}</option>
  89       {/each}
  90     </select>
  91   </div>
  92   <input type="hidden"
  93          name="layer" value="{api_request_params.layer || ''}" />
  94   <div class="col-auto">
  95     <button type="submit" class="btn btn-primary btn-sm mx-1">Search</button>
  96   </div>
  97 </UrlSubmitForm>
  98
  99 <!-- Additional options -->
 100 <details id="searchAdvancedOptions" class="mt-2">
 101   <summary><small>Advanced options</small></summary>
 102   <ul>
 103     <li>
 104       <label for="option_layer">Layer</label>
 105       <input id="option_layer" name="layer" placeholder="e.g. address,poi,railway,natural,manmade"
 106         value="{api_request_params.layer || ''}"
 107         data-api-param="layer" on:change={set_api_param}
 108         class="form-control form-control-sm d-inline w-auto api-param-setting">
 109     </li>
 110   </ul>
 111 </details>
 112
 113 <style>
 114   label {
 115     font-size: 0.9rem;
 116     margin-top: 0.3rem;
 117   }
 118
 119   #switch-coords {
 120     font-size: 0.6rem;
 121     font-weight: bold;
 122     cursor: pointer;
 123     padding: 2px;
 124     margin: 5px;
 125   }
 126
 127   #searchAdvancedOptions ul {
 128     list-style-type: none;
 129     padding: 0;
 130     font-size: 0.85rem;
 131   }
 132
 133   #searchAdvancedOptions li {
 134     display: inline-block;
 135     padding: 4px 10px;
 136     border-radius: 5px;
 137     border: 1px dotted #ccc;
 138     margin-right: 1em;
 139   }
 140
 141   #searchAdvancedOptions label {
 142     margin-right: 0.5em;
 143   }
 144
 145   @media (max-width: 850px) {
 146     #reverse-lon, #reverse-lat, #reverse-zoom {
 147       width: 8em;
 148     }
 149   }
 150 </style>