見出し画像
Photo by wataridori225

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

じょうもん

つくったもの


自己紹介

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

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

この記事の概要

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

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

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

なぜ作ったか

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

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

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

じゃあどうすれば良い？

解決案

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

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

どのように作ったか

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

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

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

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

Firebaseにデプロイして完成！


こだわり

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


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


いいなと思ったら応援しよう！

じょうもん
いつも読んでいただきありがとうございます(^^) サポートいただいたものは、あなたとのお茶代もしくは勉強代に充てたいと思っています！いつでもご連絡お待ちしております。