日本百名山～日本三百名山のマップも Leaflet で作成

2023/09/20(水)
2023/09/22(金)追記あり

つい４日前に、Leaflet API による地図作成を試行した結果、山歩きの記事に添えるコースマップと、日本百名山のマップが作成できたと書いたばかりですが、気分が乗っているうちにと、対象を三百名山にまで広げたマップも作成してみたら、これが割と良い出来映えになったので、似たような内容ですが追加で記事にしました。

そのマップがこちら。
さすがに地図内にマーカーを300個も乗せると、このブログの横幅では重なりまくって訳の分からない表示にしかならないので、ぜひ大きな地図を別ウインドウで開いてご覧頂ければ。

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

基本的なコンセプトは、先日作成した百名山のマップと同じで、
　　●ベースとなる地図として、
　　　　　(1)国土地理院の地形図　(2)Googleマップ　(3)OpenStreetMap　(4)EsriWorldのTopoMap
　　　の４種が選べて、国土地理院の地形図とGoogleマップでは標準地図のほか衛星写真も選択できる
　　●さらにオーバレイとして、国土地理院の色別標高図や陰影起伏図などを重ねて表示することも可
　　●各山のアイコンをクリックすることで
　　　　　(1) 山名、標高、百名山・二百名山・三百名山の区分
　　　　　(2) 山行記録へのリンクとコースの表示（登頂済みの山の場合）
　　　　　(3) 山頂の写真（カメラを持ち歩き始めた2010年２月以降に訪れた山の場合）
　　　がポップアップ表示される
とした上で、なにしろ山の数が多くてマーカーが大渋滞するので、右上部にチェックボックスを置いて、
　　▲百名山
　　▲二百名山（のうち百名山と重複しない100座）
　　▲三百名山（のうち百名山・二百名山と重複しない101座）
ごとに表示のオン／オフができるようにしました。

また、やはり百名山マップの作成時と同様に、参考にしたいくつかのサイトのマップでは不正確な値が多かった各山の座標を調整して、国土地理院の地形図で縮尺を最大（レベル16）まで上げても、全ての山できちんと山頂の位置にマーカーが表示されるようにしました。
（基本的には地形図で一番高い標高点の位置を採用し、標高点がなく三角点だけが記載されている多くの山では、その三角点の位置としました。中には、どこを山頂とするか悩ましい山もいくつかありましたが‥‥）

一例として大菩薩嶺を選んでみると、こんな具合の表示になります。

手前味噌ながら、これ、相当いい地図なのではないかと。

見た目的にも機能的にも良く出来ていると思いますし、ただ眺めてるだけでも結構楽しい！！

見に来られる方も稀なこんな無名のサイトで人知れず公開するしか術のないのがもどかしいのですが、ウェブページの宿命通り、JavaScriptのコードとかが完全にオープンになっていますので、もしも流用してみたいと思われた方がいらっしゃいましたら、「ソースを表示」からコピーしてそのまま使って頂いて結構です。
（当方へのご連絡や流用元の明記なども不要です。私自身、Leafletで地図を表示させる上でのいくつものTipsを、数々の先行サイトから拝借させて頂きましたし）

とはいえ、本当に「そのまま」では、私が登頂済みか未登頂かでマーカーの色が違ったままになりますし、私が登頂した日付や山行記事へのリンクも表示されてしまいますから、最低限そのあたりの仕組みをバッサリ落とす程度のJavaScriptの改修をしなければ、流用するのが難しいかもしれませんが‥‥

---

※以下、2023/09/22追記

後日、さらなる若干の改良を行いました。

１．ベースとなる地図を追加して、国土地理院の「白地図」も選択できるように

白地図は行政界（都道府県や市区町村の境界）と都道府県名・市区町村名だけを記載したもので、どの山がどんな市町村に属するのかが分かりやすく、色々な発見もできて面白かったので、追加してみました。

例えば、地図を普通に表示するだけでは山形県と新潟県の県境にあるようにしか見えない飯豊山が‥‥

※赤枠内に赤字で示した行政区域名は、画像編集で追記したものです（次の画像も同様に）

行政界が見やすい白地図で縮尺を上げていくと、山形県と新潟県の間に挟まれつつも、飯豊山の稜線部だけはその両県には属さず、南東側から細長く入り込んでいる福島県の領域であることが分かります。

こうなった経緯には飯豊山信仰による歴史的背景があって、山麓の喜多方市にある飯豊山神社から山頂の奥宮へと続く参道はすべて一体のものであり、二県にまたがるのはおかしいとの訴えを受けたものだとか。

このようなことにまで思いを馳せられるのも、地図を見る楽しさではないでしょうか。

２．山のマーカーの重なり方を調整

なにしろ地図上に301個ものマーカーがあるので、縮尺にもよりますがその多くが重なってしまいがちです。

マーカーの重なりについては、緯度で制御するのが Leaflet API のデフォルトらしく、より南にあるものほど前面に表示されるようです。最初はそのままにしていましたが、せっかく登頂済みの山と未登頂の山とでマーカーを区別したのに、目立つ色にしたはずの登頂済みの山のマーカーが後ろに隠れて存在感を失ってしまう状況が多々発生しているのが気になって、その対策をしてみました。

現在の版では、山のカテゴリーごとにマーカーの重ね具合を変え、
　　●三百名山(最背面) → 二百名山(中間面) → 百名山(最前面) として、百名山が目立つように
　　●それぞれのカテゴリーの中では、登頂済みの山をより前面に
としたことで、登頂済みの山の所在が引き立つ地図にできたように思います。

タグ：雑感