Leafletで色々な地図を表示する（１／６）

# １．Leafletで色々な地図を表示する
　地図を表示するために使われているオープンソース・ソフトウェア・ライブラリのひとつである[『Leaflet.js』](https://leafletjs.com/)を使用してオープンストリートマップや他の地図を表示する方法を記載します。 　使用する地図によっては、使用条件等がありますので、それぞれの利用規約を参照するようにして下さい。 　なお、以下のプログラムは Windows 10 において次のブラウザで動作を確認しました。
　　　・ Internet Explorer 11 / Ver. 11.379.17763.0
　　　・ Microsoft Edge / Ver. 11.0.17763.379
　　　・ Firefox / Ver. 65.0.2 (64ビット)
　　　・ Google Chrome / Ver. 73.0.3683.86 (64ビット)
　　　・ Safari / Ver. 5.1.7 (7534.57.2) ：一部制限あり
以下のHTML/JavaScriptの動作を確認したい方は、[「https://github.com/To-Fujita/Leaflet.JS_Tutorial」](https://github.com/To-Fujita/Leaflet.JS_Tutorial
)あるいは[「http://hal322.html.xdomain.jp/」](http://hal322.html.xdomain.jp/)を参照ください。  
また、本記事により作成した「[日本の各種名所１００選（クリックすると表示されます）](https://to-fujita.github.io/Leaflet.JS_Tutorial/100_sen/Leaflet_100_sen_Plus.html)」を楽しんでみて下さい。

##１－１、基本地図の表示
　Leaflet を使用して地図を表示する場合には、HTMLとJAVA Scriptによる記述が必要です。 　以下に 表示例と基本地図を表示するソースファイル内容を示します。　実際の表示を確認したい方は、[こちらをクリック](http://hal322.html.xdomain.jp/Leaflet%20Tutorial/Leaflet/Leaflet_Tutrial_101.html)してください。
![Leaflet_Tutrial_101.html.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/408707/ae6683f2-5349-6f60-3fe6-6abf1bdfa032.png)

次にソースファイルの内容を示します。

```php:Leaflet_Tutrial_101.html
<!DOCTYPE html>
<html>
<head>
    <title>Leaflet_Tutrial_101.html	2019/4/26	by T. Fujita</title>
    <meta charset="utf-8" />
    <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>
    <script>
    function init() {
	var map_101 = L.map('map_101').setView([35.65809922, 139.74135747], 8);
	mapLink = '<a href="https://openstreetmap.org">OpenStreetMap</a>';
	    L.tileLayer(
	            'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
	            attribution: 'Map data &copy; ' + mapLink,
	            maxZoom: 18
            }).addTo(map_101);
    }
    </script>
</head>
<body onload="init()">
    <div id="map_101" style="width: 100%; height: 400px; border: solid 1px"></div>
</body>
</html>
```

### HTML部分の説明
　４～５行目でタイトルの記述と使用する文字コード（utf-8）の指定し、 ６行目でLeaflet の標準スタイルシートを読み込んでいます。 なお、帰属表示については標準スタイルシート内で指定されており、表示例の右下にある Attribution をクリックすることで関連するウエブ・サイトが表示されます。
　２１行目で最初に実行する関数『 init() 』の指定と地図表示のID、表示サイズ（横100%×縦400ピクセル）を指定しています。

### JAVA Script部分の説明
　７行目で Leaflet 本体『leaflet@1.4.0』を当該ウェブ・サイトから読み込みます。 　９行目からは、上記HTMLで指定した最初に実行する関数『 init() 』が記述されています。 　『 init() 』では、オープンストリートマップ『 openstreetmap.org 』から地図画像（png形式）を読み込み表示させます。 　なお、地図の中心点の座標は『setView』で緯度（北緯が＋、南緯が－ ）、経度（東経が＋、西経が－ ）の順に指定しています。

## １－２、他の地図の表示
　次に別の地図を表示させてみましょう。　地図の表示例とソースファイルの内容を示します。 　HTMLの部分は基本地図の例とほぼ同一で、JAVA Scriptは１１行目から１３行目の箇所が異なっています。　実際の表示を確認したい方は、[こちらをクリック](http://hal322.html.xdomain.jp/Leaflet%20Tutorial/Leaflet/Leaflet_Tutrial_102.html)してください。
![Leaflet_Tutrial_102.html.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/408707/52497dee-6e22-d415-b1ce-b94b80ce64df.png)

ソースファイル内容

```php:Leaflet_Tutrial_102.html
<!DOCTYPE html>
<html>
<head>
    <title>Leaflet_Tutrial_102.html	2019/4/26	by T. Fujita</title>
    <meta charset="utf-8" />
    <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>
    <script>
    function init() {
	var map_102 = L.map('map_102').setView([35.65809922, 139.74135747], 8);
	L.tileLayer('http://{s}.tile.stamen.com/{variant}/{z}/{x}/{y}.png', {
		attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>',
		variant: 'toner-lite'
	}).addTo(map_102);
    }
    </script>
</head>
<body onload="init()">
    <div id="map_102" style="width: 100%; height: 400px; border: solid 1px"></div>
</body>
</html>
```

　１１行目で『 Stamen 』の地図を読み込み１２行目で Attribution を１３行目で地図の種類を指定しています。 　地図の種類については、[『Stamenのホームページ』](http://maps.stamen.com/#terrain/12/37.7706/-122.3782)を参照して下さい。

　もうひとつ別の地図を表示させてみましょう。 　同様に地図の表示例とソースファイルの内容（異なる箇所は１１行目から１２行目です）を示します。　実際の表示を確認したい方は、[こちらをクリック](http://hal322.html.xdomain.jp/Leaflet%20Tutorial/Leaflet/Leaflet_Tutrial_103.html)してください。
![Leaflet_Tutrial_103.html.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/408707/4bc74a0b-45cd-16be-ffab-3365b6e584fb.png)
ソースファイル内容

```php:Leaflet_Tutrial_103.html
<!DOCTYPE html>
<html>
<head>
    <title>Leaflet_Tutrial_103.html	2019/4/26	by T. Fujita</title>
    <meta charset = "utf-8" />
    <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>
    <script>
    function init() {
        var map_103 = L.map('map_103').setView([35.65809922, 139.74135747], 8);
	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>"
	}).addTo(map_103);
    }
    </script>
</head>
<body onload="init()">
    <div id="map_103" style="width: 100%; height: 400px; border: solid 1px"></div>
    出典は、<A HREF = "https://maps.gsi.go.jp/development/ichiran.html" target="_blank">「国土地理院」</A>です。
</body>
</html>
```

　上記と同様に１１行目で[『 国土地理院 』](http://www.gsi.go.jp/)の地図を読み込み、地図の種類『std』を指定しています。　また、１２行目で Attribution を指定しています。 　地図の種類については、[『国土地理院地図のホームページ』](https://maps.gsi.go.jp/development/ichiran.html)を参照して下さい。 

##１－３、多数の地図を表示選択
　上記地図を含む多数の地図を選択して表示させてみます。 　選択可能な地図の表示例とそのソースファイル（追加修正箇所は１０行目から６７行目です）を示します。 　なお、HTML部分の変更はありません。　実際の表示を確認したい方は、[こちらをクリック](http://hal322.html.xdomain.jp/Leaflet%20Tutorial/Leaflet/Leaflet_Tutrial_104.html)してください。
　さらに、同じ地図をダイアログ・ボックス内に表示する場合は、[こちらをクリック](https://to-fujita.github.io/Dialog_Boxes_for_HTML/JP_Dialog_020.html)してください。（ダイアログ・ボックスの表示は、2021年6月現在、「Chrome」、「Edge」、「Opera」等一部のブラウザでのサポートです。）
![Leaflet_Tutrial_104.html.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/408707/f890fc3c-0697-fdd2-b8fc-680b02a316a1.png)
JAVA Script部の説明
　【１０行目から５０行目】 　地図を登録する部分で、次の１０種類の地図を登録してみました。
　　　　(1) OpenStreetMap
　　　　(2) 国土地理院（標準地図）
　　　　(3) 国土地理院（淡色地図）
　　　　(4) 国土地理院（写真）
　　　　(5) 国土地理院（白地図）
　　　　(6) Stamen地図（toner）
　　　　(7) Stamen地図（toner-lite）
　　　　(8) Stamen地図（watercolor）
　　　　(9) ESRI World Topo Map
　　　　(10)ESRI Ocean Basemap

　【５５行目から６７行目】 　登録された地図を選択表示する部分です。

ソースファイル内容

```php:Leaflet_Tutrial_104.html
<!DOCTYPE html>
<html>
<head>
    <title>Leaflet_Tutrial_104.html	2019/4/26	by T. Fujita</title>
    <meta charset = "utf-8" />
    <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>
<script>
    function init() {
	var Basic_Map = new Array();
	Basic_Map[ 0 ] = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
		attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
		continuousWorld: false
	});
	Basic_Map[ 1 ] = 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>"
	});
	Basic_Map[ 2 ] = L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png', {
		attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル</a>"
	});
	Basic_Map[ 3 ] = L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/seamlessphoto/{z}/{x}/{y}.jpg', {
		attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル</a>"
	});
	Basic_Map[ 4 ] = L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/blank/{z}/{x}/{y}.png', {
		attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル</a>"
	});
	Basic_Map[ 5 ] = L.tileLayer('http://{s}.tile.stamen.com/{variant}/{z}/{x}/{y}.png', {
		attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, ',
		variant: 'toner-background'
	});
	Basic_Map[ 6 ] = L.tileLayer('http://{s}.tile.stamen.com/{variant}/{z}/{x}/{y}.png', {
		attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, ',
		variant: 'toner-lite'
	});
	Basic_Map[ 7 ] = L.tileLayer('http://{s}.tile.stamen.com/{variant}/{z}/{x}/{y}.png', {
		minZoom: 1,
		maxZoom: 16,
		attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, ',
		variant: 'watercolor'
	});
	Basic_Map[ 8 ] = L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}', {
		attribution: 'Tiles &copy; <a href="http://www.esrij.com/"> Esri Japan </a>'
	});
	Basic_Map[ 9 ] = L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer/tile/{z}/{y}/{x}', {
		maxZoom: 13,
		attribution: 'Tiles by <a href="http://www.esrij.com/"> Esri Japan </a>'
	});

        var map_104 = L.map('map_104').setView([35.65809922, 139.74135747], 8);
        map_104.addLayer( Basic_Map[ 0 ] );

	var baseMap = {
		"OpenStreetMap": Basic_Map[ 0 ],
		"国土地理院 標準地図": Basic_Map[ 1 ],
		"国土地理院 淡色地図": Basic_Map[ 2 ],
		"国土地理院 写真": Basic_Map[ 3 ],
		"国土地理院 白地図": Basic_Map[ 4 ],
		"Stamen Toner-Background": Basic_Map[ 5 ],
		"Stamen Toner-Lite": Basic_Map[ 6 ],
		"Stamen Watercolor": Basic_Map[ 7 ],
		"Esri World Topo Map": Basic_Map[ 8 ],
		"Esri Ocean Base Map": Basic_Map[ 9 ],
	};
	L.control.layers(baseMap).addTo(map_104);

    }
</script>
</head>
<body onload="init()">
    <div id="map_104" style="width: 100%; height: 400px; border: solid 1px"></div>
</body>
</html>
```

　この他のLeafletで使用できる地図サンプルについては、次のURLを参照下さい。
　　・ [Leaflet 地図サンプル](https://leaflet-extras.github.io/leaflet-providers/preview/)
　　・ [国土地理院 地理院タイル一覧](https://maps.gsi.go.jp/development/ichiran.html)
***
###Leafletで色々な地図を表示する記事内容
１、Leafletで色々な地図を表示する
[２、Overlay表示](https://qiita.com/halboujp/items/e0187237c6bc75f48327)
[３、色々な表示](https://qiita.com/halboujp/items/32c7eac2788578a2aa2b)
[４、マーカーの表示](https://qiita.com/halboujp/items/bea67da3a403747bda83)
[５、色々な図形の表示](https://qiita.com/halboujp/items/09f02cbd93f2b846ef35)
[６、おまけ](https://qiita.com/halboujp/items/d1b289090964a82fe942)
[追加－１、デバイスの位置を地図上に表示する](https://qiita.com/halboujp/items/e53e6cf52a78f22f4fa8)
[追加ー２、写真の撮影地を地図上に表示する](https://qiita.com/halboujp/items/c2cdb304e74f514d372d)

ここに記載したHTML/JavaScriptの動作を確認したい方は、[「https://github.com/To-Fujita/Leaflet.JS_Tutorial」](https://github.com/To-Fujita/Leaflet.JS_Tutorial) あるいは[「http://hal322.html.xdomain.jp/」](http://hal322.html.xdomain.jp/)を参照ください。