> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/m20prs/Sky-AI-Forecast/llms.txt
> Use this file to discover all available pages before exploring further.

# City search

> How Sky AI Forecast resolves a city name to geographic coordinates using the Open-Meteo Geocoding API.

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]`:

| Field       | Description                        |
| ----------- | ---------------------------------- |
| `latitude`  | Decimal latitude of the city       |
| `longitude` | Decimal longitude of the city      |
| `name`      | Canonical city name (e.g. "Paris") |
| `country`   | Country 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

```js theme={null}
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.

<Warning>
  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.
</Warning>

### 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."**

```js theme={null}
} catch (error) {
    display.innerHTML = "Connection error. Please try again.";
}
```

<Note>
  The app does not retry failed requests automatically. If you see a connection error, check your internet connection and submit the form again.
</Note>

## Tips for accurate results

<Tip>
  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.
</Tip>

* 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.