ITエンジニア/デザイナ向けにオープンソースを毎日紹介

地図を使ったコンテンツを作るのは楽しいですが、いざ作るとなると意外と難しいのではないでしょうか。Googleマップにマーカーを載せても、それをタップしないと内容が分からなかったりします。

そこで紹介したいのがOdyssey.jsです。地図とコンテンツをミックスした面白いプレゼンテーションを作成できます。

Odyssey.jsの使い方

こちらはエディタになります。地図と、右側に編集できるコンテンツがあります。
こちらはエディタになります。地図と、右側に編集できるコンテンツがあります。

Odyssey.jsのコンテンツはMarkdownフォーマットで記述します。ただしcenterやzoomなど特別な気泡も幾つかあります。

左側のカルーセルを移動するとマップもその場所に移動します。
左側のカルーセルを移動するとマップもその場所に移動します。

こちらは縦スクロール型。上にある地図は固定で、スクロールすると地図も移動する仕組みです。
こちらは縦スクロール型。上にある地図は固定で、スクロールすると地図も移動する仕組みです。

こちらはヒートマップ風に線が描かれるデモです。時間軸によって動くのが面白いです。
こちらはヒートマップ風に線が描かれるデモです。時間軸によって動くのが面白いです。

刻々とアニメーションします。
刻々とアニメーションします。

Odyssey.jsはMarkdown記法で記述してカルーセル、スクロールなどで地図を切り替えつつコンテンツを表示するという仕組みになっています。位置情報系アプリの紹介時はもちろん、旅行記の紹介などでも活躍しそうです。

Odyssey.jsはJavaScript製、BSD Licenseのオープンソース・ソフトウェアです。

Odyssey.js

CartoDB/odyssey.js

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2