matt/tildes
1
0
Fork 0
mirror of https://github.com/thebaer/tildes.git synced 2018-07-20 07:15:21 +00:00
Code Issues Activity

Add user map to where.html template

Browse Source
This commit is contained in:
Matt Baer 2015-02-18 00:26:31 -05:00
parent 31d5b9037b
commit 59a16b6179
2 changed files with 58 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
templates/where.html
View File

@ -12,11 +12,24 @@
} }
div.user h2 { div.user h2 {
margin: 0; margin: 0;
padding: 4px 0;
}
div.user h2 a {
padding-top: 4px;
padding-bottom: 4px;
} }
span.time { span.time {
margin-top: 10px;
float: right; float: right;
color: #999; color: #999;
} }
iframe {
width: 100%;
height: 50em;
}
p.emph {
font-size: 1.2em;
}
</style> </style>
</head> </head>
@ -26,12 +39,17 @@
<p>Last Updated: <time datetime="{{.Updated}}">{{.UpdatedForHumans}}</time></p> <p>Last Updated: <time datetime="{{.Updated}}">{{.UpdatedForHumans}}</time></p>
<p class="emph">Users online now:</p>
{{range .Users}} {{range .Users}}
<div class="user"> <div class="user">
<h2><a href="/~{{.Name}}/">~{{.Name}}</a></h2> <span class="location">{{Location .Region .Country}} </span> <span class="time">{{.CurrentTime}}</span> <h2><a href="/~{{.Name}}/">~{{.Name}}</a></h2> <span class="location">{{Location .Region .Country}} </span> <span class="time">{{.CurrentTime}}</span>
</div> </div>
{{end}} {{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> </body>
</html> </html>
{{end}} {{end}}

40
where/map.html Normal file
View File

@ -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>