[[:programming_start]] ====== Leaflet - OpenStreetMap表示 ====== Leaflet v1系を使用してOpenStreetMapを表示します。注意：「Leaflet勉強のための試作プログラムなので間違っている可能性があります」「DokuWikiは個別にヘッダを編集できないので通常とは少し違う構造になっています」 ---- ===== デモ ===== 東京を中心とした地図が表示されます。

---- ===== ソースコード =====

---- ===== DokuWiki用の特殊設定 ===== DokuWikiで表示するために一般とは少し異なる点が2つあります。「3番」のLeaflet用のCSS読込本来CSSはHEAD内でロードすべきですが、DokuWikiではページ別にヘッダを編集できないためJavaScriptでBODY中で取得しています。通常のウェブサイトで使用する場合は下記のコード3番のかわりにヘッダ内に記述します。

「5番」ページがロードされてからマップを処理を開始 CSSを後読みしているため、何もせずマップ作成するとCSSが適用される前にマップが出来てしまうため表示が崩れます。表示が崩れないようページやCSSがロードされた後にマップの処理開始するようにしています。通常なら ''window.onload = function() { 処理 }'' でも良いのですが、他にwindow.onloadがあると衝突するので衝突回避用の ''addOnload''という関数を作って ''addOnload(function(){ 処理 });''で代用させています。 ---- ===== 説明 ===== (1)マップを表示したい場所に下記のHTMLタグを挿入します。id名をキーとしてマップが表示されます

(2)Leafletを読み込みます。 (3)Leaflet用のCSS読込(上記参照) (4)マップ用インスタンス変数をグローバル変数とします。現時点ではグローバル変数にする意味はありませんがグローバル化しておくとHTMLや外部関数からマップを操作したりマップの状態を取得する事ができるのでカスタマイズする時に役立ちます。


var mymap;

(5)window.onload ページがロードされてからマップを処理します(上記参照) (6)マップオブジェクトをインスタンス化、1番のdiv要素のidと関連付けしてmymapという名前でマップを制御します。


mymap = L.map('mapid');
//変数 = L.map(マップ用DIVのid名);

(7)タイルサーバーの設定と著作権表示 Leaflet自身は地図データを持っていないので地図画像を入手できるタイルサーバーが必要です。ここで使用しているタイルサーバーは[[https://www.openstreetmap.org/|OpenStreetMap]]ですが利用条件がありますので使用する場合は確認して下さい。リクエスト回数が多くなる場合などはサードパーティーのタイルサーバーを探すか自分自身でタイルサーバーを準備する必要があります。


  //OpenStreetMapの場合は下記ような設定と著作権表示になります
  L.tileLayer('https://c.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 18,
    attribution: 'Map data © OpenStreetMap contributors, '
  }).addTo(mymap);

(8)マップにスケールバーと追加します。スケールバーが不要な場合は削除して下さい、


L.control.scale({imperial:false}).addTo(mymap);
//L.control.scale({mertric:false}).addTo(mymap); とするとマイル表示になります
//L.control.scale().addTo(mymap);とするとマイルとメートルの両方出ます

(9)地図の中心座標と倍率をセットすると地図が表示されます。


mymap.setView([35.6896, 139.6918], 8);
//mymap.setView([ 緯度,経度 ], ズーム);