トレイルのお供にGeolocation APIで現在位置を取得するスマホ用マップを作成する
画像（1枚）

緯度経度からJavaScriptライブラリLeaflet.jsを使って地図上にポイントを記す枠組みを試した筆者(記事)であるが、よく見かける位置情報取得ボタンから現在位置を取得する方法を考えた。
○Geolocation APIで現在位置を取得

W3Cが公式仕様として公開しているGeolocation APIを使えばブラウザを通じた位置情報を取得できる。
スマホやPCなどOSが持つ位置情報を本人承諾のもとに取得できる。前回のHTMLファイルのマーカー部分を以下のように書き換える。

Leaflet Test

Leaflet.jsのL.markerでの位置挿入の代わりに L.control(公式API)とL.DomUtil(公式API)でボタンを作成し、 Geolocation APIのGet current position(公式API)で現在位置を取得。前回も使ったL.marker(公式API)でマーカーを立てる。

htmlファイル(geo.html)で保存し、保存フォルダ/ディレクトリ(デスクトップ/20261027)からpython標準サーバを以下のコマンドで立ち上げる。

python -m http.server 8000

ブラウザでローカルホストのhttp://localhost:8000/geo.htmlにアクセスすると

現在地ボタンを押すとズームアップで現在地に移動する。

ちなみにPCで取得するGeolocation APIの位置情報は、おおよそのものとなる。今回の表示位置は㎞近く大きくずれているのであしからず
○スマホ用にアップロードして確認する

やはり、散歩やトレッキングなどで実践するには外部からスマホのブラウザでアクセスできてこそだろう。1枚のHTMLだけなので、アップロードして外部からモバイルでアクセスできればいい。

筆者はGitHubのリポジトリを活用してみることにした。アカウントがあれば、geo.htmlをindex.htmlに変えて自身のリポジトリのAddfileからアップロードし、Settingsのpagesメニューからデプロイすることでユーザー名.github.ioページで確認できる。もちろんレンタルサーバを借りていれば、そちらでも可能だ。


.
編集部おすすめ