Skip to main content
When you type a city name and click Check Weather, the app resolves that name to a precise geographic location before fetching any weather data. This two-step process ensures forecasts are tied to exact coordinates rather than ambiguous place names.

​
How it works

  1. You enter a city name in the input field.
  2. The app encodes the name and sends a request to the Open-Meteo Geocoding API.
  3. The API returns the best-matching result, including latitude, longitude, display name, and country.
  4. Those coordinates are passed directly to the weather forecast API.

​
Geocoding API URL pattern

https://geocoding-api.open-meteo.com/v1/search?name=CITY&count=1
The count=1 parameter limits the response to the single best match. The city name is percent-encoded with encodeURIComponent before being appended to the URL.

​
Data returned

The app extracts the following fields from geoData.results[0]:
FieldDescription
latitudeDecimal latitude of the city
longitudeDecimal longitude of the city
nameCanonical city name (e.g. “Paris”)
countryCountry name (e.g. “France”)
The name and country fields are combined into a display string ("Paris, France") stored in currentCityDisplay and shown above the temperature in the current weather view.

​
Code snippet

const geoUrl = `https://geocoding-api.open-meteo.com/v1/search?name=${encodeURIComponent(city)}&count=1`;
const geoRes = await fetch(geoUrl);
const geoData = await geoRes.json();

if (!geoData.results || geoData.results.length === 0) {
    display.innerHTML = "City not found!";
    return;
}

const { latitude, longitude, name, country } = geoData.results[0];
currentCityDisplay = `${name}, ${country}`;

​
Error handling

​
City not found

If the API returns an empty results array, the app displays “City not found!” in the weather display area and stops further execution. No forecast request is made.
Searching for a very small locality or a misspelled name is the most common cause of a “City not found” result. Check the spelling and try again.

​
Network errors

If the fetch call throws (for example, due to a lost internet connection or a DNS failure), the catch block displays “Connection error. Please try again.” 
} catch (error) {
    display.innerHTML = "Connection error. Please try again.";
}
The app does not retry failed requests automatically. If you see a connection error, check your internet connection and submit the form again.

​
Tips for accurate results

Use the most specific city name you can. For example, searching “Paris, France” or simply “Paris” both work, but adding the country reduces the chance of matching a different city with the same name in another country.
  • Prefer the anglicised or local-language spelling that the geocoding service recognises (e.g. “Munich” or “München”).
  • For cities that share a name, appending the country or region (e.g. “Springfield, Illinois”) improves accuracy.
  • The geocoding API is case-insensitive, so “london”, “London”, and “LONDON” all return the same result.

Build docs developers (and LLMs) love

Get started for freeTalk to us