山行記録
ログ取りがなかなか安定してきたので、次はこれをいい感じに図とかグラフとか数値とかにしたい。今はgpsvisualizerを使ってSVG画像を作ったり、Googleスプレッドシートを使って標高グラフを作ったりしてる
https://dalomo.net/blog/2023/03/04/1982/
けれど、これが一発ポンでできると嬉しい。
GPSvisualizerの代わり
GPSvisualizerでSVG画像を作っていたわけだけど、ここで使われているマップはOpenStreetMapのタイルであり、登山用というわけではない。調べてみると国土地理院の地図がスタンダードに使われているものらしい。それプラス、画像として表示するのではなく地図をそのまま埋め込むような形で表示できると嬉しい。それを可能にするライブラリとして
https://docs.mapbox.com/jp/mapbox-gl-js/overview/
等がある。今回はサンプルが探しやすそうなLeafletにする。
地理院タイルの使い方は
https://maps.gsi.go.jp/development/siyou.html
https://maps.gsi.go.jp/development/siyou.html#siyou-url
https://maps.gsi.go.jp/development/ichiran.html#std2
https://maps.gsi.go.jp/development/sample.html
とか。ついでにGitHubPagesを使う。
地理院タイル+Leaflet
まずはLeafletのチュートリアルをやってみる。
https://leafletjs.com/examples/quick-start/
とりあえず表示ができた。そしたら既存のログを使って一旦手動でラインを引いてみる。
https://drive.google.com/file/d/1nAgK37ZB2speA89eUzGoZhe72nvZhKUL/view?usp=sharing
https://leafletjs.com/reference.html#polyline
おー、いい感じ。元の
これよりやっぱいいよね。そしたらファイルをアップロードして、それをもとにマップに描画できるようにしていきたい。
CSVファイルの読み込み
https://developer.mozilla.org/ja/docs/Web/API/File_API/Using_files_from_web_applications
こちらを参考に
がんばって書いた。あんまりキレイとは言えないけど…。でもとりあえず
直近データも整形されてれば表示される！
…と、ここまできて、あれ？これブログに埋め込めなくね？と疑問が浮かぶ。。。
とりあえずここまで。