dayjournal memo

Total 975 articles!!

day #013 - WebGISコンテンツを構築してみた

Yasunori Kirimoto's avatar

「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の中のどの分野に挑戦しようかと今からワクワクしています!