方向オンチが動物園で迷子にならないようにWEBマップ化した！

つくったもの

ズーラシアのイラストwebマップがほぼ完成しました！
お気に入りは、ユーザーによる動物がいま起きてるかの情報更新機能🐅
これで動物のいろんな姿をみられるかも。
ご意見もらえたら嬉しいです🙇
デモサイト→https://t.co/h82C6Y3Ltw@LeafletJSを使って作りました🗺#イラスト #個人開発 #動物園 pic.twitter.com/1db8ktbWg2

— じょうもん (@3dantasymap) March 21, 2023

自己紹介

ふだんは建設業界でアプリなどの企画をしている、じょうもんです。あと夜間建築学生も。

学校の合間に趣味で個人開発しています！よかったらTwitterで交流してください。

この記事の概要

• 動物園に行ったときにイラストマップを持ってあるくけど、現在地がわからない

• WEBで現在地がわかるイラストマップを作ろう！ついでにいろんな情報載せよう

• Leaflet.jsとillustrator、QGISを使用することで作成できたよヤッター

なぜ作ったか

• 現在地がわからないひとが多い＆自分もわからなくなることがおおい

• イラストマップだと情報がごちゃごちゃして見えにくいことがある

• 動物が起きているときに見たい

じゃあどうすれば良い？

解決案

現在地が表示されるWEBマップを作成し、マップ内の動物のマーカーをタップするとポップアップが開いて、たくさんの情報を提供してくれる。

ユーザー同士が動物が起きていたか教えあう

どのように作ったか

ベースとなるマップライブラリは、Leaflet.jsを使用しました(これしか使えない)。

まずはマップをイラレで作成したあと、QGISでジオリファレンスとタイル化。

動物のマーカーは、イラストが難しかったので、adobeから拝借して配置。

マーカーだけは、Firestoreから読み込んでいます。

Firebaseにデプロイして完成！

こだわり

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

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

ハリポタ感ある新丸子のWEB地図つくったので、魔法使いの方たちお待ちしています#ハリーポッター #ハロウィン #leaflet pic.twitter.com/xNS9KV7unw

— じょうもん (@3dantasymap) October 29, 2022