2016年11月24日木曜日

概要


地図ウォーク
このブログでは、AppStoreで公開中のiPhone向けアプリ 地図ウォーク 用に独自のコースを作成するための WEBアプリ の使用方法を説明しています。

このアプリはSafari、Chrome、Firefox、Edgeのいずれかのブラウザでご使用ください。IEでは動作しませんのでご注意ください。

入門編では、箱根駅伝の走路に沿ったコースを作成してiPhoneに転送するまでの手順を順を追って説明します。
応用編では、入門編では説明していない比較的高度な機能や、使い方のヒントなどを説明します。

地図ウォークそのものの使い方はこちらをご参照ください。

このブログは、各トピックの公開日時を操作することで、読むべき順番に記事がならんでいます。「入門編」などのラベルを選択したうえで、上から順に読み進んでください。

手順


コースは概ね以下のような手順で作成し、地図ウォークに組み込みます。
  1. コース作成のページを、PCのブラウザで開きます。
  2. コース名と説明を入力します。
  3. 参考になる地図データを、参照レイヤとして指定します。
  4. 経由点を、コースの始点から順に入力していきます。
  5. 2つの経由点間のルートを始点から順に入力していきます。
  6. おかしな図形ができていないか、チェックをします。
  7. 出来上がったコースをJSONファイルとして保存します。
  8. iTunesのファイル共有機能を利用して、作成したJSONファイルをiPhoneに転送します。
一度に最後まで続けてやり通す必要はなく、一旦中断しても、再度コース作成のページを開くと、前回作業していた状態から続けることができます。

次の投稿から、箱根駅伝のコースを題材に、一通りの作業の進め方を説明します。


作成アプリの起動

ブラウザーで、次のアドレスを表示します。
http://mapwalk.herokuapp.com/editor.html

以下のような画面が表示されます。(2回目以降は前回作業を終了したときの状態で表示されます)

地図表示にはGoogleMaps を利用していますので、スクロールやズーム、地形図や衛星写真への切り替え、ストリートビューの表示など、通常のGoogleMapsと同じ方法で操作可能です。


コース名の入力

左上のコース名(最初は「未設定」という名称になっています)をクリックすると、以下の画面が表示されますので、コース名とその説明を入力して、「確定」をクリックします。



参照レイヤの設定

コースを入力するにあたって、インターネットで公開されているKMLまたはKMZという形式の地図データを、参照レイヤとして表示することが出来ます。(あくまで参照のみで、それらの図形を編集したりコピーしたりすることは出来ません)
箱根駅伝のコースに関しては、幾つかのKML/KMZが公開されていますので取り込んでみます。

ボタン(①)をクリックすると、以下の画面が表示されます。
この画面の「+」ボタン(②)をクリックすると、参照レイヤのURL・名称入力画面が表示されますので、参照するKML/KMZファイルのURLと、このシステム内での名称(複数のレイヤを参照する場合に区別するための名称です)を入力し「確定」します。
元の画面に追加したレイヤの名称が表示されますので、こちらも「確定」ボタンをクリックし画面を閉じます。

以下の図は、コース中継点の2つのKMLファイルの参照を設定したところです。


経由点の入力

上部の入力対象オプションで「経由点」(①)を選択します。
次に地図上で、経由点の位置をクリックします。名称入力画面が表示されますので、経由点の名称を入力し「確定」しますと、以下の図のように経由点(赤い四角の中に黒丸、②)が地図上に追加され、左のリストにも表示されます。
なお、地図を拡大したときに表示されるたくさんの青い線はストリートビューが設定されている道路を示しており、上部の「ストリートビュー路線」(③)のチェックを外すと表示されなくなります。作成するコースはできるだけストリートビューが設定されている道路上を進むようにしてください。ストリートビューが設定されていない道路を通ると、「地図ウォーク」でちょうどその場所のストリートビューを見ようとしても何も表示されなくなってしまいます。

同様の手順で、芦ノ湖までのすべての中継点を順に設定してください。そこまでの入力が済むと、下図のような状態になります。

ルートの入力

続いて各経由点間の経路を入力していきます。まず上部の入力対象オプションを「ルート」(①)に切り替えます。ルートモード(水色のボタン)は「車」(②)が選択差された状態にしておきます。
次に、大手町、鶴見の経由点を順にクリックします。そうすると、以下の図のように2点間のルート検索の結果が、赤い半透明の線で表示されます。
ルート検索結果と望むルートには差がありますが、ルート検索結果図形上の1点をクリックするとそこに下図のように○が表示され、それをマウスでドラッグ(左ボタンを押したまま移動)することで、ルート検索結果を修正することが出来ます。
概ね正しいコースが設定できたら上部の「確定」ボタン(緑色)をクリックし経路を確定させます。経由点間のルートを完全に正しく一致させてから確定するより、だいたい合致したらば一度確定し、あとは部分的に修正していった方がスムーズに設定できるようです。