登録されてるマップの一覧が右側に表示されます。マップの名称のところをクリックすると、jQueryでおなじみのアコーディオン表示でリンク先が出ます。
また、マップに登録されているエリアの一覧も同時に表示されます。こんな感じです。
PC用ページには現在地取得機能はありません。マーカーを現在位置の代わりにしています。マーカーをドラッグすれば、一番近いエリアへのルート検索が可能です。
スマートフォン用ページは現在位置をトラッキングするページと現在位置を取得したらGPSを停止するページがあります。手動でGPS情報取得も可能ですので、電池の消耗が気になる場合はこちらの方がいいかもしれません。手動でGPSをon/offできるページはjQuery mobileを使って、一見アプリっぽく表示しています。
エリア内に入ると情報ウィンドウがポップアップされます。現在位置が取得できていれば一番近いエリアへのルート表示も行います。
GPS動作中は左下のボタンの表示は「GPS off」になっています。現在位置精度が70メートル以下になれば、電池の消耗を抑えるためにGPSが停止してボタンは「GPS on」の表示になります。現在位置の情報を更新したい場合もこのGPSボタンを押して下さい。ページの再読み込みでも現在位置を取得します。
現在位置から近い10箇所を表示するページも作りました。PC用ページでは現在位置の代わりのマーカーをドラッグ＆ドロップすれば、近隣10件のエリアを表示します。
スマートフォン用も同じく現在位置を取得できれば近隣10件のエリアを表示します。
ここまで一般ユーザー向けのページです。以下はマップオーナー向けのページです。
トップページにある「マップの登録」をクリックして移動します。Googleアカウントでの認証が必要になります。Googleのアカウント情報が一般ユーザーに対して表示されることはありません。すでにGmail等でログインしていれば認証画面は表示されずに以下のようなページへ移動します。初めてのログイン時におためしマップをひとつ自動で作成します。
このページではマップの名称を変更したり、地図のセンターやズームレベルを設定できます。
マップ上をクリックしていくと頂点をしめす四角いアイコンが表示されます。囲みたい範囲をクリックしていくことでエリアを設定します。
頂点はドラッグ＆ドロップで移動できます。頂点間の半透明の四角をドラッグ＆ドロップすると新しい頂点が作成されます。
頂点をクリックすると削除されます。始点と終点はつなげなくてもいいです。地図を表示する時につないでポリゴンにします。
エリアの説明もここで入力可能です。HTMLタグも使えますので画像等も埋め込めます。ただし、今はアップロード機能を用意していませんので他のサイトの画像を直リンクする形になります。著作権、肖像権等にご配慮お願いします。エリアの説明の欄の次のテキストボックスはメールで配信する情報を登録する欄です。（ブラウザによっては入力欄の説明が表示されません。）
登録済みのエリアの変更もこの画面から行います。変更したいエリアをクリックすると情報ウィンドウが表示されます。そのウィンドウの中に「編集」へのリンクがありますのでこれをクリックしてください。「削除」をクリックするとそのエリアの情報を削除します。元には戻せません。
エリアの編集画面です。
エリアの説明や範囲を変更できます。赤い枠は現在登録されているエリアの状態です。始点と終点をつなぐ辺だけ赤い線の状態になっています。エリアの登録先のマップを変更することも可能です。ただし、現在はおためしマップ1つのみですので変更できません。
将来的に有料でマップを追加できるサービスを開始できれば、複数のマップ間でエリアの登録先を変更できます。
避難所マップとして202箇所のエリアを登録しましたが、スマートフォンの性能によっては表示にもたつくと思います。iPhone4Sが発表された今では4世代前の機種になってしまったiPhone3Gで実際に試しました。表示はしますが、スクロールやGPSでの現在位置取得など待たされる時間を考えると、少し厳しいと思いました。エリア数の上限は100箇所程度に抑えたほうがよさそうに思いました。このような事もあり、避難所マップは1つのマップで全国版というのは無理なので、やはり市町村レベルのマップとしてエリアを登録して、レイヤーのように重ねあわせて近隣のエリア情報のみを表示したほうがよさそうに思いました。有料と無料の区分けは登録数や表示数の上限の有無で作るつもりです。有料サービスについては料金や運用等検討中です。
実際のページはこちらです。
