38
40

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Leafletで色々な地図を表示する(1/6)

Last updated at Posted at 2019-05-02

1.Leafletで色々な地図を表示する

 地図を表示するために使われているオープンソース・ソフトウェア・ライブラリのひとつである『Leaflet.js』を使用してオープンストリートマップや他の地図を表示する方法を記載します。  使用する地図によっては、使用条件等がありますので、それぞれの利用規約を参照するようにして下さい。  なお、以下のプログラムは 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」あるいは「http://hal322.html.xdomain.jp/」を参照ください。
また、本記事により作成した「日本の各種名所100選(クリックすると表示されます)」を楽しんでみて下さい。

##1-1、基本地図の表示
 Leaflet を使用して地図を表示する場合には、HTMLとJAVA Scriptによる記述が必要です。  以下に 表示例と基本地図を表示するソースファイル内容を示します。 実際の表示を確認したい方は、こちらをクリックしてください。
Leaflet_Tutrial_101.html.png

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

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部分の説明

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

JAVA Script部分の説明

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

1-2、他の地図の表示

 次に別の地図を表示させてみましょう。 地図の表示例とソースファイルの内容を示します。  HTMLの部分は基本地図の例とほぼ同一で、JAVA Scriptは11行目から13行目の箇所が異なっています。 実際の表示を確認したい方は、こちらをクリックしてください。
Leaflet_Tutrial_102.html.png

ソースファイル内容

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>

 11行目で『 Stamen 』の地図を読み込み12行目で Attribution を13行目で地図の種類を指定しています。  地図の種類については、『Stamenのホームページ』を参照して下さい。

 もうひとつ別の地図を表示させてみましょう。  同様に地図の表示例とソースファイルの内容(異なる箇所は11行目から12行目です)を示します。 実際の表示を確認したい方は、こちらをクリックしてください。
Leaflet_Tutrial_103.html.png
ソースファイル内容

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>

 上記と同様に11行目で『 国土地理院 』の地図を読み込み、地図の種類『std』を指定しています。 また、12行目で Attribution を指定しています。  地図の種類については、『国土地理院地図のホームページ』を参照して下さい。

##1-3、多数の地図を表示選択
 上記地図を含む多数の地図を選択して表示させてみます。  選択可能な地図の表示例とそのソースファイル(追加修正箇所は10行目から67行目です)を示します。  なお、HTML部分の変更はありません。 実際の表示を確認したい方は、こちらをクリックしてください。
 さらに、同じ地図をダイアログ・ボックス内に表示する場合は、こちらをクリックしてください。(ダイアログ・ボックスの表示は、2021年6月現在、「Chrome」、「Edge」、「Opera」等一部のブラウザでのサポートです。)
Leaflet_Tutrial_104.html.png
JAVA Script部の説明
 【10行目から50行目】  地図を登録する部分で、次の10種類の地図を登録してみました。
    (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

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

ソースファイル内容

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 地図サンプル
  ・ 国土地理院 地理院タイル一覧


###Leafletで色々な地図を表示する記事内容
1、Leafletで色々な地図を表示する
2、Overlay表示
3、色々な表示
4、マーカーの表示
5、色々な図形の表示
6、おまけ
追加-1、デバイスの位置を地図上に表示する
追加ー2、写真の撮影地を地図上に表示する

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

38
40
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
38
40

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?