-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
170 lines (129 loc) · 5.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
156
157
158
159
160
161
162
163
164
165
166
167
168
169
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Leafletサンプル</title>
<!-- ＰＣ・スマホでサイズが同じ -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Leaflet読込み -->
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<!-- スタイル設定 -->
<style>
body {padding: 0; margin: 0}
html, body, #map {height: 100%; width: 100%;}
</style>
<!-- JavaScript -->
<script>
// 背景タイル設定
// 地理院タイル（標準地図）：変数『std』に格納
var std = L.tileLayer('http://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
attribution: "<a href='http://www.gsi.go.jp/kikakuchousei/kikakuchousei40182.html' target='_blank'>国土地理院</a>",
maxZoom: 23,
maxNativeZoom: 18,
opacity: 1.0
})
// 地理院タイル（淡色地図）：変数『pale』に格納
var pale = L.tileLayer('http://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png', {
attribution: "<a href='http://www.gsi.go.jp/kikakuchousei/kikakuchousei40182.html' target='_blank'>国土地理院</a>",
maxZoom: 23,
maxNativeZoom: 18,
opacity: 1.0
})
// 空中写真タイル設定（オーバーレイ）
// 地理院タイル（国土画像情報（第一期：1974～1978年撮影））：変数『gazo1』に格納
var gazo1 = L.tileLayer('http://cyberjapandata.gsi.go.jp/xyz/gazo1/{z}/{x}/{y}.jpg', {
attribution: "<a href='http://www.gsi.go.jp/kikakuchousei/kikakuchousei40182.html' target='_blank'>国土地理院</a>",
maxZoom: 23,
maxNativeZoom: 17,
opacity: 1.0
})
// 地理院タイル（国土画像情報（第二期：1979～1983年撮影））：変数『gazo2』に格納
var gazo2 = L.tileLayer('http://cyberjapandata.gsi.go.jp/xyz/gazo2/{z}/{x}/{y}.jpg', {
attribution: "<a href='http://www.gsi.go.jp/kikakuchousei/kikakuchousei40182.html' target='_blank'>国土地理院</a>",
maxZoom: 23,
maxNativeZoom: 17,
opacity: 1.0
})
// 地理院タイル（国土画像情報（第三期：1984～1986年撮影））：変数『gazo3』に格納
var gazo3 = L.tileLayer('http://cyberjapandata.gsi.go.jp/xyz/gazo3/{z}/{x}/{y}.jpg', {
attribution: "<a href='http://www.gsi.go.jp/kikakuchousei/kikakuchousei40182.html' target='_blank'>国土地理院</a>",
maxZoom: 23,
maxNativeZoom: 17,
opacity: 1.0
})
// 地理院タイル（国土画像情報（第四期：1988～1990年撮影））：変数『gazo4』に格納
var gazo4 = L.tileLayer('http://cyberjapandata.gsi.go.jp/xyz/gazo4/{z}/{x}/{y}.jpg', {
attribution: "<a href='http://www.gsi.go.jp/kikakuchousei/kikakuchousei40182.html' target='_blank'>国土地理院</a>",
maxZoom: 23,
maxNativeZoom: 17,
opacity: 1.0
})
// 地理院タイル（簡易空中写真（2004年～））：変数『airphoto』に格納
var airphoto = L.tileLayer('http://cyberjapandata.gsi.go.jp/xyz/airphoto/{z}/{x}/{y}.jpg', {
attribution: "<a href='http://www.gsi.go.jp/kikakuchousei/kikakuchousei40182.html' target='_blank'>国土地理院</a>",
maxZoom: 23,
maxNativeZoom: 18,
opacity: 1.0
})
// 地理院タイル（電子国土基本図（オルソ画像））：変数『ort』に格納
var ort = L.tileLayer('http://cyberjapandata.gsi.go.jp/xyz/ort/{z}/{x}/{y}.jpg', {
attribution: "<a href='http://www.gsi.go.jp/kikakuchousei/kikakuchousei40182.html' target='_blank'>国土地理院</a>",
maxZoom: 23,
maxNativeZoom: 17,
opacity: 1.0
})
//背景レイヤグループ設定（ベースマップ）
var baseMaps_GSI = {
"標準地図" : std,
"淡色地図" : pale
};
// 空中写真レイヤグループ設定（オーバーレイマップ）
var overlayMaps_GSI = {
"国土画像情報（1974～1978年）" : gazo1,
"国土画像情報（1979～1983年）" : gazo2,
"国土画像情報（1984～1986年）" : gazo3,
"国土画像情報（1988～1990年）" : gazo4,
"簡易空中写真（2004年～）" : airphoto,
"空中写真（2007年～）" : ort
};
// マーカー設定
// 東京ドーム
var Marker01 = L.marker([35.70570, 139.75186]);
Marker01.bindPopup('<b><a href="http://www.tokyo-dome.co.jp/" target="_blank">東京ドーム</a></b>');
//日本土地家屋調査士会連合会
var Marker02 = L.marker([35.70104, 139.75664]);
Marker02.bindPopup('<b><a href="http://www.chosashi.or.jp/" target="_blank">日本土地家屋調査士会連合会</a></b>');
</script>
</head>
<body>
<!-- マップエリア配置 -->
<div id="map">
<!-- マップ情報 -->
<script>
//マップ設定（おまじない）
var map = L.map('map',{
maxZoom : 23
});
//レイヤコントロール設定（ベースマップ、オーバーレイマップ）
var myLayerControl = L.control.layers(baseMaps_GSI, overlayMaps_GSI);
//スケールバー設定
var myScalebar = L.control.scale({
position : 'bottomleft',
metric : true ,
imperial : false
});
// マップ表示位置設定（緯度、経度、ズームレベル）
map.setView([35.70570, 139.75186], 17);
// 地理院タイル（標準地図）追加
std.addTo(map);
// レイヤコントロール追加
myLayerControl.addTo(map);
// スケールバー追加
myScalebar.addTo(map);
// マーカー追加
Marker01.addTo(map); //東京ドーム
Marker02.addTo(map); //日調連
</script>
</body>
</html>