Map with Distance Calculator

.distance-calc-container { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; max-width: 800px; margin: 20px auto; padding: 25px; border: 1px solid #e1e4e8; border-radius: 12px; background-color: #ffffff; box-shadow: 0 4px 15px rgba(0,0,0,0.05); color: #333; } .distance-calc-container h2 { color: #1a73e8; margin-top: 0; text-align: center; font-size: 28px; } .calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; } .point-box { background: #f8f9fa; padding: 15px; border-radius: 8px; border: 1px solid #eee; } .point-box h3 { margin-top: 0; font-size: 18px; color: #444; border-bottom: 2px solid #1a73e8; display: inline-block; padding-bottom: 3px; } .input-group { margin-bottom: 15px; } .input-group label { display: block; font-weight: 600; margin-bottom: 5px; font-size: 14px; } .input-group input, .input-group select { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 6px; box-sizing: border-box; font-size: 16px; } .calc-button { width: 100%; padding: 15px; background-color: #1a73e8; color: white; border: none; border-radius: 6px; font-size: 18px; font-weight: bold; cursor: pointer; transition: background-color 0.2s; } .calc-button:hover { background-color: #1557b0; } #distance-result { margin-top: 25px; padding: 20px; background-color: #e8f0fe; border-radius: 8px; text-align: center; display: none; } .result-value { font-size: 32px; font-weight: 800; color: #1a73e8; display: block; } .result-label { font-size: 16px; color: #555; } .article-section { margin-top: 40px; line-height: 1.6; color: #444; } .article-section h2 { text-align: left; font-size: 24px; margin-bottom: 15px; } .article-section p { margin-bottom: 15px; } .formula-box { background: #f1f3f4; padding: 15px; border-left: 5px solid #1a73e8; font-family: "Courier New", Courier, monospace; margin: 20px 0; overflow-x: auto; } @media (max-width: 600px) { .calc-grid { grid-template-columns: 1fr; } }

Map Distance & Coordinate Calculator

Starting Point (A)

Destination Point (B)

Kilometers (km) Miles (mi) Nautical Miles (nm)
The total distance between points is: 0.00

Understanding Great Circle Distance

Calculating distance on a map isn't as simple as drawing a straight line with a ruler. Because the Earth is an oblate spheroid, the shortest distance between two points on its surface is actually a curve. This is known as the Great Circle Distance or Orthodromic distance.

The Haversine Formula

This calculator utilizes the Haversine formula, which accounts for the Earth's curvature to provide highly accurate point-to-point results. This formula is the industry standard for navigation and aviation apps.

a = sin²(Δφ/2) + cos φ1 ⋅ cos φ2 ⋅ sin²(Δλ/2)
c = 2 ⋅ atan2( √a, √(1−a) )
d = R ⋅ c

Practical Examples

Suppose you want to calculate the distance between New York City and Los Angeles:

  • NYC: 40.7128° N, 74.0060° W
  • Los Angeles: 34.0522° N, 118.2437° W
  • Result: Approximately 3,940 kilometers (2,448 miles).

How to use Coordinates

Decimal degrees are the standard format for GPS coordinates. Positive latitudes are North, negative are South. Positive longitudes are East, while negative longitudes are West. Ensure you include the minus sign (-) for Western or Southern coordinates to get an accurate result.

function calculateMapDistance() { var lat1 = parseFloat(document.getElementById('lat1').value); var lon1 = parseFloat(document.getElementById('lon1').value); var lat2 = parseFloat(document.getElementById('lat2').value); var lon2 = parseFloat(document.getElementById('lon2').value); var unit = document.getElementById('unit').value; if (isNaN(lat1) || isNaN(lon1) || isNaN(lat2) || isNaN(lon2)) { alert("Please enter valid numerical coordinates for both points."); return; } // Earth's radius in different units var R; var unitLabel; if (unit === 'km') { R = 6371; unitLabel = "Kilometers"; } else if (unit === 'mi') { R = 3958.8; unitLabel = "Miles"; } else { R = 3440.065; unitLabel = "Nautical Miles"; } // Convert degrees to radians var dLat = (lat2 – lat1) * Math.PI / 180; var dLon = (lon2 – lon1) * Math.PI / 180; var rLat1 = lat1 * Math.PI / 180; var rLat2 = lat2 * Math.PI / 180; // Haversine calculation logic var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.cos(rLat1) * Math.cos(rLat2) * Math.sin(dLon / 2) * Math.sin(dLon / 2); var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 – a)); var d = R * c; // Display results document.getElementById('distance-result').style.display = 'block'; document.getElementById('final-dist').innerHTML = d.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2}); document.getElementById('unit-display').innerHTML = unitLabel; }

Leave a Comment