links

InsidePolygon


Android用アプリ

2012/02/06 1:21 に Masanori YONO が投稿

標準ブラウザでも表示できますが、アプリ化しました。

ポリゴン登録(β版)

2011/09/18 23:30 に Masanori YONO が投稿   [ 2011/10/26 15:15 に更新しました ]

先日の広域および一次避難所のマップのように、エリアを登録するWebアプリを用意しました。

エリアを登録してどうするの?Googleマイマップでもエリアを登録したり、ルートを登録できるのに?と思われるかもしれません。おっしゃる通りで、マイマップ機能を使えばエリアやルートを登録できます。これらの情報をシェアすることも可能で、見せるのが目的であればこれで十分だと思います。

自分がやってみたかったのはエリア内にいるかどうかの判定です。スマートフォンならGPSを使って地図上に現在位置を表示できます。このGPSの情報と組みあわせて、最初は矩形エリアでの判定から始めました。これは簡単。左上と右下の座標、地図でいうと緯度と経度の値の間に現在地点の緯度経度が収まっているかどうかの大小比較で可能です。
ですが、実際の地図では道が東西南北に格子状、という場合は稀です。エリアが多角形、もっといえば凸凹の状態でもエリア内か外かの判定できれば実用的になっておもしろいかもしれない、と思って作りました。
スマートフォンを持って実際に現地に行って、エリア内に入ったかどうかの判定ができれば、いろんな用途に使えるとは思いませんか?このページでエリアを登録すれば、エリアの内か外かの判定が可能です。エリア内に入った時にだけ配信されるような情報があれば屋外イベント、例えばスタンプラリーのようなものや、仲間内でのオリエンテーリングやブルベ等で使えるのではないか、と考えています。

このWebアプリを利用される方を3つに分類して考えています。
  1. 地図を利用する「一般ユーザー
  2. 地図にエリアを登録して情報を提供するユーザー(「マップオーナー」とここでは呼ぶことにします)
  3. このサイトを管理する「管理者
マップオーナーとして多角形のエリアを登録するにはGoogleアカウントでの認証が必要です。Googleアカウントが一般ユーザーに公開されることはありません。

アプリのイメージとしてはこんな感じです。


各マップのオーナーが登録したエリアを重ねあわせて見た状態がトップページになります。
トップページはこんな感じです。それぞれのマップに登録されているエリア(赤枠)をまとめてトップページに表示しています。


登録されてるマップの一覧が右側に表示されます。マップの名称のところをクリックすると、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つのマップで全国版というのは無理なので、やはり市町村レベルのマップとしてエリアを登録して、レイヤーのように重ねあわせて近隣のエリア情報のみを表示したほうがよさそうに思いました。有料と無料の区分けは登録数や表示数の上限の有無で作るつもりです。有料サービスについては料金や運用等検討中です。

実際のページはこちらです。

避難所マップ

2011/09/12 22:00 に Masanori YONO が投稿   [ 2011/09/12 22:12 に更新しました ]

自治体の避難施設一覧から広域避難地と一次避難地のデータをわかる範囲で登録してみました。xxスポーツ広場、はだいたいこのあたりだろうな、と想像はつくけれど境界がはっきりわからないので、一次避難地のスポーツ広場はほとんど除外しました。あと、公園でわからないところが多かったです。ここで調べて、住所から写真モードで表示して、それらしき敷地を公園として囲んでみました。見当はずれの所があるかもしれません。およそ200箇所。スマート フォンだとさすがに全表示はつらいかな、と思ったけれど、予想してた程は遅くはなかったような気がします。GPS情報から現在位置をすんなりと取れれば、一番近い避難所へのルート検索は予想してた程もたつく事もなかったように思います。PC用はこちら、スマートフォン用はこちらです。エリア内に入ったかどうかの判定でInsidePolygonを使っています。

県外からたまたま静岡市に来て万が一被災した場合、不慣れな土地であれば地名から位置関係を把握しにくいものだと思います。県外出身の自分も、生活圏以外ではわからない地名が結構ありました。地名や施設名はそこで生活している人でないとわからないものだろう、と考えて現在位置表示と最も近い避難場 所へのルート検索機能をつけた次第です。あとは登録と変更画面をどうしようか、とか、データ数が多くなった場合の見せ方を考え中です。やはりスマホに特化 するなら現在位置から近い数件を絞り込んで表示、というのがスマートかもしれません。

InsidePolygonAPI

2011/08/28 15:25 に Masanori YONO が投稿   [ 2011/08/31 22:26 に更新しました ]

Googlemapの多角形エリアの内外の判定用に作りました。サンプルはこちら。


マーカーを緑のポリゴンのエリア内にドラッグするとページ下部に「範囲内です」」と表示されます。
考え方はこちらに書きました。JS版もご用意できます。ご相談あればこちらまでメールください。

1-4 of 4