Show the visitor's country and city in JavaScript

One fetch from the browser, no backend and no key. The API answers with the location of the caller's IP address.

The call

GET https://api.ipatlas.dev/v1/me returns the location of whoever calls it, and CORS is open, so it works straight from a page. The fields you usually need are country_code, country, city and timezone.

Full example

This page fragment fills a banner and remembers the answer for the session, so each visitor costs at most one request per tab:

<p id="geo-banner" hidden></p>
<script>
async function visitorGeo() {
  const cached = sessionStorage.getItem("geo");
  if (cached) return JSON.parse(cached);
  const r = await fetch("https://api.ipatlas.dev/v1/me");
  if (!r.ok) throw new Error("lookup failed: " + r.status);
  const geo = await r.json();
  sessionStorage.setItem("geo", JSON.stringify(geo));
  return geo;
}

visitorGeo()
  .then(geo => {
    if (!geo.country) return;                       // private or unknown address: show nothing
    const el = document.getElementById("geo-banner");
    el.textContent = "Visiting from " + (geo.city ? geo.city + ", " : "") + geo.country;
    el.hidden = false;
  })
  .catch(() => {});                                 // a missing banner must never break the page
</script>

Notes

Use textContent, not innerHTML. Treat API fields as data, not markup.
No key in browser code. Anything in front-end code is public. The keyless tier is per visitor IP address, so it scales with your traffic. If you need a key, call the API from your server instead (see the server-side guide).
Fail quietly. Ad blockers, offline users and a 429 are all normal. Choose a sensible default and carry on.
Content-Security-Policy. If your site sets one, allow the API: connect-src https://api.ipatlas.dev.
Be careful with decisions. Offer a country or language as a suggestion the visitor can change; do not block anyone based on it.

Limits: without a key, 1,000 requests per day per IP address (10 req/s); with a free key, 50,000 requests per month (50 req/s). Over a limit the API returns 429. IP geolocation is approximate: country is usually right, city often is not.

Attribution

The data is DB-IP Lite, licensed CC BY 4.0. If you show or use it in a public product, link to DB-IP, for example in your footer:

<a href="https://db-ip.com">IP Geolocation by DB-IP</a>

See the API docs for fields, limits and error codes.