Trouver un lieu à partir d’une adresse

De nombreuses API, comme celles de météo ou de cartes, demandent une latitude et une longitude, alors que les gens connaissent leur emplacement sous forme d’adresse. Le hook useGeocode convertit l’une en l’autre.

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

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

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

Comme avec useFetch, votre widget attend le résultat avant d’être dessiné : data est donc toujours là.

L’associer à une entrée

Laissez la personne qui installe votre widget saisir son emplacement dans une entrée Adresse ou dans une entrée de texte. Lisez-la avec useInputs, géocodez-la et transmettez les coordonnées à l’API dont vous avez besoin :

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

Quand l’adresse est introuvable

Une adresse sans correspondance renvoie quand même data, avec un error.message qui décrit le problème et des valeurs de remplacement partout ailleurs. Vérifiez sa présence avant d’utiliser les coordonnées :

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

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

Formats d’adresse

Les adresses sont trouvées de la façon la plus fiable sous l’une de ces formes :

Format	Exemple
Ville, État, Pays	"New York, NY, US"
Ville, Pays	"London, UK"
Code postal, Pays	"10001, US"

Mise en cache

Les résultats sont conservés dans le cache du proxy, car une adresse change rarement de place. Tous les cadres qui recherchent la même adresse partagent un même résultat : le géocodage n’ajoute donc presque rien au temps de préparation de votre widget.

Consultez useGeocode dans la référence pour connaître tout ce qu’il renvoie.