Leaflet - OpenStreetMap表示

Leaflet v1系を使用してOpenStreetMapを表示します。

注意：「Leaflet勉強のための試作プログラムなので間違っている可能性があります」「DokuWikiは個別にヘッダを編集できないので通常とは少し違う構造になっています」

デモ

東京を中心とした地図が表示されます。

ソースコード

<!-- 1.マップを表示するための空のDIV要素 -->
<div id="mapid" style="width: 100%; height: 400px;"></div>
 
<!-- 2.leafletのライブラリを読み込み -->
<script src="https://【自分のサーバーアドレスとパス】/leaflet/v1/leaflet.js"></script>
 
<!-- 3.leflet用のcssを読み込む -->
<script>
  function cssLoad(cssFile){
    if(document.all){
      document.createStyleSheet(cssFile);
    }else{
      var link = document.createElement("link");
      link.rel = "stylesheet";
      link.href = cssFile;
      link.type = "text/css"
      document.getElementsByTagName('head')[0].appendChild(link);
    }
  }
  cssLoad("https://【自分のサーバーアドレスとパス】/leaflet/v1/leaflet.css");
 
  var mymap; //4.マップ用インスタンス変数(グローバル変数)
 
  //5.ページがロードされてからマップを処理を開始(window.onload代用)
  function addOnload(evtFunc){
    if(window.addEventListener) {
      window.addEventListener('load', evtFunc, false);
    } else if(window.attachEvent){ //IE用
      window.attachEvent('onload', evtFunc);
    } else {
      //alert('window.onload エラー');
    }
  }
 
  addOnload(function(){
 
    //6.マップオブジェクトをインスタンス化
    mymap = L.map('mapid');
 
    //7.タイルサーバーの設定と著作権表示
    L.tileLayer('https://【タイルサーバーのアドレスとパス】/{z}/{x}/{y}.png', {
      maxZoom: 18,
      attribution: 'Map data &copy; <a href="【タイルサーバーの著作権アドレス】" target="_blank">【タイルサーバーの著作者】</a> contributors, '
    }).addTo(mymap);
 
    //8.マップにスケールバー追加
    L.control.scale({imperial:false}).addTo(mymap);
 
    //9.マップの座標をズームをセットして表示
    mymap.setView([35.6896, 139.6918], 8);
  });
</script>

DokuWiki用の特殊設定

DokuWikiで表示するために一般とは少し異なる点が2つあります。

「3番」のLeaflet用のCSS読込

本来CSSはHEAD内でロードすべきですが、DokuWikiではページ別にヘッダを編集できないためJavaScriptでBODY中で取得しています。通常のウェブサイトで使用する場合は下記のコード3番のかわりにヘッダ内に記述します。

<link rel="stylesheet" type="text/css" href="http://【自分のサーバーアドレスとパス】leaflet/v1/leaflet.css">

「5番」ページがロードされてからマップを処理を開始

CSSを後読みしているため、何もせずマップ作成するとCSSが適用される前にマップが出来てしまうため表示が崩れます。表示が崩れないようページやCSSがロードされた後にマップの処理開始するようにしています。通常なら window.onload = function() { 処理 } でも良いのですが、他にwindow.onloadがあると衝突するので衝突回避用の addOnloadという関数を作って addOnload(function(){ 処理 });で代用させています。

説明

(1)マップを表示したい場所に下記のHTMLタグを挿入します。id名をキーとしてマップが表示されます

<div id="mapid" style="width: 100%; height: 400px;"></div>

(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自身は地図データを持っていないので地図画像を入手できるタイルサーバーが必要です。ここで使用しているタイルサーバーはOpenStreetMapですが利用条件がありますので使用する場合は確認して下さい。リクエスト回数が多くなる場合などはサードパーティーのタイルサーバーを探すか自分自身でタイルサーバーを準備する必要があります。

  //OpenStreetMapの場合は下記ような設定と著作権表示になります
  L.tileLayer('https://c.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 18,
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a> 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([ 緯度,経度 ], ズーム);

目次

Leaflet - OpenStreetMap表示

デモ

ソースコード

DokuWiki用の特殊設定

説明