Trovare un luogo da un indirizzo

Molte API, come quelle del meteo e delle mappe, vogliono latitudine e longitudine, ma le persone conoscono la propria posizione come un indirizzo. L’hook useGeocode trasforma l’indirizzo in coordinate.

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

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

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

Come con useFetch, il tuo widget attende il risultato prima di essere disegnato, quindi data c’è sempre.

Abbinarlo a un input

Fai digitare a chi installa il tuo widget la sua posizione in un input Indirizzo o in un input di testo. Leggila con useInputs, geocodificala e passa le coordinate all’API che ti serve:

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>
  );
};

Quando l’indirizzo non viene trovato

Un indirizzo senza corrispondenze restituisce comunque data, con un error.message che descrive il problema e valori segnaposto in tutti gli altri campi. Controllalo prima di usare le coordinate:

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

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

Formati di indirizzo

Gli indirizzi vengono risolti in modo più affidabile in una di queste forme:

Formato	Esempio
Città, stato, paese	"New York, NY, US"
Città, paese	"London, UK"
Codice postale, paese	"10001, US"

Cache

I risultati vengono conservati nella cache del proxy, dato che un indirizzo si sposta di rado. Tutte le cornici che cercano lo stesso indirizzo condividono un solo risultato, quindi la geocodifica non aggiunge quasi nulla al tempo che il tuo widget impiega a essere preparato.

Consulta useGeocode nel riferimento per tutto ciò che restituisce.