Leaflet Tutrial Page 01

オープンソースによる地図表示（Leaflet編）１／９

2019/4/26 by T. Fujita

　皆さんは、インターネット上の地図は何を利用しているでしょうか？　 GoogleマップやYahoo地図、 MapFan等があり、これらが地図検索サービスとして有能で便利であるのは疑いのない事実です。　しかし、地図上にマーカーや線・図形等を追加しカスタマイズしようとした場合、登録や商業上の契約が必要になってくることはご存知だと思います。
　他の地図検索サービスの中で昨今注目を集めているものに第三者が自由に利用できる無収益型のサービスである「OpenStreetMap(オープンストリートマップ)」等があります。　また、これらの地図を表示するために使われているオープンソース・ソフトウェア・ライブラリとしては、次のようなものがあります。
　　　・ Leaflet
　　　・ OpenLayers
　　　・ Cesium

　ここでは『Leaflet』を使用してオープンストリートマップや他の地図を表示する方法を記載します。　使用する地図によっては、使用条件等がありますので、それぞれの利用規約を参照するようにして下さい。　なお、以下のプログラムは 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)

１、Leafletによる地図表示

１－１、基本地図の表示

　Leaflet を使用して地図を表示する場合には、HTMLとJAVA Scriptによる記述が必要です。　以下に表示例と基本地図を表示するソースファイルの内容を示します。単独で基本地図を表示する場合は、『 Leaflet_Tutrial_101.html 』をクリックして下さい。

　　　　　　　基本地図の表示例

　次にソースファイルの内容を示します。　ここでは、地図を表示する部分を紫及び赤字で記載しています。

　　　　　　　『Leaflet_Tutrial_101.html』のソースファイル内容

001  <!DOCTYPE html>
002  <html>
003  <head>
004      <title> Leaflet_Tutrial_101.html	2019/4/26	by T. Fujita </title>
005      <meta charset="utf-8" />
006      <link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" /> 
007      <script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"> </script> 
008      <script>
009      function init() { 
010         var map_101 = L.map('map_101').setView([35.65809922, 139.74135747], 8); 
011         mapLink = '<a href="https://openstreetmap.org">OpenStreetMap</a>'; 
012         L.tileLayer( 
013  	            'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { 
014  	            attribution: 'Map data © ' + mapLink, 
015  	            maxZoom: 18 
016         }).addTo(map_101); 
017      } 
018      </script>
019  </head>
020  <body onload="init()">
021      <div id="map_101" style="width: 100%; height: 400px"></div> 
022  </body>
023  </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は赤字の箇所が異なっています。　単独で地図を表示する場合は、『 Leaflet_Tutrial_102.html 』をクリックして下さい。

　　　　　　　他の地図（Stamen）の表示例

　　　　　　　『Leaflet_Tutrial_102.html』のソースファイル内容

001  <!DOCTYPE html>
002  <html>
003  <head>
004  <title> Leaflet_Tutrial_102.html	2019/4/26	by T. Fujita </title>
005  <meta charset = "utf-8" />
006  <link rel = "stylesheet" href = "https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" />
007  <script src = "https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script>
008  <script>
009  function init() {
010      var map_102 = L.map('map_102').setView([35.65809922, 139.74135747], 8);
011      L.tileLayer('http://{s}.tile.stamen.com/{variant}/{z}/{x}/{y}.png', { 
012          attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>', 
013          variant: 'toner-lite' 
014      }).addTo(map_102);
015  }
016  </script>
017  </head>
018  <body onload="init()">
019      <div id="map_101" style="width: 100%; height: 400px"></div>
020  </body>
021  </html>

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

　もうひとつ別の地図を表示させてみましょう。　同様に地図の表示例とソースファイルの内容（異なる箇所は赤字で表示）を示します。　単独で地図を表示する場合は、『 Leaflet_Tutrial_103.html 』をクリックして下さい。

　　　　　　　別の地図（国土地理院地図）の表示例

　出典は、「国土地理院」です。

　　　　　　　『Leaflet_Tutrial_103.html』のソースファイル内容

001  <!DOCTYPE html>
002  <html>
003  <head>
004      <title> Leaflet_Tutrial_103.html	2019/4/26	by T. Fujita </title>
005      <meta charset = "utf-8" />
006      <link rel = "stylesheet" href = "https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" />
007      <script src = "https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script>
008      <script>
009      function init() {
010          var map_103 = L.map('map_103').setView([35.65809922, 139.74135747], 8);
011          L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', { 
012              attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>>地理院タイル</a>" 
013          }).addTo(map_103);
014      }
015      </script>
016  </head>
017  <body onload="init()">
018      <div id="map_103" style="width: 100%; height: 400px; border: solid 1px"></div>
019      出典は、<A HREF = "https://maps.gsi.go.jp/development/ichiran.html" target="_blank">「国土地理院」</A>です。
020  </body>
021  </html>

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

　１－３、多数の地図を表示選択

　上記地図を含む多数の地図を選択して表示させてみましょう。　選択可能な地図の表示例とそのJAVA Scriptのソースファイル（追加修正箇所は赤字とオレンジ色で表示）を示します。　なお、HTML部分の変更はありません。　単独で地図を表示する場合は、『 Leaflet_Tutrial_104.html 』をクリックして下さい。

　　　　　　　多数の地図を表示選択の表示例（右上部で地図を選択）

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

　【オレンジ色の部分】　登録された地図を選択表示する部分です。

　　　　　　　『Leaflet_Tutrial_104.html』のソースファイル内容

001  <!DOCTYPE html>
002  <html>
003  <head>
004      <title> Leaflet_Tutrial_104.html	2019/4/26	by T. Fujita </title>
005      <meta charset = "utf-8" />
006      <link rel = "stylesheet" href = "https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" />
007      <script src = "https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"> </script>
008      <script>
009      function init() {
010          var Basic_Map = new Array(); 
011          Basic_Map[ 0 ] = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { 
012          attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> 
013              contributors', 
014              continuousWorld: false 
015          }); 
016          Basic_Map[ 1 ] = L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', { 
017              attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル</a>" 
018          }); 
019          Basic_Map[ 2 ] = L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png', { 
020              attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル</a>" 
021          }); 
022          Basic_Map[ 3 ] = L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/seamlessphoto/{z}/{x}/{y}.jpg', { 
023              attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル</a>" 
024          }); 
025          Basic_Map[ 4 ] = L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/blank/{z}/{x}/{y}.png', { 
026              attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル</a>" 
027          }); 
028          Basic_Map[ 5 ] = L.tileLayer('http://{s}.tile.stamen.com/{variant}/{z}/{x}/{y}.png', { 
029              attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, ', 
030              variant: 'toner-background' 
031          }); 
032          Basic_Map[ 6 ] = L.tileLayer('http://{s}.tile.stamen.com/{variant}/{z}/{x}/{y}.png', { 
033              attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, ', 
034              variant: 'toner-lite' 
035          }); 
036          Basic_Map[ 7 ] = L.tileLayer('http://{s}.tile.stamen.com/{variant}/{z}/{x}/{y}.png', { 
037              minZoom: 1, 
038              maxZoom: 16, 
039              attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, ', 
040              variant: 'watercolor' 
041          }); 
042          Basic_Map[ 8 ] = L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/ 
043              World_Topo_Map/MapServer/tile/{z}/{y}/{x}', { 
044              attribution: 'Tiles © <a href="http://www.esrij.com/"> Esri Japan </a>' 
045          }); 
046          Basic_Map[ 9 ] = L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/ 
047              Ocean_Basemap/MapServer/tile/{z}/{y}/{x}', { 
048              maxZoom: 13, 
049              attribution: 'Tiles by <a href="http://www.esrij.com/"> Esri Japan </a>' 
050          }); 
051
052           var map_004 = L.map('map_104').setView([35.65809922, 139.74135747], 8);
053           map_104.addLayer( Basic_Map[ 0 ] );
054
055           var baseMap = { 
056               "OpenStreetMap": Basic_Map[ 0 ], 
057               "国土地理院 標準地図": Basic_Map[ 1 ], 
058               "国土地理院 淡色地図": Basic_Map[ 2 ], 
059               "国土地理院 写真": Basic_Map[ 3 ], 
060               "国土地理院 白地図": Basic_Map[ 4 ], 
061               "Stamen Toner-Background": Basic_Map[ 5 ], 
062               "Stamen Toner-Lite": Basic_Map[ 6 ], 
063               "Stamen Watercolor": Basic_Map[ 7 ], 
064               "Esri World Topo Map": Basic_Map[ 8 ], 
065               "Esri Ocean Base Map": Basic_Map[ 9 ], 
066           }; 
067           L.control.layers(baseMap).addTo(map_104); 
068
069      }
070      </script>
071  </head>
072  <body onload="init()">
073      <div id="map_104" style="width: 100%; height: 400px; border: solid 1px"></div>
074  </body>
075  </html>

　この他のLeafletで使用できる地図サンプルについては、次のURLを参照下さい。

　　・ Leaflet 地図サンプル
　　・国土地理院地理院タイル一覧

Go to Menu Next Page

オープンソースによる地図表示（Leaflet編）１／９

１、Leafletによる地図表示

１－１、基本地図の表示

HTML部分の説明

JAVA Script部分の説明（赤字部分）

１－２、他の地図の表示

１－３、多数の地図を表示選択

JAVA Script部の説明

- 1 -

　１－３、多数の地図を表示選択