day #013

By | 2015年12月13日

 

「WebGISコンテンツを構築してみた」

この記事はFOSS4G Advent Calendar 2015の13日目の記事です。

昨年は、GISについて全般的に書いた内容でした。2回目の今年は、目標が何か形にできればと思っていました。色々と考えていたのですが、WebGISコンテンツを構築してみようってことでやってみました。

じゃあ何を作ろうと考えていた時に、やっぱり便利なコンテンツを作りたいなと。そうだ、ライブ情報と地理空間情報を融合してみようと思って「SapporoLiveMap」というコンテンツを構築してみました。

adventcalendar2015_01

adventcalendar2015_02

 

夏前くらいから休日にコツコツと作り始めて、8月にとりあえずリリースすることができました。現在も時間をみつけてコツコツと追加改修をしている感じです。

ライブラリは、「OpenLayers」と「Leaflet」のどちらにしようか迷ったのですが「Leaflet」を選定しました。

 

adventcalendar2015_12

Leafletとは、Javascriptで記述されているオープンソースのライブラリで ファイル自体が軽量でコード量も少なくWebGISを構築可能です。要するにWeb上で独自の地図サイトが自分で作れてしまうライブラリです。構築する場合は、基本的にHTML・CSS・Javascriptを利用します。

 

それでは、SapporoLiveMapの現時点の機能を簡単に紹介します。

①背景地図の切り替え
6種類の背景地図をそれぞれに切り替えることができます。レイヤ表示は既存のAPIではなく他のライブラリと組み合わせて構築しています。

adventcalendar2015_10

 

②現在位置の表示
現在位置にマーカーが表示されます。HTML5で実装されたGeolocationAPIを利用するか、既存のAPIを利用するか迷いましたが、現在は既存のAPIを利用しています。

adventcalendar2015_11

 

③ライブハウスとスタジオのマーカー
ライブハウスとスタジオのマーカーをそれぞれ表示しています。マーカーをクリックすると各情報やリンクがポップアップで表示されます。中身はGeoJSONに地理空間情報を格納してそこから各属性を地図上に表示しています。

adventcalendar2015_05

adventcalendar2015_08

 

ライブハウスの入口がわからない人のために、入口が写真で確認できます。

adventcalendar2015_06

 

ライブハウスの道順がわからない人のために、道順が動画で確認できます。

adventcalendar2015_07

 

④各ライブスケジュールの一括表示・検索
各ライブスケジュールをシームレスに確認することができます。絞り込み検索も可能です。中身はJSONで作成した属性情報を表示できるライブラリを通して読み込んでいます。

adventcalendar2015_04

 

⑤各ライブハウス・スタジオ機材の一括表示・検索
各ライブハウスとスタジオ機材をシームレスに確認することができます。絞り込み検索も可能です。中身はJSONで作成した属性情報を表示できるライブラリを通して読み込んでいます。

adventcalendar2015_09

 
 

今後も少しずつではありますが、色々とやってみたいのでゆるく機能改修をしていく予定です。来年はiOSアプリ版をリリースできればなと思い、頑張って構築準備中。

 

来年はFOSS4Gの中のどの分野に挑戦しようかと今からワクワクしています!