Einen Ort anhand einer Adresse finden

Viele APIs, etwa für Wetter und Karten, brauchen Breiten- und Längengrad. Menschen kennen ihren Standort aber als Adresse. Der Hook useGeocode macht aus dem einen das andere.

import { useGeocode } from "~lib/geocoding";

export const Widget = () => {
  const { data: place } = useGeocode("London, UK");

  return (
    <div>
      {place.name}: {place.lat}, {place.lon}
    </div>
  );
};

Wie bei useFetch wartet Ihr Widget auf das Ergebnis, bevor es gezeichnet wird. data ist also immer vorhanden.

Mit einer Eingabe kombinieren

Lassen Sie die Person, die Ihr Widget installiert, ihren Standort in eine Eingabe vom Typ Adresse oder in eine Texteingabe eintippen. Lesen Sie ihn mit useInputs, geokodieren Sie ihn und geben Sie die Koordinaten an die API weiter, die Sie brauchen:

import { useFetch } from "~lib/use-fetch";
import { useGeocode } from "~lib/geocoding";
import { useInputs } from "~lib/use-inputs";

type Forecast = {
  readonly temperature: number;
};

export const Widget = () => {
  const { LOCATION } = useInputs();
  const { data: place } = useGeocode(LOCATION);

  const { data: forecast } = useFetch<Forecast>(
    `https://api.example.com/forecast?lat=${place.lat}&lon=${place.lon}`,
  );

  return (
    <div>
      <h2>{place.name}</h2>
      <p className="text-6xl">{forecast.temperature}°C</p>
    </div>
  );
};

Wenn die Adresse nicht gefunden wird

Auch eine Adresse ohne Treffer liefert data, mit einer error.message, die das Problem beschreibt, und Platzhalterwerten überall sonst. Prüfen Sie darauf, bevor Sie die Koordinaten verwenden:

const { data: place } = useGeocode(LOCATION);

if (place.error) {
  return (
    <div>
      Couldn't find "{LOCATION}". Check the address in the Widget's settings.
    </div>
  );
}

Adressformate

Am zuverlässigsten werden Adressen in einer dieser Formen gefunden:

Format	Beispiel
Stadt, Bundesstaat, Land	"New York, NY, US"
Stadt, Land	"London, UK"
Postleitzahl, Land	"10001, US"

Caching

Ergebnisse bleiben im Proxy-Cache, denn eine Adresse zieht selten um. Alle Rahmen, die dieselbe Adresse nachschlagen, teilen sich ein Ergebnis. Das Geokodieren verlängert die Vorbereitung Ihres Widgets deshalb kaum.

Alles, was der Hook zurückgibt, finden Sie unter useGeocode in der Referenz.