An open API service indexing awesome lists of open source software.

https://github.com/0501guptanitin/typescript-geolocation-utils

A lightweight TypeScript utility to fetch user's geolocation (latitude, longitude, accuracy) using the browser's native Geolocation API. Simple, Promise-based, and ideal for modern frontend apps.
https://github.com/0501guptanitin/typescript-geolocation-utils

browser-api coordinates frontend geolocation javascript latitude-and-longitude location navigator nextjs reactjs typescript utitlities

Last synced: about 2 months ago
JSON representation

A lightweight TypeScript utility to fetch user's geolocation (latitude, longitude, accuracy) using the browser's native Geolocation API. Simple, Promise-based, and ideal for modern frontend apps.

Awesome Lists containing this project

README

          

# 📍 Get Geolocation Data in the Browser (TypeScript Utility)

This utility provides a simple, Promise-based way to access the user's geolocation in the browser using the **Geolocation API**, written in **TypeScript**.

---

## ✨ Features

- ✅ Promise-based API
- 🌐 Retrieves `latitude`, `longitude`, and `accuracy`
- 🔐 Graceful fallback if geolocation is not supported
- ⚙️ Customizable options like high accuracy, timeout, and max age

---

## 📦 Usage

### 1. Import and Call the Function

```ts
import { getGeolocationData } from './utils/geolocation';

getGeolocationData()
.then((location) => {
console.log('Location data:', location);
})
.catch((error) => {
console.error('Geolocation error:', error.message);
});
```

---

## 🔍 Full Source Code

```ts
interface GeolocationResponse {
latitude: number;
longitude: number;
accuracy: number;
}

export const getGeolocationData = (): Promise => {
return new Promise((resolve, reject) => {
if ("geolocation" in navigator) {
navigator.geolocation.getCurrentPosition(
(position) => {
const locationData: GeolocationResponse = {
latitude: position.coords.latitude,
longitude: position.coords.longitude,
accuracy: position.coords.accuracy
};
resolve(locationData);
},
(error) => {
reject(new Error(`Geolocation error: ${error.message}`));
},
{
enableHighAccuracy: true,
timeout: 5000,
maximumAge: 0
}
);
} else {
reject(new Error("Geolocation is not supported by this browser."));
}
});
}
```

---

## 🚫 Fallback Handling

If the browser does **not support** geolocation, the promise is rejected with a clear error message:

> "Geolocation is not supported by this browser."

---

## 🔐 Permissions

Modern browsers require users to grant **explicit permission** to access location. Make sure you handle rejections gracefully in your app.

---

## 🗂️ File Structure

You can place the utility like this:

```
src/
└── utils/
└── geolocation.ts
```

---

## 📝 License

MIT — feel free to use, modify, and contribute!

---

> 🌍 Accurate user location with a simple Promise — great for maps, weather, or personalized experiences.