/
index.html
124 lines (115 loc) · 4.91 KB
/
index.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
<!DOCTYPE html>
<html>
<head>
<title>Tiles freshness</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<style>
html { height: 100% }
body { height: 100%; margin: 0; padding: 0;}
.map { height: 100% }
</style>
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<link rel="stylesheet" href="lib/leaflet-control-geocoder/Control.Geocoder.css" />
<script src="lib/leaflet-control-geocoder/Control.Geocoder.js"></script>
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<script src="lib/Leaflet.EasyButton/easy-button.js"></script>
<script src="lib/leaflet-hash/leaflet-hash.js"></script>
<script src="lib/leaflet-providers/leaflet-providers.js"></script>
<script src="lib/leaflet-geoip/leaflet-geoip.js"></script>
<script src="lib/Bing.js"></script>
</head>
<body>
<div id="map" class="map"></div>
<script>
var map = L.map('map');
var hash = new L.Hash(map);
L.Control.geocoder({collapsed: false}).addTo(map);
L.easyButton("fa-github", function(){ window.open("https://github.com/hamlet/tiles-freshness")}, "Open in GitHub");
var baseLayers = {
'OpenStreetMap Default': L.tileLayer.provider('OpenStreetMap.Mapnik'),
'OpenStreetMap French Style': L.tileLayer.provider('OpenStreetMap.France'),
'OpenStreetMap German Style': L.tileLayer.provider('OpenStreetMap.DE'),
'OpenStreetMap H.O.T.': L.tileLayer.provider('OpenStreetMap.HOT'),
// CORS 'OpenStreetMap BlackAndWhite': L.tileLayer.provider('OpenStreetMap.BlackAndWhite'),
// CORS 'OpenTopoMap': L.tileLayer.provider('OpenTopoMap'),
'Thunderforest OpenCycleMap': L.tileLayer.provider('Thunderforest.OpenCycleMap'),
'Thunderforest Landscape': L.tileLayer.provider('Thunderforest.Landscape'),
// CORS 'Hydda Full': L.tileLayer.provider('Hydda.Full'),
'Bing': new L.bingLayer("AuplXNWfv2r8wBiiFxD76a0vHWy6MEi3xARtk9oTiP-fC7LsEqEl5vE6qpjXiR2l", {maxZoom: 20}),
};
var overlayLayers = {
};
var layerControl = L.control.layers(baseLayers, overlayLayers, {collapsed: false}).addTo(map);
baseLayers['OpenStreetMap H.O.T.'].addTo(map);
// resize layers control to fit into view.
function resizeLayerControl() {
var layerControlHeight = document.body.clientHeight - (10 + 50);
var layerControl = document.getElementsByClassName('leaflet-control-layers-expanded')[0];
layerControl.style.overflowY = 'auto';
layerControl.style.maxHeight = layerControlHeight + 'px';
}
map.on('resize', resizeLayerControl);
resizeLayerControl();
// start the map in South-East England
//map.setView(new L.LatLng(51.3, 0.7),9);
var DEBUG = 0;
function log(txt){
if (DEBUG > 0) {
console.log(txt);
}
}
function display_date(tile, fresh_date) {
log("display_date: " + fresh_date);
re = /<img(.*)src=".*?"(.*)>/;
if ((m = re.exec(tile.outerHTML)) !== null) {
var span= "<p "+ m[1] + m[2] + '><span style="background-color: white">' + fresh_date + "</span></p>";
log(span);
tile.outerHTML += span;
};
}
var dates_cache = {};
function request_and_parse(tile, url, re) {
if (dates_cache[url] !== undefined) {
log("cached: " + url);
display_date(tile, dates_cache[url]);
}
else {
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.send();
xhr.onload = function(e) {
if (this.status == 200) {
var m;
if ((m = re.exec(this.responseText)) !== null) {
if (dates_cache[url] == undefined) {
log("caching: "+ url + " = " + m[1]);
dates_cache[url] = m[1];
}
display_date(tile, m[1]);
}
}
}
}
}
for (var layer in baseLayers) {
if (baseLayers.hasOwnProperty(layer)) {
baseLayers[layer].on('tileload', function(e) {
// console.log(e.tile.outerHTML); // e is an event object (MouseEvent in this case)
// console.log("new " + e.url);
if (/virtualearth/.exec(e.url)) {
log("Bing");
request_and_parse(e.tile, "http://ssh.mlet.me/tile-freshness/headers.php?url=" + e.url, /X-VE-TILEMETA-CaptureDatesRange: (\S+)\r/);
}
else {
log("OSM");
request_and_parse(e.tile, e.url + "/status", /Last rendered at (\S+ \S+ \d+ \d+:\d+:\d+ \d+)/);
}
});
};
};
map.setView(L.GeoIP.getPosition(),10);
</script>
</body>
</html>