Description

An illustration of how the precision of latitude and longitude values correspond to an area on the surface that describes the region of possible error. This can be used to confirm how precise a latitude, longitude pair really needs to be. For example, Paris can be [48.8566199,2.3521287] or, for most purposes [48.857, 2.352] will suffice.

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