DEV Community: echoluoluo

How to Find Nearby Places from Latitude and Longitude with JavaScript

echoluoluo — Mon, 24 Aug 2026 03:36:25 +0000

When you already have a latitude and longitude pair, you can do much more than simply place a marker on a map.

For example, given:

Latitude:  40.7128
Longitude: -74.0060

you may want to find:

restaurants nearby,
cafes,
hotels,
hospitals,
gas stations,
pharmacies,
or other points of interest.

This is a common feature in travel apps, location tools, map interfaces, delivery applications, and local discovery websites.

In this tutorial, we'll build a simple nearby-place search with JavaScript using OpenStreetMap data and the Overpass API.

We'll cover:

How radius-based nearby searches work
How to query OpenStreetMap POIs
How to search multiple place categories
How to extract coordinates from results
How to calculate the distance to each result
A few important production considerations

The Basic Idea

A nearby search usually starts with three pieces of information:

Latitude
Longitude
Search radius

For example:

40.7128
-74.0060
1500 meters

We can then ask a geographic data source:

Find restaurants within
1500 meters of
40.7128, -74.0060

Conceptually:

User selects location
        ↓
Latitude + Longitude
        ↓
Nearby place query
        ↓
POI results
        ↓
Name + category + coordinates
        ↓
Display on map

Once you already have coordinates, the rest becomes a spatial search problem.

Using OpenStreetMap Data

OpenStreetMap contains geographic objects such as:

restaurants
cafes
hotels
schools
hospitals
shops
parks
pharmacies
fuel stations

These locations are usually described using tags.

A restaurant, for example, might contain:

amenity=restaurant

A cafe:

amenity=cafe

A hospital:

amenity=hospital

One way to query this data is the Overpass API.

For a simple experiment or developer tool, it gives us a convenient way to request OpenStreetMap objects near a coordinate.

A Simple Restaurant Query

Suppose we want to find restaurants within 1,500 meters of New York City coordinates:

const latitude = 40.7128;
const longitude = -74.0060;
const radius = 1500;

An Overpass query can look like this:

const query = `
[out:json][timeout:25];

(
  node["amenity"="restaurant"]
    (around:${radius},${latitude},${longitude});

  way["amenity"="restaurant"]
    (around:${radius},${latitude},${longitude});

  relation["amenity"="restaurant"]
    (around:${radius},${latitude},${longitude});
);

out center tags;
`;

There are three object types here:

node
way
relation

A small restaurant may be represented as a node.

A larger building may be represented as a way.

More complex geographic objects can also be relations.

Searching all three gives us more complete results.

Send the Request with JavaScript

We can create a reusable function:

async function findNearbyRestaurants(
  latitude,
  longitude,
  radius = 1500
) {
  const query = `
    [out:json][timeout:25];

    (
      node["amenity"="restaurant"]
        (around:${radius},${latitude},${longitude});

      way["amenity"="restaurant"]
        (around:${radius},${latitude},${longitude});

      relation["amenity"="restaurant"]
        (around:${radius},${latitude},${longitude});
    );

    out center tags;
  `;

  const response = await fetch(
    "https://overpass-api.de/api/interpreter",
    {
      method: "POST",
      body: new URLSearchParams({
        data: query
      })
    }
  );

  if (!response.ok) {
    throw new Error(
      `Nearby search failed: ${response.status}`
    );
  }

  return response.json();
}

Then call it:

findNearbyRestaurants(
  40.7128,
  -74.0060
).then(data => {
  console.log(data.elements);
});

The response contains OpenStreetMap elements matching our query.

Extract Useful Place Information

Raw OpenStreetMap objects contain more information than we usually need.

Let's normalize the response.

function normalizePlace(element) {
  const latitude =
    element.lat ??
    element.center?.lat;

  const longitude =
    element.lon ??
    element.center?.lon;

  return {
    id: element.id,

    name:
      element.tags?.name ??
      "Unnamed place",

    latitude,
    longitude,

    category:
      element.tags?.amenity,

    cuisine:
      element.tags?.cuisine,

    website:
      element.tags?.website,

    openingHours:
      element.tags?.opening_hours
  };
}

Now:

const data =
  await findNearbyRestaurants(
    40.7128,
    -74.0060
  );

const places =
  data.elements
    .map(normalizePlace)
    .filter(
      place =>
        place.latitude != null &&
        place.longitude != null
    );

console.log(places);

The result becomes much easier to work with:

[
  {
    id: 123456,
    name: "Example Restaurant",
    latitude: 40.715,
    longitude: -74.003,
    category: "restaurant",
    cuisine: "italian"
  }
]

Search Multiple Categories

Searching only for restaurants is useful, but most map applications support several categories.

We can use a regular expression in the Overpass query.

For example:

const amenityTypes = [
  "restaurant",
  "cafe",
  "bar",
  "fast_food"
];

Convert them into:

const pattern =
  amenityTypes.join("|");

Then use:

["amenity"~"restaurant|cafe|bar|fast_food"]

Our JavaScript function becomes:

async function findNearbyFood(
  latitude,
  longitude,
  radius = 1500
) {
  const pattern =
    "restaurant|cafe|bar|fast_food";

  const query = `
    [out:json][timeout:25];

    (
      node["amenity"~"${pattern}"]
        (around:${radius},${latitude},${longitude});

      way["amenity"~"${pattern}"]
        (around:${radius},${latitude},${longitude});

      relation["amenity"~"${pattern}"]
        (around:${radius},${latitude},${longitude});
    );

    out center tags;
  `;

  const response = await fetch(
    "https://overpass-api.de/api/interpreter",
    {
      method: "POST",

      body: new URLSearchParams({
        data: query
      })
    }
  );

  if (!response.ok) {
    throw new Error(
      "Unable to search nearby places"
    );
  }

  return response.json();
}

This gives us a simple nearby food search.

Calculate Distance to Each Place

The API tells us which places are nearby, but we may also want to show:

Cafe A       240 m
Restaurant B 480 m
Cafe C       720 m

We can calculate this using the Haversine formula.

function distanceBetween(
  lat1,
  lon1,
  lat2,
  lon2
) {
  const earthRadius = 6371000;

  const toRadians = degrees =>
    degrees * Math.PI / 180;

  const dLat =
    toRadians(lat2 - lat1);

  const dLon =
    toRadians(lon2 - lon1);

  const a =
    Math.sin(dLat / 2) ** 2 +
    Math.cos(toRadians(lat1)) *
    Math.cos(toRadians(lat2)) *
    Math.sin(dLon / 2) ** 2;

  const c =
    2 * Math.atan2(
      Math.sqrt(a),
      Math.sqrt(1 - a)
    );

  return earthRadius * c;
}

Then:

const origin = {
  latitude: 40.7128,
  longitude: -74.0060
};

const placesWithDistance =
  places.map(place => ({
    ...place,

    distance:
      distanceBetween(
        origin.latitude,
        origin.longitude,
        place.latitude,
        place.longitude
      )
  }));

We can sort the results:

placesWithDistance.sort(
  (a, b) =>
    a.distance - b.distance
);

Now the nearest location appears first.

Format the Distance

A small formatting helper improves the UI:

function formatDistance(meters) {
  if (meters < 1000) {
    return `${Math.round(meters)} m`;
  }

  return `${(
    meters / 1000
  ).toFixed(1)} km`;
}

Usage:

for (
  const place
  of placesWithDistance
) {
  console.log(
    place.name,
    formatDistance(place.distance)
  );
}

Example:

Coffee Shop       180 m
Pizza Restaurant  420 m
Cafe              1.2 km

Connect Nearby Search to a Map Click

This becomes especially useful when combined with an interactive map.

For example, with MapLibre:

map.on(
  "click",
  async event => {
    const {
      lat,
      lng
    } = event.lngLat;

    const data =
      await findNearbyFood(
        lat,
        lng,
        1500
      );

    console.log(
      "Nearby places:",
      data.elements
    );
  }
);

Now the workflow becomes:

Click map
   ↓
Get longitude / latitude
   ↓
Search nearby places
   ↓
Display markers

This makes the map itself the search interface.

Instead of forcing users to type an exact address, they can explore visually.

Combine It with Browser Geolocation

We can also start from the user's current position.

navigator.geolocation
  .getCurrentPosition(
    async position => {
      const {
        latitude,
        longitude
      } = position.coords;

      const data =
        await findNearbyFood(
          latitude,
          longitude,
          1500
        );

      console.log(data);
    },
    error => {
      console.error(
        "Unable to get location",
        error
      );
    }
  );

This creates another common workflow:

Use My Location
      ↓
Browser geolocation
      ↓
Latitude + Longitude
      ↓
Nearby search
      ↓
Restaurants / Cafes / POIs

Always remember that browser geolocation requires user permission.

Location access should also be requested only when the feature actually needs it.

Don't Forget Coordinate Validation

Before sending coordinates to any geographic service, validate them.

Latitude must be:

-90 to 90

Longitude must be:

-180 to 180

A simple helper:

function validateCoordinates(
  latitude,
  longitude
) {
  if (
    !Number.isFinite(latitude) ||
    latitude < -90 ||
    latitude > 90
  ) {
    throw new RangeError(
      "Invalid latitude"
    );
  }

  if (
    !Number.isFinite(longitude) ||
    longitude < -180 ||
    longitude > 180
  ) {
    throw new RangeError(
      "Invalid longitude"
    );
  }
}

This prevents many surprisingly common bugs.

The Latitude / Longitude Order Problem

One more thing deserves special attention.

Some APIs expect:

latitude, longitude

Others use:

longitude, latitude

GeoJSON, for example, uses:

[
  longitude,
  latitude
]

MapLibre also commonly works with:

[
  longitude,
  latitude
]

But the Overpass around syntax in our example uses:

latitude, longitude

Mixing these up can move your result thousands of kilometers away.

Naming variables explicitly helps:

const latitude = 40.7128;
const longitude = -74.0060;

instead of:

const x = 40.7128;
const y = -74.0060;

Production Considerations

The public Overpass API is great for learning, prototypes, and relatively light queries.

It should not automatically be treated as the backend for a high-traffic production application.

If you're building a larger application, consider:

caching nearby searches,
limiting the search radius,
limiting requested categories,
avoiding unnecessary repeat queries,
debouncing map interactions,
using your own backend,
or using a commercial/local-search provider designed for production traffic.

Also remember that OpenStreetMap coverage varies by location.

Some cities contain extremely detailed POI information, while other areas may contain fewer mapped businesses.

Try Nearby Search with Real Locations

When developing a nearby-search feature, one of the most useful things you can do is test it with coordinates from different types of places.

For example:

New York
40.7128, -74.0060

London
51.5074, -0.1278

Tokyo
35.6762, 139.6503

Sydney
-33.8688, 151.2093

I've been building CoordMap, a browser-based collection of geographic tools for working with coordinates, maps, elevation, location lookup, and nearby places.

You can use CoordMap Nearby Places to select an address or map location and explore restaurants, cafes, hotels, and similar places around it.

The live CoordMap tool uses its own nearby-place provider; the OpenStreetMap/Overpass implementation in this tutorial is an independent example for developers who want to understand how radius-based geographic searches work.

It's also useful when you need real coordinates to test your own mapping application.

Final Thoughts

Once your application has a reliable latitude and longitude pair, nearby search becomes another layer on top of the same location state.

The architecture can stay surprisingly simple:

Address Search ───────┐
                      │
Map Click ────────────┼──→ Latitude + Longitude
                      │
Current Location ─────┘
                              │
                              ▼
                       Nearby Search
                              │
                   ┌──────────┼──────────┐
                   ▼          ▼          ▼
              Restaurants   Cafes      Hotels
                   │
                   ▼
                 Markers

This pattern is reusable across travel applications, mapping tools, local search interfaces, delivery systems, and location-based web apps.

And once the coordinate pair becomes the center of your application state, you can easily add other geographic layers such as:

Address
Elevation
Weather
Distance
Nearby places
Time zone

That's one of the reasons latitude and longitude are such useful building blocks for location-based applications.

How to Turn Latitude and Longitude into an Address with JavaScript

echoluoluo — Tue, 18 Aug 2026 03:21:20 +0000

Sometimes you have GPS coordinates like:

40.7128, -74.0060

But coordinates alone are not very useful to most users.

They usually want to know something much simpler:

What place is this?

The process of converting latitude and longitude into a human-readable address is called reverse geocoding.

In this article, we'll build a simple reverse geocoding example with JavaScript.

What Is Reverse Geocoding?

Normal geocoding converts an address into coordinates:

New York, NY
↓
40.7128, -74.0060

Reverse geocoding does the opposite:

40.7128, -74.0060
↓
New York, NY, United States

This is useful for location tools, GPS applications, travel websites, delivery systems, photo location tools, and map interfaces.

Reverse Geocoding with JavaScript

For a simple example, we can use the OpenStreetMap Nominatim reverse geocoding endpoint.

async function reverseGeocode(lat, lon) {
  const url =
    `https://nominatim.openstreetmap.org/reverse` +
    `?lat=${lat}&lon=${lon}&format=jsonv2`;

  const response = await fetch(url);

  if (!response.ok) {
    throw new Error("Reverse geocoding failed");
  }

  const data = await response.json();

  return data;
}

reverseGeocode(40.7128, -74.0060)
  .then(data => {
    console.log(data.display_name);
  })
  .catch(error => {
    console.error(error);
  });

The returned data usually contains a readable location name together with structured address information.

Display the Address on a Page

We can turn the example into a small browser tool.

<input id="lat" placeholder="Latitude">
<input id="lon" placeholder="Longitude">

<button onclick="findAddress()">
  Find Address
</button>

<p id="result"></p>

<script>
async function findAddress() {
  const lat = document.getElementById("lat").value;
  const lon = document.getElementById("lon").value;

  const result = document.getElementById("result");

  try {
    const url =
      `https://nominatim.openstreetmap.org/reverse` +
      `?lat=${lat}&lon=${lon}&format=jsonv2`;

    const response = await fetch(url);
    const data = await response.json();

    result.textContent =
      data.display_name || "Location not found";
  } catch (error) {
    result.textContent = "Unable to find this location";
  }
}
</script>

Now a user can paste coordinates and immediately see the corresponding place.

Coordinates from a Map Click

A more natural interface is to let users click directly on a map.

A typical map application can capture the clicked coordinate:

map.on("click", async (event) => {
  const latitude = event.lngLat.lat;
  const longitude = event.lngLat.lng;

  const location = await reverseGeocode(
    latitude,
    longitude
  );

  console.log(location.display_name);
});

This creates a useful interaction:

Click map
   ↓
Get latitude / longitude
   ↓
Reverse geocode coordinates
   ↓
Display the address

For many users, this is easier than manually entering GPS coordinates.

A Quick Way to Test Coordinates

If you only need to check a coordinate occasionally, building an application may be unnecessary.

You can use a browser-based coordinate lookup tool such as:

CoordMap Geocoding Tool

It lets you search locations, enter coordinates, or click directly on a map to inspect a position.

This can also be useful when debugging a geocoding application because you can compare your application's output with the location shown on the map.

Reverse Geocoding Is Not Always Exact

One important thing to remember is that reverse geocoding does not magically know the exact address of every coordinate.

A geocoder normally searches its geographic database for the most appropriate nearby mapped object.

That means a coordinate near a road, building boundary, park, or rural area may return a nearby address rather than an exact street address.

So your application should treat reverse-geocoded addresses as location information rather than guaranteed survey-level data.

Latitude and Longitude Order Matters

Another common source of bugs is mixing up latitude and longitude.

For example:

Latitude:  40.7128
Longitude: -74.0060

Some APIs and GIS formats use:

latitude, longitude

while others use:

longitude, latitude

Always check the format expected by the API or mapping library you are using.

A coordinate with the values reversed may point to a completely different part of the world—or may not be valid at all.

Final Thoughts

Reverse geocoding is a small feature, but it makes geographic coordinates much more understandable.

Instead of showing users:

40.7128, -74.0060

you can show them an actual place name or address.

From there, you can build more useful features such as interactive maps, location sharing, GPS tools, travel utilities, nearby-place searches, or location-based applications.

Sometimes the most useful mapping feature is simply answering one question:

Where is this coordinate?

Tags: #javascript #webdev #maps #geocoding

How to Calculate Distance Between Two GPS Coordinates in JavaScript

echoluoluo — Tue, 11 Aug 2026 01:25:23 +0000

When working with maps, GPS data, or location-based applications, one of the most common questions is:

How far apart are these two coordinates?

Suppose we have two locations:

Point A
Latitude:  40.7128
Longitude: -74.0060

Point B
Latitude:  34.0522
Longitude: -118.2437

These are approximately New York City and Los Angeles.

We can't simply subtract the latitude and longitude values and treat them like normal Cartesian coordinates.

The Earth is curved.

For many web applications, a practical solution is the Haversine formula, which calculates the great-circle distance between two points on a sphere.

In this article, we'll build a reusable JavaScript implementation that supports:

Latitude and longitude validation
Degrees-to-radians conversion
The Haversine formula
Kilometers
Miles
Nautical miles
TypeScript
Unit tests
Real-world coordinate testing

Why Simple Euclidean Distance Doesn't Work

If we had two points on a flat coordinate plane:

(x1, y1)
(x2, y2)

we could use:

distance = √((x2 - x1)² + (y2 - y1)²)

Latitude and longitude don't work like that.

They represent positions on the Earth's surface.

A degree of longitude also does not represent the same physical distance everywhere.

Near the Equator, one degree of longitude covers a much larger distance than it does near the poles.

So this:

const distance = Math.sqrt(
  (lat2 - lat1) ** 2 +
  (lon2 - lon1) ** 2
);

does not give us a meaningful distance in kilometers or miles.

We need to account for the Earth's curvature.

The Haversine Formula

The Haversine formula estimates the great-circle distance between two points using their latitude and longitude.

The main idea is:

Latitude / Longitude
        ↓
Convert degrees to radians
        ↓
Calculate angular distance
        ↓
Multiply by Earth's radius
        ↓
Physical distance

We'll break the implementation into small pieces.

Convert Degrees to Radians

JavaScript's trigonometric functions such as:

Math.sin()
Math.cos()
Math.atan2()

expect radians rather than degrees.

So we first need a helper:

function toRadians(degrees) {
  return degrees * Math.PI / 180;
}

For example:

console.log(toRadians(180));

returns approximately:

3.141592653589793

which is π radians.

A Basic Distance Function

Let's start with a simple Haversine implementation:

function distanceBetweenCoordinates(
  lat1,
  lon1,
  lat2,
  lon2
) {
  const earthRadiusKm = 6371.0088;

  const dLat = toRadians(lat2 - lat1);
  const dLon = toRadians(lon2 - lon1);

  const latitude1 = toRadians(lat1);
  const latitude2 = toRadians(lat2);

  const a =
    Math.sin(dLat / 2) ** 2 +
    Math.cos(latitude1) *
      Math.cos(latitude2) *
      Math.sin(dLon / 2) ** 2;

  const c =
    2 * Math.atan2(
      Math.sqrt(a),
      Math.sqrt(1 - a)
    );

  return earthRadiusKm * c;
}

Usage:

const distance = distanceBetweenCoordinates(
  40.7128,
  -74.0060,
  34.0522,
  -118.2437
);

console.log(distance);

The result is approximately:

3935 km

depending on the Earth radius and rounding you use.

What Is Happening Inside the Formula?

Let's break the calculation down.

First, calculate the differences:

const dLat = toRadians(lat2 - lat1);
const dLon = toRadians(lon2 - lon1);

Then convert both latitude values to radians:

const latitude1 = toRadians(lat1);
const latitude2 = toRadians(lat2);

const a =
  Math.sin(dLat / 2) ** 2 +
  Math.cos(latitude1) *
    Math.cos(latitude2) *
    Math.sin(dLon / 2) ** 2;

This gives us an intermediate value representing the angular relationship between the two points.

Then:

const c =
  2 * Math.atan2(
    Math.sqrt(a),
    Math.sqrt(1 - a)
  );

produces the central angle between the locations.

Finally:

earthRadiusKm * c

converts that angular distance into kilometers.

Validate Latitude and Longitude

Before calculating distance, we should validate the inputs.

Latitude must be between:

-90 and 90

Longitude must be between:

-180 and 180

Let's create reusable validators:

function isValidLatitude(value) {
  return (
    Number.isFinite(value) &&
    value >= -90 &&
    value <= 90
  );
}

function isValidLongitude(value) {
  return (
    Number.isFinite(value) &&
    value >= -180 &&
    value <= 180
  );
}

Then:

function validateCoordinate(
  latitude,
  longitude
) {
  if (!isValidLatitude(latitude)) {
    throw new RangeError(
      "Latitude must be between -90 and 90"
    );
  }

  if (!isValidLongitude(longitude)) {
    throw new RangeError(
      "Longitude must be between -180 and 180"
    );
  }
}

Now our distance function can validate both points.

A More Reliable Implementation

Let's combine validation with the Haversine calculation:

function toRadians(degrees) {
  return degrees * Math.PI / 180;
}

function isValidLatitude(value) {
  return (
    Number.isFinite(value) &&
    value >= -90 &&
    value <= 90
  );
}

function isValidLongitude(value) {
  return (
    Number.isFinite(value) &&
    value >= -180 &&
    value <= 180
  );
}

function validateCoordinate(
  latitude,
  longitude
) {
  if (!isValidLatitude(latitude)) {
    throw new RangeError(
      "Latitude must be between -90 and 90"
    );
  }

  if (!isValidLongitude(longitude)) {
    throw new RangeError(
      "Longitude must be between -180 and 180"
    );
  }
}

function distanceBetweenCoordinates(
  lat1,
  lon1,
  lat2,
  lon2
) {
  validateCoordinate(lat1, lon1);
  validateCoordinate(lat2, lon2);

  const earthRadiusKm = 6371.0088;

  const latitude1 = toRadians(lat1);
  const latitude2 = toRadians(lat2);

  const dLat = toRadians(lat2 - lat1);
  const dLon = toRadians(lon2 - lon1);

  const a =
    Math.sin(dLat / 2) ** 2 +
    Math.cos(latitude1) *
      Math.cos(latitude2) *
      Math.sin(dLon / 2) ** 2;

  const c =
    2 * Math.atan2(
      Math.sqrt(a),
      Math.sqrt(1 - a)
    );

  return earthRadiusKm * c;
}

Now invalid coordinates are rejected immediately.

For example:

distanceBetweenCoordinates(
  120,
  0,
  40,
  20
);

throws:

RangeError: Latitude must be between -90 and 90

Support Kilometers, Miles, and Nautical Miles

A mapping tool may need more than kilometers.

Common units include:

Kilometers
Miles
Nautical miles

We can define Earth-radius values for each unit:

const EARTH_RADIUS = {
  km: 6371.0088,
  miles: 3958.7613,
  nauticalMiles: 3440.0695
};

Then update the function:

function distanceBetweenCoordinates(
  lat1,
  lon1,
  lat2,
  lon2,
  unit = "km"
) {
  validateCoordinate(lat1, lon1);
  validateCoordinate(lat2, lon2);

  const radius =
    EARTH_RADIUS[unit];

  if (!radius) {
    throw new Error(
      "Unsupported distance unit"
    );
  }

  const latitude1 = toRadians(lat1);
  const latitude2 = toRadians(lat2);

  const dLat = toRadians(lat2 - lat1);
  const dLon = toRadians(lon2 - lon1);

  const a =
    Math.sin(dLat / 2) ** 2 +
    Math.cos(latitude1) *
      Math.cos(latitude2) *
      Math.sin(dLon / 2) ** 2;

  const c =
    2 * Math.atan2(
      Math.sqrt(a),
      Math.sqrt(1 - a)
    );

  return radius * c;
}

Usage:

console.log(
  distanceBetweenCoordinates(
    40.7128,
    -74.0060,
    34.0522,
    -118.2437,
    "km"
  )
);

Miles:

console.log(
  distanceBetweenCoordinates(
    40.7128,
    -74.0060,
    34.0522,
    -118.2437,
    "miles"
  )
);

Nautical miles:

console.log(
  distanceBetweenCoordinates(
    40.7128,
    -74.0060,
    34.0522,
    -118.2437,
    "nauticalMiles"
  )
);

Return Structured Data

For a real application, returning just one number may be too limited.

Instead, we can calculate the distance once and return multiple units.

function getDistance(
  lat1,
  lon1,
  lat2,
  lon2
) {
  const kilometers =
    distanceBetweenCoordinates(
      lat1,
      lon1,
      lat2,
      lon2,
      "km"
    );

  return {
    kilometers,
    miles: kilometers * 0.621371,
    nauticalMiles:
      kilometers * 0.539957
  };
}

Usage:

console.log(
  getDistance(
    40.7128,
    -74.0060,
    34.0522,
    -118.2437
  )
);

Example output:

{
  kilometers: 3935.75,
  miles: 2445.56,
  nauticalMiles: 2125.13
}

You can then decide how many decimal places to show in the UI.

Keep Calculation Precision Separate from Display Precision

Avoid rounding too early.

For example, don't do this inside the calculation:

return Number(
  distance.toFixed(2)
);

if the value will later be reused in other calculations.

Instead, return the full value:

return distance;

and format it only when displaying it:

const distance =
  distanceBetweenCoordinates(
    40.7128,
    -74.0060,
    34.0522,
    -118.2437
  );

console.log(
  `${distance.toFixed(2)} km`
);

This keeps your calculation layer more accurate and reusable.

Handle Identical Coordinates

What happens if both points are exactly the same?

distanceBetweenCoordinates(
  40.7128,
  -74.006,
  40.7128,
  -74.006
);

The Haversine formula naturally returns:

So you usually don't need a special condition.

However, if your application wants to optimize this case:

if (
  lat1 === lat2 &&
  lon1 === lon2
) {
  return 0;
}

This can avoid unnecessary trigonometric calculations.

For most applications, either approach is fine.

Example: London to Paris

Let's try a shorter real-world distance.

London:

51.5074, -0.1278

Paris:

48.8566, 2.3522

JavaScript:

const londonToParis =
  distanceBetweenCoordinates(
    51.5074,
    -0.1278,
    48.8566,
    2.3522
  );

console.log(
  `${londonToParis.toFixed(2)} km`
);

The result is roughly:

344 km

This is the straight-line great-circle distance, not driving distance.

That's an important distinction.

Great-Circle Distance Is Not Driving Distance

The Haversine formula answers:

What is the shortest distance over the Earth's surface between two coordinates?

It does not consider:

Roads
Bridges
Traffic
Mountains
Walking routes
Rail networks
Borders
One-way streets

So:

GPS coordinate distance

and:

driving distance

are two different problems.

For driving distance, you need a routing engine or routing API.

The Haversine formula is better suited to:

Straight-line map distance
Nearby-location filtering
GPS proximity checks
Geographic analysis
Approximate travel radius
Location ranking

What About Earth's Shape?

The Haversine formula assumes the Earth is a sphere.

In reality, the Earth is closer to an oblate ellipsoid.

That means Haversine distance is an approximation.

For most:

Web applications
Map tools
Location searches
GPS utilities
Nearby-place calculations

the approximation is usually sufficient.

Applications requiring survey-grade or high-precision geodesic calculations should use an ellipsoidal model such as WGS84 with a proper geodesic algorithm.

So choose the calculation method based on the accuracy requirements of your application.

A TypeScript Version

We can make the unit options explicit with TypeScript.

type DistanceUnit =
  | "km"
  | "miles"
  | "nauticalMiles";

Define the radius map:

const EARTH_RADIUS: Record<
  DistanceUnit,
  number
> = {
  km: 6371.0088,
  miles: 3958.7613,
  nauticalMiles: 3440.0695
};

Then:

function distanceBetweenCoordinates(
  lat1: number,
  lon1: number,
  lat2: number,
  lon2: number,
  unit: DistanceUnit = "km"
): number {
  validateCoordinate(lat1, lon1);
  validateCoordinate(lat2, lon2);

  const radius =
    EARTH_RADIUS[unit];

  const latitude1 =
    toRadians(lat1);

  const latitude2 =
    toRadians(lat2);

  const dLat =
    toRadians(lat2 - lat1);

  const dLon =
    toRadians(lon2 - lon1);

  const a =
    Math.sin(dLat / 2) ** 2 +
    Math.cos(latitude1) *
      Math.cos(latitude2) *
      Math.sin(dLon / 2) ** 2;

  const c =
    2 * Math.atan2(
      Math.sqrt(a),
      Math.sqrt(1 - a)
    );

  return radius * c;
}

Now this is valid:

distanceBetweenCoordinates(
  40.7128,
  -74.006,
  34.0522,
  -118.2437,
  "miles"
);

while this will be caught by TypeScript:

distanceBetweenCoordinates(
  40.7128,
  -74.006,
  34.0522,
  -118.2437,
  "meters"
);

unless you explicitly support that unit.

Testing With Vitest

Geographic calculation functions are good candidates for unit tests.

Example:

import {
  describe,
  expect,
  it
} from "vitest";

describe(
  "distanceBetweenCoordinates",
  () => {
    it(
      "returns zero for identical coordinates",
      () => {
        const distance =
          distanceBetweenCoordinates(
            40.7128,
            -74.006,
            40.7128,
            -74.006
          );

        expect(distance).toBe(0);
      }
    );

    it(
      "calculates London to Paris",
      () => {
        const distance =
          distanceBetweenCoordinates(
            51.5074,
            -0.1278,
            48.8566,
            2.3522
          );

        expect(distance)
          .toBeGreaterThan(340);

        expect(distance)
          .toBeLessThan(350);
      }
    );

    it(
      "rejects invalid latitude",
      () => {
        expect(() =>
          distanceBetweenCoordinates(
            100,
            0,
            40,
            20
          )
        ).toThrow(RangeError);
      }
    );
  }
);

For geographic calculations, testing a reasonable range is often safer than checking a value to many decimal places.

Different Earth-radius assumptions can produce slightly different results.

Build a Simple Distance Calculator UI

A basic HTML interface might contain:

<input
  id="lat1"
  type="number"
  step="any"
  placeholder="Latitude 1"
/>

<input
  id="lon1"
  type="number"
  step="any"
  placeholder="Longitude 1"
/>

<input
  id="lat2"
  type="number"
  step="any"
  placeholder="Latitude 2"
/>

<input
  id="lon2"
  type="number"
  step="any"
  placeholder="Longitude 2"
/>

<button id="calculate">
  Calculate Distance
</button>

<p id="result"></p>

Then:

document
  .querySelector("#calculate")
  .addEventListener(
    "click",
    () => {
      const lat1 = Number(
        document
          .querySelector("#lat1")
          .value
      );

      const lon1 = Number(
        document
          .querySelector("#lon1")
          .value
      );

      const lat2 = Number(
        document
          .querySelector("#lat2")
          .value
      );

      const lon2 = Number(
        document
          .querySelector("#lon2")
          .value
      );

      try {
        const distance =
          distanceBetweenCoordinates(
            lat1,
            lon1,
            lat2,
            lon2
          );

        document
          .querySelector("#result")
          .textContent =
            `${distance.toFixed(2)} km`;
      } catch (error) {
        document
          .querySelector("#result")
          .textContent =
            error.message;
      }
    }
  );

This is enough to build a simple browser-based GPS distance calculator.

Using Map Clicks Instead of Manual Coordinate Entry

For map applications, users may prefer selecting points visually.

The flow becomes:

Click Point A
      ↓
Store coordinates

Click Point B
      ↓
Store coordinates

Calculate Haversine distance
      ↓
Display result

For example:

const points = [];

map.on("click", event => {
  points.push({
    latitude: event.lngLat.lat,
    longitude: event.lngLat.lng
  });

  if (points.length === 2) {
    const [a, b] = points;

    const distance =
      distanceBetweenCoordinates(
        a.latitude,
        a.longitude,
        b.latitude,
        b.longitude
      );

    console.log(
      `${distance.toFixed(2)} km`
    );

    points.length = 0;
  }
});

This interaction works especially well for map-based measurement tools.

Test With Real Coordinates

When working on distance calculations, it's useful to test the function with real places rather than only artificial coordinate values.

I've been building CoordMap's Measure Distance tool, which lets you work with real geographic points and measure distances between locations.

You can use it to pick two locations and compare the result with your JavaScript implementation.

For example:

London
51.5074, -0.1278

Paris
48.8566, 2.3522

or:

New York
40.7128, -74.0060

Los Angeles
34.0522, -118.2437

Testing different regions is useful because it helps catch common mistakes such as:

latitude / longitude swapped

degrees passed directly into Math.sin()

incorrect Earth radius

invalid coordinate ranges

Complete Copy-Paste Version

Here's the full implementation:

const EARTH_RADIUS = {
  km: 6371.0088,
  miles: 3958.7613,
  nauticalMiles: 3440.0695
};

function toRadians(degrees) {
  return degrees * Math.PI / 180;
}

function isValidLatitude(value) {
  return (
    Number.isFinite(value) &&
    value >= -90 &&
    value <= 90
  );
}

function isValidLongitude(value) {
  return (
    Number.isFinite(value) &&
    value >= -180 &&
    value <= 180
  );
}

function validateCoordinate(
  latitude,
  longitude
) {
  if (!isValidLatitude(latitude)) {
    throw new RangeError(
      "Latitude must be between -90 and 90"
    );
  }

  if (!isValidLongitude(longitude)) {
    throw new RangeError(
      "Longitude must be between -180 and 180"
    );
  }
}

function distanceBetweenCoordinates(
  lat1,
  lon1,
  lat2,
  lon2,
  unit = "km"
) {
  validateCoordinate(lat1, lon1);
  validateCoordinate(lat2, lon2);

  const radius =
    EARTH_RADIUS[unit];

  if (!radius) {
    throw new Error(
      "Unsupported distance unit"
    );
  }

  if (
    lat1 === lat2 &&
    lon1 === lon2
  ) {
    return 0;
  }

  const latitude1 =
    toRadians(lat1);

  const latitude2 =
    toRadians(lat2);

  const dLat =
    toRadians(lat2 - lat1);

  const dLon =
    toRadians(lon2 - lon1);

  const a =
    Math.sin(dLat / 2) ** 2 +
    Math.cos(latitude1) *
      Math.cos(latitude2) *
      Math.sin(dLon / 2) ** 2;

  const c =
    2 * Math.atan2(
      Math.sqrt(a),
      Math.sqrt(1 - a)
    );

  return radius * c;
}

const distance =
  distanceBetweenCoordinates(
    40.7128,
    -74.0060,
    34.0522,
    -118.2437
  );

console.log(
  `${distance.toFixed(2)} km`
);

Final Thoughts

Calculating the distance between two GPS coordinates is a small problem with a few important details.

The core process is:

Two GPS coordinates
        ↓
Validate latitude / longitude
        ↓
Convert degrees to radians
        ↓
Apply Haversine formula
        ↓
Calculate angular distance
        ↓
Multiply by Earth radius
        ↓
Kilometers / miles / nautical miles

The main things to remember are:

Latitude must stay between -90 and 90.
Longitude must stay between -180 and 180.
JavaScript trigonometric functions use radians.
The Haversine formula calculates great-circle distance.
Great-circle distance is not driving distance.
Avoid rounding until the presentation layer.
Use a more precise geodesic model when your application requires survey-grade accuracy.

For most web mapping, GPS, and proximity applications, the Haversine formula remains a useful and straightforward solution.

How to Build a Longitude and Latitude Finder with JavaScript and MapLibre

echoluoluo — Mon, 10 Aug 2026 02:59:19 +0000

Longitude and latitude finders look simple from the outside:

Search for an address.
Get its coordinates.
Or click somewhere on a map.
Get the address for that point.

But building a useful version involves several pieces working together:

An interactive map
Forward geocoding
Reverse geocoding
Coordinate validation
Browser geolocation
Map and form state synchronization
Error handling

In this article, we'll build the core architecture of a browser-based longitude and latitude finder using JavaScript and MapLibre GL JS.

The goal is a tool that supports three common workflows:

Address → Longitude / Latitude

Longitude / Latitude → Address

Map Click → Longitude / Latitude + Address

Let's build it step by step.

What Are We Building?

Our interface can be kept simple.

┌─────────────────────────────────────┐
│ Search an address                   │
│ [ New York City                ] 🔍 │
└─────────────────────────────────────┘

Longitude
[-74.0060]

Latitude
[40.7128]

[Look up]

┌─────────────────────────────────────┐
│                                     │
│             Interactive Map         │
│                                     │
│          Click any location         │
│                                     │
└─────────────────────────────────────┘

Selected location

New York, NY, United States

Longitude: -74.0060
Latitude:   40.7128

The important design decision is that all three inputs update the same selected location state.

Whether the user:

searches an address,
enters coordinates,
clicks the map,
or uses browser geolocation,

the application should eventually produce the same internal representation.

For example:

const selectedLocation = {
  longitude: -74.006,
  latitude: 40.7128,
  address: "New York, NY, United States"
};

This makes the rest of the application much easier to maintain.

Understanding Longitude and Latitude

Before writing the UI logic, we need to validate coordinates correctly.

Latitude ranges from:

-90 to 90

Longitude ranges from:

-180 to 180

Examples:

New York

Latitude:   40.7128
Longitude: -74.0060

Sydney

Latitude:  -33.8688
Longitude: 151.2093

A simple JavaScript validator looks like this:

function isValidLatitude(value) {
  return (
    Number.isFinite(value) &&
    value >= -90 &&
    value <= 90
  );
}

function isValidLongitude(value) {
  return (
    Number.isFinite(value) &&
    value >= -180 &&
    value <= 180
  );
}

Then combine them:

function validateCoordinates(
  longitude,
  latitude
) {
  if (!isValidLongitude(longitude)) {
    throw new RangeError(
      "Longitude must be between -180 and 180"
    );
  }

  if (!isValidLatitude(latitude)) {
    throw new RangeError(
      "Latitude must be between -90 and 90"
    );
  }
}

This should happen before moving the map or sending a reverse-geocoding request.

Create the Map with MapLibre

First, create a container:

<div id="map"></div>

Give it a height:

#map {
  width: 100%;
  height: 500px;
}

Then initialize MapLibre:

const map = new maplibregl.Map({
  container: "map",

  style: "YOUR_MAP_STYLE_URL",

  center: [0, 20],

  zoom: 2
});

Notice the coordinate order here:

[longitude, latitude]

Not:

[latitude, longitude]

This is an easy mistake to make when working with mapping APIs.

I prefer naming variables explicitly:

const longitude = -74.006;
const latitude = 40.7128;

map.flyTo({
  center: [
    longitude,
    latitude
  ],
  zoom: 12
});

That is much easier to read than:

map.flyTo({
  center: [-74.006, 40.7128]
});

Click the Map to Get Coordinates

One of the most useful interactions is allowing users to click anywhere on the map.

MapLibre exposes the clicked geographic position:

map.on("click", event => {
  const {
    lng,
    lat
  } = event.lngLat;

  console.log("Longitude:", lng);
  console.log("Latitude:", lat);
});

You can round the coordinates for display:

map.on("click", event => {
  const longitude =
    event.lngLat.lng.toFixed(6);

  const latitude =
    event.lngLat.lat.toFixed(6);

  console.log({
    longitude,
    latitude
  });
});

A click might produce:

{
  longitude: "-74.006015",
  latitude: "40.712728"
}

For calculations and API requests, however, keep them as numbers.

const longitude =
  event.lngLat.lng;

const latitude =
  event.lngLat.lat;

Only format the values when displaying them.

Add a Marker to the Selected Location

A visual marker makes it obvious which point is currently selected.

const marker =
  new maplibregl.Marker();

function setMarker(
  longitude,
  latitude
) {
  marker
    .setLngLat([
      longitude,
      latitude
    ])
    .addTo(map);
}

Then:

map.on("click", event => {
  const longitude =
    event.lngLat.lng;

  const latitude =
    event.lngLat.lat;

  setMarker(
    longitude,
    latitude
  );
});

We can also move the camera:

function focusLocation(
  longitude,
  latitude
) {
  map.flyTo({
    center: [
      longitude,
      latitude
    ],
    zoom: 14
  });
}

Reverse Geocoding: Coordinates to Address

Coordinates are useful for software.

Humans usually want an address or place name.

That's where reverse geocoding comes in.

The flow looks like this:

-74.0060, 40.7128
        ↓
Reverse Geocoding API
        ↓
New York, NY, United States

Instead of connecting your frontend directly to a provider containing a private API key, a safer architecture is:

Browser
   ↓
Your API
   ↓
Geocoding Provider

For example, the browser can call:

async function reverseGeocode(
  longitude,
  latitude
) {
  validateCoordinates(
    longitude,
    latitude
  );

  const params =
    new URLSearchParams({
      longitude,
      latitude
    });

  const response = await fetch(
    `/api/reverse-geocode?${params}`
  );

  if (!response.ok) {
    throw new Error(
      "Reverse geocoding failed"
    );
  }

  return response.json();
}

The response from your own backend can be normalized.

For example:

{
  "address": "New York, NY, United States",
  "longitude": -74.006,
  "latitude": 40.7128,
  "country": "United States",
  "countryCode": "US"
}

Normalizing the response is useful because different geocoding providers often return different field structures.

Your frontend doesn't need to care which provider was used.

Connect Reverse Geocoding to Map Clicks

Now we can combine the pieces.

map.on("click", async event => {
  const longitude =
    event.lngLat.lng;

  const latitude =
    event.lngLat.lat;

  setMarker(
    longitude,
    latitude
  );

  try {
    const place =
      await reverseGeocode(
        longitude,
        latitude
      );

    console.log(place);
  } catch (error) {
    console.error(
      "Unable to find address:",
      error
    );
  }
});

The user interaction is now:

Click map
   ↓
Read longitude / latitude
   ↓
Move marker
   ↓
Reverse geocode
   ↓
Display address

That already gives us a basic longitude and latitude finder.

Forward Geocoding: Address to Coordinates

We also need the opposite direction.

1600 Amphitheatre Parkway
          ↓
      Geocoding API
          ↓
37.4220, -122.0841

Create a search function:

async function geocodeAddress(
  query
) {
  const value = query.trim();

  if (!value) {
    throw new Error(
      "Address is required"
    );
  }

  const params =
    new URLSearchParams({
      q: value
    });

  const response = await fetch(
    `/api/geocode?${params}`
  );

  if (!response.ok) {
    throw new Error(
      "Address search failed"
    );
  }

  return response.json();
}

A normalized response might look like:

{
  "longitude": -122.0841,
  "latitude": 37.422,
  "address": "1600 Amphitheatre Parkway, Mountain View, CA"
}

Then update the map:

async function searchAddress(
  query
) {
  const place =
    await geocodeAddress(query);

  setMarker(
    place.longitude,
    place.latitude
  );

  focusLocation(
    place.longitude,
    place.latitude
  );

  updateLocationPanel(place);
}

Build the Address Search Form

The HTML can stay simple:

<form id="address-form">
  <input
    id="address-input"
    type="search"
    placeholder="Enter an address or place"
  />

  <button type="submit">
    Search
  </button>
</form>

And the JavaScript:

const form =
  document.querySelector(
    "#address-form"
  );

const input =
  document.querySelector(
    "#address-input"
  );

form.addEventListener(
  "submit",
  async event => {
    event.preventDefault();

    try {
      await searchAddress(
        input.value
      );
    } catch (error) {
      console.error(error);
    }
  }
);

Now users can search a city, street address, or place name.

Let Users Enter Coordinates Directly

Another important workflow is:

User already has coordinates
           ↓
Enters longitude + latitude
           ↓
Map opens that point
           ↓
Address is resolved

HTML:

<input
  id="longitude"
  type="number"
  step="any"
  min="-180"
  max="180"
  placeholder="Longitude"
/>

<input
  id="latitude"
  type="number"
  step="any"
  min="-90"
  max="90"
  placeholder="Latitude"
/>

<button id="lookup">
  Look up
</button>

JavaScript:

document
  .querySelector("#lookup")
  .addEventListener(
    "click",
    async () => {
      const longitude =
        Number(
          document
            .querySelector(
              "#longitude"
            )
            .value
        );

      const latitude =
        Number(
          document
            .querySelector(
              "#latitude"
            )
            .value
        );

      validateCoordinates(
        longitude,
        latitude
      );

      setMarker(
        longitude,
        latitude
      );

      focusLocation(
        longitude,
        latitude
      );

      const place =
        await reverseGeocode(
          longitude,
          latitude
        );

      updateLocationPanel(place);
    }
  );

Now we support two-way conversion:

Address → Coordinates

Coordinates → Address

Add Browser Geolocation

Users often want one more shortcut:

Where am I right now?

The browser Geolocation API can provide this.

function locateUser() {
  if (!navigator.geolocation) {
    throw new Error(
      "Geolocation is not supported"
    );
  }

  navigator.geolocation
    .getCurrentPosition(
      async position => {
        const {
          longitude,
          latitude
        } = position.coords;

        setMarker(
          longitude,
          latitude
        );

        focusLocation(
          longitude,
          latitude
        );

        const place =
          await reverseGeocode(
            longitude,
            latitude
          );

        updateLocationPanel(
          place
        );
      },
      error => {
        console.error(
          "Unable to get location:",
          error
        );
      }
    );
}

Connect it to a button:

<button id="locate-me">
  Locate me
</button>

document
  .querySelector("#locate-me")
  .addEventListener(
    "click",
    locateUser
  );

Always request location only after a clear user action.

Users should understand why location permission is being requested.

Use One Location State for Every Input Method

At this point we have several ways to select a location:

Address search
Coordinate input
Map click
Browser geolocation

A common mistake is writing independent UI logic for each workflow.

That quickly becomes difficult to maintain.

Instead, use one function.

let currentLocation = null;

async function selectLocation({
  longitude,
  latitude,
  address = null,
  moveMap = true
}) {
  validateCoordinates(
    longitude,
    latitude
  );

  let location = {
    longitude,
    latitude,
    address
  };

  if (!address) {
    const result =
      await reverseGeocode(
        longitude,
        latitude
      );

    location = {
      ...location,
      ...result
    };
  }

  currentLocation = location;

  setMarker(
    longitude,
    latitude
  );

  if (moveMap) {
    focusLocation(
      longitude,
      latitude
    );
  }

  updateCoordinateInputs(
    longitude,
    latitude
  );

  updateLocationPanel(
    location
  );

  return location;
}

Now a map click becomes:

map.on("click", event => {
  selectLocation({
    longitude:
      event.lngLat.lng,

    latitude:
      event.lngLat.lat,

    moveMap: false
  });
});

Address search becomes:

const place =
  await geocodeAddress(query);

await selectLocation(place);

And browser geolocation becomes:

await selectLocation({
  longitude:
    position.coords.longitude,

  latitude:
    position.coords.latitude
});

This architecture dramatically reduces duplicated code.

Keep Longitude and Latitude Inputs in Sync

Once a location changes, update the input fields:

function updateCoordinateInputs(
  longitude,
  latitude
) {
  document
    .querySelector(
      "#longitude"
    )
    .value =
      longitude.toFixed(6);

  document
    .querySelector(
      "#latitude"
    )
    .value =
      latitude.toFixed(6);
}

Notice again that rounding is done for presentation.

The internal state can keep the full numeric precision.

Build the Location Details Panel

A minimal result panel could contain:

<section id="place-details">
  <h2>Place details</h2>

  <p id="address"></p>

  <dl>
    <dt>Longitude</dt>
    <dd id="result-longitude"></dd>

    <dt>Latitude</dt>
    <dd id="result-latitude"></dd>
  </dl>
</section>

Update it:

function updateLocationPanel(
  location
) {
  document
    .querySelector("#address")
    .textContent =
      location.address ??
      "Address unavailable";

  document
    .querySelector(
      "#result-longitude"
    )
    .textContent =
      location.longitude
        .toFixed(6);

  document
    .querySelector(
      "#result-latitude"
    )
    .textContent =
      location.latitude
        .toFixed(6);
}

The same component works regardless of how the user selected the location.

Add Elevation as a Separate Data Layer

Once we have coordinates, we can query additional geographic data.

For example:

Selected point
     ↓
Longitude / Latitude
     ↓
Elevation API or dataset
     ↓
Estimated elevation

A frontend helper might look like:

async function getElevation(
  longitude,
  latitude
) {
  const params =
    new URLSearchParams({
      longitude,
      latitude
    });

  const response = await fetch(
    `/api/elevation?${params}`
  );

  if (!response.ok) {
    throw new Error(
      "Elevation lookup failed"
    );
  }

  return response.json();
}

Then:

const elevation =
  await getElevation(
    longitude,
    latitude
  );

console.log(
  `${elevation.meters} m`
);

One important UI detail:

don't imply that estimated terrain elevation is the same thing as high-precision surveyed altitude.

Always describe the accuracy of your source clearly.

Add Nearby Places as an Optional Extension

Once a user has selected a location, the same coordinates can power other features.

For example:

Selected coordinates
       ↓
Nearby search
       ↓
Restaurants
Hotels
Cafes
Attractions

This doesn't need to be part of the core coordinate finder.

I prefer treating it as a secondary action:

Find location
     ↓
Show coordinates + address
     ↓
Optional: explore nearby places

That keeps the primary workflow focused.

Handle Loading and Errors

Network requests fail.

Addresses can also return no results.

Location permission can be denied.

A real application should explicitly handle these states.

For example:

async function searchAddress(
  query
) {
  setLoading(true);

  try {
    const place =
      await geocodeAddress(query);

    if (!place) {
      showError(
        "No matching place found."
      );

      return;
    }

    await selectLocation(place);
  } catch (error) {
    showError(
      "Unable to search this address."
    );
  } finally {
    setLoading(false);
  }
}

Useful error states include:

Address not found

Invalid longitude

Invalid latitude

Location permission denied

Network unavailable

Geocoding service unavailable

Showing a clear message is better than silently doing nothing.

Avoid Exposing API Keys in the Browser

If your geocoding provider requires a private API key, don't embed that key directly in public frontend JavaScript.

Avoid:

const API_KEY =
  "my-secret-api-key";

Anything shipped to the browser should be considered visible to users.

A better setup is:

Frontend
   ↓
/api/geocode
   ↓
Backend
   ↓
External geocoding provider

Your server can:

protect credentials,
normalize responses,
add caching,
add rate limits,
switch providers later.

This also keeps the frontend code much cleaner.

A Simple Application Architecture

The final data flow might look like this:

              ┌─────────────────┐
              │ Address Search  │
              └────────┬────────┘
                       │
                       ▼
                   Geocoding

Map Click ─────────────┐
                      │
Coordinate Input ─────┼──→ selectLocation()
                      │
My Location ──────────┘
                            │
                            ▼
                 Longitude + Latitude
                            │
               ┌────────────┼────────────┐
               ▼            ▼            ▼
             Marker       Address     Elevation
               │
               ▼
            Map View

The key idea is simple:

Every interaction eventually becomes a longitude and latitude pair.

Once you have that pair, the rest of the application becomes a collection of optional geographic lookups.

Try a Real Longitude and Latitude Finder

I used this same interaction model while building CoordMap's Longitude and Latitude Finder.

The live tool lets you:

search an address for longitude and latitude,
enter longitude and latitude to find an address,
click directly on the map,
use your current location,
inspect location details,
and continue exploring geographic information around the selected point.

If you're building your own version, using a live map tool can also be useful for testing coordinates from different countries and hemispheres.

For example, try:

Washington, DC
38.9072, -77.0369

London
51.5074, -0.1278

Tokyo
35.6762, 139.6503

Sydney
-33.8688, 151.2093

These help test:

North + West
North + East
South + East

and reveal common latitude/longitude ordering mistakes.

What I Would Add Next

Once the core finder is reliable, several extensions become possible.

Coordinate format conversion

Display the same location as:

Decimal Degrees
40.7128, -74.0060

and:

DMS
40°42'46.08"N
74°00'21.60"W

Shareable locations

Generate a URL containing:

longitude
latitude
zoom

so users can send the selected point to someone else.

Distance measurement

Once you can select one coordinate, selecting two points allows you to calculate distance.

Additional coordinate systems

More advanced GIS applications may also need transformations between WGS84 and other coordinate reference systems.

The important thing is to build these on top of the same clean location state instead of creating separate implementations for every feature.

Final Thoughts

A longitude and latitude finder is a good example of a small application where UI design and data architecture matter just as much as the map itself.

The basic workflow is:

User selects a location
          ↓
Longitude + Latitude
          ↓
Validate coordinates
          ↓
Update marker and map
          ↓
Resolve address
          ↓
Display place details

From there, features such as elevation, nearby places, distance measurement, coordinate conversion, and sharing can all be added without changing the core model.

The most important implementation lessons are:

Treat longitude and latitude as the central state.
Keep map interactions and form inputs synchronized.
Validate coordinate ranges.
Keep numeric precision separate from display formatting.
Normalize geocoding responses.
Keep private API credentials on the server.
Handle permission and network errors explicitly.
Keep optional map features secondary to the main coordinate workflow.

Once those foundations are in place, building additional mapping tools becomes much easier.

How to Convert Decimal Degrees to DMS in JavaScript

echoluoluo — Sun, 09 Aug 2026 06:28:24 +0000

Geographic coordinates are commonly represented using Decimal Degrees (DD).

For example:

Latitude:  40.748817
Longitude: -73.985428

This format works well for APIs, databases, calculations, and web mapping libraries.

However, coordinates are also frequently displayed using Degrees, Minutes, and Seconds (DMS):

40°44'55.74"N
73°59'07.54"W

In this article, we'll build a reusable JavaScript implementation for converting Decimal Degrees to DMS.

Along the way, we'll also cover:

How DD-to-DMS conversion works
Latitude and longitude directions
Floating-point rounding
Coordinate validation
The 60-second rounding edge case
Returning structured coordinate data
Formatting latitude and longitude pairs
Testing the implementation

Decimal Degrees vs DMS

Before writing any JavaScript, it helps to understand the two coordinate formats.

Decimal Degrees

Decimal Degrees represent a coordinate using a single decimal number.

40.748817
-73.985428

For latitude:

Positive = North
Negative = South

For longitude:

Positive = East
Negative = West

So this coordinate:

40.748817, -73.985428

means:

Latitude:  40.748817° North
Longitude: 73.985428° West

Decimal Degrees are especially common in:

JavaScript mapping libraries
GeoJSON
GPS APIs
Geocoding APIs
Spatial databases
Web mapping applications

Degrees, Minutes, and Seconds

DMS breaks a coordinate into three parts:

Degrees
Minutes
Seconds

For example:

40°44'55.74"N

The relationships are:

1 degree = 60 minutes
1 minute = 60 seconds

Because of that, converting DD to DMS mainly involves extracting the integer part and repeatedly multiplying the fractional part by 60.

The Conversion Formula

Suppose we want to convert:

40.748817

First, take the absolute value:

const value = Math.abs(40.748817);

The integer part becomes the degrees:

const degrees = Math.floor(value);

Result:

Now subtract the degree portion and multiply the remainder by 60:

const minutesFloat = (value - degrees) * 60;

This gives:

44.92902

The integer portion becomes minutes:

const minutes = Math.floor(minutesFloat);

Result:

Finally, convert the remaining fractional minutes into seconds:

const seconds = (minutesFloat - minutes) * 60;

Result:

55.7412

So:

40.748817

becomes approximately:

40°44'55.74"

The final step is determining whether the direction should be:

N
S
E
W

A Basic JavaScript Function

Let's start with the simplest version.

function decimalToDMS(decimal) {
  const absolute = Math.abs(decimal);

  const degrees = Math.floor(absolute);

  const minutesFloat = (absolute - degrees) * 60;
  const minutes = Math.floor(minutesFloat);

  const seconds = (minutesFloat - minutes) * 60;

  return {
    degrees,
    minutes,
    seconds
  };
}

Usage:

console.log(decimalToDMS(40.748817));

The result may look something like this:

{
  degrees: 40,
  minutes: 44,
  seconds: 55.7411999999
}

The calculation is correct, but the seconds value exposes a common JavaScript issue:

floating-point precision.

Rounding the Seconds

For coordinate display, we usually don't need a long floating-point value.

Two decimal places are generally much easier to read:

const seconds = Number(
  ((minutesFloat - minutes) * 60).toFixed(2)
);

Now our function becomes:

function decimalToDMS(decimal) {
  const absolute = Math.abs(decimal);

  const degrees = Math.floor(absolute);

  const minutesFloat = (absolute - degrees) * 60;
  const minutes = Math.floor(minutesFloat);

  const seconds = Number(
    ((minutesFloat - minutes) * 60).toFixed(2)
  );

  return {
    degrees,
    minutes,
    seconds
  };
}

Calling:

decimalToDMS(40.748817);

now produces:

{
  degrees: 40,
  minutes: 44,
  seconds: 55.74
}

That's much better for display purposes.

Determining N, S, E, and W

A coordinate's sign does not directly tell us the final direction unless we also know whether the value represents latitude or longitude.

For latitude:

Positive = N
Negative = S

For longitude:

Positive = E
Negative = W

We can create a helper function:

function getDirection(decimal, type) {
  if (type === "lat") {
    return decimal >= 0 ? "N" : "S";
  }

  if (type === "lng") {
    return decimal >= 0 ? "E" : "W";
  }

  throw new Error("Coordinate type must be 'lat' or 'lng'");
}

Examples:

console.log(getDirection(40.748817, "lat"));
// N

console.log(getDirection(-73.985428, "lng"));
// W

Building a Complete DD-to-DMS Function

Now we can combine the conversion and direction logic.

function decimalToDMS(decimal, type) {
  if (type !== "lat" && type !== "lng") {
    throw new Error("Coordinate type must be 'lat' or 'lng'");
  }

  const absolute = Math.abs(decimal);

  const degrees = Math.floor(absolute);

  const minutesFloat = (absolute - degrees) * 60;

  const minutes = Math.floor(minutesFloat);

  const seconds = Number(
    ((minutesFloat - minutes) * 60).toFixed(2)
  );

  const direction =
    type === "lat"
      ? decimal >= 0
        ? "N"
        : "S"
      : decimal >= 0
        ? "E"
        : "W";

  return {
    degrees,
    minutes,
    seconds,
    direction
  };
}

Usage:

console.log(decimalToDMS(40.748817, "lat"));

Output:

{
  degrees: 40,
  minutes: 44,
  seconds: 55.74,
  direction: "N"
}

Longitude:

console.log(decimalToDMS(-73.985428, "lng"));

Output:

{
  degrees: 73,
  minutes: 59,
  seconds: 7.54,
  direction: "W"
}

Formatting the Result

Structured data is useful internally, but users usually expect a formatted coordinate.

For example:

40°44'55.74"N

Let's add a formatter:

function formatDMS({
  degrees,
  minutes,
  seconds,
  direction
}) {
  return `${degrees}°${minutes}'${seconds}"${direction}`;
}

Usage:

const latitude = decimalToDMS(
  40.748817,
  "lat"
);

console.log(formatDMS(latitude));

Output:

40°44'55.74"N

For longitude:

const longitude = decimalToDMS(
  -73.985428,
  "lng"
);

console.log(formatDMS(longitude));

Output:

73°59'7.54"W

This works, but we can improve the formatting slightly.

Padding Minutes and Seconds

For geographic coordinate displays, this:

73°59'07.54"W

usually looks cleaner than:

73°59'7.54"W

We can pad the values:

function formatDMS({
  degrees,
  minutes,
  seconds,
  direction
}) {
  const formattedMinutes = String(minutes)
    .padStart(2, "0");

  const formattedSeconds = seconds
    .toFixed(2)
    .padStart(5, "0");

  return `${degrees}°${formattedMinutes}'${formattedSeconds}"${direction}`;
}

Now:

formatDMS(
  decimalToDMS(-73.985428, "lng")
);

returns:

73°59'07.54"W

Handling the 60-Second Edge Case

There is an important rounding edge case that is easy to miss.

Imagine the calculated seconds are:

59.9999

After rounding to two decimal places:

Number((59.9999).toFixed(2));

we get:

But this isn't valid DMS formatting:

10°20'60"

Instead, the extra 60 seconds should carry into the minutes:

10°21'00"

The same principle applies when minutes reach 60.

A more reliable function therefore needs carry handling.

function decimalToDMS(decimal, type, precision = 2) {
  if (!Number.isFinite(decimal)) {
    throw new TypeError(
      "Coordinate must be a finite number"
    );
  }

  if (type !== "lat" && type !== "lng") {
    throw new Error(
      "Coordinate type must be 'lat' or 'lng'"
    );
  }

  const absolute = Math.abs(decimal);

  let degrees = Math.floor(absolute);

  const minutesFloat =
    (absolute - degrees) * 60;

  let minutes = Math.floor(minutesFloat);

  let seconds = Number(
    ((minutesFloat - minutes) * 60)
      .toFixed(precision)
  );

  if (seconds >= 60) {
    seconds = 0;
    minutes += 1;
  }

  if (minutes >= 60) {
    minutes = 0;
    degrees += 1;
  }

  const direction =
    type === "lat"
      ? decimal >= 0
        ? "N"
        : "S"
      : decimal >= 0
        ? "E"
        : "W";

  return {
    degrees,
    minutes,
    seconds,
    direction
  };
}

This is much safer than relying only on toFixed().

Validating Latitude and Longitude

A conversion function should also reject impossible geographic coordinates.

Latitude must be between:

-90 and 90

Longitude must be between:

-180 and 180

We can add range checks:

if (
  type === "lat" &&
  (decimal < -90 || decimal > 90)
) {
  throw new RangeError(
    "Latitude must be between -90 and 90"
  );
}

Longitude validation:

if (
  type === "lng" &&
  (decimal < -180 || decimal > 180)
) {
  throw new RangeError(
    "Longitude must be between -180 and 180"
  );
}

Without this validation, something like:

decimalToDMS(250, "lng");

could be converted mathematically even though it is not a valid longitude.

Production-Ready Implementation

Putting everything together gives us a more complete implementation:

function decimalToDMS(
  decimal,
  type,
  precision = 2
) {
  if (!Number.isFinite(decimal)) {
    throw new TypeError(
      "Coordinate must be a finite number"
    );
  }

  if (type !== "lat" && type !== "lng") {
    throw new Error(
      "Coordinate type must be 'lat' or 'lng'"
    );
  }

  if (
    type === "lat" &&
    (decimal < -90 || decimal > 90)
  ) {
    throw new RangeError(
      "Latitude must be between -90 and 90"
    );
  }

  if (
    type === "lng" &&
    (decimal < -180 || decimal > 180)
  ) {
    throw new RangeError(
      "Longitude must be between -180 and 180"
    );
  }

  const absolute = Math.abs(decimal);

  let degrees = Math.floor(absolute);

  const minutesFloat =
    (absolute - degrees) * 60;

  let minutes = Math.floor(minutesFloat);

  let seconds = Number(
    ((minutesFloat - minutes) * 60)
      .toFixed(precision)
  );

  if (seconds >= 60) {
    seconds = 0;
    minutes += 1;
  }

  if (minutes >= 60) {
    minutes = 0;
    degrees += 1;
  }

  const direction =
    type === "lat"
      ? decimal >= 0
        ? "N"
        : "S"
      : decimal >= 0
        ? "E"
        : "W";

  return {
    degrees,
    minutes,
    seconds,
    direction
  };
}

And the formatter:

function formatDMS(
  {
    degrees,
    minutes,
    seconds,
    direction
  },
  precision = 2
) {
  const formattedMinutes =
    String(minutes).padStart(2, "0");

  const formattedSeconds =
    seconds
      .toFixed(precision)
      .padStart(precision + 3, "0");

  return (
    `${degrees}°` +
    `${formattedMinutes}'` +
    `${formattedSeconds}"` +
    direction
  );
}

Example:

const lat = decimalToDMS(
  40.748817,
  "lat"
);

const lng = decimalToDMS(
  -73.985428,
  "lng"
);

console.log(formatDMS(lat));
console.log(formatDMS(lng));

Output:

40°44'55.74"N
73°59'07.54"W

Converting a Latitude and Longitude Pair

Most applications work with both values together.

We can wrap the converter with another helper:

function coordinatesToDMS(
  latitude,
  longitude
) {
  return {
    latitude: decimalToDMS(
      latitude,
      "lat"
    ),
    longitude: decimalToDMS(
      longitude,
      "lng"
    )
  };
}

Usage:

const coordinates = coordinatesToDMS(
  40.748817,
  -73.985428
);

console.log(coordinates);

Output:

{
  latitude: {
    degrees: 40,
    minutes: 44,
    seconds: 55.74,
    direction: "N"
  },
  longitude: {
    degrees: 73,
    minutes: 59,
    seconds: 7.54,
    direction: "W"
  }
}

We can then format the pair:

const latitudeDMS =
  formatDMS(coordinates.latitude);

const longitudeDMS =
  formatDMS(coordinates.longitude);

console.log(
  `${latitudeDMS}, ${longitudeDMS}`
);

Output:

40°44'55.74"N, 73°59'07.54"W

Why Return an Object Instead of a String?

It might seem easier to make decimalToDMS() directly return:

40°44'55.74"N

For very small projects, that approach is fine.

However, returning structured data gives your application more flexibility.

For example:

{
  degrees: 40,
  minutes: 44,
  seconds: 55.74,
  direction: "N"
}

The UI can then choose how to display the same value.

Compact:

40°44'55.74"N

Spaced:

40° 44′ 55.74″ N

Detailed:

Degrees: 40
Minutes: 44
Seconds: 55.74
Direction: North

Keeping conversion logic separate from presentation logic usually makes the code easier to reuse and test.

Testing the Conversion

Coordinate conversion code is small, but there are several useful boundary conditions to test.

Start with common values:

console.log(
  decimalToDMS(40.748817, "lat")
);

console.log(
  decimalToDMS(-73.985428, "lng")
);

Then test zero:

console.log(
  decimalToDMS(0, "lat")
);

console.log(
  decimalToDMS(0, "lng")
);

Latitude limits:

console.log(
  decimalToDMS(90, "lat")
);

console.log(
  decimalToDMS(-90, "lat")
);

Longitude limits:

console.log(
  decimalToDMS(180, "lng")
);

console.log(
  decimalToDMS(-180, "lng")
);

Invalid values should throw errors:

decimalToDMS(91, "lat");
// RangeError

decimalToDMS(-181, "lng");
// RangeError

decimalToDMS(NaN, "lat");
// TypeError

Testing With Vitest or Jest

This function is also easy to unit-test.

For example:

expect(
  decimalToDMS(
    40.748817,
    "lat"
  )
).toEqual({
  degrees: 40,
  minutes: 44,
  seconds: 55.74,
  direction: "N"
});

Longitude:

expect(
  decimalToDMS(
    -73.985428,
    "lng"
  )
).toEqual({
  degrees: 73,
  minutes: 59,
  seconds: 7.54,
  direction: "W"
});

You can also verify that invalid coordinates throw:

expect(() => {
  decimalToDMS(91, "lat");
}).toThrow(RangeError);

And:

expect(() => {
  decimalToDMS(181, "lng");
}).toThrow(RangeError);

What About Negative Zero?

JavaScript has both:

and:

-0

You can verify this using:

Object.is(-0, 0);
// false

For most geographic applications, treating zero latitude as North and zero longitude as East is acceptable for display purposes.

The function above does this because:

0 >= 0

returns:

true

If your application needs to preserve the distinction between 0 and -0, you can detect it using:

Object.is(decimal, -0)

For most map and GPS interfaces, however, this level of distinction is unnecessary.

Where DD-to-DMS Conversion Is Useful

This kind of coordinate conversion appears in many applications:

GIS tools
GPS applications
Mapping websites
Hiking apps
Photo geotagging
Survey interfaces
Navigation tools
Location sharing
Marine navigation
Aviation software
Geographic visualization

APIs often return coordinates like this:

{
  "latitude": 40.748817,
  "longitude": -73.985428
}

But users may prefer to see:

40°44'55.74"N, 73°59'07.54"W

So the converter often sits between the data layer and the presentation layer.

Using the Converter With Browser Geolocation

The converter can also be combined with the browser Geolocation API.

navigator.geolocation.getCurrentPosition(
  ({ coords }) => {
    const latitude = decimalToDMS(
      coords.latitude,
      "lat"
    );

    const longitude = decimalToDMS(
      coords.longitude,
      "lng"
    );

    console.log(
      formatDMS(latitude)
    );

    console.log(
      formatDMS(longitude)
    );
  }
);

This lets you take coordinates returned by the browser and immediately display them in DMS format.

Example: Building a Simple Coordinate Formatter

Here's a small reusable helper:

function formatCoordinatePair(
  latitude,
  longitude
) {
  const lat = decimalToDMS(
    latitude,
    "lat"
  );

  const lng = decimalToDMS(
    longitude,
    "lng"
  );

  return (
    `${formatDMS(lat)}, ` +
    `${formatDMS(lng)}`
  );
}

Usage:

console.log(
  formatCoordinatePair(
    40.748817,
    -73.985428
  )
);

Output:

40°44'55.74"N, 73°59'07.54"W

This kind of helper works well in map popups, coordinate panels, location-sharing tools, and GPS interfaces.

Try the Conversion With Real Coordinates

When building geographic utilities, testing only a few hard-coded numbers isn't always enough.

It can be useful to select real locations on a map, copy their Decimal Degree coordinates, and compare the result produced by your JavaScript implementation.

I've been building CoordMap, a browser-based coordinate and mapping tool for working with latitude, longitude, locations, elevation, and map-based geographic data.

You can use it to find a real coordinate pair and then test the converter from this article.

For example, after getting coordinates such as:

40.748817, -73.985428

you can run:

console.log(
  formatCoordinatePair(
    40.748817,
    -73.985428
  )
);

and compare the formatted result.

This is also a convenient way to test your implementation with locations from different hemispheres:

North + West
North + East
South + West
South + East

That helps confirm that your N, S, E, and W direction logic behaves correctly.

Complete Copy-Paste Version

If you just want the full implementation, here it is:

function decimalToDMS(
  decimal,
  type,
  precision = 2
) {
  if (!Number.isFinite(decimal)) {
    throw new TypeError(
      "Coordinate must be a finite number"
    );
  }

  if (type !== "lat" && type !== "lng") {
    throw new Error(
      "Coordinate type must be 'lat' or 'lng'"
    );
  }

  if (
    type === "lat" &&
    (decimal < -90 || decimal > 90)
  ) {
    throw new RangeError(
      "Latitude must be between -90 and 90"
    );
  }

  if (
    type === "lng" &&
    (decimal < -180 || decimal > 180)
  ) {
    throw new RangeError(
      "Longitude must be between -180 and 180"
    );
  }

  const absolute = Math.abs(decimal);

  let degrees = Math.floor(absolute);

  const minutesFloat =
    (absolute - degrees) * 60;

  let minutes = Math.floor(minutesFloat);

  let seconds = Number(
    ((minutesFloat - minutes) * 60)
      .toFixed(precision)
  );

  if (seconds >= 60) {
    seconds = 0;
    minutes += 1;
  }

  if (minutes >= 60) {
    minutes = 0;
    degrees += 1;
  }

  const direction =
    type === "lat"
      ? decimal >= 0
        ? "N"
        : "S"
      : decimal >= 0
        ? "E"
        : "W";

  return {
    degrees,
    minutes,
    seconds,
    direction
  };
}

function formatDMS(
  {
    degrees,
    minutes,
    seconds,
    direction
  },
  precision = 2
) {
  const formattedMinutes =
    String(minutes).padStart(2, "0");

  const formattedSeconds =
    seconds
      .toFixed(precision)
      .padStart(precision + 3, "0");

  return (
    `${degrees}°` +
    `${formattedMinutes}'` +
    `${formattedSeconds}"` +
    direction
  );
}

function formatCoordinatePair(
  latitude,
  longitude
) {
  const lat = decimalToDMS(
    latitude,
    "lat"
  );

  const lng = decimalToDMS(
    longitude,
    "lng"
  );

  return (
    `${formatDMS(lat)}, ` +
    `${formatDMS(lng)}`
  );
}

console.log(
  formatCoordinatePair(
    40.748817,
    -73.985428
  )
);

Output:

40°44'55.74"N, 73°59'07.54"W

Final Thoughts

The basic Decimal Degrees to DMS formula is simple:

Decimal Degrees
      ↓
   Degrees
      ↓
   Minutes
      ↓
   Seconds

But a reliable implementation should also handle:

Latitude and longitude direction
Valid geographic ranges
Floating-point precision
Seconds rounding to 60
Minute carry-over
Invalid inputs
Reusable structured output
Separate formatting logic

That turns a few lines of coordinate math into something much more suitable for real GIS, GPS, and mapping applications.

If you're building a map-related project, keeping coordinate conversion as a small standalone utility also makes it easier to reuse across different parts of the application.

Happy mapping. 🗺️