-
Notifications
You must be signed in to change notification settings - Fork 8
/
Copy pathservice.htm
127 lines (111 loc) · 5.36 KB
/
service.htm
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<title>Tilecannon</title>
<link rel="stylesheet" href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css"/>
<style>
body{ padding-top: 80px;}
</style>
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css" rel="stylesheet"/>
<script src='//api.tiles.mapbox.com/mapbox.js/v1.3.1/mapbox.js'></script>
<link href="../css/Control.FullScreen.css" rel="stylesheet" type="text/css"/>
<link href='//api.tiles.mapbox.com/mapbox.js/v1.3.1/mapbox.css' rel='stylesheet' />
<!--[if lte IE 8]>
<link href='//api.tiles.mapbox.com/mapbox.js/v1.3.1/mapbox.ie.css' rel='stylesheet' />
<![endif]-->
<script type="text/html" id='svcInfo'>
<div class="row-fluid" >
<div class="span8">
<h4 ><%=obj.name %></h4>
<hr style="margin:2px 0px;"/>
<b>Bounds</b>: <%=obj.bounds %><br/>
<b>Center</b>: <%=obj.center %><br/>
<b>Minimum Zoom</b>: <%=obj.minzoom%><br/>
<b>Maximum Zoom</b>: <%=obj.maxzoom%><br/>
<b>Description</b>: <%=obj.description%><br/>
<b>Attribution</b>: <%=obj.attribution%><br/>
<b>Data source(s)</b>: <%=obj.datasource %><br/>
<b>Version</b>: <%=obj.version %><br/>
<b>Tilejson</b> //<%=obj.server %>/mbtiles/<%=obj.serviceName %>/tilejson/<br/>
<b>Tiles</b>: //<%=obj.server %>/mbtiles/<%=obj.serviceName %>/{z}/{x}/{y}.png<br/>
<% if (typeof obj.grids != 'undefined') { %>
<b>Grids</b>: //<%=obj.server %>/mbtiles/<%=obj.serviceName %>/{z}/{x}/{y}.json<br/>
<%} %>
<b>Legend</b>: <%=obj.legend %><br/>
<b>style</b>:<pre> <%=obj.style %></pre><br/>
</div>
</div>
<div class="row-fluid">
<div id="maparea" class="span6" >
<div id="map" style="background-color:white;"></div>
</div>
</div>
</script>
<style type="text/css">
#map {
height: 400px;
margin-top: 15px;
border: 1px solid #DDD;
}
body{ padding-top: 80px;}
.leaflet-control-zoom-fullscreen { background-image: url(../icon-fullscreen.png); }
.leaflet-container:-webkit-full-screen { width: 100% !important; height: 100% !important; }
</style>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="#">Tilecannon</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li ><a href="../">Home</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="container-fluid" id="main"></div>
</body>
<script src='//codeorigin.jquery.com/jquery-1.10.2.min.js' type="text/javascript"></script>
<script src='//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js' type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js" type="text/javascript"></script>
<script type="text/javascript" src="../js/Control.FullScreen.js"></script>
<script type="text/javascript">
var u = document.URL.toUpperCase().split('/');
console.log(u)
var ix = jQuery.inArray('TILESERVER', u) + 1;
console.log(ix);
var layer = document.URL.split('/')[ix];
console.log(layer)
var server = window.location.hostname;
$(window).ready(function () {
$.getJSON('../' + layer + "/tilejson", function (data) {
data.serviceName = layer;
data.server = server;
var template = $('#svcInfo').html();
$('#main').append(_.template(template, data));
initMap(data);
});
});
function initMap(data) {
console.log(data.bounds);
var map = L.map('map').fitBounds([data.bounds.slice(0, 2).reverse(), data.bounds.slice(2, 4).reverse()]);
var fullScreen = new L.Control.FullScreen();
map.addControl(fullScreen);
L.tileLayer('//'+server+'/tileserver/'+layer+'/{z}/{x}/{y}.png',{ maxZoom: data.maxzoom, minZoom: data.minzoom, attribution: '©'+data.attribution }).addTo(map);
if(typeof data.grids != 'undefined') {
var grid1 = L.mapbox.gridLayer('//' + server + '/mbtiles/' + layer + '/tilejson').addTo(map);
g1 = L.mapbox.gridControl(grid1);
map.addControl(g1);
}
}
</script>
</html>