山行記録

ログ取りがなかなか安定してきたので、次はこれをいい感じに図とかグラフとか数値とかにしたい。今はgpsvisualizerを使ってSVG画像を作ったり、Googleスプレッドシートを使って標高グラフを作ったりしてる

山行記録のための行動ログを取りたい④ 動作確認+ログの加工

山に行ってきたこの山行の時に持っていった。バッテリー自分が普段から使っているモバイルバッテリーだとこういった電子工作に使うと安全機能が働いて電源が切れてしまう。そのためそれ用のバッテリーを買うことにした。これ。ちょっとでかい。一日使っても全...

dalomo.net

2023.03.04

けれど、これが一発ポンでできると嬉しい。

GPSvisualizerの代わり

GPSvisualizerでSVG画像を作っていたわけだけど、ここで使われているマップはOpenStreetMapのタイルであり、登山用というわけではない。調べてみると国土地理院の地図がスタンダードに使われているものらしい。それプラス、画像として表示するのではなく地図をそのまま埋め込むような形で表示できると嬉しい。それを可能にするライブラリとして

Leaflet — an open-source JavaScript library for interactive maps

Leaflet is a modern, lightweight open-source JavaScript library for mobile-friendly interactive maps.

leafletjs.com

OpenLayers - Welcome

openlayers.org

Cesium: The Platform for 3D Geospatial

The Cesium platform provides the foundations any software application needs to utilize 3D geospatial data: visualization...

www.cesium.com

Mapbox GL JS

docs.mapbox.com

等がある。今回はサンプルが探しやすそうなLeafletにする。

地理院タイルの使い方は

地理院地図｜地理院タイルについて

maps.gsi.go.jp

地理院地図｜地理院タイルについて

maps.gsi.go.jp

地理院地図｜地理院タイル一覧

maps.gsi.go.jp

地理院地図｜地理院タイルを用いたサイト構築サンプル集

maps.gsi.go.jp

とか。ついでにGitHubPagesを使う。

山行記録作成

dalomo-net.github.io

地理院タイル+Leaflet

まずはLeafletのチュートリアルをやってみる。

Quick Start Guide - Leaflet - a JavaScript library for interactive maps

leafletjs.com

とりあえず表示ができた。そしたら既存のログを使って一旦手動でラインを引いてみる。

20230527johota.CSV

drive.google.com

Documentation - Leaflet - a JavaScript library for interactive maps

leafletjs.com

おー、いい感じ。元の

これよりやっぱいいよね。そしたらファイルをアップロードして、それをもとにマップに描画できるようにしていきたい。

CSVファイルの読み込み

ウェブアプリケーションからのファイルの使用 - Web API | MDN

ファイル API を使用すると、ウェブコンテンツがユーザーにローカルファイルを選択するように指示し、それらのファイルを読み取ることができるようになりました。この選択は HTML の 要素を使用したり、ドラッグ & ドロップを行ったりすること...

developer.mozilla.org

こちらを参考に

がんばって書いた。あんまりキレイとは言えないけど…。でもとりあえず

直近データも整形されてれば表示される！

…と、ここまできて、あれ？これブログに埋め込めなくね？と疑問が浮かぶ。。。

とりあえずここまで。

山行記録作成

dalomo-net.github.io