2016年2月20日土曜日

Leafletと国土地理院データで地図情報システムを安価に作成する(その1

はじめに

普通にインターネット上で地図を参照する場合、最王手のGoogle Mapをお使いの方も沢山居ると思います。
このGoogle Map、自分でJavaScriptでコードを記載することで標準のMapを超える機能を実装することが可能です(Google Maps APIという)。
例えば、XMLファイルとしてデータを事前作成しておくことで、地図上の指定座標箇所にマーカを配置したり、サイト上に作成したフォームから住所を入力することで座標を計算して地図をその場所に移動させることも可能です。
ただし、Googleが提供するこのAPI、無償版はアクセス数が限られており、さらにインターネット上で作成された成果物を公開がされていることが条件となります。
例えば自社の設備が配置されている場所を表示したいが社外には当然見せたくない場合などはライセンス登録が必要で、なんと年間120万円〜もします。ちょっと中小企業でGISを使いたいニーズには厳しいですよね。
というわけで、今回は地図・JavaScriptのライブラリ共に公開されているもので同等の機能を持つもののうち、地図には国土地理院のタイルを、ライブラリにはオープンソースのLeafletを使ったものをご紹介していきます。

国土地理院地図について

国土地理院では以下のURLで地理院で管理している地図を用いたサイトを運用しております。この地図データを使用するにあたっては規約はありますが、ほぼ通常の使用では問題ない内容が書かれています。
地理院地図

Leafletとは?

JavaScriptを利用した地図情報サイトを作成するためのライブラリです。国土地理院のサイトにはその他にもOpenLayersというライブラリを用いたものがございますが、個人的に使用した限りではLeafletの方が軽く感じること、さらに海外の大手サイトでも使用実績があること(FOURSQUARE・EVERNOTEなど)、ドキュメントサイトやサンプルが揃っておりわかりやすいことから今回紹介します。
Leaflet - a JavaScript library for interactive maps

地図情報サイトの骨格について

国土地理院サイトに「地理院タイルを用いたサイト構築サンプル集」があり、この中にLeafletを用いたサンプルがあります。
さらに、Leafletを用いたサンプル地図サイトの下にソースへ誘導するリンク(GitHub)があり、この中を見ると直接書き込んだJavaScriptは以下の数行だけです。
var map = L.map('map');
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);
map.setView([35.3622222, 138.7313889], 5);
1行目(L.map)はLeafletでの地図を書込する際のおまじないです。
2行目(L.tileLayer)は国土地理院の地図タイルを使用する際に指定するURLを記載しています。
3行目(attribution 〜 </a>"まで)は国土地理院サイト内の情報を使用する際の許諾権を表示する関係でリンクを埋め込んでいます。
4行目(}).addTo(map);)は3行目で指定した内容を地図に追加するという意味です。
逆にいうと4行で閉じるまではここにタイルレイヤとして登録したい情報を追加可能ということになります。
5行目(map.setView)で東京を中心とし、ズームレベル5で表示させるという意味です。
このソースではheadのscriptでLeafletのJavaScriptライブラリをインターネットで読込する設定のため、自分のサイトには<div id="map"></div>があれば、そこの場所に地図を貼付け出来るというわけです(正確にはmapのスタイルシート設定が必要ですが)。
どうです?ちょっと勉強してみようと思いませんか?次回からは少しづつ機能を追加する方法を記載していきます。