src/components/SearchSectionReverse.svelte

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