Excelデータを地理院地図上に表示するWebGISを実現することを目的として、地理院タイルをブラウザに表示させることのできるライブラリ’Leaflet’の使い方を整理していきます。まずは基本的な地図のつくり方です。
元ネタ：Leaflet.js Essentials
目次
Leafletで簡単な地図をつくるには
以下の4点が必要となります。
- ライブラリ（JavascriptとCSS）を参照する
- 地図を表示するdiv要素を用意する
- Mapオブジェクトをつくる
- タイルレイヤを追加する
地図の細かい部分を作っていく前に、HTMLのセットアップを行います。
|
1 2 3 4 5 6 |
<!DOCTYPE html><html> <head><title>Leaflet Essential</title> </head> <body> </body> </html> |
ライブラリ（JavascriptとCSS）を参照する
2種類の方法があり、ホストされたファイルにリンクするか、ダウンロードして自分のローカル環境かサーバーにコピーしたものへリンクすることができます。
ホストされたファイルを使う場合
cdn.leafletjs.comにホストされているファイルへの参照を記述します。
先ほどセットアップしたファイルのtitleタグの下に以下を追加します。
|
1 |
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" /> |
スクリプトの配置についてですが、Leaflet.js Essentials
|
1 |
<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script> |
ローカルのコピーを使う場合
本家サイトのダウンロードページhttp://leafletjs.com/download.htmlから、Stable versionと書かれた安定版のバージョンをダウンロード・解凍し、適切な位置に配置して、そこへのリンクを記述します。
|
1 2 |
<link rel="stylesheet" href="コピーした場所/leaflet.css" /> <script src="コピーした場所/leaflet.js"></script> |
地図を表示するdiv要素を用意する
地図を配置する場所が必要ですので、bodyタグの中（上記のスクリプトをbodyタグの下に記述した場合は、その下）に配置します。このときスタイルで幅・高さを指定することもできます。後でオブジェクトを追加するため、div要素にはIDも付けておきます。
|
1 |
<div id="map" style="width: 500px; height: 500px"></div> |
Mapオブジェクトをつくる
ライブラリ参照と地図の場所を用意したので、つぎは地図をの実体をつくります。
まずMapオブジェクトをつくります。Mapクラスには表示するdivのIDとオプションを設定します。
以降では、上記のdivタグの下にscriptタグを用意し、その中に書いていきます。
|
1 |
L.map(div id, Options) |
オプションでは地図を最初に表示する中心座標(center)やズームレベル(zoom)を設定します。
|
1 |
var map = L.map('map', {center: [35.6846,139.7527], zoom: 15}); |
centerオプションは[緯度,経度], zoomオプションは整数（大きい方が詳細図）で指定します。
またはsetViewメソッドを使いオプションをパラメータとして短く書くこともできます。
|
1 |
var map = L.map('map').setView([35.6846,139.7527], 15}); |
Leafletライブラリを用いる場合、クラスからインスタンスを生成するときに、次のようなNewキーワードを付けなくても良いとのことです。
|
1 |
var map = new L.Map(); |
タイルレイヤを追加する
地図の場所、表示方法を指定したので、最後に表示させたい地図のタイルレイヤをベースレイヤとして追加します。Leafletで表示させる地図はタイルサーバーによって提供されており、地図を256×256ピクセルのイメージに分割して保持されており、場所とズームレベルによって, ‘z/x/y.png’ のURLでリクエストすると表示領域のタイルだけがロードされます。パンやズームを行い地図表示範囲を変更すると、必要なタイルが逐次ロードされていきます。
OpenStreetMap(OSM)タイルを指定する場合は以下のようにURLを指定し、addToメソッドでオブジェクトに指定します。
|
1 |
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(map); |
地理院地図の場合、どのタイルを使うか、こちらのページから選びます。
標準地図の場合は以下のようになります。
|
1 2 3 |
L.tileLayer('http://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', { attribution: "<a href='http://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル</a>" }).addTo(map); |
タイルのアドレスの次に書かれたattributionは地理院タイルの著作権表示です。
地理院地図を表示
以上のコード全体は以下の通りです。
Leaflet.js Essentials
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html><html> <head><title>Leaflet Essential</title> <meta charset="UTF-8"> <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" /> <script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script> </head> <body> <div id="map" style="width: 500px; height: 500px"></div> <script> var map = L.map('map', {center: [35.6846,139.7527], zoom: 15}); L.tileLayer('http://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', { attribution: "<a href='http://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル</a>" }).addTo(map); </script> </body> </html> |
これを実行すると以下のように指定の中心座標・ズームレベルで地理院地図が表示されます。