TimeMapは、SIMILE TimeLineとGoogleMapsをコラボレートしたJavaScriptのライブラリーです。

時間軸と空間軸を１つにしたら面白いという発想は、フツーにありますが、表現するのは結構むずかしいです。

でも、TimeMapは、そのあたりをうまく処理しています。

TimeMapは、SIMILE TimeLineとGoogleMapsが出発点です。

SIMILE TimeLine

GoogleMaps

TimeMap

パーソナルタイムマップ (まだ工事中)

タイムマップ twitter (現在工事中)

TimeMap 京都

TimeMap 京都II

TimeMap 京都エディター

TimeMap 京都エディターデモ

タイムトンネル

時系列予測

ガンバ大阪スケジュール

タイムマップその他

トップページ| サイトマップ|

SIMILE TIMELINE

SIMILE TIMELINE はMITのオープンソースプロジェクトです。

時系列の情報を視覚的に表現するのに適しています。

サンプルもそろっています。

TOP

Google Maps

Google Mapsは現在(2010/09/07)、Web上で地図を表示するのに（多分）最も多く使われている手段だと思います。

いまさらながら、Google Mapsについて説明することは何もないです。Web検索すれば簡単に情報は手に入ります。

現在、Version3になり、Version2は非推奨になってしまいましたが、TimeMapはVersion2で動作しています。

まあ、そうそう急にV2が消えることもないでしょう。

Version２のページはこちら

Version３のページはこちら

TOP

TimeMap

参照
 Google Code

TimeMapは見たとおり、SIMILE TIMELINEとGoogle Mapsが合体した形になっています。

横方向のスライドで時間軸が動き、地図をスクロールすれば、座標軸が動く...という感じ。

見た目だけなら、FlashやAdobe(旧 Macromedia)Directorの開発画面に似ています。

   Flashといえば....Time LineのFlash版が＠NiftyでAPI公開されていますね。
   まだβバージョンですが。
   これはSIMILEとは関係ないみたいですが、結構軽快に動きます。
   当サイトのAPI集のページからたどれます。

TimeMapのサンプルページはこちら

TOP

パーソナルタイムマップ

【個人史】

現在、工事中。
TimeMap マイ歴

【エディター】

TimeMapに情報を載せるためのエディターです。

情報を記述したKMLファイルを作成します。

現在、工事中。しばしお待ちを。

KMLエディター

TOP

タイムマップ twitter

【twittwr APiをサポート】

現在、工事中。

TOP

TimeMap 京都

◆TimeMap 京都

「Google Maps 京都」の地図をTimeMapに変えたバージョンです。

初期画面では、794年の遷都が出ていますが、「時間ナビ」のところで、1866年で移動すれば坂本竜馬の項に飛べます。

まあ、データはおいおい追加していきますです。

インターバル設定の横のボタンは、押し続けるとスクロールします。

新しく、こういうボタンが追加されました。

これは、同年・同月・同日に複数の出来事が重なった場合、タイムライン上で表示が見えなくなってしまう現象に対する応急処置です。

タイムラインを広げた場合は、こんな感じ。

Discussion Groupでも問題になっていますが、どうもうまい処理は無いようですので、このようにしました。

次期バージョンの2.3以降は対処できそうですので、このボタンは1.6のみになる予定です。

▲TOP

TimeMap 京都II

◆TimeMap 京都II

「TimeMap 京都」はタイムラインに表示されている出来事だけがマーカーで地図上に表示されますが、「TimeMap 京都II」では、マーカーはすべて表示されたままになっています。

マーカーをクリックすれば、その出来事のタイムラインに移動します。

インターバル設定の横のボタンは、押し続けるとスクロールします。

~~β++バージョンなので、場所と出来事は１対１で対応しています。~~

同じ場所に複数の出来事がある場合

噴出しに、「その他の項目」があります、ここをクリックすれば他の出来事の項目に移動します。

こんな感じ。

▲TOP

TimeMap 京都エディター

現在、まだ公開されていません

京都...ってうたってますが、京都に限定する必要はどこにもないんですけどね（＾＾）。

たまたま最初に、スタティックにデータを扱う「TimeMap 京都」を作ったんで、なりゆきでこういう名前になってます。

①  タイムライン。ここをクリックしたりスクロールすると時間を取得できます。

②  時間スクロール。矢印を押しっぱなしにすると、自動スクロール。
      インターバルは左のメニュの設定に準拠します。
     注１

③  タイムラインの幅を調整。

④  タイムライン上でクリックした位置の時間を表示。

⑤  タイムラインをスクロールした場合の、中央（赤い線）の時間を表示。

⑥  マップ上でクリックした位置の座標を表示。

⑦  登録済みのデータは緑のマーカーで表示されます。

⑧  地図上でダブルクリックすると新規の赤いマーカーが出ます。
     赤いマーカーは１個のみ表示されますので、他の場所でダブルクリックすると、
     元のマーカーは消えます。

【マーカーのドラッグ】
マーカーはドラッグして移動できますが、緑のマーカーは「削除・更新」の場合のみドラッグできます。

【マーカーのダブルクリック】
赤と緑で動作が異なります。
赤：削除されます
緑：ドラッグで移動した場合、元の位置に復帰します

注１
スクロールはタイムライン上をダブルクリックしても行えます。
中央から離れるほど、スクロールの幅は大きくなりますが、移動量はそんなに大きくないです。

デモバージョンとの相違

① マーカーをドラッグすることで、位置を変更できます。

削除・更新のモードの場合、マーカーを移動できます。

② タイムライン上で取得した時間を編集画面に反映できます。

タイムライン上でマウスクリックしたりスクロールすると、年・月・日を取得します。
追加オプションで、マーカーをクリックして編集画面を出すと、時間の欄に反映されます。

③ インターバル設定に準じて、タイムラインを自動スクロール。

バージョン1.6の場合、タイムライン上でマウスホイールによるスクロールができません。

また、マウスでスクロールする場合、他のイベントとバッティングしてひっかかる事があります。

というわけで、応急措置的な意味合いで、スクロールボタンをつけました。

▲TOP

TimeMap 京都エディターデモ

◆TimeMap 京都エディターデモ

TimeMap 京都　エディターのデモバージョンです
（通常バージョンは、情報の正確性を加味して、メンバー制になる予定です。）

このバージョンでは、データはブラウザーを開いている間だけ有効です。

デモですが、入力・更新・削除をやってみましょう。

ラジオボタンをクリックすればモードが変わります。

初期画面はこんな感じです。

情報ファイルには、２つのデータが既に入っています。

【情報の追加】

ダブルクリックすると新規で、赤いマーカーが出ます（マーカーはドラッグできます）。

この赤いマーカーは、１回につき1個だけ出ます。消す場合は、マーカーをダブルクリックしてください。
既存のデータは、緑のマーカーで表示されます。

タイムライン上の文字表示や地図上のマーカーをクリックすれば、入力ウィンドウが開きます。
緑のマーカーは、同じ場所で違う情報を登録する場合に使います。

薄いピンクのフィールドは、必須です。

登録後は、赤いマーカーは緑のマーカーに変わります。

【情報の削除・更新】

○削除・更新をクリックすれば、今まで入力した情報を削除・更新できます

ご注意
デモバージョンでは、位置の修正はサポートされません。
マーカーのドラッグによる位置の修正は会員制バージョンでのみサポートされています。

【情報の閲覧】

○閲覧をクリックすれば、今まで入力した情報を確認できます

【時間の取得】

タイムライン上でクリックすれば、その位置の時間を取得します。

デモバージョンでは、それだけです(^^)。

取得した時間の編集画面への反映は、会員制バージョンでサポートされています。

▲TOP

タイムトンネル

◆タイムトンネル

なつかしのＴＶ番組、タイムトンネルをTimeMapに載せてみました。
こんな感じ。

①  番組をクリックすると、関連する場所に移動して噴出しが開き、タイムラインが移動します。

②  タイムライン上のテキストをクリックすると、関連する場所に移動して噴出しが開きます。
      マーカーをクリックすると噴出しが開き、該当するタイムラインに移動します。

③  噴出しのテキストをクリックした場合。
      M：動画のページが開きます。
      B：該当する動画が無いので、ストーリーのさわりのページが開きます。

④  相当する歴史上の出来事を解説したWikipediaのページが開きます。

⑤  The Time Tunnelの公式ページにリンク

赤枠の画像をクリックするとプロモーションビデオや公式サイトが開きます。

ビデオはデフォルトで、ページ内で開きますが、右下のチェックを外した場合は、外部で開きます。

ページ内のビデオクリップを閉じる場合は、動画右上の「閉じる」をクリックしてください。

英語バージョンのページも作りましたです。というか、もともとアメリカのTV番組なので、英語表記のほうが何かスッキリとしておさまりもいいみたいです。

ご注意

日付に関して
番組内で日付が確認できない場合、４月１日に勝手にさせていただいてます。

時刻に関して
登場時の時刻がよくわからない場合、12:00:00に勝手にさせていただいてます。

場所に関して
○タイムトンネルの場所：アリゾナ砂漠としか分からないので、地下施設があるとされるグリーンバレー近郊に適当に設定しました。
○１話目：タイタニックの船首が沈んでいる場所。
○２話目：1978年のロケット発射場なら、多分ケープカナベラルだと判断。GoogleMoonの位置は適当です。
○３話目：イギリスのウェールズとしかわかならないので、その近郊。
○４話目：最初に登場する、ホノルルの日本領事館。
○５話目：ニューオリンズとしかわからなかったので、適当です。
○６話目：インドネシアのクラカトアの噴火口。
○７話目：トロイの遺跡が発見された場所。
○８話目：リトルビッグホーン古戦場国定公園。
○９話目：フランス領ギアナ沖にあるサリュー諸島を構成する3つの島のうち最も北にある島。
○１０話目：よく分からなかったので、パリの適当な場所。
○１１話目：よく分からなかったので、ロシアの赤の広場。
○１２話目：よく分からなかったので、ボルチモアの適当な場所。
○１３話目：テキサス州サンアントニオ中心街の一角にあるアラモ伝道所。
○１４話目：カイバル峠の適当な場所。
○１５話目：シャーウッドの森。
○１６話目：フランスのシェルブールの適当な場所。
○１７話目：硫黄島の適当な場所。
○１８話目：よく分からなかったので、タイムトンネルのある場所。
○１９話目：よく分からなかったので、北イタリアのアルプス近郊の適当な場所。
○２０話目：現代のエリコ。
○２１話目：よく分からなかったので、アステカ文明があったとされる適当な場所。
○２２話目：よく分からなかったので、ニューメキシコの適当な場所。
○２３話目：よく分からなかったので、地中海の適当な場所。
○２４話目：まったく分からなかったので、タイムトンネルのある場所。
○２５話目：ゲティスバーグの古戦場。
○２６話目：よく分からなかったので、モンゴルの適当な場所。
○２７話目：よく分からなかったので、イングランドのコーンウォールの適当な場所。
○２８話目：まったく分からなかったので、タイムトンネルのある場所。
○２９話目：スーダンのカルトゥーム。
○３０話目：よく分からなかったので、メイン州の適当な場所。

▲TOP

タイムマップその他

【TimeMap (シドニー大学)】

    TimeMap シドニー大学

【HuMap】

京都大学でやってるやつ。
ベースは「TimeMap (シドニー大学)」ですが、ソースは独自のようです。

    HuMap

【STIMS】

    STIMS

埼玉大学の大沢裕先生の研究室でやってるやつ。

TimeMapsのようなタイムラインを使った表現はしていませんが、

時間要素を扱うことができます。

GISの色合いが強いです。
2010/09/26現在　開発は停止しているようです。 J-STIMSの情報もないなあ。昭文社やJ-POWERは手を引いちゃったのか？

【SONY Life-X】

   TimeMapというより、@NiftyのTimeLineに近いイメージかな？

   地図はGoogleを使っているみたい。

    Life-X

TOP

時系列予測

時系列予測を地図に反映させる件について

準備中です！

(交通渋滞　滞留予測)

(防災　避難予測)

(天候　災害予測)

(地震　発生予測)

...etc

TOP

ガンバ大阪　スケジュール

ガンバ大阪２０１１年度のスケジュール

赤枠の部分をマウスでドラッグするとスケジュールが移動します。

枠の中にタイトルが出たら、それに関連する地図マーカーが出てきます。

タイトルが枠から外に出たら、マーカーも消えます。

タイトルやマーカーをクリックすると、噴出しに情報が表示されます。

TOP

TimeMap(タイムマップ)