steinbring · May 11, 2014 21:03
diff --git a/geolocate.html b/geolocate.html
 <!-- 
 Joe Steinbring
 http://steinbring.net
 -->

 <!DOCTYPE html>
 <html>
 <head>
 	<title></title>
 </head>
 <body>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

 <script type="text/javascript">
 	// START: Create target array
 	var targets = [];
 	// Add Radio Milwaukee
 	targets.push({ Label: 'Radio Milwaukee', Address: '158 S. Barclay Street', Latitude: '43.029716', Longitude: '-87.9093259' });
 	// Add Glendale
 	targets.push({ Label: 'Glendale', Address: '6969 N Port Washington Rd', Latitude: '43.1430999', Longitude: '-87.913841' });
 	// Add Factory Cafe
 	targets.push({ Label: 'Factory Cafe', Address: '422 N 5th Street', Latitude: '43.0352522', Longitude: '-87.9171532' });
 	// Add Bay View
 	targets.push({ Label: 'Bay View', Address: '2266 S Kinnickinnic Ave', Latitude: '43.0033822', Longitude: '-87.9043515' });
 	// Add Grand Avenue
 	targets.push({ Label: 'Grand Avenue', Address: '275 W. Wisconsin Avenue', Latitude: '43.0386689', Longitude: '-87.9147846' });
 	// END: Create target array

 	// This is for display on the Nth letter in the alphabet (the letter needs to be uppercase, else it won't be displayed)
 	var alphabet = 'ABCDEFGHIJKLMNOPQRXTUVWXYZ';

 	function initiate_geolocation() {
 		navigator.geolocation.getCurrentPosition(handle_geolocation_query);
 	}

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

 	function getDistance(p1lat, p1lng, p2lat, p2lng) {
 		var R = 6378137; // Earth’s mean radius in meter
 		var dLat = rad(p2lat - p1lat);
 		var dLong = rad(p2lng - p1lng);
 		var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
 		Math.cos(rad(p1lat)) * Math.cos(rad(p2lat)) *
 		Math.sin(dLong / 2) * Math.sin(dLong / 2);
 		var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
 		var d = R * c;
 		return d; // returns the distance in meter
 	};

 	function handle_geolocation_query(position){
 		// START: Calculate the distance between you and the target
 		for (var i=0; i< targets.length; i++){
 			// The distance is calculated in meters
 			targets[i].distance = getDistance(position.coords.latitude, position.coords.longitude, targets[i].Latitude, targets[i].Longitude);
 		}
 		// END: Calculate the distance between you and the target

 		// Sort your array of targets by distance from your current location
 		targets.sort(function(a,b) { return parseFloat(a.distance) - parseFloat(b.distance) } );

 		// START: Create the Map
 		var MapImageURL = 'http://maps.googleapis.com/maps/api/staticmap?center='+position.coords.latitude+','+position.coords.longitude+'&zoom=12&size=300x300&maptype=roadmap';
 		// Loop through the targets array
 		for (var i=0; i< targets.length; i++){
 			// Add the point to the URL variable
 			var MapImageURL = MapImageURL+'&markers=color:red|label:'+alphabet[i]+'|'+targets[i].Latitude+','+targets[i].Longitude;
 		}
 		// Specify that there is no sensor in the client
 		MapImageURL = MapImageURL+'&sensor=false'
 		$("#Map").html("<img src='"+MapImageURL+"'>")
 		// END: Create the Map

 		// START: Create the list of locations
 		var ListItems = '';
 		// Loop through the targets array
 		for (var i=0; i< targets.length; i++){
 			MilesAway = Number(targets[i].distance) * 0.000621371;
 			console.log(targets[i].Distance);
 			ListItems = ListItems+'<li>'+alphabet[i]+' - '+targets[i].Label+' - '+targets[i].Address+' - '+(Math.round(MilesAway * 100) / 100)+'mi away </li>';
 		}
 		// Populate the list
 		$("#List").html("<ul>"+ListItems+"</ul>")
 		// END: Create the list of locations
 	}
 	initiate_geolocation();
 </script>
 <style type="text/css">
 	#Map {
 		float: left;
 		width: 50%;
 	}
 	#List {
 		float: left;
 		width: 50%;
 	}
 	#List li {
 	    list-style: none;
 	}
 </style>
 	
 	<div id="Map">

 	</div>
 	<div id="List">
 		<ul></ul>
 	</div>
 </body>
 </html>
	<!--
	Joe Steinbring
	http://steinbring.net
	-->

	<!DOCTYPE html>
	<html>
	<head>
	<title></title>
	</head>
	<body>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

	<script type="text/javascript">
	// START: Create target array
	var targets = [];
	// Add Radio Milwaukee
	targets.push({ Label: 'Radio Milwaukee', Address: '158 S. Barclay Street', Latitude: '43.029716', Longitude: '-87.9093259' });
	// Add Glendale
	targets.push({ Label: 'Glendale', Address: '6969 N Port Washington Rd', Latitude: '43.1430999', Longitude: '-87.913841' });
	// Add Factory Cafe
	targets.push({ Label: 'Factory Cafe', Address: '422 N 5th Street', Latitude: '43.0352522', Longitude: '-87.9171532' });
	// Add Bay View
	targets.push({ Label: 'Bay View', Address: '2266 S Kinnickinnic Ave', Latitude: '43.0033822', Longitude: '-87.9043515' });
	// Add Grand Avenue
	targets.push({ Label: 'Grand Avenue', Address: '275 W. Wisconsin Avenue', Latitude: '43.0386689', Longitude: '-87.9147846' });
	// END: Create target array

	// This is for display on the Nth letter in the alphabet (the letter needs to be uppercase, else it won't be displayed)
	var alphabet = 'ABCDEFGHIJKLMNOPQRXTUVWXYZ';

	function initiate_geolocation() {
	navigator.geolocation.getCurrentPosition(handle_geolocation_query);
	}

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

	function getDistance(p1lat, p1lng, p2lat, p2lng) {
	var R = 6378137; // Earth’s mean radius in meter
	var dLat = rad(p2lat - p1lat);
	var dLong = rad(p2lng - p1lng);
	var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
	Math.cos(rad(p1lat)) * Math.cos(rad(p2lat)) *
	Math.sin(dLong / 2) * Math.sin(dLong / 2);
	var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
	var d = R * c;
	return d; // returns the distance in meter
	};

	function handle_geolocation_query(position){
	// START: Calculate the distance between you and the target
	for (var i=0; i< targets.length; i++){
	// The distance is calculated in meters
	targets[i].distance = getDistance(position.coords.latitude, position.coords.longitude, targets[i].Latitude, targets[i].Longitude);
	}
	// END: Calculate the distance between you and the target

	// Sort your array of targets by distance from your current location
	targets.sort(function(a,b) { return parseFloat(a.distance) - parseFloat(b.distance) } );

	// START: Create the Map
	var MapImageURL = 'http://maps.googleapis.com/maps/api/staticmap?center='+position.coords.latitude+','+position.coords.longitude+'&zoom=12&size=300x300&maptype=roadmap';
	// Loop through the targets array
	for (var i=0; i< targets.length; i++){
	// Add the point to the URL variable
	var MapImageURL = MapImageURL+'&markers=color:red\|label:'+alphabet[i]+'\|'+targets[i].Latitude+','+targets[i].Longitude;
	}
	// Specify that there is no sensor in the client
	MapImageURL = MapImageURL+'&sensor=false'
	$("#Map").html("<img src='"+MapImageURL+"'>")
	// END: Create the Map

	// START: Create the list of locations
	var ListItems = '';
	// Loop through the targets array
	for (var i=0; i< targets.length; i++){
	MilesAway = Number(targets[i].distance) * 0.000621371;
	console.log(targets[i].Distance);
	ListItems = ListItems+'<li>'+alphabet[i]+' - '+targets[i].Label+' - '+targets[i].Address+' - '+(Math.round(MilesAway * 100) / 100)+'mi away </li>';
	}
	// Populate the list
	$("#List").html("<ul>"+ListItems+"</ul>")
	// END: Create the list of locations
	}
	initiate_geolocation();
	</script>
	<style type="text/css">
	#Map {
	float: left;
	width: 50%;
	}
	#List {
	float: left;
	width: 50%;
	}
	#List li {
	list-style: none;
	}
	</style>

	<div id="Map">

	</div>
	<div id="List">
	<ul></ul>
	</div>
	</body>
	</html>