ブラウザ上で自由に地図を表示する

 地図は,人々が生活する中で重要な役割を担い,その利用方法は時代とともに変化してきた。
最近では,Webブラウザ上に地図が表示され,検索などが行える地図サービスの登場や,急
激に普及が進んでいるスマートフォンのアプリを使用することで,誰でも簡単に地図の閲覧が
可能となってきている。さらに,これまではカーナビなどに限定されていたナビ機能がスマー
トフォンでも利用できるようになるなど,人々にとって地図がより身近な存在となりつつある。
このように地図が簡便に使えると,自分たちで得た空間データを,地図の上に重ねたいという
要求も必然的に出てくるだろう。たとえば,旅行先で自分の歩いた経路やデジタルカメラで撮
影した位置情報付きの写真などである。これらは,QGISなどのデスクトップGISを利用すれば
地図の上に表すことが可能となる。
いっぽう,自分で作成した地図データを誰かと共有したい場合,デスクトップGISではその
要求を満たすことは簡単ではなく,Webページ上に地図を表示し公開する必要がある。そこで,
今回紹介するのはLeaflet
(http://leafletjs.com/)と呼ばれるWebページ上でGoogle Mapsのよ
うに地図を表示するためのJavaScript言語で書かれたオープンソースの地図表示ライブラリで
ある。Leafletの特徴は,オープンソースであるため誰でも自由に利用できることと,スマー
トフォンなどのモバイル端末で表示することも想定しているため,Leaflet本体が簡素化され
シンプルな作りになっていることである。読者の皆さんは,簡素化という言葉から利用する上
での自由度があまり高くない印象を受けるかもしれないが,Leafletではプラグインを追加す
ることで多様な形式の空間データを表示できるようになっている。Leafletで利用できる地図
形式として代表的なものは,タイル状に分割されズームレベルとタイルのインデックス番号に
より階層化されたタイル地図である。このタイル地図は,主要な地図サービスで利用されてい
る形式でもあり,国土地理院が公開している地理院地図も含まれている。この地理院地図の上
に,自分たちで得た空間データを重ねていけば,オリジナルのWeb地図が作成できることだ
ろう。また地理院地図は,国土地理院コンテンツ利用規約に違反しない範囲であれば自由に利
用できるため,背景地図にコストがかからない点も魅力である。
Leafletを利用する場合,地図を表示するためのWebページを作成することになるため,JavaScript言語だけでなくHTMLやCSSといった知識も多少必要となってくるが,公式サイトに
はチュートリアルが用意されており,身構えてしまうほど難しくはない。実際,筆者も背景地
図の表示からマーカーの表示,そしてマーカーに付随するポップアップの属性情報を設定する
まで,チュートリアルを読み進めるだけで簡単に作成することができた。残念ながら公式サイ
トは英語となっていて,日本語での解説情報は少ないが興味がある人は試してみてはいかがだ
ろうか。
(朝日航洋株式会社 髙橋洋二)
図-1 Leafletで地理院地図を表示し,朝日航洋の位置にマーカーとポップアップ
を表示した
ブラウザ上で自由に地図を表示する
133
THE JOURNAL OF SURVEY 測量 2015.1 55