[Leaflet.js] Leafletで地図をつくる

Excelデータを地理院地図上に表示するWebGISを実現することを目的として、地理院タイルをブラウザに表示させることのできるライブラリ’Leaflet’の使い方を整理していきます。まずは基本的な地図のつくり方です。
元ネタ:Leaflet.js Essentials – 1.Creating Maps with Leaflet

Leafletで簡単な地図をつくるには

以下の4点が必要となります。

  • ライブラリ(JavascriptとCSS)を参照する
  • 地図を表示するdiv要素を用意する
  • Mapオブジェクトをつくる
  • タイルレイヤを追加する

地図の細かい部分を作っていく前に、HTMLのセットアップを行います。

ライブラリ(JavascriptとCSS)を参照する

2種類の方法があり、ホストされたファイルにリンクするか、ダウンロードして自分のローカル環境かサーバーにコピーしたものへリンクすることができます。

ホストされたファイルを使う場合

cdn.leafletjs.comにホストされているファイルへの参照を記述します。
先ほどセットアップしたファイルのtitleタグの下に以下を追加します。

スクリプトの配置についてですが、Leaflet.js Essentialsではbodyタグの下と書いてありますが、本家サイトではheadの中とありますので、どちらでも良いと思います。

ローカルのコピーを使う場合

本家サイトのダウンロードページhttp://leafletjs.com/download.htmlから、Stable versionと書かれた安定版のバージョンをダウンロード・解凍し、適切な位置に配置して、そこへのリンクを記述します。

地図を表示するdiv要素を用意する

地図を配置する場所が必要ですので、bodyタグの中(上記のスクリプトをbodyタグの下に記述した場合は、その下)に配置します。このときスタイルで幅・高さを指定することもできます。後でオブジェクトを追加するため、div要素にはIDも付けておきます。

Mapオブジェクトをつくる

ライブラリ参照と地図の場所を用意したので、つぎは地図をの実体をつくります。
まずMapオブジェクトをつくります。Mapクラスには表示するdivのIDとオプションを設定します。
以降では、上記のdivタグの下にscriptタグを用意し、その中に書いていきます。

オプションでは地図を最初に表示する中心座標(center)やズームレベル(zoom)を設定します。

centerオプションは[緯度,経度], zoomオプションは整数(大きい方が詳細図)で指定します。

またはsetViewメソッドを使いオプションをパラメータとして短く書くこともできます。

Leafletライブラリを用いる場合、クラスからインスタンスを生成するときに、次のようなNewキーワードを付けなくても良いとのことです。

タイルレイヤを追加する

地図の場所、表示方法を指定したので、最後に表示させたい地図のタイルレイヤをベースレイヤとして追加します。Leafletで表示させる地図はタイルサーバーによって提供されており、地図を256×256ピクセルのイメージに分割して保持されており、場所とズームレベルによって, ‘z/x/y.png’ のURLでリクエストすると表示領域のタイルだけがロードされます。パンやズームを行い地図表示範囲を変更すると、必要なタイルが逐次ロードされていきます。

OpenStreetMap(OSM)タイルを指定する場合は以下のようにURLを指定し、addToメソッドでオブジェクトに指定します。

地理院地図の場合、どのタイルを使うか、こちらのページから選びます。
標準地図の場合は以下のようになります。

タイルのアドレスの次に書かれたattributionは地理院タイルの著作権表示です。

地理院地図を表示

以上のコード全体は以下の通りです。
Leaflet.js Essentialsには書いてありませんが、地理院地図の著作権表示(日本語)の文字化け対策としてcharset=”UTF-8″の指定が必要です。

これを実行すると以下のように指定の中心座標・ズームレベルで地理院地図が表示されます。

新しいウィンドウで開く

関連記事