全山行の一覧マップが完成しました！ [雑感]
2023/10/28(土)
これまでに、各回ごとのコース図や日本三百名山のマップを Leaflet API で作成してきましたが、懸案だった全山行の一覧マップがついに完成しました。
マップ内の番号をクリックすると、各山行の年月日やコースなどの詳細と、山行記録へのリンクがポップアップ表示され、そこから各山行の記事に直接飛べるので、目次の代わりにもなって機能性はほぼ十分。
しかも、歩いた本人だから、ということもあるでしょうが、これが眺めているだけでも結構楽しめるのです。見た目の良さもありつつ、実用性も兼ね備えられたことで、概ね満足できる出来栄えになったと思います。
そのマップがこちら。
大きなマップで見る（Googleが運営するFirebaseのサイトに遷移します。※上に埋め込んだマップも同サイト上のものです）
難点を挙げれば、マップ内では現時点でも500個近い番号アイコンが大渋滞、縮尺を変えなければ見えない番号が大半ですし、ポップアップ表示も地図の大半を覆い隠すなど、このブログの横幅のままで使うには少々無理があるのを否めませんので、ぜひマップ左下のリンクから、大きな地図を別ウインドウで開いてご覧下さい。
さらに欲を言えば、番号アイコンをクリックして詳細情報をポップアップ表示した時に、その山行で歩いたコース（＝GPSログ）まで表示できれば理想的だと思っているのですが、
| ●クリック時に実行されるイベントで、クリックされたのがどの番号アイコンだったかを知る術が不明 ●一度表示したGPSログの消し方も分からず、番号アイコンを次々とクリックしていくと、それらのログ全部が同時に表示される事態になってしまう |
さて、あとで別館のウェブサイトの地図も更新しておかなければ。あちらではもう少し大きなサイズで表示できるので、こちらよりもいくらか見やすい印象をもってご覧頂けることでしょう。
タグ：雑感
日本百名山～日本三百名山のマップも Leaflet で作成 [雑感]
2023/09/20(水)
2023/09/22(金)追記あり
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 のデフォルトらしく、より南にあるものほど前面に表示されるようです。最初はそのままにしていましたが、せっかく登頂済みの山と未登頂の山とでマーカーを区別したのに、目立つ色にしたはずの登頂済みの山のマーカーが後ろに隠れて存在感を失ってしまう状況が多々発生しているのが気になって、その対策をしてみました。
現在の版では、山のカテゴリーごとにマーカーの重ね具合を変え、
●三百名山(最背面) → 二百名山(中間面) → 百名山(最前面) として、百名山が目立つように
●それぞれのカテゴリーの中では、登頂済みの山をより前面に
としたことで、登頂済みの山の所在が引き立つ地図にできたように思います。
タグ：雑感
マップを 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件に近付いている山行記録の一覧とか、そのほか地域別のマップ（相模原市の山とか）なんかも手掛けてみたいという思いはあるけれど、果たしてそんな時間を捻出できるのかがネックになりそう。「言霊」ということもあるので、一応書いておいてはみましたが、はて‥‥
タグ：雑感
