/
index.html
155 lines (104 loc) · 9.22 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
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
152
153
154
155
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
<head>
<title>data</title>
<link rel="stylesheet" href="CloudMade-Leaflet-v0.3.1/dist/leaflet.css" />
<!--[if lte IE 8]>
<link rel="stylesheet" href="http://openIR.media.mit.edu/html_src/CloudMade-Leaflet-v0.3.1/dist/leaflet.ie.css" />
<![endif]-->
<script type="text/javascript" src="CloudMade-Leaflet-v0.3.1/dist/leaflet.js"></script>
<script type="text/javascript">
var map;
var mapMinZoom = 7;
var mapMaxZoom = 12;
function initmap(){
// set up the map
map = new L.Map('map');
// create OSM tile layer with correct attribution
var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
var osmAttrib='Map data © OpenStreetMap contributors';
var osm = new L.TileLayer(osmUrl, {minZoom: 1, maxZoom: 32, attribution: osmAttrib});
// start the map in specified location
map.setView(new L.LatLng(-6.75669240286, 106.14514625),5);
map.addLayer(osm);
// add 321 layer
var layer321URL = '321/{z}/{x}/{y}.png';
var layer321 = new L.TileLayer(layer321URL, {maxZoom: 18, scheme:'tms'});
map.addLayer(layer321);
// add 432 layer
var layer432URL = '432/{z}/{x}/{y}.png';
var layer432 = new L.TileLayer(layer432URL, {maxZoom: 18, scheme:'tms'});
map.addLayer(layer432);
// add 453 layer
var layer453URL = '453/{z}/{x}/{y}.png';
var layer453 = new L.TileLayer(layer453URL, {maxZoom: 18, scheme:'tms'});
map.addLayer(layer453);
// add 543 layer
var layer543URL = '543/{z}/{x}/{y}.png';
var layer543 = new L.TileLayer(layer543URL, {maxZoom: 18, scheme:'tms'});
map.addLayer(layer543);
// add 754 layer
var layer754URL = '754/{z}/{x}/{y}.png';
var layer754 = new L.TileLayer(layer754URL, {maxZoom: 18, scheme:'tms'});
map.addLayer(layer754);
// single band layers
var layer111URL = '111/{z}/{x}/{y}.png';
var layer111 = new L.TileLayer(layer111URL, {maxZoom: 18, scheme:'tms'});
map.addLayer(layer111);
var layer222URL = '222/{z}/{x}/{y}.png';
var layer222 = new L.TileLayer(layer222URL, {maxZoom: 18, scheme:'tms'});
map.addLayer(layer222);
var layer333URL = '333/{z}/{x}/{y}.png';
var layer333 = new L.TileLayer(layer333URL, {maxZoom: 18, scheme:'tms'});
map.addLayer(layer333);
var layer444URL = '444/{z}/{x}/{y}.png';
var layer444 = new L.TileLayer(layer444URL, {maxZoom: 18, scheme:'tms'});
map.addLayer(layer444);
var layer555URL = '555/{z}/{x}/{y}.png';
var layer555 = new L.TileLayer(layer555URL, {maxZoom: 18, scheme:'tms'});
map.addLayer(layer555);
var layer666URL = '666/{z}/{x}/{y}.png';
var layer666 = new L.TileLayer(layer666URL, {maxZoom: 18, scheme:'tms'});
map.addLayer(layer666); //create an object that holds the base layers
var layer777URL = '777/{z}/{x}/{y}.png';
var layer777 = new L.TileLayer(layer777URL, {maxZoom: 18, scheme:'tms'});
map.addLayer(layer777);
var layer888URL = '888/{z}/{x}/{y}.png';
var layer888 = new L.TileLayer(layer888URL, {maxZoom: 18, scheme:'tms'});
map.addLayer(layer888);
var baselayers= {
// "Open Street Maps": osm,
"True Color": layer321,
"Vegetation": layer432,
"Soil": layer453,
"Urban": layer543,
"Water": layer754,
"b1": layer111,
"b2": layer222,
"b3": layer333,
"b4": layer444,
"b5": layer555,
"b6": layer666,
"b7": layer777,
"b8": layer888
};
var overlays = {
"map": osm
};
var layersControl = new L.Control.Layers( baselayers, overlays);
map.addControl(layersControl);
}
// var popup = L.popup();
// function onMapClick(e) {
// popup
// .setLatLng(e.latlng)
// .setContent("You clicked the map at " + e.latlng.toString())
// .openOn(map);
// }
// map.on('click', onMapClick);
</script>
</head>
<body onload="initmap()">
<div id="map" style="height: 1000px"></div>
</body>
</html>