-
Notifications
You must be signed in to change notification settings - Fork 1
/
sessions-viewer.html
108 lines (93 loc) · 3.16 KB
/
sessions-viewer.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!DOCTYPE html>
<html>
<head>
<title>H&H current session map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
.coords {
font-family: arial, Helvetica,sans-serif;
font-size: 0.8em;
text-shadow: 0em 0em 0.2em #000, 0em 0em 0.2em #000;
font-weight: bold;
color: white;
}
</style>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="session.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var s = $("<select id=\"selectId\" name=\"selectName\" />");
for (var i = 0; i < sessionsJS.length; i++) {
$("<option />", {
value: sessionsJS[i],
text: sessionsJS[i]
}).appendTo(s);
}
s.change(function(e) {
currentSession = $(e.target).val();
initialize();
})
s.appendTo("#selector");
var currentSession = sessionsJS[0];
function myProjection() {
var MAP_RANGE = 51200;
this.worldOrigin_ = new google.maps.Point(0, 0);
this.pixelsPerLonDegree_ = MAP_RANGE / 360;
this.pixelsPerLatDegree_ = MAP_RANGE / 360;
};
myProjection.prototype.fromLatLngToPoint = function(latLng) {
var origin = this.worldOrigin_;
var x = origin.x + latLng.lng() * this.pixelsPerLonDegree_;
var y = origin.y + latLng.lat() * this.pixelsPerLatDegree_;
return new google.maps.Point(x, y);
};
myProjection.prototype.fromPointToLatLng = function(point) {
var origin = this.worldOrigin_;
var lng = (point.x - origin.x) / this.pixelsPerLonDegree_;
var lat = (point.y - origin.y) / this.pixelsPerLatDegree_;
return new google.maps.LatLng(lat, lng);
};
var zoom;
function SurfMapType() {}
SurfMapType.prototype.tileSize = new google.maps.Size(100, 100);
SurfMapType.prototype.minZoom = 9;
SurfMapType.prototype.maxZoom = 9;
SurfMapType.prototype.getTile = function(coord, zoom, ownerDocument) {
var div = ownerDocument.createElement('DIV');
var url = currentSession + '/tile_' + (coord.x) + '_' + (coord.y) + '.png';
div.style.width = '100px';
div.style.height = '100px';
div.style.backgroundImage="url('"+url+"')";
div.style.backgroundSize='cover';
return div;
};
var SurfMapTypeN = "SurfMapType";
SurfMapType.prototype.name = SurfMapTypeN;
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(0, 0),
mapTypeControl: false,
zoomControl: false,
backgroundColor: '#E0C191',
mapTypeId: SurfMapTypeN,
zoom: 9
}
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
var sMapType = new SurfMapType();
sMapType.projection = new myProjection();
map.mapTypes.set(SurfMapTypeN, sMapType);
map.setMapTypeId(SurfMapTypeN);
}
initialize();
});
</script>
</head>
<body>
<div id="map_canvas" style="width:100%; height:100%"></div>
<div id="selector" style="z-index:10; position: absolute; left: 150px; top: 10px;"></div>
</body>
</html>