kiritterのブログ

IT業種。好きなもの 音楽(Rock,House,Trance,etc) 読書(実用書) 歩くこと 日本史 スノボー など。現代社会がこの先どう進んでいくのか興味津々の今日この頃。(Twitter : kiritter)

Leafletで地図サイトを作りました

昨年、下記の本と出会い、シンプルなサイトであれば自分にも作れることを知り、
初めてWeb地図サイトを作りました。(フロントエンド実装のみの閲覧専用地図)


元々、GoogleMapを頻繁に利用し、知らない場所があればその位置を調べ、
行ったことのない場所は距離を測って移動時間を把握したりすることが日常茶飯事だったため、
自分の手元で地図を好きなように表示できることに大変興味を惹かれ、
まずはちょっと試してみたい、表示だけでもさせてみたい、というのが発端でした。


いざ始めると、アレを実現してみたい、コレを実現してみたいと徐々に実装していく形となり、結果として、

  1. ベースとなった1サイト
  2. それを元にした具体テーマの3サイト
  3. 変化球的な1サイト

の合計5サイトを形にすることとなりました。


①『時期と距離の比較地図』
kiritter.github.io
最初にアタマにあったのは、真ん中の線を左右にドラッグするとその場所の変更前後の姿が見える、
というものを自分でも作ってみたいと、まずはそれを実現しようとしたものです。

当初は、高度成長期を念頭に、地理院地図の年代別空中写真(航空写真)の60年代と70年代だけを左右に固定表示するものでしたが、
せっかくなら公開されているすべての年代を載せたい、
さらにはもっと古い時代とも比較したいと、日本版 Map Warper の「五万分一地形圖」(旧版地図)(戦前期の地図)も表示できるようにしました。
個人的には大阪北部の丘陵地帯がニュータウンとして開発された姿が見えて、地理面と現代史面で理解が深まり役立ちました。


その後、地図上で大きさや距離がつかみやすいよう、目安となる距離の同心円を表示するようにし、
それを利用して、異なる2つの場所の大きさを比較できるようにしました。
住んでいる町と旅先の町を比較して、巡る所要時間をざっくり推し量ったり、
阿蘇山の中心に新宿駅を置いたらどの程度の広さになるだろうかといった好奇心による確認に利用。


最後に、覗くだけでも楽しめるよう、
いくつかピックアップした事例をすぐ閲覧できるよう「事例一覧」を用意しました。

事例内の番外編として下記も掲載。
ダム湖百選」(ダムができる前と後の姿が見られる)
日本百名山」(陰影起伏図を重ねて見ると場所もはっきり)


なお、比較というテーマとは無関係ですが、通っていた小学校の当時の姿が見えて、非常に懐かしかったです。


②『陰影起伏図で見る古墳マップ』
kiritter.github.io
陰影起伏図を半透明にして航空写真に重ねると、前方後円墳の姿が浮かび上がることから、比較地図の事例一覧として「番外編:前方後円墳」を載せていました。
しかし、自分で見たり、データ追加するのに不便だったため、分割して独立したサイトにしたものです。
専用化したことで、大きさランキングといった一覧も載せられるようになりました

また、古代の時期を模した海面上昇イメージも付けることで、
古墳がかつてのラグーン(潟湖(せきこ))沿いの高台にあることが見えたりと理解が深まりました。

今後新しく学んで得た知識を随時メモできる場所が作れたという思いです。


③『街道浮世絵マップ』
kiritter.github.io
中山道はどこを通っているのだろう、ルートの中間の大半を把握していないと気づいたことをきっかけに、『東海道五十三次』『木曽海道六十九次』の浮世絵を見るたび、どの絵がどの場所のものかパッとアタマに浮かばず、毎回ストレスを感じていたことを思い出し、その2点を解決しようと、
ざっくりとルートがわかるよう、宿場を線で結びつつ、宿場の位置に浮世絵を表示するようにしたものです。

陰影起伏図や旧版地図(戦前期の地図)で表示できるようにすることで、
よりはっきりとルートが見えるようになり、役立ちました。


④『おくのほそ道:芭蕉行きて帰りし物語マップ』
kiritter.github.io
奥の細道」が見事な構成をもった文芸作品、かつ、芭蕉の「行きて帰りし物語」であることを知って大変感動したことが大元の発端で、
その構成を可視化したい、
またそもそも、私自身が東北や北陸の土地勘がないことから、ルートをアタマに思い浮かべることができなかったため、
より実感を持って芭蕉の旅を辿りたいという思いで作りました。

こちらも陰影起伏図や旧版地図(戦前期の地図)のおかげで、
特に後者では当時の町の姿や主要な道の姿が雰囲気的に伺えて、ルート確認に大変役立ちました。


⑤『歴史年表地図:地図で表現するタイムライン』
kiritter.github.io
歴史そのものをテーマにした、変化球的な地図サイトです。
大元の発端は、十数年前にExcelで年表を作り、縄文時代の圧倒的な長さと遠さを実感したことです。
縄文土偶が信じられないくらい遠い過去に作られ、それが今に残って目にすることができている奇跡さに感動しました。

当時感じた問題点などが、Web地図の仕組みを利用すればある程度解決できることに気づいたことから、
新幹線の鹿児島中央新青森間の実キョリを年に換算し、それを時間軸とみなすことで、年表として表現したものです。


当初は発端となった縄文時代以降を見せる年表でしたが、

  1. 有史に着目した直近2000年間を見たい
  2. 縄文時代に先行する、日本列島の現生人類の歴史の出発点となる後期旧石器時代以降でも見たい
  3. そもそも地球誕生からの全体を見てみたい

という思いから、割り当てる時間範囲を上記の種類で切り替えて表示できるようにしました。


当初は主な出来事をいくつかだけ目安に載せるつもりが、それだけでは全然不足感を覚え、特に有史は改めて通して復習しながら、主な出来事をピックアップして載せました。
この作業によって、これまで出来事としては知っていたものの、時間軸上のどの辺りの話なのかよくわからず、アタマの中にバラバラに入っていた情報が1つの時間軸上で整理され、とてもはっきり理解することができ、古墳マップ同様、今後新しく学んだ知識を随時メモできる場所が作れたという思いです。

個人的には、これまで見聞きする一方で何もアウトプットにつながることのなかった歴史趣味を、サイトとしてカタチにすることができたことが大変嬉しい思いです。


以上、昨年着想着手した地図サイト5つを一旦作ることができたという区切りとして、本記事として記しました。
(久しぶりにシゴトではなく自分自身の興味のために実装作業したことは、苦しいながらも、楽しい時間となりました)


以下、今回の地図サイト作りにあたり、新規で読んだり、改めて手に取ったりした参考文献です。


①『時期と距離の比較地図』

↑自分なりの地図を作りたいという後押しとなりました。
また、距離の同心円を表示するきっかけにもなりました。


②『陰影起伏図で見る古墳マップ』


④『おくのほそ道:芭蕉行きて帰りし物語マップ』

↑2015年に上記の本を読み、おくのほそ道に抱いていた旅日記という印象がまったくの見当違いだったことを知り、文芸作品としての構成の巧妙さ、美しさに大変感動したことが、おくのほそ道の地図サイトを作ったおおもとのきっかけです。↑上記の最後の1冊は、おくのほそ道の旅のエピローグ、大垣から伊勢神宮へ向かったその経路を載せるために読みました。
過去、紀伊半島にたくさんの街道と賑わいがあったことを改めて実感する機会となり、時代の移り変わりにしばし思いを馳せました。


⑤『歴史年表地図:地図で表現するタイムライン』
■先史時代

個人的に日本の先史時代が最も興味深いテーマですが、今回作った年表地図では、具体的な年指定を要するため、年をはっきりさせることがしにくい先史時代の出来事はなかなか時間軸上に載せにくい面があり、載せる位置に悩みましたが、載せないことには何の参考にもできないため、割り切って、目安となるよう区間の先頭だったり中間だったり見栄えのバランスも踏まえて載せました。


■日本史全般や特化テーマ

↑伏見が港町であることを知り、なぜ京都南部郊外の伏見という場所が栄えたのだろうと気になっていた点が解消された一冊です。↑自分が日本の歴史を全然わかってなかったことに気づかされ、歴史に目を向けるようになった思い出の本です。↑読了後、春はあけぼのという冒頭を目にするだけで涙が浮かぶ状態になりました。


■地球史

↑2015年の夏、若狭三方(みかた)縄文博物館を訪ね、現地で初めて水月湖のことを知り、直後に出版された上記の本で詳細内容を知りました。
縄文時代をはるかにさかのぼる5~7万年という時間軸に気が遠くなると共に、初めて縄文時代より前の時代に目が向く機会ともなりました。