import LastUpdated from './LastUpdated.svelte';
import Error from './Error.svelte';
- import { page } from '../lib/stores.js';
+ import { map_store, page } from '../lib/stores.js';
$: view = $page.tab;
$: page_title = Nominatim_Config.Page_Title;
+
+ let map_lat;
+ let map_lon;
+
+ map_store.subscribe(map => {
+ if (!map) return;
+
+ map.on('move', function () {
+ map_lat = map.getCenter().lat;
+ map_lon = map.getCenter().lng;
+ });
+ });
</script>
<style>
<PageLink page="search" extra_classes="nav-link">Search</PageLink>
</li>
<li class="nav-item {view === 'reverse' ? 'active' : ''}">
- <ReverseLink extra_classes="nav-link ">Reverse</ReverseLink>
+ <ReverseLink lat={map_lat} lon={map_lon} extra_classes="nav-link">Reverse</ReverseLink>
</li>
<li class="nav-item {view === 'details' ? 'active' : ''}">
<PageLink page="details" extra_classes="nav-link">Search By ID</PageLink>
map_store.subscribe(map => {
- if (!map) { return; }
+ if (!map) return;
map.on('move', function () {
display_map_position(map);
<input type="hidden" name="dedupe" value="{!api_request_params.dedupe ? '' : 1}" />
<input type="hidden" name="bounded" value="{api_request_params.bounded ? 1 : ''}" />
<input type="hidden" name="accept-language" value="{api_request_params['accept-language'] || ''}" />
- <input type="hidden" name="countrycodes" value="{api_request_params.countrycodes || ''}" />
+ <input type="hidden" name="countrycodes" value="{api_request_params.countrycodes || ''}"
+ pattern="^[a-zA-Z]{'{2}'}(,[a-zA-Z]{'{2}'})*$" />
<input type="hidden" name="limit" value="{api_request_params.limit || ''}" />
<input type="hidden" name="polygon_threshold" value="{api_request_params.polygon_threshold || ''}" />
</UrlSubmitForm>
<input type="hidden" name="dedupe" value="{!api_request_params.dedupe ? '' : 1}" />
<input type="hidden" name="bounded" value="{api_request_params.bounded ? 1 : ''}" />
<input type="hidden" name="accept-language" value="{api_request_params['accept-language'] || ''}" />
- <input type="hidden" name="countrycodes" value="{api_request_params.countrycodes || ''}" />
+ <input type="hidden" name="countrycodes" value="{api_request_params.countrycodes || ''}"
+ pattern="^[a-zA-Z]{'{2}'}(,[a-zA-Z]{'{2}'})*$" />
<input type="hidden" name="limit" value="{api_request_params.limit || ''}" />
<input type="hidden" name="polygon_threshold" value="{api_request_params.polygon_threshold || ''}" />
</UrlSubmitForm>
</li>
<li>
- <label for="option_ccode">Countries</label>
+ <label for="option_ccode">Country Codes</label>
<input type="text" placeholder="e.g. de,gb" class="form-control form-control-sm d-inline w-auto api-param-setting"
data-api-param="countrycodes" id="option_ccode" size="15"
value="{api_request_params.countrycodes || ''}"
+ pattern="^[a-zA-Z]{'{2}'}(,[a-zA-Z]{'{2}'})*$"
on:change={set_api_param}>
</li>
</ul>
type="text"
class="form-control form-control-sm"
placeholder="latitude"
+ pattern="^-?\d+(\.\d+)?$"
bind:value={lat}
on:change={maybeSplitLatitude} />
</div>
type="text"
class="form-control form-control-sm"
placeholder="longitude"
+ pattern="^-?\d+(\.\d+)?$"
bind:value={lon} />
</div>
<div class="form-group">
return params;
}
+
+ // https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation
+ // doesn't support hidden fields, so we check those in an extra step
+ function validate_field(field) {
+ if (field.type === 'hidden') {
+ if (field.value.length) {
+ if (field.pattern && !field.value.match(field.pattern)) return false;
+ }
+ }
+ return field.checkValidity(); // for hidden field always true
+ }
+
+ function handle_submit(event) {
+ let form = event.target;
+
+ let allow_submit = true;
+
+ Array.prototype.slice.call(form.elements).forEach(function (field) {
+ if (!validate_field(field)) {
+ alert('Invalid input in ' + field.name);
+ allow_submit = false;
+ }
+ });
+
+ if (allow_submit) refresh_page(page, serialize_form(form));
+ }
</script>
-<form on:submit|preventDefault={(e) => refresh_page(page, serialize_form(e.target))} class="form-inline" role="search" accept-charset="UTF-8" action="">
+<form on:submit|preventDefault={handle_submit} class="form-inline" role="search" accept-charset="UTF-8" action="">
<slot></slot>
</form>
update_html_title('Result for ' + api_request_params.q);
- document.querySelector('input[name=q]').focus();
+ if (anyStructuredFieldsSet) {
+ document.querySelector(".nav-tabs a[href='#structured']").click();
+ document.querySelector('input[name=street]').focus();
+ } else {
+ document.querySelector('input[name=q]').focus();
+ }
});
} else {
results_store.set(undefined);