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

地図とWebは相性が良いです。移動中に地図を見たいと思うことは多いですし、旅行や出張前に計画を立てる上でも地図が必要です。それもあり、Googleマップをマッシュアップする地図サービスは無数に存在します。

今回紹介するBootLeafはそんな地図マッシュアップのベースになるようなソフトウェアです。様々な情報を地図に載せやすくなっています。

BootLeafの使い方

地図が右側に、表示している情報が左側に一覧になっています。

メイン画面
メイン画面

左のリストから選ぶと該当するデータがハイライトします。

データ選択
データ選択

さらに詳細なデータはモーダルで表示されます。

モーダル表示
モーダル表示

データは検索でインクリメンタルに絞り込めます。

検索
検索

ラインデータの表示もサポートされています。

ラインデータ表示
ラインデータ表示

データはチェックボックスで表示/非表示が切り替えられます。

データの追加表示
データの追加表示

BootLeafを使えば地図と独自のデータを組み合わせた表示が簡単に実現できます。データの一覧表示や検索機能を使えば、ユーザビリティの高い地図アプリケーションが提供できるでしょう。デザインもBootstrapを使っているので拡張が容易そうです。

BootLeafはHTML5/JavaScript製のオープンソース・ソフトウェア(MIT License)です。

BootLeaf

bmcbride/bootleaf: Template for building simple and elegant web mapping applications with Bootstrap and Leaflet

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2