blakek/geoloc.js

## geoloc.js
'use strict';

function GeoLoc (lat, lon) {
	this.lat = lat;
	this.lon = lon;
}

function toRad(dec) {
	return Math.PI * dec / 180;
}

function toDec(rad) {
	return	rad * 180 / Math.PI;
}

function getDistance(lat1, lon1, lat2, lon2, unit) {
	if (typeof unit === 'undefined') {
		unit = 'km';
	}

	var unitConvert = {
		mi: 1.1515,
		km: 1.85316
	};

	var radlat1 = toRad(lat1),
		radlat2 = toRad(lat2),
		radlon1 = toRad(lon1),
		radlon2 = toRad(lon2),
		theta = toRad(lon1 - lon2);

	// Using the Haversine formula...assumes a perfectly spherical earth
	var dist = toDec(Math.acos(Math.sin(radlat1) * Math.sin(radlat2) + Math.cos(radlat1) * Math.cos(radlat2) * Math.cos(theta)))  * 60;

	return dist * unitConvert[unit];
}

## index.html
<html>
<head>
	<meta charset="utf-8">
	<title>Location Calculator Stuff</title>
	<script src="//code.jquery.com/jquery-latest.min.js"></script>
	<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" type="text/css" rel="stylesheet">

	<style>
		.container {
			margin-top: 20px;
		}

		pre {
			max-height: 255px;
			overflow: auto;
			margin-top: 10px;
		}

		#zip-results {
			margin: 10px 0;
		}
	</style>
</head>
<body>
	<div class="container">
		<div class="row well">
			<div class="col-md-6">
				<h2>Zip Code to Geolocation</h2>
				<div class="form-inline">
					<input class="form-control" id="zipcode" type="text" placeholder="zip code">
					<button id="locationButton" class="btn btn-primary">Get location...</button>
				</div>

				<div>
					<ul id="zip-results" class="list-group"></ul>
				</div>

				<pre id="zip2loc">Coordinates will appear here</pre>
			</div>

			<div class="col-md-6">
				<h2>Distance between Locations</h2>
				<div class="form-inline">
					<input class="form-control" type="text" id="loc1" placeholder="start location">
					<input class="form-control" type="text" id="loc2" placeholder="end location">
					<button id="distanceButton" class="btn btn-primary">Get distance...</button>
				</div>

				<pre id="loc2dist">Distance will appear here</pre>
			</div>
		</div>
	</div>

	<input id="zip-return" type="hidden">

	<script src="geoloc.js"></script>
	<script>
		var hLocation = new GeoLoc();

		function placeIdToLatLon() {
			var needle = this.id,
				haystack = JSON.parse($('#zip-return').val()),
				found = false;

			haystack.forEach(function (place) {
				if ('place-' + place['place_id'] == needle) {
					hLocation = new GeoLoc(place['lat'], place['lon']);
					found = true;
					return;
				}
			});

			$('#zip2loc').text((found) ? hLocation.lat + ', ' + hLocation.lon : '');
		}

		$('#locationButton').click(function () {
			$('#zip-results').empty();

			var params = $.param({
				// q: $('#zipcode').val(), // <-- q queries all data... below (e.g. postalcode) only queries one thing, and will be faster but returns fewer results
				postalcode: $('#zipcode').val(),
				format: 'json',
				limit: 5
			});

			var url = 'http://nominatim.openstreetmap.org/search?' + params;

			$.ajax({
				url: url,
				dataType: 'json',
				success: function (data) {
					$('#zip-return').val(JSON.stringify(data));

					data.forEach(function (place) {
						$('#zip-results').append('<a id="place-' + place['place_id'] + '" class="list-group-item zip-result" href="#">' + place['display_name'] + '</a>');
					});

					$('.zip-result').click(placeIdToLatLon);
				},
				error: function (data) {
					$('#zip2loc').text('ERROR!!!\n' + JSON.stringify(data));
				}
			});
		});

		$('#distanceButton').click(function () {
			$('#loc2dist').empty();

			var point1 = $('#loc1').val().split(',', 2),
				point2 = $('#loc2').val().split(',', 2);

			//debugger;

			var distance = getDistance(parseFloat(point1[0]),
									   parseFloat(point1[1]),
									   parseFloat(point2[0]),
									   parseFloat(point2[1]),
									   'mi');

			var text = distance + ' mi <br>' + getDistance(parseFloat(point1[0]), parseFloat(point1[1]), parseFloat(point2[0]), parseFloat(point2[1]), 'km') + ' km';
			$('#loc2dist').html(text);
		});
	</script>
</body>
</html>
	'use strict';

	function GeoLoc (lat, lon) {
	this.lat = lat;
	this.lon = lon;
	}

	function toRad(dec) {
	return Math.PI * dec / 180;
	}

	function toDec(rad) {
	return rad * 180 / Math.PI;
	}

	function getDistance(lat1, lon1, lat2, lon2, unit) {
	if (typeof unit === 'undefined') {
	unit = 'km';
	}

	var unitConvert = {
	mi: 1.1515,
	km: 1.85316
	};

	var radlat1 = toRad(lat1),
	radlat2 = toRad(lat2),
	radlon1 = toRad(lon1),
	radlon2 = toRad(lon2),
	theta = toRad(lon1 - lon2);

	// Using the Haversine formula...assumes a perfectly spherical earth
	var dist = toDec(Math.acos(Math.sin(radlat1) * Math.sin(radlat2) + Math.cos(radlat1) * Math.cos(radlat2) * Math.cos(theta))) * 60;

	return dist * unitConvert[unit];
	}
	<html>
	<head>
	<meta charset="utf-8">
	<title>Location Calculator Stuff</title>
	<script src="//code.jquery.com/jquery-latest.min.js"></script>
	<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" type="text/css" rel="stylesheet">

	<style>
	.container {
	margin-top: 20px;
	}

	pre {
	max-height: 255px;
	overflow: auto;
	margin-top: 10px;
	}

	#zip-results {
	margin: 10px 0;
	}
	</style>
	</head>
	<body>
	<div class="container">
	<div class="row well">
	<div class="col-md-6">
	<h2>Zip Code to Geolocation</h2>
	<div class="form-inline">
	<input class="form-control" id="zipcode" type="text" placeholder="zip code">
	<button id="locationButton" class="btn btn-primary">Get location...</button>
	</div>

	<div>
	<ul id="zip-results" class="list-group"></ul>
	</div>

	<pre id="zip2loc">Coordinates will appear here</pre>
	</div>

	<div class="col-md-6">
	<h2>Distance between Locations</h2>
	<div class="form-inline">
	<input class="form-control" type="text" id="loc1" placeholder="start location">
	<input class="form-control" type="text" id="loc2" placeholder="end location">
	<button id="distanceButton" class="btn btn-primary">Get distance...</button>
	</div>

	<pre id="loc2dist">Distance will appear here</pre>
	</div>
	</div>
	</div>

	<input id="zip-return" type="hidden">

	<script src="geoloc.js"></script>
	<script>
	var hLocation = new GeoLoc();

	function placeIdToLatLon() {
	var needle = this.id,
	haystack = JSON.parse($('#zip-return').val()),
	found = false;

	haystack.forEach(function (place) {
	if ('place-' + place['place_id'] == needle) {
	hLocation = new GeoLoc(place['lat'], place['lon']);
	found = true;
	return;
	}
	});

	$('#zip2loc').text((found) ? hLocation.lat + ', ' + hLocation.lon : '');
	}

	$('#locationButton').click(function () {
	$('#zip-results').empty();

	var params = $.param({
	// q: $('#zipcode').val(), // <-- q queries all data... below (e.g. postalcode) only queries one thing, and will be faster but returns fewer results
	postalcode: $('#zipcode').val(),
	format: 'json',
	limit: 5
	});

	var url = 'http://nominatim.openstreetmap.org/search?' + params;

	$.ajax({
	url: url,
	dataType: 'json',
	success: function (data) {
	$('#zip-return').val(JSON.stringify(data));

	data.forEach(function (place) {
	$('#zip-results').append('<a id="place-' + place['place_id'] + '" class="list-group-item zip-result" href="#">' + place['display_name'] + '</a>');
	});

	$('.zip-result').click(placeIdToLatLon);
	},
	error: function (data) {
	$('#zip2loc').text('ERROR!!!\n' + JSON.stringify(data));
	}
	});
	});

	$('#distanceButton').click(function () {
	$('#loc2dist').empty();

	var point1 = $('#loc1').val().split(',', 2),
	point2 = $('#loc2').val().split(',', 2);

	//debugger;

	var distance = getDistance(parseFloat(point1[0]),
	parseFloat(point1[1]),
	parseFloat(point2[0]),
	parseFloat(point2[1]),
	'mi');

	var text = distance + ' mi <br>' + getDistance(parseFloat(point1[0]), parseFloat(point1[1]), parseFloat(point2[0]), parseFloat(point2[1]), 'km') + ' km';
	$('#loc2dist').html(text);
	});
	</script>
	</body>
	</html>