マップを Leaflet でリメイク

2023/09/16(土)

これまで、山歩きなどの記事では、Googleマップの地図上に歩いたコースを表示してきました。
実は2018年にGoogle Maps APIの料金体系が変更され、Googleマップを無料で利用できる範囲が大幅に縮小されたりしていたのですが、ここは人知れずひっそりとやっている程度の注目度の低いサイトですから、無料枠からはみ出すほどアクセスされる心配なんて無用と、それ以降も何も対応を行っていませんでした。

とはいえ心の片隅にはこのことがずっと引っ掛かっていましたし、Google次第のことゆえ今後も利用規約等が変更されないなんて保証もなく、それに左右される前に予め代替手段を講じておきたいと考えてはいたのです。

そこで少し前から細々と、オープンソース系のLeaflet APIを利用した地図表示を試していたところ、Googleマップとほぼ同じことができるようになってきたので、今回はそれをネタにして記事更新してみます。
（コロナで高い山まで遠出するのは気が進まない上、残暑がなかなか収まらなくて近場の低い山からも足が遠のいたままという、山行の頻度が減って時間に余裕がある状況がこの件ではプラスに働きました）

---

【１. Leaflet による山歩きコースマップの作成】

直近（2023/08/25）に東高尾山稜を歩いた際のコースマップで、新旧を比較してみます。

まずは従来のGoogleマップによる地図表示で、前回の記事に載せたものと同一です。

大きなマップで見る（Googleが運営するFirebaseのサイトに遷移します。※上に埋め込んだマップも同サイト上のものです）

続いてこちらが、新たに試したLeafletによる地図表示です。初期表示は地理院地図＋オーバレイにしましたが、右上部のアイコンでGoogleマップに切り替え、オーバレイ２枚をOFFにすれば、上とほとんど一緒の地図に。

大きなマップで見る（Googleが運営するFirebaseのサイトに遷移します。※上に埋め込んだマップも同サイト上のものです）

以下の３点が、どちらもほぼ同様に行えています。
　　●GPSデータによるトラックの表示　　※データ形式は、GoogleマップがKML、LeafletはGPX
　　●節目となる地点へのピンの表示
　　●ピンをクリックした際に、補足情報やその地点の写真などをポップアップ表示

それに加えてLeafletでは、次のことも行えるようになりました。
　　●ベースとなる地図として、
　　　　　(1)国土地理院の地形図　(2)Googleマップ　(3)OpenStreetMap　(4)EsriWorldのTopoMap
　　　の４種を切り替えられ、国土地理院の地形図とGoogleマップでは標準地図のほか衛星写真も選択可
　　　　　※Leafletを利用してGoogleマップを表示する分には、Google MapsのAPIキーは必要ないみたい ←【これ結構重要】
　　●さらにオーバレイとして、国土地理院の色別標高図や陰影起伏図などを重ねて表示できる
　　　　（↑これらの機能は、右上部のアイコンをクリックした際に表示されるメニューで指定する）

なかでも、色別標高図や陰影起伏図の重ね表示は視覚的にかなり強いインパクトがあるので、以前と同等というよりは、より進化した地図にできたように思うのですが、今回サンプルにした東高尾山稜が標高の低い山域なので、初期表示されるエリアのままで重ね表示をしても、あまり大きなインパクトはありません。
そこで、高山帯のエリアに移動して重ね表示の有無を比較するとこんな具合になりました。オーバレイ表示によって、平面ながらかなりの立体感が出せているのを感じて頂けるかと思います。

≪重ね表示なし≫　国土地理院の地形図をふつうに表示

≪重ね表示あり≫　国土地理院の地形図に、色別標高図と陰影起伏図の両方を重ねて表示

早速、次回更新する新しい山行記事から、Leafletの地図を使用する予定ですが、ゆくゆくは折を見て過去記事の地図も全部切り替えたいですね。手間も時間も相当かかりそうで、すぐには終わらないでしょうけれど。

---

【２. Leaflet による日本百名山リストマップの作成】

さらに、こちらはブログ用ではなくメインのWEBサイト用ですが、日本百名山のマップもLeafletで作ってみました。このブログの横幅だと何が何だかという表示なので、ぜひ別ウインドウで大きな地図をご覧頂ければ。


大きなマップで見る（Googleが運営するFirebaseのサイトに遷移します。※上に埋め込んだマップも同サイト上のものです）

このマップでも、ベースとなる地図を航空写真やGoogleマップなどに変えたり、色別標高図や陰影起伏図を重ね表示できたりするようにしているほか、百山の位置に配置した各アイコンをクリックすることで
　　●山名と標高
　　●山行記録へのリンク（登頂している山の場合）＆ マウスオーバーで山行コースも
　　●山頂の写真（カメラを持ち歩くようになった2010年２月以降に登頂した山の場合）
がポップアップ表示されるようにしました。例えば霧ヶ峰を例にとるとこんな具合です。

また各山の座標については、先行するいくつかのサイトの値を参考にさせて頂きましたが、そのほとんどが、地図の縮尺を最大とかまで上げてしまうとピークからずれた位置を示したりしていたため、縮尺を上げてもほぼピーク付近を示せるように調整したりもしていて、概ね満足できる仕上がりになりました。

こちらも折を見て、さらに日本三百名山とか、500件に近付いている山行記録の一覧とか、そのほか地域別のマップ（相模原市の山とか）なんかも手掛けてみたいという思いはあるけれど、果たしてそんな時間を捻出できるのかがネックになりそう。「言霊」ということもあるので、一応書いておいてはみましたが、はて‥‥

タグ：雑感