retroscopeを活用したマップの作成
こんにちは。豊橋創造大学の鳥居です。
今回、インターンシップで株式会社ウェブインパクト様にお世話になりました。
インターンシップの中で、私は「retroscope」を活用した豊橋駅周辺の現在と過去を比較して見ることができるマップを作らせて頂きましたので、ご紹介いたします。
「retroscope」とは、以下のGitHubで公開されているLeaflet Pluginのことです。
https://github.com/frogcat/retroscope
この「retroscope」では、ベースとなる地図タイルとマスクする地図タイルを指定することで、基本はベースの地図が表示されますが、マウスオーバーした箇所だけマスクした地図を表示させることができます。
これにより、現在と過去を比較するマップを作成することが可能です。
この「retroscpe」を使って、HTMLにJavaScriptを埋め込み、マップを作成しました。
実際に作成したマップが以下になります。
ベースとなる記述は以下の記事にあったため、自分で書き加える記述は少量で済みました。
・Retroscope をつくろう
https://qiita.com/frogcat/items/4fdf23c0461930306d19
しかし、私はJavaScriptを使用した経験がなかったため、とても苦戦しました。
記述内容がわからず、どういった記述をすることによりどのような結果となるかなどの仕組みが最初理解できず、なかなか作業が進みませんでした。
ですが、学校にて学んでいる情報技術についての講義や、担当の方に教えていただき何とか理解をしていくことができ、最終的に完成させることができました。
インターンシップの中では、プログラミング経験のあまりない私にとって、このレトロスコープを活用したマップの作成が一番難しかったです。
しかし、完成し終えた時の達成感は他の仕事では味わえないものだと思います。
また、この仕事の醍醐味はこの達成感だと私は感じました。
本インターンシップを通して、私は一つの仕事を成し遂げることのやりがいというものを経験することができました。
インターンシップで、このような経験をさせて頂き、本当にありがとうございました。
