This repository has been archived by the owner on Jan 10, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 6
/
latrine.html
151 lines (137 loc) · 5.12 KB
/
latrine.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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Latrine</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="robots" content="noindex, nofollow, noarchive" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link type="image/ico" rel="shortcut icon" href="/favicon.ico" />
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" />
<!--[if lte IE 8]>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.ie.css" />
<![endif]-->
<script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<style type="text/css">
<!--
body {
padding: 0;
margin: 0;
}
html, body, #map {
height: 100%;
}
-->
</style>
</head>
<body>
<div id="map" style="width: 100%; height: 100%;"></div>
<script type="text/javascript">
/****** Adjust the following location (URL) to your Perl script *********/
var perlScript = 'latrine.pl'; // /cgi-bin/latrine.pl
/*** Change the following only if you know what you're doing *********/
// OpenStreetMap
var osmUrl = 'http://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png', // http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png
osmAttribution = 'Map Data from <a href="http://www.openstreetmap.org/" target="_blank">OpenStreetMap</a> (<a href="http://creativecommons.org/licenses/by-sa/2.0/" target="_blank">CC-by-SA 2.0</a>)',
osm = new L.TileLayer(osmUrl, {maxZoom: 18, attribution: osmAttribution});
// OpenCycleMap
var cyclemapUrl = 'http://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png',
cyclemap = new L.TileLayer(cyclemapUrl, {maxZoom: 18, attribution: osmAttribution});
// Hike and Bike
var hikebikeUrl = 'http://toolserver.org/tiles/hikebike/{z}/{x}/{y}.png',
hikebike = new L.TileLayer(hikebikeUrl, {maxZoom: 18, attribution: osmAttribution});
// ESRI
var esriUrl = "http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}.png",
esriAttribution = "National Geographic, Esri, DeLorme, NAVTEQ",
esri = new L.TileLayer(esriUrl, {maxZoom: 16, attribution: esriAttribution});
// Hillshading
var hillshadingUrl = 'http://toolserver.org/~cmarqu/hill/{z}/{x}/{y}.png',
hillshadingAttribution = 'Elevation Data by <a href="http://www.nasa.gov/" target="_blank">NASA SRTM</a>',
hillshading = new L.TileLayer(hillshadingUrl, {maxZoom: 18, attribution: hillshadingAttribution});
var baseMaps = {
"OpenStreetMap": osm,
"OpenCycleMap": cyclemap,
"Hike & Bike": hikebike,
"ESRI": esri
};
var overlayMaps = {
"Hillshading": hillshading
};
var layersControl = new L.Control.Layers(baseMaps, overlayMaps);
// Set default until the first update
var map = new L.Map('map', {
center: new L.LatLng(53.550556, 9.993333),
zoom: 16,
layers: [hikebike]
});
map.addControl(layersControl);
var marker = L.marker([53.550556, 9.993333]);
marker.addTo(map);
marker.bindPopup("<b>..?</b>").openPopup();
var circle = L.circle([53.550556, 9.993333], 100, {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5
}).addTo(map);
// Check private key
var key = window.location.hash.substring(1);
if (!key.match(/^[\w\d]{5,15}$/)) {
key = '';
}
var lastspeed = 0;
var center = 0;
// Fetch data
var refresh = function(){
$.getJSON(perlScript+'?view=1&key='+key+'&t='+(new Date).getTime(), function(data) {
if (data.error) { alert('Error: ' + data.error) }
if (data.lat && data.lon) {
// Update marker
marker.setLatLng([data.lat,data.lon]);
// Update cirle
circle.setLatLng([data.lat,data.lon]);
circle.setRadius(data.acc);
// Center the map on first load
if (center < 1) {
map.setView( [data.lat,data.lon], 16 )
center = 1;
}
// Calculate the time of last update
var lastupdate = data.now - data.time;
var minutes = Math.floor(lastupdate / 60);
var seconds = lastupdate % 60;
minutes = minutes < 9 ? "0"+minutes : minutes;
seconds = seconds < 9 ? "0"+seconds : seconds;
// Update popup
var popUpText = '<p>Last update '+ minutes+':'+seconds +' minutes ago</p>';
// Calculate speed (m/sec -> km/h ...)
if (data.speed > 0 && lastupdate < 301) {
var kmh = data.speed * 3.6;
var mph = data.speed * 2.236936;
var knot = data.speed * 1.943844;
var pace = data.speed * 0.06;
var trend = '→';
// Faster or slower?
if (data.speed > lastspeed) {
trend = '↑';
}
if (data.speed < lastspeed) {
trend = '→';
}
lastspeed = data.speed;
// Expand popup
popUpText = popUpText + '<p>Speed ( '+ trend + ' ):<br/>'
+ kmh.toFixed(2) + ' km/h<br/>'
+ pace.toFixed(2) + ' km/min<br/>'
+ mph.toFixed(2) + ' mph<br/>'
+ knot.toFixed(2) + ' knot<br/>'
+ '</p>';
}
marker.setPopupContent(popUpText);
}
});
}
refresh();
setInterval(refresh,5000); // 5 sec
</script>