Latitude/Longitude Precision

A demonstration of the precision of latitude and longitude values as the precision of decimal points is varied.

Description

This tool demonstrates how the number of decimal places in latitude and longitude coordinates directly affects the real-world precision of a location. Every extra decimal place reduces the possible error by roughly a factor of ten, shrinking the area that the point could actually represent on the ground. The map below illustrates this visually by drawing a small rectangle that represents the area covered by the chosen precision level.

You can begin by selecting a known location such as New York, Paris, or Belfast, or simply click anywhere on the map. Then choose how many decimal places to use from a single decimal place, which may cover hundreds of kilometres, to eight decimal places, which can pinpoint an area within just a few millimetres. The coloured box that appears shows the area of uncertainty that results from rounding the original coordinate pair to that level of precision. Zooming in reveals how quickly the area becomes smaller as you increase the number of decimal places.

Understanding coordinate precision is useful for anyone working with mapping, GPS devices, or geographic data. For instance, environmental surveys, construction plans, or drone mapping might require higher precision, while a tourism map or delivery service could function perfectly well with fewer decimal places. By experimenting with this tool, you can see why coordinates such as 48.8566199, 2.3521287 and a rounded version like 48.857, 2.352 may both be accurate enough depending on the intended application. It's a simple but effective way to visualise how numerical accuracy translates into real-world spatial accuracy.

How it Works

See code below:

var map;
var latlng=[0,0];
var bounds;
var arrRect=new Array(0);

var locations = {};
locations['newyork'] = [40.7127065,-74.0059982];
locations['paris'] = [48.8566199,2.3521287];
locations['belfast'] = [54.59632,-5.93007];

var zoom = 2;
var mapDivID = "map_canvas";
var messageDIV = document.getElementById("message");

function initialize() 
{
	document.getElementById(mapDivID).style.cursor = "crosshair";
	
	map = L.map(mapDivID,{
		fullscreenControl: true,
  		fullscreenControlOptions: {
    		position: 'topleft'
  			}
	}).setView(latlng, zoom);
	
	var openstreetmap = L.tileLayer('https://{s}.'+tileProviderURL+'/{z}/{x}/{y}.png', {
		maxZoom: 18,
		attribution: tileProviderAttribution
	});
	var ESRIImg  = L.esri.basemapLayer('Imagery');
	var ESRIImbLab  = L.esri.basemapLayer('ImageryLabels');
	
	var baseLayers = {
		"OSM": openstreetmap,
		"Satellite": ESRIImg
	};
	
	var overlays = {
		"Labels": ESRIImbLab,
	};
	
	ESRIImg.addTo(map);

	addEventMapClicked();
}

function addEventMapClicked()
{
	//Map Clicked Event
	map.on('click', function(event)
	{										  
		var dp = document.getElementById("decimalplaces").value;
		DrawBox([event.latlng.lat,event.latlng.lng],dp);
 	});
}

function ddlChange()
{
	var location = document.getElementById("location").value;
	var dp = document.getElementById("decimalplaces").value;
	
	if (location!="")
	{
		var thisLatLng = locations[location];
		DrawBox(thisLatLng,dp);	
	}
}

function DrawBox(latlng,dp)
{
	map.setView(latlng,10);

	var TLlat,TLlng,BRlat,BRlng

	var smallestunit = Math.pow(10, -dp);
	var HalfSmallestUnit = smallestunit/ 2;

	TLlat = Number(latlng[0].toFixed(dp))+HalfSmallestUnit;
	TLlng =  Number(latlng[1].toFixed(dp))-HalfSmallestUnit;

	BRlat = Number(latlng[0].toFixed(dp))-HalfSmallestUnit;
	BRlng = Number(latlng[1].toFixed(dp))+HalfSmallestUnit;

	var TopLeft = L.latLng(TLlat,TLlng);
	var BottomRight = L.latLng(BRlat,BRlng);

	messageDIV.innerHTML = "Showing area of precision for " + latlng[0].toFixed(dp) + ", " + latlng[1].toFixed(dp);

	// define rectangle geographical bounds
	bounds = [TopLeft, BottomRight];

	// create a rectangle
	var rect = L.rectangle(bounds, {color: "#E80040", weight: 1}).addTo(map);
	arrRect.push(rect)
	// zoom the map to the rectangle bounds

	map.fitBounds(bounds);
}

function clearmap()
{
	if (arrRect) 
	{
		for (i in arrRect) 
		{
			arrRect[i].remove();
		}
	}
	arrRect=new Array(0);
		
	bounds = new L.latLngBounds();	
	messageDIV.innerHTML = "";
}

Relevant Links

Leaflet - a JavaScript library for interactive maps

Version History