<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>地理院地図 on Leaflet</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script>
<style>
html, body {height:100%; width:100%; padding: 0; margin:0; }
#vmap {height:98%; width:98%; margin:auto;} /* 地図表示要素のスタイルを記述 */
</style>
</head>
<body>
<div id="vmap">ここに地図を表示</div>
<script>
var mymap = L.map('vmap'); // 地図を作成する
mymap.setView([35.192362,139.026346],15); //図中心: 箱根関所, ズームレベル:15
L.control.scale({maxWidth:200,position:'bottomright',imperial:false}).addTo(mymap); // スケールを表示
var marker1 = L.marker([35.189311,139.024623]).addTo(mymap); // マーカを作成
marker1.bindPopup("箱根駅伝<br>goal・start"); // クリック時にポップアップを表示
var marker2 = L.marker([35.196262,139.026013]).addTo(mymap); // マーカを作成
marker2.bindPopup("箱根恩賜公園"); // クリック時にポップアップを表示
var route = L.polyline([ [35.189311,139.024623],[35.189052,139.025025],[35.191502,139.027394],[35.192102,139.026511],[35.192273,139.026372],[35.192358,139.026340],[35.193125,139.026308],[35.193779,139.026731],[35.193893,139.026474],[35.194046,139.026544],[35.194112,139.026367],[35.194198,139.026276],[35.194754,139.025702],[35.195276,139.025837],[35.195386,139.025815],[35.195523,139.025654],[35.195637,139.025412],[35.195913,139.025756],[35.196005,139.025627],[35.196073,139.025627],[35.196358,139.025815],[35.196262,139.026013]],{color:"red",weight:3}).addTo(mymap); // polyline データを追加
//地理院地図の標準地図タイル
var gsi =L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png',
{attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル</a>"}); // 地理院タイルの出典情報のリンク
//地理院地図の写真タイル
var gsiphoto = L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/seamlessphoto/{z}/{x}/{y}.jpg',
{attribution: "<a href='http://portal.cyberjapan.jp/help/termsofuse.html' target='_blank'>地理院タイル</a>"});
//地理院地図の色別標高図
var relief = L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/relief/{z}/{x}/{y}.png',
{attribution: "<a href='http://portal.cyberjapan.jp/help/termsofuse.html' target='_blank'>地理院タイル</a>「海域部は海上保安庁海洋情報部の資料を使用して作成」"});
// オープンストリートマップのタイル
var osm = L.tileLayer('http://tile.openstreetmap.jp/{z}/{x}/{y}.png',
{ attribution: "c<a href='http://osm.org/copyright' target='_blank'>OpenStreetMap</a> contributors" });
var baseMaps = { // base layers オブジェクトとして、baseMaps を設定
"地理院地図" : gsi,
"地理院写真" : gsiphoto,
"色別標高図" : relief,
"O.S.Map" : osm
};
var overlays = { // overlays オブジェクトとして、overlays を設定
"歩走路": route,
"箱根恩賜公園": marker2
};
// layersコントロールに baseMaps と overlays を設定して地図に追加
L.control.layers(baseMaps,overlays).addTo(mymap);
gsi.addTo(mymap); // gsi "地理院地図" をベースレイヤに設定
</script>
</body>
</html>
( 6,7行) leaflet.js をホスティングするため leaflet にリンクを貼ります
(10行目) 地図表示要素のスタイルを記述します
(14行目) <div id="vmap"> で地図表示領域を設定します
(15行～) 表示する地図の詳細を具体的に記述します
(16行目) id='vmap' に表示する地図を変数 mymap に書込む事にします
(17行目) 表示地図の中心地の緯度,経度とズーム値を指定します
(18行目) スケールを地図右下に設置します
(19行目) mymap に marker1 を設置します
(20行目) marker1 をクリックした時のポップアップ表示を記述します
(21,22行) 同様に marker2 を設置します
(23行目) 地図に追記する polyline データを記述し、変数 route とします
(25,26行) 地理院地図の標準地図タイルを利用可能に設定します
(28,29行) 地理院地図の写真タイルを利用可能に設定します
(31,32行) 地理院地図の色別標高図タイルを利用可能に設定します
(34,35行) OpenStreetMap の地図タイルを利用可能に設定します
(36-41行) ベース地図タイルのセレクタ baseMaps を記述します
(42-45行) オーバーレイのセレクタ overlays を記述します
(47行目) セレクタ baseMaps と overlays を mymap に設置します
(48行目) mymap に地理院地図の標準地図タイル gsi を初期設定します
