From 59a16b6179e1850242adcd0fb52225b3d8afadc9 Mon Sep 17 00:00:00 2001
From: Matt Baer <matt@flashstuf.com>
Date: Wed, 18 Feb 2015 00:26:31 -0500
Subject: [PATCH] Add user map to where.html template

---
 templates/where.html | 18 ++++++++++++++++++
 where/map.html       | 40 ++++++++++++++++++++++++++++++++++++++++
 2 files changed, 58 insertions(+)
 create mode 100644 where/map.html
diff --git a/templates/where.html b/templates/where.html
index a93ced1..84ae6a3 100644
--- a/templates/where.html
+++ b/templates/where.html
@@ -12,11 +12,24 @@
 		}
 		div.user h2 {
 			margin: 0;
+			padding: 4px 0;
+		}
+		div.user h2 a {
+			padding-top: 4px;
+			padding-bottom: 4px;
 		}
 		span.time {
+			margin-top: 10px;
 			float: right;
 			color: #999;
 		}
+		iframe {
+			width: 100%;
+			height: 50em;
+		}
+		p.emph {
+			font-size: 1.2em;
+		}
 		</style>
 
 	</head>
@@ -26,12 +39,17 @@
 
 		<p>Last Updated: <time datetime="{{.Updated}}">{{.UpdatedForHumans}}</time></p>
 
+		<p class="emph">Users online now:</p>
 		{{range .Users}}
 		<div class="user">
 			<h2><a href="/~{{.Name}}/">~{{.Name}}</a></h2> <span class="location">{{Location .Region .Country}} </span> <span class="time">{{.CurrentTime}}</span>
 		</div>
 		{{end}}
 
+		<p class="emph" style="margin-top: 2em; margin-bottom: 1em;">All users - <a href="/~bear/map.html">full map</a> | <a href="/~bear/where.json">data</a></p>
+		<iframe src="/~bear/map.html"></iframe>
+
+
 	</body>
 </html>
 {{end}}
diff --git a/where/map.html b/where/map.html
new file mode 100644
index 0000000..707c612
--- /dev/null
+++ b/where/map.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <style type="text/css">
+      html, body, #map-canvas { height: 100%; margin: 0; padding: 0;}
+    </style>
+    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key="></script>
+    <script type="text/javascript">
+	function initialize() {
+		var mapOptions = {
+			center: { lat: 30, lng: 0},
+			zoom: 3
+		};
+		var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
+		(function() {
+			var xhr = new XMLHttpRequest();
+			xhr.onload = function() {
+				var users = JSON.parse(xhr.response);
+				for (var prop in users) {
+					if (users.hasOwnProperty(prop)) {
+						user = users[prop];
+						var marker = new google.maps.Marker({
+							  position: new google.maps.LatLng(user.lat, user.lng),
+							  map: map,
+							  title: user.name
+						});
+					}
+				}
+			};
+			xhr.open('get', 'where.json');
+			xhr.send();
+		})();
+	}
+	google.maps.event.addDomListener(window, 'load', initialize);
+    </script>
+  </head>
+  <body>
+	<div id="map-canvas"></div>
+  </body>
+</html>
