3 import { zoomLevels } from '../lib/helpers.js';
4 import { map_store } from '../lib/stores.js';
5 import { get } from 'svelte/store';
7 export let bStructuredSearch = false;
8 export let reverse_search = false;
9 export let api_request_params = {};
12 function map_viewbox_as_string(map) {
13 var bounds = map.getBounds();
14 var west = bounds.getWest();
15 var east = bounds.getEast();
17 if ((east - west) >= 360) { // covers more than whole planet
18 west = map.getCenter().lng - 179.999;
19 east = map.getCenter().lng + 179.999;
21 east = L.latLng(77, east).wrap().lng;
22 west = L.latLng(77, west).wrap().lng;
25 west.toFixed(5), // left
26 bounds.getNorth().toFixed(5), // top
27 east.toFixed(5), // right
28 bounds.getSouth().toFixed(5) // bottom
32 function set_viewbox(map) {
33 let set_viewbox = document.getElementById('use_viewbox');
34 if (set_viewbox && set_viewbox.checked) {
35 sViewBox = map_viewbox_as_string(map);
41 function update_reverse_link(map) {
42 let link = document.getElementById('switch-to-reverse');
44 let center_lat_lng = map.wrapLatLng(map.getCenter());
45 link.href = 'reverse.html?lat=' + center_lat_lng.lat.toFixed(5) + '&lon=' + center_lat_lng.lng.toFixed(5);
49 map_store.subscribe(map => {
52 map.on('move', function () {
54 update_reverse_link(map)
57 map.on('load', function () {
59 update_reverse_link(map)
63 function reset_viewbox() {
64 let map = get(map_store);
65 if (map) { set_viewbox(map) };
68 function set_bounded(e) {
69 console.log('setting', e.target);
70 document.querySelector('input[name=bounded]').value = e.target.checked ? 1 : '';
73 function set_dedupe(e) {
74 document.querySelector('input[name=dedupe]').value = e.target.checked ? 1 : '';
77 function set_api_param(e){
78 document.querySelector('input[name=' + e.target.dataset['apiParam'] + ']').value = e.target.value;
81 function handleSwitchCoords() {
82 let lat = document.querySelector('input[name=lat]').value;
83 let lon = document.querySelector('input[name=lon]').value;
84 document.querySelector('input[name=lat]').value = lon;
85 document.querySelector('input[name=lon]').value = lat;
86 document.querySelector('form').submit();
92 <form class="form-inline" role="search" accept-charset="UTF-8" action="">
93 <div class="form-group">
94 <input name="format" type="hidden" value="html">
98 class="form-control form-control-sm"
99 placeholder="latitude"
100 value="{api_request_params.lat || ''}" />
101 <a id="switch-coords"
102 on:click|preventDefault|stopPropagation={handleSwitchCoords}
103 class="btn btn-outline-secondary btn-sm"
104 title="switch lat and lon"><></a>
108 class="form-control form-control-sm"
109 placeholder="longitude"
110 value="{api_request_params.lon || ''}" />
111 <label>max zoom</label>
112 <select name="zoom" class="form-control form-control-sm" value="{api_request_params.zoom}">
113 <option value="" selected={!api_request_params.zoom}>---</option>
114 {#each zoomLevels() as zoomTitle, i}
115 <option value="{i}" selected={i === api_request_params.zoom}>{i} - {zoomTitle}</option>
118 <button type="submit" class="btn btn-primary btn-sm mx-1">
122 <div class="search-type-link">
123 <a href="details.html" class="mr-2">search by id</a>
124 <a href="search.html">forward search</a>
131 <div class="top-bar">
132 <ul class="nav nav-tabs">
133 <li class="nav-item">
134 <a class="nav-link" class:active={!bStructuredSearch} data-toggle="tab" href="#simple">simple</a>
136 <li class="nav-item">
137 <a class="nav-link" class:active={bStructuredSearch} data-toggle="tab" href="#structured">structured</a>
139 <div class="search-type-link">
140 <a href="details.html" class="mr-2">search by id</a>
141 <a id="switch-to-reverse" href="reverse.html">reverse search</a>
144 <div class="tab-content p-2">
145 <div class="tab-pane" class:active={!bStructuredSearch} id="simple" role="tabpanel">
146 <form class="form-inline" role="search" accept-charset="UTF-8" action="">
150 class="form-control form-control-sm"
152 value="{api_request_params.q || ''}" />
154 <div class="form-group search-button-group">
155 <button type="submit" class="btn btn-primary btn-sm mx-1">Search</button>
156 <input type="hidden" name="viewbox" value="{sViewBox || ''}" />
157 <input type="hidden" name="dedupe" value="{!api_request_params.dedupe ? '' : 1}" />
158 <input type="hidden" name="bounded" value="{api_request_params.bounded ? 1 : ''}" />
159 <input type="hidden" name="accept-language" value="{api_request_params['accept-language'] || ''}" />
160 <input type="hidden" name="countrycodes" value="{api_request_params.countrycodes || ''}" />
161 <input type="hidden" name="limit" value="{api_request_params.limit || ''}" />
162 <input type="hidden" name="polygon_threshold" value="{api_request_params.polygon_threshold || ''}" />
166 <div class="tab-pane" class:active={bStructuredSearch} id="structured" role="tabpanel">
167 <form class="form-inline" role="search" accept-charset="UTF-8" action="">
168 <input name="street" type="text" class="form-control form-control-sm mr-1"
169 placeholder="House number/Street"
170 value="{api_request_params.street || ''}" />
171 <input name="city" type="text" class="form-control form-control-sm mr-1"
173 value="{api_request_params.city || ''}" />
174 <input id="county" name="county" type="text" class="form-control form-control-sm mr-1"
176 value="{api_request_params.county || ''}" />
177 <input name="state" type="text" class="form-control form-control-sm mr-1"
179 value="{api_request_params.state || ''}" />
180 <input name="country" type="text" class="form-control form-control-sm mr-1"
181 placeholder="Country"
182 value="{api_request_params.country || ''}" />
183 <input name="postalcode" type="text" class="form-control form-control-sm mr-1"
184 placeholder="Postal Code"
185 value="{api_request_params.postalcode || ''}" />
187 <div class="form-group search-button-group">
188 <button type="submit" class="btn btn-primary btn-sm mx-1">Search</button>
189 <input type="hidden" name="viewbox" value="{sViewBox || ''}" />
190 <input type="hidden" name="dedupe" value="{!api_request_params.dedupe ? '' : 1}" />
191 <input type="hidden" name="bounded" value="{api_request_params.bounded ? 1 : ''}" />
192 <input type="hidden" name="accept-language" value="{api_request_params['accept-language'] || ''}" />
193 <input type="hidden" name="countrycodes" value="{api_request_params.countrycodes || ''}" />
194 <input type="hidden" name="limit" value="{api_request_params.limit || ''}" />
195 <input type="hidden" name="polygon_threshold" value="{api_request_params.polygon_threshold || ''}" />
199 <!-- Additional options -->
200 <a href="#advanced" class="btn btn-outline-secondary btn-sm" data-toggle="collapse" data-target="#searchAdvancedOptions" role="button" aria-expanded="false" aria-controls="collapseAdvancedOptions">
203 <div class="collapse" id="searchAdvancedOptions">
204 <div id="searchAdvancedOptionsContent">
205 <div class="form-check form-check-inline">
206 <span><input type="checkbox" class="form-check-input api-param-setting"
207 id="use_viewbox" checked={api_request_params.viewbox} on:change={reset_viewbox}>
208 <label class="form-check-label" for="use_viewbox">apply viewbox</label></span>
209 <span><input type="checkbox" class="form-check-input api-param-setting"
210 id="option_bounded" checked={!!api_request_params.bounded} on:change={set_bounded}>
211 <label class="form-check-label" for="option_bounded">bounded to viewbox</label></span>
212 <span><input type="checkbox" class="form-check-input api-param-setting"
213 id="option_dedupe" checked={!!api_request_params.dedupe} on:change={set_dedupe}>
214 <label class="form-check-label" for="option_dedupe">deduplicate results</label></span>
216 <div class="form-check form-check-inline">
217 <span><label class="form-check-label" for="option_limit">Maximum number of results: </label>
218 <input type="number" class="form-check-input api-param-setting" data-api-param="limit" id="option_limit" size="5" min="1" max="50" value="{api_request_params.limit || ''}" on:change={set_api_param}></span>
219 <span><label class="form-check-label" for="option_polygon_threashold">Polygon simplification: </label>
220 <input type="number" class="form-check-input api-param-setting" data-api-param="polygon_threshold" id="option_polygon_threshold" size="5" min="0.0" step="0.01" value="{api_request_params.polygon_threshold || ''}" on:change={set_api_param}></span>
222 <div class="form-check form-check-inline">
223 <span><label class="form-check-label" for="accept_lang">Languages: </label>
224 <input type="text" placeholder="e.g. en,zh-Hant" class="form-check-input api-param-setting" data-api-param="accept-language" id="accept_lang" size="15" value="{api_request_params['accept-language'] || ''}" on:change={set_api_param}></span>
225 <span><label class="form-check-label" for="option_ccode">Countries: </label>
226 <input type="text" placeholder="e.g. de,gb" class="form-check-input api-param-setting" data-api-param="countrycodes" id="option_ccode" size="15" value="{api_request_params.countrycodes || ''}" on:change={set_api_param}></span>
230 </div> <!-- /tab-content -->
231 </div> <!-- /top-bar -->
245 border: 1px solid #ddd;
248 align-items: baseline
254 @media (max-width: 850px) {
264 #searchAdvancedOptionsContent {
266 flex-direction: column;
270 #searchAdvancedOptionsContent label {
274 #searchAdvancedOptionsContent span {
280 margin-right: 0.4rem;
302 @media (max-width: 768px) {
303 .search-button-group {