art2nd https://blog.hatena.ne.jp/art2nd/ 晴歩雨描 https://2ndart.hatenablog.com/ 地図・マップ ホームページ、Web作成 前回、地図データを扱うJavaScript ライブラリ「Leaflet」を使って、GPSログ(GPXファイル)を地図に表示してみた。 今回、この地図に以下の機能の追加をした。サーバーサイドの処理なしで、すべてJavaScriptで行っている。 開始地点と終了地点のマーカーにポップアップ表示。 ポップアップに日時と緯度経度を表示。 ポップアップに標高を表示。 画面右上に、情報ラベル枠を表示。 情報ラベルに、出発時間、到着時間、所要時間を表示。 情報ラベルに、直線距離、移動距離を表示。 情報ラベルに、最高地点、最低地点を表示。 サンプル ＞＞＞ https://ok2nd.github.io/le… 190 <iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2F2ndart.hatenablog.com%2Fentry%2F2021%2F05%2F08%2F114448" title="LeafletでGPSログ(GPX)地図：移動距離、所要時間、出発時間、到着時間、最高地点、最低地点表示。Google マップ、OpenStreetMap、国土地理院地図、Esri World Topo Map。 - 晴歩雨描" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;"></iframe> https://cdn-ak.f.st-hatena.com/images/fotolife/a/art2nd/20210514/20210514113804.jpg Hatena Blog https://hatena.blog 2021-05-08 11:44:48 rich https://2ndart.hatenablog.com/entry/2021/05/08/114448 1.0 100%