regenbogenkarte/ts/form.ts

44 lines
1.2 KiB
TypeScript
Raw Normal View History

import { DEFAULT_ZOOM_LEVEL } from "./config";
import { getMap } from "./map";
export const initializeForms = () => {
const forms = document.querySelectorAll("form");
forms.forEach((f) => initializeForm(f));
};
function initializeForm(form: HTMLFormElement) {
form.addEventListener("submit", async (e) => {
const val = form.querySelector<HTMLInputElement>("input[name=city]")!.value;
e.preventDefault();
// Documentation: https://nominatim.org/release-docs/latest/api/Search/#result-limitation
const u = new URL("https://nominatim.openstreetmap.org/search");
u.search = new URLSearchParams({
q: val,
format: "json",
countrycodes: "de,at,ch", // comma-separated list of supported countries.
limit: "1", // only interested for first entry
}).toString();
try {
const resp = await fetch(u);
const json = await resp.json();
if (!json || !Array.isArray(json)) {
console.error("expected array as JSON, got: ", json);
return;
}
if (json.length === 0) {
// TODO: report no results to user!
return;
}
const first = json[0];
getMap().setView([first.lat, first.lon], DEFAULT_ZOOM_LEVEL);
} catch (error) {
console.error("fetching information for search input failed:", error);
}
});
}