つくったもの

自己紹介

非エンジニアのじょうもんです。普段はIT系企業で企画をしています。あと夜間建築学生も。
学校の合間に趣味で個人開発しています！よかったらTwitterで交流してください。

この記事の概要

動物園に行ったときにイラストマップを持ってあるくけど、現在地がわからない
WEBで現在地がわかるイラストマップを作ろう！ついでにいろんな情報載せよう
Leaflet.jsとillustrator、QGISを使用することで作成できたよヤッター

なぜ作ったか

現在地がわからないひとが多い＆自分もわからなくなることがおおい
イラストマップだと情報がごちゃごちゃして見えにくいことがある
動物が起きているときに見たい
じゃあどうすれば良い？

解決案

現在地が表示されるWEBマップを作成し、マップ内の動物のマーカーをタップするとポップアップが開いて、たくさんの情報を提供してくれる。
ユーザー同士が動物が起きていたか教えあう

どのように作ったか

ベースとなるマップライブラリは、Leaflet.jsを使用しました(これしか使えない)。
まずはマップをイラレで作成したあと、QGISでジオリファレンスとタイル化。
動物のマーカーは、イラストが難しかったので、adobeから拝借して配置。
マーカーだけは、Firestoreから読み込んでいます。
Firebaseにデプロイして完成！

こだわり

こだわったところは、動物ごとの起きてる起きてない情報の更新です！ユーザーがボタンをタップするとfirebaseのデータが更新されます。これで起きてる動物から見に行くことも可能になりました！

おまけ(ハリポタ風マップも)