簡単な地図を作成する。JavaScript ライブラリである Leaflet を用いることで、縮尺や表示エリアを自在に変えて地図を閲覧できるものが得られる。
Leaflet.js を利用した地図 Web ページの作成に先立ち、まず必要なファイルを入手して適切な場所に配置する。 本講では以下の条件で関連ファイルを置くと仮定する。
また、すでに自分の Web ページが公開される環境が整っていて、その URL がたとえば
http://roy.e.koeki-u.ac.jp/~c12yxxx/
のようなパス名基準にアクセスできる状態になっていると仮定する。 この条件で leaflet ライブラリを導入する手順を示す。
場所を決めて圧縮ファイル leaflet.zip を展開する。ここでは ~/public_html/src/ ディレクトリに配置する例で示す。
# (leaflet.zipのあるディレクトリにて以下のように起動) mkdir ~/public_html/map/src unzip -d ~/public_html/map/src leaflet.zip
Leafletによる地図表示は以下の流れで行なう。
まずは簡単な地図を作ってみる。ここでは、
という設定で表示してみる。作成ディレクトリは ~/public_html/map/domon/ とする。
mkdir ~/public_html/map/domon
このディレクトリ内に以下の2つのファイルを作成する。
<!DOCTYPE html> <html lang="ja"> <head> <title>マップ: My First Map!</title> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="stylesheet" href="../src/leaflet.css" /> <!-- (1) --> <script src="../src/leaflet.js"></script> <style type="text/css"> <!-- div#mymap {width: 90vw; height: 80vh; margin: 0 auto;} /* (2) */ --> </style> </head> <body> <h1>My First Map!</h1> <div id="mymap"></div> <!-- (3) --> <!-- #mymap であるdivを配置したあとで (4) --> <script type="text/javascript" src="domon.js" charset="utf-8"></script> </body> </html>
/* domon.js - 北緯38.891度, 東経139.824度, ズームレベル16 で地図表示 */
var mymap = L.map("mymap").setView([38.891, 139.824], 16);
L.tileLayer('//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution:
'© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(mymap);
作成した domon.html をブラウザで開くとシンプルな地図が得られる。 地図枠左上の + ボタンと - ボタン、 あるいはマウスホイールで地図の縮尺が変えられ、 地図内のどこかをドラッグするとスクロールできる。
HTMLファイルの記述で必要なのは以下の4点である。
(1)の部分で leaflet ライブラリ付属の CSS ファイルと JavaScript ファイルを読み込んでいる。
(2)の部分で、のちの(4)で足す id="mymap" の div要素のサイズをスタイルシートで設定している。
実際に id="mymap" の div 要素を配置する。id は唯一に決まるものであれば何でもよい。
スクロール地図の設定を記述した JavaScript ファイルを読み込む。
作成した JavaScript プログラムで利用している関数について説明する。
var mymap = L.map("mymap").setView([38.891, 139.824], 16);
L.map関数で、第1引数に指定した div
要素にマップオブジェクトを作成する。div 要素は、DOM
による div 要素オブジェクトもしくは id
属性値を与える。第2引数にはマップオプションをJSONで与えることもできる。
続く .setView
はマップオブジェクトの持つメソッドを呼び出している。setView
は地図の表示中心とズーム倍率を設定するメソッドである。
L.tileLayer('//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution:
'© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(mymap);
指定URL: //{s}.tile.openstreetmap.org/{z}/{x}/{y}.png
からタイルレイヤを生成し、addTo
メソッドによりマップオブジェクト mymap に結び付けている。
「//」から始まるURLは同じスキーマの指定で、
現行で開かれているページが http なら http:// となり、
https なら https:// となる。
タイルレイヤとはタイル化された地図データをユーザの望む倍率で
貼り付けるためのレイヤである。この例では、OpenStreetMap(以下OSM)
の提供するタイルのURLを指定している。{x}
が経度、{y} が緯度、{z}
がズームに置き換えられる。{s} の部分はブラウザが
タイル画像を並列取得するときに適宜 a, b, c に置き換える。
L.tileLayer の第2引数にはオプションを指定する。
この例では attribution オプションで地図の出典明示をしている。
この例で用いた OSM
に限らず、タイルレイヤの提供者の求める使用条件には概ね出典明示があるので
この記述を怠らないようにする。
表示の基準となる地図(ベースマップ)は、OSM 以外にもいくつかあり、自由に利用できるものも存在する。 国内で自由に利用でき、最も精度の高いものは国土地理院の提供しているベースマップである。
実際に利用してみる。「地理院タイルのご利用について」の注意を遵守し、先ほどの domon.html のベースマップを
地理院標準値図タイル:
http://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png
に変更してみる。domon.html ファイルは変更点のみ示す。
<script type="text/javascript" src="domon.js" charset="utf-8"></script>
という行を以下のように変更して
dom-gsi.html とする。
<script type="text/javascript" src="dom-gsi.js" charset="utf-8"></script>
必須ではないが、title と h1 要素も変えておくと分かりやすい。また、
dom-gsi.js は以下の内容とする。
var mymap = L.map("mymap").setView([38.891, 139.824], 16);
L.tileLayer('//cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
attribution:
'<a href="http://maps.gsi.go.jp/development/ichiran.html">国土地理院</a>'
}).addTo(mymap);
作成した dom-gsi.html を開くと地理院タイルで表示された地図が得られる。
同じ位置の地図だが印象が違うのが分かる。
タイルレイヤ生成時には以下のオプションが使える。
| オプション | 働き |
|---|---|
| attribution | コピーライト表示等を指定(必須)。 |
| minZoom | 最小ズームレベル。 |
| maxZoom | 最大ズームレベル。 |
| minNativeZoom | タイルソースで利用できる最小ズームレベル。 minZoomがこれより小さいときはこのズームレベルの画像が利用される。 |
| maxNativeZoom | タイルソースで利用できる最大ズームレベル。 maxZoomがこれより大きいときはこのズームレベルの画像が利用される。 |
最初に示した地図はズームボタンしか持たない。 他にも地図を制御するオブジェクトを追加できる。 例として縮尺を示すスケールコントロールを追加するコードを示す。
上記 dom-gsi.js に続けて以下の行を追加する。
L.control.scale().addTo(mymap);
L.control.scale() で生成したスケールコントロールを
addTo() で指定したマップオブジェクトに結び付けている。
標準では表示地図の左下に追加される。これを変えるには
L.control.scale() にオプション引数を与える。
L.control.scale({position: POS})
POS には位置を示すキーワードを文字列で与える。
'topleft' | マップの左上 |
'topright' | マップの右上 |
'bottomleft' | マップの左下 |
'bottomright' | マップの右下 |
leaflet.js を用いて以下の地図を表示する Web ページを作成せよ。