地図情報を伴うアプリケーションの開発手法

地図を利用したアプリケーションは、多くのユーザに需要があります。自ら作ることもできますが、フルスクラッチで作るのは現実的ではありません。本稿では、このようなアプリケーションを自作する際に使える手法とその背後の考え方・ルールをご紹介します。

地図データ

地図をデータとして捉える

皆さんの身近には、どのような地図がありますか？

Google Maps をお使いなら、あなたの近所の路地から、地球全体まで、様々な尺度でどんな場所でも俯瞰でき、気になった場所の詳細情報を得ることができるでしょう。社会科の地図帳であれば、あちこちのページに、様々な縮尺の平面図として場所が表現されています。

図1. Google Maps[1]

図2. 帝国書院の地図帳[2]

このように、地図は、様々な場所を上から俯瞰した様子を、長方形の視野に収まるように切り取り、図案化し、必要な情報を載せて見られるようにしたものといえます。

これを、コンピュータが処理・通信できるデータとして表現するとどうなるでしょうか？　画像でしょうか？

今よく使われているのは、地図として表示したい画像を256x256ピクセル程度の正方形で保存しておき(これを地図タイルといいます)、必要な数だけ読み取って並べて表示する手法です。こうすれば、地図の基本的な要件は達成できそうですね。

図3. 国土地理院が発行する地図タイルの例 [3]

では、経路検索やスポット詳細情報表示など、紙媒体の地図にはないインタラクティブコンテンツを含む地図を作るには、どうすればよいでしょうか？

この場合は、地図を画像としてデータ化するだけでは足りません。道路や、人々が関心を寄せる地点(Point of Interest: POI といいます)を、緯度・経度・名前・営業時間などを持つ数値のデータとして保持するとよいでしょう。このデータが充実し、処理・可視化に工夫をこらせば、便利な地図になります。

このようなデータや、処理のための手続きの集まりで、現代の電子媒体の地図、つまり地図アプリケーションがつくられています。

どこが提供しているか

地図タイルやPOIデータ、道路などの数値情報を、日本や世界各地で整備している団体がいくつかあります。表1に、そのような団体と、利用できるデータを例示します。

Open Street Mapは、オープンソース・オープンデータのプロジェクトです。データ自体は誰でも無償で利用・編集できます。しかし、サーバにデータを取りに行く行為には制限がある[4]ので、注意が必要です。詳しくは次節で紹介します。

利用条件・ライセンス

地図データは整備・維持・提供に手間がかかるものです。そのため、有償の製品か、無償でも利用条件・ライセンスを伴うものとして提供されます。

国土地理院が提供する「地理院タイル」 は、利用規約に従って無償で利用できます。規約を要約すると、次のようになります。 (利用の際は、次の要約ではなく、必ず原典を読んでください！)

• 「基本測量成果」を利用して地図アプリを作るには、測量法に基づく申請が必要。
  • 地図アプリ以外の用途では、申請が必要なく、出典の記載だけで利用可能な場合もある。
• 「基本測量成果」以外は、出典を記載すれば利用できる。

地理院タイルは利用規約に同意しなくても地図タイルをダウンロードできる仕組みになっており、時々、規約違反ではないかと思われるサービスを見かけることがあります。注意が必要です。※このブログは「測量成果として正確さを要する方法」での利用に当たらないため、申請不要と判断しました。

Open Street Map は、ライセンスに基づくオープンデータです。自由な複製や、ある程度の翻案ができます。ライセンスの要約が提供されており、わかりやすくライセンス条項を知ることができます。

しかし注意が必要なのは、このライセンスによってサーバに地図タイルを取りに行くことが保護されているわけではないことです。

地図タイルのダウンロードに利用できるサーバとして tile.openstreetmap.org がありますが、前節で触れたとおり、このサーバに好き放題にアクセスすることはできません。サーバ自体の(OSMではなく)利用規約によって、地図タイルを使うアプリを配布するような、ヘビーユースにつながる行為が禁止されているのです。

これを回避するには、地図アプリを走らせるサーバに地図タイルダンプデータを仕込んでおくか、タイルサーバを自身で構築する必要があります。後者はかなりコストが大きいので、多くの場合は他の手段を検討することになります。

地図を表示する

考え方・ルールを理解していただいたところで、地図をプログラムから表示する方法をご紹介します。

Leaflet

Leafletは、指定されたURLにある地図タイルを読み取り、表示し、操作するためのインタフェースを提供する JavaScript ライブラリです。事前にjsファイルを読み込んでおいて、Mapオブジェクトを配置し、特定の地図タイルからなる地図をレイヤーとして追加することで、自由にスクロール可能な地図ができあがります。

公式ページ[5]で紹介されているサンプルプログラムを転記します。ただし、緯度経度を実行例通りに変更してあります。

var map = L.map('map').setView([51.505, -0.159], 15);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

L.marker([51.505, -0.159]).addTo(map)
    .bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
    .openPopup();

このプログラムでは、地図上の一地点にマーカー(ピン)を立て、ポップアップ表示をつける機能まで紹介されています。

Leafletは、地図タイルを画像として直接取得できるようなサービス(例: 地理院タイル, tiles.openstreetmap.org)に対して使うことができます。

APIに丸投げできる例

Google Maps Platform を利用すれば、Leafletの提供する機能を内包するような様々なAPIが利用できます。例えば、上記のLeafletのサンプルプログラムを Google Maps JavaScript API 利用で実現する場合、次のように書けばいいでしょう。

let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 51.505, lng: -0.159 },
    zoom: 15,
  });

  const marker = new google.maps.Marker({
    position: { lat: 51.505, lng: -0.159 },
    map: map,
  });

  const infowindow = new google.maps.InfoWindow({
    content: "A pretty CSS3 popup.<br> Easily customizable.",
  });

  infowindow.open({
    anchor: marker,
    map,
    shouldFocus: false,
  });
}

Leafletの場合と違い、地図タイルを示すURLを記述していないことに注意してください。地図タイルを開発者が直接呼び出すことを想定していない作りになっています。

地図を処理する

経路検索

Open Street Map では、地図タイルをダウンロードするだけでなく、地図タイルを構成するための数値情報をダウンロードすることも可能です。つまり、道路がどこからどこまで通っているか、どこにどんな形の建物があるかを数値として取得できます。

geofabrikでは、Open Street Mapのコピーの数値情報が地方ごとに公開されています。記事執筆時点では2021-10-27T20:21:12Z当時のデータをダウンロードできるとの記述があり、最新版が用意されているといってよいでしょう。

エクスポートページからは、地図上の矩形領域を指定し、中に含まれるデータのみをDLすることが可能です。本稿の動作確認では、こちらを使っています。

得られた数値情報(*.osm ファイルなど)はXMLファイルで記述されています。tagのkがhighwayであるようなデータが道路ですので、これらから緯度経度のみ拾ってグラフを作ることで、道路ネットワークをコンピュータ上に再構築可能です。

Pythonであれば、OSMParserによって数値情報を読み込み、networkxなどのグラフ理論パッケージで道路ネットワークを作ることで、最短経路問題を解いて経路案内をすることなどが可能になります。

図4の通り、調布駅から研究室まで徒歩で行く最短ルートを調べてみました。スクランブル交差点を斜めに通って、南門を通るルートが最短のようです。※徒歩ルートに絞るには、highwayキーのvalueがmotorway, trunk, primaryなどとなっている道路を削除すれば良いのではないかと考えています。

図4. OSMデータから経路検索をした例

まとめ

地図アプリケーションを作るための入り口となる技術・考え方・ルールの紹介をしました。皆さんのアプリ開発の敷居を下げ、かつ規則を守ったアプリを作っていただけるきっかけになれば幸いです。

文献

[1] Google Maps: https://www.google.co.jp/maps/. 最終閲覧日: 2021/10/28.

[2] 帝国書院(2019) 『教科書のご案内｜小学校の先生へ　新課程 地図帳Web』, https://www.teikokushoin.co.jp/textbook/elementary2019/kyoukasyo.html. 最終閲覧日: 2021/10/28.

[3] 国土地理院 地理院タイル(標準地図 ズームレベル5): https://maps.gsi.go.jp/development/ichiran.html. 最終閲覧日: 2021/10/28.

[4] OpenStreetMap Wiki『JA:タイル利用規約』, https://wiki.openstreetmap.org/wiki/JA:%E3%82%BF%E3%82%A4%E3%83%AB%E5%88%A9%E7%94%A8%E8%A6%8F%E7%B4%84. 最終更新日: 2020/11/6, 最終閲覧日: 2021/10/28.

[5] Leaflet: https://leafletjs.com/. 最終閲覧日: 2021/10/28

文責 M1 小林